Release candidate

Addition of Federated Identity Account page

.all-contributorsrc

@@ -0,0 +1,243 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "lordvlad",
+      "name": "Waldemar Reusch",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1217769?v=4",
+      "profile": "https://github.com/lordvlad",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "willwill96",
+      "name": "William Will",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10997562?v=4",
+      "profile": "https://willwill96.github.io/the-ui-dawg-static-site/en/introduction/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Ann2827",
+      "name": "Bystrova Ann",
+      "avatar_url": "https://avatars.githubusercontent.com/u/32645809?v=4",
+      "profile": "https://github.com/Ann2827",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "mkreuzmayr",
+      "name": "Michael Kreuzmayr",
+      "avatar_url": "https://avatars.githubusercontent.com/u/20108212?v=4",
+      "profile": "https://github.com/mkreuzmayr",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Mstrodl",
+      "name": "Mary ",
+      "avatar_url": "https://avatars.githubusercontent.com/u/6877780?v=4",
+      "profile": "https://coolmathgames.tech",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Tasyp",
+      "name": "German Öö",
+      "avatar_url": "https://avatars.githubusercontent.com/u/6623212?v=4",
+      "profile": "https://tasyp.xyz/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "revolunet",
+      "name": "Julien Bouquillon",
+      "avatar_url": "https://avatars.githubusercontent.com/u/124937?v=4",
+      "profile": "https://revolunet.com",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "aidangilmore",
+      "name": "Aidan Gilmore",
+      "avatar_url": "https://avatars.githubusercontent.com/u/32880357?v=4",
+      "profile": "https://github.com/aidangilmore",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "0x-Void",
+      "name": "Void",
+      "avatar_url": "https://avatars.githubusercontent.com/u/32745739?v=4",
+      "profile": "https://github.com/0x-Void",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "juffe",
+      "name": "juffe",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5393231?v=4",
+      "profile": "https://github.com/juffe",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "lazToum",
+      "name": "Lazaros Toumanidis",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4764837?v=4",
+      "profile": "https://github.com/lazToum",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "marcmrf",
+      "name": "Marc",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9928519?v=4",
+      "profile": "https://github.com/marcmrf",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "kasir-barati",
+      "name": "Kasir Barati",
+      "avatar_url": "https://avatars.githubusercontent.com/u/73785723?v=4",
+      "profile": "http://kasir-barati.github.io",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "asashay",
+      "name": "Alex Oliynyk",
+      "avatar_url": "https://avatars.githubusercontent.com/u/10714670?v=4",
+      "profile": "https://github.com/asashay",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "thosil",
+      "name": "Thomas Silvestre",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1140574?v=4",
+      "profile": "https://www.gravitysoftware.be",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "satanshiro",
+      "name": "satanshiro",
+      "avatar_url": "https://avatars.githubusercontent.com/u/38865738?v=4",
+      "profile": "https://github.com/satanshiro",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "kpoelhekke",
+      "name": "Koen Poelhekke",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1632377?v=4",
+      "profile": "https://poelhekke.dev",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "zavoloklom",
+      "name": "Sergey Kupletsky",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4151869?v=4",
+      "profile": "https://github.com/zavoloklom",
+      "contributions": [
+        "test",
+        "code"
+      ]
+    },
+    {
+      "login": "rome-user",
+      "name": "rome-user",
+      "avatar_url": "https://avatars.githubusercontent.com/u/114131048?v=4",
+      "profile": "https://github.com/rome-user",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "celinepelletier",
+      "name": "Céline Pelletier",
+      "avatar_url": "https://avatars.githubusercontent.com/u/82821620?v=4",
+      "profile": "https://github.com/celinepelletier",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "xgp",
+      "name": "Garth",
+      "avatar_url": "https://avatars.githubusercontent.com/u/244253?v=4",
+      "profile": "https://github.com/xgp",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "BlackVoid",
+      "name": "Felix Gustavsson",
+      "avatar_url": "https://avatars.githubusercontent.com/u/673720?v=4",
+      "profile": "https://github.com/BlackVoid",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "msiemens",
+      "name": "Markus Siemens",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1873922?v=4",
+      "profile": "https://m-siemens.de/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "law108000",
+      "name": "Rlok",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8112024?v=4",
+      "profile": "https://github.com/law108000",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Moulyy",
+      "name": "Moulyy",
+      "avatar_url": "https://avatars.githubusercontent.com/u/115405804?v=4",
+      "profile": "https://github.com/Moulyy",
+      "contributions": [
+        "code"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true,
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "projectName": "keycloakify",
+  "projectOwner": "keycloakify",
+  "commitType": "docs"
+}

.gitattributes

@@ -0,0 +1,3 @@
+src/lib/i18n/generated_kcMessages/* linguist-documentation
+src/bin/keycloakify/index.ts -linguist-detectable
+src/bin/install-builtin-keycloak-themes.ts -linguist-detectable

.github/FUNDING.yaml

@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+github: [garronej]
+custom: ['https://www.ringerhq.com/experts/garronej']

.github/workflows/ci.yaml

@@ -2,75 +2,139 @@ name: ci
 on:
   push:
     branches:
-      - develop
+      - main
   pull_request:
     branches:
-      - develop
+      - main
 
 jobs:
 
-  test_node:
+  test_lint:
+    runs-on: ubuntu-latest
+    if: ${{ !github.event.created && github.repository != 'garronej/ts-ci' }}
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+    - uses: bahmutov/npm-install@v1
+    - name: If this step fails run 'yarn format' then commit again.
+      run: yarn format:check
+  test:
     runs-on: ${{ matrix.os }}
+    needs: test_lint
     strategy:
       matrix:
-        node: [ '14', '13', '12' ]
+        node: [ '18' ]
         os: [ ubuntu-latest ]
     name: Test with Node v${{ matrix.node }} on ${{ matrix.os }}
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node }}
-    - run: npm ci
-    - run: npm run build
-    - run: npm run test
+    - uses: bahmutov/npm-install@v1
+    - run: yarn build
+    - run: yarn test
+    #- run: yarn test:keycloakify-starter
 
-
-  trigger_publish:
-    name: Trigger publish.yaml workflow if package.json version updated ( and secrets.PAT is set ).
+  storybook:
     runs-on: ubuntu-latest
-    env:
-      PAT: ${{secrets.PAT}}
-    if: github.event_name == 'push' && github.event.head_commit.author.name != 'ts_ci'
-    needs: test_node
+    if: github.event_name == 'push'
+    needs: test
     steps:
-
-    - name: Get version on latest
-      id: v_latest
-      uses: garronej/github_actions_toolkit@v1.9
-      with: 
-        action_name: get_package_json_version
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.repository.name}}
-        branch: latest
-        compare_to_version: '0.0.0'
-
-    - name: Get version on develop
-      id: v_develop
-      uses: garronej/github_actions_toolkit@v1.9
-      with: 
-        action_name: get_package_json_version
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.repository.name}}
-        branch: ${{ github.sha }}
-        compare_to_version: ${{steps.v_latest.outputs.version || '0.0.0'}}
-
-    - name: 'Trigger the ''publish'' workflow' 
-      if: ${{ !!env.PAT && steps.v_develop.outputs.compare_result == '1' }}
-      uses: garronej/github_actions_toolkit@v1.9
-      env:
-        GITHUB_TOKEN: ${{ secrets.PAT }} 
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        action_name: dispatch_event
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.repository.name}}
-        event_type: publish
-        client_payload_json: |
-          ${{
-            format(
-              '{{"from_version":"{0}","to_version":"{1}","repo":"{2}"}}',
-              steps.v_latest.outputs.version,
-              steps.v_develop.outputs.version,
-              github.event.repository.name
-            )
-          }}
+        node-version: '18'
+    - uses: bahmutov/npm-install@v1
+    - run: yarn build-storybook -o ./build_storybook
+    - run: git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${{github.repository}}.git
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - run: npx -y -p gh-pages@3.1.0 gh-pages -d ./build_storybook -u "github-actions-bot <actions@github.com>" 
+
+  check_if_version_upgraded:
+    name: Check if version upgrade
+    # When someone forks the repo and opens a PR we want to enables the tests to be run (the previous jobs)
+    # but obviously only us should be allowed to release.
+    # In the following check we make sure that we own the branch this CI workflow is running on before continuing.
+    # Without this check, trying to release would fail anyway because only us have the correct secret.NPM_TOKEN but
+    # it's cleaner to stop the execution instead of letting the CI crash.
+    if: |
+      github.event_name == 'push' || 
+      github.event.pull_request.head.repo.owner.login == github.event.pull_request.base.repo.owner.login 
+    runs-on: ubuntu-latest
+    needs: test
+    outputs:
+      from_version: ${{ steps.step1.outputs.from_version }}
+      to_version: ${{ steps.step1.outputs.to_version }}
+      is_upgraded_version: ${{ steps.step1.outputs.is_upgraded_version }}
+      is_pre_release: ${{steps.step1.outputs.is_pre_release }}
+    steps:
+    - uses: garronej/ts-ci@v2.1.2
+      id: step1
+      with: 
+        action_name: is_package_json_version_upgraded
+
+  create_github_release:
+    runs-on: ubuntu-latest
+    # We create release only if the version in the package.json have been upgraded and this CI is running against the main branch.
+    # We allow branches with a PR open on main to publish pre-release (x.y.z-rc.u) but not actual releases.
+    if: |
+      needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true' &&
+      (
+        github.event_name == 'push' ||
+        needs.check_if_version_upgraded.outputs.is_pre_release == 'true'
+      )
+    needs: 
+      - check_if_version_upgraded
+    steps:
+    - uses: softprops/action-gh-release@v2
+      with:
+        name: Release v${{ needs.check_if_version_upgraded.outputs.to_version }}
+        tag_name: v${{ needs.check_if_version_upgraded.outputs.to_version }}
+        target_commitish: ${{ github.head_ref || github.ref }}
+        generate_release_notes: true
+        draft: false
+        prerelease: ${{ needs.check_if_version_upgraded.outputs.is_pre_release == 'true' }}
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 
+
+  publish_on_npm:
+    runs-on: ubuntu-latest
+    needs: 
+      - create_github_release
+      - check_if_version_upgraded
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        ref: ${{ github.ref }}
+    - uses: actions/setup-node@v4
+      with:
+        registry-url: https://registry.npmjs.org/
+    - uses: bahmutov/npm-install@v1
+    - run: yarn build
+    - run: npx -y -p denoify@1.6.12 enable_short_npm_import_path
+      env:
+        DRY_RUN: "0"
+    - uses: garronej/ts-ci@v2.1.2
+      with: 
+        action_name: remove_dark_mode_specific_images_from_readme
+    - name: Publishing on NPM
+      run: |
+        if [ "$(npm show . version)" = "$VERSION" ]; then
+          echo "This version is already published"
+          exit 0
+        fi
+        if [ "$NODE_AUTH_TOKEN" = "" ]; then
+          echo "Can't publish on NPM, You must first create a secret called NPM_TOKEN that contains your NPM auth token. https://help.github.com/en/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets"
+          false
+        fi
+        EXTRA_ARGS=""
+        if [ "$IS_PRE_RELEASE" = "true" ]; then
+            EXTRA_ARGS="--tag next"
+        fi
+        npm publish $EXTRA_ARGS
+      env:
+        NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}
+        IS_PRE_RELEASE: ${{ needs.check_if_version_upgraded.outputs.is_pre_release }}

.github/workflows/publish.yaml

@@ -1,106 +0,0 @@
-on:
-  repository_dispatch:
-    types: publish
-
-jobs:
-  update_changelog_and_sync_package_lock_version:
-    name: Update CHANGELOG.md and make sure package.json and package-lock.json versions matches.
-    runs-on: ubuntu-latest
-    steps:
-    - name: Synchronize package.json  and package-lock.json version if needed.
-      uses: garronej/github_actions_toolkit@v1.9
-      env:
-        GITHUB_TOKEN: ${{ secrets.PAT }} 
-      with:
-        action_name: sync_package_and_package_lock_version
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.client_payload.repo}}
-        branch: develop
-        commit_author_email: ts_ci@github.com
-    - name: Update CHANGELOG.md
-      if: ${{ !!github.event.client_payload.from_version }}
-      uses: garronej/github_actions_toolkit@v1.9
-      env:
-        GITHUB_TOKEN: ${{ secrets.PAT }} 
-      with:
-        action_name: update_changelog
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.client_payload.repo}}
-        branch_behind: latest
-        branch_ahead: develop
-        commit_author_email: ts_ci@github.com
-        exclude_commit_from_author_names_json: '["ts_ci"]'
-
-  publish:
-    runs-on: ubuntu-latest
-    needs: update_changelog_and_sync_package_lock_version
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
-        ref: develop
-    - name: Remove .github directory, useless on 'latest' branch
-      run: rm -r .github
-    - name: Remove branch 'latest' 
-      continue-on-error: true
-      run: |
-        git branch -d latest || true
-        git push origin :latest
-    - name: Create the new 'latest' branch
-      run: |
-        git branch latest
-        git checkout latest
-    - uses: actions/setup-node@v1
-    - run: npm ci
-    - run: npm run enable_short_import_path
-      env:
-        DRY_RUN: "0"
-    - name: (DEBUG) Show how the files have been moved to enable short import
-      run: ls -lR
-    - name: Publishing on NPM
-      run: |
-        if [ "$(npm show . version)" = "$VERSION" ]; then
-          echo "This version is already published"
-          exit 0
-        fi
-        if [ "$NPM_TOKEN" = "" ]; then
-          echo "Can't publish on NPM, You must first create a secret called NPM_TOKEN that contains your NPM auth token. https://help.github.com/en/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets"
-          false
-        fi
-        echo '//registry.npmjs.org/:_authToken=${NPM_TOKEN}' > .npmrc
-        npm publish
-        rm .npmrc
-      env:
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        VERSION: ${{ github.event.client_payload.to_version }}
-    - name: Commit changes
-      run: |
-        git config --local user.email "ts_ci@github.com"
-        git config --local user.name "ts_ci"
-        git add -A
-        git commit -am "Enabling shorter import paths [automatic]"
-    - run: git push origin latest
-    - name: Release body
-      id: id_rb
-      run: |
-        if [ "$FROM_VERSION" = "" ]; then
-            echo "::set-output name=body::🚀"
-        else
-            echo "::set-output name=body::📋 [CHANGELOG](https://github.com/$OWNER/$REPO/blob/$REF/CHANGELOG.md)"
-        fi
-      env: 
-        FROM_VERSION: ${{ github.event.client_payload.from_version }}
-        OWNER: ${{github.repository_owner}}
-        REPO: ${{github.event.client_payload.repo}}
-        REF: v${{github.event.client_payload.to_version}}
-    - name: Create Release
-      uses: garronej/create-release@master
-      env:
-        GITHUB_TOKEN: ${{ secrets.PAT }} 
-      with:
-        tag_name: v${{ github.event.client_payload.to_version }}
-        release_name: Release v${{ github.event.client_payload.to_version }}
-        branch: latest
-        draft: false
-        prerelease: false
-        body: ${{ steps.id_rb.outputs.body }}

.gitignore

@@ -41,5 +41,21 @@ jspm_packages
 .DS_Store
 
 /dist
-
+/keycloakify_starter_test/
+/sample_custom_react_project/
 /sample_react_project/
+/.yarn_home/
+
+.idea
+
+/src/login/i18n/baseMessages/
+/src/account/i18n/baseMessages/
+
+# VS Code devcontainers
+.devcontainer
+/.yarn
+/.yarnrc.yml
+
+/stories/assets/fonts/
+/build_storybook/
+/storybook-static/

.prettierignore

@@ -0,0 +1,15 @@
+node_modules/
+/dist/
+/CHANGELOG.md
+/.yarn_home/
+/src/test/apps/
+/src/tools/types/
+/build_keycloak/
+/.vscode/
+/src/login/i18n/baseMessages/
+/src/account/i18n/baseMessages/
+/dist_test
+/sample_react_project/
+/sample_custom_react_project/
+/keycloakify_starter_test/
+/.storybook/static/keycloak-resources/

.prettierrc.json

@@ -0,0 +1,24 @@
+{
+    "printWidth": 90,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "arrowParens": "avoid",
+    "overrides": [
+        {
+            "files": "*.tsx",
+            "options": {
+                "printWidth": 150
+            }
+        },
+        {
+            "files": "useUserProfileForm.tsx",
+            "options": {
+                "printWidth": 150
+            }
+        }
+    ]
+}

.storybook/Containers.js

@@ -0,0 +1,70 @@
+
+import React from "react";
+import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
+import { useDarkMode } from "storybook-dark-mode";
+import { darkTheme, lightTheme } from "./customTheme";
+import "./static/fonts/WorkSans/font.css";
+
+export function DocsContainer({ children, context }) {
+    const isStorybookUiDark = useDarkMode();
+
+    const theme = isStorybookUiDark ? darkTheme : lightTheme;
+
+    const backgroundColor = theme.appBg;
+
+    return (
+        <>
+            <style>{`
+                body {
+                    padding: 0 !important;
+                    background-color: ${backgroundColor};
+                }
+
+                .docs-story {
+                    background-color: ${backgroundColor};
+                }
+                [id^=story--] .container {
+                    border: 1px dashed #e8e8e8;
+                }
+
+                .docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(3) {
+                    visibility: collapse;
+                }
+
+                .docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(2) p {
+                    font-size: 13px;
+                }
+            `}</style>
+            <BaseContainer
+                context={{
+                    ...context,
+                    "storyById": id => {
+                        const storyContext = context.storyById(id);
+                        return {
+                            ...storyContext,
+                            "parameters": {
+                                ...storyContext?.parameters,
+                                "docs": {
+                                    ...storyContext?.parameters?.docs,
+                                    "theme": isStorybookUiDark ? darkTheme : lightTheme
+                                }
+                            }
+                        };
+                    }
+                }}
+            >
+                {children}
+            </BaseContainer>
+        </>
+    );
+}
+
+export function CanvasContainer({ children }) {
+
+    return (
+        <>
+            {children}
+        </>
+    );
+
+}

.storybook/customTheme.js

@@ -0,0 +1,35 @@
+import { create } from "@storybook/theming";
+
+const brandImage = "logo.png";
+const brandTitle = "Keycloakify";
+const brandUrl = "https://github.com/keycloakify/keycloakify";
+const fontBase = '"Work Sans", sans-serif';
+const fontCode = "monospace";
+
+export const darkTheme = create({
+    "base": "dark",
+    "appBg": "#1E1E1E",
+    "appContentBg": "#161616",
+    "barBg": "#161616",
+    "colorSecondary": "#8585F6",
+    "textColor": "#FFFFFF",
+    brandImage,
+    brandTitle,
+    brandUrl,
+    fontBase,
+    fontCode
+});
+
+export const lightTheme = create({
+    "base": "light",
+    "appBg": "#F6F6F6",
+    "appContentBg": "#FFFFFF",
+    "barBg": "#FFFFFF",
+    "colorSecondary": "#000091",
+    "textColor": "#212121",
+    brandImage,
+    brandTitle,
+    brandUrl,
+    fontBase,
+    fontCode
+});

.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+    "stories": [
+        "../stories/**/*.stories.@(ts|tsx|mdx)"
+    ],
+    "addons": [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "storybook-dark-mode",
+        "@storybook/addon-a11y"
+    ],
+    "core": {
+        "builder": "webpack5"
+    },
+    "staticDirs": ["./static"]
+};

.storybook/manager-head.html

@@ -0,0 +1,32 @@
+<!-- start favicon -->
+<link rel="apple-touch-icon" sizes="180x180" href="/favicon_package/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon_package/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon_package/favicon-16x16.png">
+<link rel="manifest" href="/favicon_package/site.webmanifest">
+<link rel="mask-icon" href="/favicon_package/safari-pinned-tab.svg" color="#5bbad5">
+<!-- end favicon -->
+
+<!-- Meta tags generated by metatags.io -->
+<!-- Primary Meta Tags -->
+<title>Keycloakify Storybook</title>
+<meta name="title" content="Keycloakify Storybook">
+<meta name="description" content="Storybook of default components to use as a reference when building a custom Keycloak theme">
+
+<!-- Facebook Meta Tags -->
+<meta property="og:url" content="https://www.keycloakify.dev">
+<meta property="og:type" content="website">
+<meta property="og:title" content="Keycloakify Storybook">
+<meta property="og:description" content="Storybook of default components to use as a reference when building a custom Keycloak theme">
+<meta property="og:image" content="https://storybook.keycloakify.dev/preview.png">
+
+<!-- Twitter Meta Tags -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="Keycloakify Storybook">
+<meta name="twitter:description" content="Storybook of default components to use as a reference when building a custom Keycloak theme">
+<meta name="twitter:image" content="https://storybook.keycloakify.dev/preview.png">
+
+<link rel="preload" href="/fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="preload" href="/fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="preload" href="/fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="preload" href="/fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="stylesheet" type="text/css" href="/fonts/WorkSans/font.css">

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  "selectedPanel": 'storybook/a11y/panel',
+  "showPanel": false,
+});

.storybook/preview-head.html

@@ -0,0 +1,19 @@
+<style>
+    body.sb-show-main.sb-main-padded {
+        padding: 0;
+    }
+
+    body:not(.kcBodyClass) {
+        background-color: #393939;
+    }
+
+
+    body.sb-show-preparing-docs > .sb-wrapper {
+        visibility: hidden;
+    }
+
+    body .sb-preparing-story {
+        visibility: hidden;
+
+    }
+</style>

.storybook/preview.js

@@ -0,0 +1,172 @@
+import { darkTheme, lightTheme } from "./customTheme";
+import { DocsContainer, CanvasContainer } from "./Containers";
+
+export const parameters = {
+    "actions": { "argTypesRegex": "^on[A-Z].*" },
+    "controls": {
+        "matchers": {
+            "color": /(background|color)$/i,
+            "date": /Date$/,
+        },
+    },
+    "backgrounds": { "disable": true },
+    "darkMode": {
+        "light": lightTheme,
+        "dark": darkTheme,
+    },
+    "docs": {
+        "container": DocsContainer
+    },
+    "controls": {
+        "disable": true,
+    },
+    "actions": {
+        "disable": true
+    },
+    "viewport": {
+        "viewports": {
+            "1440p": {
+                "name": "1440p",
+                "styles": {
+                    "width": "2560px",
+                    "height": "1440px",
+                },
+            },
+            "fullHD": {
+                "name": "Full HD",
+                "styles": {
+                    "width": "1920px",
+                    "height": "1080px",
+                },
+            },
+            "macBookProBig": {
+                "name": "MacBook Pro Big",
+                "styles": {
+                    "width": "1024px",
+                    "height": "640px",
+                },
+            },
+            "macBookProMedium": {
+                "name": "MacBook Pro Medium",
+                "styles": {
+                    "width": "1440px",
+                    "height": "900px",
+                },
+            },
+            "macBookProSmall": {
+                "name": "MacBook Pro Small",
+                "styles": {
+                    "width": "1680px",
+                    "height": "1050px",
+                },
+            },
+            "pcAgent": {
+                "name": "PC Agent",
+                "styles": {
+                    "width": "960px",
+                    "height": "540px",
+                },
+            },
+            "iphone12Pro": {
+                "name": "Iphone 12 pro",
+                "styles": {
+                    "width": "390px",
+                    "height": "844px",
+                },
+            },
+            "iphone5se": {
+                "name": "Iphone 5/SE",
+                "styles": {
+                    "width": "320px",
+                    "height": "568px",
+                },
+            },
+            "ipadPro": {
+                "name": "Ipad pro",
+                "styles": {
+                    "width": "1240px",
+                    "height": "1366px",
+                },
+            },
+            "Galaxy s9+": {
+                "name": "Galaxy S9+",
+                "styles": {
+                    "width": "320px",
+                    "height": "658px",
+                },
+            }
+        },
+    },
+    "options": {
+        "storySort": (a, b) =>
+            getHardCodedWeight(b[1].kind) - getHardCodedWeight(a[1].kind),
+    },
+};
+
+export const decorators = [
+    (Story) => (
+        <CanvasContainer>
+            <Story />
+        </CanvasContainer>
+    ),
+];
+
+const { getHardCodedWeight } = (() => {
+
+    const orderedPagesPrefix = [
+        "Introduction",
+        "login/login.ftl",
+        "login/register.ftl",
+        "login/terms.ftl",
+        "login/error.ftl",
+        "login/code.ftl",
+        "login/delete-account-confirm.ftl",
+        "login/delete-credential.ftl",
+        "login/frontchannel-logout.ftl",
+        "login/idp-review-user-profile.ftl",
+        "login/info.ftl",
+        "login/login-config-totp.ftl",
+        "login/login-idp-link-confirm.ftl",
+        "login/login-idp-link-email.ftl",
+        "login/login-oauth-grant.ftl",
+        "login/login-otp.ftl",
+        "login/login-page-expired.ftl",
+        "login/login-password.ftl",
+        "login/login-reset-otp.ftl",
+        "login/login-reset-password.ftl",
+        "login/login-update-password.ftl",
+        "login/login-update-profile.ftl",
+        "login/login-username.ftl",
+        "login/login-verify-email.ftl",
+        "login/login-x509-info.ftl",
+        "login/logout-confirm.ftl",
+        "login/saml-post-form.ftl",
+        "login/select-authenticator.ftl",
+        "login/update-email.ftl",
+        "login/webauthn-authenticate.ftl",
+        "login/webauthn-error.ftl",
+        "login/webauthn-register.ftl",
+        "login/login-oauth2-device-verify-user-code.ftl",
+        "login/login-recovery-authn-code-config.ftl",
+        "login/login-recovery-authn-code-input.ftl",
+        "account/account.ftl",
+        "account/password.ftl",
+        "account/federatedIdentity.ftl",
+        "account/log.ftl",
+        "account/sessions.ftl",
+        "account/totp.ftl",
+    ];
+
+    function getHardCodedWeight(kind) {
+
+        for (let i = 0; i < orderedPagesPrefix.length; i++) {
+            if (kind.toLowerCase().startsWith(orderedPagesPrefix[i].toLowerCase())) {
+                return orderedPagesPrefix.length - i;
+            }
+        }
+
+        return 0;
+    }
+
+    return { getHardCodedWeight };
+})();

.storybook/static/CNAME

@@ -0,0 +1 @@
+storybook.keycloakify.dev

.storybook/static/favicon_package/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

.storybook/static/favicon_package/safari-pinned-tab.svg

