Release candidate

docs: add liamlows as a contributor for code, and doc

.all-contributorsrc

@@ -0,0 +1,271 @@
+{
+  "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"
+      ]
+    },
+    {
+      "login": "madmadson",
+      "name": "Tobias Matt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/798831?v=4",
+      "profile": "https://github.com/madmadson",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "oliviergoulet5",
+      "name": "Olivier Goulet",
+      "avatar_url": "https://avatars.githubusercontent.com/u/17685861?v=4",
+      "profile": "https://github.com/oliviergoulet5",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "liamlows",
+      "name": "Liam Lowsley-Williams",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1365914?v=4",
+      "profile": "https://github.com/liamlows",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true,
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "projectName": "keycloakify",
+  "projectOwner": "keycloakify",
+  "commitType": "docs"
+}

.github/release.yaml

@@ -1,25 +0,0 @@
-changelog:
-  exclude:
-    labels:
-      - ignore-for-release
-    authors:
-      - octocat
-  categories:
-    - title: Breaking Changes 🛠
-      labels:
-        - breaking
-    - title: Exciting New Features 🎉
-      labels:
-        - feature
-    - title: Fixes 🔧
-      labels:
-        - fix
-    - title: Documentation 🔧
-      labels:
-        - docs
-    - title: CI 👷
-      labels:
-        - ci
-    - title: Other Changes
-      labels:
-        - '*'

.github/workflows/ci.yaml

@@ -13,48 +13,51 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ !github.event.created && github.repository != 'garronej/ts-ci' }}
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - 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: |
-        PACKAGE_MANAGER=npm
-        if [ -f "./yarn.lock" ]; then
-            PACKAGE_MANAGER=yarn
-        fi
-        $PACKAGE_MANAGER run format:check
+    - name: If this step fails run 'npm run format' then commit again.
+      run: npm run _format --list-different
   test:
     runs-on: ${{ matrix.os }}
     needs: test_lint
     strategy:
       matrix:
-        node: [ '14', '15' ,'16', '17' ]
-        os: [ windows-latest, ubuntu-latest ]
+        node: [ '18' ]
+        os: [ ubuntu-latest ]
     name: Test with Node v${{ matrix.node }} on ${{ matrix.os }}
     steps:
-    - name: Tell if project is using npm or yarn
-      id: step1
-      uses: garronej/ts-ci@v2.0.2
-      with: 
-        action_name: tell_if_project_uses_npm_or_yarn
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node }}
     - uses: bahmutov/npm-install@v1
-    - if: steps.step1.outputs.npm_or_yarn == 'yarn'
-      run: |
-        yarn build
-        yarn test
-    - if: steps.step1.outputs.npm_or_yarn == 'npm'
-      run: |
-        npm run build
-        npm test
+    - run: npm run build
+    - run: npm run test
+
+  storybook:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push'
+    needs: test
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+    - uses: bahmutov/npm-install@v1
+    - run: npm run 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 ./storybook-static -u "github-actions-bot <actions@github.com>" 
+
   check_if_version_upgraded:
     name: Check if version upgrade
-    # We run this only if it's a push on the default branch or if it's a PR from a 
-    # branch (meaning not a PR from a fork). It would be more straightforward to test if secrets.NPM_TOKEN is 
-    # defined but GitHub Action don't allow it yet.
+    # 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 
@@ -66,16 +69,15 @@ jobs:
       is_upgraded_version: ${{ steps.step1.outputs.is_upgraded_version }}
       is_pre_release: ${{steps.step1.outputs.is_pre_release }}
     steps:
-    - uses: garronej/ts-ci@v2.0.2
+    - uses: garronej/ts-ci@v2.1.2
       id: step1
       with: 
         action_name: is_package_json_version_upgraded
-        branch: ${{ github.head_ref || github.ref }}
 
   create_github_release:
     runs-on: ubuntu-latest
-    # We create a release only if the version have been upgraded and we are on the main branch
-    # or if we are on a branch of the repo that has an PR open on main.
+    # 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' &&
       (
@@ -85,7 +87,7 @@ jobs:
     needs: 
       - check_if_version_upgraded
     steps:
-    - uses: softprops/action-gh-release@v1
+    - 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 }}
@@ -102,22 +104,20 @@ jobs:
       - create_github_release
       - check_if_version_upgraded
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         ref: ${{ github.ref }}
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
         registry-url: https://registry.npmjs.org/
     - uses: bahmutov/npm-install@v1
-    - run: |
-        PACKAGE_MANAGER=npm
-        if [ -f "./yarn.lock" ]; then
-            PACKAGE_MANAGER=yarn
-        fi
-        $PACKAGE_MANAGER run build
-    - run: npx -y -p denoify@1.2.2 enable_short_npm_import_path
+    - run: npm run 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
@@ -136,4 +136,4 @@ jobs:
       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 }}
+        IS_PRE_RELEASE: ${{ needs.check_if_version_upgraded.outputs.is_pre_release }}

.gitignore

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

.prettierignore

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

.prettierrc.json

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

.storybook/customTheme.ts

@@ -0,0 +1,33 @@
+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 = {
+    base: "dark",
+    appBg: "#1E1E1E",
+    appContentBg: "#161616",
+    barBg: "#161616",
+    colorSecondary: "#8585F6",
+    textColor: "#FFFFFF",
+    brandImage,
+    brandTitle,
+    brandUrl,
+    fontBase,
+    fontCode
+};
+
+export const lightTheme: typeof darkTheme = {
+    base: "light",
+    appBg: "#F6F6F6",
+    appContentBg: "#FFFFFF",
+    barBg: "#FFFFFF",
+    colorSecondary: "#000091",
+    textColor: "#212121",
+    brandImage,
+    brandTitle,
+    brandUrl,
+    fontBase,
+    fontCode
+};

.storybook/main.js

@@ -0,0 +1,13 @@
+module.exports = {
+    stories: [
+        "../stories/**/*.stories.tsx"
+    ],
+    addons: [
+        "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,23 @@
+<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">
+
+<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,161 @@
+import { darkTheme, lightTheme } from "./customTheme";
+import { create as createTheme } from "@storybook/theming";
+
+export const parameters = {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+    backgrounds: { disable: true },
+    darkMode: {
+        light: createTheme(lightTheme),
+        dark: createTheme(darkTheme),
+    },
+    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),
+    },
+};
+
+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/terms/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/terms/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/terms/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]**.

README.md

@@ -2,172 +2,140 @@
     <img src="https://user-images.githubusercontent.com/6702424/109387840-eba11f80-7903-11eb-9050-db1dad883f78.png">  
 </p>
 <p align="center">
-    <i>🔏 Create Keycloak themes using React 🔏</i>
+    <i>🔏 Keycloak Theming for the Modern Web 🔏</i>
     <br>
     <br>
     <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://bundlephobia.com/package/keycloakify">
-      <img src="https://img.shields.io/bundlephobia/minzip/keycloakify">
-    </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/InseeFrLab/keycloakify/blob/729503fe31a155a823f46dd66ad4ff34ca274e0a/tsconfig.json#L14">
-        <img src="https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565">
-    </a>
     <a href="https://github.com/thomasdarimont/awesome-keycloak">
         <img src="https://awesome.re/mentioned-badge.svg"/>
     </a>
+    <p align="center">
+      Check out our discord server!<br/>
+      <a href="https://discord.gg/mJdYJSdcm4">
+        <img src="https://dcbadge.limes.pink/api/server/kYFZG7fQmn"/>
+      </a>
+    </p>
     <p align="center">
         <a href="https://www.keycloakify.dev">Home</a>
         -
         <a href="https://docs.keycloakify.dev">Documentation</a>
-    </p>
-    <p align="center"> ---- Project starter / Demo setup ---- </p>
-    <p align="center">
-        <a href="https://github.com/garronej/keycloakify-starter">CSS Level customization</a>
         -
-        <a href="https://github.com/garronej/keycloakify-advanced-starter">Component Level customization</a>
+        <a href="https://storybook.keycloakify.dev">Storybook</a>
+        -
+        <a href="https://github.com/codegouvfr/keycloakify-starter">Starter project</a>
     </p>
-    <p align="center"> ---- </p>
-
 </p>
 
 <p align="center">
-    <i>Ultimately this build tool generates a Keycloak theme <a href="https://www.keycloakify.dev">Learn more</a></i>
-    <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
+    <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/user-attachments/assets/6bf3bef9-00b0-4460-97b9-0d2da8500798">
 </p>
 
-> 🗣 V6 have been released 🎉  
-> [It features major improvements](https://github.com/InseeFrLab/keycloakify#600).  
-> Checkout [the migration guide](https://docs.keycloakify.dev/v5-to-v6).
+Keycloakify is fully compatible with Keycloak from version 11 to 25...[and beyond](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791)
 
-# Changelog highlights
+## Sponsors
 
-## 6.8.0
+Friends for the project, we trust and recommend their services.
 
--   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/InseeFrLab/keycloakify/issues/191).
+<br/>
 
-## 6.7.0
+<div align="center">
 
--   Add support for `webauthn-authenticate.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/InseeFrLab/keycloakify/pull/185).
+![Logo Dark](https://github.com/user-attachments/assets/088f6631-b7ef-42ad-812b-df4870dc16ae#gh-dark-mode-only)
 
-## 6.6.0
+</div>
 
--   Add support for `login-password.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/InseeFrLab/keycloakify/pull/184).
+<div align="center">
 
-## 6.5.0
+![Logo Light](https://github.com/user-attachments/assets/53fb16f8-02ef-4523-9c36-b42d6e59837e#gh-light-mode-only)
 
--   Add support for `login-username.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/InseeFrLab/keycloakify/pull/183).
+</div>
 
-## 6.4.0
+<br/>
 
--   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).
+<p align="center">
+  <a href="https://www.zone2.tech/services/keycloak-consulting">
+    <i><strong>Keycloak Consulting Services</strong> - Your partner in Keycloak deployment, configuration, and extension development for optimized identity management solutions.</i>
+  </a>
+</p>
 
-## 6.0.0
+<div align="center">
 
--   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.
+![Logo Dark](https://user-images.githubusercontent.com/6702424/234135797-c84d0a90-0526-43e5-a186-70cbebdeb278.png#gh-dark-mode-only)
 
-Checkout [the migration guide](https://docs.keycloakify.dev/v5-to-v6)
+</div>
 
-## 5.8.0
+<div align="center">
 
--   [React.lazy()](https://reactjs.org/docs/code-splitting.html#reactlazy) support 🎉. [#141](https://github.com/InseeFrLab/keycloakify/issues/141)
+![Logo Light](https://user-images.githubusercontent.com/6702424/234135799-68684c33-4ec5-48d4-8763-0f3922c86643.png#gh-light-mode-only)
 
-## 5.7.0
+</div>
 
--   Feat `logout-confirm.ftl`. [PR](https://github.com/InseeFrLab/keycloakify/pull/120)
+<p align="center">
+<a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github"><strong>Managed Keycloak Provider</strong> - With Cloud-IAM powering your Keycloak clusters, you can sleep easy knowing you've got the software and the experts you need for operational excellence.  </a>
+<br/>
+Use code <code>keycloakify5</code> at checkout for a 5% discount.
+</p>
 
-## 5.6.4
+## Contributors ✨
 
-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)
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
-## v5.6.0
+<!-- 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/madmadson"><img src="https://avatars.githubusercontent.com/u/798831?v=4?s=100" width="100px;" alt="Tobias Matt"/><br /><sub><b>Tobias Matt</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=madmadson" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/oliviergoulet5"><img src="https://avatars.githubusercontent.com/u/17685861?v=4?s=100" width="100px;" alt="Olivier Goulet"/><br /><sub><b>Olivier Goulet</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=oliviergoulet5" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/liamlows"><img src="https://avatars.githubusercontent.com/u/1365914?v=4?s=100" width="100px;" alt="Liam Lowsley-Williams"/><br /><sub><b>Liam Lowsley-Williams</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=liamlows" title="Code">💻</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=liamlows" title="Documentation">📖</a></td>
+    </tr>
+  </tbody>
+</table>
 
-Add support for `login-config-totp.ftl` page [#127](https://github.com/InseeFrLab/keycloakify/pull/127).
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
 
-## v5.3.0
-
-Rename `keycloak_theme_email` to `keycloak_email`.  
-If you already had a `keycloak_theme_email` you should rename it `keycloak_email`.
-
-## v5.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).
-
-## v4.10.0
-
-Add `login-idp-link-email.ftl` page [See PR](https://github.com/InseeFrLab/keycloakify/pull/92).
-
-## v4.8.0
-
-[Email template customization.](#email-template-customization)
-
-## v4.7.4
-
-**M1 Mac** support (for testing locally with a dockerized Keycloak).
-
-## v4.7.2
-
-> WARNING: This is broken.  
-> Testing with local Keycloak container working with M1 Mac. Thanks to [@eduardosanzb](https://github.com/InseeFrLab/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.
-
-## v4.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)
-
-## v4.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.
-
-## v4.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.
-
-## v4.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.
-
-## v4
-
--   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
--   Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
-
-## v3
-
-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/InseeFrLab/keycloakify#implement-context-persistence-optional).
-
-## v2.5
-
--   Feature [Use advanced message](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/i18n/useKcMessage.tsx#L53-L66)
-    and [`messagesPerFields`](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/getKcContext/KcContextBase.ts#L70-L75) (implementation [here](https://github.com/InseeFrLab/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/generateFtl/common.ftl#L130-L189))
--   Test container now uses Keycloak version `15.0.2`.
-
-## v2
-
--   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`).
+<!-- ALL-CONTRIBUTORS-LIST:END -->

package.json

@@ -1,30 +1,26 @@
 {
     "name": "keycloakify",
-    "version": "6.8.2",
-    "description": "Keycloak theme generator for Reacts app",
+    "version": "10.1.0-rc.0",
+    "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
-        "url": "git://github.com/garronej/keycloakify.git"
+        "url": "git://github.com/keycloakify/keycloakify.git"
     },
-    "main": "dist/lib/index.js",
-    "types": "dist/lib/index.d.ts",
     "scripts": {
-        "build": "rimraf dist/ && tsc -p src/bin && tsc -p src/lib && yarn grant-exec-perms && yarn copy-files dist/",
-        "build:test": "rimraf dist_test/ && tsc -p src/test && yarn copy-files dist_test/",
-        "grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
-        "copy-files": "copyfiles -u 1 src/**/*.ftl",
-        "pretest": "yarn build:test",
-        "test": "node dist_test/test/bin && node dist_test/test/lib",
-        "generate-messages": "node dist/bin/generate-i18n-messages.js",
-        "link_in_test_app": "node dist/bin/link_in_test_app.js",
+        "prepare": "tsx scripts/generate-i18n-messages.ts",
+        "build": "tsx scripts/build.ts",
+        "storybook": "tsx scripts/start-storybook.ts",
+        "link-in-starter": "tsx 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": "tsx scripts/link-in-app.ts",
+        "build-storybook": "tsx scripts/build-storybook.ts",
+        "dump-keycloak-realm": "tsx scripts/dump-keycloak-realm.ts"
     },
     "bin": {
-        "keycloakify": "dist/bin/keycloakify/index.js",
-        "create-keycloak-email-directory": "dist/bin/create-keycloak-email-directory.js",
-        "download-builtin-keycloak-theme": "dist/bin/download-builtin-keycloak-theme.js"
+        "keycloakify": "dist/bin/main.js"
     },
     "lint-staged": {
         "*.{ts,tsx,json,md}": [
@@ -39,56 +35,80 @@
     "author": "u/garronej",
     "license": "MIT",
     "files": [
-        "src/",
         "dist/",
-        "!dist/tsconfig.tsbuildinfo"
+        "!dist/tsconfig.tsbuildinfo",
+        "!dist/bin/",
+        "dist/bin/main.js",
+        "dist/bin/*.index.js",
+        "dist/bin/*.node",
+        "dist/bin/shared/constants.js",
+        "dist/bin/shared/*.d.ts",
+        "dist/bin/shared/*.js.map",
+        "!dist/vite-plugin/",
+        "dist/vite-plugin/index.js",
+        "dist/vite-plugin/index.d.ts",
+        "dist/vite-plugin/vite-plugin.d.ts"
     ],
     "keywords": [
-        "bluehats",
         "keycloak",
         "react",
         "theme",
         "FreeMarker",
         "ftl",
         "login",
-        "register"
+        "register",
+        "account",
+        "bluehats"
     ],
-    "homepage": "https://github.com/garronej/keycloakify",
-    "peerDependencies": {
-        "@emotion/react": "^11.4.1",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "homepage": "https://www.keycloakify.dev",
+    "dependencies": {
+        "tsafe": "^1.6.6"
     },
     "devDependencies": {
-        "@babel/core": "^7.0.0",
-        "@emotion/react": "^11.4.1",
-        "@types/memoizee": "^0.4.7",
+        "@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/builder-webpack5": "^6.5.13",
+        "@storybook/manager-webpack5": "^6.5.13",
+        "@storybook/react": "^6.5.13",
+        "eslint-plugin-storybook": "^0.6.7",
+        "@types/babel__generator": "^7.6.4",
+        "@types/make-fetch-happen": "^10.0.1",
         "@types/minimist": "^1.2.2",
-        "@types/node": "^17.0.25",
-        "@types/react": "18.0.9",
-        "copyfiles": "^2.4.1",
+        "@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",
         "husky": "^4.3.8",
         "lint-staged": "^11.0.0",
-        "prettier": "^2.3.0",
+        "magic-string": "^0.30.7",
+        "make-fetch-happen": "^11.0.3",
+        "powerhooks": "^1.0.10",
+        "prettier": "^3.2.5",
         "properties-parser": "^0.3.1",
-        "react": "18.1.0",
-        "rimraf": "^3.0.2",
-        "typescript": "^4.2.3"
-    },
-    "dependencies": {
-        "@octokit/rest": "^18.12.0",
-        "cheerio": "^1.0.0-rc.5",
-        "cli-select": "^1.1.2",
-        "evt": "^2.4.6",
-        "memoizee": "^0.4.15",
-        "minimal-polyfills": "^2.2.2",
-        "minimist": "^1.2.6",
-        "path-browserify": "^1.0.1",
-        "powerhooks": "^0.20.23",
-        "react-markdown": "^5.0.3",
-        "rfc4648": "^1.5.2",
-        "scripting-tools": "^0.19.13",
-        "tsafe": "^1.1.3",
-        "tss-react": "^4.3.4",
-        "zod": "^3.17.10"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "recast": "^0.23.3",
+        "run-exclusive": "^2.2.19",
+        "storybook-dark-mode": "^1.1.2",
+        "termost": "^v0.12.1",
+        "tsc-alias": "^1.8.10",
+        "tss-react": "^4.9.10",
+        "typescript": "^4.9.4",
+        "vite": "^5.2.11",
+        "vitest": "^1.6.0",
+        "yauzl": "^2.10.0",
+        "zod": "^3.17.10",
+        "evt": "^2.5.7",
+        "tsx": "^4.15.5"
     }
 }

renovate.json

@@ -1,6 +1,6 @@
 {
     "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-    "baseBranches": ["main", "landingpage"],
+    "baseBranches": ["main"],
     "extends": ["config:base"],
     "dependencyDashboard": false,
     "bumpVersion": "patch",
@@ -13,11 +13,11 @@
     "packageRules": [
         {
             "packagePatterns": ["*"],
-            "excludePackagePatterns": ["tss-react", "powerhooks", "tsafe", "evt"],
+            "excludePackagePatterns": ["tsafe", "evt"],
             "enabled": false
         },
         {
-            "packagePatterns": ["tss-react", "powerhooks", "tsafe", "evt"],
+            "packagePatterns": ["tsafe", "evt"],
             "matchUpdateTypes": ["minor", "patch"],
             "automerge": true,
             "automergeType": "branch",

scripts/build-storybook.ts

@@ -0,0 +1,16 @@
+import * as child_process from "child_process";
+import { copyKeycloakResourcesToStorybookStaticDir } from "./copyKeycloakResourcesToStorybookStaticDir";
+
+(async () => {
+    run("yarn build");
+
+    await copyKeycloakResourcesToStorybookStaticDir();
+
+    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,176 @@
+import * as child_process from "child_process";
+import * as fs from "fs";
+import { join } 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) || fileBasename.endsWith(".node")) {
+            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 });
+
+{
+    let hasBeenPatched = false;
+
+    fs.readdirSync(join("dist", "bin")).forEach(fileBasename => {
+        if (fileBasename !== "main.js" && !fileBasename.endsWith(".index.js")) {
+            return;
+        }
+
+        const { hasBeenPatched: hasBeenPatched_i } = patchDeprecatedBufferApiUsage(
+            join("dist", "bin", fileBasename)
+        );
+
+        if (hasBeenPatched_i) {
+            hasBeenPatched = true;
+        }
+    });
+
+    assert(hasBeenPatched);
+}
+
+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"
+    )}`
+);
+
+fs.readdirSync(join("dist", "ncc_out")).forEach(fileBasename => {
+    assert(!fileBasename.endsWith(".index.js"));
+    assert(!fileBasename.endsWith(".node"));
+});
+
+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 });
+
+{
+    const { hasBeenPatched } = patchDeprecatedBufferApiUsage(
+        join("dist", "vite-plugin", "index.js")
+    );
+
+    assert(hasBeenPatched);
+}
+
+fs.rmSync(join("dist", "src"), { recursive: true, force: true });
+
+fs.cpSync("src", join("dist", "src"), { recursive: true });
+
+transformCodebase({
+    srcDirPath: join("stories"),
+    destDirPath: join("dist", "stories"),
+    transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+        if (!fileRelativePath.endsWith(".stories.tsx")) {
+            return undefined;
+        }
+
+        return { modifiedSourceCode: sourceCode };
+    }
+});
+
+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);`
+    );
+
+    fs.writeFileSync(filePath, Buffer.from(after, "utf8"));
+
+    const hasBeenPatched = after !== before;
+
+    return { hasBeenPatched };
+}