@@ -0,0 +1,193 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="447.000000pt" height="447.000000pt" viewBox="0 0 447.000000 447.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,447.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2177 4413 c-3 -2 -17 -6 -33 -9 -85 -15 -204 -109 -286 -225 -95
+-133 -229 -437 -263 -597 -4 -18 -10 -30 -13 -28 -4 2 -7 -11 -8 -30 0 -19 -3
+-36 -6 -39 -3 -4 -23 1 -44 10 -51 22 -213 73 -289 92 -301 73 -516 74 -670 3
+-124 -57 -186 -153 -188 -295 -1 -67 5 -128 18 -180 3 -13 15 -45 26 -70 43
+-99 57 -135 53 -135 -3 0 4 -10 16 -22 11 -12 20 -26 20 -31 0 -5 9 -22 21
+-38 11 -16 18 -29 14 -29 -3 0 4 -10 15 -22 11 -12 18 -28 15 -36 -2 -7 -1
+-11 3 -8 4 2 19 -12 32 -32 13 -20 33 -47 44 -59 11 -13 17 -23 13 -23 -3 0
+12 -19 33 -42 22 -24 38 -49 35 -55 -2 -7 -1 -12 4 -10 4 1 32 -25 62 -58 30
+-33 88 -94 131 -135 l76 -75 -71 -70 c-112 -110 -174 -181 -262 -300 -106
+-144 -142 -202 -203 -325 -9 -19 -21 -38 -27 -42 -5 -4 -7 -8 -3 -8 4 0 -4
+-27 -18 -60 -25 -63 -58 -199 -50 -208 3 -2 1 -12 -4 -22 -5 -10 -6 -20 -3
+-24 4 -4 8 -23 10 -44 9 -107 77 -201 183 -251 33 -16 56 -32 52 -36 -4 -5 -2
+-5 4 -2 6 4 44 1 85 -6 41 -7 102 -12 136 -12 41 1 60 -2 55 -9 -3 -6 2 -5 11
+3 11 8 44 14 86 15 38 0 67 4 64 9 -4 6 10 8 79 11 14 0 24 3 22 5 -4 4 33 14
+145 37 13 3 33 10 43 15 11 6 26 8 34 5 10 -4 12 -2 8 6 -5 8 -2 9 9 5 10 -3
+17 -2 17 3 0 6 8 10 18 10 9 0 36 9 58 19 32 15 45 16 54 8 9 -9 11 -9 8 2 -2
+7 2 15 8 18 10 3 23 -34 38 -108 2 -8 6 -21 9 -29 15 -36 70 -206 70 -217 0
+-7 4 -13 8 -13 11 0 30 -61 22 -74 -3 -6 -3 -8 2 -4 8 7 86 -135 88 -159 0 -7
+4 -13 8 -13 13 0 39 -56 31 -66 -4 -5 -3 -6 2 -2 5 4 22 -12 39 -35 17 -23 49
+-59 71 -80 23 -21 40 -42 39 -47 -2 -6 0 -9 5 -8 15 3 63 -22 68 -37 3 -8 10
+-12 15 -10 5 3 22 -1 39 -10 17 -9 35 -13 40 -10 6 3 10 2 10 -2 0 -5 12 -8
+28 -8 15 1 33 -4 41 -9 11 -8 13 -8 8 0 -4 7 7 13 33 17 21 3 53 12 71 21 17
+9 36 13 42 9 5 -3 7 -1 3 5 -3 6 3 13 14 17 11 3 20 11 20 16 0 5 5 9 11 9 5
+0 7 -6 3 -13 -4 -7 -3 -9 2 -4 5 5 9 12 9 17 0 4 14 21 30 37 69 67 162 196
+179 251 4 12 12 20 17 16 5 -3 8 -2 7 3 -1 4 6 29 17 56 14 33 24 45 35 41 11
+-4 12 -2 4 6 -14 14 -6 52 9 43 5 -3 7 -2 4 4 -3 5 8 45 24 88 17 44 33 86 35
+94 7 34 56 206 59 209 1 1 15 -3 31 -9 16 -7 34 -13 39 -15 61 -18 144 -51
+139 -56 -3 -4 3 -4 14 -1 11 2 23 0 26 -6 4 -5 14 -7 23 -4 9 4 14 2 10 -3 -3
+-5 7 -9 21 -8 34 1 63 -6 58 -15 -2 -3 19 -7 47 -9 28 -2 55 -6 61 -10 13 -8
+18 -9 79 -10 27 -1 46 -5 44 -9 -3 -5 20 -6 50 -5 44 3 54 1 48 -10 -6 -10 -5
+-11 6 0 16 15 33 16 23 0 -5 -7 -3 -8 7 -3 7 5 29 10 49 12 74 5 116 11 135
+18 11 4 37 13 57 21 28 10 38 11 41 1 4 -8 6 -7 6 3 1 8 21 28 46 44 43 26 92
+86 109 131 28 73 27 217 -3 313 -5 18 -10 33 -9 35 2 23 -118 257 -184 356
+-44 67 -124 177 -138 191 -3 3 -34 39 -70 80 -36 41 -97 107 -137 146 l-72 71
+25 22 c14 12 30 19 36 15 6 -4 8 -3 4 4 -3 6 24 42 61 80 38 38 86 91 108 117
+22 27 46 54 53 61 6 7 12 17 12 23 0 6 3 11 8 11 4 0 22 22 41 50 19 27 37 47
+41 45 4 -3 7 3 6 13 0 9 5 16 12 14 8 -1 11 2 7 7 -5 9 36 83 55 101 5 5 101
+200 121 245 7 18 26 84 36 125 2 8 4 27 5 42 0 16 5 25 11 21 6 -4 7 -1 2 7
+-11 18 -11 62 0 80 5 8 4 11 -2 7 -6 -4 -12 10 -16 36 -6 51 -10 70 -18 77 -3
+3 -15 21 -27 41 -42 70 -184 145 -292 155 -205 20 -451 -18 -709 -108 -30 -10
+-60 -17 -68 -14 -8 3 -12 2 -9 -3 5 -7 -42 -31 -60 -31 -1 0 -5 15 -9 33 -18
+86 -108 342 -156 444 -17 35 -29 66 -29 69 1 4 -2 10 -7 13 -5 3 -24 32 -42
+64 -108 190 -245 296 -403 311 -20 2 -39 2 -41 -1z m53 -124 c0 -5 5 -7 10 -4
+14 9 52 -4 45 -16 -3 -5 0 -6 8 -4 17 7 69 -33 61 -47 -5 -7 -2 -8 5 -4 13 8
+43 -23 35 -36 -3 -4 1 -6 8 -3 7 2 24 -11 38 -31 14 -19 30 -41 35 -47 50 -56
+148 -233 139 -249 -4 -6 -3 -9 2 -5 12 7 97 -192 90 -210 -3 -8 -2 -12 3 -9
+11 7 45 -120 35 -135 -4 -8 -3 -9 4 -5 7 4 12 3 12 -3 0 -5 3 -16 6 -25 4 -11
+-23 -30 -113 -75 -138 -71 -276 -145 -350 -189 -29 -17 -53 -29 -53 -26 0 3
+-7 -1 -15 -10 -14 -14 -19 -13 -53 6 -20 11 -62 34 -92 51 -30 16 -59 33 -65
+37 -5 4 -86 47 -180 95 -93 48 -173 91 -177 94 -11 10 3 52 15 44 6 -3 7 -1 3
+6 -9 14 12 113 22 107 4 -2 8 7 8 20 2 24 42 134 53 144 3 3 7 12 9 20 2 8 17
+44 33 80 24 50 32 61 40 50 8 -11 9 -10 4 7 -5 17 10 47 60 123 36 55 71 98
+76 94 5 -3 9 -2 8 3 -4 23 2 35 17 29 8 -3 12 -2 9 3 -7 12 60 78 100 99 25
+13 70 27 98 31 4 1 7 -4 7 -10z m-1411 -783 c9 -6 12 -5 8 1 -4 6 10 10 34 11
+29 1 38 -1 33 -11 -5 -9 -4 -9 7 1 7 6 19 12 27 12 8 0 10 -5 6 -12 -6 -10 -5
+-10 7 -1 9 7 26 10 40 8 13 -3 47 -8 74 -11 63 -7 155 -23 175 -31 15 -6 35
+-10 71 -12 12 -1 17 -5 13 -13 -4 -7 -3 -8 4 -4 6 4 31 1 54 -5 24 -7 49 -13
+55 -15 25 -5 73 -29 73 -37 0 -5 4 -6 9 -3 12 8 41 -4 41 -16 0 -5 -4 -6 -10
+-3 -6 3 -7 -1 -4 -9 3 -9 1 -45 -5 -81 -6 -36 -14 -91 -17 -122 -4 -32 -11
+-61 -18 -65 -8 -6 -7 -8 2 -8 7 0 11 -4 8 -8 -3 -4 -8 -42 -11 -83 -4 -40 -9
+-81 -12 -89 -3 -8 -6 -44 -8 -80 -1 -36 -3 -65 -4 -65 -1 0 -3 -27 -4 -61 -3
+-66 0 -62 -92 -139 -33 -27 -62 -53 -63 -58 -2 -4 -8 -5 -13 -1 -5 3 -9 1 -9
+-3 0 -5 -41 -44 -91 -88 -50 -43 -98 -85 -106 -93 -13 -14 -23 -6 -91 64 -86
+90 -172 188 -186 213 -5 9 -12 18 -16 21 -12 9 -106 154 -139 215 -18 33 -37
+66 -43 72 -6 7 -8 20 -4 28 3 9 2 14 -3 11 -19 -12 -102 225 -105 296 0 27 -4
+48 -7 48 -16 0 9 108 32 142 22 31 125 81 151 74 10 -2 18 0 18 5 0 5 14 7 30
+5 17 -2 30 0 30 4 0 9 42 7 59 -4z m2823 1 c6 -9 8 -9 8 1 0 7 4 10 10 7 5 -3
+29 -8 52 -11 113 -13 201 -66 197 -118 0 -5 4 -12 10 -15 9 -6 11 -27 11 -124
+0 -16 -4 -26 -9 -23 -5 3 -7 -2 -4 -13 11 -41 -89 -307 -110 -294 -6 3 -7 1
+-3 -6 13 -20 -142 -281 -166 -281 -6 0 -8 -3 -5 -7 11 -10 -51 -84 -197 -238
+l-86 -89 -47 44 c-26 25 -52 50 -58 55 -7 6 -39 33 -71 61 -33 29 -86 73 -119
+100 -86 69 -87 71 -90 112 -5 69 -16 207 -21 242 -4 33 -10 92 -18 170 -4 37
+-14 114 -21 165 -2 17 -9 52 -14 80 -5 27 -9 50 -8 51 50 22 109 44 129 48 15
+2 36 10 48 16 12 6 28 9 35 6 8 -3 15 -1 17 5 2 5 19 11 39 13 20 2 40 6 45 9
+5 3 29 8 54 12 25 4 48 9 52 11 5 3 8 -1 8 -8 0 -9 2 -10 8 -2 9 16 43 21 61
+10 10 -7 12 -6 6 4 -6 10 -3 12 12 8 12 -3 25 -3 31 1 20 12 206 11 214 -2z
+m-1950 -189 c23 -13 46 -27 49 -31 3 -5 9 -8 13 -7 15 3 64 -25 59 -34 -3 -5
+-1 -6 5 -2 14 9 63 -14 55 -27 -3 -6 -2 -7 4 -4 5 3 56 -21 113 -53 57 -33
+107 -60 111 -60 4 0 11 -5 15 -12 5 -8 2 -9 -9 -5 -9 3 -16 2 -14 -2 1 -5 -48
+-42 -110 -83 -61 -40 -144 -95 -183 -123 -40 -27 -80 -54 -89 -60 -9 -5 -18
+-12 -21 -15 -17 -17 -80 -60 -80 -54 0 3 -9 -4 -20 -17 l-20 -24 6 105 c3 58
+7 121 9 140 2 19 5 52 6 72 1 20 5 36 8 34 3 -2 7 19 7 47 2 79 15 149 31 176
+8 13 10 20 4 17 -6 -4 -11 -2 -11 3 0 6 4 11 10 11 5 0 7 7 4 15 -8 20 -4 19
+48 -7z m1114 -66 c3 -26 8 -56 10 -67 10 -50 19 -145 19 -192 0 -28 3 -49 7
+-47 4 3 6 -16 5 -41 -1 -25 0 -45 3 -45 3 0 6 -32 7 -70 2 -39 -1 -70 -5 -70
+-5 0 -18 9 -30 20 -12 11 -26 20 -31 20 -5 0 -17 10 -25 22 -9 12 -16 19 -16
+15 0 -6 -92 56 -135 90 -25 20 -253 169 -278 182 -15 8 -26 15 -25 16 9 7 158
+95 184 108 17 9 34 13 38 10 3 -4 6 -1 6 5 0 11 175 102 197 102 7 0 13 4 13
+9 0 5 8 11 18 13 20 4 29 -14 38 -80z m-531 -268 c30 -20 55 -41 55 -45 0 -5
+6 -8 13 -6 6 1 11 -4 9 -11 -1 -8 2 -11 7 -7 14 8 82 -38 76 -52 -2 -7 2 -10
+11 -6 8 3 25 -3 37 -14 12 -11 35 -27 50 -37 16 -9 25 -22 21 -28 -4 -7 -3 -8
+4 -4 10 6 242 -148 250 -166 2 -5 9 -8 16 -8 7 0 21 -9 31 -20 17 -19 14 -24
+-10 -21 -5 1 -3 -4 5 -11 12 -10 15 -40 16 -138 0 -77 -4 -128 -10 -132 -7 -5
+-7 -8 -1 -8 12 0 14 -259 2 -277 -5 -7 -4 -13 1 -13 12 0 7 -79 -5 -90 -7 -7
+-244 -174 -287 -203 -10 -6 -24 -16 -30 -22 -12 -10 -34 -26 -211 -146 -96
+-65 -108 -71 -131 -60 -14 6 -22 16 -19 21 3 5 0 7 -7 5 -8 -3 -23 4 -35 15
+-12 11 -24 20 -27 20 -5 0 -246 166 -271 187 -5 4 -30 22 -55 38 -25 17 -49
+33 -55 38 -5 4 -44 31 -85 61 l-75 54 0 337 c1 317 2 338 19 351 11 7 23 11
+29 7 6 -3 7 -1 3 5 -4 7 3 17 18 24 14 6 26 15 26 20 0 4 7 8 15 8 8 0 15 5
+15 11 0 6 7 8 16 5 8 -3 13 -2 9 3 -3 5 12 20 32 32 21 13 41 27 44 32 4 5 12
+6 19 2 8 -5 11 -4 7 2 -9 15 38 44 60 37 12 -4 14 -3 6 3 -9 6 1 19 37 46 27
+20 54 37 59 37 5 0 11 3 13 8 5 12 131 95 144 95 7 0 12 4 11 8 -2 8 51 47 66
+48 4 1 32 -15 62 -35z m-822 -752 c2 -270 4 -262 -48 -215 -12 10 -41 34 -65
+53 -43 33 -83 67 -157 136 l-34 31 57 49 c177 153 219 185 228 176 4 -4 7 -2
+6 3 -4 17 0 29 6 23 3 -4 6 -119 7 -256z m1539 245 c7 -7 26 -20 41 -30 15
+-10 25 -23 21 -29 -4 -7 -3 -8 4 -4 7 4 12 2 12 -3 0 -6 6 -10 13 -8 6 1 11
+-4 9 -11 -1 -8 2 -11 7 -8 5 4 14 -2 20 -11 5 -10 13 -18 18 -18 4 0 7 -3 6
+-7 -2 -5 1 -7 5 -5 5 1 37 -22 71 -52 l62 -54 -53 -49 c-29 -27 -66 -59 -81
+-71 -16 -12 -34 -27 -41 -33 -43 -40 -129 -105 -133 -101 -2 3 0 14 6 25 7 13
+7 23 -2 32 -9 10 -9 14 1 17 6 3 9 9 6 14 -5 9 -8 289 -4 314 1 6 2 14 1 19
+-4 22 -8 86 -5 86 1 0 9 -6 16 -13z m-1862 -353 c48 -45 72 -65 109 -93 17
+-13 31 -30 31 -37 0 -8 3 -13 8 -13 21 4 32 -3 32 -18 0 -9 3 -14 6 -10 4 3
+13 -1 21 -9 8 -8 30 -26 49 -40 18 -15 31 -31 27 -37 -3 -5 -2 -7 4 -4 23 14
+43 -19 48 -78 10 -127 16 -186 40 -410 4 -33 10 -79 14 -102 5 -27 4 -46 -3
+-54 -8 -9 -8 -10 0 -6 7 4 14 -2 17 -13 3 -11 0 -20 -5 -20 -6 0 -5 -6 2 -15
+7 -8 10 -26 8 -40 -3 -13 -1 -22 3 -19 5 3 9 1 9 -5 0 -8 -35 -25 -50 -23 -3
+0 -14 -5 -25 -11 -11 -6 -22 -12 -25 -12 -3 -1 -36 -11 -75 -23 -61 -18 -120
+-33 -190 -48 -11 -2 -40 -7 -65 -10 -25 -3 -49 -8 -53 -11 -5 -3 -70 -6 -145
+-8 -122 -3 -168 0 -263 18 -72 14 -145 78 -155 136 -3 20 -8 44 -11 54 -2 9
+-1 17 4 17 4 0 8 17 7 37 -1 50 6 74 20 66 8 -4 8 -3 0 6 -12 14 33 164 47
+155 5 -3 6 2 3 10 -3 9 6 36 20 62 14 26 26 53 26 60 0 8 5 14 10 14 6 0 10 5
+10 11 0 22 93 168 103 162 6 -3 7 -2 4 4 -10 17 64 118 77 105 4 -3 5 0 2 8
+-4 9 12 35 39 65 25 28 73 80 106 117 34 38 65 65 70 62 5 -3 8 -2 7 3 -5 13
+26 42 37 35 6 -3 26 -21 45 -38z m2364 -103 c-1 -3 7 -12 18 -19 10 -7 15 -18
+12 -24 -4 -6 -2 -8 3 -5 6 4 21 -8 34 -25 13 -17 29 -36 34 -42 30 -33 63 -84
+58 -90 -4 -3 -1 -6 5 -6 17 0 85 -108 76 -121 -4 -7 -3 -9 3 -6 13 8 106 -169
+97 -185 -4 -6 -3 -8 3 -5 12 7 36 -50 28 -63 -3 -4 1 -10 9 -13 7 -3 17 -23
+21 -44 5 -21 10 -45 12 -53 2 -8 4 -24 6 -35 1 -11 6 -23 10 -26 5 -3 8 -36 8
+-73 0 -178 -108 -238 -417 -231 -78 2 -150 5 -161 8 -10 3 -34 8 -53 11 -19 3
+-48 8 -65 11 -114 22 -337 94 -329 106 3 5 -2 6 -12 2 -12 -5 -15 -2 -11 13 6
+20 16 78 22 129 2 17 6 46 9 65 3 19 8 60 11 90 3 30 8 69 11 87 2 17 7 62 10
+100 3 37 10 73 15 80 7 7 6 14 -1 18 -6 3 -7 12 -3 18 4 6 6 26 5 45 -2 25 1
+32 10 26 10 -6 10 -5 2 7 -16 21 -6 71 18 88 11 8 30 25 41 38 11 12 24 23 29
+23 4 0 25 16 45 36 63 60 110 94 118 86 5 -4 5 -2 2 4 -4 7 9 24 29 39 20 15
+49 40 66 57 l30 29 71 -72 c40 -39 71 -74 71 -78z m-1901 -294 c-3 -5 -2 -7 4
+-4 12 8 83 -39 83 -55 0 -6 3 -8 6 -5 7 7 136 -80 142 -95 2 -4 10 -8 18 -8 8
+0 14 -3 14 -8 0 -4 20 -18 45 -32 25 -14 45 -28 45 -32 0 -5 5 -8 10 -8 12 0
+124 -72 128 -82 2 -5 11 -8 20 -8 10 0 -36 -32 -101 -70 -65 -39 -124 -67
+-130 -64 -7 4 -8 3 -4 -2 5 -5 -41 -33 -110 -66 -80 -38 -120 -52 -125 -45 -3
+7 -9 32 -12 57 -3 25 -8 58 -11 74 -3 15 -8 49 -11 75 -3 25 -7 62 -9 81 -2
+19 -7 62 -10 94 -3 33 -8 64 -11 68 -3 4 0 8 6 8 6 0 8 5 4 11 -3 6 -8 43 -11
+82 -5 65 -4 70 11 58 9 -7 13 -18 9 -24z m1261 -64 c-4 -94 -9 -162 -18 -228
+-2 -16 -7 -55 -10 -85 -4 -30 -8 -62 -10 -70 -1 -8 -7 -37 -11 -65 -5 -27 -10
+-53 -11 -57 -1 -5 -2 -13 -3 -20 -1 -9 -4 -9 -13 0 -7 7 -20 12 -30 12 -10 0
+-18 5 -18 12 0 6 -3 9 -6 5 -4 -3 -54 19 -113 50 -58 31 -123 64 -143 75 -21
+10 -38 23 -38 29 0 6 -4 8 -9 5 -5 -3 -19 2 -32 12 -13 10 -37 24 -52 32 -25
+12 -26 15 -10 24 10 6 22 11 26 11 4 0 11 5 15 12 4 6 13 13 21 15 8 2 24 12
+36 23 13 12 36 27 52 35 15 8 35 21 43 28 8 7 18 12 23 12 4 0 16 8 26 18 42
+37 52 43 64 36 6 -4 9 -3 4 1 -9 11 43 46 56 38 6 -3 7 -2 4 4 -3 5 27 33 68
+62 41 28 77 56 80 61 12 20 13 8 9 -87z m-524 -403 c8 -5 30 -17 48 -26 17 -9
+32 -21 32 -26 0 -5 4 -7 9 -3 5 3 36 -11 68 -30 32 -19 63 -35 69 -35 5 0 21
+-10 34 -22 14 -13 25 -21 25 -18 1 8 154 -64 155 -73 0 -5 -4 -5 -10 -2 -6 4
+-7 -1 -3 -10 3 -10 0 -21 -8 -26 -11 -6 -11 -9 -1 -9 9 0 10 -5 4 -17 -5 -10
+-15 -40 -21 -68 -7 -27 -18 -63 -26 -80 -7 -16 -24 -58 -36 -92 -13 -34 -28
+-59 -33 -56 -5 3 -6 1 -3 -4 9 -14 -22 -75 -34 -68 -5 4 -6 -1 -3 -10 4 -9 -5
+-33 -20 -55 -14 -22 -26 -42 -26 -46 0 -3 -19 -33 -42 -67 -185 -267 -312
+-305 -471 -142 -56 56 -164 205 -150 205 4 0 3 4 -3 8 -14 8 -97 164 -109 202
+-4 14 -16 43 -26 65 -25 55 -76 216 -81 251 -2 23 1 29 14 28 10 -1 16 1 14 5
+-3 4 19 18 47 31 29 13 55 29 59 35 4 5 8 7 8 3 0 -4 23 6 50 22 28 16 50 26
+50 22 0 -4 4 -2 8 3 4 6 25 19 47 30 22 11 47 25 55 31 38 28 169 92 176 86 4
+-4 4 -2 1 5 -19 32 42 11 133 -47z"/>
+<path d="M2556 3192 c-3 -5 1 -9 9 -9 8 0 12 4 9 9 -3 4 -7 8 -9 8 -2 0 -6 -4
+-9 -8z"/>
+<path d="M2455 2831 c-3 -5 -2 -12 3 -15 5 -3 9 1 9 9 0 17 -3 19 -12 6z"/>
+<path d="M2500 2790 c-9 -6 -10 -10 -3 -10 6 0 15 5 18 10 8 12 4 12 -15 0z"/>
+<path d="M2144 2592 c-70 -35 -108 -103 -100 -179 3 -38 32 -93 62 -118 9 -7
+1 -43 -31 -140 -65 -196 -66 -176 5 -173 33 2 60 -1 60 -5 0 -5 4 -6 8 -3 13
+8 227 10 239 3 18 -11 23 7 13 39 -6 16 -28 83 -49 149 l-39 120 29 27 c16 16
+29 30 29 33 0 22 1 26 8 22 4 -3 8 20 8 51 3 88 -33 145 -108 176 -44 19 -96
+18 -134 -2z"/>
+<path d="M1113 2105 c0 -8 4 -12 9 -9 5 3 6 10 3 15 -9 13 -12 11 -12 -6z"/>
+<path d="M859 1903 c-13 -16 -12 -17 4 -4 9 7 17 15 17 17 0 8 -8 3 -21 -13z"/>
+<path d="M1436 1803 c-6 -14 -5 -15 5 -6 7 7 10 15 7 18 -3 3 -9 -2 -12 -12z"/>
+<path d="M3760 1596 c0 -2 8 -10 18 -17 15 -13 16 -12 3 4 -13 16 -21 21 -21
+13z"/>
+<path d="M1616 1691 c-3 -5 2 -15 12 -22 15 -12 16 -12 5 2 -7 9 -10 19 -6 22
+3 4 4 7 0 7 -3 0 -8 -4 -11 -9z"/>
+<path d="M2710 1590 c0 -5 5 -10 11 -10 5 0 7 5 4 10 -3 6 -8 10 -11 10 -2 0
+-4 -4 -4 -10z"/>
+<path d="M1090 831 c0 -6 4 -13 10 -16 6 -3 7 1 4 9 -7 18 -14 21 -14 7z"/>
+</g>
+</svg>

.storybook/static/favicon_package/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

.storybook/static/fonts/WorkSans/font.css

@@ -0,0 +1,37 @@
+/* latin */
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: normal;
+  /*400*/
+  font-display: swap;
+  src: url("./worksans-regular-webfont.woff2") format("woff2");
+}
+
+/* latin */
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./worksans-medium-webfont.woff2") format("woff2");
+}
+
+/* latin */
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./worksans-semibold-webfont.woff2") format("woff2");
+}
+
+/* latin */
+@font-face {
+  font-family: 'Work Sans';
+  font-style: normal;
+  font-weight: bold;
+  /*700*/
+  font-display: swap;
+  src: url("./worksans-bold-webfont.woff2") format("woff2");
+}

.storybook/static/tos/tos_en.md

@@ -0,0 +1,49 @@
+## Overview
+
+This Terms of Service document outlines the rules and regulations for the use of **Example Company's** Services.
+
+## Acceptance of Terms
+
+By accessing and using our services, you acknowledge that you have read, understood, and agree to be bound by these terms. If you do not accept these terms, you are not authorized to use our services.
+
+## Description of Service
+
+**Example Service** (hereinafter referred to as "the Service") is a web-based solution offered by **Example Company** (hereinafter referred to as "the Company"). Our service provides users with access to [documentation](https://example.com/docs) and support for managing their projects effectively.
+
+## Modifications to the Terms of Service
+
+The Company reserves the right to modify these terms at any time. Such modifications will be effective immediately upon posting the updated terms on our website. Your continued use of the Service after any such changes shall constitute your consent to such changes.
+
+## Account Registration
+
+You may be required to register with the Service to access certain features. When registering, you agree to provide accurate, current, and complete information about yourself as requested.
+
+## User Responsibilities
+
+-   **Data Security**: Users are responsible for safeguarding their login credentials and should not disclose their passwords to any third party.
+-   **Acceptable Use**: Users are expected to use the Service in a responsible manner that does not infringe upon the rights of others.
+-   **Content Ownership**: Users retain all rights to the content they upload to the Service but grant the Company a license to use and distribute this content as part of the Service.
+
+## Intellectual Property
+
+All intellectual property rights related to the Service and its original content, features, and functionality are owned by the Company.
+
+## Termination
+
+The Company may terminate or suspend access to our Service immediately, without prior notice or liability, for any reason whatsoever, including, without limitation, breach of these Terms.
+
+## Governing Law
+
+These Terms shall be governed and construed in accordance with the laws of [Your Country], without regard to its conflict of law provisions.
+
+## Contact Information
+
+For any questions about these Terms, please contact us at [support@example.com](mailto:support@example.com) or visit our [FAQ page](https://example.com/faq).
+
+## Changes to Terms of Service
+
+We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material, we will provide at least 30 days' notice prior to any new terms taking effect.
+
+## Effective Date
+
+These terms are effective as of **[Insert Date]**.

.storybook/static/tos/tos_es.md

@@ -0,0 +1,49 @@
+## Resumen
+
+Este documento de Términos de Servicio detalla las reglas y regulaciones para el uso de los servicios de **Empresa Ejemplo**.
+
+## Aceptación de Términos
+
+Al acceder y utilizar nuestros servicios, usted reconoce que ha leído, entendido y acepta estar vinculado por estos términos. Si no acepta estos términos, no está autorizado para usar nuestros servicios.
+
+## Descripción del Servicio
+
+**Servicio Ejemplo** (en adelante denominado "el Servicio") es una solución basada en la web ofrecida por **Empresa Ejemplo** (en adelante denominada "la Empresa"). Nuestro servicio proporciona a los usuarios acceso a [documentación](https://ejemplo.com/docs) y soporte para gestionar sus proyectos de manera efectiva.
+
+## Modificaciones a los Términos de Servicio
+
+La Empresa se reserva el derecho de modificar estos términos en cualquier momento. Dichas modificaciones entrarán en vigor inmediatamente después de la publicación de los términos actualizados en nuestro sitio web. Su uso continuado del Servicio después de tales cambios constituirá su consentimiento a dichos cambios.
+
+## Registro de Cuenta
+
+Puede ser necesario que se registre en el Servicio para acceder a ciertas características. Al registrarse, usted acepta proporcionar información precisa, actual y completa sobre sí mismo como se solicita.
+
+## Responsabilidades del Usuario
+
+-   **Seguridad de Datos**: Los usuarios son responsables de salvaguardar sus credenciales de inicio de sesión y no deben divulgar sus contraseñas a terceros.
+-   **Uso Aceptable**: Se espera que los usuarios utilicen el Servicio de manera responsable que no infrinja los derechos de otros.
+-   **Propiedad del Contenido**: Los usuarios retienen todos los derechos sobre el contenido que cargan en el Servicio, pero otorgan a la Empresa una licencia para usar y distribuir este contenido como parte del Servicio.
+
+## Propiedad Intelectual
+
+Todos los derechos de propiedad intelectual relacionados con el Servicio y su contenido original, características y funcionalidad son propiedad de la Empresa.
+
+## Terminación
+
+La Empresa puede terminar o suspender su acceso a nuestro Servicio de inmediato, sin previo aviso ni responsabilidad, por cualquier motivo, incluido, entre otros, una violación de estos Términos.
+
+## Ley Aplicable
+
+Estos Términos se regirán e interpretarán de acuerdo con las leyes de [Su País], sin tener en cuenta sus disposiciones de conflicto de leyes.
+
+## Información de Contacto
+
+Para cualquier pregunta sobre estos Términos, contáctenos en [support@ejemplo.com](mailto:support@ejemplo.com) o visite nuestra [página de FAQ](https://ejemplo.com/faq).
+
+## Cambios a los Términos de Servicio
+
+Nos reservamos el derecho, a nuestra única discreción, de modificar o reemplazar estos Términos en cualquier momento. Si una revisión es material, proporcionaremos al menos 30 días de aviso antes de que los nuevos términos entren en vigor.
+
+## Fecha de Efectividad
+
+Estos términos son efectivos a partir del **[Insertar Fecha]**.

.storybook/static/tos/tos_fr.md

@@ -0,0 +1,49 @@
+## Vue d'ensemble
+
+Ce document des Conditions Générales d'Utilisation détaille les règles et réglementations pour l'utilisation des services de **l'Entreprise Exemple**.
+
+## Acceptation des Conditions
+
+En accédant et en utilisant nos services, vous reconnaissez avoir lu, compris et accepté d'être lié par ces conditions. Si vous n'acceptez pas ces termes, vous n'êtes pas autorisé à utiliser nos services.
+
+## Description du Service
+
+**Service Exemple** (ci-après dénommé "le Service") est une solution basée sur le web offerte par **l'Entreprise Exemple** (ci-après dénommée "l'Entreprise"). Notre service offre aux utilisateurs un accès à la [documentation](https://exemple.com/docs) et un support pour gérer efficacement leurs projets.
+
+## Modifications des Conditions de Service
+
+L'Entreprise se réserve le droit de modifier ces conditions à tout moment. De telles modifications entreront en vigueur immédiatement après la publication des termes mis à jour sur notre site web. Votre utilisation continue du Service après de tels changements constitue votre consentement à ces modifications.
+
+## Inscription au Compte
+
+Vous devrez peut-être vous inscrire au Service pour accéder à certaines fonctionnalités. Lors de l'inscription, vous acceptez de fournir des informations précises, actuelles et complètes vous concernant, comme demandé.
+
+## Responsabilités des Utilisateurs
+
+-   **Sécurité des Données** : Les utilisateurs sont responsables de la sauvegarde de leurs identifiants de connexion et ne doivent divulguer leurs mots de passe à aucun tiers.
+-   **Utilisation Acceptable** : Les utilisateurs sont censés utiliser le Service de manière responsable qui ne porte pas atteinte aux droits d'autrui.
+-   **Propriété du Contenu** : Les utilisateurs conservent tous les droits sur le contenu qu'ils téléchargent sur le Service mais accordent à l'Entreprise une licence pour utiliser et distribuer ce contenu dans le cadre du Service.
+
+## Propriété Intellectuelle
+
+Tous les droits de propriété intellectuelle relatifs au Service et à son contenu original, fonctionnalités et fonctionnement sont détenus par l'Entreprise.
+
+## Résiliation
+
+L'Entreprise peut résilier ou suspendre votre accès à notre Service immédiatement, sans préavis ni responsabilité, pour quelque raison que ce soit, y compris, sans limitation, en cas de violation de ces Conditions.
+
+## Loi Applicable
+
+Ces Conditions seront régies et interprétées conformément aux lois de [Votre Pays], sans égard à ses dispositions de conflit de lois.
+
+## Informations de Contact
+
+Pour toute question concernant ces Conditions, veuillez nous contacter à [support@exemple.com](mailto:support@exemple.com) ou visitez notre [page FAQ](https://exemple.com/faq).
+
+## Modifications des Conditions de Service
+
+Nous nous réservons le droit, à notre seule discrétion, de modifier ou de remplacer ces Conditions à tout moment. Si une révision est importante, nous vous fournirons un préavis d'au moins 30 jours avant que les nouveaux termes prennent effet.
+
+## Date d'Effet
+
+Ces conditions sont effectives à partir du **[Insérer la Date]**.

CHANGELOG.md

@@ -1,70 +0,0 @@
-### **0.0.16** (2021-02-23)  
-  
-- Bump version  
-- Give test container credentials    
-  
-### **0.0.14** (2021-02-23)  
-  
-- Bump version number  
-- enable the docker container to be run from the root of the react project    
-  
-### **0.0.13** (2021-02-23)  
-  
-- bump version    
-  
-### **0.0.12** (2021-02-23)  
-  
-- update readme    
-  
-### **0.0.11** (2021-02-23)  
-  
-- Add documentation    
-  
-### **0.0.10** (2021-02-23)  
-  
-- Remove extra closing bracket    
-  
-### **0.0.9** (2021-02-22)  
-  
-- fix container startup script  
-- minor update    
-  
-### **0.0.8** (2021-02-21)  
-  
-- Include theme properties    
-  
-### **0.0.7** (2021-02-21)  
-  
-- fix build  
-- Fix bundle    
-  
-### **0.0.6** (2021-02-21)  
-  
-- Include missing files in the release bundle    
-  
-### **0.0.5** (2021-02-21)  
-  
-- Bump version number  
-- Make the install faster    
-  
-### **0.0.4** (2021-02-21)  
-  
-- Fix script visibility    
-  
-### **0.0.3** (2021-02-21)  
-  
-- Do not run tests on window  
-- Add script for downloading base themes  
-- Generate debug files to be able to test the container  
-- Fix many little bugs  
-- refactor  
-- Almoste there  
-- Things are starting to take form  
-- Seems to be working  
-- First draft  
-- Remove eslint and prettyer    
-  
-### **0.0.2** (2021-02-20)  
-  
-- Update package.json    
-  

CONTRIBUTING.md

@@ -0,0 +1,3 @@
+Looking to contribute? Thank you! PR are more than welcome.
+
+Please refers to [this documentation page](https://docs.keycloakify.dev/contributing) that will help you get started.

README.md

@@ -1,100 +1,352 @@
 <p align="center">
-    <img src="https://user-images.githubusercontent.com/6702424/80216211-00ef5280-863e-11ea-81de-59f3a3d4b8e4.png">  
+    <img src="https://user-images.githubusercontent.com/6702424/109387840-eba11f80-7903-11eb-9050-db1dad883f78.png">  
 </p>
 <p align="center">
-    <i>🔏 Keycloak theme generator for Reacts app💅</i>
+    <i>🔏 Create Keycloak themes using React 🔏</i>
     <br>
     <br>
-    <img src="https://github.com/garronej/keycloak-react-theming/workflows/ci/badge.svg?branch=develop">
-    <img src="https://img.shields.io/bundlephobia/minzip/keycloak-react-theming">
-    <img src="https://img.shields.io/npm/dw/keycloak-react-theming">
-    <img src="https://img.shields.io/npm/l/keycloak-react-theming">
+    <a href="https://github.com/garronej/keycloakify/actions">
+      <img src="https://github.com/garronej/keycloakify/workflows/ci/badge.svg?branch=main">
+    </a>
+    <a href="https://www.npmjs.com/package/keycloakify">
+      <img src="https://img.shields.io/npm/dm/keycloakify">
+    </a>
+    <a href="https://github.com/garronej/keycloakify/blob/main/LICENSE">
+      <img src="https://img.shields.io/npm/l/keycloakify">
+    </a>
+    <a href="https://github.com/thomasdarimont/awesome-keycloak">
+        <img src="https://awesome.re/mentioned-badge.svg"/>
+    </a>
+    <a href="https://discord.gg/kYFZG7fQmn">
+        <img src="https://img.shields.io/discord/1097708346976505977"/>
+    </a>
+    <p align="center">
+        <a href="https://www.keycloakify.dev">Home</a>
+        -
+        <a href="https://docs.keycloakify.dev">Documentation</a>
+        -
+        <a href="https://storybook.keycloakify.dev">Storybook</a>
+        -
+        <a href="https://github.com/codegouvfr/keycloakify-starter">Starter project</a>
+    </p>
 </p>
 
-# MOTIVATION
+<p align="center">
+    <i>This build tool generates a Keycloak theme <a href="https://www.keycloakify.dev">Learn more</a></i>
+    <br/>
+    <br/>
+    <img width="400" src="https://github.com/keycloakify/keycloakify/assets/6702424/e66d105c-c06f-47d1-8a31-a6ab09da4e80">
+</p>
 
-The problem: 
+Keycloakify is fully compatible with Keycloak 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, [~~22~~](https://github.com/keycloakify/keycloakify/issues/389#issuecomment-1822509763), **23** [and up](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791)!
 
-![keycloak_before](https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif)
+> NOTE: Keycloak 24 introduces [important changes](https://www.keycloak.org/docs/latest/upgrading/index.html#changes-to-freemarker-templates-to-render-pages-based-on-the-user-profile-and-realm).  
+> We're actively working on incorporating them into Keycloakify. [Follow progress](https://github.com/keycloakify/keycloakify/pull/538).
 
-When we redirected to Keycloak the user suffers from a harsh context switch.
-The language is set back to default and the theme is different.  
+## Sponsor
 
-Keycloak does offer a way to customize theses pages but it requires a lot of raw HTML/CSS hacking
-to reproduce the look and feel of a specific app. Not mentioning the maintenance cost of such an endeavour.  
+We are exclusively sponsored by [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), a French company offering Keycloak as a service.  
+Their dedicated support helps us continue the development and maintenance of this project.
 
-Wouldn't it be great if we could just design the login and register pages as if they where part of our app while
-still letting Keycloak handle the heavy lifting of actually authenticating the users? 
+[Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github) provides the following services:
 
-Here is `yarn add keycloak-react-theming` for you 🍸
+-   Simplify and secure your Keycloak Identity and Access Management. Keycloak as a Service.
+-   Custom theme building for your brand using Keycloakify.
 
-![image](https://user-images.githubusercontent.com/6702424/108833938-c9d72e00-75cd-11eb-8263-4334ca79275c.png)
-![image](https://user-images.githubusercontent.com/6702424/108834054-f68b4580-75cd-11eb-9661-b1a43836c4b0.png)
+<div align="center">
 
+![Logo Dark](https://user-images.githubusercontent.com/6702424/234135797-c84d0a90-0526-43e5-a186-70cbebdeb278.png#gh-dark-mode-only)
 
-Setup from a blanc `create-react-app` project:
+</div>
 
-[![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)
+<div align="center">
 
-# How to use
+![Logo Light](https://user-images.githubusercontent.com/6702424/234135799-68684c33-4ec5-48d4-8763-0f3922c86643.png#gh-light-mode-only)
 
-## Setting up the build tool
+</div>
 
-Add `keycloak-react-theming` to the dev dependencies of your project `npm install --save-dev keycloak-react-theming` or `yarn add --dev keycloak-react-theming`
-then configure your `package.json` build's script to build the keycloak's theme by adding `&& build-keycloak-theme`.
+<p align="center">
+    <i>Checkout <a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github">Cloud-IAM</a> and use promo code <code>keycloakify5</code></i>
+    <br/>
+    <i>5% of your annual subscription will be donated to us, and you'll get 5% off too.</i>
+</p>
 
-Typically you will get: 
+Thank you, [Cloud-IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support!
 
-`package.json`:
-```json
-  "devDependencies": {
-    "keycloak-react-theming": "^0.0.10",
-    [...]
-  },
-  "scripts": {
-    "build": "react-scripts build && build-keycloak-theme",
-    [...]
-  },
-```
+## Contributors ✨
 
-Then build your app with `yarn run build` or `npm run build`, you will be provided with instructions
-about how to load the theme into Keycloak.
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
-## Developing your login and register pages in your React app
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/lordvlad"><img src="https://avatars.githubusercontent.com/u/1217769?v=4?s=100" width="100px;" alt="Waldemar Reusch"/><br /><sub><b>Waldemar Reusch</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=lordvlad" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://willwill96.github.io/the-ui-dawg-static-site/en/introduction/"><img src="https://avatars.githubusercontent.com/u/10997562?v=4?s=100" width="100px;" alt="William Will"/><br /><sub><b>William Will</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=willwill96" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Ann2827"><img src="https://avatars.githubusercontent.com/u/32645809?v=4?s=100" width="100px;" alt="Bystrova Ann"/><br /><sub><b>Bystrova Ann</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Ann2827" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mkreuzmayr"><img src="https://avatars.githubusercontent.com/u/20108212?v=4?s=100" width="100px;" alt="Michael Kreuzmayr"/><br /><sub><b>Michael Kreuzmayr</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=mkreuzmayr" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://coolmathgames.tech"><img src="https://avatars.githubusercontent.com/u/6877780?v=4?s=100" width="100px;" alt="Mary "/><br /><sub><b>Mary </b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Mstrodl" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://tasyp.xyz/"><img src="https://avatars.githubusercontent.com/u/6623212?v=4?s=100" width="100px;" alt="German Öö"/><br /><sub><b>German Öö</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Tasyp" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://revolunet.com"><img src="https://avatars.githubusercontent.com/u/124937?v=4?s=100" width="100px;" alt="Julien Bouquillon"/><br /><sub><b>Julien Bouquillon</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=revolunet" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/aidangilmore"><img src="https://avatars.githubusercontent.com/u/32880357?v=4?s=100" width="100px;" alt="Aidan Gilmore"/><br /><sub><b>Aidan Gilmore</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=aidangilmore" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/0x-Void"><img src="https://avatars.githubusercontent.com/u/32745739?v=4?s=100" width="100px;" alt="Void"/><br /><sub><b>Void</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=0x-Void" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/juffe"><img src="https://avatars.githubusercontent.com/u/5393231?v=4?s=100" width="100px;" alt="juffe"/><br /><sub><b>juffe</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=juffe" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/lazToum"><img src="https://avatars.githubusercontent.com/u/4764837?v=4?s=100" width="100px;" alt="Lazaros Toumanidis"/><br /><sub><b>Lazaros Toumanidis</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=lazToum" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/marcmrf"><img src="https://avatars.githubusercontent.com/u/9928519?v=4?s=100" width="100px;" alt="Marc"/><br /><sub><b>Marc</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=marcmrf" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://kasir-barati.github.io"><img src="https://avatars.githubusercontent.com/u/73785723?v=4?s=100" width="100px;" alt="Kasir Barati"/><br /><sub><b>Kasir Barati</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=kasir-barati" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/asashay"><img src="https://avatars.githubusercontent.com/u/10714670?v=4?s=100" width="100px;" alt="Alex Oliynyk"/><br /><sub><b>Alex Oliynyk</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=asashay" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.gravitysoftware.be"><img src="https://avatars.githubusercontent.com/u/1140574?v=4?s=100" width="100px;" alt="Thomas Silvestre"/><br /><sub><b>Thomas Silvestre</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=thosil" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/satanshiro"><img src="https://avatars.githubusercontent.com/u/38865738?v=4?s=100" width="100px;" alt="satanshiro"/><br /><sub><b>satanshiro</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=satanshiro" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://poelhekke.dev"><img src="https://avatars.githubusercontent.com/u/1632377?v=4?s=100" width="100px;" alt="Koen Poelhekke"/><br /><sub><b>Koen Poelhekke</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=kpoelhekke" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/zavoloklom"><img src="https://avatars.githubusercontent.com/u/4151869?v=4?s=100" width="100px;" alt="Sergey Kupletsky"/><br /><sub><b>Sergey Kupletsky</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Tests">⚠️</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/rome-user"><img src="https://avatars.githubusercontent.com/u/114131048?v=4?s=100" width="100px;" alt="rome-user"/><br /><sub><b>rome-user</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=rome-user" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/celinepelletier"><img src="https://avatars.githubusercontent.com/u/82821620?v=4?s=100" width="100px;" alt="Céline Pelletier"/><br /><sub><b>Céline Pelletier</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=celinepelletier" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/xgp"><img src="https://avatars.githubusercontent.com/u/244253?v=4?s=100" width="100px;" alt="Garth"/><br /><sub><b>Garth</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=xgp" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/BlackVoid"><img src="https://avatars.githubusercontent.com/u/673720?v=4?s=100" width="100px;" alt="Felix Gustavsson"/><br /><sub><b>Felix Gustavsson</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=BlackVoid" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://m-siemens.de/"><img src="https://avatars.githubusercontent.com/u/1873922?v=4?s=100" width="100px;" alt="Markus Siemens"/><br /><sub><b>Markus Siemens</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=msiemens" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/law108000"><img src="https://avatars.githubusercontent.com/u/8112024?v=4?s=100" width="100px;" alt="Rlok"/><br /><sub><b>Rlok</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=law108000" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Moulyy"><img src="https://avatars.githubusercontent.com/u/115405804?v=4?s=100" width="100px;" alt="Moulyy"/><br /><sub><b>Moulyy</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Moulyy" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/giorgoslytos"><img src="https://avatars.githubusercontent.com/u/50946162?v=4?s=100" width="100px;" alt="giorgoslytos"/><br /><sub><b>giorgoslytos</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=giorgoslytos" title="Code">💻</a></td>
+    </tr>
+  </tbody>
+</table>
 
-TODO
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
 
-# How to implement context persistance
+<!-- ALL-CONTRIBUTORS-LIST:END -->
 
-If you want dark mode preference, language and others users preferences your can do so
-very easily by using [`powerhooks/useGlobalState`](https://github.com/garronej/powerhooks)
+# Changelog highlights
 
-WARNING: `powerhooks` is still a work in progress.
+## 9.5
 
-# REQUIREMENTS
+-   Post build hook: You can now apply custom transformation to your theme files. [Learn more](https://docs.keycloakify.dev/build-options#postbuild-hook).
+-   You can now specify your option in the Keycloakify's Vite plugin instead in the package.json. [See example](https://docs.keycloakify.dev/build-options#themename).
 
-This tools assumes you are bundling your app with Webpack (tested with 4.44.2) .
-It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
-and a `static/` directory generated by webpack.
+## 9.4
 
-**All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3=)
+**Vite Support! 🎉**
 
-- For building the theme: `mvn` (Maven) must be installed
-- For development, (testing the theme in a local container ): `rm`, `mkdir`, `wget`, `unzip` are assumed to be available.
+-   [The starter is now a Vite project](https://github.com/keycloakify/keycloakify-starter).
+    The Webpack based starter is accessible [here](https://github.com/keycloakify/keycloakify-starter-cra).
+-   CRA (Webpack) remains supported for the forseable future.
+-   If you have a CRA Keycloakify theme that you wish to migrate to Vite checkout [this migration guide](https://docs.keycloakify.dev/migration-guides/cra-greater-than-vite).
 
-NOTE: This build tool has only be tested on MacOS.
+## 9.0
 
-# API Reference 
+Bring back support for account themes in Keycloak v23 and up! [See issue](https://github.com/keycloakify/keycloakify/issues/389).
 
-## The build tool 
+### Breaking changes
 
-Part of the lib that runs with node, at build time.
+Very few. Check them out [here](https://docs.keycloakify.dev/migration-guides/v8-greater-than-v9).
 
-- `npx build-keycloak-theme`: Builds the theme, the CWD is assumed to be the root of your react project.
-- `npx download-sample-keycloak-themes`: Downloads the keycloak default themes (for development purposes)
+## 8.0
 
-## The fronted lib ( imported into your react 
+-   Much smaller .jar size. 70.2 MB -> 7.8 MB.  
+    Keycloakify now detects which of the static resources from the default theme are actually used by your theme and only include those in the .jar.
+-   Build time: The first build is slowed but the subsequent build are faster. [Update your CI so that the cache is persisted across CI build](https://github.com/keycloakify/keycloakify-starter/commit/bc378d5afb67e796f520afbc348185f3e319d9d0).
 
-Part of the lib that you import in your react project and runs on the browser.
+### Breaking changes
 
-**TODO**
+There are very few breaking changes in this major version. [Check them out](https://docs.keycloakify.dev/migration-guides/v7-greater-than-v8).
+
+## 7.15
+
+-   The i18n messages you defines in your theme are now also maid available to Keycloak.
+    In practice this mean that you can now customize the `kcContext.message.summary` that
+    display a general alert and the values returned by `kcContext.messagesPerField.get()` that
+    are used to display specific error on some field of the form.
+    [See video](https://youtu.be/D6tZcemReTI)
+
+## 7.14
+
+-   Deprecate the `extraPages` build option. Keycloakify is now able to analyze your code to detect extra pages.
+
+## 7.13
+
+-   Deprecate `customUserAttribute`, Keycloakify now analyze your code to predict field name usage. [See doc](https://docs.keycloakify.dev/build-options#customuserattributes).  
+    It's now mandatory to [adopt the new directory structure](https://docs.keycloakify.dev/migration-guides/v6-greater-than-v7).
+
+## 7.12
+
+-   You can now pack multiple themes variant in a single `.jar` bundle. In vanilla Keycloak themes you have the ability to extend a base theme.
+    There is now an idiomatic way of achieving the same result. [Learn more](https://docs.keycloakify.dev/build-options#keycloakify.themeVariantNames).
+
+## 7.9
+
+-   Separate script for copying the default theme static assets to the public directory.  
+    Theses assets are only needed for testing your theme locally in Storybook or with a `mockPageId`.  
+    You are now expected to have a `"prepare": "copy-keycloak-resources-to-public",` in your package.json scripts.  
+    This script will create `public/keycloak-assets` when you run `yarn install` (If you are using another package manager
+    like `pnpm` makes sure that `"prepare"` is actually ran.)  
+    [See the updated starter](https://github.com/keycloakify/keycloakify-starter/blob/94532fcf10bf8b19e0873be8575fd28a8958a806/package.json#L11). `public/keycloak-assets` shouldn't be tracked by GIT and is automatically ignored.
+
+## 7.7
+
+-   Better storybook support, see [the starter project](https://github.com/keycloakify/keycloakify-starter).
+
+## 7.0 🍾
+
+-   Account theme support 🚀
+-   It's much easier to customize pages at the CSS level, you can now see in the browser dev tool the customizable classes.
+-   New interactive CLI tool `npx eject-keycloak-page`, that enables to select the page you want to customize at the component level.
+-   There is [a Storybook](https://storybook.keycloakify.dev)
+-   [Remember me is fixed](https://github.com/keycloakify/keycloakify/pull/272)
+
+## 6.13
+
+-   Build work behind corporate proxies, [see issue](https://github.com/keycloakify/keycloakify/issues/257).
+
+## 6.12
+
+Massive improvement in the developer experience:
+
+-   There is now only one starter repo: https://github.com/codegouvfr/keycloakify-starter
+-   A lot of comments have been added in the code of the starter to make it easier to get started.
+-   The doc has been updated: https://docs.keycloakify.dev
+-   A lot of improvements in the type system.
+
+## 6.11.4
+
+-   You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/239).
+-   Feature new build options: [`bundler`](https://docs.keycloakify.dev/build-options#keycloakify.bundler), [`groupId`](https://docs.keycloakify.dev/build-options#keycloakify.groupid), [`artifactId`](https://docs.keycloakify.dev/build-options#keycloakify.artifactid), [`version`](https://docs.keycloakify.dev/build-options#version).  
+    Theses options can be user to customize the output name of the .jar. You can use environnement variables to overrides the values read in the package.json. Thanks to @lordvlad.
+
+## 6.10.0
+
+-   Widows compat (thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/226)). WSL is no longer required 🎉
+
+## 6.8.4
+
+-   `@emotion/react` is no longer a peer dependency of Keycloakify.
+
+## 6.8.0
+
+-   It is now possible to pass a custom `<Template />` component as a prop to `<KcApp />` and every
+    individual page (`<Login />`, `<RegisterUserProfile />`, ...) it enables to customize only the header and footer for
+    example without having to switch to a full-component level customization. [See issue](https://github.com/keycloakify/keycloakify/issues/191).
+
+## 6.7.0
+
+-   Add support for `webauthn-authenticate.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/185).
+
+## 6.6.0
+
+-   Add support for `login-password.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/184).
+
+## 6.5.0
+
+-   Add support for `login-username.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/183).
+
+## 6.4.0
+
+-   You can now optionally pass a `doFetchDefaultThemeResources: boolean` prop to every page component and the default `<KcApp />`
+    This enables you to prevent the default CSS and JS that comes with the builtin Keycloak theme to be downloaded.  
+    You'll get [a black slate](https://user-images.githubusercontent.com/6702424/192619083-4baa5df4-4a21-4ec7-8e28-d200d1208299.png).
+
+## 6.0.0
+
+-   Bundle size drastically reduced, locals and component dynamically loaded.
+-   First print much quicker, use of React.lazy() everywhere.
+-   Real i18n API.
+-   Actual documentation for build options.
+
+Checkout [the migration guide](https://docs.keycloakify.dev/v5-to-v6)
+
+## 5.8.0
+
+-   [React.lazy()](https://reactjs.org/docs/code-splitting.html#reactlazy) support 🎉. [#141](https://github.com/keycloakify/keycloakify/issues/141)
+
+## 5.7.0
+
+-   Feat `logout-confirm.ftl`. [PR](https://github.com/keycloakify/keycloakify/pull/120)
+
+## 5.6.4
+
+Fix `login-verify-email.ftl` page. [Before](https://user-images.githubusercontent.com/6702424/177436014-0bad22c4-5bfb-45bb-8fc9-dad65143cd0c.png) - [After](https://user-images.githubusercontent.com/6702424/177435797-ec5d7db3-84cf-49cb-8efc-3427a81f744e.png)
+
+## 5.6.0
+
+Add support for `login-config-totp.ftl` page [#127](https://github.com/keycloakify/keycloakify/pull/127).
+
+## 5.3.0
+
+Rename `keycloak_theme_email` to `keycloak_email`.  
+If you already had a `keycloak_theme_email` you should rename it `keycloak_email`.
+
+## 5.0.0
+
+[Migration guide](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63)  
+New i18n system.  
+Import of terms and services have changed. [See example](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63).
+
+## 4.10.0
+
+Add `login-idp-link-email.ftl` page [See PR](https://github.com/keycloakify/keycloakify/pull/92).
+
+## 4.8.0
+
+[Email template customization.](#email-template-customization)
+
+## 4.7.4
+
+**M1 Mac** support (for testing locally with a dockerized Keycloak).
+
+## 4.7.2
+
+> WARNING: This is broken.  
+> Testing with local Keycloak container working with M1 Mac. Thanks to [@eduardosanzb](https://github.com/keycloakify/keycloakify/issues/43#issuecomment-975699658).  
+> Be aware: When running M1s you are testing with Keycloak v15 else the local container spun will be a Keycloak v16.1.0.
+
+## 4.7.0
+
+Register with user profile enabled: Out of the box `options` validator support.  
+[Example](https://user-images.githubusercontent.com/6702424/158911163-81e6bbe8-feb0-4dc8-abff-de199d7a678e.mov)
+
+## 4.6.0
+
+`tss-react` and `powerhooks` are no longer peer dependencies of `keycloakify`.
+After updating Keycloakify you can remove `tss-react` and `powerhooks` from your dependencies if you don't use them explicitly.
+
+## 4.5.3
+
+There is a new recommended way to setup highly customized theme. See [here](https://github.com/garronej/keycloakify-demo-app/blob/look_and_feel/src/KcApp/KcApp.tsx).  
+Unlike with [the previous recommended method](https://github.com/garronej/keycloakify-demo-app/blob/a51660578bea15fb3e506b8a2b78e1056c6d68bb/src/KcApp/KcApp.tsx),
+with this new method your theme wont break on minor Keycloakify update.
+
+## 4.3.0
+
+Feature [`login-update-password.ftl`](https://user-images.githubusercontent.com/6702424/147517600-6191cf72-93dd-437b-a35c-47180142063e.png).  
+Every time a page is added it's a breaking change for non CSS-only theme.  
+Change [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L17) and [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L37) to update.
+
+## 4
+
+-   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
+-   Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
+
+## 3
+
+No breaking changes except that `@emotion/react`, [`tss-react`](https://www.npmjs.com/package/tss-react) and [`powerhooks`](https://www.npmjs.com/package/powerhooks) are now `peerDependencies` instead of being just dependencies.  
+It's important to avoid problem when using `keycloakify` alongside [`mui`](https://mui.com) and
+[when passing params from the app to the login page](https://github.com/keycloakify/keycloakify#implement-context-persistence-optional).
+
+## 2.5
+
+-   Feature [Use advanced message](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/i18n/useKcMessage.tsx#L53-L66)
+    and [`messagesPerFields`](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/getKcContext/KcContextBase.ts#L70-L75) (implementation [here](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/generateFtl/common.ftl#L130-L189))
+-   Test container now uses Keycloak version `15.0.2`.
+
+## 2
+
+-   It's now possible to implement custom `.ftl` pages.
+-   Support for Keycloak plugins that introduce non standard ftl values.
+    (Like for example [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) that define `authorizedMailDomains` in `register.ftl`).

package.json

@@ -1,48 +1,126 @@
 {
-    "name": "keycloak-react-theming",
-    "version": "0.0.17",
-    "description": "Keycloak theme generator for Reacts app",
+    "name": "keycloakify",
+    "version": "10.0.0-rc.25",
+    "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
-        "url": "git://github.com/garronej/keycloak-react-theming.git"
+        "url": "git://github.com/keycloakify/keycloakify.git"
     },
-    "main": "dist/lib/index.js",
-    "types": "dist/lib/index.d.ts",
     "scripts": {
-        "build": "tsc && npm run grant-exec-perms && npm run copy-standalone-ha",
-        "copy-standalone-ha": "cp src/bin/build-keycloak-theme/generateDebugFiles/standalone-ha.xml dist/bin/build-keycloak-theme/generateDebugFiles/",
-        "grant-exec-perms": "cd dist/bin && chmod +x build-keycloak-theme/index.js download-sample-keycloak-themes.js",
-        "test": "node dist/test/build-keycloak-theme && node dist/test/download-sample-keycloak-themes",
-        "enable_short_import_path": "npm run build && denoify_enable_short_npm_import_path"
+        "prepare": "patch-package && ts-node --skipProject scripts/generate-i18n-messages.ts",
+        "build": "ts-node --skipProject scripts/build.ts",
+        "storybook": "ts-node --skipProject scripts/start-storybook.ts",
+        "link-in-starter": "ts-node --skipProject scripts/link-in-starter.ts",
+        "test": "yarn test:types && vitest run",
+        "test:types": "tsc -p test/tsconfig.json --noEmit",
+        "_format": "prettier '**/*.{ts,tsx,json,md}'",
+        "format": "yarn _format --write",
+        "format:check": "yarn _format --list-different",
+        "link-in-app": "ts-node --skipProject scripts/link-in-app.ts",
+        "build-storybook": "ts-node --skipProject scripts/build-storybook.ts",
+        "dump-keycloak-realm": "ts-node --skipProject scripts/dump-keycloak-realm.ts"
     },
     "bin": {
-        "build-keycloak-theme": "dist/bin/build-keycloak-theme/index.js",
-        "download-sample-keycloak-themes": "dist/bin/download-sample-keycloak-themes.js"
+        "keycloakify": "dist/bin/main.js"
+    },
+    "lint-staged": {
+        "*.{ts,tsx,json,md}": [
+            "prettier --write"
+        ]
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged -v"
+        }
     },
     "author": "u/garronej",
     "license": "MIT",
     "files": [
-        "src/",
-        "!src/test/",
         "dist/",
-        "!dist/test/",
-        "!dist/tsconfig.tsbuildinfo"
+        "!dist/tsconfig.tsbuildinfo",
+        "!dist/bin/",
+        "dist/bin/main.js",
+        "dist/bin/*.index.js",
+        "dist/bin/shared/constants.js",
+        "dist/bin/shared/constants.d.ts",
+        "dist/bin/shared/constants.js.map",
+        "!dist/vite-plugin/",
+        "dist/vite-plugin/index.d.ts",
+        "dist/vite-plugin/vite-plugin.d.ts",
+        "dist/vite-plugin/index.js"
     ],
     "keywords": [
         "keycloak",
         "react",
-        "theme"
+        "theme",
+        "FreeMarker",
+        "ftl",
+        "login",
+        "register",
+        "account",
+        "bluehats"
     ],
-    "homepage": "https://github.com/garronej/keycloak-react-theming",
-    "devDependencies": {
-        "@types/node": "^10.0.0",
-        "copyfiles": "^2.4.1",
-        "denoify": "^0.6.4",
-        "scripting-tools": "^0.19.13",
-        "typescript": "^4.1.5"
+    "homepage": "https://www.keycloakify.dev",
+    "peerDependencies": {
+        "react": "*"
     },
     "dependencies": {
-        "cheerio": "^1.0.0-rc.5",
-        "evt": "^1.9.12"
+        "minimal-polyfills": "^2.2.3",
+        "react-markdown": "^5.0.3",
+        "tsafe": "^1.6.6"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.24.5",
+        "@babel/generator": "^7.24.5",
+        "@babel/parser": "^7.24.5",
+        "@babel/types": "^7.24.5",
+        "@emotion/react": "^11.11.4",
+        "@octokit/rest": "^20.1.1",
+        "@storybook/addon-a11y": "^6.5.16",
+        "@storybook/addon-actions": "^6.5.13",
+        "@storybook/addon-essentials": "^6.5.13",
+        "@storybook/addon-interactions": "^6.5.13",
+        "@storybook/addon-links": "^6.5.13",
+        "@storybook/builder-webpack5": "^6.5.13",
+        "@storybook/manager-webpack5": "^6.5.13",
+        "@storybook/react": "^6.5.13",
+        "@storybook/testing-library": "^0.0.13",
+        "@types/babel__generator": "^7.6.4",
+        "@types/make-fetch-happen": "^10.0.1",
+        "@types/minimist": "^1.2.2",
+        "@types/node": "^18.15.3",
+        "@types/react": "^18.0.35",
+        "@types/react-dom": "^18.0.11",
+        "@types/yauzl": "^2.10.3",
+        "@vercel/ncc": "^0.38.1",
+        "chalk": "^4.1.2",
+        "cheerio": "^1.0.0-rc.12",
+        "chokidar-cli": "^3.0.0",
+        "cli-select": "^1.1.2",
+        "eslint-plugin-storybook": "^0.6.7",
+        "husky": "^4.3.8",
+        "lint-staged": "^11.0.0",
+        "magic-string": "^0.30.7",
+        "make-fetch-happen": "^11.0.3",
+        "patch-package": "^8.0.0",
+        "powerhooks": "^1.0.10",
+        "prettier": "^3.2.5",
+        "properties-parser": "^0.3.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "recast": "^0.23.3",
+        "run-exclusive": "^2.2.19",
+        "scripting-tools": "^0.19.13",
+        "storybook-dark-mode": "^1.1.2",
+        "termost": "^0.12.0",
+        "ts-node": "^10.9.2",
+        "tsc-alias": "^1.8.10",
+        "tss-react": "^4.9.10",
+        "typescript": "^4.9.1-beta",
+        "vite": "^5.2.11",
+        "vitest": "^0.29.8",
+        "yauzl": "^2.10.0",
+        "zod": "^3.17.10",
+        "evt": "^2.5.7"
     }
 }

renovate.json

@@ -0,0 +1,27 @@
+{
+    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+    "baseBranches": ["main"],
+    "extends": ["config:base"],
+    "dependencyDashboard": false,
+    "bumpVersion": "patch",
+    "rangeStrategy": "bump",
+    "ignorePaths": [".github/**"],
+    "branchPrefix": "renovate_",
+    "vulnerabilityAlerts": {
+        "enabled": false
+    },
+    "packageRules": [
+        {
+            "packagePatterns": ["*"],
+            "excludePackagePatterns": ["tsafe", "evt"],
+            "enabled": false
+        },
+        {
+            "packagePatterns": ["tsafe", "evt"],
+            "matchUpdateTypes": ["minor", "patch"],
+            "automerge": true,
+            "automergeType": "branch",
+            "groupName": "garronej_modules_update"
+        }
+    ]
+}

scripts/build-storybook.ts

@@ -0,0 +1,19 @@
+import * as child_process from "child_process";
+import { join } from "path";
+
+run("yarn build");
+
+run(`node ${join("dist", "bin", "main.js")} copy-keycloak-resources-to-public`, {
+    env: {
+        ...process.env,
+        PUBLIC_DIR_PATH: join(".storybook", "static")
+    }
+});
+
+run("npx build-storybook");
+
+function run(command: string, options?: { env?: NodeJS.ProcessEnv }) {
+    console.log(`$ ${command}`);
+
+    child_process.execSync(command, { stdio: "inherit", ...options });
+}

scripts/build.ts

@@ -0,0 +1,133 @@
+import * as child_process from "child_process";
+import * as fs from "fs";
+import { join, relative } from "path";
+import { assert } from "tsafe/assert";
+import { transformCodebase } from "../src/bin/tools/transformCodebase";
+import chalk from "chalk";
+
+console.log(chalk.cyan("Building Keycloakify..."));
+
+const startTime = Date.now();
+
+if (fs.existsSync(join("dist", "bin", "main.original.js"))) {
+    fs.renameSync(
+        join("dist", "bin", "main.original.js"),
+        join("dist", "bin", "main.js")
+    );
+
+    fs.readdirSync(join("dist", "bin")).forEach(fileBasename => {
+        if (/[0-9]\.index.js/.test(fileBasename)) {
+            fs.rmSync(join("dist", "bin", fileBasename));
+        }
+    });
+}
+
+run(`npx tsc -p ${join("src", "bin", "tsconfig.json")}`);
+
+if (
+    !fs
+        .readFileSync(join("dist", "bin", "main.js"))
+        .toString("utf8")
+        .includes("__nccwpck_require__")
+) {
+    fs.cpSync(join("dist", "bin", "main.js"), join("dist", "bin", "main.original.js"));
+}
+
+run(`npx ncc build ${join("dist", "bin", "main.js")} -o ${join("dist", "ncc_out")}`);
+
+transformCodebase({
+    srcDirPath: join("dist", "ncc_out"),
+    destDirPath: join("dist", "bin"),
+    transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+        if (fileRelativePath === "index.js") {
+            return {
+                newFileName: "main.js",
+                modifiedSourceCode: sourceCode
+            };
+        }
+
+        return { modifiedSourceCode: sourceCode };
+    }
+});
+
+fs.rmSync(join("dist", "ncc_out"), { recursive: true });
+
+patchDeprecatedBufferApiUsage(join("dist", "bin", "main.js"));
+
+fs.chmodSync(
+    join("dist", "bin", "main.js"),
+    fs.statSync(join("dist", "bin", "main.js")).mode |
+        fs.constants.S_IXUSR |
+        fs.constants.S_IXGRP |
+        fs.constants.S_IXOTH
+);
+
+run(`npx tsc -p ${join("src", "tsconfig.json")}`);
+run(`npx tsc-alias -p ${join("src", "tsconfig.json")}`);
+
+if (fs.existsSync(join("dist", "vite-plugin", "index.original.js"))) {
+    fs.renameSync(
+        join("dist", "vite-plugin", "index.original.js"),
+        join("dist", "vite-plugin", "index.js")
+    );
+}
+
+run(`npx tsc -p ${join("src", "vite-plugin", "tsconfig.json")}`);
+
+if (
+    !fs
+        .readFileSync(join("dist", "vite-plugin", "index.js"))
+        .toString("utf8")
+        .includes("__nccwpck_require__")
+) {
+    fs.cpSync(
+        join("dist", "vite-plugin", "index.js"),
+        join("dist", "vite-plugin", "index.original.js")
+    );
+}
+
+run(
+    `npx ncc build ${join("dist", "vite-plugin", "index.js")} -o ${join(
+        "dist",
+        "ncc_out"
+    )}`
+);
+
+transformCodebase({
+    srcDirPath: join("dist", "ncc_out"),
+    destDirPath: join("dist", "vite-plugin"),
+    transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+        assert(fileRelativePath === "index.js");
+
+        return { modifiedSourceCode: sourceCode };
+    }
+});
+
+fs.rmSync(join("dist", "ncc_out"), { recursive: true });
+
+patchDeprecatedBufferApiUsage(join("dist", "vite-plugin", "index.js"));
+
+fs.rmSync(join("dist", "src"), { recursive: true, force: true });
+
+fs.cpSync("src", join("dist", "src"), { recursive: true });
+
+console.log(chalk.green(`✓ built in ${((Date.now() - startTime) / 1000).toFixed(2)}s`));
+
+function run(command: string) {
+    console.log(chalk.grey(`$ ${command}`));
+
+    child_process.execSync(command, { stdio: "inherit" });
+}
+
+function patchDeprecatedBufferApiUsage(filePath: string) {
+    const before = fs.readFileSync(filePath).toString("utf8");
+
+    const after = before.replace(
+        `var buffer = new Buffer(toRead);`,
+        `var buffer = Buffer.allocUnsafe ? Buffer.allocUnsafe(toRead) : new Buffer(toRead);`
+    );
+
+    assert(after !== before, `Patch failed for ${relative(process.cwd(), filePath)}`);
+
+    fs.writeFileSync(filePath, Buffer.from(after, "utf8"));
+}

scripts/dump-keycloak-realm.ts

@@ -0,0 +1,45 @@
+import { containerName } from "../src/bin/shared/constants";
+import child_process from "child_process";
+import { SemVer } from "../src/bin/tools/SemVer";
+import { join as pathJoin, relative as pathRelative } from "path";
+import chalk from "chalk";
+
+run(
+    [
+        `docker exec -it ${containerName}`,
+        `/opt/keycloak/bin/kc.sh export`,
+        `--dir /tmp`,
+        `--realm myrealm`,
+        `--users realm_file`
+    ].join(" ")
+);
+
+const keycloakMajorVersionNumber = SemVer.parse(
+    child_process
+        .execSync(`docker inspect --format '{{.Config.Image}}' ${containerName}`)
+        .toString("utf8")
+        .trim()
+        .split(":")[1]
+).major;
+
+const targetFilePath = pathRelative(
+    process.cwd(),
+    pathJoin(
+        __dirname,
+        "..",
+        "src",
+        "bin",
+        "start-keycloak",
+        `myrealm-realm-${keycloakMajorVersionNumber}.json`
+    )
+);
+
+run(`docker cp ${containerName}:/tmp/myrealm-realm.json ${targetFilePath}`);
+
+console.log(`${chalk.green(`✓ Exported realm to`)} ${chalk.bold(targetFilePath)}`);
+
+function run(command: string) {
+    console.log(chalk.grey(`$ ${command}`));
+
+    return child_process.execSync(command, { stdio: "inherit" });
+}

scripts/generate-i18n-messages.ts

@@ -0,0 +1,159 @@
+import "minimal-polyfills/Object.fromEntries";
+import * as fs from "fs";
+import {
+    join as pathJoin,
+    relative as pathRelative,
+    dirname as pathDirname,
+    sep as pathSep
+} from "path";
+import { crawl } from "../src/bin/tools/crawl";
+import { downloadKeycloakDefaultTheme } from "../src/bin/shared/downloadKeycloakDefaultTheme";
+import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRootDirPath";
+import { rmSync } from "../src/bin/tools/fs.rmSync";
+
+// NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
+// update the version array for generating for newer version.
+
+//@ts-ignore
+const propertiesParser = require("properties-parser");
+
+async function main() {
+    const keycloakVersion = "24.0.4";
+
+    const thisCodebaseRootDirPath = getThisCodebaseRootDirPath();
+
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
+        keycloakVersion,
+        buildOptions: {
+            cacheDirPath: pathJoin(
+                thisCodebaseRootDirPath,
+                "node_modules",
+                ".cache",
+                "keycloakify"
+            ),
+            npmWorkspaceRootDirPath: thisCodebaseRootDirPath
+        }
+    });
+
+    type Dictionary = { [idiomId: string]: string };
+
+    const record: { [typeOfPage: string]: { [language: string]: Dictionary } } = {};
+
+    {
+        const baseThemeDirPath = pathJoin(defaultThemeDirPath, "base");
+        const re = new RegExp(
+            `^([^\\${pathSep}]+)\\${pathSep}messages\\${pathSep}messages_([^.]+).properties$`
+        );
+
+        crawl({
+            dirPath: baseThemeDirPath,
+            returnedPathsType: "relative to dirPath"
+        }).forEach(filePath => {
+            const match = filePath.match(re);
+
+            if (match === null) {
+                return;
+            }
+
+            const [, typeOfPage, language] = match;
+
+            (record[typeOfPage] ??= {})[language.replace(/_/g, "-")] = Object.fromEntries(
+                Object.entries(
+                    propertiesParser.parse(
+                        fs
+                            .readFileSync(pathJoin(baseThemeDirPath, filePath))
+                            .toString("utf8")
+                    )
+                ).map(([key, value]: any) => [
+                    key === "locale_pt_BR" ? "locale_pt-BR" : key,
+                    value.replace(/''/g, "'")
+                ])
+            );
+        });
+    }
+
+    Object.keys(record).forEach(themeType => {
+        const recordForPageType = record[themeType];
+
+        if (themeType !== "login" && themeType !== "account") {
+            return;
+        }
+
+        const baseMessagesDirPath = pathJoin(
+            thisCodebaseRootDirPath,
+            "src",
+            themeType,
+            "i18n",
+            "baseMessages"
+        );
+
+        const languages = Object.keys(recordForPageType);
+
+        const generatedFileHeader = [
+            `//This code was automatically generated by running ${pathRelative(
+                thisCodebaseRootDirPath,
+                __filename
+            )}`,
+            "//PLEASE DO NOT EDIT MANUALLY"
+        ].join("\n");
+
+        languages.forEach(language => {
+            const filePath = pathJoin(baseMessagesDirPath, `${language}.ts`);
+
+            fs.mkdirSync(pathDirname(filePath), { recursive: true });
+
+            fs.writeFileSync(
+                filePath,
+                Buffer.from(
+                    [
+                        generatedFileHeader,
+                        "",
+                        "/* spell-checker: disable */",
+                        `const messages= ${JSON.stringify(
+                            recordForPageType[language],
+                            null,
+                            2
+                        )};`,
+                        "",
+                        "export default messages;",
+                        "/* spell-checker: enable */"
+                    ].join("\n"),
+                    "utf8"
+                )
+            );
+
+            //console.log(`${filePath} wrote`);
+        });
+
+        fs.writeFileSync(
+            pathJoin(baseMessagesDirPath, "index.ts"),
+            Buffer.from(
+                [
+                    generatedFileHeader,
+                    `import * as en from "./en";`,
+                    "",
+                    "export async function getMessages(currentLanguageTag: string) {",
+                    "    const { default: messages } = await (() => {",
+                    "        switch (currentLanguageTag) {",
+                    `            case "en": return en;`,
+                    ...languages
+                        .filter(language => language !== "en")
+                        .map(
+                            language =>
+                                `            case "${language}": return import("./${language}");`
+                        ),
+                    '            default: return { "default": {} };',
+                    "        }",
+                    "    })();",
+                    "    return messages;",
+                    "}"
+                ].join("\n"),
+                "utf8"
+            )
+        );
+    });
+}
+
+if (require.main === module) {
+    main();
+}

scripts/grant-exec-perms.ts

@@ -0,0 +1,19 @@
+import { join as pathJoin } from "path";
+import { constants } from "fs";
+import { chmod, stat } from "fs/promises";
+
+(async () => {
+    const thisCodebaseRootDirPath = pathJoin(__dirname, "..");
+
+    const { bin } = await import(pathJoin(thisCodebaseRootDirPath, "package.json"));
+
+    const promises = Object.values<string>(bin).map(async scriptPath => {
+        const fullPath = pathJoin(thisCodebaseRootDirPath, scriptPath);
+        const oldMode = (await stat(fullPath)).mode;
+        const newMode =
+            oldMode | constants.S_IXUSR | constants.S_IXGRP | constants.S_IXOTH;
+        await chmod(fullPath, newMode);
+    });
+
+    await Promise.all(promises);
+})();

scripts/link-in-app.ts

@@ -0,0 +1,163 @@
+import { execSync } from "child_process";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRootDirPath";
+import * as fs from "fs";
+
+const singletonDependencies: string[] = ["react", "@types/react"];
+
+const rootDirPath = getThisCodebaseRootDirPath();
+
+//NOTE: This is only required because of: https://github.com/garronej/ts-ci/blob/c0e207b9677523d4ec97fe672ddd72ccbb3c1cc4/README.md?plain=1#L54-L58
+fs.writeFileSync(
+    pathJoin(rootDirPath, "dist", "package.json"),
+    Buffer.from(
+        JSON.stringify(
+            (() => {
+                const packageJsonParsed = JSON.parse(
+                    fs
+                        .readFileSync(pathJoin(rootDirPath, "package.json"))
+                        .toString("utf8")
+                );
+
+                return {
+                    ...packageJsonParsed,
+                    main: packageJsonParsed["main"]?.replace(/^dist\//, ""),
+                    types: packageJsonParsed["types"]?.replace(/^dist\//, ""),
+                    module: packageJsonParsed["module"]?.replace(/^dist\//, ""),
+                    exports: !("exports" in packageJsonParsed)
+                        ? undefined
+                        : Object.fromEntries(
+                              Object.entries(packageJsonParsed["exports"]).map(
+                                  ([key, value]) => [
+                                      key,
+                                      (value as string).replace(/^\.\/dist\//, "./")
+                                  ]
+                              )
+                          )
+                };
+            })(),
+            null,
+            2
+        ),
+        "utf8"
+    )
+);
+
+const commonThirdPartyDeps = (() => {
+    // For example [ "@emotion" ] it's more convenient than
+    // having to list every sub emotion packages (@emotion/css @emotion/utils ...)
+    // in singletonDependencies
+    const namespaceSingletonDependencies: string[] = [];
+
+    return [
+        ...namespaceSingletonDependencies
+            .map(namespaceModuleName =>
+                fs
+                    .readdirSync(
+                        pathJoin(rootDirPath, "node_modules", namespaceModuleName)
+                    )
+                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
+            )
+            .reduce((prev, curr) => [...prev, ...curr], []),
+        ...singletonDependencies
+    ];
+})();
+
+const yarnGlobalDirPath = pathJoin(rootDirPath, ".yarn_home");
+
+fs.rmSync(yarnGlobalDirPath, { recursive: true, force: true });
+fs.mkdirSync(yarnGlobalDirPath);
+
+const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
+    const { targetModuleName, cwd } = params;
+
+    const cmd = [
+        "yarn",
+        "link",
+        ...(targetModuleName !== undefined ? [targetModuleName] : ["--no-bin-links"])
+    ].join(" ");
+
+    console.log(`$ cd ${pathRelative(rootDirPath, cwd) || "."} && ${cmd}`);
+
+    execSync(cmd, {
+        cwd,
+        env: {
+            ...process.env,
+            HOME: yarnGlobalDirPath
+        }
+    });
+};
+
+const testAppPaths = (() => {
+    const [, , ...testAppNames] = process.argv;
+
+    return testAppNames
+        .map(testAppName => {
+            const testAppPath = pathJoin(rootDirPath, "..", testAppName);
+
+            if (fs.existsSync(testAppPath)) {
+                return testAppPath;
+            }
+
+            console.warn(
+                `Skipping ${testAppName} since it cant be found here: ${testAppPath}`
+            );
+
+            return undefined;
+        })
+        .filter((path): path is string => path !== undefined);
+})();
+
+if (testAppPaths.length === 0) {
+    console.error("No test app to link into!");
+    process.exit(-1);
+}
+
+testAppPaths.forEach(testAppPath => execSync("yarn install", { cwd: testAppPath }));
+
+console.log("=== Linking common dependencies ===");
+
+const total = commonThirdPartyDeps.length;
+let current = 0;
+
+commonThirdPartyDeps.forEach(commonThirdPartyDep => {
+    current++;
+
+    console.log(`${current}/${total} ${commonThirdPartyDep}`);
+
+    const localInstallPath = pathJoin(
+        ...[
+            rootDirPath,
+            "node_modules",
+            ...(commonThirdPartyDep.startsWith("@")
+                ? commonThirdPartyDep.split("/")
+                : [commonThirdPartyDep])
+        ]
+    );
+
+    execYarnLink({ cwd: localInstallPath });
+});
+
+commonThirdPartyDeps.forEach(commonThirdPartyDep =>
+    testAppPaths.forEach(testAppPath =>
+        execYarnLink({
+            cwd: testAppPath,
+            targetModuleName: commonThirdPartyDep
+        })
+    )
+);
+
+console.log("=== Linking in house dependencies ===");
+
+execYarnLink({ cwd: pathJoin(rootDirPath, "dist") });
+
+testAppPaths.forEach(testAppPath =>
+    execYarnLink({
+        cwd: testAppPath,
+        targetModuleName: JSON.parse(
+            fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8")
+        )["name"]
+    })
+);
+
+export {};

scripts/link-in-starter.ts

@@ -0,0 +1,28 @@
+import * as child_process from "child_process";
+import * as fs from "fs";
+import { join } from "path";
+import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange";
+
+fs.rmSync("node_modules", { recursive: true, force: true });
+fs.rmSync("dist", { recursive: true, force: true });
+fs.rmSync(".yarn_home", { recursive: true, force: true });
+
+run("yarn install");
+run("yarn build");
+
+fs.rmSync(join("..", "keycloakify-starter", "node_modules"), {
+    recursive: true,
+    force: true
+});
+
+run("yarn install", { cwd: join("..", "keycloakify-starter") });
+
+run(`npx ts-node --skipProject ${join("scripts", "link-in-app.ts")} keycloakify-starter`);
+
+startRebuildOnSrcChange();
+
+function run(command: string, options?: { cwd: string }) {
+    console.log(`$ ${command}`);
+
+    child_process.execSync(command, { stdio: "inherit", ...options });
+}

scripts/start-storybook.ts

@@ -0,0 +1,31 @@
+import * as child_process from "child_process";
+import * as fs from "fs";
+import { join } from "path";
+import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange";
+
+run("yarn build");
+
+run(`node ${join("dist", "bin", "main.js")} copy-keycloak-resources-to-public`, {
+    env: {
+        ...process.env,
+        PUBLIC_DIR_PATH: join(".storybook", "static")
+    }
+});
+
+{
+    const child = child_process.spawn("npx", ["start-storybook", "-p", "6006"]);
+
+    child.stdout.on("data", data => process.stdout.write(data));
+
+    child.stderr.on("data", data => process.stderr.write(data));
+
+    child.on("exit", process.exit.bind(process));
+}
+
+startRebuildOnSrcChange();
+
+function run(command: string, options?: { env?: NodeJS.ProcessEnv }) {
+    console.log(`$ ${command}`);
+
+    child_process.execSync(command, { stdio: "inherit", ...options });
+}

scripts/startRebuildOnSrcChange.ts

@@ -0,0 +1,36 @@
+import * as child_process from "child_process";
+import { waitForDebounceFactory } from "powerhooks/tools/waitForDebounce";
+import chokidar from "chokidar";
+import * as runExclusive from "run-exclusive";
+import { Deferred } from "evt/tools/Deferred";
+import chalk from "chalk";
+
+export function startRebuildOnSrcChange() {
+    const { waitForDebounce } = waitForDebounceFactory({ delay: 400 });
+
+    const runYarnBuild = runExclusive.build(async () => {
+        console.log(chalk.green("Running `yarn build`"));
+
+        const dCompleted = new Deferred<void>();
+
+        const child = child_process.spawn("yarn", ["build"]);
+
+        child.stdout.on("data", data => process.stdout.write(data));
+
+        child.stderr.on("data", data => process.stderr.write(data));
+
+        child.on("exit", () => dCompleted.resolve());
+
+        await dCompleted.pr;
+
+        console.log("\n\n");
+    });
+
+    console.log(chalk.green("Watching for changes in src/"));
+
+    chokidar.watch("src", { ignoreInitial: true }).on("all", async () => {
+        await waitForDebounce();
+
+        runYarnBuild();
+    });
+}

src/PUBLIC_URL.ts

@@ -0,0 +1,24 @@
+import {
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir
+} from "keycloakify/bin/shared/constants";
+import { assert } from "tsafe/assert";
+
+/**
+ * This is an equivalent of process.env.PUBLIC_URL that you can use in Webpack projects.
+ * This works both in your main app and in your Keycloak theme.
+ */
+export const PUBLIC_URL = (() => {
+    const kcContext = (window as any)[nameOfTheGlobal];
+
+    if (kcContext === undefined || process.env.NODE_ENV === "development") {
+        assert(
+            process.env.PUBLIC_URL !== undefined,
+            `If you use keycloakify/PUBLIC_URL you should be in Webpack and thus process.env.PUBLIC_URL should be defined`
+        );
+
+        return process.env.PUBLIC_URL;
+    }
+
+    return `${kcContext.url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}`;
+})();

src/account/Fallback.tsx

@@ -0,0 +1,41 @@
+import { lazy, Suspense } from "react";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { I18n } from "keycloakify/account/i18n";
+import type { KcContext } from "./kcContext";
+import { assert, type Equals } from "tsafe/assert";
+import FederatedIdentity from "./pages/FederatedIdentity";
+
+const Password = lazy(() => import("keycloakify/account/pages/Password"));
+const Account = lazy(() => import("keycloakify/account/pages/Account"));
+const Sessions = lazy(() => import("keycloakify/account/pages/Sessions"));
+const Totp = lazy(() => import("keycloakify/account/pages/Totp"));
+const Applications = lazy(() => import("keycloakify/account/pages/Applications"));
+const Log = lazy(() => import("keycloakify/account/pages/Log"));
+
+export default function Fallback(props: PageProps<KcContext, I18n>) {
+    const { kcContext, ...rest } = props;
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    case "password.ftl":
+                        return <Password kcContext={kcContext} {...rest} />;
+                    case "sessions.ftl":
+                        return <Sessions kcContext={kcContext} {...rest} />;
+                    case "account.ftl":
+                        return <Account kcContext={kcContext} {...rest} />;
+                    case "totp.ftl":
+                        return <Totp kcContext={kcContext} {...rest} />;
+                    case "applications.ftl":
+                        return <Applications kcContext={kcContext} {...rest} />;
+                    case "log.ftl":
+                        return <Log kcContext={kcContext} {...rest} />;
+                    case "federatedIdentity.ftl":
+                        return <FederatedIdentity kcContext={kcContext} {...rest} />;
+                }
+                assert<Equals<typeof kcContext, never>>(false);
+            })()}
+        </Suspense>
+    );
+}

src/account/Template.tsx

@@ -0,0 +1,158 @@
+import { useEffect } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import { type TemplateProps } from "keycloakify/account/TemplateProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
+import { useSetClassName } from "keycloakify/tools/useSetClassName";
+import type { KcContext } from "./kcContext";
+import type { I18n } from "./i18n";
+import { assert } from "keycloakify/tools/assert";
+
+export default function Template(props: TemplateProps<KcContext, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, active, classes, children } = props;
+
+    const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+
+    const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
+
+    const { locale, url, features, realm, message, referrer } = kcContext;
+
+    useEffect(() => {
+        document.title = msgStr("accountManagementTitle");
+    }, []);
+
+    useSetClassName({
+        qualifiedName: "html",
+        className: getClassName("kcHtmlClass")
+    });
+
+    useSetClassName({
+        qualifiedName: "body",
+        className: clsx("admin-console", "user", getClassName("kcBodyClass"))
+    });
+
+    useEffect(() => {
+        const { currentLanguageTag } = locale ?? {};
+
+        if (currentLanguageTag === undefined) {
+            return;
+        }
+
+        const html = document.querySelector("html");
+        assert(html !== null);
+        html.lang = currentLanguageTag;
+    }, []);
+
+    const { areAllStyleSheetsLoaded } = useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: !doUseDefaultCss
+            ? []
+            : [
+                  `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+                  `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+                  `${url.resourcesPath}/css/account.css`
+              ]
+    });
+
+    if (!areAllStyleSheetsLoaded) {
+        return null;
+    }
+
+    return (
+        <>
+            <header className="navbar navbar-default navbar-pf navbar-main header">
+                <nav className="navbar" role="navigation">
+                    <div className="navbar-header">
+                        <div className="container">
+                            <h1 className="navbar-title">Keycloak</h1>
+                        </div>
+                    </div>
+                    <div className="navbar-collapse navbar-collapse-1">
+                        <div className="container">
+                            <ul className="nav navbar-nav navbar-utility">
+                                {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
+                                    <li>
+                                        <div className="kc-dropdown" id="kc-locale-dropdown">
+                                            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                            <a href="#" id="kc-current-locale-link">
+                                                {labelBySupportedLanguageTag[currentLanguageTag]}
+                                            </a>
+                                            <ul>
+                                                {locale.supported.map(({ languageTag }) => (
+                                                    <li key={languageTag} className="kc-dropdown-item">
+                                                        <a href={getChangeLocalUrl(languageTag)}>{labelBySupportedLanguageTag[languageTag]}</a>
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    </li>
+                                )}
+                                {referrer?.url && (
+                                    <li>
+                                        <a href={referrer.url} id="referrer">
+                                            {msg("backTo", referrer.name)}
+                                        </a>
+                                    </li>
+                                )}
+                                <li>
+                                    <a href={url.getLogoutUrl()}>{msg("doSignOut")}</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </nav>
+            </header>
+
+            <div className="container">
+                <div className="bs-sidebar col-sm-3">
+                    <ul>
+                        <li className={clsx(active === "account" && "active")}>
+                            <a href={url.accountUrl}>{msg("account")}</a>
+                        </li>
+                        {features.passwordUpdateSupported && (
+                            <li className={clsx(active === "password" && "active")}>
+                                <a href={url.passwordUrl}>{msg("password")}</a>
+                            </li>
+                        )}
+                        <li className={clsx(active === "totp" && "active")}>
+                            <a href={url.totpUrl}>{msg("authenticator")}</a>
+                        </li>
+                        {features.identityFederation && (
+                            <li className={clsx(active === "social" && "active")}>
+                                <a href={url.socialUrl}>{msg("federatedIdentity")}</a>
+                            </li>
+                        )}
+                        <li className={clsx(active === "sessions" && "active")}>
+                            <a href={url.sessionsUrl}>{msg("sessions")}</a>
+                        </li>
+                        <li className={clsx(active === "applications" && "active")}>
+                            <a href={url.applicationsUrl}>{msg("applications")}</a>
+                        </li>
+                        {features.log && (
+                            <li className={clsx(active === "log" && "active")}>
+                                <a href={url.logUrl}>{msg("log")}</a>
+                            </li>
+                        )}
+                        {realm.userManagedAccessAllowed && features.authorization && (
+                            <li className={clsx(active === "authorization" && "active")}>
+                                <a href={url.resourceUrl}>{msg("myResources")}</a>
+                            </li>
+                        )}
+                    </ul>
+                </div>
+
+                <div className="col-sm-9 content-area">
+                    {message !== undefined && (
+                        <div className={clsx("alert", `alert-${message.type}`)}>
+                            {message.type === "success" && <span className="pficon pficon-ok"></span>}
+                            {message.type === "error" && <span className="pficon pficon-error-circle-o"></span>}
+                            <span className="kc-feedback-text">{message.summary}</span>
+                        </div>
+                    )}
+
+                    {children}
+                </div>
+            </div>
+        </>
+    );
+}

src/account/TemplateProps.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { KcContext } from "./kcContext";
+import type { I18n } from "./i18n";
+
+export type TemplateProps<
+    KcContext extends KcContext.Common,
+    I18nExtended extends I18n
+> = {
+    kcContext: KcContext;
+    i18n: I18nExtended;
+    doUseDefaultCss: boolean;
+    active: string;
+    classes?: Partial<Record<ClassKey, string>>;
+    children: ReactNode;
+};
+
+export type ClassKey =
+    | "kcHtmlClass"
+    | "kcBodyClass"
+    | "kcButtonClass"
+    | "kcButtonPrimaryClass"
+    | "kcButtonLargeClass"
+    | "kcButtonDefaultClass"
+    | "kcContentWrapperClass"
+    | "kcFormClass"
+    | "kcFormGroupClass"
+    | "kcInputWrapperClass"
+    | "kcLabelClass"
+    | "kcInputClass"
+    | "kcInputErrorMessageClass";

src/account/i18n/i18n.tsx

@@ -0,0 +1,269 @@
+import "minimal-polyfills/Object.fromEntries";
+import { useEffect, useState, useRef } from "react";
+import fallbackMessages from "./baseMessages/en";
+import { getMessages } from "./baseMessages";
+import { assert } from "tsafe/assert";
+import type { KcContext } from "../kcContext/KcContext";
+
+export const fallbackLanguageTag = "en";
+
+export type KcContextLike = {
+    locale?: {
+        currentLanguageTag: string;
+        supported: { languageTag: string; url: string; label: string }[];
+    };
+};
+
+assert<KcContext extends KcContextLike ? true : false>();
+
+export type MessageKey = keyof typeof fallbackMessages | keyof (typeof keycloakifyExtraMessages)[typeof fallbackLanguageTag];
+
+export type GenericI18n<MessageKey extends string> = {
+    /**
+     * e.g: "en", "fr", "zh-CN"
+     *
+     * The current language
+     */
+    currentLanguageTag: string;
+    /**
+     * Redirect to this url to change the language.
+     * After reload currentLanguageTag === newLanguageTag
+     */
+    getChangeLocalUrl: (newLanguageTag: string) => string;
+    /**
+     * e.g. "en" => "English", "fr" => "Français", ...
+     *
+     * Used to render a select that enable user to switch language.
+     * ex: https://user-images.githubusercontent.com/6702424/186044799-38801eec-4e89-483b-81dd-8e9233e8c0eb.png
+     * */
+    labelBySupportedLanguageTag: Record<string, string>;
+    /**
+     * Examples assuming currentLanguageTag === "en"
+     *
+     * msg("access-denied") === <span>Access denied</span>
+     * msg("impersonateTitleHtml", "Foo") === <span><strong>Foo</strong> Impersonate User</span>
+     */
+    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
+    /**
+     * It's the same thing as msg() but instead of returning a JSX.Element it returns a string.
+     * It can be more convenient to manipulate strings but if there are HTML tags it wont render.
+     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
+     */
+    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
+    /**
+     * This is meant to be used when the key argument is variable, something that might have been configured by the user
+     * in the Keycloak admin for example.
+     *
+     * Examples assuming currentLanguageTag === "en"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "foo": "Foo {0} {1}",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * advancedMsg("${access-denied} foo bar") === <span>{msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
+     * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
+     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
+     * advancedMsg("${bar}", "<strong>c</strong>")
+     *    === <span>{msgStr("bar", "<strong>XXX</strong>")}<span>
+     *    === <span>Bar &lt;strong&gt;XXX&lt;/strong&gt;</span> (The html in the arg is partially escaped for security reasons, it might be untrusted)
+     * advancedMsg("${foo} xx ${bar}", "a", "b", "c")
+     *    === <span>{msgStr("foo", "a", "b")} xx {msgStr("bar")}<span>
+     *    === <span>Foo a b xx Bar {0}</span> (The substitution are only applied in the first message)
+     */
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
+    /**
+     * See advancedMsg() but instead of returning a JSX.Element it returns a string.
+     */
+    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
+};
+
+export type I18n = GenericI18n<MessageKey>;
+
+export function createUseI18n<ExtraMessageKey extends string = never>(extraMessages: {
+    [languageTag: string]: { [key in ExtraMessageKey]: string };
+}) {
+    function useI18n(params: { kcContext: KcContextLike }): GenericI18n<MessageKey | ExtraMessageKey> | null {
+        const { kcContext } = params;
+
+        const [i18n, setI18n] = useState<GenericI18n<ExtraMessageKey | MessageKey> | undefined>(undefined);
+
+        const refHasStartedFetching = useRef(false);
+
+        useEffect(() => {
+            if (refHasStartedFetching.current) {
+                return;
+            }
+
+            refHasStartedFetching.current = true;
+
+            (async () => {
+                const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
+
+                setI18n({
+                    ...createI18nTranslationFunctions({
+                        fallbackMessages: {
+                            ...fallbackMessages,
+                            ...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
+                            ...(extraMessages[fallbackLanguageTag] ?? {})
+                        } as any,
+                        messages: {
+                            ...(await getMessages(currentLanguageTag)),
+                            ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
+                            ...(extraMessages[currentLanguageTag] ?? {})
+                        } as any
+                    }),
+                    currentLanguageTag,
+                    getChangeLocalUrl: newLanguageTag => {
+                        const { locale } = kcContext;
+
+                        assert(locale !== undefined, "Internationalization not enabled");
+
+                        const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
+
+                        assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
+
+                        return targetSupportedLocale.url;
+                    },
+                    labelBySupportedLanguageTag: Object.fromEntries(
+                        (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
+                    )
+                });
+            })();
+        }, []);
+
+        return i18n ?? null;
+    }
+
+    return { useI18n };
+}
+
+function createI18nTranslationFunctions<MessageKey extends string>(params: {
+    fallbackMessages: Record<MessageKey, string>;
+    messages: Record<MessageKey, string>;
+}): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
+    const { fallbackMessages, messages } = params;
+
+    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
+        const { key, args, doRenderAsHtml } = props;
+
+        const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
+
+        if (messageOrUndefined === undefined) {
+            return undefined;
+        }
+
+        const message = messageOrUndefined;
+
+        const messageWithArgsInjectedIfAny = (() => {
+            const startIndex = message
+                .match(/{[0-9]+}/g)
+                ?.map(g => g.match(/{([0-9]+)}/)![1])
+                .map(indexStr => parseInt(indexStr))
+                .sort((a, b) => a - b)[0];
+
+            if (startIndex === undefined) {
+                // No {0} in message (no arguments expected)
+                return message;
+            }
+
+            let messageWithArgsInjected = message;
+
+            args.forEach((arg, i) => {
+                if (arg === undefined) {
+                    return;
+                }
+
+                messageWithArgsInjected = messageWithArgsInjected.replace(
+                    new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                );
+            });
+
+            return messageWithArgsInjected;
+        })();
+
+        return doRenderAsHtml ? (
+            <span
+                // NOTE: The message is trusted. The arguments are not but are escaped.
+                dangerouslySetInnerHTML={{
+                    __html: messageWithArgsInjectedIfAny
+                }}
+            />
+        ) : (
+            messageWithArgsInjectedIfAny
+        );
+    }
+
+    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
+        const { key, args, doRenderAsHtml } = props;
+
+        if (!/\$\{[^}]+\}/.test(key)) {
+            const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
+
+            if (resolvedMessage === undefined) {
+                return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
+            }
+
+            return resolvedMessage;
+        }
+
+        let isFirstMatch = true;
+
+        const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
+            const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
+
+            isFirstMatch = false;
+
+            return replaceBy;
+        });
+
+        return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
+    }
+
+    return {
+        msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
+        msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
+        advancedMsg: (key, ...args) =>
+            resolveMsgAdvanced({
+                key,
+                args,
+                doRenderAsHtml: true
+            }) as JSX.Element,
+        advancedMsgStr: (key, ...args) =>
+            resolveMsgAdvanced({
+                key,
+                args,
+                doRenderAsHtml: false
+            }) as string
+    };
+}
+
+const keycloakifyExtraMessages = {
+    en: {
+        shouldBeEqual: "{0} should be equal to {1}",
+        shouldBeDifferent: "{0} should be different to {1}",
+        shouldMatchPattern: "Pattern should match: `/{0}/`",
+        mustBeAnInteger: "Must be an integer",
+        notAValidOption: "Not a valid option",
+        newPasswordSameAsOld: "New password must be different from the old one",
+        passwordConfirmNotMatch: "Password confirmation does not match"
+    },
+    fr: {
+        /* spell-checker: disable */
+        shouldBeEqual: "{0} doit être égal à {1}",
+        shouldBeDifferent: "{0} doit être différent de {1}",
+        shouldMatchPattern: "Dois respecter le schéma: `/{0}/`",
+        mustBeAnInteger: "Doit être un nombre entier",
+        notAValidOption: "N'est pas une option valide",
+
+        logoutConfirmTitle: "Déconnexion",
+        logoutConfirmHeader: "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
+        doLogout: "Se déconnecter",
+        newPasswordSameAsOld: "Le nouveau mot de passe doit être différent de l'ancien",
+        passwordConfirmNotMatch: "La confirmation du mot de passe ne correspond pas"
+        /* spell-checker: enable */
+    }
+};

src/account/i18n/index.ts

@@ -0,0 +1 @@
+export type { I18n } from "./i18n";

src/account/index.ts

@@ -0,0 +1,10 @@
+import Fallback from "keycloakify/account/Fallback";
+
+export default Fallback;
+
+export type { AccountThemePageId as PageId } from "keycloakify/bin/shared/constants";
+export { createUseI18n } from "keycloakify/account/i18n/i18n";
+export type { ExtendKcContext } from "keycloakify/account/kcContext";
+export { createGetKcContextMock } from "keycloakify/account/kcContext";
+
+export type { PageProps } from "keycloakify/account/pages/PageProps";

src/account/kcContext/KcContext.ts

@@ -0,0 +1,306 @@
+import type { ThemeType, AccountThemePageId } from "keycloakify/bin/shared/constants";
+import type { ValueOf } from "keycloakify/tools/ValueOf";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+export type ExtendKcContext<
+    KcContextExtraProperties extends { properties?: Record<string, string | undefined> },
+    KcContextExtraPropertiesPerPage extends Record<string, Record<string, unknown>>
+> = ValueOf<{
+    [PageId in keyof KcContextExtraPropertiesPerPage | KcContext["pageId"]]: Extract<
+        KcContext,
+        { pageId: PageId }
+    > extends never
+        ? KcContext.Common &
+              KcContextExtraProperties & {
+                  pageId: PageId;
+              } & KcContextExtraPropertiesPerPage[PageId]
+        : Extract<KcContext, { pageId: PageId }> &
+              KcContextExtraProperties &
+              KcContextExtraPropertiesPerPage[PageId];
+}>;
+
+export type KcContext =
+    | KcContext.Password
+    | KcContext.Account
+    | KcContext.Sessions
+    | KcContext.Totp
+    | KcContext.Applications
+    | KcContext.Log
+    | KcContext.FederatedIdentity;
+
+export declare namespace KcContext {
+    export type Common = {
+        themeVersion: string;
+        keycloakifyVersion: string;
+        themeType: "account";
+        themeName: string;
+        locale?: {
+            supported: {
+                url: string;
+                label: string;
+                languageTag: string;
+            }[];
+            currentLanguageTag: string;
+        };
+        url: {
+            accountUrl: string;
+            passwordUrl: string;
+            totpUrl: string;
+            socialUrl: string;
+            sessionsUrl: string;
+            applicationsUrl: string;
+            logUrl: string;
+            logoutUrl: string;
+            resourceUrl: string;
+            resourcesCommonPath: string;
+            resourcesPath: string;
+            /** @deprecated, not present in recent keycloak version apparently, use kcContext.referrer instead */
+            referrerURI?: string;
+            getLogoutUrl: () => string;
+        };
+        features: {
+            passwordUpdateSupported: boolean;
+            identityFederation: boolean;
+            log: boolean;
+            authorization: boolean;
+        };
+        realm: {
+            internationalizationEnabled: boolean;
+            userManagedAccessAllowed: boolean;
+        };
+        // Present only if redirected to account page with ?referrer=xxx&referrer_uri=http...
+        message?: {
+            type: "success" | "warning" | "error" | "info";
+            summary: string;
+        };
+        referrer?: {
+            url: string; // The url of the App
+            name: string; // Client id
+        };
+        messagesPerField: {
+            /**
+             * Return text if message for given field exists. Useful eg. to add css styles for fields with message.
+             *
+             * @param fieldName to check for
+             * @param text to return
+             * @return text if message exists for given field, else undefined
+             */
+            printIfExists: <T extends string>(
+                fieldName: string,
+                text: T
+            ) => T | undefined;
+            /**
+             * Check if exists error message for given fields
+             *
+             * @param fields
+             * @return boolean
+             */
+            existsError: (fieldName: string) => boolean;
+            /**
+             * Get message for given field.
+             *
+             * @param fieldName
+             * @return message text or empty string
+             */
+            get: (fieldName: string) => string;
+            /**
+             * Check if message for given field exists
+             *
+             * @param field
+             * @return boolean
+             */
+            exists: (fieldName: string) => boolean;
+        };
+        account: {
+            email?: string;
+            firstName: string;
+            lastName?: string;
+            username?: string;
+        };
+        properties: Record<string, string | undefined>;
+    };
+
+    export type Password = Common & {
+        pageId: "password.ftl";
+        password: {
+            passwordSet: boolean;
+        };
+        stateChecker: string;
+    };
+
+    export type Account = Common & {
+        pageId: "account.ftl";
+        url: {
+            accountUrl: string;
+        };
+        realm: {
+            registrationEmailAsUsername: boolean;
+            editUsernameAllowed: boolean;
+        };
+        stateChecker: string;
+    };
+
+    export type Sessions = Common & {
+        pageId: "sessions.ftl";
+        sessions: {
+            sessions: {
+                expires: string;
+                clients: string[];
+                ipAddress: string;
+                started: string;
+                lastAccess: string;
+                id: string;
+            }[];
+        };
+        stateChecker: string;
+    };
+
+    export type Totp = Common & {
+        pageId: "totp.ftl";
+        totp: {
+            enabled: boolean;
+            totpSecretEncoded: string;
+            qrUrl: string;
+            policy: {
+                algorithm: "HmacSHA1" | "HmacSHA256" | "HmacSHA512";
+                digits: number;
+                lookAheadWindow: number;
+            } & (
+                | {
+                      type: "totp";
+                      period: number;
+                  }
+                | {
+                      type: "hotp";
+                      initialCounter: number;
+                  }
+            );
+            supportedApplications: string[];
+            totpSecretQrCode: string;
+            manualUrl: string;
+            totpSecret: string;
+            otpCredentials: { id: string; userLabel: string }[];
+        };
+        mode?: "qr" | "manual" | undefined | null;
+        isAppInitiatedAction: boolean;
+        stateChecker: string;
+    };
+
+    export type Applications = Common & {
+        pageId: "applications.ftl";
+        features: {
+            log: boolean;
+            identityFederation: boolean;
+            authorization: boolean;
+            passwordUpdateSupported: boolean;
+        };
+        stateChecker: string;
+        applications: {
+            applications: {
+                realmRolesAvailable: {
+                    name: string;
+                    description: string;
+                    compositesStream?: Record<string, unknown>;
+                    clientRole?: boolean;
+                    composite?: boolean;
+                    id?: string;
+                    containerId?: string;
+                    attributes?: Record<string, unknown>;
+                }[];
+                resourceRolesAvailable: Record<
+                    string,
+                    {
+                        roleName: string;
+                        roleDescription?: string;
+                        clientName: string;
+                        clientId: string;
+                    }[]
+                >;
+                additionalGrants: string[];
+                clientScopesGranted: string[];
+                effectiveUrl?: string;
+                client: {
+                    alwaysDisplayInConsole: boolean;
+                    attributes: Record<string, unknown>;
+                    authenticationFlowBindingOverrides: Record<string, unknown>;
+                    baseUrl?: string;
+                    bearerOnly: boolean;
+                    clientAuthenticatorType: string;
+                    clientId: string;
+                    consentRequired: boolean;
+                    consentScreenText: string;
+                    description: string;
+                    directAccessGrantsEnabled: boolean;
+                    displayOnConsentScreen: boolean;
+                    dynamicScope: boolean;
+                    enabled: boolean;
+                    frontchannelLogout: boolean;
+                    fullScopeAllowed: boolean;
+                    id: string;
+                    implicitFlowEnabled: boolean;
+                    includeInTokenScope: boolean;
+                    managementUrl: string;
+                    name?: string;
+                    nodeReRegistrationTimeout: string;
+                    notBefore: string;
+                    protocol: string;
+                    protocolMappersStream: Record<string, unknown>;
+                    publicClient: boolean;
+                    realm: Record<string, unknown>;
+                    realmScopeMappingsStream: Record<string, unknown>;
+                    redirectUris: string[];
+                    registeredNodes: Record<string, unknown>;
+                    rolesStream: Record<string, unknown>;
+                    rootUrl?: string;
+                    scopeMappingsStream: Record<string, unknown>;
+                    secret: string;
+                    serviceAccountsEnabled: boolean;
+                    standardFlowEnabled: boolean;
+                    surrogateAuthRequired: boolean;
+                    webOrigins: string[];
+                };
+            }[];
+        };
+    };
+
+    export type Log = Common & {
+        pageId: "log.ftl";
+        log: {
+            events: {
+                date: string | number | Date;
+                event: string;
+                ipAddress: string;
+                client: string;
+                details: { value: string; key: string }[];
+            }[];
+        };
+    };
+
+    export type FederatedIdentity = Common & {
+        pageId: "federatedIdentity.ftl";
+        stateChecker: string;
+        federatedIdentity: {
+            identities: {
+                providerId: string;
+                displayName: string;
+                userName: string;
+                connected: boolean;
+            }[];
+            removeLinkPossible: boolean;
+        };
+    };
+}
+
+{
+    type Got = KcContext["pageId"];
+    type Expected = AccountThemePageId;
+
+    type OnlyInGot = Exclude<Got, Expected>;
+    type OnlyInExpected = Exclude<Expected, Got>;
+
+    assert<Equals<OnlyInGot, never>>();
+    assert<Equals<OnlyInExpected, never>>();
+}
+
+assert<KcContext["themeType"] extends ThemeType ? true : false>();

src/account/kcContext/getKcContextMock.ts

@@ -0,0 +1,80 @@
+import type { ExtendKcContext, KcContext as KcContextBase } from "./KcContext";
+import type { AccountThemePageId } from "keycloakify/bin/shared/constants";
+import type { DeepPartial } from "keycloakify/tools/DeepPartial";
+import { deepAssign } from "keycloakify/tools/deepAssign";
+import { structuredCloneButFunctions } from "keycloakify/tools/structuredCloneButFunctions";
+import { kcContextMocks, kcContextCommonMock } from "./kcContextMocks";
+import { exclude } from "tsafe/exclude";
+
+export function createGetKcContextMock<
+    KcContextExtraProperties extends { properties?: Record<string, string | undefined> },
+    KcContextExtraPropertiesPerPage extends Record<
+        `${string}.ftl`,
+        Record<string, unknown>
+    >
+>(params: {
+    kcContextExtraProperties: KcContextExtraProperties;
+    kcContextExtraPropertiesPerPage: KcContextExtraPropertiesPerPage;
+    overrides?: DeepPartial<KcContextExtraProperties & KcContextBase.Common>;
+    overridesPerPage?: {
+        [PageId in
+            | AccountThemePageId
+            | keyof KcContextExtraPropertiesPerPage]?: DeepPartial<
+            Extract<
+                ExtendKcContext<
+                    KcContextExtraProperties,
+                    KcContextExtraPropertiesPerPage
+                >,
+                { pageId: PageId }
+            >
+        >;
+    };
+}) {
+    const {
+        kcContextExtraProperties,
+        kcContextExtraPropertiesPerPage,
+        overrides: overrides_global,
+        overridesPerPage: overridesPerPage_global
+    } = params;
+
+    type KcContext = ExtendKcContext<
+        KcContextExtraProperties,
+        KcContextExtraPropertiesPerPage
+    >;
+
+    function getKcContextMock<
+        PageId extends AccountThemePageId | keyof KcContextExtraPropertiesPerPage
+    >(params: {
+        pageId: PageId;
+        overrides?: DeepPartial<Extract<KcContext, { pageId: PageId }>>;
+    }): Extract<KcContext, { pageId: PageId }> {
+        const { pageId, overrides } = params;
+
+        const kcContextMock = structuredCloneButFunctions(
+            kcContextMocks.find(kcContextMock => kcContextMock.pageId === pageId) ?? {
+                ...kcContextCommonMock,
+                pageId
+            }
+        );
+
+        [
+            kcContextExtraProperties,
+            kcContextExtraPropertiesPerPage[pageId],
+            overrides_global,
+            overridesPerPage_global?.[pageId],
+            overrides
+        ]
+            .filter(exclude(undefined))
+            .forEach(overrides =>
+                deepAssign({
+                    target: kcContextMock,
+                    source: overrides
+                })
+            );
+
+        // @ts-expect-error
+        return kcContextMock;
+    }
+
+    return { getKcContextMock };
+}

src/account/kcContext/index.ts

@@ -0,0 +1,2 @@
+export type { ExtendKcContext, KcContext } from "./KcContext";
+export { createGetKcContextMock } from "./getKcContextMock";

src/account/kcContext/kcContextMocks.ts

@@ -0,0 +1,199 @@
+import "minimal-polyfills/Object.fromEntries";
+import { resources_common, keycloak_resources } from "keycloakify/bin/shared/constants";
+import { id } from "tsafe/id";
+import type { KcContext } from "./KcContext";
+import { BASE_URL } from "keycloakify/lib/BASE_URL";
+
+const resourcesPath = `${BASE_URL}${keycloak_resources}/account/resources`;
+
+export const kcContextCommonMock: KcContext.Common = {
+    themeVersion: "0.0.0",
+    keycloakifyVersion: "0.0.0",
+    themeType: "account",
+    themeName: "my-theme-name",
+    url: {
+        resourcesPath,
+        resourcesCommonPath: `${resourcesPath}/${resources_common}`,
+        resourceUrl: "#",
+        accountUrl: "#",
+        applicationsUrl: "#",
+        logoutUrl: "#",
+        getLogoutUrl: () => "#",
+        logUrl: "#",
+        passwordUrl: "#",
+        sessionsUrl: "#",
+        socialUrl: "#",
+        totpUrl: "#"
+    },
+    realm: {
+        internationalizationEnabled: true,
+        userManagedAccessAllowed: true
+    },
+    messagesPerField: {
+        printIfExists: () => {
+            return undefined;
+        },
+        existsError: () => false,
+        get: key => `Fake error for ${key}`,
+        exists: () => false
+    },
+    locale: {
+        supported: [
+            /* spell-checker: disable */
+            ["de", "Deutsch"],
+            ["no", "Norsk"],
+            ["ru", "Русский"],
+            ["sv", "Svenska"],
+            ["pt-BR", "Português (Brasil)"],
+            ["lt", "Lietuvių"],
+            ["en", "English"],
+            ["it", "Italiano"],
+            ["fr", "Français"],
+            ["zh-CN", "中文简体"],
+            ["es", "Español"],
+            ["cs", "Čeština"],
+            ["ja", "日本語"],
+            ["sk", "Slovenčina"],
+            ["pl", "Polski"],
+            ["ca", "Català"],
+            ["nl", "Nederlands"],
+            ["tr", "Türkçe"]
+            /* spell-checker: enable */
+        ].map(
+            ([languageTag, label]) =>
+                ({
+                    languageTag,
+                    label,
+                    url: "https://gist.github.com/garronej/52baaca1bb925f2296ab32741e062b8e"
+                }) as const
+        ),
+        currentLanguageTag: "en"
+    },
+    features: {
+        authorization: true,
+        identityFederation: true,
+        log: true,
+        passwordUpdateSupported: true
+    },
+    referrer: undefined,
+    account: {
+        firstName: "john",
+        lastName: "doe",
+        email: "john.doe@code.gouv.fr",
+        username: "doe_j"
+    },
+    properties: {
+        parent: "account-v1",
+        kcButtonLargeClass: "btn-lg",
+        locales:
+            "ar,ca,cs,da,de,en,es,fr,fi,hu,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN",
+        kcButtonPrimaryClass: "btn-primary",
+        accountResourceProvider: "account-v1",
+        styles: "css/account.css img/icon-sidebar-active.png img/logo.png resources-common/node_modules/patternfly/dist/css/patternfly.min.css resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css",
+        kcButtonClass: "btn",
+        kcButtonDefaultClass: "btn-default"
+    }
+};
+
+export const kcContextMocks: KcContext[] = [
+    id<KcContext.Password>({
+        ...kcContextCommonMock,
+        pageId: "password.ftl",
+        password: {
+            passwordSet: true
+        },
+        stateChecker: "state checker"
+    }),
+    id<KcContext.Account>({
+        ...kcContextCommonMock,
+        pageId: "account.ftl",
+        url: {
+            ...kcContextCommonMock.url,
+            referrerURI: "#",
+            accountUrl: "#"
+        },
+        realm: {
+            ...kcContextCommonMock.realm,
+            registrationEmailAsUsername: true,
+            editUsernameAllowed: true
+        },
+        stateChecker: ""
+    }),
+    id<KcContext.Sessions>({
+        ...kcContextCommonMock,
+        pageId: "sessions.ftl",
+        sessions: {
+            sessions: [
+                {
+                    ipAddress: "127.0.0.1",
+                    started: new Date().toString(),
+                    lastAccess: new Date().toString(),
+                    expires: new Date().toString(),
+                    clients: ["Chrome", "Firefox"],
+                    id: "f8951177-817d-4a70-9c02-86d3c170fe51"
+                }
+            ]
+        },
+        stateChecker: "g6WB1FaYnKotTkiy7ZrlxvFztSqS0U8jvHsOOOb2z4g"
+    }),
+    id<KcContext.Totp>({
+        ...kcContextCommonMock,
+        pageId: "totp.ftl",
+        totp: {
+            enabled: true,
+            totpSecretEncoded: "KVVF G2BY N4YX S6LB IUYT K2LH IFYE 4SBV",
+            qrUrl: "#",
+            totpSecretQrCode:
+                "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACM0lEQVR4Xu3OIZJgOQwDUDFd2UxiurLAVnnbHw4YGDKtSiWOn4Gxf81//7r/+q8b4HfLGBZDK9d85NmNR+sB42sXvOYrN5P1DcgYYFTGfOlbzE8gzwy3euweGizw7cfdl34/GRhlkxjKNV+5AebPXPORX1JuB9x8ZfbyyD2y1krWAKsbMq1HnqQDaLfa77p4+MqvzEGSqvSAD/2IHW2yHaigR9tX3m8dDIYGcNf3f+gDpVBZbZU77zyJ6Rlcy+qoTMG887KAPD9hsh6a1Sv3gJUHGHUAxSMzj7zqDDe7Phmt2eG+8UsMxjRGm816MAO+8VMl1R1jGHOrZB/5Zo/WXAPgxixm9Mo96vDGrM1eOto8c4Ax4wF437mifOXlpiPzCnN7Y9l95NnEMxgMY9AAGA8fucH14Y1aVb6N/cqrmyh0BVht7k1e+bU8LK0Cg5vmVq9c5vHIjOfqxDIfeTraNVTwewa4wVe+SW5N+uP1qACeudUZbqGOfA6VZV750Noq2Xx3kpveV44ZelSV1V7KFHzkWyVrrlUwG0Pl9pWnoy3vsQoME6vKI69i5osVgwWzHT7zjmJtMcNUSVn1oYMd7ZodbgowZl45VG0uVuLPUr1yc79uaQBag/mqR34xhlWyHm1prplHboCWdZ4TeZjsK8+dI+jbz1C5hl65mcpgB5dhcj8+dGO+0Ko68+lD37JDD83dpDLzzK+TrQyaVwGj6pUboGV+7+AyN8An/pf84/7rv/4/1l4OCc/1BYMAAAAASUVORK5CYII=",
+            manualUrl: "#",
+            totpSecret: "G4nsI8lQagRMUchH8jEG",
+            otpCredentials: [],
+            supportedApplications: [
+                "totpAppFreeOTPName",
+                "totpAppMicrosoftAuthenticatorName",
+                "totpAppGoogleName"
+            ],
+            policy: {
+                algorithm: "HmacSHA1",
+                digits: 6,
+                lookAheadWindow: 1,
+                type: "totp",
+                period: 30
+            }
+        },
+        mode: "qr",
+        isAppInitiatedAction: false,
+        stateChecker: ""
+    }),
+    id<KcContext.Log>({
+        ...kcContextCommonMock,
+        pageId: "log.ftl",
+        log: {
+            events: [
+                {
+                    date: "2/21/2024, 1:28:39 PM",
+                    event: "login",
+                    ipAddress: "172.17.0.1",
+                    client: "security-admin-console",
+                    details: [{ key: "openid-connect", value: "admin" }]
+                }
+            ]
+        }
+    }),
+    id<KcContext.FederatedIdentity>({
+        ...kcContextCommonMock,
+        stateChecker: "",
+        pageId: "federatedIdentity.ftl",
+        federatedIdentity: {
+            identities: [
+                {
+                    providerId: "keycloak-oidc",
+                    displayName: "keycloak-oidc",
+                    userName: "John",
+                    connected: true
+                }
+            ],
+            removeLinkPossible: true
+        }
+    })
+];

src/account/lib/useGetClassName.ts

@@ -0,0 +1,21 @@
+import { createUseClassName } from "keycloakify/lib/useGetClassName";
+import type { ClassKey } from "keycloakify/account/TemplateProps";
+
+export const { useGetClassName } = createUseClassName<ClassKey>({
+    defaultClasses: {
+        kcHtmlClass: undefined,
+        kcBodyClass: undefined,
+        kcButtonClass: "btn",
+        kcContentWrapperClass: "row",
+        kcButtonPrimaryClass: "btn-primary",
+        kcButtonLargeClass: "btn-lg",
+        kcButtonDefaultClass: "btn-default",
+        kcFormClass: "form-horizontal",
+        kcFormGroupClass: "form-group",
+        kcInputWrapperClass: "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        kcLabelClass: "control-label",
+        kcInputClass: "form-control",
+        kcInputErrorMessageClass:
+            "pf-c-form__helper-text pf-m-error required kc-feedback-text"
+    }
+});

src/account/pages/Account.tsx

@@ -0,0 +1,133 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes: {
+            ...classes,
+            kcBodyClass: clsx(classes?.kcBodyClass, "user")
+        }
+    });
+
+    const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="account">
+            <div className="row">
+                <div className="col-md-10">
+                    <h2>{msg("editAccountHtmlTitle")}</h2>
+                </div>
+                <div className="col-md-2 subtitle">
+                    <span className="subtitle">
+                        <span className="required">*</span> {msg("requiredFields")}
+                    </span>
+                </div>
+            </div>
+
+            <form action={url.accountUrl} className="form-horizontal" method="post">
+                <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+
+                {!realm.registrationEmailAsUsername && (
+                    <div className={clsx("form-group", messagesPerField.printIfExists("username", "has-error"))}>
+                        <div className="col-sm-2 col-md-2">
+                            <label htmlFor="username" className="control-label">
+                                {msg("username")}
+                            </label>
+                            {realm.editUsernameAllowed && <span className="required">*</span>}
+                        </div>
+
+                        <div className="col-sm-10 col-md-10">
+                            <input
+                                type="text"
+                                className="form-control"
+                                id="username"
+                                name="username"
+                                disabled={!realm.editUsernameAllowed}
+                                defaultValue={account.username ?? ""}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                <div className={clsx("form-group", messagesPerField.printIfExists("email", "has-error"))}>
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="email" className="control-label">
+                            {msg("email")}
+                        </label>{" "}
+                        <span className="required">*</span>
+                    </div>
+
+                    <div className="col-sm-10 col-md-10">
+                        <input type="text" className="form-control" id="email" name="email" autoFocus defaultValue={account.email ?? ""} />
+                    </div>
+                </div>
+
+                <div className={clsx("form-group", messagesPerField.printIfExists("firstName", "has-error"))}>
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="firstName" className="control-label">
+                            {msg("firstName")}
+                        </label>{" "}
+                        <span className="required">*</span>
+                    </div>
+
+                    <div className="col-sm-10 col-md-10">
+                        <input type="text" className="form-control" id="firstName" name="firstName" defaultValue={account.firstName ?? ""} />
+                    </div>
+                </div>
+
+                <div className={clsx("form-group", messagesPerField.printIfExists("lastName", "has-error"))}>
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="lastName" className="control-label">
+                            {msg("lastName")}
+                        </label>{" "}
+                        <span className="required">*</span>
+                    </div>
+
+                    <div className="col-sm-10 col-md-10">
+                        <input type="text" className="form-control" id="lastName" name="lastName" defaultValue={account.lastName ?? ""} />
+                    </div>
+                </div>
+
+                <div className="form-group">
+                    <div id="kc-form-buttons" className="col-md-offset-2 col-md-10 submit">
+                        <div>
+                            {referrer !== undefined && <a href={referrer?.url}>{msg("backToApplication")}</a>}
+                            <button
+                                type="submit"
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="submitAction"
+                                value="Save"
+                            >
+                                {msg("doSave")}
+                            </button>
+                            <button
+                                type="submit"
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonDefaultClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="submitAction"
+                                value="Cancel"
+                            >
+                                {msg("doCancel")}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

src/account/pages/Applications.tsx

@@ -0,0 +1,138 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+function isArrayWithEmptyObject(variable: any): boolean {
+    return Array.isArray(variable) && variable.length === 1 && typeof variable[0] === "object" && Object.keys(variable[0]).length === 0;
+}
+
+export default function Applications(props: PageProps<Extract<KcContext, { pageId: "applications.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const {
+        url,
+        applications: { applications },
+        stateChecker
+    } = kcContext;
+
+    const { msg, advancedMsg } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="applications">
+            <div className="row">
+                <div className="col-md-10">
+                    <h2>{msg("applicationsHtmlTitle")}</h2>
+                </div>
+
+                <form action={url.applicationsUrl} method="post">
+                    <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                    <input type="hidden" id="referrer" name="referrer" value={stateChecker} />
+
+                    <table className="table table-striped table-bordered">
+                        <thead>
+                            <tr>
+                                <td>{msg("application")}</td>
+                                <td>{msg("availableRoles")}</td>
+                                <td>{msg("grantedPermissions")}</td>
+                                <td>{msg("additionalGrants")}</td>
+                                <td>{msg("action")}</td>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            {applications.map(application => (
+                                <tr key={application.client.clientId}>
+                                    <td>
+                                        {application.effectiveUrl && (
+                                            <a href={application.effectiveUrl}>
+                                                {(application.client.name && advancedMsg(application.client.name)) || application.client.clientId}
+                                            </a>
+                                        )}
+                                        {!application.effectiveUrl &&
+                                            ((application.client.name && advancedMsg(application.client.name)) || application.client.clientId)}
+                                    </td>
+
+                                    <td>
+                                        {!isArrayWithEmptyObject(application.realmRolesAvailable) &&
+                                            application.realmRolesAvailable.map((role, index) => (
+                                                <span key={role.name}>
+                                                    {role.description ? advancedMsg(role.description) : advancedMsg(role.name)}
+                                                    {index < application.realmRolesAvailable.length - 1 && ", "}
+                                                </span>
+                                            ))}
+                                        {!isArrayWithEmptyObject(application.realmRolesAvailable) && application.resourceRolesAvailable && ", "}
+                                        {application.resourceRolesAvailable &&
+                                            Object.keys(application.resourceRolesAvailable).map(resource => (
+                                                <span key={resource}>
+                                                    {!isArrayWithEmptyObject(application.realmRolesAvailable) && ", "}
+                                                    {application.resourceRolesAvailable[resource].map(clientRole => (
+                                                        <span key={clientRole.roleName}>
+                                                            {clientRole.roleDescription
+                                                                ? advancedMsg(clientRole.roleDescription)
+                                                                : advancedMsg(clientRole.roleName)}{" "}
+                                                            {msg("inResource")}{" "}
+                                                            <strong>
+                                                                {clientRole.clientName ? advancedMsg(clientRole.clientName) : clientRole.clientId}
+                                                            </strong>
+                                                            {clientRole !==
+                                                                application.resourceRolesAvailable[resource][
+                                                                    application.resourceRolesAvailable[resource].length - 1
+                                                                ] && ", "}
+                                                        </span>
+                                                    ))}
+                                                </span>
+                                            ))}
+                                    </td>
+
+                                    <td>
+                                        {application.client.consentRequired ? (
+                                            application.clientScopesGranted.map(claim => (
+                                                <span key={claim}>
+                                                    {advancedMsg(claim)}
+                                                    {claim !== application.clientScopesGranted[application.clientScopesGranted.length - 1] && ", "}
+                                                </span>
+                                            ))
+                                        ) : (
+                                            <strong>{msg("fullAccess")}</strong>
+                                        )}
+                                    </td>
+
+                                    <td>
+                                        {application.additionalGrants.map(grant => (
+                                            <span key={grant}>
+                                                {advancedMsg(grant)}
+                                                {grant !== application.additionalGrants[application.additionalGrants.length - 1] && ", "}
+                                            </span>
+                                        ))}
+                                    </td>
+
+                                    <td>
+                                        {(application.client.consentRequired && application.clientScopesGranted.length > 0) ||
+                                        application.additionalGrants.length > 0 ? (
+                                            <button
+                                                type="submit"
+                                                className={clsx(getClassName("kcButtonPrimaryClass"), getClassName("kcButtonClass"))}
+                                                id={`revoke-${application.client.clientId}`}
+                                                name="clientId"
+                                                value={application.client.id}
+                                            >
+                                                {msg("revoke")}
+                                            </button>
+                                        ) : null}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </form>
+            </div>
+        </Template>
+    );
+}

src/account/pages/FederatedIdentity.tsx

@@ -0,0 +1,58 @@
+import { PageProps } from "keycloakify/account";
+import { I18n } from "keycloakify/account/i18n";
+import { KcContext } from "keycloakify/account/kcContext";
+
+export default function FederatedIdentity(props: PageProps<Extract<KcContext, { pageId: "federatedIdentity.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+
+    const { url, federatedIdentity, stateChecker } = kcContext;
+    const { msg } = i18n;
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="federatedIdentity">
+            <div className="main-layout social">
+                <div className="row">
+                    <div className="col-md-10">
+                        <h2>{msg("federatedIdentitiesHtmlTitle")}</h2>
+                    </div>
+                </div>
+                <div id="federated-identities">
+                    {federatedIdentity.identities.map(identity => (
+                        <div key={identity.providerId} className="row margin-bottom">
+                            <div className="col-sm-2 col-md-2">
+                                <label htmlFor={identity.providerId} className="control-label">
+                                    {identity.displayName}
+                                </label>
+                            </div>
+                            <div className="col-sm-5 col-md-5">
+                                <input disabled className="form-control" value={identity.userName} />
+                            </div>
+                            <div className="col-sm-5 col-md-5">
+                                {identity.connected ? (
+                                    federatedIdentity.removeLinkPossible && (
+                                        <form action={url.socialUrl} method="post" className="form-inline">
+                                            <input type="hidden" name="stateChecker" value={stateChecker} />
+                                            <input type="hidden" name="action" value="remove" />
+                                            <input type="hidden" name="providerId" value={identity.providerId} />
+                                            <button id={`remove-link-${identity.providerId}`} className="btn btn-default">
+                                                {msg("doRemove")}
+                                            </button>
+                                        </form>
+                                    )
+                                ) : (
+                                    <form action={url.socialUrl} method="post" className="form-inline">
+                                        <input type="hidden" name="stateChecker" value={stateChecker} />
+                                        <input type="hidden" name="action" value="add" />
+                                        <input type="hidden" name="providerId" value={identity.providerId} />
+                                        <button id={`add-link-${identity.providerId}`} className="btn btn-default">
+                                            {msg("doAdd")}
+                                        </button>
+                                    </form>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </Template>
+    );
+}

src/account/pages/Log.tsx

@@ -0,0 +1,70 @@
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+import { Key } from "react";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+
+export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { log } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="log">
+            <div className={getClassName("kcContentWrapperClass")}>
+                <div className="col-md-10">
+                    <h2>{msg("accountLogHtmlTitle")}</h2>
+                </div>
+
+                <table className="table table-striped table-bordered">
+                    <thead>
+                        <tr>
+                            <td>{msg("date")}</td>
+                            <td>{msg("event")}</td>
+                            <td>{msg("ip")}</td>
+                            <td>{msg("client")}</td>
+                            <td>{msg("details")}</td>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        {log.events.map(
+                            (
+                                event: {
+                                    date: string | number | Date;
+                                    event: string;
+                                    ipAddress: string;
+                                    client: any;
+                                    details: any[];
+                                },
+                                index: Key | null | undefined
+                            ) => (
+                                <tr key={index}>
+                                    <td>{event.date ? new Date(event.date).toLocaleString() : ""}</td>
+                                    <td>{event.event}</td>
+                                    <td>{event.ipAddress}</td>
+                                    <td>{event.client || ""}</td>
+                                    <td>
+                                        {event.details.map((detail, detailIndex) => (
+                                            <span key={detailIndex}>
+                                                {`${detail.key} = ${detail.value}`}
+                                                {detailIndex < event.details.length - 1 && ", "}
+                                            </span>
+                                        ))}
+                                    </td>
+                                </tr>
+                            )
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </Template>
+    );
+}

src/account/pages/PageProps.ts

@@ -0,0 +1,12 @@
+import type { I18n } from "keycloakify/account/i18n";
+import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
+import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
+import type { KcContext } from "keycloakify/account/kcContext";
+
+export type PageProps<NarowedKcContext = KcContext, I18nExtended extends I18n = I18n> = {
+    Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
+    kcContext: NarowedKcContext;
+    i18n: I18nExtended;
+    doUseDefaultCss: boolean;
+    classes?: Partial<Record<ClassKey, string>>;
+};

src/account/pages/Password.tsx

@@ -0,0 +1,211 @@
+import { useState } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes: {
+            ...classes,
+            kcBodyClass: clsx(classes?.kcBodyClass, "password")
+        }
+    });
+
+    const { url, password, account, stateChecker } = kcContext;
+
+    const { msgStr, msg } = i18n;
+
+    const [currentPassword, setCurrentPassword] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [newPasswordConfirm, setNewPasswordConfirm] = useState("");
+    const [newPasswordError, setNewPasswordError] = useState("");
+    const [newPasswordConfirmError, setNewPasswordConfirmError] = useState("");
+    const [hasNewPasswordBlurred, setHasNewPasswordBlurred] = useState(false);
+    const [hasNewPasswordConfirmBlurred, setHasNewPasswordConfirmBlurred] = useState(false);
+
+    const checkNewPassword = (newPassword: string) => {
+        if (!password.passwordSet) {
+            return;
+        }
+
+        if (newPassword === currentPassword) {
+            setNewPasswordError(msgStr("newPasswordSameAsOld"));
+        } else {
+            setNewPasswordError("");
+        }
+    };
+
+    const checkNewPasswordConfirm = (newPasswordConfirm: string) => {
+        if (newPasswordConfirm === "") {
+            return;
+        }
+
+        if (newPassword !== newPasswordConfirm) {
+            setNewPasswordConfirmError(msgStr("passwordConfirmNotMatch"));
+        } else {
+            setNewPasswordConfirmError("");
+        }
+    };
+
+    return (
+        <Template
+            {...{
+                kcContext: {
+                    ...kcContext,
+                    message: (() => {
+                        if (newPasswordError !== "") {
+                            return {
+                                type: "error",
+                                summary: newPasswordError
+                            };
+                        }
+
+                        if (newPasswordConfirmError !== "") {
+                            return {
+                                type: "error",
+                                summary: newPasswordConfirmError
+                            };
+                        }
+
+                        return kcContext.message;
+                    })()
+                },
+                i18n,
+                doUseDefaultCss,
+                classes
+            }}
+            active="password"
+        >
+            <div className="row">
+                <div className="col-md-10">
+                    <h2>{msg("changePasswordHtmlTitle")}</h2>
+                </div>
+                <div className="col-md-2 subtitle">
+                    <span className="subtitle">{msg("allFieldsRequired")}</span>
+                </div>
+            </div>
+
+            <form action={url.passwordUrl} className="form-horizontal" method="post">
+                <input
+                    type="text"
+                    id="username"
+                    name="username"
+                    value={account.username ?? ""}
+                    autoComplete="username"
+                    readOnly
+                    style={{ display: "none" }}
+                />
+
+                {password.passwordSet && (
+                    <div className="form-group">
+                        <div className="col-sm-2 col-md-2">
+                            <label htmlFor="password" className="control-label">
+                                {msg("password")}
+                            </label>
+                        </div>
+                        <div className="col-sm-10 col-md-10">
+                            <input
+                                type="password"
+                                className="form-control"
+                                id="password"
+                                name="password"
+                                autoFocus
+                                autoComplete="current-password"
+                                value={currentPassword}
+                                onChange={event => setCurrentPassword(event.target.value)}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+
+                <div className="form-group">
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="password-new" className="control-label">
+                            {msg("passwordNew")}
+                        </label>
+                    </div>
+                    <div className="col-sm-10 col-md-10">
+                        <input
+                            type="password"
+                            className="form-control"
+                            id="password-new"
+                            name="password-new"
+                            autoComplete="new-password"
+                            value={newPassword}
+                            onChange={event => {
+                                const newPassword = event.target.value;
+
+                                setNewPassword(newPassword);
+                                if (hasNewPasswordBlurred) {
+                                    checkNewPassword(newPassword);
+                                }
+                            }}
+                            onBlur={() => {
+                                setHasNewPasswordBlurred(true);
+                                checkNewPassword(newPassword);
+                            }}
+                        />
+                    </div>
+                </div>
+
+                <div className="form-group">
+                    <div className="col-sm-2 col-md-2">
+                        <label htmlFor="password-confirm" className="control-label two-lines">
+                            {msg("passwordConfirm")}
+                        </label>
+                    </div>
+
+                    <div className="col-sm-10 col-md-10">
+                        <input
+                            type="password"
+                            className="form-control"
+                            id="password-confirm"
+                            name="password-confirm"
+                            autoComplete="new-password"
+                            value={newPasswordConfirm}
+                            onChange={event => {
+                                const newPasswordConfirm = event.target.value;
+
+                                setNewPasswordConfirm(newPasswordConfirm);
+                                if (hasNewPasswordConfirmBlurred) {
+                                    checkNewPasswordConfirm(newPasswordConfirm);
+                                }
+                            }}
+                            onBlur={() => {
+                                setHasNewPasswordConfirmBlurred(true);
+                                checkNewPasswordConfirm(newPasswordConfirm);
+                            }}
+                        />
+                    </div>
+                </div>
+
+                <div className="form-group">
+                    <div id="kc-form-buttons" className="col-md-offset-2 col-md-10 submit">
+                        <div>
+                            <button
+                                disabled={newPasswordError !== "" || newPasswordConfirmError !== ""}
+                                type="submit"
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="submitAction"
+                                value="Save"
+                            >
+                                {msg("doSave")}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

src/account/pages/Sessions.tsx

@@ -0,0 +1,65 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "sessions.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, stateChecker, sessions } = kcContext;
+
+    const { msg } = i18n;
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="sessions">
+            <div className={getClassName("kcContentWrapperClass")}>
+                <div className="col-md-10">
+                    <h2>{msg("sessionsHtmlTitle")}</h2>
+                </div>
+            </div>
+
+            <table className="table table-striped table-bordered">
+                <thead>
+                    <tr>
+                        <th>{msg("ip")}</th>
+                        <th>{msg("started")}</th>
+                        <th>{msg("lastAccess")}</th>
+                        <th>{msg("expires")}</th>
+                        <th>{msg("clients")}</th>
+                    </tr>
+                </thead>
+
+                <tbody role="rowgroup">
+                    {sessions.sessions.map((session, index: number) => (
+                        <tr key={index}>
+                            <td>{session.ipAddress}</td>
+                            <td>{session?.started}</td>
+                            <td>{session?.lastAccess}</td>
+                            <td>{session?.expires}</td>
+                            <td>
+                                {session.clients.map((client: string, clientIndex: number) => (
+                                    <div key={clientIndex}>
+                                        {client}
+                                        <br />
+                                    </div>
+                                ))}
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+
+            <form action={url.sessionsUrl} method="post">
+                <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                <button id="logout-all-sessions" type="submit" className={clsx(getClassName("kcButtonDefaultClass"), getClassName("kcButtonClass"))}>
+                    {msg("doLogOutAllSessions")}
+                </button>
+            </form>
+        </Template>
+    );
+}

src/account/pages/Totp.tsx

@@ -0,0 +1,230 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+
+export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
+
+    const { msg, msgStr, advancedMsg } = i18n;
+
+    const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
+        HmacSHA1: "SHA1",
+        HmacSHA256: "SHA256",
+        HmacSHA512: "SHA512"
+    };
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="totp">
+            <>
+                <div className="row">
+                    <div className="col-md-10">
+                        <h2>{msg("authenticatorTitle")}</h2>
+                    </div>
+                    {totp.otpCredentials.length === 0 && (
+                        <div className="subtitle col-md-2">
+                            <span className="required">*</span>
+                            {msg("requiredFields")}
+                        </div>
+                    )}
+                </div>
+                {totp.enabled && (
+                    <table className="table table-bordered table-striped">
+                        <thead>
+                            {totp.otpCredentials.length > 1 ? (
+                                <tr>
+                                    <th colSpan={4}>{msg("configureAuthenticators")}</th>
+                                </tr>
+                            ) : (
+                                <tr>
+                                    <th colSpan={3}>{msg("configureAuthenticators")}</th>
+                                </tr>
+                            )}
+                        </thead>
+                        <tbody>
+                            {totp.otpCredentials.map((credential, index) => (
+                                <tr key={index}>
+                                    <td className="provider">{msg("mobile")}</td>
+                                    {totp.otpCredentials.length > 1 && <td className="provider">{credential.id}</td>}
+                                    <td className="provider">{credential.userLabel || ""}</td>
+                                    <td className="action">
+                                        <form action={url.totpUrl} method="post" className="form-inline">
+                                            <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                                            <input type="hidden" id="submitAction" name="submitAction" value="Delete" />
+                                            <input type="hidden" id="credentialId" name="credentialId" value={credential.id} />
+                                            <button id={`remove-mobile-${index}`} className="btn btn-default">
+                                                <i className="pficon pficon-delete"></i>
+                                            </button>
+                                        </form>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                )}
+                {!totp.enabled && (
+                    <div>
+                        <hr />
+                        <ol id="kc-totp-settings">
+                            <li>
+                                <p>{msg("totpStep1")}</p>
+
+                                <ul id="kc-totp-supported-apps">{totp.supportedApplications?.map(app => <li key={app}>{advancedMsg(app)}</li>)}</ul>
+                            </li>
+
+                            {mode && mode == "manual" ? (
+                                <>
+                                    <li>
+                                        <p>{msg("totpManualStep2")}</p>
+                                        <p>
+                                            <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+                                        </p>
+                                        <p>
+                                            <a href={totp.qrUrl} id="mode-barcode">
+                                                {msg("totpScanBarcode")}
+                                            </a>
+                                        </p>
+                                    </li>
+                                    <li>
+                                        <p>{msg("totpManualStep3")}</p>
+                                        <ul>
+                                            <li id="kc-totp-type">
+                                                {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
+                                            </li>
+                                            <li id="kc-totp-algorithm">
+                                                {msg("totpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                            </li>
+                                            <li id="kc-totp-digits">
+                                                {msg("totpDigits")}: {totp.policy.digits}
+                                            </li>
+                                            {totp.policy.type === "totp" ? (
+                                                <li id="kc-totp-period">
+                                                    {msg("totpInterval")}: {totp.policy.period}
+                                                </li>
+                                            ) : (
+                                                <li id="kc-totp-counter">
+                                                    {msg("totpCounter")}: {totp.policy.initialCounter}
+                                                </li>
+                                            )}
+                                        </ul>
+                                    </li>
+                                </>
+                            ) : (
+                                <li>
+                                    <p>{msg("totpStep2")}</p>
+                                    <p>
+                                        <img
+                                            id="kc-totp-secret-qr-code"
+                                            src={`data:image/png;base64, ${totp.totpSecretQrCode}`}
+                                            alt="Figure: Barcode"
+                                        />
+                                    </p>
+                                    <p>
+                                        <a href={totp.manualUrl} id="mode-manual">
+                                            {msg("totpUnableToScan")}
+                                        </a>
+                                    </p>
+                                </li>
+                            )}
+                            <li>
+                                <p>{msg("totpStep3")}</p>
+                                <p>{msg("totpStep3DeviceName")}</p>
+                            </li>
+                        </ol>
+                        <hr />
+                        <form action={url.totpUrl} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
+                            <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                            <div className={getClassName("kcFormGroupClass")}>
+                                <div className="col-sm-2 col-md-2">
+                                    <label htmlFor="totp" className="control-label">
+                                        {msg("authenticatorCode")}
+                                    </label>
+                                    <span className="required">*</span>
+                                </div>
+                                <div className="col-sm-10 col-md-10">
+                                    <input
+                                        type="text"
+                                        id="totp"
+                                        name="totp"
+                                        autoComplete="off"
+                                        className={getClassName("kcInputClass")}
+                                        aria-invalid={messagesPerField.existsError("totp")}
+                                    />
+
+                                    {messagesPerField.existsError("totp") && (
+                                        <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                            {messagesPerField.get("totp")}
+                                        </span>
+                                    )}
+                                </div>
+                                <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
+                                {mode && <input type="hidden" id="mode" value={mode} />}
+                            </div>
+
+                            <div className={getClassName("kcFormGroupClass")}>
+                                <div className="col-sm-2 col-md-2">
+                                    <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
+                                        {msg("totpDeviceName")}
+                                    </label>
+                                    {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
+                                </div>
+                                <div className="col-sm-10 col-md-10">
+                                    <input
+                                        type="text"
+                                        id="userLabel"
+                                        name="userLabel"
+                                        autoComplete="off"
+                                        className={getClassName("kcInputClass")}
+                                        aria-invalid={messagesPerField.existsError("userLabel")}
+                                    />
+                                    {messagesPerField.existsError("userLabel") && (
+                                        <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                            {messagesPerField.get("userLabel")}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+
+                            <div id="kc-form-buttons" className={clsx(getClassName("kcFormGroupClass"), "text-right")}>
+                                <div className={getClassName("kcInputWrapperClass")}>
+                                    <input
+                                        type="submit"
+                                        className={clsx(
+                                            getClassName("kcButtonClass"),
+                                            getClassName("kcButtonPrimaryClass"),
+                                            getClassName("kcButtonLargeClass")
+                                        )}
+                                        id="saveTOTPBtn"
+                                        value={msgStr("doSave")}
+                                    />
+                                    <button
+                                        type="submit"
+                                        className={clsx(
+                                            getClassName("kcButtonClass"),
+                                            getClassName("kcButtonDefaultClass"),
+                                            getClassName("kcButtonLargeClass"),
+                                            getClassName("kcButtonLargeClass")
+                                        )}
+                                        id="cancelTOTPBtn"
+                                        name="submitAction"
+                                        value="Cancel"
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                )}
+            </>
+        </Template>
+    );
+}

src/bin/build-keycloak-theme/generateDebugFiles/index.ts

@@ -1,74 +0,0 @@
-
-import * as fs from "fs";
-import { join as pathJoin, dirname as pathDirname, basename as pathBasename } from "path";
-
-export const containerLaunchScriptBasename = "start_keycloak_testing_container.sh";
-
-/** Files for being able to run a hot reload keycloak container */
-export function generateDebugFiles(
-    params: {
-        packageJsonName: string;
-        keycloakThemeBuildingDirPath: string;
-    }
-) {
-
-    const { packageJsonName, keycloakThemeBuildingDirPath } = params;
-
-    fs.writeFileSync(
-        pathJoin(keycloakThemeBuildingDirPath, "Dockerfile"),
-        Buffer.from(
-            [
-                "FROM jboss/keycloak:11.0.3",
-                "",
-                "USER root",
-                "",
-                "WORKDIR /",
-                "",
-                "ADD configuration /opt/jboss/keycloak/standalone/configuration/",
-                "",
-                'ENTRYPOINT [ "/opt/jboss/tools/docker-entrypoint.sh" ]',
-            ].join("\n"),
-            "utf8"
-        )
-    );
-
-    const dockerImage = `${packageJsonName}/keycloak-hot-reload`;
-    const containerName = "keycloak-testing-container";
-
-    fs.writeFileSync(
-        pathJoin(keycloakThemeBuildingDirPath, containerLaunchScriptBasename),
-        Buffer.from(
-            [
-                "#!/bin/bash",
-                "",
-                `cd ${keycloakThemeBuildingDirPath}`,
-                "",
-                `docker rm ${containerName} || true`,
-                "",
-                `docker build . -t ${dockerImage}`,
-                "",
-                "docker run \\",
-                "	-p 8080:8080 \\",
-                `	--name ${containerName} \\`,
-                "	-e KEYCLOAK_USER=admin \\",
-                "	-e KEYCLOAK_PASSWORD=admin \\",
-                `	-v ${pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", packageJsonName)
-                }:/opt/jboss/keycloak/themes/${packageJsonName}:rw \\`,
-                `	-it ${dockerImage}:latest`,
-                ""
-            ].join("\n"),
-            "utf8"
-        ),
-        { "mode": 0o755 }
-    );
-
-    const standaloneHaFilePath = pathJoin(keycloakThemeBuildingDirPath, "configuration", "standalone-ha.xml");
-
-    try { fs.mkdirSync(pathDirname(standaloneHaFilePath)); } catch { }
-
-    fs.writeFileSync(
-        standaloneHaFilePath,
-        fs.readFileSync(pathJoin(__dirname, pathBasename(standaloneHaFilePath)))
-    );
-
-}

src/bin/build-keycloak-theme/generateDebugFiles/standalone-ha.xml

@@ -1,666 +0,0 @@
-<?xml version='1.0' encoding='UTF-8'?>
-
-<server xmlns="urn:jboss:domain:13.0">
-    <extensions>
-        <extension module="org.jboss.as.clustering.infinispan"/>
-        <extension module="org.jboss.as.clustering.jgroups"/>
-        <extension module="org.jboss.as.connector"/>
-        <extension module="org.jboss.as.deployment-scanner"/>
-        <extension module="org.jboss.as.ee"/>
-        <extension module="org.jboss.as.ejb3"/>
-        <extension module="org.jboss.as.jaxrs"/>
-        <extension module="org.jboss.as.jmx"/>
-        <extension module="org.jboss.as.jpa"/>
-        <extension module="org.jboss.as.logging"/>
-        <extension module="org.jboss.as.mail"/>
-        <extension module="org.jboss.as.modcluster"/>
-        <extension module="org.jboss.as.naming"/>
-        <extension module="org.jboss.as.remoting"/>
-        <extension module="org.jboss.as.security"/>
-        <extension module="org.jboss.as.transactions"/>
-        <extension module="org.jboss.as.weld"/>
-        <extension module="org.keycloak.keycloak-server-subsystem"/>
-        <extension module="org.wildfly.extension.bean-validation"/>
-        <extension module="org.wildfly.extension.core-management"/>
-        <extension module="org.wildfly.extension.elytron"/>
-        <extension module="org.wildfly.extension.io"/>
-        <extension module="org.wildfly.extension.microprofile.config-smallrye"/>
-        <extension module="org.wildfly.extension.microprofile.health-smallrye"/>
-        <extension module="org.wildfly.extension.microprofile.metrics-smallrye"/>
-        <extension module="org.wildfly.extension.request-controller"/>
-        <extension module="org.wildfly.extension.security.manager"/>
-        <extension module="org.wildfly.extension.undertow"/>
-    </extensions>
-    <management>
-        <security-realms>
-            <security-realm name="ManagementRealm">
-                <authentication>
-                    <local default-user="$local" skip-group-loading="true"/>
-                    <properties path="mgmt-users.properties" relative-to="jboss.server.config.dir"/>
-                </authentication>
-                <authorization map-groups-to-roles="false">
-                    <properties path="mgmt-groups.properties" relative-to="jboss.server.config.dir"/>
-                </authorization>
-            </security-realm>
-            <security-realm name="ApplicationRealm">
-                <server-identities>
-                    <ssl>
-                        <keystore path="application.keystore" relative-to="jboss.server.config.dir" keystore-password="password" alias="server" key-password="password" generate-self-signed-certificate-host="localhost"/>
-                    </ssl>
-                </server-identities>
-                <authentication>
-                    <local default-user="$local" allowed-users="*" skip-group-loading="true"/>
-                    <properties path="application-users.properties" relative-to="jboss.server.config.dir"/>
-                </authentication>
-                <authorization>
-                    <properties path="application-roles.properties" relative-to="jboss.server.config.dir"/>
-                </authorization>
-            </security-realm>
-        </security-realms>
-        <audit-log>
-            <formatters>
-                <json-formatter name="json-formatter"/>
-            </formatters>
-            <handlers>
-                <file-handler name="file" formatter="json-formatter" path="audit-log.log" relative-to="jboss.server.data.dir"/>
-            </handlers>
-            <logger log-boot="true" log-read-only="false" enabled="false">
-                <handlers>
-                    <handler name="file"/>
-                </handlers>
-            </logger>
-        </audit-log>
-        <management-interfaces>
-            <http-interface security-realm="ManagementRealm">
-                <http-upgrade enabled="true"/>
-                <socket-binding http="management-http"/>
-            </http-interface>
-        </management-interfaces>
-        <access-control provider="simple">
-            <role-mapping>
-                <role name="SuperUser">
-                    <include>
-                        <user name="$local"/>
-                    </include>
-                </role>
-            </role-mapping>
-        </access-control>
-    </management>
-    <profile>
-        <subsystem xmlns="urn:jboss:domain:logging:8.0">
-            <console-handler name="CONSOLE">
-                <formatter>
-                    <named-formatter name="COLOR-PATTERN"/>
-                </formatter>
-            </console-handler>
-            <logger category="com.arjuna">
-                <level name="WARN"/>
-            </logger>
-            <logger category="io.jaegertracing.Configuration">
-                <level name="WARN"/>
-            </logger>
-            <logger category="org.jboss.as.config">
-                <level name="DEBUG"/>
-            </logger>
-            <logger category="sun.rmi">
-                <level name="WARN"/>
-            </logger>
-            <logger category="org.keycloak">
-                <level name="${env.KEYCLOAK_LOGLEVEL:INFO}"/>
-            </logger>
-            <root-logger>
-                <level name="${env.ROOT_LOGLEVEL:INFO}"/>
-                <handlers>
-                    <handler name="CONSOLE"/>
-                </handlers>
-            </root-logger>
-            <formatter name="PATTERN">
-                <pattern-formatter pattern="%d{yyyy-MM-dd HH:mm:ss,SSS} %-5p [%c] (%t) %s%e%n"/>
-            </formatter>
-            <formatter name="COLOR-PATTERN">
-                <pattern-formatter pattern="%K{level}%d{HH:mm:ss,SSS} %-5p [%c] (%t) %s%e%n"/>
-            </formatter>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:bean-validation:1.0"/>
-        <subsystem xmlns="urn:jboss:domain:core-management:1.0"/>
-        <subsystem xmlns="urn:jboss:domain:datasources:6.0">
-            <datasources>
-                <datasource jndi-name="java:jboss/datasources/ExampleDS" pool-name="ExampleDS" enabled="true" use-java-context="true" statistics-enabled="${wildfly.datasources.statistics-enabled:${wildfly.statistics-enabled:false}}">
-                    <connection-url>jdbc:h2:mem:test;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSE</connection-url>
-                    <driver>h2</driver>
-                    <security>
-                        <user-name>sa</user-name>
-                        <password>sa</password>
-                    </security>
-                </datasource>
-                <datasource jndi-name="java:jboss/datasources/KeycloakDS" pool-name="KeycloakDS" enabled="true" use-java-context="true" statistics-enabled="${wildfly.datasources.statistics-enabled:${wildfly.statistics-enabled:false}}">
-                    <connection-url>jdbc:h2:${jboss.server.data.dir}/keycloak;AUTO_SERVER=TRUE</connection-url>
-                    <driver>h2</driver>
-                    <pool>
-                        <max-pool-size>100</max-pool-size>
-                    </pool>
-                    <security>
-                        <user-name>sa</user-name>
-                        <password>sa</password>
-                    </security>
-                </datasource>
-                <drivers>
-                    <driver name="h2" module="com.h2database.h2">
-                        <xa-datasource-class>org.h2.jdbcx.JdbcDataSource</xa-datasource-class>
-                    </driver>
-                </drivers>
-            </datasources>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:deployment-scanner:2.0">
-            <deployment-scanner path="deployments" relative-to="jboss.server.base.dir" scan-interval="5000" runtime-failure-causes-rollback="${jboss.deployment.scanner.rollback.on.failure:false}"/>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:ee:5.0">
-            <spec-descriptor-property-replacement>false</spec-descriptor-property-replacement>
-            <concurrent>
-                <context-services>
-                    <context-service name="default" jndi-name="java:jboss/ee/concurrency/context/default" use-transaction-setup-provider="true"/>
-                </context-services>
-                <managed-thread-factories>
-                    <managed-thread-factory name="default" jndi-name="java:jboss/ee/concurrency/factory/default" context-service="default"/>
-                </managed-thread-factories>
-                <managed-executor-services>
-                    <managed-executor-service name="default" jndi-name="java:jboss/ee/concurrency/executor/default" context-service="default" hung-task-threshold="60000" keepalive-time="5000"/>
-                </managed-executor-services>
-                <managed-scheduled-executor-services>
-                    <managed-scheduled-executor-service name="default" jndi-name="java:jboss/ee/concurrency/scheduler/default" context-service="default" hung-task-threshold="60000" keepalive-time="3000"/>
-                </managed-scheduled-executor-services>
-            </concurrent>
-            <default-bindings context-service="java:jboss/ee/concurrency/context/default" datasource="java:jboss/datasources/ExampleDS" managed-executor-service="java:jboss/ee/concurrency/executor/default" managed-scheduled-executor-service="java:jboss/ee/concurrency/scheduler/default" managed-thread-factory="java:jboss/ee/concurrency/factory/default"/>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:ejb3:7.0">
-            <session-bean>
-                <stateless>
-                    <bean-instance-pool-ref pool-name="slsb-strict-max-pool"/>
-                </stateless>
-                <stateful default-access-timeout="5000" cache-ref="distributable" passivation-disabled-cache-ref="simple"/>
-                <singleton default-access-timeout="5000"/>
-            </session-bean>
-            <pools>
-                <bean-instance-pools>
-                    <strict-max-pool name="mdb-strict-max-pool" derive-size="from-cpu-count" instance-acquisition-timeout="5" instance-acquisition-timeout-unit="MINUTES"/>
-                    <strict-max-pool name="slsb-strict-max-pool" derive-size="from-worker-pools" instance-acquisition-timeout="5" instance-acquisition-timeout-unit="MINUTES"/>
-                </bean-instance-pools>
-            </pools>
-            <caches>
-                <cache name="simple"/>
-                <cache name="distributable" passivation-store-ref="infinispan" aliases="passivating clustered"/>
-            </caches>
-            <passivation-stores>
-                <passivation-store name="infinispan" cache-container="ejb" max-size="10000"/>
-            </passivation-stores>
-            <async thread-pool-name="default"/>
-            <timer-service thread-pool-name="default" default-data-store="default-file-store">
-                <data-stores>
-                    <file-data-store name="default-file-store" path="timer-service-data" relative-to="jboss.server.data.dir"/>
-                </data-stores>
-            </timer-service>
-            <remote connector-ref="http-remoting-connector" thread-pool-name="default">
-                <channel-creation-options>
-                    <option name="MAX_OUTBOUND_MESSAGES" value="1234" type="remoting"/>
-                </channel-creation-options>
-            </remote>
-            <thread-pools>
-                <thread-pool name="default">
-                    <max-threads count="10"/>
-                    <keepalive-time time="60" unit="seconds"/>
-                </thread-pool>
-            </thread-pools>
-            <default-security-domain value="other"/>
-            <default-missing-method-permissions-deny-access value="true"/>
-            <statistics enabled="${wildfly.ejb3.statistics-enabled:${wildfly.statistics-enabled:false}}"/>
-            <log-system-exceptions value="true"/>
-        </subsystem>
-        <subsystem xmlns="urn:wildfly:elytron:10.0" final-providers="combined-providers" disallowed-providers="OracleUcrypto">
-            <providers>
-                <aggregate-providers name="combined-providers">
-                    <providers name="elytron"/>
-                    <providers name="openssl"/>
-                </aggregate-providers>
-                <provider-loader name="elytron" module="org.wildfly.security.elytron"/>
-                <provider-loader name="openssl" module="org.wildfly.openssl"/>
-            </providers>
-            <audit-logging>
-                <file-audit-log name="local-audit" path="audit.log" relative-to="jboss.server.log.dir" format="JSON"/>
-            </audit-logging>
-            <security-domains>
-                <security-domain name="ApplicationDomain" default-realm="ApplicationRealm" permission-mapper="default-permission-mapper">
-                    <realm name="ApplicationRealm" role-decoder="groups-to-roles"/>
-                    <realm name="local"/>
-                </security-domain>
-                <security-domain name="ManagementDomain" default-realm="ManagementRealm" permission-mapper="default-permission-mapper">
-                    <realm name="ManagementRealm" role-decoder="groups-to-roles"/>
-                    <realm name="local" role-mapper="super-user-mapper"/>
-                </security-domain>
-            </security-domains>
-            <security-realms>
-                <identity-realm name="local" identity="$local"/>
-                <properties-realm name="ApplicationRealm">
-                    <users-properties path="application-users.properties" relative-to="jboss.server.config.dir" digest-realm-name="ApplicationRealm"/>
-                    <groups-properties path="application-roles.properties" relative-to="jboss.server.config.dir"/>
-                </properties-realm>
-                <properties-realm name="ManagementRealm">
-                    <users-properties path="mgmt-users.properties" relative-to="jboss.server.config.dir" digest-realm-name="ManagementRealm"/>
-                    <groups-properties path="mgmt-groups.properties" relative-to="jboss.server.config.dir"/>
-                </properties-realm>
-            </security-realms>
-            <mappers>
-                <simple-permission-mapper name="default-permission-mapper" mapping-mode="first">
-                    <permission-mapping>
-                        <principal name="anonymous"/>
-                        <permission-set name="default-permissions"/>
-                    </permission-mapping>
-                    <permission-mapping match-all="true">
-                        <permission-set name="login-permission"/>
-                        <permission-set name="default-permissions"/>
-                    </permission-mapping>
-                </simple-permission-mapper>
-                <constant-realm-mapper name="local" realm-name="local"/>
-                <simple-role-decoder name="groups-to-roles" attribute="groups"/>
-                <constant-role-mapper name="super-user-mapper">
-                    <role name="SuperUser"/>
-                </constant-role-mapper>
-            </mappers>
-            <permission-sets>
-                <permission-set name="login-permission">
-                    <permission class-name="org.wildfly.security.auth.permission.LoginPermission"/>
-                </permission-set>
-                <permission-set name="default-permissions">
-                    <permission class-name="org.wildfly.extension.batch.jberet.deployment.BatchPermission" module="org.wildfly.extension.batch.jberet" target-name="*"/>
-                    <permission class-name="org.wildfly.transaction.client.RemoteTransactionPermission" module="org.wildfly.transaction.client"/>
-                    <permission class-name="org.jboss.ejb.client.RemoteEJBPermission" module="org.jboss.ejb-client"/>
-                </permission-set>
-            </permission-sets>
-            <http>
-                <http-authentication-factory name="management-http-authentication" security-domain="ManagementDomain" http-server-mechanism-factory="global">
-                    <mechanism-configuration>
-                        <mechanism mechanism-name="DIGEST">
-                            <mechanism-realm realm-name="ManagementRealm"/>
-                        </mechanism>
-                    </mechanism-configuration>
-                </http-authentication-factory>
-                <provider-http-server-mechanism-factory name="global"/>
-            </http>
-            <sasl>
-                <sasl-authentication-factory name="application-sasl-authentication" sasl-server-factory="configured" security-domain="ApplicationDomain">
-                    <mechanism-configuration>
-                        <mechanism mechanism-name="JBOSS-LOCAL-USER" realm-mapper="local"/>
-                        <mechanism mechanism-name="DIGEST-MD5">
-                            <mechanism-realm realm-name="ApplicationRealm"/>
-                        </mechanism>
-                    </mechanism-configuration>
-                </sasl-authentication-factory>
-                <sasl-authentication-factory name="management-sasl-authentication" sasl-server-factory="configured" security-domain="ManagementDomain">
-                    <mechanism-configuration>
-                        <mechanism mechanism-name="JBOSS-LOCAL-USER" realm-mapper="local"/>
-                        <mechanism mechanism-name="DIGEST-MD5">
-                            <mechanism-realm realm-name="ManagementRealm"/>
-                        </mechanism>
-                    </mechanism-configuration>
-                </sasl-authentication-factory>
-                <configurable-sasl-server-factory name="configured" sasl-server-factory="elytron">
-                    <properties>
-                        <property name="wildfly.sasl.local-user.default-user" value="$local"/>
-                    </properties>
-                </configurable-sasl-server-factory>
-                <mechanism-provider-filtering-sasl-server-factory name="elytron" sasl-server-factory="global">
-                    <filters>
-                        <filter provider-name="WildFlyElytron"/>
-                    </filters>
-                </mechanism-provider-filtering-sasl-server-factory>
-                <provider-sasl-server-factory name="global"/>
-            </sasl>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:infinispan:10.0">
-            <cache-container name="keycloak" module="org.keycloak.keycloak-model-infinispan">
-                <transport lock-timeout="60000"/>
-                <local-cache name="realms">
-                    <object-memory size="10000"/>
-                </local-cache>
-                <local-cache name="users">
-                    <object-memory size="10000"/>
-                </local-cache>
-                <local-cache name="authorization">
-                    <object-memory size="10000"/>
-                </local-cache>
-                <local-cache name="keys">
-                    <object-memory size="1000"/>
-                    <expiration max-idle="3600000"/>
-                </local-cache>
-                <replicated-cache name="work"/>
-                <distributed-cache name="sessions" owners="1"/>
-                <distributed-cache name="authenticationSessions" owners="1"/>
-                <distributed-cache name="offlineSessions" owners="1"/>
-                <distributed-cache name="clientSessions" owners="1"/>
-                <distributed-cache name="offlineClientSessions" owners="1"/>
-                <distributed-cache name="loginFailures" owners="1"/>
-                <distributed-cache name="actionTokens" owners="2">
-                    <object-memory size="-1"/>
-                    <expiration interval="300000" max-idle="-1"/>
-                </distributed-cache>
-            </cache-container>
-            <cache-container name="server" aliases="singleton cluster" default-cache="default" module="org.wildfly.clustering.server">
-                <transport lock-timeout="60000"/>
-                <replicated-cache name="default">
-                    <transaction mode="BATCH"/>
-                </replicated-cache>
-            </cache-container>
-            <cache-container name="web" default-cache="dist" module="org.wildfly.clustering.web.infinispan">
-                <transport lock-timeout="60000"/>
-                <replicated-cache name="sso">
-                    <locking isolation="REPEATABLE_READ"/>
-                    <transaction mode="BATCH"/>
-                </replicated-cache>
-                <distributed-cache name="dist">
-                    <locking isolation="REPEATABLE_READ"/>
-                    <transaction mode="BATCH"/>
-                    <file-store/>
-                </distributed-cache>
-                <distributed-cache name="routing"/>
-            </cache-container>
-            <cache-container name="ejb" aliases="sfsb" default-cache="dist" module="org.wildfly.clustering.ejb.infinispan">
-                <transport lock-timeout="60000"/>
-                <distributed-cache name="dist">
-                    <locking isolation="REPEATABLE_READ"/>
-                    <transaction mode="BATCH"/>
-                    <file-store/>
-                </distributed-cache>
-            </cache-container>
-            <cache-container name="hibernate" module="org.infinispan.hibernate-cache">
-                <transport lock-timeout="60000"/>
-                <local-cache name="local-query">
-                    <object-memory size="10000"/>
-                    <expiration max-idle="100000"/>
-                </local-cache>
-                <invalidation-cache name="entity">
-                    <transaction mode="NON_XA"/>
-                    <object-memory size="10000"/>
-                    <expiration max-idle="100000"/>
-                </invalidation-cache>
-                <replicated-cache name="timestamps"/>
-            </cache-container>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:io:3.0">
-            <worker name="default"/>
-            <buffer-pool name="default"/>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:jaxrs:2.0"/>
-        <subsystem xmlns="urn:jboss:domain:jca:5.0">
-            <archive-validation enabled="true" fail-on-error="true" fail-on-warn="false"/>
-            <bean-validation enabled="true"/>
-            <default-workmanager>
-                <short-running-threads>
-                    <core-threads count="50"/>
-                    <queue-length count="50"/>
-                    <max-threads count="50"/>
-                    <keepalive-time time="10" unit="seconds"/>
-                </short-running-threads>
-                <long-running-threads>
-                    <core-threads count="50"/>
-                    <queue-length count="50"/>
-                    <max-threads count="50"/>
-                    <keepalive-time time="10" unit="seconds"/>
-                </long-running-threads>
-            </default-workmanager>
-            <cached-connection-manager/>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:jgroups:8.0">
-            <channels default="ee">
-                <channel name="ee" stack="udp" cluster="ejb"/>
-            </channels>
-            <stacks>
-                <stack name="udp">
-                    <transport type="UDP" socket-binding="jgroups-udp"/>
-                    <protocol type="PING"/>
-                    <protocol type="MERGE3"/>
-                    <socket-protocol type="FD_SOCK" socket-binding="jgroups-udp-fd"/>
-                    <protocol type="FD_ALL"/>
-                    <protocol type="VERIFY_SUSPECT"/>
-                    <protocol type="pbcast.NAKACK2"/>
-                    <protocol type="UNICAST3"/>
-                    <protocol type="pbcast.STABLE"/>
-                    <protocol type="pbcast.GMS"/>
-                    <protocol type="UFC"/>
-                    <protocol type="MFC"/>
-                    <protocol type="FRAG3"/>
-                </stack>
-                <stack name="tcp">
-                    <transport type="TCP" socket-binding="jgroups-tcp"/>
-                    <socket-protocol type="MPING" socket-binding="jgroups-mping"/>
-                    <protocol type="MERGE3"/>
-                    <socket-protocol type="FD_SOCK" socket-binding="jgroups-tcp-fd"/>
-                    <protocol type="FD_ALL"/>
-                    <protocol type="VERIFY_SUSPECT"/>
-                    <protocol type="pbcast.NAKACK2"/>
-                    <protocol type="UNICAST3"/>
-                    <protocol type="pbcast.STABLE"/>
-                    <protocol type="pbcast.GMS"/>
-                    <protocol type="MFC"/>
-                    <protocol type="FRAG3"/>
-                </stack>
-            </stacks>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:jmx:1.3">
-            <expose-resolved-model/>
-            <expose-expression-model/>
-            <remoting-connector/>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:jpa:1.1">
-            <jpa default-datasource="" default-extended-persistence-inheritance="DEEP"/>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:keycloak-server:1.1">
-            <web-context>auth</web-context>
-            <providers>
-                <provider>
-                    classpath:${jboss.home.dir}/providers/*
-                </provider>
-            </providers>
-            <master-realm-name>master</master-realm-name>
-            <scheduled-task-interval>900</scheduled-task-interval>
-            <theme>
-                <staticMaxAge>-1</staticMaxAge>
-                <cacheThemes>false</cacheThemes>
-                <cacheTemplates>false</cacheTemplates>
-                <welcomeTheme>${env.KEYCLOAK_WELCOME_THEME:keycloak}</welcomeTheme>
-                <default>${env.KEYCLOAK_DEFAULT_THEME:keycloak}</default>
-                <dir>${jboss.home.dir}/themes</dir>
-            </theme>
-            <spi name="eventsStore">
-                <provider name="jpa" enabled="true">
-                    <properties>
-                        <property name="exclude-events" value="[&quot;REFRESH_TOKEN&quot;]"/>
-                    </properties>
-                </provider>
-            </spi>
-            <spi name="userCache">
-                <provider name="default" enabled="true"/>
-            </spi>
-            <spi name="userSessionPersister">
-                <default-provider>jpa</default-provider>
-            </spi>
-            <spi name="timer">
-                <default-provider>basic</default-provider>
-            </spi>
-            <spi name="connectionsHttpClient">
-                <provider name="default" enabled="true"/>
-            </spi>
-            <spi name="connectionsJpa">
-                <provider name="default" enabled="true">
-                    <properties>
-                        <property name="dataSource" value="java:jboss/datasources/KeycloakDS"/>
-                        <property name="initializeEmpty" value="true"/>
-                        <property name="migrationStrategy" value="update"/>
-                        <property name="migrationExport" value="${jboss.home.dir}/keycloak-database-update.sql"/>
-                    </properties>
-                </provider>
-            </spi>
-            <spi name="realmCache">
-                <provider name="default" enabled="true"/>
-            </spi>
-            <spi name="connectionsInfinispan">
-                <default-provider>default</default-provider>
-                <provider name="default" enabled="true">
-                    <properties>
-                        <property name="cacheContainer" value="java:jboss/infinispan/container/keycloak"/>
-                    </properties>
-                </provider>
-            </spi>
-            <spi name="jta-lookup">
-                <default-provider>${keycloak.jta.lookup.provider:jboss}</default-provider>
-                <provider name="jboss" enabled="true"/>
-            </spi>
-            <spi name="publicKeyStorage">
-                <provider name="infinispan" enabled="true">
-                    <properties>
-                        <property name="minTimeBetweenRequests" value="10"/>
-                    </properties>
-                </provider>
-            </spi>
-            <spi name="x509cert-lookup">
-                <default-provider>${keycloak.x509cert.lookup.provider:default}</default-provider>
-                <provider name="default" enabled="true"/>
-            </spi>
-            <spi name="hostname">
-                <default-provider>${keycloak.hostname.provider:default}</default-provider>
-                <provider name="default" enabled="true">
-                    <properties>
-                        <property name="frontendUrl" value="${keycloak.frontendUrl:}"/>
-                        <property name="forceBackendUrlToFrontendUrl" value="false"/>
-                    </properties>
-                </provider>
-                <provider name="fixed" enabled="true">
-                    <properties>
-                        <property name="hostname" value="${keycloak.hostname.fixed.hostname:localhost}"/>
-                        <property name="httpPort" value="${keycloak.hostname.fixed.httpPort:-1}"/>
-                        <property name="httpsPort" value="${keycloak.hostname.fixed.httpsPort:-1}"/>
-                        <property name="alwaysHttps" value="${keycloak.hostname.fixed.alwaysHttps:false}"/>
-                    </properties>
-                </provider>
-            </spi>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:mail:4.0">
-            <mail-session name="default" jndi-name="java:jboss/mail/Default">
-                <smtp-server outbound-socket-binding-ref="mail-smtp"/>
-            </mail-session>
-        </subsystem>
-        <subsystem xmlns="urn:wildfly:microprofile-config-smallrye:1.0"/>
-        <subsystem xmlns="urn:wildfly:microprofile-health-smallrye:2.0" security-enabled="false" empty-liveness-checks-status="${env.MP_HEALTH_EMPTY_LIVENESS_CHECKS_STATUS:UP}" empty-readiness-checks-status="${env.MP_HEALTH_EMPTY_READINESS_CHECKS_STATUS:UP}"/>
-        <subsystem xmlns="urn:wildfly:microprofile-metrics-smallrye:2.0" security-enabled="false" exposed-subsystems="*" prefix="${wildfly.metrics.prefix:wildfly}"/>
-        <subsystem xmlns="urn:jboss:domain:modcluster:5.0">
-            <proxy name="default" advertise-socket="modcluster" listener="ajp">
-                <dynamic-load-provider>
-                    <load-metric type="cpu"/>
-                </dynamic-load-provider>
-            </proxy>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:naming:2.0">
-            <remote-naming/>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:remoting:4.0">
-            <http-connector name="http-remoting-connector" connector-ref="default" security-realm="ApplicationRealm"/>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:request-controller:1.0"/>
-        <subsystem xmlns="urn:jboss:domain:security:2.0">
-            <security-domains>
-                <security-domain name="other" cache-type="default">
-                    <authentication>
-                        <login-module code="Remoting" flag="optional">
-                            <module-option name="password-stacking" value="useFirstPass"/>
-                        </login-module>
-                        <login-module code="RealmDirect" flag="required">
-                            <module-option name="password-stacking" value="useFirstPass"/>
-                        </login-module>
-                    </authentication>
-                </security-domain>
-                <security-domain name="jboss-web-policy" cache-type="default">
-                    <authorization>
-                        <policy-module code="Delegating" flag="required"/>
-                    </authorization>
-                </security-domain>
-                <security-domain name="jaspitest" cache-type="default">
-                    <authentication-jaspi>
-                        <login-module-stack name="dummy">
-                            <login-module code="Dummy" flag="optional"/>
-                        </login-module-stack>
-                        <auth-module code="Dummy"/>
-                    </authentication-jaspi>
-                </security-domain>
-                <security-domain name="jboss-ejb-policy" cache-type="default">
-                    <authorization>
-                        <policy-module code="Delegating" flag="required"/>
-                    </authorization>
-                </security-domain>
-            </security-domains>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:security-manager:1.0">
-            <deployment-permissions>
-                <maximum-set>
-                    <permission class="java.security.AllPermission"/>
-                </maximum-set>
-            </deployment-permissions>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:transactions:5.0">
-            <core-environment node-identifier="${jboss.tx.node.id:1}">
-                <process-id>
-                    <uuid/>
-                </process-id>
-            </core-environment>
-            <recovery-environment socket-binding="txn-recovery-environment" status-socket-binding="txn-status-manager"/>
-            <coordinator-environment statistics-enabled="${wildfly.transactions.statistics-enabled:${wildfly.statistics-enabled:false}}"/>
-            <object-store path="tx-object-store" relative-to="jboss.server.data.dir"/>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:undertow:11.0" default-server="default-server" default-virtual-host="default-host" default-servlet-container="default" default-security-domain="other" statistics-enabled="${wildfly.undertow.statistics-enabled:${wildfly.statistics-enabled:false}}">
-            <buffer-cache name="default"/>
-            <server name="default-server">
-                <ajp-listener name="ajp" socket-binding="ajp"/>
-                <http-listener name="default" read-timeout="30000" socket-binding="http" redirect-socket="https" proxy-address-forwarding="${env.PROXY_ADDRESS_FORWARDING:false}" enable-http2="true"/>
-                <https-listener name="https" read-timeout="30000" socket-binding="https" proxy-address-forwarding="${env.PROXY_ADDRESS_FORWARDING:false}" security-realm="ApplicationRealm" enable-http2="true"/>
-                <host name="default-host" alias="localhost">
-                    <location name="/" handler="welcome-content"/>
-                    <http-invoker security-realm="ApplicationRealm"/>
-                </host>
-            </server>
-            <servlet-container name="default">
-                <jsp-config/>
-                <websockets/>
-            </servlet-container>
-            <handlers>
-                <file name="welcome-content" path="${jboss.home.dir}/welcome-content"/>
-            </handlers>
-        </subsystem>
-        <subsystem xmlns="urn:jboss:domain:weld:4.0"/>
-    </profile>
-    <interfaces>
-        <interface name="management">
-            <inet-address value="${jboss.bind.address.management:127.0.0.1}"/>
-        </interface>
-        <interface name="private">
-            <inet-address value="${jboss.bind.address.private:127.0.0.1}"/>
-        </interface>
-        <interface name="public">
-            <inet-address value="${jboss.bind.address:127.0.0.1}"/>
-        </interface>
-    </interfaces>
-    <socket-binding-group name="standard-sockets" default-interface="public" port-offset="${jboss.socket.binding.port-offset:0}">
-        <socket-binding name="ajp" port="${jboss.ajp.port:8009}"/>
-        <socket-binding name="http" port="${jboss.http.port:8080}"/>
-        <socket-binding name="https" port="${jboss.https.port:8443}"/>
-        <socket-binding name="jgroups-mping" interface="private" multicast-address="${jboss.default.multicast.address:230.0.0.4}" multicast-port="45700"/>
-        <socket-binding name="jgroups-tcp" interface="private" port="7600"/>
-        <socket-binding name="jgroups-tcp-fd" interface="private" port="57600"/>
-        <socket-binding name="jgroups-udp" interface="private" port="55200" multicast-address="${jboss.default.multicast.address:230.0.0.4}" multicast-port="45688"/>
-        <socket-binding name="jgroups-udp-fd" interface="private" port="54200"/>
-        <socket-binding name="management-http" interface="management" port="${jboss.management.http.port:9990}"/>
-        <socket-binding name="management-https" interface="management" port="${jboss.management.https.port:9993}"/>
-        <socket-binding name="modcluster" multicast-address="${jboss.modcluster.multicast.address:224.0.1.105}" multicast-port="23364"/>
-        <socket-binding name="txn-recovery-environment" port="4712"/>
-        <socket-binding name="txn-status-manager" port="4713"/>
-        <outbound-socket-binding name="mail-smtp">
-            <remote-destination host="localhost" port="25"/>
-        </outbound-socket-binding>
-    </socket-binding-group>
-</server>

src/bin/build-keycloak-theme/generateFtl.ts

@@ -1,108 +0,0 @@
-
-
-import cheerio from "cheerio";
-import {
-    replaceImportFromStaticInJsCode,
-    generateCssCodeToDefineGlobals
-} from "./replaceImportFromStatic";
-
-export function generateFtlFilesCodeFactory(
-    params: {
-        ftlValuesGlobalName: string;
-        cssGlobalsToDefine: Record<string, string>;
-        indexHtmlCode: string;
-    }
-) {
-
-    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode } = params;
-
-    const $ = cheerio.load(indexHtmlCode);
-
-    $("script:not([src])").each((...[, element]) => {
-
-        const { fixedJsCode } = replaceImportFromStaticInJsCode({
-            ftlValuesGlobalName,
-            "jsCode": $(element).html()!
-        });
-
-        $(element).text(fixedJsCode);
-
-    });
-
-
-    ([
-        ["link", "href"],
-        ["script", "src"],
-    ] as const).forEach(([selector, attrName]) =>
-        $(selector).each((...[, element]) => {
-
-            const href = $(element).attr(attrName);
-
-            if (!href?.startsWith("/")) {
-                return;
-            }
-
-            $(element).attr(attrName, "${url.resourcesPath}" + href);
-
-        })
-    );
-
-    $("head").prepend(
-        [
-            ...(Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
-                '',
-                '<style>',
-                generateCssCodeToDefineGlobals(
-                    { cssGlobalsToDefine }
-                ).cssCodeToPrependInHead,
-                '</style>',
-                ''
-            ]),
-
-            '<script>',
-            '    Object.assign(',
-            `        window.${ftlValuesGlobalName},`,
-            '        {',
-            '            "url": {',
-            '                "loginAction": "${url.loginAction}",',
-            '                "resourcesPath": "${url.resourcesPath}"',
-            '            }',
-            '        }',
-            '    );',
-            '</script>',
-            ''
-        ].join("\n"),
-    );
-
-
-    const partiallyFixedIndexHtmlCode = $.html();
-
-    function generateFtlFilesCode(
-        params: {
-            pageBasename: "login.ftl" | "register.ftl"
-        }
-    ): { ftlCode: string; } {
-
-        const { pageBasename } = params;
-
-        const $ = cheerio.load(partiallyFixedIndexHtmlCode);
-
-        $("head").prepend(
-            [
-                '',
-                '<script>',
-                `   window.${ftlValuesGlobalName} = { "pageBasename": "${pageBasename}" };`,
-                '</script>',
-                ''
-            ].join("\n"),
-
-        );
-
-        return { "ftlCode": $.html() };
-
-    }
-
-    return { generateFtlFilesCode };
-
-
-}

src/bin/build-keycloak-theme/generateJavaStackFiles.ts

@@ -1,100 +0,0 @@
-
-import * as url from "url";
-import * as fs from "fs";
-import { join as pathJoin, dirname as pathDirname } from "path";
-
-export type ParsedPackageJson = {
-    name: string;
-    version: string;
-    homepage?: string;
-};
-
-export function generateJavaStackFiles(
-    params: {
-        parsedPackageJson: ParsedPackageJson;
-        keycloakThemeBuildingDirPath: string;
-    }
-): { jarFilePath: string; } {
-
-    const {
-        parsedPackageJson: { name, version, homepage },
-        keycloakThemeBuildingDirPath
-    } = params;
-
-    {
-
-        const { pomFileCode } = (function generatePomFileCode(): { pomFileCode: string; } {
-
-
-            const groupId = (() => {
-
-                const fallbackGroupId = `there.was.no.homepage.field.in.the.package.json.${name}`;
-
-                return (!homepage ?
-                    fallbackGroupId :
-                    url.parse(homepage).host?.split(".").reverse().join(".") ?? fallbackGroupId
-                ) + ".keycloak";
-
-            })();
-
-            const artefactId = `${name}-keycloak-theme`;
-
-            const pomFileCode = [
-                `<?xml version="1.0"?>`,
-                `<project xmlns="http://maven.apache.org/POM/4.0.0"`,
-                `	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"`,
-                `	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">`,
-                `	<modelVersion>4.0.0</modelVersion>`,
-                `	<groupId>${groupId}</groupId>`,
-                `	<artifactId>${artefactId}</artifactId>`,
-                `	<version>${version}</version>`,
-                `	<name>${artefactId}</name>`,
-                `	<description />`,
-                `</project>`
-            ].join("\n");
-
-            return { pomFileCode };
-
-        })();
-
-        fs.writeFileSync(
-            pathJoin(keycloakThemeBuildingDirPath, "pom.xml"),
-            Buffer.from(pomFileCode, "utf8")
-        );
-
-    }
-
-    {
-
-        const themeManifestFilePath = pathJoin(
-            keycloakThemeBuildingDirPath, "src", "main",
-            "resources", "META-INF", "keycloak-themes.json"
-        );
-
-        try {
-
-            fs.mkdirSync(pathDirname(themeManifestFilePath));
-
-        } catch { }
-
-        fs.writeFileSync(
-            themeManifestFilePath,
-            Buffer.from(
-                JSON.stringify({
-                    "themes": [
-                        {
-                            "name": name,
-                            "types": ["login"]
-                        }
-                    ]
-                }, null, 2),
-                "utf8"
-            )
-        );
-
-    }
-
-    return { "jarFilePath": pathJoin(keycloakThemeBuildingDirPath, "target", `${name}-${version}.jar`) };
-
-}
-

src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts

@@ -1,88 +0,0 @@
-
-import { transformCodebase } from "../../tools/transformCodebase";
-import * as fs from "fs";
-import { join as pathJoin } from "path";
-import {
-    replaceImportFromStaticInCssCode,
-    replaceImportFromStaticInJsCode
-} from "./replaceImportFromStatic";
-import { generateFtlFilesCodeFactory } from "./generateFtl";
-
-export const ftlValuesGlobalName = "keycloakPagesContext";
-
-export function generateKeycloakThemeResources(
-    params: {
-        themeName: string;
-        reactAppBuildDirPath: string;
-        keycloakThemeBuildingDirPath: string;
-    }
-) {
-
-    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath } = params;
-
-    const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
-
-    let allCssGlobalsToDefine: Record<string, string> = {};
-
-    transformCodebase({
-        "destDirPath": pathJoin(themeDirPath, "resources"),
-        "srcDirPath": reactAppBuildDirPath,
-        "transformSourceCodeString": ({ filePath, sourceCode }) => {
-
-            if (/\.css?$/i.test(filePath)) {
-
-                const { cssGlobalsToDefine, fixedCssCode } = replaceImportFromStaticInCssCode(
-                    { "cssCode": sourceCode.toString("utf8") }
-                );
-
-                allCssGlobalsToDefine = {
-                    ...allCssGlobalsToDefine,
-                    ...cssGlobalsToDefine
-                };
-
-                return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
-
-            }
-
-            if (/\.js?$/i.test(filePath)) {
-
-                const { fixedJsCode } = replaceImportFromStaticInJsCode({
-                    "jsCode": sourceCode.toString("utf8"),
-                    ftlValuesGlobalName
-                });
-
-                return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
-
-            }
-
-            return { "modifiedSourceCode": sourceCode };
-
-        }
-    });
-
-    const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
-        "cssGlobalsToDefine": allCssGlobalsToDefine,
-        ftlValuesGlobalName,
-        "indexHtmlCode": fs.readFileSync(
-            pathJoin(reactAppBuildDirPath, "index.html")
-        ).toString("utf8")
-    });
-
-    (["login.ftl", "register.ftl"] as const).forEach(pageBasename => {
-
-        const { ftlCode } = generateFtlFilesCode({ pageBasename });
-
-        fs.writeFileSync(
-            pathJoin(themeDirPath, pageBasename),
-            Buffer.from(ftlCode, "utf8")
-        )
-
-    });
-
-    fs.writeFileSync(
-        pathJoin(themeDirPath, "theme.properties"),
-        Buffer.from("parent=base\n", "utf8")
-    );
-
-}
-

src/bin/build-keycloak-theme/index.ts

@@ -1,81 +0,0 @@
-#!/usr/bin/env node
-
-import { generateKeycloakThemeResources } from "./generateKeycloakThemeResources";
-import { generateJavaStackFiles } from "./generateJavaStackFiles";
-import type { ParsedPackageJson } from "./generateJavaStackFiles";
-import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
-import * as child_process from "child_process";
-import { generateDebugFiles, containerLaunchScriptBasename } from "./generateDebugFiles";
-
-
-const reactProjectDirPath = process.cwd();
-
-const parsedPackageJson: ParsedPackageJson = require(pathJoin(reactProjectDirPath, "package.json"));
-
-export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
-
-
-console.log("🔏 Building the keycloak theme...⌚");
-
-if (require.main === module) {
-
-    generateKeycloakThemeResources({
-        keycloakThemeBuildingDirPath,
-        "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
-        "themeName": parsedPackageJson.name
-    });
-
-    const { jarFilePath } = generateJavaStackFiles({
-        parsedPackageJson,
-        keycloakThemeBuildingDirPath
-    });
-
-    child_process.execSync(
-        "mvn package",
-        { "cwd": keycloakThemeBuildingDirPath }
-    );
-
-    generateDebugFiles({
-        keycloakThemeBuildingDirPath,
-        "packageJsonName": parsedPackageJson.name
-    });
-
-    console.log([
-        '',
-        `✅ Your keycloak theme has been generated and bundled into ./${pathRelative(reactProjectDirPath, jarFilePath)} 🚀`,
-        `It is to be placed in "/opt/jboss/keycloak/standalone/deployments" in the container running a jboss/keycloak Docker image. (Tested with 11.0.3)`,
-        '',
-        'Using Helm (https://github.com/codecentric/helm-charts), edit to reflect:',
-        '',
-        'value.yaml: ',
-        '    extraInitContainers: |',
-        '        - name: realm-ext-provider',
-        '          image: curlimages/curl',
-        '          imagePullPolicy: IfNotPresent',
-        '          command:',
-        '            - sh',
-        '          args:',
-        '            - -c',
-        `            - curl -L -f -S -o /extensions/${pathBasename(jarFilePath)} https://AN.URL.FOR/${pathBasename(jarFilePath)}`,
-        '          volumeMounts:',
-        '            - name: extensions',
-        '              mountPath: /extensions',
-        '        ',
-        '        extraVolumeMounts: |',
-        '            - name: extensions',
-        '              mountPath: /opt/jboss/keycloak/standalone/deployments',
-        '',
-        '',
-        'To test your theme locally, with hot reloading, you can spin up a Keycloak container image with the theme loaded by running:',
-        '',
-        `$ ./${pathRelative(reactProjectDirPath, pathJoin(keycloakThemeBuildingDirPath, containerLaunchScriptBasename))}`,
-        '',
-        'To enable the theme within keycloak log into the admin console ( username: admin, password: admin), create a realm (called "myrealm" for example),',
-        `go to your realm settings, click on the theme tab then select ${parsedPackageJson.name}.`,
-        `More details: https://www.keycloak.org/getting-started/getting-started-docker`,
-        '',
-        'Once your container is up and configured 👉 http://localhost:8080/auth/realms/myrealm/account',
-        '',
-    ].join("\n"));
-
-}

src/bin/build-keycloak-theme/replaceImportFromStatic.ts

@@ -1,91 +0,0 @@
-
-import * as crypto from "crypto";
-
-export function replaceImportFromStaticInJsCode(
-    params: {
-        ftlValuesGlobalName: string;
-        jsCode: string;
-    }
-): { fixedJsCode: string; } {
-
-    const { jsCode, ftlValuesGlobalName } = params;
-
-    const fixedJsCode = jsCode!.replace(
-        /"static\//g,
-        `window.${ftlValuesGlobalName}.url.resourcesPath.replace(/^\\//,"") + "/" + "static/`
-    );
-
-    return { fixedJsCode };
-
-}
-
-export function replaceImportFromStaticInCssCode(
-    params: {
-        cssCode: string;
-    }
-): {
-    fixedCssCode: string;
-    cssGlobalsToDefine: Record<string, string>;
-} {
-
-    const { cssCode } = params;
-
-    const cssGlobalsToDefine: Record<string, string> = {};
-
-    new Set(cssCode.match(/(url\(\/[^)]+\))/g) ?? [])
-        .forEach(match =>
-            cssGlobalsToDefine[
-            "url" + crypto
-                .createHash("sha256")
-                .update(match)
-                .digest("hex")
-                .substring(0, 15)
-            ] = match
-        );
-
-    let fixedCssCode = cssCode;
-
-    Object.keys(cssGlobalsToDefine).forEach(
-        cssVariableName =>
-            //NOTE: split/join pattern ~ replace all
-            fixedCssCode =
-            fixedCssCode.split(cssGlobalsToDefine[cssVariableName])
-                .join(`var(--${cssVariableName})`)
-    );
-
-    return { fixedCssCode, cssGlobalsToDefine };
-
-}
-
-export function generateCssCodeToDefineGlobals(
-    params: {
-        cssGlobalsToDefine: Record<string, string>;
-    }
-): {
-    cssCodeToPrependInHead: string;
-} {
-
-    const { cssGlobalsToDefine } = params;
-
-    return {
-        "cssCodeToPrependInHead": [
-            ":root {",
-            ...Object.keys(cssGlobalsToDefine)
-                .map(cssVariableName => [
-                    `--${cssVariableName}:`,
-                    [
-                        "url(",
-                        "${url.resourcesPath}" +
-                        cssGlobalsToDefine[cssVariableName].match(/^url\(([^)]+)\)$/)![1],
-                        ")"
-                    ].join("")
-                ].join(" "))
-                .map(line => `    ${line};`),
-            "}"
-        ].join("\n")
-    };
-
-}
-
-
-

src/bin/copy-keycloak-resources-to-public.ts

@@ -0,0 +1,13 @@
+import { copyKeycloakResourcesToPublic } from "./shared/copyKeycloakResourcesToPublic";
+import { readBuildOptions } from "./shared/buildOptions";
+import type { CliCommandOptions } from "./main";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildOptions = readBuildOptions({ cliCommandOptions });
+
+    await copyKeycloakResourcesToPublic({
+        buildOptions
+    });
+}

src/bin/download-keycloak-default-theme.ts

@@ -0,0 +1,63 @@
+import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path";
+import { promptKeycloakVersion } from "./shared/promptKeycloakVersion";
+import { readBuildOptions } from "./shared/buildOptions";
+import { downloadKeycloakDefaultTheme } from "./shared/downloadKeycloakDefaultTheme";
+import { transformCodebase } from "./tools/transformCodebase";
+import type { CliCommandOptions } from "./main";
+import chalk from "chalk";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildOptions = readBuildOptions({
+        cliCommandOptions
+    });
+
+    console.log(
+        chalk.cyan(
+            "Select the Keycloak version from which you want to download the builtins theme:"
+        )
+    );
+
+    const { keycloakVersion } = await promptKeycloakVersion({
+        startingFromMajor: undefined,
+        cacheDirPath: buildOptions.cacheDirPath
+    });
+
+    console.log(`→ ${keycloakVersion}`);
+
+    const destDirPath = pathJoin(
+        buildOptions.keycloakifyBuildDirPath,
+        "src",
+        "main",
+        "resources",
+        "theme"
+    );
+
+    console.log(
+        [
+            `Downloading builtins theme of Keycloak ${keycloakVersion} here:`,
+            `- ${chalk.bold(
+                `.${pathSep}${pathJoin(pathRelative(process.cwd(), destDirPath), "base")}`
+            )}`,
+            `- ${chalk.bold(
+                `.${pathSep}${pathJoin(
+                    pathRelative(process.cwd(), destDirPath),
+                    "keycloak"
+                )}`
+            )}`
+        ].join("\n")
+    );
+
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
+        keycloakVersion,
+        buildOptions
+    });
+
+    transformCodebase({
+        srcDirPath: defaultThemeDirPath,
+        destDirPath
+    });
+
+    console.log(chalk.green(`✓ done`));
+}

src/bin/download-sample-keycloak-themes.ts

@@ -1,18 +0,0 @@
-#!/usr/bin/env node
-
-import * as fs from "fs";
-import { join as pathJoin, basename as pathBasename } from "path";
-import { keycloakThemeBuildingDirPath } from "./build-keycloak-theme";
-import child_process from "child_process";
-
-if (!fs.existsSync(keycloakThemeBuildingDirPath)) {
-    console.log("Error: The keycloak theme need to be build");
-    process.exit(1);
-}
-
-const url = "https://github.com/garronej/keycloak-react-theming/releases/download/v0.0.1/other_keycloak_thems.zip";
-
-[
-    `wget ${url}`,
-    ...["unzip", "rm"].map(prg => `${prg} ${pathBasename(url)}`),
-].forEach(cmd => child_process.execSync(cmd, { "cwd": pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme") }));

src/bin/eject-page.ts

@@ -0,0 +1,176 @@
+#!/usr/bin/env node
+
+import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
+import cliSelect from "cli-select";
+import {
+    loginThemePageIds,
+    accountThemePageIds,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    themeTypes,
+    type ThemeType
+} from "./shared/constants";
+import { capitalize } from "tsafe/capitalize";
+import * as fs from "fs";
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
+import { assert, Equals } from "tsafe/assert";
+import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
+import type { CliCommandOptions } from "./main";
+import { readBuildOptions } from "./shared/buildOptions";
+import chalk from "chalk";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildOptions = readBuildOptions({
+        cliCommandOptions
+    });
+
+    console.log(chalk.cyan("Theme type:"));
+
+    const { value: themeType } = await cliSelect<ThemeType>({
+        values: [...themeTypes]
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${themeType}`);
+
+    console.log(chalk.cyan("Select the page you want to customize:"));
+
+    const { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({
+        values: (() => {
+            switch (themeType) {
+                case "login":
+                    return [...loginThemePageIds];
+                case "account":
+                    return [...accountThemePageIds];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageId}`);
+
+    const componentPageBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(
+        /ftl$/,
+        "tsx"
+    );
+
+    const { themeSrcDirPath } = getThemeSrcDirPath({
+        reactAppRootDirPath: buildOptions.reactAppRootDirPath
+    });
+
+    const targetFilePath = pathJoin(
+        themeSrcDirPath,
+        themeType,
+        "pages",
+        componentPageBasename
+    );
+
+    if (fs.existsSync(targetFilePath)) {
+        console.log(
+            `${pageId} is already ejected, ${pathRelative(
+                process.cwd(),
+                targetFilePath
+            )} already exists`
+        );
+
+        process.exit(-1);
+    }
+
+    {
+        const targetDirPath = pathDirname(targetFilePath);
+
+        if (!fs.existsSync(targetDirPath)) {
+            fs.mkdirSync(targetDirPath, { recursive: true });
+        }
+    }
+
+    const componentPageContent = fs
+        .readFileSync(
+            pathJoin(
+                getThisCodebaseRootDirPath(),
+                "src",
+                themeType,
+                "pages",
+                componentPageBasename
+            )
+        )
+        .toString("utf8");
+
+    fs.writeFileSync(targetFilePath, Buffer.from(componentPageContent, "utf8"));
+
+    const userProfileFormFieldComponentName = "UserProfileFormFields";
+
+    console.log(
+        [
+            ``,
+            `${chalk.green("✓")} ${chalk.bold(
+                pathJoin(".", pathRelative(process.cwd(), targetFilePath))
+            )} copy pasted from the Keycloakify source code into your project`,
+            ``,
+            `You now need to update your page router:`,
+            ``,
+            `${chalk.bold(
+                pathJoin(
+                    ".",
+                    pathRelative(process.cwd(), themeSrcDirPath),
+                    themeType,
+                    "KcApp.tsx"
+                )
+            )}:`,
+            chalk.grey("```"),
+            `// ...`,
+            ``,
+            chalk.green(
+                `+const ${componentPageBasename.replace(
+                    /.tsx$/,
+                    ""
+                )} = lazy(() => import("./pages/${componentPageBasename}"));`
+            ),
+            ...[
+                ``,
+                ` export default function KcApp(props: { kcContext: KcContext; }) {`,
+                ``,
+                `     // ...`,
+                ``,
+                `     return (`,
+                `         <Suspense>`,
+                `             {(() => {`,
+                `                 switch (kcContext.pageId) {`,
+                `                     // ...`,
+                `+                    case "${pageId}": return (`,
+                `+                        <Login`,
+                `+                            {...{ kcContext, i18n, classes }}`,
+                `+                            Template={Template}`,
+                ...(!componentPageContent.includes(userProfileFormFieldComponentName)
+                    ? []
+                    : [
+                          `+                            ${userProfileFormFieldComponentName}={${userProfileFormFieldComponentName}}`
+                      ]),
+                `+                            doUseDefaultCss={true}`,
+                `+                        />`,
+                `+                    );`,
+                `                     default: return <Fallback /* .. */ />;`,
+                `                 }`,
+                `             })()}`,
+                `         </Suspense>`,
+                `     );`,
+                ` }`
+            ].map(line => {
+                if (line.startsWith("+")) {
+                    return chalk.green(line);
+                }
+                if (line.startsWith("-")) {
+                    return chalk.red(line);
+                }
+                return chalk.grey(line);
+            }),
+            chalk.grey("```")
+        ].join("\n")
+    );
+}

src/bin/initialize-email-theme.ts

@@ -0,0 +1,69 @@
+import { downloadKeycloakDefaultTheme } from "./shared/downloadKeycloakDefaultTheme";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { transformCodebase } from "./tools/transformCodebase";
+import { promptKeycloakVersion } from "./shared/promptKeycloakVersion";
+import { readBuildOptions } from "./shared/buildOptions";
+import * as fs from "fs";
+import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
+import type { CliCommandOptions } from "./main";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildOptions = readBuildOptions({ cliCommandOptions });
+
+    const { themeSrcDirPath } = getThemeSrcDirPath({
+        reactAppRootDirPath: buildOptions.reactAppRootDirPath
+    });
+
+    const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
+
+    if (fs.existsSync(emailThemeSrcDirPath)) {
+        console.warn(
+            `There is already a ${pathRelative(
+                process.cwd(),
+                emailThemeSrcDirPath
+            )} directory in your project. Aborting.`
+        );
+
+        process.exit(-1);
+    }
+
+    console.log("Initialize with the base email theme from which version of Keycloak?");
+
+    const { keycloakVersion } = await promptKeycloakVersion({
+        // NOTE: This is arbitrary
+        startingFromMajor: 17,
+        cacheDirPath: buildOptions.cacheDirPath
+    });
+
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
+        keycloakVersion,
+        buildOptions
+    });
+
+    transformCodebase({
+        srcDirPath: pathJoin(defaultThemeDirPath, "base", "email"),
+        destDirPath: emailThemeSrcDirPath
+    });
+
+    {
+        const themePropertyFilePath = pathJoin(emailThemeSrcDirPath, "theme.properties");
+
+        fs.writeFileSync(
+            themePropertyFilePath,
+            Buffer.from(
+                `parent=base\n${fs.readFileSync(themePropertyFilePath).toString("utf8")}`,
+                "utf8"
+            )
+        );
+    }
+
+    console.log(
+        `The \`${pathJoin(
+            ".",
+            pathRelative(process.cwd(), emailThemeSrcDirPath)
+        )}\` directory have been created.`
+    );
+    console.log("You can delete any file you don't modify.");
+}

src/bin/keycloakify/buildJars/buildJar.ts

@@ -0,0 +1,294 @@
+import { assert, type Equals } from "tsafe/assert";
+import type {
+    KeycloakAccountV1Version,
+    KeycloakThemeAdditionalInfoExtensionVersion
+} from "./extensionVersions";
+import { join as pathJoin, dirname as pathDirname } from "path";
+import { transformCodebase } from "../../tools/transformCodebase";
+import type { BuildOptions } from "../../shared/buildOptions";
+import * as fs from "fs/promises";
+import { accountV1ThemeName } from "../../shared/constants";
+import {
+    generatePom,
+    BuildOptionsLike as BuildOptionsLike_generatePom
+} from "./generatePom";
+import { readFileSync } from "fs";
+import { isInside } from "../../tools/isInside";
+import child_process from "child_process";
+import { rmSync } from "../../tools/fs.rmSync";
+import { getMetaInfKeycloakThemesJsonFilePath } from "../../shared/metaInfKeycloakThemes";
+
+export type BuildOptionsLike = BuildOptionsLike_generatePom & {
+    keycloakifyBuildDirPath: string;
+    themeNames: string[];
+    artifactId: string;
+    themeVersion: string;
+    cacheDirPath: string;
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export async function buildJar(params: {
+    jarFileBasename: string;
+    keycloakAccountV1Version: KeycloakAccountV1Version;
+    keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
+    buildOptions: BuildOptionsLike;
+}): Promise<void> {
+    const {
+        jarFileBasename,
+        keycloakAccountV1Version,
+        keycloakThemeAdditionalInfoExtensionVersion,
+        buildOptions
+    } = params;
+
+    const keycloakifyBuildTmpDirPath = pathJoin(
+        buildOptions.cacheDirPath,
+        jarFileBasename.replace(".jar", "")
+    );
+
+    rmSync(keycloakifyBuildTmpDirPath, { recursive: true, force: true });
+
+    {
+        const transformCodebase_common = (params: {
+            fileRelativePath: string;
+            sourceCode: Buffer;
+        }): { modifiedSourceCode: Buffer } | undefined => {
+            const { fileRelativePath, sourceCode } = params;
+
+            if (
+                fileRelativePath ===
+                getMetaInfKeycloakThemesJsonFilePath({ keycloakifyBuildDirPath: "." })
+            ) {
+                return { modifiedSourceCode: sourceCode };
+            }
+
+            for (const themeName of [...buildOptions.themeNames, accountV1ThemeName]) {
+                if (
+                    isInside({
+                        dirPath: pathJoin("src", "main", "resources", "theme", themeName),
+                        filePath: fileRelativePath
+                    })
+                ) {
+                    return { modifiedSourceCode: sourceCode };
+                }
+            }
+
+            return undefined;
+        };
+
+        const transformCodebase_patchForUsingBuiltinAccountV1 =
+            keycloakAccountV1Version !== null
+                ? undefined
+                : (params: {
+                      fileRelativePath: string;
+                      sourceCode: Buffer;
+                  }): { modifiedSourceCode: Buffer } | undefined => {
+                      const { fileRelativePath, sourceCode } = params;
+
+                      if (
+                          isInside({
+                              dirPath: pathJoin(
+                                  "src",
+                                  "main",
+                                  "resources",
+                                  "theme",
+                                  accountV1ThemeName
+                              ),
+                              filePath: fileRelativePath
+                          })
+                      ) {
+                          return undefined;
+                      }
+
+                      if (
+                          fileRelativePath ===
+                          getMetaInfKeycloakThemesJsonFilePath({
+                              keycloakifyBuildDirPath: "."
+                          })
+                      ) {
+                          const keycloakThemesJsonParsed = JSON.parse(
+                              sourceCode.toString("utf8")
+                          ) as {
+                              themes: { name: string; types: string[] }[];
+                          };
+
+                          keycloakThemesJsonParsed.themes =
+                              keycloakThemesJsonParsed.themes.filter(
+                                  ({ name }) => name !== accountV1ThemeName
+                              );
+
+                          return {
+                              modifiedSourceCode: Buffer.from(
+                                  JSON.stringify(keycloakThemesJsonParsed, null, 2),
+                                  "utf8"
+                              )
+                          };
+                      }
+
+                      for (const themeName of buildOptions.themeNames) {
+                          if (
+                              fileRelativePath ===
+                              pathJoin(
+                                  "src",
+                                  "main",
+                                  "resources",
+                                  "theme",
+                                  themeName,
+                                  "account",
+                                  "theme.properties"
+                              )
+                          ) {
+                              const modifiedSourceCode = Buffer.from(
+                                  sourceCode
+                                      .toString("utf8")
+                                      .replace(
+                                          `parent=${accountV1ThemeName}`,
+                                          "parent=keycloak"
+                                      ),
+                                  "utf8"
+                              );
+
+                              assert(
+                                  Buffer.compare(modifiedSourceCode, sourceCode) !== 0
+                              );
+
+                              return { modifiedSourceCode };
+                          }
+                      }
+
+                      return { modifiedSourceCode: sourceCode };
+                  };
+
+        transformCodebase({
+            srcDirPath: buildOptions.keycloakifyBuildDirPath,
+            destDirPath: keycloakifyBuildTmpDirPath,
+            transformSourceCode: params => {
+                const resultCommon = transformCodebase_common(params);
+
+                if (transformCodebase_patchForUsingBuiltinAccountV1 === undefined) {
+                    return resultCommon;
+                }
+
+                if (resultCommon === undefined) {
+                    return undefined;
+                }
+
+                const { modifiedSourceCode } = resultCommon;
+
+                return transformCodebase_patchForUsingBuiltinAccountV1({
+                    ...params,
+                    sourceCode: modifiedSourceCode
+                });
+            }
+        });
+    }
+
+    route_legacy_pages: {
+        // NOTE: If there's no account theme there is no special target for keycloak 24 and up so we create
+        // the pages anyway. If there is an account pages, since we know that account-v1 is only support keycloak
+        // 24 in version 0.4 and up, we can safely break the route for legacy pages.
+        const doBreak: boolean = (() => {
+            switch (keycloakAccountV1Version) {
+                case null:
+                    return false;
+                case "0.3":
+                    return false;
+                default:
+                    return true;
+            }
+        })();
+
+        if (doBreak) {
+            break route_legacy_pages;
+        }
+
+        (["register.ftl", "login-update-profile.ftl"] as const).forEach(pageId =>
+            buildOptions.themeNames.map(themeName => {
+                const ftlFilePath = pathJoin(
+                    keycloakifyBuildTmpDirPath,
+                    "src",
+                    "main",
+                    "resources",
+                    "theme",
+                    themeName,
+                    "login",
+                    pageId
+                );
+
+                const ftlFileContent = readFileSync(ftlFilePath).toString("utf8");
+
+                const realPageId = (() => {
+                    switch (pageId) {
+                        case "register.ftl":
+                            return "register-user-profile.ftl";
+                        case "login-update-profile.ftl":
+                            return "update-user-profile.ftl";
+                    }
+                    assert<Equals<typeof pageId, never>>(false);
+                })();
+
+                const modifiedFtlFileContent = ftlFileContent.replace(
+                    `out["pageId"] = "\${pageId}";`,
+                    `out["pageId"] = "${pageId}"; out["realPageId"] = "${realPageId}";`
+                );
+
+                assert(modifiedFtlFileContent !== ftlFileContent);
+
+                fs.writeFile(
+                    pathJoin(pathDirname(ftlFilePath), realPageId),
+                    Buffer.from(modifiedFtlFileContent, "utf8")
+                );
+            })
+        );
+    }
+
+    {
+        const { pomFileCode } = generatePom({
+            buildOptions,
+            keycloakAccountV1Version,
+            keycloakThemeAdditionalInfoExtensionVersion
+        });
+
+        await fs.writeFile(
+            pathJoin(keycloakifyBuildTmpDirPath, "pom.xml"),
+            Buffer.from(pomFileCode, "utf8")
+        );
+    }
+
+    await new Promise<void>((resolve, reject) =>
+        child_process.exec(
+            `mvn clean install -Dmaven.repo.local=${pathJoin(keycloakifyBuildTmpDirPath, ".m2")}`,
+            { cwd: keycloakifyBuildTmpDirPath },
+            error => {
+                if (error !== null) {
+                    console.error(
+                        `Build jar failed: ${JSON.stringify(
+                            {
+                                jarFileBasename,
+                                keycloakAccountV1Version,
+                                keycloakThemeAdditionalInfoExtensionVersion
+                            },
+                            null,
+                            2
+                        )}`
+                    );
+
+                    reject(error);
+                    return;
+                }
+                resolve();
+            }
+        )
+    );
+
+    await fs.rename(
+        pathJoin(
+            keycloakifyBuildTmpDirPath,
+            "target",
+            `${buildOptions.artifactId}-${buildOptions.themeVersion}.jar`
+        ),
+        pathJoin(buildOptions.keycloakifyBuildDirPath, jarFileBasename)
+    );
+
+    rmSync(keycloakifyBuildTmpDirPath, { recursive: true });
+}

src/bin/keycloakify/buildJars/buildJars.ts

@@ -0,0 +1,80 @@
+import { assert } from "tsafe/assert";
+import { exclude } from "tsafe/exclude";
+import {
+    keycloakAccountV1Versions,
+    keycloakThemeAdditionalInfoExtensionVersions
+} from "./extensionVersions";
+import { getKeycloakVersionRangeForJar } from "./getKeycloakVersionRangeForJar";
+import { buildJar, BuildOptionsLike as BuildOptionsLike_buildJar } from "./buildJar";
+import type { BuildOptions } from "../../shared/buildOptions";
+import { getJarFileBasename } from "../../shared/getJarFileBasename";
+import { readMetaInfKeycloakThemes } from "../../shared/metaInfKeycloakThemes";
+import { accountV1ThemeName } from "../../shared/constants";
+
+export type BuildOptionsLike = BuildOptionsLike_buildJar & {
+    keycloakifyBuildDirPath: string;
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export async function buildJars(params: {
+    buildOptions: BuildOptionsLike;
+}): Promise<void> {
+    const { buildOptions } = params;
+
+    const doesImplementAccountTheme = readMetaInfKeycloakThemes({
+        keycloakifyBuildDirPath: buildOptions.keycloakifyBuildDirPath
+    }).themes.some(({ name }) => name === accountV1ThemeName);
+
+    await Promise.all(
+        keycloakAccountV1Versions
+            .map(keycloakAccountV1Version =>
+                keycloakThemeAdditionalInfoExtensionVersions
+                    .map(keycloakThemeAdditionalInfoExtensionVersion => {
+                        const keycloakVersionRange = getKeycloakVersionRangeForJar({
+                            doesImplementAccountTheme,
+                            keycloakAccountV1Version,
+                            keycloakThemeAdditionalInfoExtensionVersion
+                        });
+
+                        if (keycloakVersionRange === undefined) {
+                            return undefined;
+                        }
+
+                        return {
+                            keycloakThemeAdditionalInfoExtensionVersion,
+                            keycloakVersionRange
+                        };
+                    })
+                    .filter(exclude(undefined))
+                    .map(
+                        ({
+                            keycloakThemeAdditionalInfoExtensionVersion,
+                            keycloakVersionRange
+                        }) => {
+                            const { jarFileBasename } = getJarFileBasename({
+                                keycloakVersionRange
+                            });
+
+                            return {
+                                keycloakThemeAdditionalInfoExtensionVersion,
+                                jarFileBasename
+                            };
+                        }
+                    )
+                    .map(
+                        ({
+                            keycloakThemeAdditionalInfoExtensionVersion,
+                            jarFileBasename
+                        }) =>
+                            buildJar({
+                                jarFileBasename,
+                                keycloakAccountV1Version,
+                                keycloakThemeAdditionalInfoExtensionVersion,
+                                buildOptions
+                            })
+                    )
+            )
+            .flat()
+    );
+}

src/bin/keycloakify/buildJars/extensionVersions.ts

@@ -0,0 +1,17 @@
+// NOTE: v0.5 is a dummy version.
+export const keycloakAccountV1Versions = [null, "0.3", "0.4"] as const;
+
+/**
+ * https://central.sonatype.com/artifact/io.phasetwo.keycloak/keycloak-account-v1
+ * https://github.com/p2-inc/keycloak-account-v1
+ */
+export type KeycloakAccountV1Version = (typeof keycloakAccountV1Versions)[number];
+
+export const keycloakThemeAdditionalInfoExtensionVersions = [null, "1.1.5"] as const;
+
+/**
+ * https://central.sonatype.com/artifact/dev.jcputney/keycloak-theme-additional-info-extension
+ * https://github.com/jcputney/keycloak-theme-additional-info-extension
+ * */
+export type KeycloakThemeAdditionalInfoExtensionVersion =
+    (typeof keycloakThemeAdditionalInfoExtensionVersions)[number];

src/bin/keycloakify/buildJars/generatePom.ts

@@ -0,0 +1,94 @@
+import { assert } from "tsafe/assert";
+import type { BuildOptions } from "../../shared/buildOptions";
+import type {
+    KeycloakAccountV1Version,
+    KeycloakThemeAdditionalInfoExtensionVersion
+} from "./extensionVersions";
+
+export type BuildOptionsLike = {
+    groupId: string;
+    artifactId: string;
+    themeVersion: string;
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export function generatePom(params: {
+    keycloakAccountV1Version: KeycloakAccountV1Version;
+    keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
+    buildOptions: BuildOptionsLike;
+}) {
+    const {
+        keycloakAccountV1Version,
+        keycloakThemeAdditionalInfoExtensionVersion,
+        buildOptions
+    } = params;
+
+    const { pomFileCode } = (function generatePomFileCode(): {
+        pomFileCode: string;
+    } {
+        const pomFileCode = [
+            `<?xml version="1.0"?>`,
+            `<project xmlns="http://maven.apache.org/POM/4.0.0"`,
+            `	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"`,
+            `	 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">`,
+            `  <modelVersion>4.0.0</modelVersion>`,
+            `	<groupId>${buildOptions.groupId}</groupId>`,
+            `	<artifactId>${buildOptions.artifactId}</artifactId>`,
+            `	<version>${buildOptions.themeVersion}</version>`,
+            `	<name>${buildOptions.artifactId}</name>`,
+            `  <description />`,
+            `  <packaging>jar</packaging>`,
+            `  <properties>`,
+            `    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>`,
+            `  </properties>`,
+            ...(keycloakAccountV1Version !== null &&
+            keycloakThemeAdditionalInfoExtensionVersion !== null
+                ? [
+                      `  <build>`,
+                      `    <plugins>`,
+                      `      <plugin>`,
+                      `        <groupId>org.apache.maven.plugins</groupId>`,
+                      `        <artifactId>maven-shade-plugin</artifactId>`,
+                      `	     <version>3.5.1</version>`,
+                      `        <executions>`,
+                      `          <execution>`,
+                      `            <phase>package</phase>`,
+                      `            <goals>`,
+                      `              <goal>shade</goal>`,
+                      `            </goals>`,
+                      `          </execution>`,
+                      `        </executions>`,
+                      `      </plugin>`,
+                      `    </plugins>`,
+                      `  </build>`,
+                      `  <dependencies>`,
+                      ...(keycloakAccountV1Version !== null
+                          ? [
+                                `    <dependency>`,
+                                `      <groupId>io.phasetwo.keycloak</groupId>`,
+                                `      <artifactId>keycloak-account-v1</artifactId>`,
+                                `      <version>${keycloakAccountV1Version}</version>`,
+                                `    </dependency>`
+                            ]
+                          : []),
+                      ...(keycloakThemeAdditionalInfoExtensionVersion !== null
+                          ? [
+                                `    <dependency>`,
+                                `      <groupId>dev.jcputney</groupId>`,
+                                `      <artifactId>keycloak-theme-additional-info-extension</artifactId>`,
+                                `      <version>${keycloakThemeAdditionalInfoExtensionVersion}</version>`,
+                                `    </dependency>`
+                            ]
+                          : []),
+                      `  </dependencies>`
+                  ]
+                : []),
+            `</project>`
+        ].join("\n");
+
+        return { pomFileCode };
+    })();
+
+    return { pomFileCode };
+}

src/bin/keycloakify/buildJars/getKeycloakVersionRangeForJar.ts

@@ -0,0 +1,89 @@
+import { assert, type Equals } from "tsafe/assert";
+import type {
+    KeycloakAccountV1Version,
+    KeycloakThemeAdditionalInfoExtensionVersion
+} from "./extensionVersions";
+import type { KeycloakVersionRange } from "../../shared/KeycloakVersionRange";
+
+export function getKeycloakVersionRangeForJar(params: {
+    doesImplementAccountTheme: boolean;
+    keycloakAccountV1Version: KeycloakAccountV1Version;
+    keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
+}): KeycloakVersionRange | undefined {
+    const {
+        keycloakAccountV1Version,
+        keycloakThemeAdditionalInfoExtensionVersion,
+        doesImplementAccountTheme
+    } = params;
+
+    if (doesImplementAccountTheme) {
+        const keycloakVersionRange = (() => {
+            switch (keycloakAccountV1Version) {
+                case null:
+                    switch (keycloakThemeAdditionalInfoExtensionVersion) {
+                        case null:
+                            return "21-and-below" as const;
+                        case "1.1.5":
+                            return undefined;
+                    }
+                    assert<
+                        Equals<typeof keycloakThemeAdditionalInfoExtensionVersion, never>
+                    >(false);
+                case "0.3":
+                    switch (keycloakThemeAdditionalInfoExtensionVersion) {
+                        case null:
+                            return undefined;
+                        case "1.1.5":
+                            return "23" as const;
+                    }
+                    assert<
+                        Equals<typeof keycloakThemeAdditionalInfoExtensionVersion, never>
+                    >(false);
+                case "0.4":
+                    switch (keycloakThemeAdditionalInfoExtensionVersion) {
+                        case null:
+                            return undefined;
+                        case "1.1.5":
+                            return "24-and-above" as const;
+                    }
+                    assert<
+                        Equals<typeof keycloakThemeAdditionalInfoExtensionVersion, never>
+                    >(false);
+            }
+        })();
+
+        assert<
+            Equals<
+                typeof keycloakVersionRange,
+                KeycloakVersionRange.WithAccountTheme | undefined
+            >
+        >();
+
+        return keycloakVersionRange;
+    } else {
+        const keycloakVersionRange = (() => {
+            if (keycloakAccountV1Version !== null) {
+                return undefined;
+            }
+
+            switch (keycloakThemeAdditionalInfoExtensionVersion) {
+                case null:
+                    return "21-and-below";
+                case "1.1.5":
+                    return "22-and-above";
+            }
+            assert<Equals<typeof keycloakThemeAdditionalInfoExtensionVersion, never>>(
+                false
+            );
+        })();
+
+        assert<
+            Equals<
+                typeof keycloakVersionRange,
+                KeycloakVersionRange.WithoutAccountTheme | undefined
+            >
+        >();
+
+        return keycloakVersionRange;
+    }
+}

src/bin/keycloakify/buildJars/index.ts

@@ -0,0 +1 @@
+export * from "./buildJars";

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -0,0 +1,542 @@
+<script>const _= 
+(()=>{
+<#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
+const out = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
+out["messagesPerField"]= {
+    <#assign fieldNames = [ FIELD_NAMES_eKsIY4ZsZ4xeM ]>
+    <#attempt>
+        <#if profile?? && profile.attributes?? && profile.attributes?is_enumerable>
+            <#list profile.attributes as attribute>
+                <#if fieldNames?seq_contains(attribute.name)>
+                    <#continue>
+                </#if>
+                <#assign fieldNames += [attribute.name]>
+            </#list>
+        </#if>
+    <#recover>
+    </#attempt>
+    "printIfExists": function (fieldName, text) {
+        <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+            throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
+        <#else>
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+                    <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                    <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                        <#assign doExistErrorOnUsernameOrPassword = "">
+                        <#attempt>
+                            <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                        <#recover>
+                            <#assign doExistErrorOnUsernameOrPassword = true>
+                        </#attempt>
+                        return <#if doExistErrorOnUsernameOrPassword>text<#else>undefined</#if>
+                    <#else>
+                        <#assign doExistMessageForField = "">
+                        <#attempt>
+                            <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
+                        <#recover>
+                            <#assign doExistMessageForField = true>
+                        </#attempt>
+                        return <#if doExistMessageForField>text<#else>undefined</#if>;
+                    </#if>
+                }
+            </#list>
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+        </#if>
+    },
+    "existsError": function (){
+        function existsError_singleFieldName(fieldName) {
+            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+                throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
+            <#else>
+                <#list fieldNames as fieldName>
+                    if(fieldName === "${fieldName}" ){
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                            <#assign doExistErrorOnUsernameOrPassword = "">
+                            <#attempt>
+                                <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                            <#recover>
+                                <#assign doExistErrorOnUsernameOrPassword = true>
+                            </#attempt>
+                            return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
+                        <#else>
+                            <#assign doExistErrorMessageForField = "">
+                            <#attempt>
+                                <#assign doExistErrorMessageForField = messagesPerField.existsError('${fieldName}')>
+                            <#recover>
+                                <#assign doExistErrorMessageForField = true>
+                            </#attempt>
+                            return <#if doExistErrorMessageForField>true<#else>false</#if>;
+                        </#if>
+                    }
+                </#list>
+                throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+            </#if>
+        }
+        for( let i = 0; i < arguments.length; i++ ){
+            if( existsError_singleFieldName(arguments[i]) ){
+                return true;
+            }
+        }
+        return false;
+    },
+    "get": function (fieldName) {
+        <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+            throw new Error("You're not supposed to use messagesPerField.get in this page");
+        <#else>
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+                    <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                    <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                        <#assign doExistErrorOnUsernameOrPassword = "">
+                        <#attempt>
+                            <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                        <#recover>
+                            <#assign doExistErrorOnUsernameOrPassword = true>
+                        </#attempt>
+                        <#if doExistErrorOnUsernameOrPassword>
+                            <#attempt>
+                                return decodeHtmlEntities("${msg('invalidUserMessage')?js_string}");
+                            <#recover>
+                                return "Invalid username or password.";
+                            </#attempt>
+                        <#else>
+                            return "";
+                        </#if>
+                    <#else>
+                        <#attempt>
+                            return decodeHtmlEntities("${messagesPerField.get('${fieldName}')?js_string}");
+                        <#recover>
+                            return "Invalid field";
+                        </#attempt>
+                    </#if>
+                }
+            </#list>
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+        </#if>
+    },
+    "exists": function (fieldName) {
+        <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+            throw new Error("You're not supposed to use messagesPerField.exists in this page");
+        <#else>
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+                    <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                    <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                        <#assign doExistErrorOnUsernameOrPassword = "">
+                        <#attempt>
+                            <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                        <#recover>
+                            <#assign doExistErrorOnUsernameOrPassword = true>
+                        </#attempt>
+                        return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
+                    <#else>
+                        <#assign doExistErrorMessageForField = "">
+                        <#attempt>
+                            <#assign doExistErrorMessageForField = messagesPerField.exists('${fieldName}')>
+                        <#recover>
+                            <#assign doExistErrorMessageForField = true>
+                        </#attempt>
+                        return <#if doExistErrorMessageForField>true<#else>false</#if>;
+                    </#if>
+                }
+            </#list>
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+        </#if>
+    },
+    "getFirstError": function () {
+        for( let i = 0; i < arguments.length; i++ ){
+            const fieldName = arguments[i];
+            if( out.messagesPerField.existsError(fieldName) ){
+                return out.messagesPerField.get(fieldName);
+            }
+        }
+    }
+};
+
+out["keycloakifyVersion"] = "KEYCLOAKIFY_VERSION_xEdKd3xEdr";
+out["themeVersion"] = "KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx";
+out["themeType"] = "KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr";
+out["themeName"] = "KEYCLOAKIFY_THEME_NAME_cXxKd3xEer";
+out["pageId"] = "${pageId}";
+
+try {
+    out["url"]["resourcesCommonPath"] = out["url"]["resourcesPath"] + "/" + "RESOURCES_COMMON_cLsLsMrtDkpVv";
+} catch(error) { }
+
+<#if profile?? && profile.attributes??>
+    out["lOCALIZATION_REALM_OVERRIDES_USER_PROFILE_PROPERTY_KEY_aaGLsPgGIdeeX"] = {
+        <#list profile.attributes as attribute>
+            <#if attribute.annotations?? && attribute.displayName??>
+                "${attribute.displayName}": decodeHtmlEntities("${advancedMsg(attribute.displayName)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputHelperTextBefore??>
+                "${attribute.annotations.inputHelperTextBefore}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextBefore)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputHelperTextAfter??>
+                "${attribute.annotations.inputHelperTextAfter}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextAfter)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputTypePlaceholder??>
+                "${attribute.annotations.inputTypePlaceholder}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputTypePlaceholder)?js_string}"),
+            </#if>
+        </#list>
+    };
+</#if>
+
+return out;
+
+function decodeHtmlEntities(htmlStr){
+    var element = decodeHtmlEntities.element;
+    if (!element) {
+        element = document.createElement("textarea");
+        decodeHtmlEntities.element = element;
+    }
+    element.innerHTML = htmlStr;
+    return element.value;
+}
+
+})();
+<#function ftl_object_to_js_code_declaring_an_object object path>
+
+        <#local isHash = "">
+        <#attempt>
+            <#local isHash = object?is_hash || object?is_hash_ex>
+        <#recover>
+            <#return "ABORT: Can't evaluate if " + path?join(".") + " is hash">
+        </#attempt>
+
+        <#if isHash>
+
+            <#if path?size gt 10>
+                <#return "ABORT: Too many recursive calls, path: " + path?join(".")>
+            </#if>
+
+            <#local keys = "">
+
+            <#attempt>
+                <#local keys = object?keys>
+            <#recover>
+                <#return "ABORT: We can't list keys on this object">
+            </#attempt>
+
+            <#local out_seq = []>
+
+            <#list keys as key>
+
+                <#if ["class","declaredConstructors","superclass","declaringClass" ]?seq_contains(key) >
+                    <#continue>
+                </#if>
+
+                <#if 
+                    (
+                        ["loginUpdatePasswordUrl", "loginUpdateProfileUrl", "loginUsernameReminderUrl", "loginUpdateTotpUrl"]?seq_contains(key) && 
+                        are_same_path(path, ["url"])
+                    ) || (
+                        key == "updateProfileCtx" && 
+                        are_same_path(path, [])
+                    ) || (
+                        <#-- https://github.com/keycloakify/keycloakify/pull/65#issuecomment-991896344 (reports with saml-post-form.ftl) -->
+                        <#-- https://github.com/keycloakify/keycloakify/issues/91#issue-1212319466 (reports with error.ftl and Kc18) -->
+                        <#-- https://github.com/keycloakify/keycloakify/issues/109#issuecomment-1134610163 -->
+                        <#-- https://github.com/keycloakify/keycloakify/issues/357 -->
+                        <#-- https://github.com/keycloakify/keycloakify/discussions/406#discussioncomment-7514787 -->
+                        key == "loginAction" && 
+                        are_same_path(path, ["url"]) && 
+                        ["saml-post-form.ftl", "error.ftl", "info.ftl", "login-oauth-grant.ftl", "logout-confirm.ftl", "login-oauth2-device-verify-user-code.ftl"]?seq_contains(pageId) &&
+                        !(auth?has_content && auth.showTryAnotherWayLink())
+                    ) || (
+                        <#-- https://github.com/keycloakify/keycloakify/issues/362 -->
+                        ["secretData", "value"]?seq_contains(key) && 
+                        are_same_path(path, [ "totp", "otpCredentials", "*" ])
+                    ) || (
+                        ["contextData", "idpConfig", "idp", "authenticationSession"]?seq_contains(key) &&
+                        are_same_path(path, ["brokerContext"]) &&
+                        ["login-idp-link-confirm.ftl", "login-idp-link-email.ftl" ]?seq_contains(pageId)
+                    ) || (
+                        key == "identityProviderBrokerCtx" && 
+                        are_same_path(path, []) &&
+                        ["login-idp-link-confirm.ftl", "login-idp-link-email.ftl" ]?seq_contains(pageId)
+                    ) ||  (
+                        ["masterAdminClient", "delegateForUpdate", "defaultRole"]?seq_contains(key) &&
+                        are_same_path(path, ["realm"])
+                    ) || (
+                        "error.ftl" == pageId &&
+                        are_same_path(path, ["realm"]) &&
+                        !["name", "displayName", "displayNameHtml", "internationalizationEnabled", "registrationEmailAsUsername" ]?seq_contains(key)
+                    ) || (
+                        "applications.ftl" == pageId &&
+                        ( 
+                            key == "realm" || 
+                            key == "container" 
+                        ) &&
+                        is_subpath(path, ["applications", "applications"])
+                    ) || (
+                        key == "delegateForUpdate" &&
+                        are_same_path(path, ["user"])
+                    ) || (
+                        <#-- Security audit forwarded by Garth (Gmail) -->
+                        key == "saml.signing.private.key" &&
+                        are_same_path(path, ["client", "attributes"])
+                    ) || (
+                        <#-- See: https://github.com/keycloakify/keycloakify/issues/534 -->
+                        key == "password" &&
+                        are_same_path(path, ["login"])
+                    ) || (
+                        <#-- Remove realmAttributes added by https://github.com/jcputney/keycloak-theme-additional-info-extension for peace of mind. -->
+                        key == "realmAttributes" &&
+                        are_same_path(path, [])
+                    ) || (
+                        <#-- attributesByName adds a lot of noise to the output and is not needed -->
+                        key == "attributes" &&
+                        are_same_path(path, ["profile"]) 
+                    ) || (
+                        <#-- We already have the attributes in profile speedup the rendering by filtering it out from the register object -->
+                        (key == "attributes" || key == "attributesByName") &&
+                        are_same_path(path, ["register"])
+                    )
+                >
+                    <#local out_seq += ["/*" + path?join(".") + "." + key + " excluded*/"]>
+                    <#continue>
+                </#if>
+
+                <#-- https://github.com/keycloakify/keycloakify/discussions/406 -->
+                <#if (
+                    ["register.ftl", "register-user-profile.ftl", "info.ftl", "login.ftl", "login-update-password.ftl", "login-oauth2-device-verify-user-code.ftl"]?seq_contains(pageId) && 
+                    key == "attemptedUsername" && are_same_path(path, ["auth"])
+                )>
+                    <#attempt>
+                        <#-- https://github.com/keycloak/keycloak/blob/3a2bf0c04bcde185e497aaa32d0bb7ab7520cf4a/themes/src/main/resources/theme/base/login/template.ftl#L63 -->
+                        <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
+                            <#local out_seq += ["/*" + path?join(".") + "." + key + " excluded*/"]>
+                            <#continue>
+                        </#if>
+                    <#recover>
+                        <#local out_seq += ["/*Accessing attemptedUsername throwed an exception */"]>
+                    </#attempt>
+                </#if>
+                
+                <#attempt>
+                    <#if !object[key]??>
+                        <#continue>
+                    </#if>
+                <#recover>
+                    <#local out_seq += ["/*Couldn't test if '" + key + "' is available on this object*/"]>
+                    <#continue>
+                </#attempt>
+
+                <#local propertyValue = "">
+
+                <#attempt>
+                    <#local propertyValue = object[key]>
+                <#recover>
+                    <#local out_seq += ["/*Couldn't dereference '" + key + "' on this object*/"]>
+                    <#continue>
+                </#attempt>
+
+                <#local rec_out = ftl_object_to_js_code_declaring_an_object(propertyValue, path + [ key ])>
+
+                <#if rec_out?starts_with("ABORT:")>
+
+                    <#local errorMessage = rec_out?remove_beginning("ABORT:")>
+
+                    <#if errorMessage != " It's a method" >
+                        <#local out_seq += ["/*" + key + ": " + errorMessage + "*/"]>
+                    </#if>
+
+                    <#continue>
+                </#if>
+
+                <#local out_seq +=  ['"' + key + '": ' + rec_out + ","]>
+
+            </#list>
+
+            <#return (["{"] + out_seq?map(str -> ""?right_pad(4 * (path?size + 1)) + str) + [ ""?right_pad(4 * path?size) + "}"])?join("\n")>
+
+        </#if>
+
+        <#local isMethod = "">
+        <#attempt>
+            <#local isMethod = object?is_method>
+        <#recover>
+            <#return "ABORT: Can't test if it'sa method.">
+        </#attempt>
+
+        <#if isMethod>
+
+            <#if are_same_path(path, ["auth", "showUsername"])>
+                <#attempt>
+                    <#return auth.showUsername()?c>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate auth.showUsername()">
+                </#attempt>
+            </#if>
+
+            <#if are_same_path(path, ["auth", "showResetCredentials"])>
+                <#attempt>
+                    <#return auth.showResetCredentials()?c>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate auth.showResetCredentials()">
+                </#attempt>
+            </#if>
+
+            <#if are_same_path(path, ["auth", "showTryAnotherWayLink"])>
+                <#attempt>
+                    <#return auth.showTryAnotherWayLink()?c>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate auth.showTryAnotherWayLink()">
+                </#attempt>
+            </#if>
+
+            <#if are_same_path(path, ["url", "getLogoutUrl"])>
+                <#local returnValue = "">
+                <#attempt>
+                    <#local returnValue = url.getLogoutUrl()>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate url.getLogoutUrl()">
+                </#attempt>
+                <#return 'function(){ return "' + returnValue + '"; }'>
+            </#if>
+
+            <#if are_same_path(path, ["totp", "policy", "getAlgorithmKey"])>
+                <#local returnValue = "">
+                <#attempt>
+                    <#local returnValue = totp.policy.getAlgorithmKey()>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate totp.policy.getAlgorithmKey()">
+                </#attempt>
+                <#return 'function(){ return "' + returnValue + '"; }'>
+            </#if>
+
+            <#return "ABORT: It's a method">
+        </#if>
+
+        <#local isBoolean = "">
+        <#attempt>
+            <#local isBoolean = object?is_boolean>
+        <#recover>
+            <#return "ABORT: Can't test if it's a boolean">
+        </#attempt>
+
+        <#if isBoolean>
+            <#return object?c>
+        </#if>
+
+        <#local isEnumerable = "">
+        <#attempt>
+            <#local isEnumerable = object?is_enumerable>
+        <#recover>
+            <#return "ABORT: Can't test if it's an enumerable">
+        </#attempt>
+
+
+        <#if isEnumerable>
+
+            <#local out_seq = []>
+
+            <#local i = 0>
+
+            <#list object as array_item>
+
+                <#if !array_item??>
+                    <#local out_seq += ["null,"]>
+                    <#continue>
+                </#if>
+
+                <#local rec_out = ftl_object_to_js_code_declaring_an_object(array_item, path + [ i ])>
+
+                <#local i = i + 1>
+
+                <#if rec_out?starts_with("ABORT:")>
+
+                    <#local errorMessage = rec_out?remove_beginning("ABORT:")>
+
+                    <#if errorMessage != " It's a method" >
+                        <#local out_seq += ["/*" + i?string + ": " + errorMessage + "*/"]>
+                    </#if>
+
+                    <#continue>
+                </#if>
+
+                <#local out_seq += [rec_out + ","]>
+
+            </#list>
+
+            <#return (["["] + out_seq?map(str -> ""?right_pad(4 * (path?size + 1)) + str) + [ ""?right_pad(4 * path?size) + "]"])?join("\n")>
+
+        </#if>
+
+        <#local isDate = "">
+        <#attempt>
+            <#local isDate = object?is_date_like>
+        <#recover>
+            <#return "ABORT: Can't test if it's a date">
+        </#attempt>
+
+        <#if isDate>
+            <#return '"' + object?datetime?iso_utc + '"'>
+        </#if>
+
+        <#local isNumber = "">
+        <#attempt>
+            <#local isNumber = object?is_number>
+        <#recover>
+            <#return "ABORT: Can't test if it's a number">
+        </#attempt>
+
+        <#if isNumber>
+            <#return object?c>
+        </#if>
+
+        <#attempt>
+            <#return '"' + object?js_string + '"'>;
+        <#recover>
+        </#attempt>
+
+        <#return "ABORT: Couldn't convert into string non hash, non method, non boolean, non number, non enumerable object">
+
+</#function>
+<#function is_subpath path searchedPath>
+
+    <#if path?size < searchedPath?size>
+        <#return false>
+    </#if>
+
+    <#local i=0>
+
+    <#list path as property>
+
+        <#if i == searchedPath?size >
+            <#continue>
+        </#if>
+
+        <#local searchedProperty=searchedPath[i]>
+
+        <#local i+= 1>
+
+        <#if searchedProperty?is_string && searchedProperty == "*">
+            <#continue>
+        </#if>
+
+        <#if searchedProperty?is_string && !property?is_string>
+            <#return false>
+        </#if>
+
+        <#if searchedProperty?is_number && !property?is_number>
+            <#return false>
+        </#if>
+
+        <#if searchedProperty?string != property?string>
+            <#return false>
+        </#if>
+
+    </#list>
+
+    <#return true>
+
+</#function>
+
+<#function are_same_path path searchedPath>
+    <#return path?size == searchedPath?size && is_subpath(path, searchedPath)>
+</#function>
+</script>

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -0,0 +1,198 @@
+import cheerio from "cheerio";
+import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
+import { generateCssCodeToDefineGlobals } from "../replacers/replaceImportsInCssCode";
+import { replaceImportsInInlineCssCode } from "../replacers/replaceImportsInInlineCssCode";
+import * as fs from "fs";
+import { join as pathJoin } from "path";
+import type { BuildOptions } from "../../shared/buildOptions";
+import { assert } from "tsafe/assert";
+import {
+    type ThemeType,
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir,
+    resources_common,
+    nameOfTheLocalizationRealmOverridesUserProfileProperty
+} from "../../shared/constants";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
+
+export type BuildOptionsLike = {
+    bundler: "vite" | "webpack";
+    themeVersion: string;
+    urlPathname: string | undefined;
+    reactAppBuildDirPath: string;
+    assetsDirPath: string;
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export function generateFtlFilesCodeFactory(params: {
+    themeName: string;
+    indexHtmlCode: string;
+    cssGlobalsToDefine: Record<string, string>;
+    buildOptions: BuildOptionsLike;
+    keycloakifyVersion: string;
+    themeType: ThemeType;
+    fieldNames: string[];
+}) {
+    const {
+        themeName,
+        cssGlobalsToDefine,
+        indexHtmlCode,
+        buildOptions,
+        keycloakifyVersion,
+        themeType,
+        fieldNames
+    } = params;
+
+    const $ = cheerio.load(indexHtmlCode);
+
+    fix_imports_statements: {
+        $("script:not([src])").each((...[, element]) => {
+            const jsCode = $(element).html();
+
+            assert(jsCode !== null);
+
+            const { fixedJsCode } = replaceImportsInJsCode({
+                jsCode,
+                buildOptions
+            });
+
+            $(element).text(fixedJsCode);
+        });
+
+        $("style").each((...[, element]) => {
+            const cssCode = $(element).html();
+
+            assert(cssCode !== null);
+
+            const { fixedCssCode } = replaceImportsInInlineCssCode({
+                cssCode,
+                buildOptions
+            });
+
+            $(element).text(fixedCssCode);
+        });
+
+        (
+            [
+                ["link", "href"],
+                ["script", "src"]
+            ] as const
+        ).forEach(([selector, attrName]) =>
+            $(selector).each((...[, element]) => {
+                const href = $(element).attr(attrName);
+
+                if (href === undefined) {
+                    return;
+                }
+
+                $(element).attr(
+                    attrName,
+                    href.replace(
+                        new RegExp(
+                            `^${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`
+                        ),
+                        `\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/`
+                    )
+                );
+            })
+        );
+
+        if (Object.keys(cssGlobalsToDefine).length !== 0) {
+            $("head").prepend(
+                [
+                    "",
+                    "<style>",
+                    generateCssCodeToDefineGlobals({
+                        cssGlobalsToDefine,
+                        buildOptions
+                    }).cssCodeToPrependInHead,
+                    "</style>",
+                    ""
+                ].join("\n")
+            );
+        }
+    }
+
+    //FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
+    const ftlObjectToJsCodeDeclaringAnObject = fs
+        .readFileSync(
+            pathJoin(
+                getThisCodebaseRootDirPath(),
+                "src",
+                "bin",
+                "keycloakify",
+                "generateFtl",
+                "ftl_object_to_js_code_declaring_an_object.ftl"
+            )
+        )
+        .toString("utf8")
+        .match(/^<script>const _=((?:.|\n)+)<\/script>[\n]?$/)![1]
+        .replace(
+            "FIELD_NAMES_eKsIY4ZsZ4xeM",
+            fieldNames.map(name => `"${name}"`).join(", ")
+        )
+        .replace("KEYCLOAKIFY_VERSION_xEdKd3xEdr", keycloakifyVersion)
+        .replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildOptions.themeVersion)
+        .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
+        .replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", themeName)
+        .replace("RESOURCES_COMMON_cLsLsMrtDkpVv", resources_common)
+        .replace(
+            "lOCALIZATION_REALM_OVERRIDES_USER_PROFILE_PROPERTY_KEY_aaGLsPgGIdeeX",
+            nameOfTheLocalizationRealmOverridesUserProfileProperty
+        );
+    const ftlObjectToJsCodeDeclaringAnObjectPlaceholder =
+        '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }';
+
+    $("head").prepend(
+        `<script>\nwindow.${nameOfTheGlobal}=${ftlObjectToJsCodeDeclaringAnObjectPlaceholder}</script>`
+    );
+
+    // Remove part of the document marked as ignored.
+    {
+        const startTags = $('meta[name="keycloakify-ignore-start"]');
+
+        startTags.each((...[, startTag]) => {
+            const $startTag = $(startTag);
+            const $endTag = $startTag
+                .nextAll('meta[name="keycloakify-ignore-end"]')
+                .first();
+
+            if ($endTag.length) {
+                let currentNode = $startTag.next();
+                while (currentNode.length && !currentNode.is($endTag)) {
+                    currentNode.remove();
+                    currentNode = $startTag.next();
+                }
+
+                $startTag.remove();
+                $endTag.remove();
+            }
+        });
+    }
+
+    const partiallyFixedIndexHtmlCode = $.html();
+
+    function generateFtlFilesCode(params: { pageId: string }): {
+        ftlCode: string;
+    } {
+        const { pageId } = params;
+
+        const $ = cheerio.load(partiallyFixedIndexHtmlCode);
+
+        let ftlCode = $.html();
+
+        Object.entries({
+            [ftlObjectToJsCodeDeclaringAnObjectPlaceholder]:
+                ftlObjectToJsCodeDeclaringAnObject,
+            PAGE_ID_xIgLsPgGId9D8e: pageId
+        }).map(
+            ([searchValue, replaceValue]) =>
+                (ftlCode = ftlCode.replace(searchValue, replaceValue))
+        );
+
+        return { ftlCode };
+    }
+
+    return { generateFtlFilesCode };
+}

src/bin/keycloakify/generateFtl/index.ts

@@ -0,0 +1 @@
+export * from "./generateFtl";

src/bin/keycloakify/generateSrcMainResources/bringInAccountV1.ts

@@ -0,0 +1,90 @@
+import * as fs from "fs";
+import { join as pathJoin } from "path";
+import { assert } from "tsafe/assert";
+import type { BuildOptions } from "../../shared/buildOptions";
+import {
+    resources_common,
+    lastKeycloakVersionWithAccountV1,
+    accountV1ThemeName
+} from "../../shared/constants";
+import { downloadKeycloakDefaultTheme } from "../../shared/downloadKeycloakDefaultTheme";
+import { transformCodebase } from "../../tools/transformCodebase";
+
+type BuildOptionsLike = {
+    cacheDirPath: string;
+    npmWorkspaceRootDirPath: string;
+    keycloakifyBuildDirPath: string;
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export async function bringInAccountV1(params: { buildOptions: BuildOptionsLike }) {
+    const { buildOptions } = params;
+
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
+        keycloakVersion: lastKeycloakVersionWithAccountV1,
+        buildOptions
+    });
+
+    const accountV1DirPath = pathJoin(
+        buildOptions.keycloakifyBuildDirPath,
+        "src",
+        "main",
+        "resources",
+        "theme",
+        accountV1ThemeName,
+        "account"
+    );
+
+    transformCodebase({
+        srcDirPath: pathJoin(defaultThemeDirPath, "base", "account"),
+        destDirPath: accountV1DirPath
+    });
+
+    transformCodebase({
+        srcDirPath: pathJoin(defaultThemeDirPath, "keycloak", "account", "resources"),
+        destDirPath: pathJoin(accountV1DirPath, "resources")
+    });
+
+    transformCodebase({
+        srcDirPath: pathJoin(defaultThemeDirPath, "keycloak", "common", "resources"),
+        destDirPath: pathJoin(accountV1DirPath, "resources", resources_common)
+    });
+
+    fs.writeFileSync(
+        pathJoin(accountV1DirPath, "theme.properties"),
+        Buffer.from(
+            [
+                "accountResourceProvider=account-v1",
+                "",
+                "locales=ar,ca,cs,da,de,en,es,fr,fi,hu,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN",
+                "",
+                "styles=" +
+                    [
+                        "css/account.css",
+                        "img/icon-sidebar-active.png",
+                        "img/logo.png",
+                        ...[
+                            "patternfly.min.css",
+                            "patternfly-additions.min.css",
+                            "patternfly-additions.min.css"
+                        ].map(
+                            fileBasename =>
+                                `${resources_common}/node_modules/patternfly/dist/css/${fileBasename}`
+                        )
+                    ].join(" "),
+                "",
+                "##### css classes for form buttons",
+                "# main class used for all buttons",
+                "kcButtonClass=btn",
+                "# classes defining priority of the button - primary or default (there is typically only one priority button for the form)",
+                "kcButtonPrimaryClass=btn-primary",
+                "kcButtonDefaultClass=btn-default",
+                "# classes defining size of the button",
+                "kcButtonLargeClass=btn-lg",
+                ""
+            ].join("\n"),
+            "utf8"
+        )
+    );
+}

src/bin/keycloakify/generateSrcMainResources/generateMessageProperties.ts

@@ -0,0 +1,231 @@
+import type { ThemeType } from "../../shared/constants";
+import { crawl } from "../../tools/crawl";
+import { join as pathJoin } from "path";
+import { readFileSync } from "fs";
+import { symToStr } from "tsafe/symToStr";
+import { removeDuplicates } from "evt/tools/reducers/removeDuplicates";
+import * as recast from "recast";
+import * as babelParser from "@babel/parser";
+import babelGenerate from "@babel/generator";
+import * as babelTypes from "@babel/types";
+
+export function generateMessageProperties(params: {
+    themeSrcDirPath: string;
+    themeType: ThemeType;
+}): { languageTag: string; propertiesFileSource: string }[] {
+    const { themeSrcDirPath, themeType } = params;
+
+    let files = crawl({
+        dirPath: pathJoin(themeSrcDirPath, themeType),
+        returnedPathsType: "absolute"
+    });
+
+    files = files.filter(file => {
+        const regex = /\.(js|ts|tsx)$/;
+        return regex.test(file);
+    });
+
+    files = files.sort((a, b) => {
+        const regex = /\.i18n\.(ts|js|tsx)$/;
+        const aIsI18nFile = regex.test(a);
+        const bIsI18nFile = regex.test(b);
+        return aIsI18nFile === bIsI18nFile ? 0 : aIsI18nFile ? -1 : 1;
+    });
+
+    files = files.sort((a, b) => a.length - b.length);
+
+    files = files.filter(file =>
+        readFileSync(file).toString("utf8").includes("createUseI18n")
+    );
+
+    if (files.length === 0) {
+        return [];
+    }
+
+    const extraMessages = files
+        .map(file => {
+            const root = recast.parse(readFileSync(file).toString("utf8"), {
+                parser: {
+                    parse: (code: string) =>
+                        babelParser.parse(code, {
+                            sourceType: "module",
+                            plugins: ["typescript"]
+                        }),
+                    generator: babelGenerate,
+                    types: babelTypes
+                }
+            });
+
+            const codes: string[] = [];
+
+            recast.visit(root, {
+                visitCallExpression: function (path) {
+                    if (
+                        path.node.callee.type === "Identifier" &&
+                        path.node.callee.name === "createUseI18n"
+                    ) {
+                        codes.push(babelGenerate(path.node.arguments[0] as any).code);
+                    }
+                    this.traverse(path);
+                }
+            });
+
+            return codes;
+        })
+        .flat()
+        .map(code => {
+            let extraMessages: {
+                [languageTag: string]: Record<string, string>;
+            } = {};
+
+            try {
+                eval(`${symToStr({ extraMessages })} = ${code}`);
+            } catch {
+                console.warn(
+                    [
+                        "WARNING: Make sure that the first argument of createUseI18n can be evaluated in a javascript",
+                        "runtime where only the node globals are available.",
+                        "This is important because we need to put your i18n messages in messages_*.properties files",
+                        "or they won't be available server side.",
+                        "\n",
+                        "The following code could not be evaluated:",
+                        "\n",
+                        code
+                    ].join(" ")
+                );
+            }
+
+            return extraMessages;
+        });
+
+    const languageTags = extraMessages
+        .map(extraMessage => Object.keys(extraMessage))
+        .flat()
+        .reduce(...removeDuplicates<string>());
+
+    const keyValueMapByLanguageTag: Record<string, Record<string, string>> = {};
+
+    for (const languageTag of languageTags) {
+        const keyValueMap: Record<string, string> = {};
+
+        for (const extraMessage of extraMessages) {
+            const keyValueMap_i = extraMessage[languageTag];
+
+            if (keyValueMap_i === undefined) {
+                continue;
+            }
+
+            for (const [key, value] of Object.entries(keyValueMap_i)) {
+                if (keyValueMap[key] !== undefined) {
+                    console.warn(
+                        [
+                            "WARNING: The following key is defined multiple times:",
+                            "\n",
+                            key,
+                            "\n",
+                            "The following value will be ignored:",
+                            "\n",
+                            value,
+                            "\n",
+                            "The following value was already defined:",
+                            "\n",
+                            keyValueMap[key]
+                        ].join(" ")
+                    );
+                    continue;
+                }
+
+                keyValueMap[key] = value;
+            }
+        }
+
+        keyValueMapByLanguageTag[languageTag] = keyValueMap;
+    }
+
+    const out: { languageTag: string; propertiesFileSource: string }[] = [];
+
+    for (const [languageTag, keyValueMap] of Object.entries(keyValueMapByLanguageTag)) {
+        const propertiesFileSource = Object.entries(keyValueMap)
+            .map(([key, value]) => `${key}=${escapeString(value)}`)
+            .join("\n");
+
+        out.push({
+            languageTag,
+            propertiesFileSource: [
+                "# This file was generated by keycloakify",
+                "",
+                "parent=base",
+                "",
+                propertiesFileSource,
+                ""
+            ].join("\n")
+        });
+    }
+
+    return out;
+}
+
+// Convert a JavaScript string to UTF-16 encoding
+function toUTF16(codePoint: number): string {
+    if (codePoint <= 0xffff) {
+        // BMP character
+        return "\\u" + codePoint.toString(16).padStart(4, "0");
+    } else {
+        // Non-BMP character
+        codePoint -= 0x10000;
+        let highSurrogate = (codePoint >> 10) + 0xd800;
+        let lowSurrogate = (codePoint % 0x400) + 0xdc00;
+        return (
+            "\\u" +
+            highSurrogate.toString(16).padStart(4, "0") +
+            "\\u" +
+            lowSurrogate.toString(16).padStart(4, "0")
+        );
+    }
+}
+
+// Escapes special characters for use in a .properties file
+function escapeString(str: string): string {
+    let escapedStr = "";
+    for (const char of [...str]) {
+        const codePoint = char.codePointAt(0);
+        if (!codePoint) continue;
+
+        switch (char) {
+            case "\n":
+                escapedStr += "\\n";
+                break;
+            case "\r":
+                escapedStr += "\\r";
+                break;
+            case "\t":
+                escapedStr += "\\t";
+                break;
+            case "\\":
+                escapedStr += "\\\\";
+                break;
+            case ":":
+                escapedStr += "\\:";
+                break;
+            case "=":
+                escapedStr += "\\=";
+                break;
+            case "#":
+                escapedStr += "\\#";
+                break;
+            case "!":
+                escapedStr += "\\!";
+                break;
+            case "'":
+                escapedStr += "''";
+                break;
+            default:
+                if (codePoint > 0x7f) {
+                    escapedStr += toUTF16(codePoint); // Non-ASCII characters
+                } else {
+                    escapedStr += char; // ASCII character needs no escape
+                }
+        }
+    }
+    return escapedStr;
+}

src/bin/keycloakify/generateSrcMainResources/generateSrcMainResources.ts

@@ -0,0 +1,34 @@
+import type { BuildOptions } from "../../shared/buildOptions";
+import { assert } from "tsafe/assert";
+import {
+    generateSrcMainResourcesForMainTheme,
+    type BuildOptionsLike as BuildOptionsLike_generateSrcMainResourcesForMainTheme
+} from "./generateSrcMainResourcesForMainTheme";
+import { generateSrcMainResourcesForThemeVariant } from "./generateSrcMainResourcesForThemeVariant";
+
+export type BuildOptionsLike = BuildOptionsLike_generateSrcMainResourcesForMainTheme & {
+    themeNames: string[];
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export async function generateSrcMainResources(params: {
+    buildOptions: BuildOptionsLike;
+}): Promise<void> {
+    const { buildOptions } = params;
+
+    const [themeName, ...themeVariantNames] = buildOptions.themeNames;
+
+    await generateSrcMainResourcesForMainTheme({
+        themeName,
+        buildOptions
+    });
+
+    for (const themeVariantName of themeVariantNames) {
+        generateSrcMainResourcesForThemeVariant({
+            themeName,
+            themeVariantName,
+            buildOptions
+        });
+    }
+}

src/bin/keycloakify/generateSrcMainResources/generateSrcMainResourcesForMainTheme.ts

@@ -0,0 +1,306 @@
+import { transformCodebase } from "../../tools/transformCodebase";
+import * as fs from "fs";
+import { join as pathJoin, resolve as pathResolve } from "path";
+import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
+import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
+import { generateFtlFilesCodeFactory } from "../generateFtl";
+import {
+    type ThemeType,
+    lastKeycloakVersionWithAccountV1,
+    keycloak_resources,
+    accountV1ThemeName,
+    basenameOfTheKeycloakifyResourcesDir,
+    loginThemePageIds,
+    accountThemePageIds
+} from "../../shared/constants";
+import { isInside } from "../../tools/isInside";
+import type { BuildOptions } from "../../shared/buildOptions";
+import { assert, type Equals } from "tsafe/assert";
+import { downloadKeycloakStaticResources } from "../../shared/downloadKeycloakStaticResources";
+import { readFieldNameUsage } from "./readFieldNameUsage";
+import { readExtraPagesNames } from "./readExtraPageNames";
+import { generateMessageProperties } from "./generateMessageProperties";
+import { bringInAccountV1 } from "./bringInAccountV1";
+import { getThemeSrcDirPath } from "../../shared/getThemeSrcDirPath";
+import { rmSync } from "../../tools/fs.rmSync";
+import { readThisNpmPackageVersion } from "../../tools/readThisNpmPackageVersion";
+import {
+    writeMetaInfKeycloakThemes,
+    type MetaInfKeycloakTheme
+} from "../../shared/metaInfKeycloakThemes";
+import { objectEntries } from "tsafe/objectEntries";
+
+export type BuildOptionsLike = {
+    bundler: "vite" | "webpack";
+    extraThemeProperties: string[] | undefined;
+    themeVersion: string;
+    loginThemeResourcesFromKeycloakVersion: string;
+    reactAppBuildDirPath: string;
+    cacheDirPath: string;
+    assetsDirPath: string;
+    urlPathname: string | undefined;
+    npmWorkspaceRootDirPath: string;
+    reactAppRootDirPath: string;
+    keycloakifyBuildDirPath: string;
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export async function generateSrcMainResourcesForMainTheme(params: {
+    themeName: string;
+    buildOptions: BuildOptionsLike;
+}): Promise<void> {
+    const { themeName, buildOptions } = params;
+
+    const { themeSrcDirPath } = getThemeSrcDirPath({
+        reactAppRootDirPath: buildOptions.reactAppRootDirPath
+    });
+
+    const getThemeTypeDirPath = (params: { themeType: ThemeType | "email" }) => {
+        const { themeType } = params;
+        return pathJoin(
+            buildOptions.keycloakifyBuildDirPath,
+            "src",
+            "main",
+            "resources",
+            "theme",
+            themeName,
+            themeType
+        );
+    };
+
+    const cssGlobalsToDefine: Record<string, string> = {};
+
+    const implementedThemeTypes: Record<ThemeType | "email", boolean> = {
+        login: false,
+        account: false,
+        email: false
+    };
+
+    for (const themeType of ["login", "account"] as const) {
+        if (!fs.existsSync(pathJoin(themeSrcDirPath, themeType))) {
+            continue;
+        }
+
+        implementedThemeTypes[themeType] = true;
+
+        const themeTypeDirPath = getThemeTypeDirPath({ themeType });
+
+        apply_replacers_and_move_to_theme_resources: {
+            const destDirPath = pathJoin(
+                themeTypeDirPath,
+                "resources",
+                basenameOfTheKeycloakifyResourcesDir
+            );
+
+            // NOTE: Prevent accumulation of files in the assets dir, as names are hashed they pile up.
+            rmSync(destDirPath, { recursive: true, force: true });
+
+            if (themeType === "account" && implementedThemeTypes.login) {
+                // NOTE: We prevent doing it twice, it has been done for the login theme.
+
+                transformCodebase({
+                    srcDirPath: pathJoin(
+                        getThemeTypeDirPath({
+                            themeType: "login"
+                        }),
+                        "resources",
+                        basenameOfTheKeycloakifyResourcesDir
+                    ),
+                    destDirPath
+                });
+
+                break apply_replacers_and_move_to_theme_resources;
+            }
+
+            transformCodebase({
+                srcDirPath: buildOptions.reactAppBuildDirPath,
+                destDirPath,
+                transformSourceCode: ({ filePath, sourceCode }) => {
+                    //NOTE: Prevent cycles, excludes the folder we generated for debug in public/
+                    // This should not happen if users follow the new instruction setup but we keep it for retrocompatibility.
+                    if (
+                        isInside({
+                            dirPath: pathJoin(
+                                buildOptions.reactAppBuildDirPath,
+                                keycloak_resources
+                            ),
+                            filePath
+                        })
+                    ) {
+                        return undefined;
+                    }
+
+                    if (/\.css?$/i.test(filePath)) {
+                        const {
+                            cssGlobalsToDefine: cssGlobalsToDefineForThisFile,
+                            fixedCssCode
+                        } = replaceImportsInCssCode({
+                            cssCode: sourceCode.toString("utf8")
+                        });
+
+                        Object.entries(cssGlobalsToDefineForThisFile).forEach(
+                            ([key, value]) => {
+                                cssGlobalsToDefine[key] = value;
+                            }
+                        );
+
+                        return {
+                            modifiedSourceCode: Buffer.from(fixedCssCode, "utf8")
+                        };
+                    }
+
+                    if (/\.js?$/i.test(filePath)) {
+                        const { fixedJsCode } = replaceImportsInJsCode({
+                            jsCode: sourceCode.toString("utf8"),
+                            buildOptions
+                        });
+
+                        return {
+                            modifiedSourceCode: Buffer.from(fixedJsCode, "utf8")
+                        };
+                    }
+
+                    return { modifiedSourceCode: sourceCode };
+                }
+            });
+        }
+
+        const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
+            themeName,
+            indexHtmlCode: fs
+                .readFileSync(pathJoin(buildOptions.reactAppBuildDirPath, "index.html"))
+                .toString("utf8"),
+            cssGlobalsToDefine,
+            buildOptions,
+            keycloakifyVersion: readThisNpmPackageVersion(),
+            themeType,
+            fieldNames: readFieldNameUsage({
+                themeSrcDirPath,
+                themeType
+            })
+        });
+
+        [
+            ...(() => {
+                switch (themeType) {
+                    case "login":
+                        return loginThemePageIds;
+                    case "account":
+                        return accountThemePageIds;
+                }
+            })(),
+            ...readExtraPagesNames({
+                themeType,
+                themeSrcDirPath
+            })
+        ].forEach(pageId => {
+            const { ftlCode } = generateFtlFilesCode({ pageId });
+
+            fs.mkdirSync(themeTypeDirPath, { recursive: true });
+
+            fs.writeFileSync(
+                pathJoin(themeTypeDirPath, pageId),
+                Buffer.from(ftlCode, "utf8")
+            );
+        });
+
+        generateMessageProperties({
+            themeSrcDirPath,
+            themeType
+        }).forEach(({ languageTag, propertiesFileSource }) => {
+            const messagesDirPath = pathJoin(themeTypeDirPath, "messages");
+
+            fs.mkdirSync(pathJoin(themeTypeDirPath, "messages"), {
+                recursive: true
+            });
+
+            const propertiesFilePath = pathJoin(
+                messagesDirPath,
+                `messages_${languageTag}.properties`
+            );
+
+            fs.writeFileSync(
+                propertiesFilePath,
+                Buffer.from(propertiesFileSource, "utf8")
+            );
+        });
+
+        await downloadKeycloakStaticResources({
+            keycloakVersion: (() => {
+                switch (themeType) {
+                    case "account":
+                        return lastKeycloakVersionWithAccountV1;
+                    case "login":
+                        return buildOptions.loginThemeResourcesFromKeycloakVersion;
+                }
+            })(),
+            themeDirPath: pathResolve(pathJoin(themeTypeDirPath, "..")),
+            themeType,
+            buildOptions
+        });
+
+        fs.writeFileSync(
+            pathJoin(themeTypeDirPath, "theme.properties"),
+            Buffer.from(
+                [
+                    `parent=${(() => {
+                        switch (themeType) {
+                            case "account":
+                                return accountV1ThemeName;
+                            case "login":
+                                return "keycloak";
+                        }
+                        assert<Equals<typeof themeType, never>>(false);
+                    })()}`,
+                    ...(buildOptions.extraThemeProperties ?? [])
+                ].join("\n\n"),
+                "utf8"
+            )
+        );
+    }
+
+    email: {
+        const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
+
+        if (!fs.existsSync(emailThemeSrcDirPath)) {
+            break email;
+        }
+
+        implementedThemeTypes.email = true;
+
+        transformCodebase({
+            srcDirPath: emailThemeSrcDirPath,
+            destDirPath: getThemeTypeDirPath({ themeType: "email" })
+        });
+    }
+
+    if (implementedThemeTypes.account) {
+        await bringInAccountV1({
+            buildOptions
+        });
+    }
+
+    {
+        const metaInfKeycloakThemes: MetaInfKeycloakTheme = { themes: [] };
+
+        metaInfKeycloakThemes.themes.push({
+            name: themeName,
+            types: objectEntries(implementedThemeTypes)
+                .filter(([, isImplemented]) => isImplemented)
+                .map(([themeType]) => themeType)
+        });
+
+        if (implementedThemeTypes.account) {
+            metaInfKeycloakThemes.themes.push({
+                name: accountV1ThemeName,
+                types: ["account"]
+            });
+        }
+
+        writeMetaInfKeycloakThemes({
+            keycloakifyBuildDirPath: buildOptions.keycloakifyBuildDirPath,
+            metaInfKeycloakThemes
+        });
+    }
+}

src/bin/keycloakify/generateSrcMainResources/generateSrcMainResourcesForThemeVariant.ts

@@ -0,0 +1,80 @@
+import { join as pathJoin, extname as pathExtname, sep as pathSep } from "path";
+import { transformCodebase } from "../../tools/transformCodebase";
+import type { BuildOptions } from "../../shared/buildOptions";
+import {
+    readMetaInfKeycloakThemes,
+    writeMetaInfKeycloakThemes
+} from "../../shared/metaInfKeycloakThemes";
+import { assert } from "tsafe/assert";
+
+export type BuildOptionsLike = {
+    keycloakifyBuildDirPath: string;
+};
+
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
+
+export function generateSrcMainResourcesForThemeVariant(params: {
+    themeName: string;
+    themeVariantName: string;
+    buildOptions: BuildOptionsLike;
+}) {
+    const { themeName, themeVariantName, buildOptions } = params;
+
+    const mainThemeDirPath = pathJoin(
+        buildOptions.keycloakifyBuildDirPath,
+        "src",
+        "main",
+        "resources",
+        "theme",
+        themeName
+    );
+
+    transformCodebase({
+        srcDirPath: mainThemeDirPath,
+        destDirPath: pathJoin(mainThemeDirPath, "..", themeVariantName),
+        transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+            if (
+                pathExtname(fileRelativePath) === ".ftl" &&
+                fileRelativePath.split(pathSep).length === 2
+            ) {
+                const modifiedSourceCode = Buffer.from(
+                    Buffer.from(sourceCode)
+                        .toString("utf-8")
+                        .replace(
+                            `out["themeName"] = "${themeName}";`,
+                            `out["themeName"] = "${themeVariantName}";`
+                        ),
+                    "utf8"
+                );
+
+                assert(Buffer.compare(modifiedSourceCode, sourceCode) !== 0);
+
+                return { modifiedSourceCode };
+            }
+
+            return { modifiedSourceCode: sourceCode };
+        }
+    });
+
+    {
+        const updatedMetaInfKeycloakThemes = readMetaInfKeycloakThemes({
+            keycloakifyBuildDirPath: buildOptions.keycloakifyBuildDirPath
+        });
+
+        updatedMetaInfKeycloakThemes.themes.push({
+            name: themeVariantName,
+            types: (() => {
+                const theme = updatedMetaInfKeycloakThemes.themes.find(
+                    ({ name }) => name === themeName
+                );
+                assert(theme !== undefined);
+                return theme.types;
+            })()
+        });
+
+        writeMetaInfKeycloakThemes({
+            keycloakifyBuildDirPath: buildOptions.keycloakifyBuildDirPath,
+            metaInfKeycloakThemes: updatedMetaInfKeycloakThemes
+        });
+    }
+}

src/bin/keycloakify/generateSrcMainResources/index.ts

@@ -0,0 +1 @@
+export * from "./generateSrcMainResources";

src/bin/keycloakify/generateSrcMainResources/readExtraPageNames.ts

@@ -0,0 +1,52 @@
+import { crawl } from "../../tools/crawl";
+import { id } from "tsafe/id";
+import { removeDuplicates } from "evt/tools/reducers/removeDuplicates";
+import * as fs from "fs";
+import { join as pathJoin } from "path";
+import {
+    type ThemeType,
+    accountThemePageIds,
+    loginThemePageIds
+} from "../../shared/constants";
+
+export function readExtraPagesNames(params: {
+    themeSrcDirPath: string;
+    themeType: ThemeType;
+}): string[] {
+    const { themeSrcDirPath, themeType } = params;
+
+    const filePaths = crawl({
+        dirPath: pathJoin(themeSrcDirPath, themeType),
+        returnedPathsType: "absolute"
+    }).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
+
+    const candidateFilePaths = filePaths.filter(filePath =>
+        /kcContext\.[^.]+$/.test(filePath)
+    );
+
+    if (candidateFilePaths.length === 0) {
+        candidateFilePaths.push(...filePaths);
+    }
+
+    const extraPages: string[] = [];
+
+    for (const candidateFilPath of candidateFilePaths) {
+        const rawSourceFile = fs.readFileSync(candidateFilPath).toString("utf8");
+
+        extraPages.push(
+            ...Array.from(
+                rawSourceFile.matchAll(/["']?pageId["']?\s*:\s*["']([^.]+.ftl)["']/g),
+                m => m[1]
+            )
+        );
+    }
+
+    return extraPages.reduce(...removeDuplicates<string>()).filter(pageId => {
+        switch (themeType) {
+            case "account":
+                return !id<readonly string[]>(accountThemePageIds).includes(pageId);
+            case "login":
+                return !id<readonly string[]>(loginThemePageIds).includes(pageId);
+        }
+    });
+}