scripts/copyKeycloakResourcesToStorybookStaticDir.ts

@@ -0,0 +1,18 @@
+import { join as pathJoin } from "path";
+import { copyKeycloakResourcesToPublic } from "../src/bin/shared/copyKeycloakResourcesToPublic";
+import { getProxyFetchOptions } from "../src/bin/tools/fetchProxyOptions";
+import { LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT } from "../src/bin/shared/constants";
+
+export async function copyKeycloakResourcesToStorybookStaticDir() {
+    await copyKeycloakResourcesToPublic({
+        buildContext: {
+            cacheDirPath: pathJoin(__dirname, "..", "node_modules", ".cache", "scripts"),
+            fetchOptions: getProxyFetchOptions({
+                npmConfigGetCwd: pathJoin(__dirname, "..")
+            }),
+            loginThemeResourcesFromKeycloakVersion:
+                LOGIN_THEME_RESOURCES_FROM_KEYCLOAK_VERSION_DEFAULT,
+            publicDirPath: pathJoin(__dirname, "..", ".storybook", "static")
+        }
+    });
+}

scripts/dump-keycloak-realm.ts

@@ -0,0 +1,92 @@
+import { CONTAINER_NAME } 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";
+import { Deferred } from "evt/tools/Deferred";
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+
+(async () => {
+    {
+        const dCompleted = new Deferred<void>();
+
+        const child = child_process.spawn(
+            "docker",
+            [
+                ...["exec", CONTAINER_NAME],
+                ...["/opt/keycloak/bin/kc.sh", "export"],
+                ...["--dir", "/tmp"],
+                ...["--realm", "myrealm"],
+                ...["--users", "realm_file"]
+            ],
+            { shell: true }
+        );
+
+        let output = "";
+
+        const onExit = (code: number | null) => {
+            dCompleted.reject(new Error(`Exited with code ${code}`));
+        };
+
+        child.on("exit", onExit);
+
+        child.stdout.on("data", data => {
+            const outputStr = data.toString("utf8");
+
+            if (outputStr.includes("Export finished successfully")) {
+                child.removeListener("exit", onExit);
+
+                child.kill();
+
+                dCompleted.resolve();
+            }
+
+            output += outputStr;
+        });
+
+        child.stderr.on("data", data => (output += chalk.red(data.toString("utf8"))));
+
+        try {
+            await dCompleted.pr;
+        } catch (error) {
+            assert(is<Error>(error));
+
+            console.log(chalk.red(error.message));
+
+            console.log(output);
+
+            process.exit(1);
+        }
+    }
+
+    const keycloakMajorVersionNumber = SemVer.parse(
+        child_process
+            .execSync(`docker inspect --format '{{.Config.Image}}' ${CONTAINER_NAME}`)
+            .toString("utf8")
+            .trim()
+            .split(":")[1]
+    ).major;
+
+    const targetFilePath = pathRelative(
+        process.cwd(),
+        pathJoin(
+            __dirname,
+            "..",
+            "src",
+            "bin",
+            "start-keycloak",
+            `myrealm-realm-${keycloakMajorVersionNumber}.json`
+        )
+    );
+
+    run(`docker cp ${CONTAINER_NAME}:/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,725 @@
+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 { assert } from "tsafe/assert";
+import { same } from "evt/tools/inDepth";
+import { crawl } from "../src/bin/tools/crawl";
+import { downloadKeycloakDefaultTheme } from "../src/bin/shared/downloadKeycloakDefaultTheme";
+import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRootDirPath";
+import { deepAssign } from "../src/tools/deepAssign";
+import { getProxyFetchOptions } from "../src/bin/tools/fetchProxyOptions";
+import {
+    THEME_TYPES,
+    LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1
+} from "../src/bin/shared/constants";
+
+// 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 thisCodebaseRootDirPath = getThisCodebaseRootDirPath();
+
+    type Dictionary = { [idiomId: string]: string };
+
+    const record: { [themeType: string]: { [language: string]: Dictionary } } = {};
+
+    for (const themeType of THEME_TYPES) {
+        const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
+            keycloakVersion: (() => {
+                switch (themeType) {
+                    case "login":
+                        return "25.0.4";
+                    case "account":
+                        return LAST_KEYCLOAK_VERSION_WITH_ACCOUNT_V1;
+                }
+            })(),
+            buildContext: {
+                cacheDirPath: pathJoin(
+                    thisCodebaseRootDirPath,
+                    "node_modules",
+                    ".cache",
+                    "keycloakify"
+                ),
+                fetchOptions: getProxyFetchOptions({
+                    npmConfigGetCwd: thisCodebaseRootDirPath
+                })
+            }
+        });
+
+        {
+            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 [, themeType_here, language] = match;
+
+                if (themeType_here !== themeType) {
+                    return;
+                }
+
+                (record[themeType] ??= {})[language.replace(/_/g, "-")] =
+                    Object.fromEntries(
+                        Object.entries(
+                            propertiesParser.parse(
+                                fs
+                                    .readFileSync(pathJoin(baseThemeDirPath, filePath))
+                                    .toString("utf8")
+                            ) as Record<string, string>
+                        )
+                            .map(([key, value]) => [key, value.replace(/''/g, "'")])
+                            .map(([key, value]) => [
+                                key === "locale_pt_BR" ? "locale_pt-BR" : key,
+                                value
+                            ])
+                            .map(([key, value]) => [
+                                key,
+                                key === "termsText" ? "" : value
+                            ])
+                    );
+            });
+        }
+
+        const recordForThemeType = record[themeType];
+
+        const languages = Object.keys(recordForThemeType);
+
+        const keycloakifyExtraMessages = (() => {
+            switch (themeType) {
+                case "login":
+                    return keycloakifyExtraMessages_login;
+                case "account":
+                    return keycloakifyExtraMessages_account;
+            }
+            assert(false);
+        })();
+
+        /* Migration helper
+
+        console.log({ themeType });
+
+        {
+
+            const all = new Set<string>();
+
+            languages.forEach(languages => all.add(languages));
+            const currentlySupportedLanguages = Object.keys(keycloakifyExtraMessages);
+            currentlySupportedLanguages.forEach(languages => all.add(languages));
+
+            all.forEach(language => {
+                console.log([
+                    `"${language}": `,
+                    `isInLanguages: ${languages.includes(language)}`,
+                    `isInKeycloakifyExtraMessages: ${currentlySupportedLanguages.includes(language)}`
+                ].join(" "))
+            });
+
+        }
+        */
+
+        assert(
+            same(languages, Object.keys(keycloakifyExtraMessages), {
+                takeIntoAccountArraysOrdering: false
+            })
+        );
+
+        deepAssign({
+            target: recordForThemeType,
+            source: keycloakifyExtraMessages
+        });
+
+        const messagesDirPath = pathJoin(
+            thisCodebaseRootDirPath,
+            "src",
+            themeType,
+            "i18n",
+            "messages_defaultSet"
+        );
+
+        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(messagesDirPath, `${language}.ts`);
+
+            fs.mkdirSync(pathDirname(filePath), { recursive: true });
+
+            fs.writeFileSync(
+                filePath,
+                Buffer.from(
+                    [
+                        generatedFileHeader,
+                        "",
+                        "/* spell-checker: disable */",
+                        `const messages= ${JSON.stringify(
+                            recordForThemeType[language],
+                            null,
+                            2
+                        )};`,
+                        "",
+                        "export default messages;",
+                        "/* spell-checker: enable */"
+                    ].join("\n"),
+                    "utf8"
+                )
+            );
+
+            //console.log(`${filePath} wrote`);
+        });
+
+        fs.writeFileSync(
+            pathJoin(messagesDirPath, "index.ts"),
+            Buffer.from(
+                [
+                    generatedFileHeader,
+                    `import * as en from "./en";`,
+                    "",
+                    "export async function fetchMessages_defaultSet(currentLanguageTag: string) {",
+                    "    const { default: messages_defaultSet } = await (() => {",
+                    "        switch (currentLanguageTag) {",
+                    `            case "en": return en;`,
+                    ...languages
+                        .filter(language => language !== "en")
+                        .map(
+                            language =>
+                                `            case "${language}": return import("./${language}");`
+                        ),
+                    '            default: return { "default": {} };',
+                    "        }",
+                    "    })();",
+                    "    return messages_defaultSet;",
+                    "}"
+                ].join("\n"),
+                "utf8"
+            )
+        );
+    }
+}
+
+const keycloakifyExtraMessages_login: Record<
+    | "en"
+    | "ar"
+    | "ca"
+    | "cs"
+    | "da"
+    | "de"
+    | "el"
+    | "es"
+    | "fa"
+    | "fi"
+    | "fr"
+    | "hu"
+    | "it"
+    | "ja"
+    | "lt"
+    | "lv"
+    | "nl"
+    | "no"
+    | "pl"
+    | "pt"
+    | "pt-BR"
+    | "ru"
+    | "sk"
+    | "sv"
+    | "th"
+    | "tr"
+    | "uk"
+    | "ka"
+    | "zh-CN"
+    | "zh-TW",
+    Record<
+        | "shouldBeEqual"
+        | "shouldBeDifferent"
+        | "shouldMatchPattern"
+        | "mustBeAnInteger"
+        | "notAValidOption"
+        | "selectAnOption"
+        | "remove"
+        | "addValue"
+        | "languages",
+        string
+    >
+> = {
+    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",
+        selectAnOption: "Select an option",
+        remove: "Remove",
+        addValue: "Add value",
+        languages: "Languages"
+    },
+    /* spell-checker: disable */
+    ar: {
+        shouldBeEqual: "{0} يجب أن يكون مساويًا لـ {1}",
+        shouldBeDifferent: "{0} يجب أن يكون مختلفًا عن {1}",
+        shouldMatchPattern: "`/يجب أن يطابق النمط: `/{0}/",
+        mustBeAnInteger: "يجب أن يكون عددًا صحيحًا",
+        notAValidOption: "ليس خيارًا صالحًا",
+        selectAnOption: "اختر خيارًا",
+        remove: "إزالة",
+        addValue: "أضف قيمة",
+        languages: "اللغات"
+    },
+    ca: {
+        shouldBeEqual: "{0} hauria de ser igual a {1}",
+        shouldBeDifferent: "{0} hauria de ser diferent de {1}",
+        shouldMatchPattern: "El patró hauria de coincidir: `/{0}/`",
+        mustBeAnInteger: "Ha de ser un enter",
+        notAValidOption: "No és una opció vàlida",
+        selectAnOption: "Selecciona una opció",
+        remove: "Elimina",
+        addValue: "Afegeix valor",
+        languages: "Idiomes"
+    },
+    cs: {
+        shouldBeEqual: "{0} by měl být roven {1}",
+        shouldBeDifferent: "{0} by měl být odlišný od {1}",
+        shouldMatchPattern: "Vzor by měl odpovídat: `/{0}/`",
+        mustBeAnInteger: "Musí být celé číslo",
+        notAValidOption: "Není platná možnost",
+        selectAnOption: "Vyberte možnost",
+        remove: "Odstranit",
+        addValue: "Přidat hodnotu",
+        languages: "Jazyky"
+    },
+    da: {
+        shouldBeEqual: "{0} bør være lig med {1}",
+        shouldBeDifferent: "{0} bør være forskellig fra {1}",
+        shouldMatchPattern: "Mønsteret bør matche: `/{0}/`",
+        mustBeAnInteger: "Skal være et heltal",
+        notAValidOption: "Ikke en gyldig mulighed",
+        selectAnOption: "Vælg en mulighed",
+        remove: "Fjern",
+        addValue: "Tilføj værdi",
+        languages: "Sprog"
+    },
+    de: {
+        shouldBeEqual: "{0} sollte gleich {1} sein",
+        shouldBeDifferent: "{0} sollte sich von {1} unterscheiden",
+        shouldMatchPattern: "Muster sollte übereinstimmen: `/{0}/`",
+        mustBeAnInteger: "Muss eine ganze Zahl sein",
+        notAValidOption: "Keine gültige Option",
+        selectAnOption: "Wählen Sie eine Option",
+        remove: "Entfernen",
+        addValue: "Wert hinzufügen",
+        languages: "Sprachen"
+    },
+    el: {
+        shouldBeEqual: "Το {0} πρέπει να είναι ίσο με {1}",
+        shouldBeDifferent: "Το {0} πρέπει να διαφέρει από το {1}",
+        shouldMatchPattern: "Το πρότυπο πρέπει να ταιριάζει: `/{0}/`",
+        mustBeAnInteger: "Πρέπει να είναι ακέραιος",
+        notAValidOption: "Δεν είναι μια έγκυρη επιλογή",
+        selectAnOption: "Επιλέξτε μια επιλογή",
+        remove: "Αφαίρεση",
+        addValue: "Προσθήκη τιμής",
+        languages: "Γλώσσες"
+    },
+    es: {
+        shouldBeEqual: "{0} debería ser igual a {1}",
+        shouldBeDifferent: "{0} debería ser diferente a {1}",
+        shouldMatchPattern: "El patrón debería coincidir: `/{0}/`",
+        mustBeAnInteger: "Debe ser un número entero",
+        notAValidOption: "No es una opción válida",
+        selectAnOption: "Selecciona una opción",
+        remove: "Eliminar",
+        addValue: "Añadir valor",
+        languages: "Idiomas"
+    },
+    fa: {
+        shouldBeEqual: "{0} باید برابر باشد با {1}",
+        shouldBeDifferent: "{0} باید متفاوت باشد از {1}",
+        shouldMatchPattern: "الگو باید مطابقت داشته باشد: `/{0}/`",
+        mustBeAnInteger: "باید یک عدد صحیح باشد",
+        notAValidOption: "یک گزینه معتبر نیست",
+        selectAnOption: "یک گزینه انتخاب کنید",
+        remove: "حذف",
+        addValue: "افزودن مقدار",
+        languages: "زبان‌ها"
+    },
+    fi: {
+        shouldBeEqual: "{0} pitäisi olla yhtä suuri kuin {1}",
+        shouldBeDifferent: "{0} pitäisi olla erilainen kuin {1}",
+        shouldMatchPattern: "Mallin tulisi vastata: `/{0}/`",
+        mustBeAnInteger: "On oltava kokonaisluku",
+        notAValidOption: "Ei ole kelvollinen vaihtoehto",
+        selectAnOption: "Valitse vaihtoehto",
+        remove: "Poista",
+        addValue: "Lisää arvo",
+        languages: "Kielet"
+    },
+    fr: {
+        shouldBeEqual: "{0} devrait être égal à {1}",
+        shouldBeDifferent: "{0} devrait être différent de {1}",
+        shouldMatchPattern: "Le motif devrait correspondre: `/{0}/`",
+        mustBeAnInteger: "Doit être un entier",
+        notAValidOption: "Pas une option valide",
+        selectAnOption: "Sélectionnez une option",
+        remove: "Supprimer",
+        addValue: "Ajouter une valeur",
+        languages: "Langues"
+    },
+    hu: {
+        shouldBeEqual: "{0} egyenlő kell legyen {1}-vel",
+        shouldBeDifferent: "{0} különbözőnek kell lennie, mint {1}",
+        shouldMatchPattern: "A mintának egyeznie kell: `/{0}/`",
+        mustBeAnInteger: "Egész számnak kell lennie",
+        notAValidOption: "Nem érvényes opció",
+        selectAnOption: "Válasszon egy lehetőséget",
+        remove: "Eltávolítás",
+        addValue: "Érték hozzáadása",
+        languages: "Nyelvek"
+    },
+    it: {
+        shouldBeEqual: "{0} dovrebbe essere uguale a {1}",
+        shouldBeDifferent: "{0} dovrebbe essere diverso da {1}",
+        shouldMatchPattern: "Il modello dovrebbe corrispondere: `/{0}/`",
+        mustBeAnInteger: "Deve essere un numero intero",
+        notAValidOption: "Non è un'opzione valida",
+        selectAnOption: "Seleziona un'opzione",
+        remove: "Rimuovi",
+        addValue: "Aggiungi valore",
+        languages: "Lingue"
+    },
+    ja: {
+        shouldBeEqual: "{0} は {1} と等しい必要があります",
+        shouldBeDifferent: "{0} は {1} と異なる必要があります",
+        shouldMatchPattern: "パターンは一致する必要があります: `/{0}/`",
+        mustBeAnInteger: "整数である必要があります",
+        notAValidOption: "有効なオプションではありません",
+        selectAnOption: "オプションを選択",
+        remove: "削除",
+        addValue: "値を追加",
+        languages: "言語"
+    },
+    lt: {
+        shouldBeEqual: "{0} turėtų būti lygus {1}",
+        shouldBeDifferent: "{0} turėtų skirtis nuo {1}",
+        shouldMatchPattern: "Šablonas turėtų atitikti: `/{0}/`",
+        mustBeAnInteger: "Turi būti sveikasis skaičius",
+        notAValidOption: "Netinkama parinktis",
+        selectAnOption: "Pasirinkite parinktį",
+        remove: "Pašalinti",
+        addValue: "Pridėti reikšmę",
+        languages: "Kalbos"
+    },
+    lv: {
+        shouldBeEqual: "{0} jābūt vienādam ar {1}",
+        shouldBeDifferent: "{0} jābūt atšķirīgam no {1}",
+        shouldMatchPattern: "Mustrim jāsakrīt: `/{0}/`",
+        mustBeAnInteger: "Jābūt veselam skaitlim",
+        notAValidOption: "Nav derīga opcija",
+        selectAnOption: "Izvēlieties opciju",
+        remove: "Noņemt",
+        addValue: "Pievienot vērtību",
+        languages: "Valodas"
+    },
+    nl: {
+        shouldBeEqual: "{0} moet gelijk zijn aan {1}",
+        shouldBeDifferent: "{0} moet verschillen van {1}",
+        shouldMatchPattern: "Patroon moet overeenkomen: `/{0}/`",
+        mustBeAnInteger: "Moet een geheel getal zijn",
+        notAValidOption: "Geen geldige optie",
+        selectAnOption: "Selecteer een optie",
+        remove: "Verwijderen",
+        addValue: "Waarde toevoegen",
+        languages: "Talen"
+    },
+    no: {
+        shouldBeEqual: "{0} skal være lik {1}",
+        shouldBeDifferent: "{0} skal være forskjellig fra {1}",
+        shouldMatchPattern: "Mønsteret skal matche: `/{0}/`",
+        mustBeAnInteger: "Må være et heltall",
+        notAValidOption: "Ikke et gyldig alternativ",
+        selectAnOption: "Velg et alternativ",
+        remove: "Fjern",
+        addValue: "Legg til verdi",
+        languages: "Språk"
+    },
+    pl: {
+        shouldBeEqual: "{0} powinno być równe {1}",
+        shouldBeDifferent: "{0} powinno być różne od {1}",
+        shouldMatchPattern: "Wzór pow inien pasować: `/{0}/`",
+        mustBeAnInteger: "Musi być liczbą całkowitą",
+        notAValidOption: "Nieprawidłowa opcja",
+        selectAnOption: "Wybierz opcję",
+        remove: "Usuń",
+        addValue: "Dodaj wartość",
+        languages: "Języki"
+    },
+    pt: {
+        shouldBeEqual: "{0} deve ser igual a {1}",
+        shouldBeDifferent: "{0} deve ser diferente de {1}",
+        shouldMatchPattern: "O padrão deve corresponder: `/{0}/`",
+        mustBeAnInteger: "Deve ser um número inteiro",
+        notAValidOption: "Não é uma opção válida",
+        selectAnOption: "Selecione uma opção",
+        remove: "Remover",
+        addValue: "Adicionar valor",
+        languages: "Idiomas"
+    },
+    "pt-BR": {
+        shouldBeEqual: "{0} deve ser igual a {1}",
+        shouldBeDifferent: "{0} deve ser diferente de {1}",
+        shouldMatchPattern: "O padrão deve corresponder: `/{0}/`",
+        mustBeAnInteger: "Deve ser um número inteiro",
+        notAValidOption: "Não é uma opção válida",
+        selectAnOption: "Selecione uma opção",
+        remove: "Remover",
+        addValue: "Adicionar valor",
+        languages: "Idiomas"
+    },
+    ru: {
+        shouldBeEqual: "{0} должно быть равно {1}",
+        shouldBeDifferent: "{0} должно отличаться от {1}",
+        shouldMatchPattern: "Шаблон должен соответствовать: `/{0}/`",
+        mustBeAnInteger: "Должно быть целым числом",
+        notAValidOption: "Недопустимый вариант",
+        selectAnOption: "Выберите вариант",
+        remove: "Удалить",
+        addValue: "Добавить значение",
+        languages: "Языки"
+    },
+    sk: {
+        shouldBeEqual: "{0} by mal byť rovnaký ako {1}",
+        shouldBeDifferent: "{0} by mal byť odlišný od {1}",
+        shouldMatchPattern: "Vzor by mal zodpovedať: `/{0}/`",
+        mustBeAnInteger: "Musí byť celé číslo",
+        notAValidOption: "Nie je platná možnosť",
+        selectAnOption: "Vyberte možnosť",
+        remove: "Odstrániť",
+        addValue: "Pridať hodnotu",
+        languages: "Jazyky"
+    },
+    sv: {
+        shouldBeEqual: "{0} bör vara lika med {1}",
+        shouldBeDifferent: "{0} bör vara annorlunda än {1}",
+        shouldMatchPattern: "Mönstret bör matcha: `/{0}/`",
+        mustBeAnInteger: "Måste vara ett heltal",
+        notAValidOption: "Inte ett giltigt alternativ",
+        selectAnOption: "Välj ett alternativ",
+        remove: "Ta bort",
+        addValue: "Lägg till värde",
+        languages: "Språk"
+    },
+    th: {
+        shouldBeEqual: "{0} ควรเท่ากับ {1}",
+        shouldBeDifferent: "{0} ควรแตกต่างจาก {1}",
+        shouldMatchPattern: "รูปแบบควรตรงกับ: `/{0}/`",
+        mustBeAnInteger: "ต้องเป็นจำนวนเต็ม",
+        notAValidOption: "ไม่ใช่ตัวเลือกที่ถูกต้อง",
+        selectAnOption: "เลือกตัวเลือก",
+        remove: "ลบ",
+        addValue: "เพิ่มค่า",
+        languages: "ภาษา"
+    },
+    tr: {
+        shouldBeEqual: "{0} {1} eşit olmalıdır",
+        shouldBeDifferent: "{0} {1} farklı olmalıdır",
+        shouldMatchPattern: "Desen eşleşmelidir: `/{0}/`",
+        mustBeAnInteger: "Tam sayı olmalıdır",
+        notAValidOption: "Geçerli bir seçenek değil",
+        selectAnOption: "Bir seçenek seçin",
+        remove: "Kaldır",
+        addValue: "Değer ekle",
+        languages: "Diller"
+    },
+    uk: {
+        shouldBeEqual: "{0} повинно бути рівним {1}",
+        shouldBeDifferent: "{0} повинно відрізнятися від {1}",
+        shouldMatchPattern: "Шаблон повинен відповідати: `/{0}/`",
+        mustBeAnInteger: "Повинно бути цілим числом",
+        notAValidOption: "Не є дійсною опцією",
+        selectAnOption: "Виберіть опцію",
+        remove: "Видалити",
+        addValue: "Додати значення",
+        languages: "Мови"
+    },
+    ka: {
+        shouldBeEqual: "{0} უნდა იყოს ტოლი {1}-სთვის",
+        shouldBeDifferent: "{0} უნდა იყოს სხვა {1}-სთვის",
+        shouldMatchPattern: "შაბლონს უნდა ემთხვევა: `/{0}/`",
+        mustBeAnInteger: "უნდა იყოს მთელი რიცხვი",
+        notAValidOption: "არასწორი ვარიანტი",
+        selectAnOption: "აირჩიეთ ვარიანტი",
+        remove: "წაშალეთ",
+        addValue: "დაამატეთ მნიშვნელობა",
+        languages: "ენები"
+    },
+    "zh-CN": {
+        shouldBeEqual: "{0} 应该等于 {1}",
+        shouldBeDifferent: "{0} 应该不同于 {1}",
+        shouldMatchPattern: "模式应匹配: `/{0}/`",
+        mustBeAnInteger: "必须是整数",
+        notAValidOption: "不是有效选项",
+        selectAnOption: "选择一个选项",
+        remove: "移除",
+        addValue: "添加值",
+        languages: "语言"
+    },
+    "zh-TW": {
+        shouldBeEqual: "{0} 應該等於 {1}",
+        shouldBeDifferent: "{0} 應該不同於 {1}",
+        shouldMatchPattern: "模式應匹配: `/{0}/`",
+        mustBeAnInteger: "必須是整數",
+        notAValidOption: "不是有效選項",
+        selectAnOption: "選擇一個選項",
+        remove: "移除",
+        addValue: "添加值",
+        languages: "語言"
+    }
+    /* spell-checker: enable */
+};
+
+const keycloakifyExtraMessages_account: Record<
+    | "en"
+    | "ar"
+    | "ca"
+    | "cs"
+    | "da"
+    | "de"
+    | "es"
+    | "fi"
+    | "fr"
+    | "hu"
+    | "it"
+    | "ja"
+    | "lt"
+    | "lv"
+    | "nl"
+    | "no"
+    | "pl"
+    | "pt-BR"
+    | "ru"
+    | "sk"
+    | "sv"
+    | "tr"
+    | "zh-CN",
+    Record<"newPasswordSameAsOld" | "passwordConfirmNotMatch", string>
+> = {
+    en: {
+        newPasswordSameAsOld: "New password must be different from the old one",
+        passwordConfirmNotMatch: "Password confirmation does not match"
+    },
+    /* spell-checker: disable */
+    ar: {
+        newPasswordSameAsOld: "يجب أن تكون كلمة المرور الجديدة مختلفة عن القديمة",
+        passwordConfirmNotMatch: "تأكيد كلمة المرور لا يتطابق"
+    },
+    ca: {
+        newPasswordSameAsOld: "La nova contrasenya ha de ser diferent de l'anterior",
+        passwordConfirmNotMatch: "La confirmació de la contrasenya no coincideix"
+    },
+    cs: {
+        newPasswordSameAsOld: "Nové heslo musí být odlišné od starého",
+        passwordConfirmNotMatch: "Potvrzení hesla se neshoduje"
+    },
+    da: {
+        newPasswordSameAsOld: "Det nye kodeord skal være forskelligt fra det gamle",
+        passwordConfirmNotMatch: "Adgangskodebekræftelse matcher ikke"
+    },
+    de: {
+        newPasswordSameAsOld: "Das neue Passwort muss sich vom alten unterscheiden",
+        passwordConfirmNotMatch: "Passwortbestätigung stimmt nicht überein"
+    },
+    es: {
+        newPasswordSameAsOld: "La nueva contraseña debe ser diferente de la anterior",
+        passwordConfirmNotMatch: "La confirmación de la contraseña no coincide"
+    },
+    fi: {
+        newPasswordSameAsOld: "Uusi salasana on oltava erilainen kuin vanha",
+        passwordConfirmNotMatch: "Salasanan vahvistus ei täsmää"
+    },
+    fr: {
+        newPasswordSameAsOld: "Le nouveau mot de passe doit être différent de l'ancien",
+        passwordConfirmNotMatch: "La confirmation du mot de passe ne correspond pas"
+    },
+    hu: {
+        newPasswordSameAsOld: "Az új jelszónak különböznie kell az előzőtől",
+        passwordConfirmNotMatch: "A jelszó megerősítése nem egyezik"
+    },
+    it: {
+        newPasswordSameAsOld:
+            "La nuova password deve essere diversa da quella precedente",
+        passwordConfirmNotMatch: "La conferma della password non corrisponde"
+    },
+    ja: {
+        newPasswordSameAsOld: "新しいパスワードは古いパスワードと異なる必要があります",
+        passwordConfirmNotMatch: "パスワード確認が一致しません"
+    },
+    lt: {
+        newPasswordSameAsOld: "Naujas slaptažodis turi skirtis nuo seno",
+        passwordConfirmNotMatch: "Slaptažodžio patvirtinimas neatitinka"
+    },
+    lv: {
+        newPasswordSameAsOld: "Jaunajam parolam jābūt atšķirīgam no vecā",
+        passwordConfirmNotMatch: "Paroles apstiprināšana neatbilst"
+    },
+    nl: {
+        newPasswordSameAsOld: "Het nieuwe wachtwoord moet verschillend zijn van het oude",
+        passwordConfirmNotMatch: "Wachtwoordbevestiging komt niet overeen"
+    },
+    no: {
+        newPasswordSameAsOld: "Det nye passordet må være forskjellig fra det gamle",
+        passwordConfirmNotMatch: "Passordbekreftelsen stemmer ikke"
+    },
+    pl: {
+        newPasswordSameAsOld: "Nowe hasło musi być inne niż stare",
+        passwordConfirmNotMatch: "Potwierdzenie hasła nie pasuje"
+    },
+    "pt-BR": {
+        newPasswordSameAsOld: "A nova senha deve ser diferente da antiga",
+        passwordConfirmNotMatch: "A confirmação da senha não corresponde"
+    },
+    ru: {
+        newPasswordSameAsOld: "Новый пароль должен отличаться от старого",
+        passwordConfirmNotMatch: "Подтверждение пароля не совпадает"
+    },
+    sk: {
+        newPasswordSameAsOld: "Nové heslo musí byť odlišné od starého",
+        passwordConfirmNotMatch: "Potvrdenie hesla sa nezhoduje"
+    },
+    sv: {
+        newPasswordSameAsOld: "Det nya lösenordet måste skilja sig från det gamla",
+        passwordConfirmNotMatch: "Lösenordsbekräftelsen matchar inte"
+    },
+    tr: {
+        newPasswordSameAsOld: "Yeni şifre eskisinden farklı olmalıdır",
+        passwordConfirmNotMatch: "Şifre doğrulama eşleşmiyor"
+    },
+    "zh-CN": {
+        newPasswordSameAsOld: "新密码必须与旧密码不同",
+        passwordConfirmNotMatch: "密码确认不匹配"
+    }
+    /* spell-checker: enable */
+};
+
+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,158 @@
+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";
+import * as os from "os";
+
+const singletonDependencies: string[] = ["react", "@types/react"];
+
+// For example [ "@emotion" ] it's more convenient than
+// having to list every sub emotion packages (@emotion/css @emotion/utils ...)
+// in singletonDependencies
+const namespaceSingletonDependencies: string[] = [];
+
+const rootDirPath = getThisCodebaseRootDirPath();
+
+const commonThirdPartyDeps = [
+    ...namespaceSingletonDependencies
+        .map(namespaceModuleName =>
+            fs
+                .readdirSync(pathJoin(rootDirPath, "node_modules", namespaceModuleName))
+                .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
+        )
+        .reduce((prev, curr) => [...prev, ...curr], []),
+    ...singletonDependencies
+];
+
+//NOTE: This is only required because of: https://github.com/garronej/ts-ci/blob/c0e207b9677523d4ec97fe672ddd72ccbb3c1cc4/README.md?plain=1#L54-L58
+{
+    let modifiedPackageJsonContent = fs
+        .readFileSync(pathJoin(rootDirPath, "package.json"))
+        .toString("utf8");
+
+    modifiedPackageJsonContent = (() => {
+        const o = JSON.parse(modifiedPackageJsonContent);
+
+        delete o.files;
+
+        return JSON.stringify(o, null, 2);
+    })();
+
+    modifiedPackageJsonContent = modifiedPackageJsonContent
+        .replace(/"dist\//g, '"')
+        .replace(/"\.\/dist\//g, '"./')
+        .replace(/"!dist\//g, '"!')
+        .replace(/"!\.\/dist\//g, '"!./');
+
+    modifiedPackageJsonContent = JSON.stringify(
+        { ...JSON.parse(modifiedPackageJsonContent), version: "0.0.0" },
+        null,
+        4
+    );
+
+    fs.writeFileSync(
+        pathJoin(rootDirPath, "dist", "package.json"),
+        Buffer.from(modifiedPackageJsonContent, "utf8")
+    );
+}
+
+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,
+            ...(os.platform() === "win32"
+                ? { USERPROFILE: yarnGlobalDirPath }
+                : { 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,55 @@
+import * as child_process from "child_process";
+import * as fs from "fs";
+import { join } from "path";
+import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange";
+import { crawl } from "../src/bin/tools/crawl";
+
+{
+    const dirPath = "node_modules";
+
+    try {
+        fs.rmSync(dirPath, { recursive: true, force: true });
+    } catch {
+        // NOTE: This is a workaround for windows
+        // we can't remove locked executables.
+
+        crawl({
+            dirPath,
+            returnedPathsType: "absolute"
+        }).forEach(filePath => {
+            try {
+                fs.rmSync(filePath, { force: true });
+            } catch (error) {
+                if (filePath.endsWith(".exe")) {
+                    return;
+                }
+                throw error;
+            }
+        });
+    }
+}
+
+fs.rmSync("dist", { recursive: true, force: true });
+fs.rmSync(".yarn_home", { recursive: true, force: true });
+
+run("yarn install");
+run("yarn build");
+
+const starterName = "keycloakify-starter";
+
+fs.rmSync(join("..", starterName, "node_modules"), {
+    recursive: true,
+    force: true
+});
+
+run("yarn install", { cwd: join("..", starterName) });
+
+run(`npx tsx ${join("scripts", "link-in-app.ts")} ${starterName}`);
+
+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,29 @@
+import * as child_process from "child_process";
+import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange";
+import { copyKeycloakResourcesToStorybookStaticDir } from "./copyKeycloakResourcesToStorybookStaticDir";
+
+(async () => {
+    run("yarn build");
+
+    await copyKeycloakResourcesToStorybookStaticDir();
+
+    {
+        const child = child_process.spawn("npx", ["start-storybook", "-p", "6006"], {
+            shell: true
+        });
+
+        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,40 @@
+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"], { shell: true });
+
+        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", "stories"], { ignoreInitial: true })
+        .on("all", async (event, path) => {
+            console.log(chalk.bold(`${event}: ${path}`));
+
+            await waitForDebounce();
+
+            runYarnBuild();
+        });
+}

src/PUBLIC_URL.ts

@@ -0,0 +1,21 @@
+import { BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR } 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).kcContext;
+
+    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}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}`;
+})();

src/account/DefaultPage.tsx

@@ -0,0 +1,41 @@
+import { lazy, Suspense } from "react";
+import { assert, type Equals } from "tsafe/assert";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "keycloakify/account/KcContext";
+import { I18n } from "keycloakify/account/i18n";
+
+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"));
+const FederatedIdentity = lazy(() => import("keycloakify/account/pages/FederatedIdentity"));
+
+export default function DefaultPage(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/KcContext/KcContext.ts

@@ -0,0 +1,310 @@
+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<
+    KcContextExtension extends { properties?: Record<string, string | undefined> },
+    KcContextExtensionPerPage extends Record<string, Record<string, unknown>>
+> = ValueOf<{
+    [PageId in keyof KcContextExtensionPerPage | KcContext["pageId"]]: Extract<
+        KcContext,
+        { pageId: PageId }
+    > extends never
+        ? KcContext.Common &
+              KcContextExtension & {
+                  pageId: PageId;
+              } & KcContextExtensionPerPage[PageId]
+        : Extract<KcContext, { pageId: PageId }> &
+              KcContextExtension &
+              KcContextExtensionPerPage[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: {};
+        "x-keycloakify": {
+            messages: Record<string, string>;
+        };
+    };
+
+    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;
+                getAlgorithmKey: () => string;
+            } & (
+                | {
+                      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,69 @@
+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<
+    KcContextExtension extends { properties?: Record<string, string | undefined> },
+    KcContextExtensionPerPage extends Record<`${string}.ftl`, Record<string, unknown>>
+>(params: {
+    kcContextExtension: KcContextExtension;
+    kcContextExtensionPerPage: KcContextExtensionPerPage;
+    overrides?: DeepPartial<KcContextExtension & KcContextBase.Common>;
+    overridesPerPage?: {
+        [PageId in AccountThemePageId | keyof KcContextExtensionPerPage]?: DeepPartial<
+            Extract<
+                ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>,
+                { pageId: PageId }
+            >
+        >;
+    };
+}) {
+    const {
+        kcContextExtension,
+        kcContextExtensionPerPage,
+        overrides: overrides_global,
+        overridesPerPage: overridesPerPage_global
+    } = params;
+
+    type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;
+
+    function getKcContextMock<
+        PageId extends AccountThemePageId | keyof KcContextExtensionPerPage
+    >(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
+            }
+        );
+
+        [
+            kcContextExtension,
+            kcContextExtensionPerPage[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,193 @@
+import "keycloakify/tools/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: {},
+    "x-keycloakify": {
+        messages: {}
+    }
+};
+
+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,
+                getAlgorithmKey: () => "SHA1"
+            }
+        },
+        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/Template.tsx

@@ -0,0 +1,162 @@
+import { useEffect } from "react";
+import { assert } from "keycloakify/tools/assert";
+import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
+import { useSetClassName } from "keycloakify/tools/useSetClassName";
+import type { TemplateProps } from "keycloakify/account/TemplateProps";
+import type { I18n } from "./i18n";
+import type { KcContext } from "./KcContext";
+
+export default function Template(props: TemplateProps<KcContext, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, active, classes, children } = props;
+
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+
+    const { msg, msgStr, getChangeLocaleUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
+
+    const { locale, url, features, realm, message, referrer } = kcContext;
+
+    useEffect(() => {
+        document.title = msgStr("accountManagementTitle");
+    }, []);
+
+    useSetClassName({
+        qualifiedName: "html",
+        className: kcClsx("kcHtmlClass")
+    });
+
+    useSetClassName({
+        qualifiedName: "body",
+        className: clsx("admin-console", "user", kcClsx("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">
+                                            <a href="#" id="kc-current-locale-link">
+                                                {labelBySupportedLanguageTag[currentLanguageTag]}
+                                            </a>
+                                            <ul>
+                                                {locale.supported.map(({ languageTag }) => (
+                                                    <li key={languageTag} className="kc-dropdown-item">
+                                                        <a href={getChangeLocaleUrl(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"
+                                dangerouslySetInnerHTML={{
+                                    __html: message.summary
+                                }}
+                            />
+                        </div>
+                    )}
+
+                    {children}
+                </div>
+            </div>
+        </>
+    );
+}

src/account/TemplateProps.ts

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

src/account/i18n/GenericI18n.tsx

@@ -0,0 +1,6 @@
+import type { GenericI18n_noJsx } from "./i18n";
+
+export type GenericI18n<MessageKey extends string> = GenericI18n_noJsx<MessageKey> & {
+    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
+};

src/account/i18n/i18n.tsx

@@ -0,0 +1,250 @@
+import "keycloakify/tools/Object.fromEntries";
+import { assert } from "tsafe/assert";
+import messages_defaultSet_fallbackLanguage from "./messages_defaultSet/en";
+import { fetchMessages_defaultSet } from "./messages_defaultSet";
+import type { KcContext } from "../KcContext";
+import { FALLBACK_LANGUAGE_TAG } from "keycloakify/bin/shared/constants";
+import { id } from "tsafe/id";
+
+export type KcContextLike = {
+    locale?: {
+        currentLanguageTag: string;
+        supported: { languageTag: string; url: string; label: string }[];
+    };
+    "x-keycloakify": {
+        messages: Record<string, string>;
+    };
+};
+
+assert<KcContext extends KcContextLike ? true : false>();
+
+export type GenericI18n_noJsx<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
+     */
+    getChangeLocaleUrl: (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"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "impersonateTitleHtml": "<strong>{0}</strong> Impersonate User",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * msgStr("access-denied") === "Access denied"
+     * msgStr("not-a-message-key") Throws an error
+     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
+     * msgStr("${bar}", "<strong>c</strong>") === "Bar &lt;strong&gt;XXX&lt;/strong&gt;"
+     *  The html in the arg is partially escaped for security reasons, it might come from an untrusted source, it's not safe to render it as html.
+     */
+    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",
+     *   }
+     * }
+     *
+     * advancedMsgStr("${access-denied}") === advancedMsgStr("access-denied") === msgStr("access-denied") === "Access denied"
+     * advancedMsgStr("${not-a-message-key}") === advancedMsgStr("not-a-message-key") === "not-a-message-key"
+     */
+    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
+
+    /**
+     * Initially the messages are in english (fallback language).
+     * The translations in the current language are being fetched dynamically.
+     * This property is true while the translations are being fetched.
+     */
+    isFetchingTranslations: boolean;
+};
+
+export type MessageKey_defaultSet = keyof typeof messages_defaultSet_fallbackLanguage;
+
+export function createGetI18n<MessageKey_themeDefined extends string = never>(messagesByLanguageTag_themeDefined: {
+    [languageTag: string]: { [key in MessageKey_themeDefined]: string };
+}) {
+    type I18n = GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined>;
+
+    type Result = { i18n: I18n; prI18n_currentLanguage: Promise<I18n> | undefined };
+
+    const cachedResultByKcContext = new WeakMap<KcContextLike, Result>();
+
+    function getI18n(params: { kcContext: KcContextLike }): Result {
+        const { kcContext } = params;
+
+        use_cache: {
+            const cachedResult = cachedResultByKcContext.get(kcContext);
+
+            if (cachedResult === undefined) {
+                break use_cache;
+            }
+
+            return cachedResult;
+        }
+
+        const partialI18n: Pick<I18n, "currentLanguageTag" | "getChangeLocaleUrl" | "labelBySupportedLanguageTag"> = {
+            currentLanguageTag: kcContext.locale?.currentLanguageTag ?? FALLBACK_LANGUAGE_TAG,
+            getChangeLocaleUrl: 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]))
+        };
+
+        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey_themeDefined>({
+            messages_themeDefined:
+                messagesByLanguageTag_themeDefined[partialI18n.currentLanguageTag] ??
+                messagesByLanguageTag_themeDefined[FALLBACK_LANGUAGE_TAG] ??
+                (() => {
+                    const firstLanguageTag = Object.keys(messagesByLanguageTag_themeDefined)[0];
+                    if (firstLanguageTag === undefined) {
+                        return undefined;
+                    }
+                    return messagesByLanguageTag_themeDefined[firstLanguageTag];
+                })(),
+            messages_fromKcServer: kcContext["x-keycloakify"].messages
+        });
+
+        const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag === FALLBACK_LANGUAGE_TAG;
+
+        const result: Result = {
+            i18n: {
+                ...partialI18n,
+                ...createI18nTranslationFunctions({
+                    messages_defaultSet_currentLanguage: isCurrentLanguageFallbackLanguage ? messages_defaultSet_fallbackLanguage : undefined
+                }),
+                isFetchingTranslations: !isCurrentLanguageFallbackLanguage
+            },
+            prI18n_currentLanguage: isCurrentLanguageFallbackLanguage
+                ? undefined
+                : (async () => {
+                      const messages_defaultSet_currentLanguage = await fetchMessages_defaultSet(partialI18n.currentLanguageTag);
+
+                      const i18n_currentLanguage: I18n = {
+                          ...partialI18n,
+                          ...createI18nTranslationFunctions({ messages_defaultSet_currentLanguage }),
+                          isFetchingTranslations: false
+                      };
+
+                      // NOTE: This promise.resolve is just because without it we TypeScript
+                      // gives a Variable 'result' is used before being assigned. error
+                      await Promise.resolve().then(() => {
+                          result.i18n = i18n_currentLanguage;
+                          result.prI18n_currentLanguage = undefined;
+                      });
+
+                      return i18n_currentLanguage;
+                  })()
+        };
+
+        cachedResultByKcContext.set(kcContext, result);
+
+        return result;
+    }
+
+    return { getI18n };
+}
+
+function createI18nTranslationFunctionsFactory<MessageKey_themeDefined extends string>(params: {
+    messages_themeDefined: Record<MessageKey_themeDefined, string> | undefined;
+    messages_fromKcServer: Record<string, string>;
+}) {
+    const { messages_themeDefined, messages_fromKcServer } = params;
+
+    function createI18nTranslationFunctions(params: {
+        messages_defaultSet_currentLanguage: Partial<Record<MessageKey_defaultSet, string>> | undefined;
+    }): Pick<GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined>, "msgStr" | "advancedMsgStr"> {
+        const { messages_defaultSet_currentLanguage } = params;
+
+        function resolveMsg(props: { key: string; args: (string | undefined)[] }): string | undefined {
+            const { key, args } = props;
+
+            const message =
+                id<Record<string, string | undefined>>(messages_fromKcServer)[key] ??
+                id<Record<string, string | undefined> | undefined>(messages_themeDefined)?.[key] ??
+                id<Record<string, string | undefined> | undefined>(messages_defaultSet_currentLanguage)?.[key] ??
+                id<Record<string, string | undefined>>(messages_defaultSet_fallbackLanguage)[key];
+
+            if (message === undefined) {
+                return undefined;
+            }
+
+            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;
+        }
+
+        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[] }): string {
+            const { key, args } = props;
+
+            const match = key.match(/^\$\{(.+)\}$/);
+
+            if (match === null) {
+                return key;
+            }
+
+            return resolveMsg({ key: match[1], args }) ?? key;
+        }
+
+        return {
+            msgStr: (key, ...args) => {
+                const resolvedMessage = resolveMsg({ key, args });
+                assert(resolvedMessage !== undefined, `Message with key "${key}" not found`);
+                return resolvedMessage;
+            },
+            advancedMsgStr: (key, ...args) => resolveMsgAdvanced({ key, args })
+        };
+    }
+
+    return { createI18nTranslationFunctions };
+}

src/account/i18n/index.ts

@@ -0,0 +1,5 @@
+import type { GenericI18n } from "./GenericI18n";
+import type { MessageKey_defaultSet, KcContextLike } from "./i18n";
+export type { MessageKey_defaultSet, KcContextLike };
+export type I18n = GenericI18n<MessageKey_defaultSet>;
+export { createUseI18n } from "./useI18n";

src/account/i18n/useI18n.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react";
+import { createGetI18n, type GenericI18n_noJsx, type KcContextLike, type MessageKey_defaultSet } from "./i18n";
+import { GenericI18n } from "./GenericI18n";
+import { Reflect } from "tsafe/Reflect";
+
+export function createUseI18n<MessageKey_themeDefined extends string = never>(messagesByLanguageTag: {
+    [languageTag: string]: { [key in MessageKey_themeDefined]: string };
+}) {
+    type MessageKey = MessageKey_defaultSet | MessageKey_themeDefined;
+
+    type I18n = GenericI18n<MessageKey>;
+
+    const { withJsx } = (() => {
+        const cache = new WeakMap<GenericI18n_noJsx<MessageKey>, GenericI18n<MessageKey>>();
+
+        function renderHtmlString(params: { htmlString: string; msgKey: string }): JSX.Element {
+            const { htmlString, msgKey } = params;
+            return (
+                <div
+                    data-kc-msg={msgKey}
+                    dangerouslySetInnerHTML={{
+                        __html: htmlString
+                    }}
+                />
+            );
+        }
+
+        function withJsx(i18n_noJsx: GenericI18n_noJsx<MessageKey>): I18n {
+            use_cache: {
+                const i18n = cache.get(i18n_noJsx);
+
+                if (i18n === undefined) {
+                    break use_cache;
+                }
+
+                return i18n;
+            }
+
+            const i18n: I18n = {
+                ...i18n_noJsx,
+                msg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.msgStr(msgKey, ...args), msgKey }),
+                advancedMsg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey })
+            };
+
+            cache.set(i18n_noJsx, i18n);
+
+            return i18n;
+        }
+
+        return { withJsx };
+    })();
+
+    add_style: {
+        const attributeName = "data-kc-i18n";
+
+        // Check if already exists in head
+        if (document.querySelector(`style[${attributeName}]`) !== null) {
+            break add_style;
+        }
+
+        const styleElement = document.createElement("style");
+        styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
+        (styleElement.textContent = `[data-kc-msg] { display: inline-block; }`), document.head.prepend(styleElement);
+    }
+
+    const { getI18n } = createGetI18n(messagesByLanguageTag);
+
+    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
+        const { kcContext } = params;
+
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+
+        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(withJsx(i18n));
+
+        useEffect(() => {
+            let isActive = true;
+
+            prI18n_currentLanguage?.then(i18n => {
+                if (!isActive) {
+                    return;
+                }
+
+                setI18n_toReturn(withJsx(i18n));
+            });
+
+            return () => {
+                isActive = false;
+            };
+        }, []);
+
+        return { i18n: i18n_toReturn };
+    }
+
+    return { useI18n, ofTypeI18n: Reflect<I18n>() };
+}

src/account/index.ts

@@ -0,0 +1,3 @@
+export type { ExtendKcContext } from "keycloakify/account/KcContext";
+export type { ClassKey } from "keycloakify/account/TemplateProps";
+export { createUseI18n } from "keycloakify/account/i18n";

src/account/lib/kcClsx.ts

@@ -0,0 +1,25 @@
+import { createGetKcClsx } from "keycloakify/lib/getKcClsx";
+import type { ClassKey } from "keycloakify/account/TemplateProps";
+
+export const { getKcClsx } = createGetKcClsx<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"
+    }
+});
+
+export type { ClassKey };
+
+export type KcClsx = ReturnType<typeof getKcClsx>["kcClsx"];

src/account/pages/Account.tsx

@@ -0,0 +1,127 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+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 } = props;
+
+    const classes = {
+        ...props.classes,
+        kcBodyClass: clsx(props.classes?.kcBodyClass, "user")
+    };
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    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={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
+                                name="submitAction"
+                                value="Save"
+                            >
+                                {msg("doSave")}
+                            </button>
+                            <button
+                                type="submit"
+                                className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
+                                name="submitAction"
+                                value="Cancel"
+                            >
+                                {msg("doCancel")}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

src/account/pages/Applications.tsx

@@ -0,0 +1,136 @@
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+
+export default function Applications(props: PageProps<Extract<KcContext, { pageId: "applications.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+
+    const { kcClsx } = getKcClsx({
+        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>
+                                            ))}
+                                        {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={kcClsx("kcButtonPrimaryClass", "kcButtonClass")}
+                                                id={`revoke-${application.client.clientId}`}
+                                                name="clientId"
+                                                value={application.client.id}
+                                            >
+                                                {msg("revoke")}
+                                            </button>
+                                        ) : null}
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </form>
+            </div>
+        </Template>
+    );
+}
+
+function isArrayWithEmptyObject(variable: any): boolean {
+    return Array.isArray(variable) && variable.length === 1 && typeof variable[0] === "object" && Object.keys(variable[0]).length === 0;
+}

src/account/pages/FederatedIdentity.tsx

@@ -0,0 +1,58 @@
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+
+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="social">
+            <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 { Key } from "react";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
+
+export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { log } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="log">
+            <div className={kcClsx("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,10 @@
+import { type TemplateProps, type ClassKey } from "keycloakify/account/TemplateProps";
+import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
+
+export type PageProps<NarrowedKcContext, I18n> = {
+    Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
+    kcContext: NarrowedKcContext;
+    i18n: I18n;
+    doUseDefaultCss: boolean;
+    classes?: Partial<Record<ClassKey, string>>;
+};

src/account/pages/Password.tsx

@@ -0,0 +1,209 @@
+import { useState } from "react";
+import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+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 } = props;
+
+    const classes = {
+        ...props.classes,
+        kcBodyClass: clsx(props.classes?.kcBodyClass, "password")
+    };
+
+    const { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    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={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
+                                name="submitAction"
+                                value="Save"
+                            >
+                                {msg("doSave")}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

src/account/pages/Sessions.tsx

@@ -0,0 +1,64 @@
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+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 { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { url, stateChecker, sessions } = kcContext;
+
+    const { msg } = i18n;
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="sessions">
+            <div className={kcClsx("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={kcClsx("kcButtonDefaultClass", "kcButtonClass")}>
+                    {msg("doLogOutAllSessions")}
+                </button>
+            </form>
+        </Template>
+    );
+}

src/account/pages/Totp.tsx

@@ -0,0 +1,225 @@
+import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+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 { kcClsx } = getKcClsx({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
+
+    const { msg, msgStr, advancedMsg } = i18n;
+
+    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")}: {totp.policy.getAlgorithmKey()}
+                                            </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={kcClsx("kcFormClass")} id="kc-totp-settings-form" method="post">
+                            <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                            <div className={kcClsx("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={kcClsx("kcInputClass")}
+                                        aria-invalid={messagesPerField.existsError("totp")}
+                                    />
+
+                                    {messagesPerField.existsError("totp") && (
+                                        <span
+                                            id="input-error-otp-code"
+                                            className={kcClsx("kcInputErrorMessageClass")}
+                                            aria-live="polite"
+                                            dangerouslySetInnerHTML={{
+                                                __html: messagesPerField.get("totp")
+                                            }}
+                                        />
+                                    )}
+                                </div>
+                                <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
+                                {mode && <input type="hidden" id="mode" value={mode} />}
+                            </div>
+
+                            <div className={kcClsx("kcFormGroupClass")}>
+                                <div className="col-sm-2 col-md-2">
+                                    <label htmlFor="userLabel" className={kcClsx("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={kcClsx("kcInputClass")}
+                                        aria-invalid={messagesPerField.existsError("userLabel")}
+                                    />
+                                    {messagesPerField.existsError("userLabel") && (
+                                        <span
+                                            id="input-error-otp-label"
+                                            className={kcClsx("kcInputErrorMessageClass")}
+                                            aria-live="polite"
+                                            dangerouslySetInnerHTML={{
+                                                __html: messagesPerField.get("userLabel")
+                                            }}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+
+                            <div id="kc-form-buttons" className={clsx(kcClsx("kcFormGroupClass"), "text-right")}>
+                                <div className={kcClsx("kcInputWrapperClass")}>
+                                    <input
+                                        type="submit"
+                                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
+                                        id="saveTOTPBtn"
+                                        value={msgStr("doSave")}
+                                    />
+                                    <button
+                                        type="submit"
+                                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass", "kcButtonLargeClass")}
+                                        id="cancelTOTPBtn"
+                                        name="submitAction"
+                                        value="Cancel"
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                )}
+            </>
+        </Template>
+    );
+}

src/bin/add-story.ts

@@ -0,0 +1,137 @@
+import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
+import cliSelect from "cli-select";
+import {
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    THEME_TYPES,
+    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 type { CliCommandOptions } from "./main";
+import { getBuildContext } from "./shared/buildContext";
+import chalk from "chalk";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({
+        cliCommandOptions
+    });
+
+    console.log(chalk.cyan("Theme type:"));
+
+    const themeType = await (async () => {
+        const values = THEME_TYPES.filter(themeType => {
+            switch (themeType) {
+                case "account":
+                    return buildContext.implementedThemeTypes.account.isImplemented;
+                case "login":
+                    return buildContext.implementedThemeTypes.login.isImplemented;
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        });
+
+        assert(values.length > 0, "No theme is implemented in this project");
+
+        if (values.length === 1) {
+            return values[0];
+        }
+
+        const { value } = await cliSelect<ThemeType>({
+            values
+        }).catch(() => {
+            process.exit(-1);
+        });
+
+        return value;
+    })();
+
+    if (
+        themeType === "account" &&
+        (assert(buildContext.implementedThemeTypes.account.isImplemented),
+        buildContext.implementedThemeTypes.account.type === "Single-Page")
+    ) {
+        console.log(
+            `${chalk.red("✗")} Sorry, there is no Storybook support for Single-Page Account themes.`
+        );
+
+        process.exit(0);
+    }
+
+    console.log(`→ ${themeType}`);
+
+    console.log(chalk.cyan("Select the page you want to create a Storybook for:"));
+
+    const { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({
+        values: (() => {
+            switch (themeType) {
+                case "login":
+                    return [...LOGIN_THEME_PAGE_IDS];
+                case "account":
+                    return [...ACCOUNT_THEME_PAGE_IDS];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageId}`);
+
+    const componentBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(
+        /ftl$/,
+        "stories.tsx"
+    );
+
+    const targetFilePath = pathJoin(
+        buildContext.themeSrcDirPath,
+        themeType,
+        "pages",
+        componentBasename
+    );
+
+    if (fs.existsSync(targetFilePath)) {
+        console.log(`${pathRelative(process.cwd(), targetFilePath)} already exists`);
+
+        process.exit(-1);
+    }
+
+    const componentCode = fs
+        .readFileSync(
+            pathJoin(
+                getThisCodebaseRootDirPath(),
+                "stories",
+                themeType,
+                "pages",
+                componentBasename
+            )
+        )
+        .toString("utf8")
+        .replace('import React from "react";\n', "")
+        .replace(/from "[./]+dist\//, 'from "keycloakify/');
+
+    {
+        const targetDirPath = pathDirname(targetFilePath);
+
+        if (!fs.existsSync(targetDirPath)) {
+            fs.mkdirSync(targetDirPath, { recursive: true });
+        }
+    }
+
+    fs.writeFileSync(targetFilePath, Buffer.from(componentCode, "utf8"));
+
+    console.log(
+        [
+            `${chalk.green("✓")} ${chalk.bold(
+                pathJoin(".", pathRelative(process.cwd(), targetFilePath))
+            )} copy pasted from the Keycloakify source code into your project`,
+            `You can start storybook with ${chalk.bold("npm run storybook")}`
+        ].join("\n")
+    );
+}

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

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

src/bin/create-keycloak-email-directory.ts

@@ -1,41 +0,0 @@
-#!/usr/bin/env node
-
-import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
-import { keycloakThemeEmailDirPath } from "./keycloakify";
-import { join as pathJoin, basename as pathBasename } from "path";
-import { transformCodebase } from "./tools/transformCodebase";
-import { promptKeycloakVersion } from "./promptKeycloakVersion";
-import * as fs from "fs";
-import { getCliOptions } from "./tools/cliOptions";
-import { getLogger } from "./tools/logger";
-
-if (require.main === module) {
-    (async () => {
-        const { isSilent } = getCliOptions(process.argv.slice(2));
-        const logger = getLogger({ isSilent });
-        if (fs.existsSync(keycloakThemeEmailDirPath)) {
-            logger.warn(`There is already a ./${pathBasename(keycloakThemeEmailDirPath)} directory in your project. Aborting.`);
-
-            process.exit(-1);
-        }
-
-        const { keycloakVersion } = await promptKeycloakVersion();
-
-        const builtinKeycloakThemeTmpDirPath = pathJoin(keycloakThemeEmailDirPath, "..", "tmp_xIdP3_builtin_keycloak_theme");
-
-        downloadBuiltinKeycloakTheme({
-            keycloakVersion,
-            "destDirPath": builtinKeycloakThemeTmpDirPath,
-            isSilent
-        });
-
-        transformCodebase({
-            "srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "base", "email"),
-            "destDirPath": keycloakThemeEmailDirPath
-        });
-
-        logger.log(`./${pathBasename(keycloakThemeEmailDirPath)} ready to be customized`);
-
-        fs.rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true, "force": true });
-    })();
-}

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

@@ -1,40 +0,0 @@
-#!/usr/bin/env node
-
-import { keycloakThemeBuildingDirPath } from "./keycloakify";
-import { join as pathJoin } from "path";
-import { downloadAndUnzip } from "./tools/downloadAndUnzip";
-import { promptKeycloakVersion } from "./promptKeycloakVersion";
-import { getCliOptions } from "./tools/cliOptions";
-import { getLogger } from "./tools/logger";
-
-export function downloadBuiltinKeycloakTheme(params: { keycloakVersion: string; destDirPath: string; isSilent: boolean }) {
-    const { keycloakVersion, destDirPath, isSilent } = params;
-
-    for (const ext of ["", "-community"]) {
-        downloadAndUnzip({
-            "destDirPath": destDirPath,
-            "url": `https://github.com/keycloak/keycloak/archive/refs/tags/${keycloakVersion}.zip`,
-            "pathOfDirToExtractInArchive": `keycloak-${keycloakVersion}/themes/src/main/resources${ext}/theme`,
-            "cacheDirPath": pathJoin(keycloakThemeBuildingDirPath, ".cache"),
-            isSilent
-        });
-    }
-}
-
-if (require.main === module) {
-    (async () => {
-        const { isSilent } = getCliOptions(process.argv.slice(2));
-        const logger = getLogger({ isSilent });
-        const { keycloakVersion } = await promptKeycloakVersion();
-
-        const destDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme");
-
-        logger.log(`Downloading builtins theme of Keycloak ${keycloakVersion} here ${destDirPath}`);
-
-        downloadBuiltinKeycloakTheme({
-            keycloakVersion,
-            destDirPath,
-            isSilent
-        });
-    })();
-}

src/bin/eject-page.ts

@@ -0,0 +1,364 @@
+#!/usr/bin/env node
+
+import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
+import cliSelect from "cli-select";
+import {
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    THEME_TYPES,
+    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,
+    basename as pathBasename
+} from "path";
+import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
+import { assert, Equals } from "tsafe/assert";
+import type { CliCommandOptions } from "./main";
+import { getBuildContext } from "./shared/buildContext";
+import chalk from "chalk";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({
+        cliCommandOptions
+    });
+
+    console.log(chalk.cyan("Theme type:"));
+
+    const themeType = await (async () => {
+        const values = THEME_TYPES.filter(themeType => {
+            switch (themeType) {
+                case "account":
+                    return buildContext.implementedThemeTypes.account.isImplemented;
+                case "login":
+                    return buildContext.implementedThemeTypes.login.isImplemented;
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        });
+
+        assert(values.length > 0, "No theme is implemented in this project");
+
+        if (values.length === 1) {
+            return values[0];
+        }
+
+        const { value } = await cliSelect<ThemeType>({
+            values
+        }).catch(() => {
+            process.exit(-1);
+        });
+
+        return value;
+    })();
+
+    if (
+        themeType === "account" &&
+        (assert(buildContext.implementedThemeTypes.account.isImplemented),
+        buildContext.implementedThemeTypes.account.type === "Single-Page")
+    ) {
+        const srcDirPath = pathJoin(
+            pathDirname(buildContext.packageJsonFilePath),
+            "node_modules",
+            "@keycloakify",
+            "keycloak-account-ui",
+            "src"
+        );
+
+        console.log(
+            [
+                `There isn't an interactive CLI to eject components of the Single-Page Account theme.`,
+                `You can however copy paste into your codebase the any file or directory from the following source directory:`,
+                ``,
+                `${chalk.bold(pathJoin(pathRelative(process.cwd(), srcDirPath)))}`,
+                ``
+            ].join("\n")
+        );
+
+        eject_entrypoint: {
+            const kcAccountUiTsxFileRelativePath = "KcAccountUi.tsx";
+
+            const accountThemeSrcDirPath = pathJoin(
+                buildContext.themeSrcDirPath,
+                "account"
+            );
+
+            const targetFilePath = pathJoin(
+                accountThemeSrcDirPath,
+                kcAccountUiTsxFileRelativePath
+            );
+
+            if (fs.existsSync(targetFilePath)) {
+                break eject_entrypoint;
+            }
+
+            fs.cpSync(
+                pathJoin(srcDirPath, kcAccountUiTsxFileRelativePath),
+                targetFilePath
+            );
+
+            {
+                const kcPageTsxFilePath = pathJoin(accountThemeSrcDirPath, "KcPage.tsx");
+
+                const kcPageTsxCode = fs.readFileSync(kcPageTsxFilePath).toString("utf8");
+
+                const componentName = pathBasename(
+                    kcAccountUiTsxFileRelativePath
+                ).replace(/.tsx$/, "");
+
+                const modifiedKcPageTsxCode = kcPageTsxCode.replace(
+                    `@keycloakify/keycloak-account-ui/${componentName}`,
+                    `./${componentName}`
+                );
+
+                fs.writeFileSync(
+                    kcPageTsxFilePath,
+                    Buffer.from(modifiedKcPageTsxCode, "utf8")
+                );
+            }
+
+            const routesTsxFilePath = pathRelative(
+                process.cwd(),
+                pathJoin(srcDirPath, "routes.tsx")
+            );
+
+            console.log(
+                [
+                    `To help you get started ${chalk.bold(pathRelative(process.cwd(), targetFilePath))} has been copied into your project.`,
+                    `The next step is usually to eject ${chalk.bold(routesTsxFilePath)}`,
+                    `with \`cp ${routesTsxFilePath} ${pathRelative(process.cwd(), accountThemeSrcDirPath)}\``,
+                    `then update the import of routes in ${kcAccountUiTsxFileRelativePath}.`
+                ].join("\n")
+            );
+        }
+
+        process.exit(0);
+    }
+
+    console.log(`→ ${themeType}`);
+
+    console.log(chalk.cyan("Select the page you want to customize:"));
+
+    const templateValue = "Template.tsx (Layout common to every page)";
+    const userProfileFormFieldsValue =
+        "UserProfileFormFields.tsx (Renders the form of the register.ftl, login-update-profile.ftl, update-email.ftl and idp-review-user-profile.ftl)";
+
+    const { value: pageIdOrComponent } = await cliSelect<
+        | LoginThemePageId
+        | AccountThemePageId
+        | typeof templateValue
+        | typeof userProfileFormFieldsValue
+    >({
+        values: (() => {
+            switch (themeType) {
+                case "login":
+                    return [
+                        templateValue,
+                        userProfileFormFieldsValue,
+                        ...LOGIN_THEME_PAGE_IDS
+                    ];
+                case "account":
+                    return [templateValue, ...ACCOUNT_THEME_PAGE_IDS];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageIdOrComponent}`);
+
+    const componentBasename = (() => {
+        if (pageIdOrComponent === templateValue) {
+            return "Template.tsx";
+        }
+
+        if (pageIdOrComponent === userProfileFormFieldsValue) {
+            return "UserProfileFormFields.tsx";
+        }
+
+        return capitalize(kebabCaseToCamelCase(pageIdOrComponent)).replace(/ftl$/, "tsx");
+    })();
+
+    const pagesOrDot = (() => {
+        if (
+            pageIdOrComponent === templateValue ||
+            pageIdOrComponent === userProfileFormFieldsValue
+        ) {
+            return ".";
+        }
+
+        return "pages";
+    })();
+
+    const targetFilePath = pathJoin(
+        buildContext.themeSrcDirPath,
+        themeType,
+        pagesOrDot,
+        componentBasename
+    );
+
+    if (fs.existsSync(targetFilePath)) {
+        console.log(
+            `${pageIdOrComponent} is already ejected, ${pathRelative(
+                process.cwd(),
+                targetFilePath
+            )} already exists`
+        );
+
+        process.exit(-1);
+    }
+
+    const componentCode = fs
+        .readFileSync(
+            pathJoin(
+                getThisCodebaseRootDirPath(),
+                "src",
+                themeType,
+                pagesOrDot,
+                componentBasename
+            )
+        )
+        .toString("utf8");
+
+    {
+        const targetDirPath = pathDirname(targetFilePath);
+
+        if (!fs.existsSync(targetDirPath)) {
+            fs.mkdirSync(targetDirPath, { recursive: true });
+        }
+    }
+
+    fs.writeFileSync(targetFilePath, Buffer.from(componentCode, "utf8"));
+
+    console.log(
+        `${chalk.green("✓")} ${chalk.bold(
+            pathJoin(".", pathRelative(process.cwd(), targetFilePath))
+        )} copy pasted from the Keycloakify source code into your project`
+    );
+
+    edit_KcApp: {
+        if (
+            pageIdOrComponent !== templateValue &&
+            pageIdOrComponent !== userProfileFormFieldsValue
+        ) {
+            break edit_KcApp;
+        }
+
+        const kcAppTsxPath = pathJoin(
+            buildContext.themeSrcDirPath,
+            themeType,
+            "KcPage.tsx"
+        );
+
+        const kcAppTsxCode = fs.readFileSync(kcAppTsxPath).toString("utf8");
+
+        const modifiedKcAppTsxCode = (() => {
+            switch (pageIdOrComponent) {
+                case templateValue:
+                    return kcAppTsxCode.replace(
+                        `keycloakify/${themeType}/Template`,
+                        "./Template"
+                    );
+                case userProfileFormFieldsValue:
+                    return kcAppTsxCode.replace(
+                        `keycloakify/login/UserProfileFormFields`,
+                        "./UserProfileFormFields"
+                    );
+            }
+            assert<Equals<typeof pageIdOrComponent, never>>(false);
+        })();
+
+        if (kcAppTsxCode === modifiedKcAppTsxCode) {
+            console.log(
+                chalk.red(
+                    "Unable to automatically update KcPage.tsx, please update it manually"
+                )
+            );
+            return;
+        }
+
+        fs.writeFileSync(kcAppTsxPath, Buffer.from(modifiedKcAppTsxCode, "utf8"));
+
+        console.log(
+            `${chalk.green("✓")} ${chalk.bold(
+                pathJoin(".", pathRelative(process.cwd(), kcAppTsxPath))
+            )} Updated`
+        );
+
+        return;
+    }
+
+    const userProfileFormFieldComponentName = "UserProfileFormFields";
+
+    const componentName = componentBasename.replace(/.tsx$/, "");
+
+    console.log(
+        [
+            ``,
+            `You now need to update your page router:`,
+            ``,
+            `${chalk.bold(
+                pathJoin(
+                    ".",
+                    pathRelative(process.cwd(), buildContext.themeSrcDirPath),
+                    themeType,
+                    "KcPage.tsx"
+                )
+            )}:`,
+            chalk.grey("```"),
+            `// ...`,
+            ``,
+            chalk.green(
+                `+const ${componentName} = lazy(() => import("./pages/${componentName}"));`
+            ),
+            ...[
+                ``,
+                ` export default function KcPage(props: { kcContext: KcContext; }) {`,
+                ``,
+                `     // ...`,
+                ``,
+                `     return (`,
+                `         <Suspense>`,
+                `             {(() => {`,
+                `                 switch (kcContext.pageId) {`,
+                `                     // ...`,
+                `+                    case "${pageIdOrComponent}": return (`,
+                `+                        <${componentName}`,
+                `+                            {...{ kcContext, i18n, classes }}`,
+                `+                            Template={Template}`,
+                `+                            doUseDefaultCss={true}`,
+                ...(!componentCode.includes(userProfileFormFieldComponentName)
+                    ? []
+                    : [
+                          `+                            ${userProfileFormFieldComponentName}={${userProfileFormFieldComponentName}}`,
+                          `+                            doMakeUserConfirmPassword={doMakeUserConfirmPassword}`
+                      ]),
+                `+                        />`,
+                `+                    );`,
+                `                     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/generate-i18n-messages.ts

@@ -1,87 +0,0 @@
-import "minimal-polyfills/Object.fromEntries";
-import * as fs from "fs";
-import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
-import { crawl } from "./tools/crawl";
-import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
-import { getProjectRoot } from "./tools/getProjectRoot";
-import { rm_rf, rm_r } from "./tools/rm";
-import { getCliOptions } from "./tools/cliOptions";
-import { getLogger } from "./tools/logger";
-
-//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");
-
-const { isSilent } = getCliOptions(process.argv.slice(2));
-const logger = getLogger({ isSilent });
-
-for (const keycloakVersion of ["11.0.3", "15.0.2", "18.0.1"]) {
-    logger.log(JSON.stringify({ keycloakVersion }));
-
-    const tmpDirPath = pathJoin(getProjectRoot(), "tmp_xImOef9dOd44");
-
-    rm_rf(tmpDirPath);
-
-    downloadBuiltinKeycloakTheme({
-        keycloakVersion,
-        "destDirPath": tmpDirPath,
-        isSilent
-    });
-
-    type Dictionary = { [idiomId: string]: string };
-
-    const record: { [typeOfPage: string]: { [language: string]: Dictionary } } = {};
-
-    {
-        const baseThemeDirPath = pathJoin(tmpDirPath, "base");
-
-        crawl(baseThemeDirPath).forEach(filePath => {
-            const match = filePath.match(/^([^/]+)\/messages\/messages_([^.]+)\.properties$/);
-
-            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, value.replace(/''/g, "'")]
-                )
-            );
-        });
-    }
-
-    rm_r(tmpDirPath);
-
-    Object.keys(record).forEach(pageType => {
-        const recordForPageType = record[pageType];
-
-        Object.keys(recordForPageType).forEach(language => {
-            const filePath = pathJoin(getProjectRoot(), "src", "lib", "i18n", "generated_messages", keycloakVersion, pageType, `${language}.ts`);
-
-            fs.mkdirSync(pathDirname(filePath), { "recursive": true });
-
-            fs.writeFileSync(
-                filePath,
-                Buffer.from(
-                    [
-                        `//This code was automatically generated by running ${pathRelative(getProjectRoot(), __filename)}`,
-                        "//PLEASE DO NOT EDIT MANUALLY",
-                        "",
-                        "/* spell-checker: disable */",
-                        `const messages= ${JSON.stringify(recordForPageType[language], null, 2)};`,
-                        "",
-                        "export default messages;",
-                        "/* spell-checker: enable */"
-                    ].join("\n"),
-                    "utf8"
-                )
-            );
-
-            logger.log(`${filePath} wrote`);
-        });
-    });
-}

src/bin/initialize-account-theme/copyBoilerplate.ts

@@ -0,0 +1,32 @@
+import * as fs from "fs";
+import { join as pathJoin } from "path";
+import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";
+import { assert, type Equals } from "tsafe/assert";
+
+export function copyBoilerplate(params: {
+    accountThemeType: "Single-Page" | "Multi-Page";
+    accountThemeSrcDirPath: string;
+}) {
+    const { accountThemeType, accountThemeSrcDirPath } = params;
+
+    fs.cpSync(
+        pathJoin(
+            getThisCodebaseRootDirPath(),
+            "src",
+            "bin",
+            "initialize-account-theme",
+            "src",
+            (() => {
+                switch (accountThemeType) {
+                    case "Single-Page":
+                        return "single-page";
+                    case "Multi-Page":
+                        return "multi-page";
+                }
+                assert<Equals<typeof accountThemeType, never>>(false);
+            })()
+        ),
+        accountThemeSrcDirPath,
+        { recursive: true }
+    );
+}

src/bin/initialize-account-theme/index.ts

@@ -0,0 +1 @@
+export * from "./initialize-account-theme";

src/bin/initialize-account-theme/initialize-account-theme.ts

@@ -0,0 +1,112 @@
+import { getBuildContext } from "../shared/buildContext";
+import type { CliCommandOptions } from "../main";
+import cliSelect from "cli-select";
+import child_process from "child_process";
+import chalk from "chalk";
+import { join as pathJoin, relative as pathRelative } from "path";
+import * as fs from "fs";
+import { updateAccountThemeImplementationInConfig } from "./updateAccountThemeImplementationInConfig";
+import { generateKcGenTs } from "../shared/generateKcGenTs";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({ cliCommandOptions });
+
+    const accountThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "account");
+
+    if (
+        fs.existsSync(accountThemeSrcDirPath) &&
+        fs.readdirSync(accountThemeSrcDirPath).length > 0
+    ) {
+        console.warn(
+            chalk.red(
+                `There is already a ${pathRelative(
+                    process.cwd(),
+                    accountThemeSrcDirPath
+                )} directory in your project. Aborting.`
+            )
+        );
+
+        process.exit(-1);
+    }
+
+    exit_if_uncommitted_changes: {
+        let hasUncommittedChanges: boolean | undefined = undefined;
+
+        try {
+            hasUncommittedChanges =
+                child_process
+                    .execSync(`git status --porcelain`, {
+                        cwd: buildContext.projectDirPath
+                    })
+                    .toString()
+                    .trim() !== "";
+        } catch {
+            // Probably not a git repository
+            break exit_if_uncommitted_changes;
+        }
+
+        if (!hasUncommittedChanges) {
+            break exit_if_uncommitted_changes;
+        }
+        console.warn(
+            [
+                chalk.red(
+                    "Please commit or stash your changes before running this command.\n"
+                ),
+                "This command will modify your project's files so it's better to have a clean working directory",
+                "so that you can easily see what has been changed and revert if needed."
+            ].join(" ")
+        );
+
+        process.exit(-1);
+    }
+
+    const { value: accountThemeType } = await cliSelect({
+        values: ["Single-Page" as const, "Multi-Page" as const]
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    switch (accountThemeType) {
+        case "Multi-Page":
+            {
+                const { initializeAccountTheme_multiPage } = await import(
+                    "./initializeAccountTheme_multiPage"
+                );
+
+                await initializeAccountTheme_multiPage({
+                    accountThemeSrcDirPath
+                });
+            }
+            break;
+        case "Single-Page":
+            {
+                const { initializeAccountTheme_singlePage } = await import(
+                    "./initializeAccountTheme_singlePage"
+                );
+
+                await initializeAccountTheme_singlePage({
+                    accountThemeSrcDirPath,
+                    buildContext
+                });
+            }
+            break;
+    }
+
+    updateAccountThemeImplementationInConfig({ buildContext, accountThemeType });
+
+    await generateKcGenTs({
+        buildContext: {
+            ...buildContext,
+            implementedThemeTypes: {
+                ...buildContext.implementedThemeTypes,
+                account: {
+                    isImplemented: true,
+                    type: accountThemeType
+                }
+            }
+        }
+    });
+}

src/bin/initialize-account-theme/initializeAccountTheme_multiPage.ts

@@ -0,0 +1,21 @@
+import { relative as pathRelative } from "path";
+import chalk from "chalk";
+import { copyBoilerplate } from "./copyBoilerplate";
+
+export async function initializeAccountTheme_multiPage(params: {
+    accountThemeSrcDirPath: string;
+}) {
+    const { accountThemeSrcDirPath } = params;
+
+    copyBoilerplate({
+        accountThemeType: "Multi-Page",
+        accountThemeSrcDirPath
+    });
+
+    console.log(
+        [
+            chalk.green("The Multi-Page account theme has been initialized."),
+            `Directory created: ${chalk.bold(pathRelative(process.cwd(), accountThemeSrcDirPath))}`
+        ].join("\n")
+    );
+}

src/bin/initialize-account-theme/initializeAccountTheme_singlePage.ts

@@ -0,0 +1,152 @@
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import type { BuildContext } from "../shared/buildContext";
+import * as fs from "fs";
+import chalk from "chalk";
+import {
+    getLatestsSemVersionedTag,
+    type BuildContextLike as BuildContextLike_getLatestsSemVersionedTag
+} from "../shared/getLatestsSemVersionedTag";
+import fetch from "make-fetch-happen";
+import { z } from "zod";
+import { assert, type Equals } from "tsafe/assert";
+import { is } from "tsafe/is";
+import { id } from "tsafe/id";
+import { npmInstall } from "../tools/npmInstall";
+import { copyBoilerplate } from "./copyBoilerplate";
+import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";
+
+type BuildContextLike = BuildContextLike_getLatestsSemVersionedTag & {
+    fetchOptions: BuildContext["fetchOptions"];
+    packageJsonFilePath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export async function initializeAccountTheme_singlePage(params: {
+    accountThemeSrcDirPath: string;
+    buildContext: BuildContextLike;
+}) {
+    const { accountThemeSrcDirPath, buildContext } = params;
+
+    const OWNER = "keycloakify";
+    const REPO = "keycloak-account-ui";
+
+    const [semVersionedTag] = await getLatestsSemVersionedTag({
+        owner: OWNER,
+        repo: REPO,
+        count: 1,
+        doIgnoreReleaseCandidates: false,
+        buildContext
+    });
+
+    const dependencies = await fetch(
+        `https://raw.githubusercontent.com/${OWNER}/${REPO}/${semVersionedTag.tag}/dependencies.gen.json`,
+        buildContext.fetchOptions
+    )
+        .then(r => r.json())
+        .then(
+            (() => {
+                type Dependencies = {
+                    dependencies: Record<string, string>;
+                    devDependencies?: Record<string, string>;
+                };
+
+                const zDependencies = (() => {
+                    type TargetType = Dependencies;
+
+                    const zTargetType = z.object({
+                        dependencies: z.record(z.string()),
+                        devDependencies: z.record(z.string()).optional()
+                    });
+
+                    assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+                    return id<z.ZodType<TargetType>>(zTargetType);
+                })();
+
+                return o => zDependencies.parse(o);
+            })()
+        );
+
+    dependencies.dependencies["@keycloakify/keycloak-account-ui"] = semVersionedTag.tag;
+
+    const parsedPackageJson = (() => {
+        type ParsedPackageJson = {
+            dependencies?: Record<string, string>;
+            devDependencies?: Record<string, string>;
+        };
+
+        const zParsedPackageJson = (() => {
+            type TargetType = ParsedPackageJson;
+
+            const zTargetType = z.object({
+                dependencies: z.record(z.string()).optional(),
+                devDependencies: z.record(z.string()).optional()
+            });
+
+            assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+        })();
+        const parsedPackageJson = JSON.parse(
+            fs.readFileSync(buildContext.packageJsonFilePath).toString("utf8")
+        );
+
+        zParsedPackageJson.parse(parsedPackageJson);
+
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return parsedPackageJson;
+    })();
+
+    parsedPackageJson.dependencies = {
+        ...parsedPackageJson.dependencies,
+        ...dependencies.dependencies
+    };
+
+    parsedPackageJson.devDependencies = {
+        ...parsedPackageJson.devDependencies,
+        ...dependencies.devDependencies
+    };
+
+    if (Object.keys(parsedPackageJson.devDependencies).length === 0) {
+        delete parsedPackageJson.devDependencies;
+    }
+
+    fs.writeFileSync(
+        buildContext.packageJsonFilePath,
+        JSON.stringify(parsedPackageJson, undefined, 4)
+    );
+
+    run_npm_install: {
+        if (
+            JSON.parse(
+                fs
+                    .readFileSync(pathJoin(getThisCodebaseRootDirPath(), "package.json"))
+                    .toString("utf8")
+            )["version"] === "0.0.0"
+        ) {
+            //NOTE: Linked version
+            break run_npm_install;
+        }
+
+        npmInstall({ packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath) });
+    }
+
+    copyBoilerplate({
+        accountThemeType: "Single-Page",
+        accountThemeSrcDirPath
+    });
+
+    console.log(
+        [
+            chalk.green(
+                "The Single-Page account theme has been successfully initialized."
+            ),
+            `Using Account UI of Keycloak version: ${chalk.bold(semVersionedTag.tag.split("-")[0])}`,
+            `Directory created: ${chalk.bold(pathRelative(process.cwd(), accountThemeSrcDirPath))}`,
+            `Dependencies added to your project's package.json: `,
+            chalk.bold(JSON.stringify(dependencies, null, 2))
+        ].join("\n")
+    );
+}

src/bin/initialize-account-theme/src/multi-page/KcContext.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/ban-types */
+import type { ExtendKcContext } from "keycloakify/account";
+import type { KcEnvName, ThemeName } from "../kc.gen";
+
+export type KcContextExtension = {
+    themeName: ThemeName;
+    properties: Record<KcEnvName, string> & {};
+};
+
+export type KcContextExtensionPerPage = {};
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;

src/bin/initialize-account-theme/src/multi-page/KcPage.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from "react";
+import type { ClassKey } from "keycloakify/account";
+import type { KcContext } from "./KcContext";
+import { useI18n } from "./i18n";
+import DefaultPage from "keycloakify/account/DefaultPage";
+import Template from "keycloakify/account/Template";
+
+export default function KcPage(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    const { i18n } = useI18n({ kcContext });
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    default:
+                        return <DefaultPage kcContext={kcContext} i18n={i18n} classes={classes} Template={Template} doUseDefaultCss={true} />;
+                }
+            })()}
+        </Suspense>
+    );
+}
+
+const classes = {} satisfies { [key in ClassKey]?: string };

src/bin/initialize-account-theme/src/multi-page/KcPageStory.tsx

@@ -0,0 +1,38 @@
+import type { DeepPartial } from "keycloakify/tools/DeepPartial";
+import type { KcContext } from "./KcContext";
+import { createGetKcContextMock } from "keycloakify/account/KcContext";
+import type { KcContextExtension, KcContextExtensionPerPage } from "./KcContext";
+import KcPage from "./KcPage";
+import { themeNames, kcEnvDefaults } from "../kc.gen";
+
+const kcContextExtension: KcContextExtension = {
+    themeName: themeNames[0],
+    properties: {
+        ...kcEnvDefaults
+    }
+};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+    kcContextExtension,
+    kcContextExtensionPerPage,
+    overrides: {},
+    overridesPerPage: {}
+});
+
+export function createKcPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+    const { pageId } = params;
+
+    function KcPageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+        const { kcContext: overrides } = props;
+
+        const kcContextMock = getKcContextMock({
+            pageId,
+            overrides
+        });
+
+        return <KcPage kcContext={kcContextMock} />;
+    }
+
+    return { KcPageStory };
+}

src/bin/initialize-account-theme/src/multi-page/i18n.ts

@@ -0,0 +1,5 @@
+import { createUseI18n } from "keycloakify/account";
+
+export const { useI18n, ofTypeI18n } = createUseI18n({});
+
+export type I18n = typeof ofTypeI18n;

src/bin/initialize-account-theme/src/single-page/KcContext.ts

@@ -0,0 +1,7 @@
+import type { KcContextLike } from "@keycloakify/keycloak-account-ui";
+import type { KcEnvName } from "../kc.gen";
+
+export type KcContext = KcContextLike & {
+    themeType: "account";
+    properties: Record<KcEnvName, string>;
+};

src/bin/initialize-account-theme/src/single-page/KcPage.tsx

@@ -0,0 +1,11 @@
+import { lazy } from "react";
+import { KcAccountUiLoader } from "@keycloakify/keycloak-account-ui";
+import type { KcContext } from "./KcContext";
+
+const KcAccountUi = lazy(() => import("@keycloakify/keycloak-account-ui/KcAccountUi"));
+
+export default function KcPage(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    return <KcAccountUiLoader kcContext={kcContext} KcAccountUi={KcAccountUi} />;
+}

src/bin/initialize-account-theme/updateAccountThemeImplementationInConfig.ts

@@ -0,0 +1,97 @@
+import { join as pathJoin } from "path";
+import { assert, type Equals } from "tsafe/assert";
+import type { BuildContext } from "../shared/buildContext";
+import * as fs from "fs";
+import chalk from "chalk";
+import { z } from "zod";
+import { id } from "tsafe/id";
+
+export type BuildContextLike = {
+    bundler: BuildContext["bundler"];
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function updateAccountThemeImplementationInConfig(params: {
+    buildContext: BuildContext;
+    accountThemeType: "Single-Page" | "Multi-Page";
+}) {
+    const { buildContext, accountThemeType } = params;
+
+    switch (buildContext.bundler) {
+        case "vite":
+            {
+                const viteConfigPath = pathJoin(
+                    buildContext.projectDirPath,
+                    "vite.config.ts"
+                );
+
+                if (!fs.existsSync(viteConfigPath)) {
+                    console.log(
+                        chalk.bold(
+                            `You must manually set the accountThemeImplementation to "${accountThemeType}" in your vite config`
+                        )
+                    );
+                    break;
+                }
+
+                const viteConfigContent = fs
+                    .readFileSync(viteConfigPath)
+                    .toString("utf8");
+
+                const modifiedViteConfigContent = viteConfigContent.replace(
+                    /accountThemeImplementation\s*:\s*"none"/,
+                    `accountThemeImplementation: "${accountThemeType}"`
+                );
+
+                if (modifiedViteConfigContent === viteConfigContent) {
+                    console.log(
+                        chalk.bold(
+                            `You must manually set the accountThemeImplementation to "${accountThemeType}" in your vite.config.ts`
+                        )
+                    );
+                    break;
+                }
+
+                fs.writeFileSync(viteConfigPath, modifiedViteConfigContent);
+            }
+            break;
+        case "webpack":
+            {
+                const parsedPackageJson = (() => {
+                    type ParsedPackageJson = {
+                        keycloakify: Record<string, unknown>;
+                    };
+
+                    const zParsedPackageJson = (() => {
+                        type TargetType = ParsedPackageJson;
+
+                        const zTargetType = z.object({
+                            keycloakify: z.record(z.unknown())
+                        });
+
+                        assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+                        return id<z.ZodType<TargetType>>(zTargetType);
+                    })();
+
+                    const parsedPackageJson = JSON.parse(
+                        fs.readFileSync(buildContext.packageJsonFilePath).toString("utf8")
+                    );
+
+                    zParsedPackageJson.parse(parsedPackageJson);
+
+                    return parsedPackageJson;
+                })();
+
+                parsedPackageJson.keycloakify.accountThemeImplementation =
+                    accountThemeType;
+
+                fs.writeFileSync(
+                    buildContext.packageJsonFilePath,
+                    Buffer.from(JSON.stringify(parsedPackageJson, undefined, 4), "utf8")
+                );
+            }
+            break;
+    }
+}

src/bin/initialize-email-theme.ts

@@ -0,0 +1,66 @@
+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 { getBuildContext } from "./shared/buildContext";
+import * as fs from "fs";
+import type { CliCommandOptions } from "./main";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({ cliCommandOptions });
+
+    const emailThemeSrcDirPath = pathJoin(buildContext.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,
+        excludeMajorVersions: [],
+        doOmitPatch: false,
+        buildContext
+    });
+
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
+        keycloakVersion,
+        buildContext
+    });
+
+    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/BuildOptions.ts

@@ -1,180 +0,0 @@
-import { z } from "zod";
-import { assert } from "tsafe/assert";
-import type { Equals } from "tsafe";
-import { id } from "tsafe/id";
-import { parse as urlParse } from "url";
-
-type ParsedPackageJson = {
-    name: string;
-    version: string;
-    homepage?: string;
-    keycloakify?: {
-        extraPages?: string[];
-        extraThemeProperties?: string[];
-        areAppAndKeycloakServerSharingSameDomain?: boolean;
-    };
-};
-
-const zParsedPackageJson = z.object({
-    "name": z.string(),
-    "version": z.string(),
-    "homepage": z.string().optional(),
-    "keycloakify": z
-        .object({
-            "extraPages": z.array(z.string()).optional(),
-            "extraThemeProperties": z.array(z.string()).optional(),
-            "areAppAndKeycloakServerSharingSameDomain": z.boolean().optional()
-        })
-        .optional()
-});
-
-assert<Equals<ReturnType<typeof zParsedPackageJson["parse"]>, ParsedPackageJson>>();
-
-/** Consolidated build option gathered form CLI arguments and config in package.json */
-export type BuildOptions = BuildOptions.Standalone | BuildOptions.ExternalAssets;
-
-export namespace BuildOptions {
-    export type Common = {
-        isSilent: boolean;
-        version: string;
-        themeName: string;
-        extraPages?: string[];
-        extraThemeProperties?: string[];
-        //NOTE: Only for the pom.xml file, questionable utility...
-        groupId: string;
-    };
-
-    export type Standalone = Common & {
-        isStandalone: true;
-        urlPathname: string | undefined;
-    };
-
-    export type ExternalAssets = ExternalAssets.SameDomain | ExternalAssets.DifferentDomains;
-
-    export namespace ExternalAssets {
-        export type CommonExternalAssets = Common & {
-            isStandalone: false;
-        };
-
-        export type SameDomain = CommonExternalAssets & {
-            areAppAndKeycloakServerSharingSameDomain: true;
-        };
-
-        export type DifferentDomains = CommonExternalAssets & {
-            areAppAndKeycloakServerSharingSameDomain: false;
-            urlOrigin: string;
-            urlPathname: string | undefined;
-        };
-    }
-}
-
-export function readBuildOptions(params: {
-    packageJson: string;
-    CNAME: string | undefined;
-    isExternalAssetsCliParamProvided: boolean;
-    isSilent: boolean;
-}): BuildOptions {
-    const { packageJson, CNAME, isExternalAssetsCliParamProvided, isSilent } = params;
-
-    const parsedPackageJson = zParsedPackageJson.parse(JSON.parse(packageJson));
-
-    const url = (() => {
-        const { homepage } = parsedPackageJson;
-
-        let url: URL | undefined = undefined;
-
-        if (homepage !== undefined) {
-            url = new URL(homepage);
-        }
-
-        if (CNAME !== undefined) {
-            url = new URL(`https://${CNAME.replace(/\s+$/, "")}`);
-        }
-
-        if (url === undefined) {
-            return undefined;
-        }
-
-        return {
-            "origin": url.origin,
-            "pathname": (() => {
-                const out = url.pathname.replace(/([^/])$/, "$1/");
-
-                return out === "/" ? undefined : out;
-            })()
-        };
-    })();
-
-    const common: BuildOptions.Common = (() => {
-        const { name, keycloakify = {}, version, homepage } = parsedPackageJson;
-
-        const { extraPages, extraThemeProperties } = keycloakify ?? {};
-
-        const themeName = name
-            .replace(/^@(.*)/, "$1")
-            .split("/")
-            .join("-");
-
-        return {
-            themeName,
-            "groupId": (() => {
-                const fallbackGroupId = `${themeName}.keycloak`;
-
-                return (
-                    (!homepage
-                        ? fallbackGroupId
-                        : urlParse(homepage)
-                              .host?.replace(/:[0-9]+$/, "")
-                              ?.split(".")
-                              .reverse()
-                              .join(".") ?? fallbackGroupId) + ".keycloak"
-                );
-            })(),
-            "version": version,
-            extraPages,
-            extraThemeProperties,
-            isSilent
-        };
-    })();
-
-    if (isExternalAssetsCliParamProvided) {
-        const commonExternalAssets = id<BuildOptions.ExternalAssets.CommonExternalAssets>({
-            ...common,
-            "isStandalone": false
-        });
-
-        if (parsedPackageJson.keycloakify?.areAppAndKeycloakServerSharingSameDomain) {
-            return id<BuildOptions.ExternalAssets.SameDomain>({
-                ...commonExternalAssets,
-                "areAppAndKeycloakServerSharingSameDomain": true
-            });
-        } else {
-            assert(
-                url !== undefined,
-                [
-                    "Can't compile in external assets mode if we don't know where",
-                    "the app will be hosted.",
-                    "You should provide a homepage field in the package.json (or create a",
-                    "public/CNAME file.",
-                    "Alternatively, if your app and the Keycloak server are on the same domain, ",
-                    "eg https://example.com is your app and https://example.com/auth is the keycloak",
-                    'admin UI, you can set "keycloakify": { "areAppAndKeycloakServerSharingSameDomain": true }',
-                    "in your package.json"
-                ].join(" ")
-            );
-
-            return id<BuildOptions.ExternalAssets.DifferentDomains>({
-                ...commonExternalAssets,
-                "areAppAndKeycloakServerSharingSameDomain": false,
-                "urlOrigin": url.origin,
-                "urlPathname": url.pathname
-            });
-        }
-    }
-
-    return id<BuildOptions.Standalone>({
-        ...common,
-        "isStandalone": true,
-        "urlPathname": url?.pathname
-    });
-}

src/bin/keycloakify/buildJars/buildJar.ts

@@ -0,0 +1,226 @@
+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 { BuildContext } from "../../shared/buildContext";
+import * as fs from "fs/promises";
+import { ACCOUNT_V1_THEME_NAME } from "../../shared/constants";
+import {
+    generatePom,
+    BuildContextLike as BuildContextLike_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 { writeMetaInfKeycloakThemes } from "../../shared/metaInfKeycloakThemes";
+
+export type BuildContextLike = BuildContextLike_generatePom & {
+    keycloakifyBuildDirPath: string;
+    themeNames: string[];
+    artifactId: string;
+    themeVersion: string;
+    cacheDirPath: string;
+    implementedThemeTypes: BuildContext["implementedThemeTypes"];
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export async function buildJar(params: {
+    jarFileBasename: string;
+    keycloakAccountV1Version: KeycloakAccountV1Version;
+    keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
+    resourcesDirPath: string;
+    doesImplementAccountV1Theme: boolean;
+    buildContext: BuildContextLike;
+}): Promise<void> {
+    const {
+        jarFileBasename,
+        keycloakAccountV1Version,
+        keycloakThemeAdditionalInfoExtensionVersion,
+        resourcesDirPath,
+        doesImplementAccountV1Theme,
+        buildContext
+    } = params;
+
+    const keycloakifyBuildCacheDirPath = pathJoin(
+        buildContext.cacheDirPath,
+        "maven",
+        jarFileBasename.replace(".jar", "")
+    );
+
+    const tmpResourcesDirPath = pathJoin(
+        keycloakifyBuildCacheDirPath,
+        "src",
+        "main",
+        "resources"
+    );
+
+    rmSync(tmpResourcesDirPath, { recursive: true, force: true });
+
+    transformCodebase({
+        srcDirPath: resourcesDirPath,
+        destDirPath: tmpResourcesDirPath,
+        transformSourceCode:
+            !doesImplementAccountV1Theme || keycloakAccountV1Version !== null
+                ? undefined
+                : (params: {
+                      fileRelativePath: string;
+                      sourceCode: Buffer;
+                  }): { modifiedSourceCode: Buffer } | undefined => {
+                      const { fileRelativePath, sourceCode } = params;
+
+                      if (
+                          isInside({
+                              dirPath: pathJoin("theme", ACCOUNT_V1_THEME_NAME),
+                              filePath: fileRelativePath
+                          })
+                      ) {
+                          return undefined;
+                      }
+
+                      for (const themeName of buildContext.themeNames) {
+                          if (
+                              fileRelativePath ===
+                              pathJoin("theme", themeName, "account", "theme.properties")
+                          ) {
+                              const modifiedSourceCode = Buffer.from(
+                                  sourceCode
+                                      .toString("utf8")
+                                      .replace(
+                                          `parent=${ACCOUNT_V1_THEME_NAME}`,
+                                          "parent=keycloak"
+                                      ),
+                                  "utf8"
+                              );
+
+                              assert(
+                                  Buffer.compare(modifiedSourceCode, sourceCode) !== 0
+                              );
+
+                              return { modifiedSourceCode };
+                          }
+                      }
+
+                      return { modifiedSourceCode: sourceCode };
+                  }
+    });
+
+    remove_account_v1_in_meta_inf: {
+        if (!doesImplementAccountV1Theme) {
+            // NOTE: We do not have account v1 anyway
+            break remove_account_v1_in_meta_inf;
+        }
+
+        if (keycloakAccountV1Version !== null) {
+            // NOTE: No, we need to keep account-v1 in meta-inf
+            break remove_account_v1_in_meta_inf;
+        }
+
+        writeMetaInfKeycloakThemes({
+            resourcesDirPath: tmpResourcesDirPath,
+            getNewMetaInfKeycloakTheme: ({ metaInfKeycloakTheme }) => {
+                assert(metaInfKeycloakTheme !== undefined);
+
+                metaInfKeycloakTheme.themes = metaInfKeycloakTheme.themes.filter(
+                    ({ name }) => name !== ACCOUNT_V1_THEME_NAME
+                );
+
+                return metaInfKeycloakTheme;
+            }
+        });
+    }
+
+    route_legacy_pages: {
+        if (!buildContext.implementedThemeTypes.login.isImplemented) {
+            break route_legacy_pages;
+        }
+
+        (["register.ftl", "login-update-profile.ftl"] as const).forEach(pageId =>
+            buildContext.themeNames.map(themeName => {
+                const ftlFilePath = pathJoin(
+                    tmpResourcesDirPath,
+                    "theme",
+                    themeName,
+                    "login",
+                    pageId
+                );
+
+                const ftlFileContent = readFileSync(ftlFilePath).toString("utf8");
+
+                const ftlFileBasename = (() => {
+                    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(
+                    `"ftlTemplateFileName": "${pageId}"`,
+                    `"ftlTemplateFileName": "${ftlFileBasename}"`
+                );
+
+                assert(modifiedFtlFileContent !== ftlFileContent);
+
+                fs.writeFile(
+                    pathJoin(pathDirname(ftlFilePath), ftlFileBasename),
+                    Buffer.from(modifiedFtlFileContent, "utf8")
+                );
+            })
+        );
+    }
+
+    {
+        const { pomFileCode } = generatePom({
+            buildContext,
+            keycloakAccountV1Version,
+            keycloakThemeAdditionalInfoExtensionVersion
+        });
+
+        await fs.writeFile(
+            pathJoin(keycloakifyBuildCacheDirPath, "pom.xml"),
+            Buffer.from(pomFileCode, "utf8")
+        );
+    }
+
+    await new Promise<void>((resolve, reject) =>
+        child_process.exec(
+            `mvn install -Dmaven.repo.local="${pathJoin(keycloakifyBuildCacheDirPath, ".m2")}"`,
+            { cwd: keycloakifyBuildCacheDirPath },
+            error => {
+                if (error !== null) {
+                    console.error(
+                        `Build jar failed: ${JSON.stringify(
+                            {
+                                jarFileBasename,
+                                keycloakAccountV1Version,
+                                keycloakThemeAdditionalInfoExtensionVersion
+                            },
+                            null,
+                            2
+                        )}`
+                    );
+
+                    reject(error);
+                    return;
+                }
+                resolve();
+            }
+        )
+    );
+
+    await fs.rename(
+        pathJoin(
+            keycloakifyBuildCacheDirPath,
+            "target",
+            `${buildContext.artifactId}-${buildContext.themeVersion}.jar`
+        ),
+        pathJoin(buildContext.keycloakifyBuildDirPath, jarFileBasename)
+    );
+}

src/bin/keycloakify/buildJars/buildJars.ts

@@ -0,0 +1,68 @@
+import { assert } from "tsafe/assert";
+import {
+    keycloakAccountV1Versions,
+    keycloakThemeAdditionalInfoExtensionVersions
+} from "./extensionVersions";
+import { getKeycloakVersionRangeForJar } from "./getKeycloakVersionRangeForJar";
+import { buildJar, BuildContextLike as BuildContextLike_buildJar } from "./buildJar";
+import type { BuildContext } from "../../shared/buildContext";
+
+export type BuildContextLike = BuildContextLike_buildJar & {
+    projectDirPath: string;
+    keycloakifyBuildDirPath: string;
+    implementedThemeTypes: BuildContext["implementedThemeTypes"];
+    jarTargets: BuildContext["jarTargets"];
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export async function buildJars(params: {
+    resourcesDirPath: string;
+    buildContext: BuildContextLike;
+}): Promise<void> {
+    const { resourcesDirPath, buildContext } = params;
+
+    const doesImplementAccountV1Theme =
+        buildContext.implementedThemeTypes.account.isImplemented &&
+        buildContext.implementedThemeTypes.account.type === "Multi-Page";
+
+    await Promise.all(
+        keycloakAccountV1Versions
+            .map(keycloakAccountV1Version =>
+                keycloakThemeAdditionalInfoExtensionVersions.map(
+                    keycloakThemeAdditionalInfoExtensionVersion => {
+                        const keycloakVersionRange = getKeycloakVersionRangeForJar({
+                            doesImplementAccountV1Theme,
+                            keycloakAccountV1Version,
+                            keycloakThemeAdditionalInfoExtensionVersion
+                        });
+
+                        if (keycloakVersionRange === undefined) {
+                            return undefined;
+                        }
+
+                        const jarTarget = buildContext.jarTargets.find(
+                            jarTarget =>
+                                jarTarget.keycloakVersionRange === keycloakVersionRange
+                        );
+
+                        if (jarTarget === undefined) {
+                            return undefined;
+                        }
+
+                        const { jarFileBasename } = jarTarget;
+
+                        return buildJar({
+                            jarFileBasename,
+                            keycloakAccountV1Version,
+                            keycloakThemeAdditionalInfoExtensionVersion,
+                            resourcesDirPath,
+                            doesImplementAccountV1Theme,
+                            buildContext
+                        });
+                    }
+                )
+            )
+            .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", "0.6"] 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 { BuildContext } from "../../shared/buildContext";
+import type {
+    KeycloakAccountV1Version,
+    KeycloakThemeAdditionalInfoExtensionVersion
+} from "./extensionVersions";
+
+export type BuildContextLike = {
+    groupId: string;
+    artifactId: string;
+    themeVersion: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function generatePom(params: {
+    keycloakAccountV1Version: KeycloakAccountV1Version;
+    keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
+    buildContext: BuildContextLike;
+}) {
+    const {
+        keycloakAccountV1Version,
+        keycloakThemeAdditionalInfoExtensionVersion,
+        buildContext
+    } = 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>${buildContext.groupId}</groupId>`,
+            `	<artifactId>${buildContext.artifactId}</artifactId>`,
+            `	<version>${buildContext.themeVersion}</version>`,
+            `	<name>${buildContext.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,96 @@
+import { assert, type Equals } from "tsafe/assert";
+import type {
+    KeycloakAccountV1Version,
+    KeycloakThemeAdditionalInfoExtensionVersion
+} from "./extensionVersions";
+import type { KeycloakVersionRange } from "../../shared/KeycloakVersionRange";
+
+export function getKeycloakVersionRangeForJar(params: {
+    doesImplementAccountV1Theme: boolean;
+    keycloakAccountV1Version: KeycloakAccountV1Version;
+    keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
+}): KeycloakVersionRange | undefined {
+    const {
+        keycloakAccountV1Version,
+        keycloakThemeAdditionalInfoExtensionVersion,
+        doesImplementAccountV1Theme
+    } = params;
+
+    if (doesImplementAccountV1Theme) {
+        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" as const;
+                    }
+                    assert<
+                        Equals<typeof keycloakThemeAdditionalInfoExtensionVersion, never>
+                    >(false);
+                case "0.6":
+                    switch (keycloakThemeAdditionalInfoExtensionVersion) {
+                        case null:
+                            return undefined;
+                        case "1.1.5":
+                            return "25-and-above" as const;
+                    }
+            }
+            assert<Equals<typeof keycloakAccountV1Version, never>>(false);
+        })();
+
+        assert<
+            Equals<
+                typeof keycloakVersionRange,
+                KeycloakVersionRange.WithAccountV1Theme | 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.WithoutAccountV1Theme | undefined
+            >
+        >();
+
+        return keycloakVersionRange;
+    }
+}

src/bin/keycloakify/buildJars/index.ts

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

src/bin/keycloakify/ftlValuesGlobalName.ts

@@ -1 +0,0 @@
-export const ftlValuesGlobalName = "kcContext";

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -1,350 +0,0 @@
-<script>const _= 
-<#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
-(()=>{
-
-    const out = 
-${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
-
-    out["msg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
-    out["advancedMsg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
-
-    out["messagesPerField"]= {
-        <#assign fieldNames = [
-            "global", "userLabel", "username", "email", "firstName", "lastName", "password", "password-confirm",
-            "totp", "totpSecret", "SAMLRequest", "SAMLResponse", "relayState", "device_user_code", "code", 
-            "password-new", "rememberMe", "login", "authenticationExecution", "cancel-aia", "clientDataJSON", 
-            "authenticatorData", "signature", "credentialId", "userHandle", "error", "authn_use_chk", "authenticationExecution", 
-            "isSetRetry", "try-again", "attestationObject", "publicKeyCredentialId", "authenticatorLabel"
-        ]>
-    
-        <#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, x) {
-            <#if !messagesPerField?? >
-                return undefined;
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-                        <#attempt>
-                            return "${messagesPerField.printIfExists(fieldName,'1')}" ? x : undefined;
-                        <#recover>
-                        </#attempt>
-                    }
-                </#list>
-                throw new Error("There is no " + fieldName + " field");
-            </#if>
-        },
-        "existsError": function (fieldName) {
-            <#if !messagesPerField?? >
-                return false;
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-                        <#attempt>
-                            return <#if messagesPerField.existsError('${fieldName}')>true<#else>false</#if>;
-                        <#recover>
-                        </#attempt>
-                    }
-                </#list>
-                throw new Error("There is no " + fieldName + " field");
-            </#if>
-        },
-        "get": function (fieldName) {
-            <#if !messagesPerField?? >
-                return '';
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-                        <#attempt>
-                            <#if messagesPerField.existsError('${fieldName}')>
-                                return "${messagesPerField.get('${fieldName}')?no_esc}";
-                            </#if>
-                        <#recover>
-                        </#attempt>
-                    }
-                </#list>
-                throw new Error("There is no " + fieldName + " field");
-            </#if>
-        },
-        "exists": function (fieldName) {
-            <#if !messagesPerField?? >
-                return false;
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-                        <#attempt>
-                            return <#if messagesPerField.exists('${fieldName}')>true<#else>false</#if>;
-                        <#recover>
-                        </#attempt>
-                    }
-                </#list>
-                throw new Error("There is no " + fieldName + " field");
-            </#if>
-        }
-    };
-
-    out["pageId"] = "${pageId}";
-
-    return out;
-
-})()
-<#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">
-            </#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/InseeFrLab/keycloakify/pull/65#issuecomment-991896344 (reports with saml-post-form.ftl) -->
-                        <#-- https://github.com/InseeFrLab/keycloakify/issues/91#issue-1212319466 (reports with error.ftl and Kc18) -->
-                        <#-- https://github.com/InseeFrLab/keycloakify/issues/109#issuecomment-1134610163 -->
-                        key == "loginAction" && 
-                        are_same_path(path, ["url"]) && 
-                        ["saml-post-form.ftl", "error.ftl", "info.ftl"]?seq_contains(pageId) &&
-                        !(auth?has_content && auth.showTryAnotherWayLink())
-                    ) || (
-                        ["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"])
-                    )
-                >
-                    <#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
-                    <#continue>
-                </#if>
-
-                <#if 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())>
-                            <#continue>
-                        </#if>
-                    <#recover>
-                    </#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>
-
-            <#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>
-
-        <#attempt>
-            <#return '"' + object?js_string + '"'>;
-        <#recover>
-        </#attempt>
-
-        <#return "ABORT: Couldn't convert into string non hash, non method, non boolean, non enumerable object">
-
-</#function>
-<#function are_same_path path searchedPath>
-
-    <#if path?size != searchedPath?size>
-        <#return false>
-    </#if>
-
-    <#local i=0>
-
-    <#list path as property>
-
-        <#local searchedProperty=searchedPath[i]>
-
-        <#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>
-
-        <#local i+= 1>
-
-    </#list>
-
-    <#return true>
-
-</#function>
-</script>

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -1,103 +1,74 @@
-import cheerio from "cheerio";
-import { replaceImportsFromStaticInJsCode } from "../replacers/replaceImportsFromStaticInJsCode";
-import { generateCssCodeToDefineGlobals } from "../replacers/replaceImportsInCssCode";
-import { replaceImportsInInlineCssCode } from "../replacers/replaceImportsInInlineCssCode";
+import * as cheerio from "cheerio";
+import {
+    replaceImportsInJsCode,
+    BuildContextLike as BuildContextLike_replaceImportsInJsCode
+} from "../replacers/replaceImportsInJsCode";
+import {
+    replaceImportsInCssCode,
+    BuildContextLike as BuildContextLike_replaceImportsInCssCode
+} from "../replacers/replaceImportsInCssCode";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
-import { objectKeys } from "tsafe/objectKeys";
-import { ftlValuesGlobalName } from "../ftlValuesGlobalName";
-import type { BuildOptions } from "../BuildOptions";
+import type { BuildContext } from "../../shared/buildContext";
 import { assert } from "tsafe/assert";
-import { Reflect } from "tsafe/Reflect";
+import {
+    type ThemeType,
+    BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR,
+    RESOURCES_COMMON
+} from "../../shared/constants";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
 
-// https://github.com/keycloak/keycloak/blob/main/services/src/main/java/org/keycloak/forms/login/freemarker/Templates.java
-export const pageIds = [
-    "login.ftl",
-    "login-username.ftl",
-    "login-password.ftl",
-    "webauthn-authenticate.ftl",
-    "register.ftl",
-    "register-user-profile.ftl",
-    "info.ftl",
-    "error.ftl",
-    "login-reset-password.ftl",
-    "login-verify-email.ftl",
-    "terms.ftl",
-    "login-otp.ftl",
-    "login-update-profile.ftl",
-    "login-update-password.ftl",
-    "login-idp-link-confirm.ftl",
-    "login-idp-link-email.ftl",
-    "login-page-expired.ftl",
-    "login-config-totp.ftl",
-    "logout-confirm.ftl",
-    "update-user-profile.ftl",
-    "idp-review-user-profile.ftl"
-] as const;
-
-export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
-
-export namespace BuildOptionsLike {
-    export type Standalone = {
-        isStandalone: true;
+export type BuildContextLike = BuildContextLike_replaceImportsInJsCode &
+    BuildContextLike_replaceImportsInCssCode & {
         urlPathname: string | undefined;
+        themeVersion: string;
+        kcContextExclusionsFtlCode: string | undefined;
     };
 
-    export type ExternalAssets = ExternalAssets.SameDomain | ExternalAssets.DifferentDomains;
-
-    export namespace ExternalAssets {
-        export type CommonExternalAssets = {
-            isStandalone: false;
-        };
-
-        export type SameDomain = CommonExternalAssets & {
-            areAppAndKeycloakServerSharingSameDomain: true;
-        };
-
-        export type DifferentDomains = CommonExternalAssets & {
-            areAppAndKeycloakServerSharingSameDomain: false;
-            urlOrigin: string;
-            urlPathname: string | undefined;
-        };
-    }
-}
-
-{
-    const buildOptions = Reflect<BuildOptions>();
-
-    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
-}
-
-export type PageId = typeof pageIds[number];
+assert<BuildContext extends BuildContextLike ? true : false>();
 
 export function generateFtlFilesCodeFactory(params: {
+    themeName: string;
     indexHtmlCode: string;
-    //NOTE: Expected to be an empty object if external assets mode is enabled.
-    cssGlobalsToDefine: Record<string, string>;
-    buildOptions: BuildOptionsLike;
+    buildContext: BuildContextLike;
+    keycloakifyVersion: string;
+    themeType: ThemeType;
+    fieldNames: string[];
 }) {
-    const { cssGlobalsToDefine, indexHtmlCode, buildOptions } = params;
+    const {
+        themeName,
+        indexHtmlCode,
+        buildContext,
+        keycloakifyVersion,
+        themeType,
+        fieldNames
+    } = params;
 
     const $ = cheerio.load(indexHtmlCode);
 
     fix_imports_statements: {
-        if (!buildOptions.isStandalone && buildOptions.areAppAndKeycloakServerSharingSameDomain) {
-            break fix_imports_statements;
-        }
-
         $("script:not([src])").each((...[, element]) => {
-            const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-                "jsCode": $(element).html()!,
-                buildOptions
+            const jsCode = $(element).html();
+
+            assert(jsCode !== null);
+
+            const { fixedJsCode } = replaceImportsInJsCode({
+                jsCode,
+                buildContext
             });
 
             $(element).text(fixedJsCode);
         });
 
         $("style").each((...[, element]) => {
-            const { fixedCssCode } = replaceImportsInInlineCssCode({
-                "cssCode": $(element).html()!,
-                buildOptions
+            const cssCode = $(element).html();
+
+            assert(cssCode !== null);
+
+            const { fixedCssCode } = replaceImportsInCssCode({
+                cssCode,
+                cssFileRelativeDirPath: undefined,
+                buildContext
             });
 
             $(element).text(fixedCssCode);
@@ -106,7 +77,8 @@ export function generateFtlFilesCodeFactory(params: {
         (
             [
                 ["link", "href"],
-                ["script", "src"]
+                ["script", "src"],
+                ["script", "data-src"]
             ] as const
         ).forEach(([selector, attrName]) =>
             $(selector).each((...[, element]) => {
@@ -118,54 +90,71 @@ export function generateFtlFilesCodeFactory(params: {
 
                 $(element).attr(
                     attrName,
-                    buildOptions.isStandalone
-                        ? href.replace(new RegExp(`^${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`), "${url.resourcesPath}/build/")
-                        : href.replace(/^\//, `${buildOptions.urlOrigin}/`)
+                    href.replace(
+                        new RegExp(
+                            `^${(buildContext.urlPathname ?? "/").replace(/\//g, "\\/")}`
+                        ),
+                        `\${xKeycloakify.resourcesPath}/${BASENAME_OF_KEYCLOAKIFY_RESOURCES_DIR}/`
+                    )
                 );
             })
         );
-
-        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 replaceValueBySearchValue = {
-        '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }': fs
-            .readFileSync(pathJoin(__dirname, "ftl_object_to_js_code_declaring_an_object.ftl"))
-            .toString("utf8")
-            .match(/^<script>const _=((?:.|\n)+)<\/script>[\n]?$/)![1],
-        "<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->": [
-            "<#if scripts??>",
-            "    <#list scripts as script>",
-            '        <script src="${script}" type="text/javascript"></script>',
-            "    </#list>",
-            "</#if>"
-        ].join("\n")
-    };
+    const kcContextDeclarationTemplateFtl = fs
+        .readFileSync(
+            pathJoin(
+                getThisCodebaseRootDirPath(),
+                "src",
+                "bin",
+                "keycloakify",
+                "generateFtl",
+                "kcContextDeclarationTemplate.ftl"
+            )
+        )
+        .toString("utf8")
+        .replace("{{themeType}}", themeType)
+        .replace("{{themeName}}", themeName)
+        .replace("{{keycloakifyVersion}}", keycloakifyVersion)
+        .replace("{{themeVersion}}", buildContext.themeVersion)
+        .replace("{{fieldNames}}", fieldNames.map(name => `"${name}"`).join(", "))
+        .replace("{{RESOURCES_COMMON}}", RESOURCES_COMMON)
+        .replace(
+            "{{userDefinedExclusions}}",
+            buildContext.kcContextExclusionsFtlCode ?? ""
+        );
+
+    const ftlObjectToJsCodeDeclaringAnObjectPlaceholder =
+        '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }';
 
     $("head").prepend(
-        [
-            "<script>",
-            `    window.${ftlValuesGlobalName}= ${objectKeys(replaceValueBySearchValue)[0]};`,
-            "</script>",
-            "",
-            objectKeys(replaceValueBySearchValue)[1]
-        ].join("\n")
+        `<script>\n${ftlObjectToJsCodeDeclaringAnObjectPlaceholder}\n</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 }): {
@@ -178,10 +167,14 @@ export function generateFtlFilesCodeFactory(params: {
         let ftlCode = $.html();
 
         Object.entries({
-            ...replaceValueBySearchValue,
-            //If updated, don't forget to change in the ftl script as well.
-            "PAGE_ID_xIgLsPgGId9D8e": pageId
-        }).map(([searchValue, replaceValue]) => (ftlCode = ftlCode.replace(searchValue, replaceValue)));
+            [ftlObjectToJsCodeDeclaringAnObjectPlaceholder]:
+                kcContextDeclarationTemplateFtl,
+            "{{pageId}}": pageId,
+            "{{ftlTemplateFileName}}": pageId
+        }).map(
+            ([searchValue, replaceValue]) =>
+                (ftlCode = ftlCode.replace(searchValue, replaceValue))
+        );
 
         return { ftlCode };
     }

src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl

@@ -0,0 +1,667 @@
+<#assign xKeycloakify={
+    "messages": {},
+    "pageId": "{{pageId}}",
+    "ftlTemplateFileName": "{{ftlTemplateFileName}}",
+    "themeType": "{{themeType}}",
+    "themeName": "{{themeName}}",
+    "keycloakifyVersion": "{{keycloakifyVersion}}",
+    "themeVersion": "{{themeVersion}}",
+    "resourcesPath": ""
+}>
+
+<#if url?? && url?is_hash && url.resourcesPath?? && url.resourcesPath?is_string>
+    <#assign xKeycloakify = xKeycloakify + { "resourcesPath": url.resourcesPath }>
+</#if>
+<#if resourceUrl?? && resourceUrl?is_string>
+    <#assign xKeycloakify = xKeycloakify + { "resourcesPath": resourceUrl }>
+</#if>
+
+const kcContext = ${toJsDeclarationString(.data_model, [])?no_esc};
+kcContext.keycloakifyVersion = "${xKeycloakify.keycloakifyVersion}";
+kcContext.themeVersion = "${xKeycloakify.themeVersion}";
+kcContext.themeType = "${xKeycloakify.themeType}";
+kcContext.themeName = "${xKeycloakify.themeName}";
+kcContext.pageId = "${xKeycloakify.pageId}";
+kcContext.ftlTemplateFileName = "${xKeycloakify.ftlTemplateFileName}";
+
+<@addNonAutomaticallyGatherableMessagesToXKeycloakifyMessages />
+
+kcContext["x-keycloakify"] = {};
+
+kcContext["x-keycloakify"].resourcesPath = "${xKeycloakify.resourcesPath}";
+
+{
+    var messages = {};
+    <#list xKeycloakify.messages as key, resolvedMsg>
+        messages["${key}"] = decodeHtmlEntities("${resolvedMsg?js_string}");
+    </#list>
+    kcContext["x-keycloakify"].messages = messages;
+}
+
+if( 
+    kcContext.url instanceof Object &&
+    typeof kcContext.url.resourcesPath === "string"
+){
+    kcContext.url.resourcesCommonPath = kcContext.url.resourcesPath + "/{{RESOURCES_COMMON}}";
+}
+
+if( kcContext.messagesPerField ){
+    var existsError_singleFieldName = kcContext.messagesPerField.existsError;
+    kcContext.messagesPerField.existsError = function (){
+        for( let i = 0; i < arguments.length; i++ ){
+            if( existsError_singleFieldName(arguments[i]) ){
+                return true;
+            }
+        }
+        return false;
+    };
+    kcContext.messagesPerField.exists = function (fieldName) {
+        return kcContext.messagesPerField.get(fieldName) !== "";
+    };
+    kcContext.messagesPerField.printIfExists = function (fieldName, text) {
+        return kcContext.messagesPerField.exists(fieldName) ? text : undefined;
+    };
+    kcContext.messagesPerField.getFirstError = function () {
+        for( let i = 0; i < arguments.length; i++ ){
+            const fieldName = arguments[i];
+            if( kcContext.messagesPerField.existsError(fieldName) ){
+                return kcContext.messagesPerField.get(fieldName);
+            }
+        }
+    };
+}
+attributes_to_attributesByName: {
+    if( !kcContext.profile ){
+        break attributes_to_attributesByName;
+    }
+    if( !kcContext.profile.attributes ){
+        break attributes_to_attributesByName;
+    }
+    var attributes = kcContext.profile.attributes;
+    delete kcContext.profile.attributes;
+    kcContext.profile.attributesByName = {};
+    attributes.forEach(function(attribute){
+        kcContext.profile.attributesByName[attribute.name] = attribute;
+    });
+}
+window.kcContext = kcContext;
+function decodeHtmlEntities(htmlStr){
+    var element = decodeHtmlEntities.element;
+    if (!element) {
+        element = document.createElement("textarea");
+        decodeHtmlEntities.element = element;
+    }
+    element.innerHTML = htmlStr;
+    return element.value;
+}
+
+<#function toJsDeclarationString object path>
+    <#local isHash = -1>
+    <#attempt>
+        <#local isHash = object?is_hash || object?is_hash_ex>
+    <#recover>
+        <#return "ABORT: Can't evaluate if " + path?join(".") + " is a hash">
+    </#attempt>
+
+    <#if isHash>
+        <#if path?size gt 10>
+            <#return "ABORT: Too many recursive calls, path: " + path?join(".")>
+        </#if>
+        <#local keys = -1>
+
+        <#attempt>
+            <#local keys = object?keys>
+        <#recover>
+            <#return "ABORT: We can't list keys on object">
+        </#attempt>
+
+        <#local outSeq = []>
+
+        <#list keys as key>
+            <#if ["class","declaredConstructors","superclass","declaringClass" ]?seq_contains(key) >
+                <#continue>
+            </#if>
+
+            <#if (
+                    areSamePath(path, ["url"]) &&
+                    ["loginUpdatePasswordUrl", "loginUpdateProfileUrl", "loginUsernameReminderUrl", "loginUpdateTotpUrl"]?seq_contains(key)
+                ) || (
+                    key == "updateProfileCtx" && 
+                    areSamePath(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" && 
+                    areSamePath(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(xKeycloakify.pageId) &&
+                    !(auth?has_content && auth.showTryAnotherWayLink())
+                ) || (
+                    <#-- https://github.com/keycloakify/keycloakify/issues/362 -->
+                    ["secretData", "value"]?seq_contains(key) && 
+                    areSamePath(path, [ "totp", "otpCredentials", "*" ])
+                ) || (
+                    ["contextData", "idpConfig", "idp", "authenticationSession"]?seq_contains(key) &&
+                    areSamePath(path, ["brokerContext"]) &&
+                    ["login-idp-link-confirm.ftl", "login-idp-link-email.ftl" ]?seq_contains(xKeycloakify.pageId)
+                ) || (
+                    key == "identityProviderBrokerCtx" && 
+                    areSamePath(path, []) &&
+                    ["login-idp-link-confirm.ftl", "login-idp-link-email.ftl" ]?seq_contains(xKeycloakify.pageId)
+                ) ||  (
+                    ["masterAdminClient", "delegateForUpdate", "defaultRole"]?seq_contains(key) &&
+                    areSamePath(path, ["realm"])
+                ) || (
+                    xKeycloakify.pageId == "error.ftl" &&
+                    areSamePath(path, ["realm"]) &&
+                    !["name", "displayName", "displayNameHtml", "internationalizationEnabled", "registrationEmailAsUsername" ]?seq_contains(key)
+                ) || (
+                    xKeycloakify.pageId == "applications.ftl" &&
+                    ( 
+                        key == "realm" || 
+                        key == "container" 
+                    ) &&
+                    isSubpath(path, ["applications", "applications"])
+                ) || (
+                    key == "delegateForUpdate" &&
+                    areSamePath(path, ["user"])
+                ) || (
+                    <#-- Security audit forwarded by Garth (Gmail) -->
+                    key == "saml.signing.private.key" &&
+                    areSamePath(path, ["client", "attributes"])
+                ) || (
+                    <#-- See: https://github.com/keycloakify/keycloakify/issues/534 -->
+                    key == "password" &&
+                    areSamePath(path, ["login"])
+                ) || (
+                    <#-- Remove realmAttributes added by https://github.com/jcputney/keycloak-theme-additional-info-extension for peace of mind. -->
+                    key == "realmAttributes" &&
+                    areSamePath(path, [])
+                ) || (
+                    <#-- attributesByName adds a lot of noise to the output and is not needed, we already have profile.attributes -->
+                    key == "attributesByName" &&
+                    areSamePath(path, ["profile"]) 
+                ) || (
+                    <#-- We already have the attributes in profile speedup the rendering by filtering it out from the register object -->
+                    (key == "attributes" || key == "attributesByName") &&
+                    areSamePath(path, ["register"])
+                ) || (
+                    areSamePath(path, ["properties"]) &&
+                    (
+                        key?starts_with("kc") || 
+                        key == "locales" || 
+                        key == "import" || 
+                        key == "parent" || 
+                        key == "meta" ||
+                        key == "stylesCommon" ||
+                        key == "styles" ||
+                        key == "accountResourceProvider"
+                    )
+                ) || (
+                    key == "execution" &&
+                    areSamePath(path, [])
+                ) || (
+                    key == "entity" &&
+                    areSamePath(path, ["user"])
+                ) || (
+                    key == "attributes" &&
+                    areSamePath(path, ["realm"])
+                ) || (
+                    xKeycloakify.pageId == "index.ftl" &&
+                    xKeycloakify.themeType == "account" &&
+                    areSamePath(path, ["realm"]) &&
+                    ![ 
+                        "name",
+                        "registrationEmailAsUsername",
+                        "editUsernameAllowed",
+                        "isInternationalizationEnabled",
+                        "identityFederationEnabled",
+                        "userManagedAccessAllowed"
+                    ]?seq_contains(key)
+                )
+            >
+                <#-- <#local outSeq += ["/*" + path?join(".") + "." + key + " excluded*/"]> -->
+                <#continue>
+            </#if>
+
+            <#-- https://github.com/keycloakify/keycloakify/discussions/406 -->
+            <#if (
+                key == "attemptedUsername" &&
+                areSamePath(path, ["auth"]) &&
+                [ 
+                    "register.ftl", "terms.ftl", "info.ftl", "login.ftl", 
+                    "login-update-password.ftl", "login-oauth2-device-verify-user-code.ftl"
+                ]?seq_contains(xKeycloakify.pageId)
+            )>
+                <#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 outSeq += ["/*" + path?join(".") + "." + key + " excluded*/"]>
+                        <#continue>
+                    </#if>
+                <#recover>
+                    <#local outSeq += ["/*Accessing attemptedUsername throwed an exception */"]>
+                </#attempt>
+            </#if>
+
+            {{userDefinedExclusions}}
+
+            <#attempt>
+                <#if !object[key]??>
+                    <#continue>
+                </#if>
+            <#recover>
+                <#local outSeq += ["/*Couldn't test if '" + key + "' is available on this object*/"]>
+                <#continue>
+            </#attempt>
+
+            <#local propertyValue = -1>
+
+            <#attempt>
+                <#local propertyValue = object[key]>
+            <#recover>
+                <#local outSeq += ["/*Couldn't dereference '" + key + "' on this object*/"]>
+                <#continue>
+            </#attempt>
+
+            <#local recOut = toJsDeclarationString(propertyValue, path + [ key ])>
+
+            <#if recOut?starts_with("ABORT:")>
+
+                <#local errorMessage = recOut?remove_beginning("ABORT:")>
+
+                <#if errorMessage != " It's a method" >
+                    <#local outSeq += ["/*" + key + ": " + errorMessage + "*/"]>
+                </#if>
+
+                <#continue>
+            </#if>
+
+            <#local outSeq +=  ['"' + key + '": ' + recOut + ","]>
+
+        </#list>
+
+        <#return (["{"] + outSeq?map(str -> ""?right_pad(4 * (path?size + 1)) + str) + [ ""?right_pad(4 * path?size) + "}"])?join("\n")>
+
+    </#if>
+
+    <#local isMethod = -1>
+    <#attempt>
+        <#local isMethod = object?is_method>
+    <#recover>
+        <#return "ABORT: Can't test if it'sa method.">
+    </#attempt>
+
+    <#if isMethod>
+
+        <#if areSamePath(path, ["auth", "showUsername"])>
+            <#attempt>
+                <#return auth.showUsername()?c>
+            <#recover>
+                <#return "ABORT: Couldn't evaluate auth.showUsername()">
+            </#attempt>
+        </#if>
+
+        <#if areSamePath(path, ["auth", "showResetCredentials"])>
+            <#attempt>
+                <#return auth.showResetCredentials()?c>
+            <#recover>
+                <#return "ABORT: Couldn't evaluate auth.showResetCredentials()">
+            </#attempt>
+        </#if>
+
+        <#if areSamePath(path, ["auth", "showTryAnotherWayLink"])>
+            <#attempt>
+                <#return auth.showTryAnotherWayLink()?c>
+            <#recover>
+                <#return "ABORT: Couldn't evaluate auth.showTryAnotherWayLink()">
+            </#attempt>
+        </#if>
+
+        <#if areSamePath(path, ["url", "getLogoutUrl"])>
+            <#local returnValue = -1>
+            <#attempt>
+                <#local returnValue = url.getLogoutUrl()>
+            <#recover>
+                <#return "ABORT: Couldn't evaluate url.getLogoutUrl()">
+            </#attempt>
+            <#return 'function(){ return "' + returnValue + '"; }'>
+        </#if>
+
+        <#if areSamePath(path, ["totp", "policy", "getAlgorithmKey"])>
+            <#local returnValue = "error">
+            <#if mode?? && mode = "manual">
+                <#attempt>
+                    <#local returnValue = totp.policy.getAlgorithmKey()>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate totp.policy.getAlgorithmKey()">
+                </#attempt>
+            </#if>
+            <#return 'function(){ return "' + returnValue + '"; }'>
+        </#if>
+
+        <#assign fieldNames = [{{fieldNames}}]>
+        <#if profile?? && profile.attributes??>
+            <#list profile.attributes as attribute>
+                <#if fieldNames?seq_contains(attribute.name)>
+                    <#continue>
+                </#if>
+                <#assign fieldNames += [attribute.name]>
+            </#list>
+        </#if>
+
+        <#if areSamePath(path, ["messagesPerField", "get"])>
+
+            <#local jsFunctionCode = "function (fieldName) { ">
+
+            <#list fieldNames as fieldName>
+
+                <#-- See: https://github.com/keycloakify/keycloakify/issues/217 -->
+                <#if xKeycloakify.pageId == "login.ftl" >
+
+                    <#if fieldName == "username">
+
+                        <#local jsFunctionCode += "if(fieldName === 'username' || fieldName === 'password' ){ ">
+
+                        <#if messagesPerField.exists('username') || messagesPerField.exists('password')>
+                            <#local jsFunctionCode += "return kcContext.message && kcContext.message.summary ? kcContext.message.summary : 'error'; ">
+                        <#else>
+                            <#local jsFunctionCode += "return ''; ">
+                        </#if>
+
+                        <#local jsFunctionCode += "} ">
+
+                        <#continue>
+                    </#if>
+
+                    <#if fieldName == "password">
+                        <#continue>
+                    </#if>
+
+                </#if>
+
+                <#local jsFunctionCode += "if(fieldName === '" + fieldName + "'){ ">
+
+                <#if messagesPerField.exists('${fieldName}')>
+                    <#local jsFunctionCode += 'return decodeHtmlEntities("' + messagesPerField.get('${fieldName}')?js_string + '"); '>
+                <#else>
+                    <#local jsFunctionCode += "return ''; ">
+                </#if>
+
+                <#local jsFunctionCode += "} ">
+
+            </#list>
+
+            <#local jsFunctionCode += "}">
+
+            <#return jsFunctionCode>
+
+        </#if>
+
+        <#if areSamePath(path, ["messagesPerField", "existsError"])>
+
+            <#local jsFunctionCode = "function (fieldName) { ">
+
+            <#list fieldNames as fieldName>
+
+                <#-- See: https://github.com/keycloakify/keycloakify/issues/217 -->
+                <#if xKeycloakify.pageId == "login.ftl" >
+                    <#if fieldName == "username">
+
+                        <#local jsFunctionCode += "if(fieldName === 'username' || fieldName === 'password' ){ ">
+
+                        <#if messagesPerField.existsError('username') || messagesPerField.existsError('password')>
+                            <#local jsFunctionCode += "return true; ">
+                        <#else>
+                            <#local jsFunctionCode += "return false; ">
+                        </#if>
+
+                        <#local jsFunctionCode += "} ">
+
+                        <#continue>
+                    </#if>
+
+                    <#if fieldName == "password">
+                        <#continue>
+                    </#if>
+                </#if>
+
+                <#local jsFunctionCode += "if(fieldName === '" + fieldName + "' ){ ">
+
+                <#if messagesPerField.existsError('${fieldName}')>
+                    <#local jsFunctionCode += 'return true; '>
+                <#else>
+                    <#local jsFunctionCode += "return false; ">
+                </#if>
+
+                <#local jsFunctionCode += "}">
+
+            </#list>
+
+            <#local jsFunctionCode += "}">
+
+            <#return jsFunctionCode>
+
+        </#if>
+
+        <#if xKeycloakify.themeType == "account" && areSamePath(path, ["realm", "isInternationalizationEnabled"])>
+            <#attempt>
+                <#return realm.isInternationalizationEnabled()?c>
+            <#recover>
+                <#return "ABORT: Couldn't evaluate realm.isInternationalizationEnabled()">
+            </#attempt>
+        </#if>
+
+        <#return "ABORT: It's a method">
+    </#if>
+
+    <#local isBoolean = -1>
+    <#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 = -1>
+    <#attempt>
+        <#local isEnumerable = object?is_enumerable>
+    <#recover>
+        <#return "ABORT: Can't test if it's an enumerable">
+    </#attempt>
+
+
+    <#if isEnumerable>
+
+        <#local outSeq = []>
+
+        <#local i = 0>
+
+        <#list object as array_item>
+
+            <#if !array_item??>
+                <#local outSeq += ["null,"]>
+                <#continue>
+            </#if>
+
+            <#local recOut = toJsDeclarationString(array_item, path + [ i ])>
+
+            <#local i = i + 1>
+
+            <#if recOut?starts_with("ABORT:")>
+
+                <#local errorMessage = recOut?remove_beginning("ABORT:")>
+
+                <#if errorMessage != " It's a method" >
+                    <#local outSeq += ["/*" + i?string + ": " + errorMessage + "*/"]>
+                </#if>
+
+                <#continue>
+            </#if>
+
+            <#local outSeq += [recOut + ","]>
+
+        </#list>
+
+        <#return (["["] + outSeq?map(str -> ""?right_pad(4 * (path?size + 1)) + str) + [ ""?right_pad(4 * path?size) + "]"])?join("\n")>
+
+    </#if>
+
+    <#local isDate = -1>
+    <#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 = -1>
+    <#attempt>
+        <#local isNumber = object?is_number>
+    <#recover>
+        <#return "ABORT: Can't test if it's a number">
+    </#attempt>
+
+    <#if isNumber>
+        <#return object?c>
+    </#if>
+
+    <#local isString = -1>
+    <#attempt>
+        <#local isString = object?is_string>
+    <#recover>
+        <#return "ABORT: Can't test if it's a string">
+    </#attempt>
+
+    <#if isString>
+        <@addToXKeycloakifyMessagesIfMessageKey str=object />
+    </#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 isSubpath 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 areSamePath path searchedPath>
+    <#return path?size == searchedPath?size && isSubpath(path, searchedPath)>
+</#function>
+
+<#macro addToXKeycloakifyMessagesIfMessageKey str>
+    <#if !msg?? || !msg?is_method>
+        <#return>
+    </#if>
+    <#if (str?length > 200)>
+        <#return>
+    </#if>
+    <#local key=removeBrackets(str)>
+    <#if key?length==0>
+        <#return>
+    </#if>
+    <#if !(key?matches(r"^[a-zA-Z0-9-_.]*$"))>
+        <#return>
+    </#if>
+    <#local resolvedMsg=msg(key)>
+    <#if resolvedMsg==key>
+        <#return>
+    </#if>
+    <#local messages=xKeycloakify.messages>
+    <#local messages = messages + { key: resolvedMsg }>
+    <#assign xKeycloakify = xKeycloakify + { "messages": messages }>
+</#macro>
+
+<#function removeBrackets str>
+    <#if str?starts_with("${") && str?ends_with("}")>
+        <#return str[2..(str?length-2)]>
+    <#else>
+        <#return str>
+    </#if>
+</#function>
+
+<#macro addNonAutomaticallyGatherableMessagesToXKeycloakifyMessages>
+    <#if profile?? && profile?is_hash && profile.attributes?? && profile.attributes?is_enumerable>
+        <#list profile.attributes as attribute>
+            <#if !(
+                attribute.annotations?? && attribute.annotations?is_hash &&
+                attribute.annotations.inputOptionLabelsI18nPrefix?? && attribute.annotations.inputOptionLabelsI18nPrefix?is_string
+            )>
+                <#continue>
+            </#if>
+            <#local prefix=attribute.annotations.inputOptionLabelsI18nPrefix>
+            <#if !(
+                attribute.validators?? && attribute.validators?is_hash &&
+                attribute.validators.options?? && attribute.validators.options?is_hash &&
+                attribute.validators.options.options?? && attribute.validators.options.options?is_enumerable
+            )>
+                <#continue>
+            </#if>
+            <#list attribute.validators.options.options as option>
+                <#if !option?is_string>
+                    <#continue>
+                </#if>
+                <@addToXKeycloakifyMessagesIfMessageKey str="${prefix}.${option}" />
+            </#list>
+        </#list>
+    </#if>
+    <#if xKeycloakify.pageId == "terms.ftl" || termsAcceptanceRequired?? && termsAcceptanceRequired>
+        <@addToXKeycloakifyMessagesIfMessageKey str="termsText" />
+    </#if>
+    <#if requiredActions?? && requiredActions?is_enumerable>
+        <#list requiredActions as requiredAction>
+            <#if !requiredAction?is_string>
+                <#continue>
+            </#if>
+            <@addToXKeycloakifyMessagesIfMessageKey str="requiredAction.${requiredAction}" />
+        </#list>
+    </#if>
+</#macro>

src/bin/keycloakify/generateJavaStackFiles.ts

@@ -1,89 +0,0 @@
-import * as fs from "fs";
-import { join as pathJoin, dirname as pathDirname } from "path";
-import { assert } from "tsafe/assert";
-import { Reflect } from "tsafe/Reflect";
-import type { BuildOptions } from "./BuildOptions";
-
-export type BuildOptionsLike = {
-    themeName: string;
-    groupId: string;
-};
-
-{
-    const buildOptions = Reflect<BuildOptions>();
-
-    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
-}
-
-export function generateJavaStackFiles(params: {
-    version: string;
-    keycloakThemeBuildingDirPath: string;
-    doBundlesEmailTemplate: boolean;
-    buildOptions: BuildOptionsLike;
-}): {
-    jarFilePath: string;
-} {
-    const {
-        version,
-        buildOptions: { groupId, themeName },
-        keycloakThemeBuildingDirPath,
-        doBundlesEmailTemplate
-    } = params;
-
-    {
-        const { pomFileCode } = (function generatePomFileCode(): {
-            pomFileCode: string;
-        } {
-            const artefactId = `${themeName}-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": themeName,
-                                "types": ["login", ...(doBundlesEmailTemplate ? ["email"] : [])]
-                            }
-                        ]
-                    },
-                    null,
-                    2
-                ),
-                "utf8"
-            )
-        );
-    }
-
-    return {
-        "jarFilePath": pathJoin(keycloakThemeBuildingDirPath, "target", `${themeName}-${version}.jar`)
-    };
-}

src/bin/keycloakify/generateKeycloakThemeResources.ts

@@ -1,203 +0,0 @@
-import { transformCodebase } from "../tools/transformCodebase";
-import * as fs from "fs";
-import { join as pathJoin, basename as pathBasename } from "path";
-import { replaceImportsFromStaticInJsCode } from "./replacers/replaceImportsFromStaticInJsCode";
-import { replaceImportsInCssCode } from "./replacers/replaceImportsInCssCode";
-import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
-import { downloadBuiltinKeycloakTheme } from "../download-builtin-keycloak-theme";
-import * as child_process from "child_process";
-import { mockTestingResourcesCommonPath, mockTestingResourcesPath, mockTestingSubDirOfPublicDirBasename } from "../mockTestingResourcesPath";
-import { isInside } from "../tools/isInside";
-import type { BuildOptions } from "./BuildOptions";
-import { assert } from "tsafe/assert";
-import { Reflect } from "tsafe/Reflect";
-import { getLogger } from "../tools/logger";
-
-export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
-
-export namespace BuildOptionsLike {
-    export type Common = {
-        themeName: string;
-        extraPages?: string[];
-        extraThemeProperties?: string[];
-        isSilent: boolean;
-    };
-
-    export type Standalone = Common & {
-        isStandalone: true;
-        urlPathname: string | undefined;
-    };
-
-    export type ExternalAssets = ExternalAssets.SameDomain | ExternalAssets.DifferentDomains;
-
-    export namespace ExternalAssets {
-        export type CommonExternalAssets = Common & {
-            isStandalone: false;
-        };
-
-        export type SameDomain = CommonExternalAssets & {
-            areAppAndKeycloakServerSharingSameDomain: true;
-        };
-
-        export type DifferentDomains = CommonExternalAssets & {
-            areAppAndKeycloakServerSharingSameDomain: false;
-            urlOrigin: string;
-            urlPathname: string | undefined;
-        };
-    }
-}
-
-{
-    const buildOptions = Reflect<BuildOptions>();
-
-    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
-}
-
-export function generateKeycloakThemeResources(params: {
-    reactAppBuildDirPath: string;
-    keycloakThemeBuildingDirPath: string;
-    keycloakThemeEmailDirPath: string;
-    keycloakVersion: string;
-    buildOptions: BuildOptionsLike;
-}): { doBundlesEmailTemplate: boolean } {
-    const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, keycloakThemeEmailDirPath, keycloakVersion, buildOptions } = params;
-
-    const logger = getLogger({ isSilent: buildOptions.isSilent });
-    const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", buildOptions.themeName, "login");
-
-    let allCssGlobalsToDefine: Record<string, string> = {};
-
-    transformCodebase({
-        "destDirPath": buildOptions.isStandalone ? pathJoin(themeDirPath, "resources", "build") : reactAppBuildDirPath,
-        "srcDirPath": reactAppBuildDirPath,
-        "transformSourceCode": ({ filePath, sourceCode }) => {
-            //NOTE: Prevent cycles, excludes the folder we generated for debug in public/
-            if (
-                buildOptions.isStandalone &&
-                isInside({
-                    "dirPath": pathJoin(reactAppBuildDirPath, mockTestingSubDirOfPublicDirBasename),
-                    filePath
-                })
-            ) {
-                return undefined;
-            }
-
-            if (/\.css?$/i.test(filePath)) {
-                if (!buildOptions.isStandalone) {
-                    return undefined;
-                }
-
-                const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode({
-                    "cssCode": sourceCode.toString("utf8")
-                });
-
-                allCssGlobalsToDefine = {
-                    ...allCssGlobalsToDefine,
-                    ...cssGlobalsToDefine
-                };
-
-                return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
-            }
-
-            if (/\.js?$/i.test(filePath)) {
-                if (!buildOptions.isStandalone && buildOptions.areAppAndKeycloakServerSharingSameDomain) {
-                    return undefined;
-                }
-
-                const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-                    "jsCode": sourceCode.toString("utf8"),
-                    buildOptions
-                });
-
-                return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
-            }
-
-            return buildOptions.isStandalone ? { "modifiedSourceCode": sourceCode } : undefined;
-        }
-    });
-
-    let doBundlesEmailTemplate: boolean;
-
-    email: {
-        if (!fs.existsSync(keycloakThemeEmailDirPath)) {
-            logger.log(
-                [
-                    `Not bundling email template because ${pathBasename(keycloakThemeEmailDirPath)} does not exist`,
-                    `To start customizing the email template, run: 👉 npx create-keycloak-email-directory 👈`
-                ].join("\n")
-            );
-            doBundlesEmailTemplate = false;
-            break email;
-        }
-
-        doBundlesEmailTemplate = true;
-
-        transformCodebase({
-            "srcDirPath": keycloakThemeEmailDirPath,
-            "destDirPath": pathJoin(themeDirPath, "..", "email")
-        });
-    }
-
-    const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
-        "indexHtmlCode": fs.readFileSync(pathJoin(reactAppBuildDirPath, "index.html")).toString("utf8"),
-        "cssGlobalsToDefine": allCssGlobalsToDefine,
-        "buildOptions": buildOptions
-    });
-
-    [...pageIds, ...(buildOptions.extraPages ?? [])].forEach(pageId => {
-        const { ftlCode } = generateFtlFilesCode({ pageId });
-
-        fs.mkdirSync(themeDirPath, { "recursive": true });
-
-        fs.writeFileSync(pathJoin(themeDirPath, pageId), Buffer.from(ftlCode, "utf8"));
-    });
-
-    {
-        const tmpDirPath = pathJoin(themeDirPath, "..", "tmp_xxKdLpdIdLd");
-
-        downloadBuiltinKeycloakTheme({
-            keycloakVersion,
-            "destDirPath": tmpDirPath,
-            isSilent: buildOptions.isSilent
-        });
-
-        const themeResourcesDirPath = pathJoin(themeDirPath, "resources");
-
-        transformCodebase({
-            "srcDirPath": pathJoin(tmpDirPath, "keycloak", "login", "resources"),
-            "destDirPath": themeResourcesDirPath
-        });
-
-        const reactAppPublicDirPath = pathJoin(reactAppBuildDirPath, "..", "public");
-
-        transformCodebase({
-            "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
-            "destDirPath": pathJoin(themeResourcesDirPath, pathBasename(mockTestingResourcesCommonPath))
-        });
-
-        transformCodebase({
-            "srcDirPath": themeResourcesDirPath,
-            "destDirPath": pathJoin(reactAppPublicDirPath, mockTestingResourcesPath)
-        });
-
-        const keycloakResourcesWithinPublicDirPath = pathJoin(reactAppPublicDirPath, mockTestingSubDirOfPublicDirBasename);
-
-        fs.writeFileSync(
-            pathJoin(keycloakResourcesWithinPublicDirPath, "README.txt"),
-            Buffer.from(
-                ["This is just a test folder that helps develop", "the login and register page without having to run a Keycloak container"].join(" ")
-            )
-        );
-
-        fs.writeFileSync(pathJoin(keycloakResourcesWithinPublicDirPath, ".gitignore"), Buffer.from("*", "utf8"));
-
-        child_process.execSync(`rm -r ${tmpDirPath}`);
-    }
-
-    fs.writeFileSync(
-        pathJoin(themeDirPath, "theme.properties"),
-        Buffer.from(["parent=keycloak", ...(buildOptions.extraThemeProperties ?? [])].join("\n\n"), "utf8")
-    );
-
-    return { doBundlesEmailTemplate };
-}