Release candidate

Addition of Federated Identity Account page

.all-contributorsrc

@@ -168,6 +168,69 @@
         "test",
         "code"
       ]
+    },
+    {
+      "login": "rome-user",
+      "name": "rome-user",
+      "avatar_url": "https://avatars.githubusercontent.com/u/114131048?v=4",
+      "profile": "https://github.com/rome-user",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "celinepelletier",
+      "name": "Céline Pelletier",
+      "avatar_url": "https://avatars.githubusercontent.com/u/82821620?v=4",
+      "profile": "https://github.com/celinepelletier",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "xgp",
+      "name": "Garth",
+      "avatar_url": "https://avatars.githubusercontent.com/u/244253?v=4",
+      "profile": "https://github.com/xgp",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "BlackVoid",
+      "name": "Felix Gustavsson",
+      "avatar_url": "https://avatars.githubusercontent.com/u/673720?v=4",
+      "profile": "https://github.com/BlackVoid",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "msiemens",
+      "name": "Markus Siemens",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1873922?v=4",
+      "profile": "https://m-siemens.de/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "law108000",
+      "name": "Rlok",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8112024?v=4",
+      "profile": "https://github.com/law108000",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Moulyy",
+      "name": "Moulyy",
+      "avatar_url": "https://avatars.githubusercontent.com/u/115405804?v=4",
+      "profile": "https://github.com/Moulyy",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.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

@@ -3,7 +3,6 @@ on:
   push:
     branches:
       - main
-      - v*
   pull_request:
     branches:
       - main
@@ -14,8 +13,8 @@ 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: yarn format:check
@@ -28,8 +27,8 @@ jobs:
         os: [ ubuntu-latest ]
     name: Test with Node v${{ matrix.node }} on ${{ matrix.os }}
     steps:
-    - 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
@@ -42,8 +41,8 @@ jobs:
     if: github.event_name == 'push'
     needs: test
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: '18'
     - uses: bahmutov/npm-install@v1
@@ -71,7 +70,7 @@ 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.1.0
+    - uses: garronej/ts-ci@v2.1.2
       id: step1
       with: 
         action_name: is_package_json_version_upgraded
@@ -89,7 +88,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 }}
@@ -106,18 +105,18 @@ 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: yarn build
-    - run: npx -y -p denoify@1.3.0 enable_short_npm_import_path
+    - run: npx -y -p denoify@1.6.12 enable_short_npm_import_path
       env:
         DRY_RUN: "0"
-    - uses: garronej/ts-ci@v2.1.0
+    - uses: garronej/ts-ci@v2.1.2
       with: 
         action_name: remove_dark_mode_specific_images_from_readme
     - name: Publishing on NPM

.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/Containers.js

@@ -34,7 +34,6 @@ export function DocsContainer({ children, context }) {
                 .docblock-argstable-head th:nth-child(3), .docblock-argstable-body tr > td:nth-child(2) p {
                     font-size: 13px;
                 }
-
             `}</style>
             <BaseContainer
                 context={{
@@ -64,11 +63,6 @@ export function CanvasContainer({ children }) {
 
     return (
         <>
-            <style>{`
-                body {
-                    padding: 0 !important;
-                }
-            `}</style>
             {children}
         </>
     );

.storybook/preview-head.html

@@ -0,0 +1,17 @@
+<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

@@ -116,10 +116,45 @@ const { getHardCodedWeight } = (() => {
     const orderedPagesPrefix = [
         "Introduction",
         "login/login.ftl",
-        "login/register-user-profile.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) {

.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

@@ -14,9 +14,6 @@
     <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/keycloakify/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>
@@ -36,26 +33,17 @@
 
 <p align="center">
     <i>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">
+    <br/>
+    <br/>
+    <img width="400" src="https://github.com/keycloakify/keycloakify/assets/6702424/e66d105c-c06f-47d1-8a31-a6ab09da4e80">
 </p>
 
-> Whether or not React is your preferred framework, Keycloakify
-> offers a solid option for building Keycloak themes.
-> It's not just a convenient way to create a Keycloak theme
-> when using React; it's a well-regarded solution that many
-> developers appreciate.
+Keycloakify is fully compatible with Keycloak 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, [~~22~~](https://github.com/keycloakify/keycloakify/issues/389#issuecomment-1822509763), **23** [and up](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791)!
 
-> 📣 🛑 Account themes generated by Keycloakify are not currently compatible with Keycloak 22.  
-> We are working on a solution. [Follow progress](https://github.com/keycloakify/keycloakify/issues/389).  
-> Login and email themes are not affected.  
-> UPDATE: [The PR](https://github.com/keycloak/keycloak/pull/22317) that should future proof Keycloakify account themes has been greenlighted
-> by the Keycloak team. Resolution is only a matter of time.
+> NOTE: Keycloak 24 introduces [important changes](https://www.keycloak.org/docs/latest/upgrading/index.html#changes-to-freemarker-templates-to-render-pages-based-on-the-user-profile-and-realm).  
+> We're actively working on incorporating them into Keycloakify. [Follow progress](https://github.com/keycloakify/keycloakify/pull/538).
 
-Keycloakify is fully compatible with Keycloak, starting from version 11 and is anticipated to maintain compatibility with all future versions.  
-You can update your Keycloak, your Keycloakify generated theme won't break.  
-To understand the basis of my confidence in this, you can [visit this discussion thread where I've explained in detail](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791).
-
-## Sponsor 👼
+## Sponsor
 
 We are exclusively sponsored by [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), a French company offering Keycloak as a service.  
 Their dedicated support helps us continue the development and maintenance of this project.
@@ -78,12 +66,12 @@ Their dedicated support helps us continue the development and maintenance of thi
 </div>
 
 <p align="center">
-    <i>Checkout <a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github">Cloud IAM</a> and use promo code <code>keycloakify5</code></i>
+    <i>Checkout <a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github">Cloud-IAM</a> and use promo code <code>keycloakify5</code></i>
     <br/>
     <i>5% of your annual subscription will be donated to us, and you'll get 5% off too.</i>
 </p>
 
-Thank you, [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support!
+Thank you, [Cloud-IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support!
 
 ## Contributors ✨
 
@@ -117,6 +105,16 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/satanshiro"><img src="https://avatars.githubusercontent.com/u/38865738?v=4?s=100" width="100px;" alt="satanshiro"/><br /><sub><b>satanshiro</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=satanshiro" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://poelhekke.dev"><img src="https://avatars.githubusercontent.com/u/1632377?v=4?s=100" width="100px;" alt="Koen Poelhekke"/><br /><sub><b>Koen Poelhekke</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=kpoelhekke" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/zavoloklom"><img src="https://avatars.githubusercontent.com/u/4151869?v=4?s=100" width="100px;" alt="Sergey Kupletsky"/><br /><sub><b>Sergey Kupletsky</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Tests">⚠️</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/rome-user"><img src="https://avatars.githubusercontent.com/u/114131048?v=4?s=100" width="100px;" alt="rome-user"/><br /><sub><b>rome-user</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=rome-user" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/celinepelletier"><img src="https://avatars.githubusercontent.com/u/82821620?v=4?s=100" width="100px;" alt="Céline Pelletier"/><br /><sub><b>Céline Pelletier</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=celinepelletier" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/xgp"><img src="https://avatars.githubusercontent.com/u/244253?v=4?s=100" width="100px;" alt="Garth"/><br /><sub><b>Garth</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=xgp" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/BlackVoid"><img src="https://avatars.githubusercontent.com/u/673720?v=4?s=100" width="100px;" alt="Felix Gustavsson"/><br /><sub><b>Felix Gustavsson</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=BlackVoid" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://m-siemens.de/"><img src="https://avatars.githubusercontent.com/u/1873922?v=4?s=100" width="100px;" alt="Markus Siemens"/><br /><sub><b>Markus Siemens</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=msiemens" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/law108000"><img src="https://avatars.githubusercontent.com/u/8112024?v=4?s=100" width="100px;" alt="Rlok"/><br /><sub><b>Rlok</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=law108000" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Moulyy"><img src="https://avatars.githubusercontent.com/u/115405804?v=4?s=100" width="100px;" alt="Moulyy"/><br /><sub><b>Moulyy</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Moulyy" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/giorgoslytos"><img src="https://avatars.githubusercontent.com/u/50946162?v=4?s=100" width="100px;" alt="giorgoslytos"/><br /><sub><b>giorgoslytos</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=giorgoslytos" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
@@ -128,6 +126,28 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 # Changelog highlights
 
+## 9.5
+
+-   Post build hook: You can now apply custom transformation to your theme files. [Learn more](https://docs.keycloakify.dev/build-options#postbuild-hook).
+-   You can now specify your option in the Keycloakify's Vite plugin instead in the package.json. [See example](https://docs.keycloakify.dev/build-options#themename).
+
+## 9.4
+
+**Vite Support! 🎉**
+
+-   [The starter is now a Vite project](https://github.com/keycloakify/keycloakify-starter).
+    The Webpack based starter is accessible [here](https://github.com/keycloakify/keycloakify-starter-cra).
+-   CRA (Webpack) remains supported for the forseable future.
+-   If you have a CRA Keycloakify theme that you wish to migrate to Vite checkout [this migration guide](https://docs.keycloakify.dev/migration-guides/cra-greater-than-vite).
+
+## 9.0
+
+Bring back support for account themes in Keycloak v23 and up! [See issue](https://github.com/keycloakify/keycloakify/issues/389).
+
+### Breaking changes
+
+Very few. Check them out [here](https://docs.keycloakify.dev/migration-guides/v8-greater-than-v9).
+
 ## 8.0
 
 -   Much smaller .jar size. 70.2 MB -> 7.8 MB.  
@@ -136,58 +156,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 ### Breaking changes
 
-There are very few breaking changes in this major version.
-
--   The [`--external-assets` build option has been removed](https://docs.keycloakify.dev/v/v7/build-options#external-assets-deprecated) it was a performance optimization that is no longer relevant now that
-    we have lazy loading.
-
--   `kcContext.usernameEditDisabled` is now `kcContext.usernameHidden`, the type was lying, it has been updated to reflect what's actually on the `kcContext` at runtime.
-    If you want to see in detail what should be updated [see issue](https://github.com/keycloakify/keycloakify/pull/399), or you can search and replace `usernameEditDisabled` -> `usernameHidden` it'll do the trick.
-
--   The `usePrepareTemplate` prototype has been changed, you can search and replace:
-
-`src/keycloak-theme/login/Template.tsx`
-
-```ts
-url,
-"stylesCommon": [
-    "node_modules/patternfly/dist/css/patternfly.min.css",
-    "node_modules/patternfly/dist/css/patternfly-additions.min.css",
-    "lib/zocial/zocial.css"
-],
-"styles": ["css/login.css"],
-```
-
-by
-
-```ts
-"styles": [
-    `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
-    `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
-    `${url.resourcesCommonPath}/lib/zocial/zocial.css`,
-    `${url.resourcesPath}/css/login.css`
-],
-```
-
-and
-
-`src/keycloak-theme/account/Template.css`
-
-```ts
-url,
-"stylesCommon": ["node_modules/patternfly/dist/css/patternfly.min.css", "node_modules/patternfly/dist/css/patternfly-additions.min.css"],
-"styles": ["css/account.css"],
-```
-
-by
-
-```ts
-"styles": [
-    `${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`
-],
-```
+There are very few breaking changes in this major version. [Check them out](https://docs.keycloakify.dev/migration-guides/v7-greater-than-v8).
 
 ## 7.15
 
@@ -209,7 +178,7 @@ by
 ## 7.12
 
 -   You can now pack multiple themes variant in a single `.jar` bundle. In vanilla Keycloak themes you have the ability to extend a base theme.
-    There is now an idiomatic way of achieving the same result. [Learn more](https://docs.keycloakify.dev/build-options#keycloakify.extrathemenames).
+    There is now an idiomatic way of achieving the same result. [Learn more](https://docs.keycloakify.dev/build-options#keycloakify.themeVariantNames).
 
 ## 7.9
 
@@ -304,79 +273,79 @@ Checkout [the migration guide](https://docs.keycloakify.dev/v5-to-v6)
 
 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)
 
-## v5.6.0
+## 5.6.0
 
 Add support for `login-config-totp.ftl` page [#127](https://github.com/keycloakify/keycloakify/pull/127).
 
-## v5.3.0
+## 5.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
+## 5.0.0
 
 [Migration guide](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63)  
 New i18n system.  
 Import of terms and services have changed. [See example](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63).
 
-## v4.10.0
+## 4.10.0
 
 Add `login-idp-link-email.ftl` page [See PR](https://github.com/keycloakify/keycloakify/pull/92).
 
-## v4.8.0
+## 4.8.0
 
 [Email template customization.](#email-template-customization)
 
-## v4.7.4
+## 4.7.4
 
 **M1 Mac** support (for testing locally with a dockerized Keycloak).
 
-## v4.7.2
+## 4.7.2
 
 > WARNING: This is broken.  
 > Testing with local Keycloak container working with M1 Mac. Thanks to [@eduardosanzb](https://github.com/keycloakify/keycloakify/issues/43#issuecomment-975699658).  
 > Be aware: When running M1s you are testing with Keycloak v15 else the local container spun will be a Keycloak v16.1.0.
 
-## v4.7.0
+## 4.7.0
 
 Register with user profile enabled: Out of the box `options` validator support.  
 [Example](https://user-images.githubusercontent.com/6702424/158911163-81e6bbe8-feb0-4dc8-abff-de199d7a678e.mov)
 
-## v4.6.0
+## 4.6.0
 
 `tss-react` and `powerhooks` are no longer peer dependencies of `keycloakify`.
 After updating Keycloakify you can remove `tss-react` and `powerhooks` from your dependencies if you don't use them explicitly.
 
-## v4.5.3
+## 4.5.3
 
 There is a new recommended way to setup highly customized theme. See [here](https://github.com/garronej/keycloakify-demo-app/blob/look_and_feel/src/KcApp/KcApp.tsx).  
 Unlike with [the previous recommended method](https://github.com/garronej/keycloakify-demo-app/blob/a51660578bea15fb3e506b8a2b78e1056c6d68bb/src/KcApp/KcApp.tsx),
 with this new method your theme wont break on minor Keycloakify update.
 
-## v4.3.0
+## 4.3.0
 
 Feature [`login-update-password.ftl`](https://user-images.githubusercontent.com/6702424/147517600-6191cf72-93dd-437b-a35c-47180142063e.png).  
 Every time a page is added it's a breaking change for non CSS-only theme.  
 Change [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L17) and [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L37) to update.
 
-## v4
+## 4
 
 -   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
 -   Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
 
-## v3
+## 3
 
 No breaking changes except that `@emotion/react`, [`tss-react`](https://www.npmjs.com/package/tss-react) and [`powerhooks`](https://www.npmjs.com/package/powerhooks) are now `peerDependencies` instead of being just dependencies.  
 It's important to avoid problem when using `keycloakify` alongside [`mui`](https://mui.com) and
 [when passing params from the app to the login page](https://github.com/keycloakify/keycloakify#implement-context-persistence-optional).
 
-## v2.5
+## 2.5
 
 -   Feature [Use advanced message](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/i18n/useKcMessage.tsx#L53-L66)
     and [`messagesPerFields`](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/getKcContext/KcContextBase.ts#L70-L75) (implementation [here](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/generateFtl/common.ftl#L130-L189))
 -   Test container now uses Keycloak version `15.0.2`.
 
-## v2
+## 2
 
 -   It's now possible to implement custom `.ftl` pages.
 -   Support for Keycloak plugins that introduce non standard ftl values.

keycloakify-json-schema.json

@@ -1,73 +0,0 @@
-{
-    "allOf": [
-        {
-            "$ref": "https://json.schemastore.org/package.json"
-        },
-        {
-            "$ref": "keycloakifyPackageJsonSchema"
-        }
-    ],
-    "$ref": "#/definitions/keycloakifyPackageJsonSchema",
-    "definitions": {
-        "keycloakifyPackageJsonSchema": {
-            "type": "object",
-            "properties": {
-                "name": {
-                    "type": "string"
-                },
-                "version": {
-                    "type": "string"
-                },
-                "homepage": {
-                    "type": "string"
-                },
-                "keycloakify": {
-                    "type": "object",
-                    "properties": {
-                        "extraPages": {
-                            "type": "array",
-                            "items": {
-                                "type": "string"
-                            }
-                        },
-                        "extraThemeProperties": {
-                            "type": "array",
-                            "items": {
-                                "type": "string"
-                            }
-                        },
-                        "areAppAndKeycloakServerSharingSameDomain": {
-                            "type": "boolean"
-                        },
-                        "artifactId": {
-                            "type": "string"
-                        },
-                        "groupId": {
-                            "type": "string"
-                        },
-                        "bundler": {
-                            "type": "string",
-                            "enum": ["mvn", "keycloakify", "none"]
-                        },
-                        "keycloakVersionDefaultAssets": {
-                            "type": "string"
-                        },
-                        "reactAppBuildDirPath": {
-                            "type": "string"
-                        },
-                        "keycloakifyBuildDirPath": {
-                            "type": "string"
-                        },
-                        "themeName": {
-                            "type": "string"
-                        }
-                    },
-                    "additionalProperties": false
-                }
-            },
-            "required": ["name", "version"],
-            "additionalProperties": false
-        }
-    },
-    "$schema": "http://json-schema.org/draft-07/schema#"
-}

package.json

@@ -1,39 +1,27 @@
 {
     "name": "keycloakify",
-    "version": "8.1.1",
+    "version": "10.0.0-rc.56",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
         "url": "git://github.com/keycloakify/keycloakify.git"
     },
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
     "scripts": {
-        "prepare": "yarn generate-i18n-messages",
-        "build": "rimraf dist/ && tsc -p src/bin && tsc -p src && tsc-alias -p src/tsconfig.json && yarn grant-exec-perms && yarn copy-files dist/ && cp -r src dist/",
-        "generate:json-schema": "ts-node scripts/generate-json-schema.ts",
-        "grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
-        "copy-files": "copyfiles -u 1 src/**/*.ftl",
+        "prepare": "patch-package && ts-node --skipProject scripts/generate-i18n-messages.ts",
+        "build": "ts-node --skipProject scripts/build.ts",
+        "storybook": "ts-node --skipProject scripts/start-storybook.ts",
+        "link-in-starter": "ts-node --skipProject scripts/link-in-starter.ts",
         "test": "yarn test:types && vitest run",
-        "test:keycloakify-starter": "ts-node scripts/test-keycloakify-starter",
         "test:types": "tsc -p test/tsconfig.json --noEmit",
         "_format": "prettier '**/*.{ts,tsx,json,md}'",
         "format": "yarn _format --write",
         "format:check": "yarn _format --list-different",
-        "generate-i18n-messages": "ts-node --skipProject scripts/generate-i18n-messages.ts",
         "link-in-app": "ts-node --skipProject scripts/link-in-app.ts",
-        "link-in-starter": "yarn link-in-app keycloakify-starter",
-        "watch-in-starter": "yarn build && yarn link-in-starter && (concurrently \"tsc -p src -w\" \"tsc-alias -p src/tsconfig.json\" \"tsc -p src/bin -w\")",
-        "copy-keycloak-resources-to-storybook-static": "PUBLIC_DIR_PATH=.storybook/static node dist/bin/copy-keycloak-resources-to-public.js",
-        "storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && start-storybook -p 6006",
-        "build-storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && build-storybook"
+        "build-storybook": "ts-node --skipProject scripts/build-storybook.ts",
+        "dump-keycloak-realm": "ts-node --skipProject scripts/dump-keycloak-realm.ts"
     },
     "bin": {
-        "copy-keycloak-resources-to-public": "dist/bin/copy-keycloak-resources-to-public.js",
-        "download-builtin-keycloak-theme": "dist/bin/download-builtin-keycloak-theme.js",
-        "eject-keycloak-page": "dist/bin/eject-keycloak-page.js",
-        "initialize-email-theme": "dist/bin/initialize-email-theme.js",
-        "keycloakify": "dist/bin/keycloakify/index.js"
+        "keycloakify": "dist/bin/main.js"
     },
     "lint-staged": {
         "*.{ts,tsx,json,md}": [
@@ -48,28 +36,46 @@
     "author": "u/garronej",
     "license": "MIT",
     "files": [
-        "src/",
         "dist/",
         "!dist/tsconfig.tsbuildinfo",
-        "!dist/bin/tsconfig.tsbuildinfo"
+        "!dist/bin/",
+        "dist/bin/main.js",
+        "dist/bin/*.index.js",
+        "dist/bin/shared/constants.js",
+        "dist/bin/shared/constants.d.ts",
+        "dist/bin/shared/constants.js.map",
+        "dist/bin/shared/buildContext.d.ts",
+        "!dist/vite-plugin/",
+        "dist/vite-plugin/index.d.ts",
+        "dist/vite-plugin/vite-plugin.d.ts",
+        "dist/vite-plugin/index.js"
     ],
     "keywords": [
-        "bluehats",
         "keycloak",
         "react",
         "theme",
         "FreeMarker",
         "ftl",
         "login",
-        "register"
+        "register",
+        "account",
+        "bluehats"
     ],
     "homepage": "https://www.keycloakify.dev",
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "*"
+    },
+    "dependencies": {
+        "react-markdown": "^5.0.3",
+        "tsafe": "^1.6.6"
     },
     "devDependencies": {
-        "@babel/core": "^7.0.0",
-        "@emotion/react": "^11.10.6",
+        "@babel/core": "^7.24.5",
+        "@babel/generator": "^7.24.5",
+        "@babel/parser": "^7.24.5",
+        "@babel/types": "^7.24.5",
+        "@emotion/react": "^11.11.4",
+        "@octokit/rest": "^20.1.1",
         "@storybook/addon-a11y": "^6.5.16",
         "@storybook/addon-actions": "^6.5.13",
         "@storybook/addon-essentials": "^6.5.13",
@@ -85,46 +91,35 @@
         "@types/node": "^18.15.3",
         "@types/react": "^18.0.35",
         "@types/react-dom": "^18.0.11",
-        "@types/yauzl": "^2.10.0",
-        "@types/yazl": "^2.4.2",
-        "concurrently": "^8.0.1",
-        "copyfiles": "^2.4.1",
+        "@types/yauzl": "^2.10.3",
+        "@vercel/ncc": "^0.38.1",
+        "chalk": "^4.1.2",
+        "cheerio": "^1.0.0-rc.12",
+        "chokidar-cli": "^3.0.0",
+        "cli-select": "^1.1.2",
         "eslint-plugin-storybook": "^0.6.7",
         "husky": "^4.3.8",
         "lint-staged": "^11.0.0",
-        "powerhooks": "^0.26.7",
-        "prettier": "^2.3.0",
+        "magic-string": "^0.30.7",
+        "make-fetch-happen": "^11.0.3",
+        "patch-package": "^8.0.0",
+        "powerhooks": "^1.0.10",
+        "prettier": "^3.2.5",
         "properties-parser": "^0.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "rimraf": "^3.0.2",
-        "scripting-tools": "^0.19.13",
-        "storybook-dark-mode": "^1.1.2",
-        "ts-node": "^10.9.1",
-        "tsc-alias": "^1.8.3",
-        "tss-react": "^4.8.2",
-        "typescript": "^4.9.1-beta",
-        "vitest": "^0.29.8",
-        "zod-to-json-schema": "^3.20.4"
-    },
-    "dependencies": {
-        "@babel/generator": "^7.22.9",
-        "@babel/parser": "^7.22.7",
-        "@babel/types": "^7.22.5",
-        "@octokit/rest": "^18.12.0",
-        "cheerio": "^1.0.0-rc.5",
-        "cli-select": "^1.1.2",
-        "evt": "^2.4.18",
-        "make-fetch-happen": "^11.0.3",
-        "minimal-polyfills": "^2.2.2",
-        "minimist": "^1.2.6",
-        "path-browserify": "^1.0.1",
-        "react-markdown": "^5.0.3",
         "recast": "^0.23.3",
-        "rfc4648": "^1.5.2",
-        "tsafe": "^1.6.0",
+        "run-exclusive": "^2.2.19",
+        "storybook-dark-mode": "^1.1.2",
+        "termost": "^0.12.0",
+        "ts-node": "^10.9.2",
+        "tsc-alias": "^1.8.10",
+        "tss-react": "^4.9.10",
+        "typescript": "^4.9.1-beta",
+        "vite": "^5.2.11",
+        "vitest": "^1.6.0",
         "yauzl": "^2.10.0",
-        "yazl": "^2.5.1",
-        "zod": "^3.17.10"
+        "zod": "^3.17.10",
+        "evt": "^2.5.7"
     }
 }

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",

scripts/build-storybook.ts

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

scripts/build.ts

@@ -0,0 +1,175 @@
+import * as child_process from "child_process";
+import * as fs from "fs";
+import { join, relative } from "path";
+import { assert } from "tsafe/assert";
+import { transformCodebase } from "../src/bin/tools/transformCodebase";
+import chalk from "chalk";
+
+console.log(chalk.cyan("Building Keycloakify..."));
+
+const startTime = Date.now();
+
+if (fs.existsSync(join("dist", "bin", "main.original.js"))) {
+    fs.renameSync(
+        join("dist", "bin", "main.original.js"),
+        join("dist", "bin", "main.js")
+    );
+
+    fs.readdirSync(join("dist", "bin")).forEach(fileBasename => {
+        if (/[0-9]\.index.js/.test(fileBasename)) {
+            fs.rmSync(join("dist", "bin", fileBasename));
+        }
+    });
+}
+
+run(`npx tsc -p ${join("src", "bin", "tsconfig.json")}`);
+
+if (
+    !fs
+        .readFileSync(join("dist", "bin", "main.js"))
+        .toString("utf8")
+        .includes("__nccwpck_require__")
+) {
+    fs.cpSync(join("dist", "bin", "main.js"), join("dist", "bin", "main.original.js"));
+}
+
+run(`npx ncc build ${join("dist", "bin", "main.js")} -o ${join("dist", "ncc_out")}`);
+
+transformCodebase({
+    srcDirPath: join("dist", "ncc_out"),
+    destDirPath: join("dist", "bin"),
+    transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+        if (fileRelativePath === "index.js") {
+            return {
+                newFileName: "main.js",
+                modifiedSourceCode: sourceCode
+            };
+        }
+
+        return { modifiedSourceCode: sourceCode };
+    }
+});
+
+fs.rmSync(join("dist", "ncc_out"), { recursive: true });
+
+{
+    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"))
+);
+
+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/dump-keycloak-realm.ts

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

scripts/generate-i18n-messages.ts

@@ -1,10 +1,17 @@
 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 {
+    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 { downloadBuiltinKeycloakTheme } from "../src/bin/download-builtin-keycloak-theme";
-import { getProjectRoot } from "../src/bin/tools/getProjectRoot";
-import { getLogger } from "../src/bin/tools/logger";
+import { downloadKeycloakDefaultTheme } from "../src/bin/shared/downloadKeycloakDefaultTheme";
+import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRootDirPath";
+import { deepAssign } from "../src/tools/deepAssign";
 
 // NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
 // update the version array for generating for newer version.
@@ -12,21 +19,22 @@ import { getLogger } from "../src/bin/tools/logger";
 //@ts-ignore
 const propertiesParser = require("properties-parser");
 
-const isSilent = true;
-
-const logger = getLogger({ isSilent });
-
 async function main() {
-    const keycloakVersion = "21.0.1";
+    const keycloakVersion = "24.0.4";
 
-    const tmpDirPath = pathJoin(getProjectRoot(), "tmp_xImOef9dOd44");
+    const thisCodebaseRootDirPath = getThisCodebaseRootDirPath();
 
-    fs.rmSync(tmpDirPath, { "recursive": true, "force": true });
-
-    await downloadBuiltinKeycloakTheme({
-        "projectDirPath": getProjectRoot(),
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
         keycloakVersion,
-        "destDirPath": tmpDirPath
+        buildContext: {
+            cacheDirPath: pathJoin(
+                thisCodebaseRootDirPath,
+                "node_modules",
+                ".cache",
+                "keycloakify"
+            ),
+            npmWorkspaceRootDirPath: thisCodebaseRootDirPath
+        }
     });
 
     type Dictionary = { [idiomId: string]: string };
@@ -34,12 +42,14 @@ async function main() {
     const record: { [typeOfPage: string]: { [language: string]: Dictionary } } = {};
 
     {
-        const baseThemeDirPath = pathJoin(tmpDirPath, "base");
-        const re = new RegExp(`^([^\\${pathSep}]+)\\${pathSep}messages\\${pathSep}messages_([^.]+).properties$`);
+        const baseThemeDirPath = pathJoin(defaultThemeDirPath, "base");
+        const re = new RegExp(
+            `^([^\\${pathSep}]+)\\${pathSep}messages\\${pathSep}messages_([^.]+).properties$`
+        );
 
         crawl({
-            "dirPath": baseThemeDirPath,
-            "returnedPathsType": "relative to dirPath"
+            dirPath: baseThemeDirPath,
+            returnedPathsType: "relative to dirPath"
         }).forEach(filePath => {
             const match = filePath.match(re);
 
@@ -50,44 +60,83 @@ async function main() {
             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, "'")]
-                )
+                Object.entries(
+                    propertiesParser.parse(
+                        fs
+                            .readFileSync(pathJoin(baseThemeDirPath, filePath))
+                            .toString("utf8")
+                    )
+                ).map(([key, value]: any) => [
+                    key === "locale_pt_BR" ? "locale_pt-BR" : key,
+                    value.replace(/''/g, "'")
+                ])
             );
         });
     }
 
-    fs.rmSync(tmpDirPath, { recursive: true, force: true });
-
     Object.keys(record).forEach(themeType => {
-        const recordForPageType = record[themeType];
-
         if (themeType !== "login" && themeType !== "account") {
             return;
         }
 
-        const baseMessagesDirPath = pathJoin(getProjectRoot(), "src", themeType, "i18n", "baseMessages");
+        const recordForThemeType = record[themeType];
 
-        const languages = Object.keys(recordForPageType);
+        const languages = Object.keys(recordForThemeType);
+
+        const keycloakifyExtraMessages = (() => {
+            switch (themeType) {
+                case "login":
+                    return keycloakifyExtraMessages_login;
+                case "account":
+                    return keycloakifyExtraMessages_account;
+            }
+            assert(false);
+        })();
+
+        assert(
+            same(languages, Object.keys(keycloakifyExtraMessages), {
+                takeIntoAccountArraysOrdering: false
+            })
+        );
+
+        deepAssign({
+            target: recordForThemeType,
+            source: keycloakifyExtraMessages
+        });
+
+        const baseMessagesDirPath = pathJoin(
+            thisCodebaseRootDirPath,
+            "src",
+            themeType,
+            "i18n",
+            "baseMessages"
+        );
 
         const generatedFileHeader = [
-            `//This code was automatically generated by running ${pathRelative(getProjectRoot(), __filename)}`,
-            "//PLEASE DO NOT EDIT MANUALLY",
-            ""
+            `//This code was automatically generated by running ${pathRelative(
+                thisCodebaseRootDirPath,
+                __filename
+            )}`,
+            "//PLEASE DO NOT EDIT MANUALLY"
         ].join("\n");
 
         languages.forEach(language => {
             const filePath = pathJoin(baseMessagesDirPath, `${language}.ts`);
 
-            fs.mkdirSync(pathDirname(filePath), { "recursive": true });
+            fs.mkdirSync(pathDirname(filePath), { recursive: true });
 
             fs.writeFileSync(
                 filePath,
                 Buffer.from(
                     [
                         generatedFileHeader,
+                        "",
                         "/* spell-checker: disable */",
-                        `const messages= ${JSON.stringify(recordForPageType[language], null, 2)};`,
+                        `const messages= ${JSON.stringify(
+                            recordForThemeType[language],
+                            null,
+                            2
+                        )};`,
                         "",
                         "export default messages;",
                         "/* spell-checker: enable */"
@@ -96,7 +145,7 @@ async function main() {
                 )
             );
 
-            logger.log(`${filePath} wrote`);
+            //console.log(`${filePath} wrote`);
         });
 
         fs.writeFileSync(
@@ -104,10 +153,18 @@ async function main() {
             Buffer.from(
                 [
                     generatedFileHeader,
+                    `import * as en from "./en";`,
+                    "",
                     "export async function getMessages(currentLanguageTag: string) {",
                     "    const { default: messages } = await (() => {",
                     "        switch (currentLanguageTag) {",
-                    ...languages.map(language => `            case "${language}": return import("./${language}");`),
+                    `            case "en": return en;`,
+                    ...languages
+                        .filter(language => language !== "en")
+                        .map(
+                            language =>
+                                `            case "${language}": return import("./${language}");`
+                        ),
                     '            default: return { "default": {} };',
                     "        }",
                     "    })();",
@@ -120,6 +177,491 @@ async function main() {
     });
 }
 
+const keycloakifyExtraMessages_login: Record<
+    | "en"
+    | "ar"
+    | "ca"
+    | "cs"
+    | "da"
+    | "de"
+    | "el"
+    | "es"
+    | "fa"
+    | "fi"
+    | "fr"
+    | "hu"
+    | "it"
+    | "ja"
+    | "lt"
+    | "lv"
+    | "nl"
+    | "no"
+    | "pl"
+    | "pt-BR"
+    | "ru"
+    | "sk"
+    | "sv"
+    | "th"
+    | "tr"
+    | "uk"
+    | "zh-CN",
+    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-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: "Мови"
+    },
+    "zh-CN": {
+        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"
+    | "el"
+    | "es"
+    | "fa"
+    | "fi"
+    | "fr"
+    | "hu"
+    | "it"
+    | "ja"
+    | "lt"
+    | "lv"
+    | "nl"
+    | "no"
+    | "pl"
+    | "pt-BR"
+    | "ru"
+    | "sk"
+    | "sv"
+    | "th"
+    | "tr"
+    | "uk"
+    | "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"
+    },
+    el: {
+        newPasswordSameAsOld: "Ο νέος κωδικός πρόσβασης πρέπει να διαφέρει από τον παλιό",
+        passwordConfirmNotMatch: "Η επιβεβαίωση του κωδικού πρόσβασης δεν ταιριάζει"
+    },
+    es: {
+        newPasswordSameAsOld: "La nueva contraseña debe ser diferente de la anterior",
+        passwordConfirmNotMatch: "La confirmación de la contraseña no coincide"
+    },
+    fa: {
+        newPasswordSameAsOld: "رمز عبور جدید باید با رمز عبور قبلی متفاوت باشد",
+        passwordConfirmNotMatch: "تأیید رمز عبور مطابقت ندارد"
+    },
+    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"
+    },
+    th: {
+        newPasswordSameAsOld: "รหัสผ่านใหม่ต้องต่างจากรหัสผ่านเดิม",
+        passwordConfirmNotMatch: "การยืนยันรหัสผ่านไม่ตรงกัน"
+    },
+    tr: {
+        newPasswordSameAsOld: "Yeni şifre eskisinden farklı olmalıdır",
+        passwordConfirmNotMatch: "Şifre doğrulama eşleşmiyor"
+    },
+    uk: {
+        newPasswordSameAsOld: "Новий пароль повинен відрізнятися від старого",
+        passwordConfirmNotMatch: "Підтвердження пароля не співпадає"
+    },
+    "zh-CN": {
+        newPasswordSameAsOld: "新密码必须与旧密码不同",
+        passwordConfirmNotMatch: "密码确认不匹配"
+    }
+    /* spell-checker: enable */
+};
+
 if (require.main === module) {
     main();
 }

scripts/generate-json-schema.ts

@@ -1,14 +0,0 @@
-import fs from "fs";
-import path from "path";
-import zodToJsonSchema from "zod-to-json-schema";
-import { zParsedPackageJson } from "../src/bin/keycloakify/parsedPackageJson";
-
-const jsonSchemaName = "keycloakifyPackageJsonSchema";
-const jsonSchema = zodToJsonSchema(zParsedPackageJson, jsonSchemaName);
-
-const baseProperties = {
-    // merges package.json schema with keycloakify properties
-    "allOf": [{ "$ref": "https://json.schemastore.org/package.json" }, { "$ref": jsonSchemaName }]
-};
-
-fs.writeFileSync(path.join(process.cwd(), "keycloakify-json-schema.json"), JSON.stringify({ ...baseProperties, ...jsonSchema }, null, 2));

scripts/grant-exec-perms.ts

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

scripts/link-in-app.ts

@@ -1,11 +1,11 @@
 import { execSync } from "child_process";
 import { join as pathJoin, relative as pathRelative } from "path";
-import { getProjectRoot } from "../src/bin/tools/getProjectRoot";
+import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRootDirPath";
 import * as fs from "fs";
 
 const singletonDependencies: string[] = ["react", "@types/react"];
 
-const rootDirPath = getProjectRoot();
+const rootDirPath = getThisCodebaseRootDirPath();
 
 //NOTE: This is only required because of: https://github.com/garronej/ts-ci/blob/c0e207b9677523d4ec97fe672ddd72ccbb3c1cc4/README.md?plain=1#L54-L58
 fs.writeFileSync(
@@ -13,20 +13,26 @@ fs.writeFileSync(
     Buffer.from(
         JSON.stringify(
             (() => {
-                const packageJsonParsed = JSON.parse(fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8"));
+                const packageJsonParsed = JSON.parse(
+                    fs
+                        .readFileSync(pathJoin(rootDirPath, "package.json"))
+                        .toString("utf8")
+                );
 
                 return {
                     ...packageJsonParsed,
-                    "main": packageJsonParsed["main"]?.replace(/^dist\//, ""),
-                    "types": packageJsonParsed["types"]?.replace(/^dist\//, ""),
-                    "module": packageJsonParsed["module"]?.replace(/^dist\//, ""),
-                    "exports": !("exports" in packageJsonParsed)
+                    main: packageJsonParsed["main"]?.replace(/^dist\//, ""),
+                    types: packageJsonParsed["types"]?.replace(/^dist\//, ""),
+                    module: packageJsonParsed["module"]?.replace(/^dist\//, ""),
+                    exports: !("exports" in packageJsonParsed)
                         ? undefined
                         : Object.fromEntries(
-                              Object.entries(packageJsonParsed["exports"]).map(([key, value]) => [
-                                  key,
-                                  (value as string).replace(/^\.\/dist\//, "./")
-                              ])
+                              Object.entries(packageJsonParsed["exports"]).map(
+                                  ([key, value]) => [
+                                      key,
+                                      (value as string).replace(/^\.\/dist\//, "./")
+                                  ]
+                              )
                           )
                 };
             })(),
@@ -37,8 +43,6 @@ fs.writeFileSync(
     )
 );
 
-fs.cpSync(pathJoin(rootDirPath, "src"), pathJoin(rootDirPath, "dist", "src"), { "recursive": true });
-
 const commonThirdPartyDeps = (() => {
     // For example [ "@emotion" ] it's more convenient than
     // having to list every sub emotion packages (@emotion/css @emotion/utils ...)
@@ -49,7 +53,9 @@ const commonThirdPartyDeps = (() => {
         ...namespaceSingletonDependencies
             .map(namespaceModuleName =>
                 fs
-                    .readdirSync(pathJoin(rootDirPath, "node_modules", namespaceModuleName))
+                    .readdirSync(
+                        pathJoin(rootDirPath, "node_modules", namespaceModuleName)
+                    )
                     .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
             )
             .reduce((prev, curr) => [...prev, ...curr], []),
@@ -59,21 +65,25 @@ const commonThirdPartyDeps = (() => {
 
 const yarnGlobalDirPath = pathJoin(rootDirPath, ".yarn_home");
 
-fs.rmSync(yarnGlobalDirPath, { "recursive": true, "force": true });
+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(" ");
+    const cmd = [
+        "yarn",
+        "link",
+        ...(targetModuleName !== undefined ? [targetModuleName] : ["--no-bin-links"])
+    ].join(" ");
 
     console.log(`$ cd ${pathRelative(rootDirPath, cwd) || "."} && ${cmd}`);
 
     execSync(cmd, {
         cwd,
-        "env": {
+        env: {
             ...process.env,
-            "HOME": yarnGlobalDirPath
+            HOME: yarnGlobalDirPath
         }
     });
 };
@@ -89,7 +99,9 @@ const testAppPaths = (() => {
                 return testAppPath;
             }
 
-            console.warn(`Skipping ${testAppName} since it cant be found here: ${testAppPath}`);
+            console.warn(
+                `Skipping ${testAppName} since it cant be found here: ${testAppPath}`
+            );
 
             return undefined;
         })
@@ -101,7 +113,7 @@ if (testAppPaths.length === 0) {
     process.exit(-1);
 }
 
-testAppPaths.forEach(testAppPath => execSync("yarn install", { "cwd": testAppPath }));
+testAppPaths.forEach(testAppPath => execSync("yarn install", { cwd: testAppPath }));
 
 console.log("=== Linking common dependencies ===");
 
@@ -114,29 +126,37 @@ commonThirdPartyDeps.forEach(commonThirdPartyDep => {
     console.log(`${current}/${total} ${commonThirdPartyDep}`);
 
     const localInstallPath = pathJoin(
-        ...[rootDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])]
+        ...[
+            rootDirPath,
+            "node_modules",
+            ...(commonThirdPartyDep.startsWith("@")
+                ? commonThirdPartyDep.split("/")
+                : [commonThirdPartyDep])
+        ]
     );
 
-    execYarnLink({ "cwd": localInstallPath });
+    execYarnLink({ cwd: localInstallPath });
 });
 
 commonThirdPartyDeps.forEach(commonThirdPartyDep =>
     testAppPaths.forEach(testAppPath =>
         execYarnLink({
-            "cwd": testAppPath,
-            "targetModuleName": commonThirdPartyDep
+            cwd: testAppPath,
+            targetModuleName: commonThirdPartyDep
         })
     )
 );
 
 console.log("=== Linking in house dependencies ===");
 
-execYarnLink({ "cwd": pathJoin(rootDirPath, "dist") });
+execYarnLink({ cwd: pathJoin(rootDirPath, "dist") });
 
 testAppPaths.forEach(testAppPath =>
     execYarnLink({
-        "cwd": testAppPath,
-        "targetModuleName": JSON.parse(fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8"))["name"]
+        cwd: testAppPath,
+        targetModuleName: JSON.parse(
+            fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8")
+        )["name"]
     })
 );
 

scripts/link-in-starter.ts

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

scripts/start-storybook.ts

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

scripts/startRebuildOnSrcChange.ts

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

scripts/test-keycloakify-starter.ts

@@ -1,29 +0,0 @@
-import { execSync } from "child_process";
-import { existsSync, readFileSync, rmSync, writeFileSync } from "fs";
-import path from "path";
-
-const testDir = "keycloakify_starter_test";
-
-if (existsSync(path.join(process.cwd(), testDir))) {
-    rmSync(path.join(process.cwd(), testDir), { recursive: true });
-}
-// Build and link package
-execSync("yarn build");
-const pkgJSON = JSON.parse(readFileSync(path.join(process.cwd(), "package.json")).toString("utf8"));
-pkgJSON.main = "./index.js";
-pkgJSON.types = "./index.d.ts";
-pkgJSON.scripts.prepare = undefined;
-writeFileSync(path.join(process.cwd(), "dist", "package.json"), JSON.stringify(pkgJSON));
-// Wrapped in a try/catch because unlink errors if the package isn't linked
-try {
-    execSync("yarn unlink");
-} catch {}
-execSync("yarn link", { "cwd": path.join(process.cwd(), "dist") });
-
-// Clone latest keycloakify-starter and link to keycloakify output
-execSync(`git clone https://github.com/keycloakify/keycloakify-starter.git ${testDir}`);
-execSync("yarn install", { "cwd": path.join(process.cwd(), testDir) });
-execSync("yarn link keycloakify", { "cwd": path.join(process.cwd(), testDir) });
-
-//Ensure keycloak theme can be built
-execSync("yarn build-keycloak-theme", { "cwd": path.join(process.cwd(), testDir) });

src/PUBLIC_URL.ts

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

src/account/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/Fallback.tsx

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

src/account/KcContext/KcContext.ts

@@ -0,0 +1,306 @@
+import type { ThemeType, AccountThemePageId } from "keycloakify/bin/shared/constants";
+import type { ValueOf } from "keycloakify/tools/ValueOf";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+export type ExtendKcContext<
+    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: Record<string, string | undefined>;
+    };
+
+    export type Password = Common & {
+        pageId: "password.ftl";
+        password: {
+            passwordSet: boolean;
+        };
+        stateChecker: string;
+    };
+
+    export type Account = Common & {
+        pageId: "account.ftl";
+        url: {
+            accountUrl: string;
+        };
+        realm: {
+            registrationEmailAsUsername: boolean;
+            editUsernameAllowed: boolean;
+        };
+        stateChecker: string;
+    };
+
+    export type Sessions = Common & {
+        pageId: "sessions.ftl";
+        sessions: {
+            sessions: {
+                expires: string;
+                clients: string[];
+                ipAddress: string;
+                started: string;
+                lastAccess: string;
+                id: string;
+            }[];
+        };
+        stateChecker: string;
+    };
+
+    export type Totp = Common & {
+        pageId: "totp.ftl";
+        totp: {
+            enabled: boolean;
+            totpSecretEncoded: string;
+            qrUrl: string;
+            policy: {
+                algorithm: "HmacSHA1" | "HmacSHA256" | "HmacSHA512";
+                digits: number;
+                lookAheadWindow: number;
+            } & (
+                | {
+                      type: "totp";
+                      period: number;
+                  }
+                | {
+                      type: "hotp";
+                      initialCounter: number;
+                  }
+            );
+            supportedApplications: string[];
+            totpSecretQrCode: string;
+            manualUrl: string;
+            totpSecret: string;
+            otpCredentials: { id: string; userLabel: string }[];
+        };
+        mode?: "qr" | "manual" | undefined | null;
+        isAppInitiatedAction: boolean;
+        stateChecker: string;
+    };
+
+    export type Applications = Common & {
+        pageId: "applications.ftl";
+        features: {
+            log: boolean;
+            identityFederation: boolean;
+            authorization: boolean;
+            passwordUpdateSupported: boolean;
+        };
+        stateChecker: string;
+        applications: {
+            applications: {
+                realmRolesAvailable: {
+                    name: string;
+                    description: string;
+                    compositesStream?: Record<string, unknown>;
+                    clientRole?: boolean;
+                    composite?: boolean;
+                    id?: string;
+                    containerId?: string;
+                    attributes?: Record<string, unknown>;
+                }[];
+                resourceRolesAvailable: Record<
+                    string,
+                    {
+                        roleName: string;
+                        roleDescription?: string;
+                        clientName: string;
+                        clientId: string;
+                    }[]
+                >;
+                additionalGrants: string[];
+                clientScopesGranted: string[];
+                effectiveUrl?: string;
+                client: {
+                    alwaysDisplayInConsole: boolean;
+                    attributes: Record<string, unknown>;
+                    authenticationFlowBindingOverrides: Record<string, unknown>;
+                    baseUrl?: string;
+                    bearerOnly: boolean;
+                    clientAuthenticatorType: string;
+                    clientId: string;
+                    consentRequired: boolean;
+                    consentScreenText: string;
+                    description: string;
+                    directAccessGrantsEnabled: boolean;
+                    displayOnConsentScreen: boolean;
+                    dynamicScope: boolean;
+                    enabled: boolean;
+                    frontchannelLogout: boolean;
+                    fullScopeAllowed: boolean;
+                    id: string;
+                    implicitFlowEnabled: boolean;
+                    includeInTokenScope: boolean;
+                    managementUrl: string;
+                    name?: string;
+                    nodeReRegistrationTimeout: string;
+                    notBefore: string;
+                    protocol: string;
+                    protocolMappersStream: Record<string, unknown>;
+                    publicClient: boolean;
+                    realm: Record<string, unknown>;
+                    realmScopeMappingsStream: Record<string, unknown>;
+                    redirectUris: string[];
+                    registeredNodes: Record<string, unknown>;
+                    rolesStream: Record<string, unknown>;
+                    rootUrl?: string;
+                    scopeMappingsStream: Record<string, unknown>;
+                    secret: string;
+                    serviceAccountsEnabled: boolean;
+                    standardFlowEnabled: boolean;
+                    surrogateAuthRequired: boolean;
+                    webOrigins: string[];
+                };
+            }[];
+        };
+    };
+
+    export type Log = Common & {
+        pageId: "log.ftl";
+        log: {
+            events: {
+                date: string | number | Date;
+                event: string;
+                ipAddress: string;
+                client: string;
+                details: { value: string; key: string }[];
+            }[];
+        };
+    };
+
+    export type FederatedIdentity = Common & {
+        pageId: "federatedIdentity.ftl";
+        stateChecker: string;
+        federatedIdentity: {
+            identities: {
+                providerId: string;
+                displayName: string;
+                userName: string;
+                connected: boolean;
+            }[];
+            removeLinkPossible: boolean;
+        };
+    };
+}
+
+{
+    type Got = KcContext["pageId"];
+    type Expected = AccountThemePageId;
+
+    type OnlyInGot = Exclude<Got, Expected>;
+    type OnlyInExpected = Exclude<Expected, Got>;
+
+    assert<Equals<OnlyInGot, never>>();
+    assert<Equals<OnlyInExpected, never>>();
+}
+
+assert<KcContext["themeType"] extends ThemeType ? true : false>();

src/account/KcContext/getKcContextMock.ts

@@ -0,0 +1,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,199 @@
+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: {
+        parent: "account-v1",
+        kcButtonLargeClass: "btn-lg",
+        locales:
+            "ar,ca,cs,da,de,en,es,fr,fi,hu,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN",
+        kcButtonPrimaryClass: "btn-primary",
+        accountResourceProvider: "account-v1",
+        styles: "css/account.css img/icon-sidebar-active.png img/logo.png resources-common/node_modules/patternfly/dist/css/patternfly.min.css resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css",
+        kcButtonClass: "btn",
+        kcButtonDefaultClass: "btn-default"
+    }
+};
+
+export const kcContextMocks: KcContext[] = [
+    id<KcContext.Password>({
+        ...kcContextCommonMock,
+        pageId: "password.ftl",
+        password: {
+            passwordSet: true
+        },
+        stateChecker: "state checker"
+    }),
+    id<KcContext.Account>({
+        ...kcContextCommonMock,
+        pageId: "account.ftl",
+        url: {
+            ...kcContextCommonMock.url,
+            referrerURI: "#",
+            accountUrl: "#"
+        },
+        realm: {
+            ...kcContextCommonMock.realm,
+            registrationEmailAsUsername: true,
+            editUsernameAllowed: true
+        },
+        stateChecker: ""
+    }),
+    id<KcContext.Sessions>({
+        ...kcContextCommonMock,
+        pageId: "sessions.ftl",
+        sessions: {
+            sessions: [
+                {
+                    ipAddress: "127.0.0.1",
+                    started: new Date().toString(),
+                    lastAccess: new Date().toString(),
+                    expires: new Date().toString(),
+                    clients: ["Chrome", "Firefox"],
+                    id: "f8951177-817d-4a70-9c02-86d3c170fe51"
+                }
+            ]
+        },
+        stateChecker: "g6WB1FaYnKotTkiy7ZrlxvFztSqS0U8jvHsOOOb2z4g"
+    }),
+    id<KcContext.Totp>({
+        ...kcContextCommonMock,
+        pageId: "totp.ftl",
+        totp: {
+            enabled: true,
+            totpSecretEncoded: "KVVF G2BY N4YX S6LB IUYT K2LH IFYE 4SBV",
+            qrUrl: "#",
+            totpSecretQrCode:
+                "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACM0lEQVR4Xu3OIZJgOQwDUDFd2UxiurLAVnnbHw4YGDKtSiWOn4Gxf81//7r/+q8b4HfLGBZDK9d85NmNR+sB42sXvOYrN5P1DcgYYFTGfOlbzE8gzwy3euweGizw7cfdl34/GRhlkxjKNV+5AebPXPORX1JuB9x8ZfbyyD2y1krWAKsbMq1HnqQDaLfa77p4+MqvzEGSqvSAD/2IHW2yHaigR9tX3m8dDIYGcNf3f+gDpVBZbZU77zyJ6Rlcy+qoTMG887KAPD9hsh6a1Sv3gJUHGHUAxSMzj7zqDDe7Phmt2eG+8UsMxjRGm816MAO+8VMl1R1jGHOrZB/5Zo/WXAPgxixm9Mo96vDGrM1eOto8c4Ax4wF437mifOXlpiPzCnN7Y9l95NnEMxgMY9AAGA8fucH14Y1aVb6N/cqrmyh0BVht7k1e+bU8LK0Cg5vmVq9c5vHIjOfqxDIfeTraNVTwewa4wVe+SW5N+uP1qACeudUZbqGOfA6VZV750Noq2Xx3kpveV44ZelSV1V7KFHzkWyVrrlUwG0Pl9pWnoy3vsQoME6vKI69i5osVgwWzHT7zjmJtMcNUSVn1oYMd7ZodbgowZl45VG0uVuLPUr1yc79uaQBag/mqR34xhlWyHm1prplHboCWdZ4TeZjsK8+dI+jbz1C5hl65mcpgB5dhcj8+dGO+0Ko68+lD37JDD83dpDLzzK+TrQyaVwGj6pUboGV+7+AyN8An/pf84/7rv/4/1l4OCc/1BYMAAAAASUVORK5CYII=",
+            manualUrl: "#",
+            totpSecret: "G4nsI8lQagRMUchH8jEG",
+            otpCredentials: [],
+            supportedApplications: [
+                "totpAppFreeOTPName",
+                "totpAppMicrosoftAuthenticatorName",
+                "totpAppGoogleName"
+            ],
+            policy: {
+                algorithm: "HmacSHA1",
+                digits: 6,
+                lookAheadWindow: 1,
+                type: "totp",
+                period: 30
+            }
+        },
+        mode: "qr",
+        isAppInitiatedAction: false,
+        stateChecker: ""
+    }),
+    id<KcContext.Log>({
+        ...kcContextCommonMock,
+        pageId: "log.ftl",
+        log: {
+            events: [
+                {
+                    date: "2/21/2024, 1:28:39 PM",
+                    event: "login",
+                    ipAddress: "172.17.0.1",
+                    client: "security-admin-console",
+                    details: [{ key: "openid-connect", value: "admin" }]
+                }
+            ]
+        }
+    }),
+    id<KcContext.FederatedIdentity>({
+        ...kcContextCommonMock,
+        stateChecker: "",
+        pageId: "federatedIdentity.ftl",
+        federatedIdentity: {
+            identities: [
+                {
+                    providerId: "keycloak-oidc",
+                    displayName: "keycloak-oidc",
+                    userName: "John",
+                    connected: true
+                }
+            ],
+            removeLinkPossible: true
+        }
+    })
+];

src/account/Template.tsx

@@ -1,32 +1,60 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { usePrepareTemplate } from "keycloakify/lib/usePrepareTemplate";
-import { type TemplateProps } from "keycloakify/account/TemplateProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "./kcContext";
-import type { I18n } from "./i18n";
+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 { getClassName } = useGetClassName({ doUseDefaultCss, classes });
+    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
-    const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
+    const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
     const { locale, url, features, realm, message, referrer } = kcContext;
 
-    const { isReady } = usePrepareTemplate({
-        "doFetchDefaultThemeResources": doUseDefaultCss,
-        "styles": [
-            `${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`
-        ],
-        "htmlClassName": getClassName("kcHtmlClass"),
-        "bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass"))
+    useEffect(() => {
+        document.title = msgStr("accountManagementTitle");
+    }, []);
+
+    useSetClassName({
+        qualifiedName: "html",
+        className: kcClsx("kcHtmlClass")
     });
 
-    if (!isReady) {
+    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;
     }
 
@@ -45,17 +73,13 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                 {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
                                     <li>
                                         <div className="kc-dropdown" id="kc-locale-dropdown">
-                                            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                                             <a href="#" id="kc-current-locale-link">
                                                 {labelBySupportedLanguageTag[currentLanguageTag]}
                                             </a>
                                             <ul>
                                                 {locale.supported.map(({ languageTag }) => (
                                                     <li key={languageTag} className="kc-dropdown-item">
-                                                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                                                        <a href="#" onClick={() => changeLocale(languageTag)}>
-                                                            {labelBySupportedLanguageTag[languageTag]}
-                                                        </a>
+                                                        <a href={getChangeLocalUrl(languageTag)}>{labelBySupportedLanguageTag[languageTag]}</a>
                                                     </li>
                                                 ))}
                                             </ul>

src/account/TemplateProps.ts

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

src/account/i18n/i18n.tsx

@@ -1,11 +1,10 @@
-import "minimal-polyfills/Object.fromEntries";
-//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
-import { useEffect, useState, useRef } from "react";
-import fallbackMessages from "./baseMessages/en";
-import { getMessages } from "./baseMessages";
+import "keycloakify/tools/Object.fromEntries";
+import { useEffect, useState } from "react";
 import { assert } from "tsafe/assert";
-import type { KcContext } from "../kcContext/KcContext";
-import { Markdown } from "keycloakify/tools/Markdown";
+import messages_fallbackLanguage from "./baseMessages/en";
+import { getMessages } from "./baseMessages";
+import type { KcContext } from "../KcContext";
+import { Reflect } from "tsafe/Reflect";
 
 export const fallbackLanguageTag = "en";
 
@@ -18,7 +17,7 @@ export type KcContextLike = {
 
 assert<KcContext extends KcContextLike ? true : false>();
 
-export type MessageKey = keyof typeof fallbackMessages | keyof (typeof keycloakifyExtraMessages)[typeof fallbackLanguageTag];
+export type MessageKey = keyof typeof messages_fallbackLanguage;
 
 export type GenericI18n<MessageKey extends string> = {
     /**
@@ -28,11 +27,10 @@ export type GenericI18n<MessageKey extends string> = {
      */
     currentLanguageTag: string;
     /**
-     * To call when the user switch language.
-     * This will cause the page to be reloaded,
-     * on next load currentLanguageTag === newLanguageTag
+     * Redirect to this url to change the language.
+     * After reload currentLanguageTag === newLanguageTag
      */
-    changeLocale: (newLanguageTag: string) => never;
+    getChangeLocalUrl: (newLanguageTag: string) => string;
     /**
      * e.g. "en" => "English", "fr" => "Français", ...
      *
@@ -54,180 +52,272 @@ export type GenericI18n<MessageKey extends string> = {
      */
     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"
-     * advancedMsg("${access-denied} foo bar") === <span>${msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "foo": "Foo {0} {1}",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * advancedMsg("${access-denied} foo bar") === <span>{msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
      * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
      * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
+     * advancedMsg("${bar}", "<strong>c</strong>")
+     *    === <span>{msgStr("bar", "<strong>XXX</strong>")}<span>
+     *    === <span>Bar &lt;strong&gt;XXX&lt;/strong&gt;</span> (The html in the arg is partially escaped for security reasons, it might be untrusted)
+     * advancedMsg("${foo} xx ${bar}", "a", "b", "c")
+     *    === <span>{msgStr("foo", "a", "b")} xx {msgStr("bar")}<span>
+     *    === <span>Foo a b xx Bar {0}</span> (The substitution are only applied in the first message)
      */
     advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
     /**
-     * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === msg("access-denied") + " foo bar" === "Access denied foo bar"
-     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
+     * See advancedMsg() but instead of returning a JSX.Element it returns a string.
      */
     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 I18n = GenericI18n<MessageKey>;
+function createGetI18n<ExtraMessageKey extends string = never>(extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } }) {
+    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
+
+    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" | "getChangeLocalUrl" | "labelBySupportedLanguageTag"> = {
+            currentLanguageTag: kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag,
+            getChangeLocalUrl: newLanguageTag => {
+                const { locale } = kcContext;
+
+                assert(locale !== undefined, "Internationalization not enabled");
+
+                const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
+
+                assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
+
+                return targetSupportedLocale.url;
+            },
+            labelBySupportedLanguageTag: Object.fromEntries((kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label]))
+        };
+
+        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey, ExtraMessageKey>({
+            messages_fallbackLanguage,
+            extraMessages_fallbackLanguage: extraMessages[fallbackLanguageTag],
+            extraMessages: extraMessages[partialI18n.currentLanguageTag]
+        });
+
+        const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag === fallbackLanguageTag;
+
+        const result: Result = {
+            i18n: {
+                ...partialI18n,
+                ...createI18nTranslationFunctions({ messages: undefined }),
+                isFetchingTranslations: !isCurrentLanguageFallbackLanguage
+            },
+            prI18n_currentLanguage: isCurrentLanguageFallbackLanguage
+                ? undefined
+                : (async () => {
+                      const messages = await getMessages(partialI18n.currentLanguageTag);
+
+                      const i18n_currentLanguage: I18n = {
+                          ...partialI18n,
+                          ...createI18nTranslationFunctions({ messages }),
+                          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 };
+}
 
 export function createUseI18n<ExtraMessageKey extends string = never>(extraMessages: {
     [languageTag: string]: { [key in ExtraMessageKey]: string };
 }) {
-    function useI18n(params: { kcContext: KcContextLike }): GenericI18n<MessageKey | ExtraMessageKey> | null {
+    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
+
+    const { getI18n } = createGetI18n(extraMessages);
+
+    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
         const { kcContext } = params;
 
-        const [i18n, setI18n] = useState<GenericI18n<ExtraMessageKey | MessageKey> | undefined>(undefined);
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
 
-        const refHasStartedFetching = useRef(false);
+        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(i18n);
 
         useEffect(() => {
-            if (refHasStartedFetching.current) {
-                return;
-            }
+            let isActive = true;
 
-            refHasStartedFetching.current = true;
-
-            (async () => {
-                const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
-
-                setI18n({
-                    ...createI18nTranslationFunctions({
-                        "fallbackMessages": {
-                            ...fallbackMessages,
-                            ...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
-                            ...(extraMessages[fallbackLanguageTag] ?? {})
-                        } as any,
-                        "messages": {
-                            ...(await getMessages(currentLanguageTag)),
-                            ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
-                            ...(extraMessages[currentLanguageTag] ?? {})
-                        } as any
-                    }),
-                    currentLanguageTag,
-                    "changeLocale": 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`);
-
-                        window.location.href = targetSupportedLocale.url;
-
-                        assert(false, "never");
-                    },
-                    "labelBySupportedLanguageTag": Object.fromEntries(
-                        (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
-                    )
-                });
-            })();
-        }, []);
-
-        return i18n ?? null;
-    }
-
-    return { useI18n };
-}
-
-function createI18nTranslationFunctions<MessageKey extends string>(params: {
-    fallbackMessages: Record<MessageKey, string>;
-    messages: Record<MessageKey, string>;
-}): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
-    const { fallbackMessages, messages } = params;
-
-    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {
-        const { key, args, doRenderMarkdown } = props;
-
-        const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
-
-        if (messageOrUndefined === undefined) {
-            return undefined;
-        }
-
-        const message = messageOrUndefined;
-
-        const messageWithArgsInjectedIfAny = (() => {
-            const startIndex = message
-                .match(/{[0-9]+}/g)
-                ?.map(g => g.match(/{([0-9]+)}/)![1])
-                .map(indexStr => parseInt(indexStr))
-                .sort((a, b) => a - b)[0];
-
-            if (startIndex === undefined) {
-                // No {0} in message (no arguments expected)
-                return message;
-            }
-
-            let messageWithArgsInjected = message;
-
-            args.forEach((arg, i) => {
-                if (arg === undefined) {
+            prI18n_currentLanguage?.then(i18n => {
+                if (!isActive) {
                     return;
                 }
 
-                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
+                setI18n_toReturn(i18n);
             });
 
-            return messageWithArgsInjected;
-        })();
+            return () => {
+                isActive = false;
+            };
+        }, []);
 
-        return doRenderMarkdown ? (
-            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
-                {messageWithArgsInjectedIfAny}
-            </Markdown>
-        ) : (
-            messageWithArgsInjectedIfAny
-        );
+        return { i18n: i18n_toReturn };
     }
 
-    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
-        const { key, args, doRenderMarkdown } = props;
-
-        const match = key.match(/^\$\{([^{]+)\}$/);
-
-        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
-
-        const out = resolveMsg({
-            "key": keyUnwrappedFromCurlyBraces,
-            args,
-            doRenderMarkdown
-        });
-
-        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
-    }
-
-    return {
-        "msgStr": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": false }) as string,
-        "msg": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsg": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsgStr": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": false }) as string
-    };
+    return { useI18n, ofTypeI18n: Reflect<I18n>() };
 }
 
-const keycloakifyExtraMessages = {
-    "en": {
-        "shouldBeEqual": "{0} should be equal to {1}",
-        "shouldBeDifferent": "{0} should be different to {1}",
-        "shouldMatchPattern": "Pattern should match: `/{0}/`",
-        "mustBeAnInteger": "Must be an integer",
-        "notAValidOption": "Not a valid option",
-        "newPasswordSameAsOld": "New password must be different from the old one",
-        "passwordConfirmNotMatch": "Password confirmation does not match"
-    },
-    "fr": {
-        /* spell-checker: disable */
-        "shouldBeEqual": "{0} doit être égal à {1}",
-        "shouldBeDifferent": "{0} doit être différent de {1}",
-        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
-        "mustBeAnInteger": "Doit être un nombre entier",
-        "notAValidOption": "N'est pas une option valide",
+function createI18nTranslationFunctionsFactory<MessageKey extends string, ExtraMessageKey extends string>(params: {
+    messages_fallbackLanguage: Record<MessageKey, string>;
+    extraMessages_fallbackLanguage: Record<ExtraMessageKey, string> | undefined;
+    extraMessages: Partial<Record<ExtraMessageKey, string>> | undefined;
+}) {
+    const { extraMessages } = params;
 
-        "logoutConfirmTitle": "Déconnexion",
-        "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
-        "doLogout": "Se déconnecter",
-        "newPasswordSameAsOld": "Le nouveau mot de passe doit être différent de l'ancien",
-        "passwordConfirmNotMatch": "La confirmation du mot de passe ne correspond pas"
-        /* spell-checker: enable */
+    const messages_fallbackLanguage = {
+        ...params.messages_fallbackLanguage,
+        ...params.extraMessages_fallbackLanguage
+    };
+
+    function createI18nTranslationFunctions(params: {
+        messages: Partial<Record<MessageKey, string>> | undefined;
+    }): Pick<GenericI18n<MessageKey | ExtraMessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
+        const messages = {
+            ...params.messages,
+            ...extraMessages
+        };
+
+        function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
+            const { key, args, doRenderAsHtml } = props;
+
+            const messageOrUndefined: string | undefined = (messages as any)[key] ?? (messages_fallbackLanguage as any)[key];
+
+            if (messageOrUndefined === undefined) {
+                return undefined;
+            }
+
+            const message = messageOrUndefined;
+
+            const messageWithArgsInjectedIfAny = (() => {
+                const startIndex = message
+                    .match(/{[0-9]+}/g)
+                    ?.map(g => g.match(/{([0-9]+)}/)![1])
+                    .map(indexStr => parseInt(indexStr))
+                    .sort((a, b) => a - b)[0];
+
+                if (startIndex === undefined) {
+                    // No {0} in message (no arguments expected)
+                    return message;
+                }
+
+                let messageWithArgsInjected = message;
+
+                args.forEach((arg, i) => {
+                    if (arg === undefined) {
+                        return;
+                    }
+
+                    messageWithArgsInjected = messageWithArgsInjected.replace(
+                        new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                        arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                    );
+                });
+
+                return messageWithArgsInjected;
+            })();
+
+            return doRenderAsHtml ? (
+                <span
+                    // NOTE: The message is trusted. The arguments are not but are escaped.
+                    dangerouslySetInnerHTML={{
+                        __html: messageWithArgsInjectedIfAny
+                    }}
+                />
+            ) : (
+                messageWithArgsInjectedIfAny
+            );
+        }
+
+        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
+            const { key, args, doRenderAsHtml } = props;
+
+            if (!/\$\{[^}]+\}/.test(key)) {
+                const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
+
+                if (resolvedMessage === undefined) {
+                    return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
+                }
+
+                return resolvedMessage;
+            }
+
+            let isFirstMatch = true;
+
+            const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
+                const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
+
+                isFirstMatch = false;
+
+                return replaceBy;
+            });
+
+            return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
+        }
+
+        return {
+            msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
+            msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
+            advancedMsg: (key, ...args) =>
+                resolveMsgAdvanced({
+                    key,
+                    args,
+                    doRenderAsHtml: true
+                }) as JSX.Element,
+            advancedMsgStr: (key, ...args) =>
+                resolveMsgAdvanced({
+                    key,
+                    args,
+                    doRenderAsHtml: false
+                }) as string
+        };
     }
-};
+
+    return { createI18nTranslationFunctions };
+}

src/account/i18n/index.ts

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

src/account/index.ts

@@ -1,10 +1,3 @@
-import Fallback from "keycloakify/account/Fallback";
-
-export default Fallback;
-
-export { getKcContext } from "keycloakify/account/kcContext/getKcContext";
-export { createGetKcContext } from "keycloakify/account/kcContext/createGetKcContext";
-export type { AccountThemePageId as PageId } from "keycloakify/bin/keycloakify/generateFtl";
-export { createUseI18n } from "keycloakify/account/i18n/i18n";
-
-export type { PageProps } from "keycloakify/account/pages/PageProps";
+export type { ExtendKcContext } from "keycloakify/account/KcContext";
+export type { ClassKey } from "keycloakify/account/TemplateProps";
+export { createUseI18n } from "keycloakify/account/i18n";

src/account/kcContext/KcContext.ts

@@ -1,125 +0,0 @@
-import type { AccountThemePageId, ThemeType } from "keycloakify/bin/keycloakify/generateFtl";
-import { assert } from "tsafe/assert";
-import type { Equals } from "tsafe";
-
-export type KcContext = KcContext.Password | KcContext.Account;
-
-export declare namespace KcContext {
-    export type Common = {
-        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;
-            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;
-        };
-    };
-
-    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;
-    };
-}
-
-{
-    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/createGetKcContext.ts

@@ -1,102 +0,0 @@
-import type { DeepPartial } from "keycloakify/tools/DeepPartial";
-import { deepAssign } from "keycloakify/tools/deepAssign";
-import type { ExtendKcContext } from "./getKcContextFromWindow";
-import { getKcContextFromWindow } from "./getKcContextFromWindow";
-import { pathJoin } from "keycloakify/bin/tools/pathJoin";
-import { pathBasename } from "keycloakify/tools/pathBasename";
-import { resourcesCommonDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
-import { symToStr } from "tsafe/symToStr";
-import { kcContextMocks, kcContextCommonMock } from "keycloakify/account/kcContext/kcContextMocks";
-
-export function createGetKcContext<KcContextExtension extends { pageId: string } = never>(params?: {
-    mockData?: readonly DeepPartial<ExtendKcContext<KcContextExtension>>[];
-}) {
-    const { mockData } = params ?? {};
-
-    function getKcContext<PageId extends ExtendKcContext<KcContextExtension>["pageId"] | undefined = undefined>(params?: {
-        mockPageId?: PageId;
-        storyPartialKcContext?: DeepPartial<Extract<ExtendKcContext<KcContextExtension>, { pageId: PageId }>>;
-    }): {
-        kcContext: PageId extends undefined
-            ? ExtendKcContext<KcContextExtension> | undefined
-            : Extract<ExtendKcContext<KcContextExtension>, { pageId: PageId }>;
-    } {
-        const { mockPageId, storyPartialKcContext } = params ?? {};
-
-        const realKcContext = getKcContextFromWindow<KcContextExtension>();
-
-        if (mockPageId !== undefined && realKcContext === undefined) {
-            //TODO maybe trow if no mock fo custom page
-
-            console.log(`%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`, "background: red; color: yellow; font-size: medium");
-
-            const kcContextDefaultMock = kcContextMocks.find(({ pageId }) => pageId === mockPageId);
-
-            const partialKcContextCustomMock = (() => {
-                const out: DeepPartial<ExtendKcContext<KcContextExtension>> = {};
-
-                const mockDataPick = mockData?.find(({ pageId }) => pageId === mockPageId);
-
-                if (mockDataPick !== undefined) {
-                    deepAssign({
-                        "target": out,
-                        "source": mockDataPick
-                    });
-                }
-
-                if (storyPartialKcContext !== undefined) {
-                    deepAssign({
-                        "target": out,
-                        "source": storyPartialKcContext
-                    });
-                }
-
-                return Object.keys(out).length === 0 ? undefined : out;
-            })();
-
-            if (kcContextDefaultMock === undefined && partialKcContextCustomMock === undefined) {
-                console.warn(
-                    [
-                        `WARNING: You declared the non build in page ${mockPageId} but you didn't `,
-                        `provide mock data needed to debug the page outside of Keycloak as you are trying to do now.`,
-                        `Please check the documentation of the getKcContext function`
-                    ].join("\n")
-                );
-            }
-
-            const kcContext: any = {};
-
-            deepAssign({
-                "target": kcContext,
-                "source": kcContextDefaultMock !== undefined ? kcContextDefaultMock : { "pageId": mockPageId, ...kcContextCommonMock }
-            });
-
-            if (partialKcContextCustomMock !== undefined) {
-                deepAssign({
-                    "target": kcContext,
-                    "source": partialKcContextCustomMock
-                });
-            }
-
-            return { kcContext };
-        }
-
-        if (realKcContext === undefined) {
-            return { "kcContext": undefined as any };
-        }
-
-        if (realKcContext.themeType !== "account") {
-            return { "kcContext": undefined as any };
-        }
-
-        {
-            const { url } = realKcContext;
-
-            url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(resourcesCommonDirPathRelativeToPublicDir));
-        }
-
-        return { "kcContext": realKcContext as any };
-    }
-
-    return { getKcContext };
-}

src/account/kcContext/getKcContext.ts

@@ -1,21 +0,0 @@
-import type { DeepPartial } from "keycloakify/tools/DeepPartial";
-import type { ExtendKcContext } from "./getKcContextFromWindow";
-import { createGetKcContext } from "./createGetKcContext";
-
-/** NOTE: We now recommend using createGetKcContext instead of this function to make storybook integration easier
- *  See: https://github.com/keycloakify/keycloakify-starter/blob/main/src/keycloak-theme/account/kcContext.ts
- */
-export function getKcContext<KcContextExtension extends { pageId: string } = never>(params?: {
-    mockPageId?: ExtendKcContext<KcContextExtension>["pageId"];
-    mockData?: readonly DeepPartial<ExtendKcContext<KcContextExtension>>[];
-}): { kcContext: ExtendKcContext<KcContextExtension> | undefined } {
-    const { mockPageId, mockData } = params ?? {};
-
-    const { getKcContext } = createGetKcContext({
-        mockData
-    });
-
-    const { kcContext } = getKcContext({ mockPageId });
-
-    return { kcContext };
-}

src/account/kcContext/getKcContextFromWindow.ts

@@ -1,11 +0,0 @@
-import type { AndByDiscriminatingKey } from "keycloakify/tools/AndByDiscriminatingKey";
-import { ftlValuesGlobalName } from "keycloakify/bin/keycloakify/ftlValuesGlobalName";
-import type { KcContext } from "./KcContext";
-
-export type ExtendKcContext<KcContextExtension extends { pageId: string }> = [KcContextExtension] extends [never]
-    ? KcContext
-    : AndByDiscriminatingKey<"pageId", KcContextExtension & KcContext.Common, KcContext>;
-
-export function getKcContextFromWindow<KcContextExtension extends { pageId: string } = never>(): ExtendKcContext<KcContextExtension> | undefined {
-    return typeof window === "undefined" ? undefined : (window as any)[ftlValuesGlobalName];
-}

src/account/kcContext/index.ts

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

src/account/kcContext/kcContextMocks.ts

@@ -1,174 +0,0 @@
-import "minimal-polyfills/Object.fromEntries";
-import { resourcesCommonDirPathRelativeToPublicDir, resourcesDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
-import { pathJoin } from "keycloakify/bin/tools/pathJoin";
-import { id } from "tsafe/id";
-import type { KcContext } from "./KcContext";
-
-const PUBLIC_URL = (typeof process !== "object" ? undefined : process.env?.["PUBLIC_URL"]) || "/";
-
-export const kcContextCommonMock: KcContext.Common = {
-    "keycloakifyVersion": "0.0.0",
-    "themeType": "account",
-    "themeName": "my-theme-name",
-    "url": {
-        "resourcesPath": pathJoin(PUBLIC_URL, resourcesDirPathRelativeToPublicDir),
-        "resourcesCommonPath": pathJoin(PUBLIC_URL, resourcesCommonDirPathRelativeToPublicDir),
-        "resourceUrl": "#",
-        "accountUrl": "#",
-        "applicationsUrl": "#",
-        "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 */
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=de",
-                "label": "Deutsch",
-                "languageTag": "de"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=no",
-                "label": "Norsk",
-                "languageTag": "no"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ru",
-                "label": "Русский",
-                "languageTag": "ru"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sv",
-                "label": "Svenska",
-                "languageTag": "sv"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pt-BR",
-                "label": "Português (Brasil)",
-                "languageTag": "pt-BR"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=lt",
-                "label": "Lietuvių",
-                "languageTag": "lt"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=en",
-                "label": "English",
-                "languageTag": "en"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=it",
-                "label": "Italiano",
-                "languageTag": "it"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=fr",
-                "label": "Français",
-                "languageTag": "fr"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=zh-CN",
-                "label": "中文简体",
-                "languageTag": "zh-CN"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=es",
-                "label": "Español",
-                "languageTag": "es"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=cs",
-                "label": "Čeština",
-                "languageTag": "cs"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ja",
-                "label": "日本語",
-                "languageTag": "ja"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sk",
-                "label": "Slovenčina",
-                "languageTag": "sk"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pl",
-                "label": "Polski",
-                "languageTag": "pl"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ca",
-                "label": "Català",
-                "languageTag": "ca"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=nl",
-                "label": "Nederlands",
-                "languageTag": "nl"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=tr",
-                "label": "Türkçe",
-                "languageTag": "tr"
-            }
-            /* spell-checker: enable */
-        ],
-        "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"
-    }
-};
-
-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": ""
-    })
-];

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/lib/useGetClassName.ts

@@ -1,13 +0,0 @@
-import { createUseClassName } from "keycloakify/lib/useGetClassName";
-import type { ClassKey } from "keycloakify/account/TemplateProps";
-
-export const { useGetClassName } = createUseClassName<ClassKey>({
-    "defaultClasses": {
-        "kcHtmlClass": undefined,
-        "kcBodyClass": undefined,
-        "kcButtonClass": "btn",
-        "kcButtonPrimaryClass": "btn-primary",
-        "kcButtonLargeClass": "btn-lg",
-        "kcButtonDefaultClass": "btn-default"
-    }
-});

src/account/pages/Account.tsx

@@ -1,18 +1,20 @@
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import { 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, classes } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const classes = {
+        ...props.classes,
+        kcBodyClass: clsx(props.classes?.kcBodyClass, "user")
+    };
+
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
-        "classes": {
-            ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "user")
-        }
+        classes
     });
 
     const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
@@ -51,7 +53,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                                 id="username"
                                 name="username"
                                 disabled={!realm.editUsernameAllowed}
-                                value={account.username ?? ""}
+                                defaultValue={account.username ?? ""}
                             />
                         </div>
                     </div>
@@ -66,7 +68,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                     </div>
 
                     <div className="col-sm-10 col-md-10">
-                        <input type="text" className="form-control" id="email" name="email" autoFocus value={account.email ?? ""} />
+                        <input type="text" className="form-control" id="email" name="email" autoFocus defaultValue={account.email ?? ""} />
                     </div>
                 </div>
 
@@ -79,7 +81,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                     </div>
 
                     <div className="col-sm-10 col-md-10">
-                        <input type="text" className="form-control" id="firstName" name="firstName" value={account.firstName ?? ""} />
+                        <input type="text" className="form-control" id="firstName" name="firstName" defaultValue={account.firstName ?? ""} />
                     </div>
                 </div>
 
@@ -92,7 +94,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                     </div>
 
                     <div className="col-sm-10 col-md-10">
-                        <input type="text" className="form-control" id="lastName" name="lastName" value={account.lastName ?? ""} />
+                        <input type="text" className="form-control" id="lastName" name="lastName" defaultValue={account.lastName ?? ""} />
                     </div>
                 </div>
 
@@ -102,11 +104,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                             {referrer !== undefined && <a href={referrer?.url}>{msg("backToApplication")}</a>}
                             <button
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Save"
                             >
@@ -114,11 +112,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                             </button>
                             <button
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonDefaultClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Cancel"
                             >

src/account/pages/Applications.tsx

@@ -0,0 +1,137 @@
+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>
+                                            ))}
+                                        {!isArrayWithEmptyObject(application.realmRolesAvailable) && application.resourceRolesAvailable && ", "}
+                                        {application.resourceRolesAvailable &&
+                                            Object.keys(application.resourceRolesAvailable).map(resource => (
+                                                <span key={resource}>
+                                                    {!isArrayWithEmptyObject(application.realmRolesAvailable) && ", "}
+                                                    {application.resourceRolesAvailable[resource].map(clientRole => (
+                                                        <span key={clientRole.roleName}>
+                                                            {clientRole.roleDescription
+                                                                ? advancedMsg(clientRole.roleDescription)
+                                                                : advancedMsg(clientRole.roleName)}{" "}
+                                                            {msg("inResource")}{" "}
+                                                            <strong>
+                                                                {clientRole.clientName ? advancedMsg(clientRole.clientName) : clientRole.clientId}
+                                                            </strong>
+                                                            {clientRole !==
+                                                                application.resourceRolesAvailable[resource][
+                                                                    application.resourceRolesAvailable[resource].length - 1
+                                                                ] && ", "}
+                                                        </span>
+                                                    ))}
+                                                </span>
+                                            ))}
+                                    </td>
+
+                                    <td>
+                                        {application.client.consentRequired ? (
+                                            application.clientScopesGranted.map(claim => (
+                                                <span key={claim}>
+                                                    {advancedMsg(claim)}
+                                                    {claim !== application.clientScopesGranted[application.clientScopesGranted.length - 1] && ", "}
+                                                </span>
+                                            ))
+                                        ) : (
+                                            <strong>{msg("fullAccess")}</strong>
+                                        )}
+                                    </td>
+
+                                    <td>
+                                        {application.additionalGrants.map(grant => (
+                                            <span key={grant}>
+                                                {advancedMsg(grant)}
+                                                {grant !== application.additionalGrants[application.additionalGrants.length - 1] && ", "}
+                                            </span>
+                                        ))}
+                                    </td>
+
+                                    <td>
+                                        {(application.client.consentRequired && application.clientScopesGranted.length > 0) ||
+                                        application.additionalGrants.length > 0 ? (
+                                            <button
+                                                type="submit"
+                                                className={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="federatedIdentity">
+            <div className="main-layout social">
+                <div className="row">
+                    <div className="col-md-10">
+                        <h2>{msg("federatedIdentitiesHtmlTitle")}</h2>
+                    </div>
+                </div>
+                <div id="federated-identities">
+                    {federatedIdentity.identities.map(identity => (
+                        <div key={identity.providerId} className="row margin-bottom">
+                            <div className="col-sm-2 col-md-2">
+                                <label htmlFor={identity.providerId} className="control-label">
+                                    {identity.displayName}
+                                </label>
+                            </div>
+                            <div className="col-sm-5 col-md-5">
+                                <input disabled className="form-control" value={identity.userName} />
+                            </div>
+                            <div className="col-sm-5 col-md-5">
+                                {identity.connected ? (
+                                    federatedIdentity.removeLinkPossible && (
+                                        <form action={url.socialUrl} method="post" className="form-inline">
+                                            <input type="hidden" name="stateChecker" value={stateChecker} />
+                                            <input type="hidden" name="action" value="remove" />
+                                            <input type="hidden" name="providerId" value={identity.providerId} />
+                                            <button id={`remove-link-${identity.providerId}`} className="btn btn-default">
+                                                {msg("doRemove")}
+                                            </button>
+                                        </form>
+                                    )
+                                ) : (
+                                    <form action={url.socialUrl} method="post" className="form-inline">
+                                        <input type="hidden" name="stateChecker" value={stateChecker} />
+                                        <input type="hidden" name="action" value="add" />
+                                        <input type="hidden" name="providerId" value={identity.providerId} />
+                                        <button id={`add-link-${identity.providerId}`} className="btn btn-default">
+                                            {msg("doAdd")}
+                                        </button>
+                                    </form>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </Template>
+    );
+}

src/account/pages/Log.tsx

@@ -0,0 +1,70 @@
+import type { 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

@@ -1,11 +1,10 @@
-import type { LazyExoticComponent } from "react";
-import type { I18n } from "keycloakify/account/i18n";
-import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
+import { type TemplateProps, type ClassKey } from "keycloakify/account/TemplateProps";
+import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
 
-export type PageProps<KcContext, I18nExtended extends I18n> = {
-    Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
-    kcContext: KcContext;
-    i18n: I18nExtended;
+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

@@ -1,19 +1,21 @@
 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 { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const classes = {
+        ...props.classes,
+        kcBodyClass: clsx(props.classes?.kcBodyClass, "password")
+    };
+
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
-        "classes": {
-            ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "password")
-        }
+        classes
     });
 
     const { url, password, account, stateChecker } = kcContext;
@@ -57,18 +59,18 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
             {...{
                 kcContext: {
                     ...kcContext,
-                    "message": (() => {
+                    message: (() => {
                         if (newPasswordError !== "") {
                             return {
-                                "type": "error",
-                                "summary": newPasswordError
+                                type: "error",
+                                summary: newPasswordError
                             };
                         }
 
                         if (newPasswordConfirmError !== "") {
                             return {
-                                "type": "error",
-                                "summary": newPasswordConfirmError
+                                type: "error",
+                                summary: newPasswordConfirmError
                             };
                         }
 
@@ -98,7 +100,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                     value={account.username ?? ""}
                     autoComplete="username"
                     readOnly
-                    style={{ "display": "none" }}
+                    style={{ display: "none" }}
                 />
 
                 {password.passwordSet && (
@@ -192,11 +194,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                             <button
                                 disabled={newPasswordError !== "" || newPasswordConfirmError !== ""}
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Save"
                             >

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,221 @@
+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;
+
+    const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
+        HmacSHA1: "SHA1",
+        HmacSHA256: "SHA256",
+        HmacSHA512: "SHA512"
+    };
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="totp">
+            <>
+                <div className="row">
+                    <div className="col-md-10">
+                        <h2>{msg("authenticatorTitle")}</h2>
+                    </div>
+                    {totp.otpCredentials.length === 0 && (
+                        <div className="subtitle col-md-2">
+                            <span className="required">*</span>
+                            {msg("requiredFields")}
+                        </div>
+                    )}
+                </div>
+                {totp.enabled && (
+                    <table className="table table-bordered table-striped">
+                        <thead>
+                            {totp.otpCredentials.length > 1 ? (
+                                <tr>
+                                    <th colSpan={4}>{msg("configureAuthenticators")}</th>
+                                </tr>
+                            ) : (
+                                <tr>
+                                    <th colSpan={3}>{msg("configureAuthenticators")}</th>
+                                </tr>
+                            )}
+                        </thead>
+                        <tbody>
+                            {totp.otpCredentials.map((credential, index) => (
+                                <tr key={index}>
+                                    <td className="provider">{msg("mobile")}</td>
+                                    {totp.otpCredentials.length > 1 && <td className="provider">{credential.id}</td>}
+                                    <td className="provider">{credential.userLabel || ""}</td>
+                                    <td className="action">
+                                        <form action={url.totpUrl} method="post" className="form-inline">
+                                            <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                                            <input type="hidden" id="submitAction" name="submitAction" value="Delete" />
+                                            <input type="hidden" id="credentialId" name="credentialId" value={credential.id} />
+                                            <button id={`remove-mobile-${index}`} className="btn btn-default">
+                                                <i className="pficon pficon-delete"></i>
+                                            </button>
+                                        </form>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                )}
+                {!totp.enabled && (
+                    <div>
+                        <hr />
+                        <ol id="kc-totp-settings">
+                            <li>
+                                <p>{msg("totpStep1")}</p>
+
+                                <ul id="kc-totp-supported-apps">{totp.supportedApplications?.map(app => <li key={app}>{advancedMsg(app)}</li>)}</ul>
+                            </li>
+
+                            {mode && mode == "manual" ? (
+                                <>
+                                    <li>
+                                        <p>{msg("totpManualStep2")}</p>
+                                        <p>
+                                            <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+                                        </p>
+                                        <p>
+                                            <a href={totp.qrUrl} id="mode-barcode">
+                                                {msg("totpScanBarcode")}
+                                            </a>
+                                        </p>
+                                    </li>
+                                    <li>
+                                        <p>{msg("totpManualStep3")}</p>
+                                        <ul>
+                                            <li id="kc-totp-type">
+                                                {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
+                                            </li>
+                                            <li id="kc-totp-algorithm">
+                                                {msg("totpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                            </li>
+                                            <li id="kc-totp-digits">
+                                                {msg("totpDigits")}: {totp.policy.digits}
+                                            </li>
+                                            {totp.policy.type === "totp" ? (
+                                                <li id="kc-totp-period">
+                                                    {msg("totpInterval")}: {totp.policy.period}
+                                                </li>
+                                            ) : (
+                                                <li id="kc-totp-counter">
+                                                    {msg("totpCounter")}: {totp.policy.initialCounter}
+                                                </li>
+                                            )}
+                                        </ul>
+                                    </li>
+                                </>
+                            ) : (
+                                <li>
+                                    <p>{msg("totpStep2")}</p>
+                                    <p>
+                                        <img
+                                            id="kc-totp-secret-qr-code"
+                                            src={`data:image/png;base64, ${totp.totpSecretQrCode}`}
+                                            alt="Figure: Barcode"
+                                        />
+                                    </p>
+                                    <p>
+                                        <a href={totp.manualUrl} id="mode-manual">
+                                            {msg("totpUnableToScan")}
+                                        </a>
+                                    </p>
+                                </li>
+                            )}
+                            <li>
+                                <p>{msg("totpStep3")}</p>
+                                <p>{msg("totpStep3DeviceName")}</p>
+                            </li>
+                        </ol>
+                        <hr />
+                        <form action={url.totpUrl} className={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">
+                                            {messagesPerField.get("totp")}
+                                        </span>
+                                    )}
+                                </div>
+                                <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
+                                {mode && <input type="hidden" id="mode" value={mode} />}
+                            </div>
+
+                            <div className={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">
+                                            {messagesPerField.get("userLabel")}
+                                        </span>
+                                    )}
+                                </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,109 @@
+import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
+import cliSelect from "cli-select";
+import {
+    loginThemePageIds,
+    accountThemePageIds,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    themeTypes,
+    type ThemeType
+} from "./shared/constants";
+import { capitalize } from "tsafe/capitalize";
+import * as fs from "fs";
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
+import { assert, Equals } from "tsafe/assert";
+import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
+import type { CliCommandOptions } from "./main";
+import { 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 { value: themeType } = await cliSelect<ThemeType>({
+        values: [...themeTypes]
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    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 [...loginThemePageIds];
+                case "account":
+                    return [...accountThemePageIds];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageId}`);
+
+    const { themeSrcDirPath } = getThemeSrcDirPath({
+        projectDirPath: buildContext.projectDirPath
+    });
+
+    const componentBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(
+        /ftl$/,
+        "stories.tsx"
+    );
+
+    const targetFilePath = pathJoin(
+        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', "");
+
+    {
+        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("yarn storybook")}`
+        ].join("\n")
+    );
+}

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

@@ -1,49 +1,13 @@
-#!/usr/bin/env node
+import { copyKeycloakResourcesToPublic } from "./shared/copyKeycloakResourcesToPublic";
+import { getBuildContext } from "./shared/buildContext";
+import type { CliCommandOptions } from "./main";
 
-import { downloadKeycloakStaticResources } from "./keycloakify/generateTheme/downloadKeycloakStaticResources";
-import { join as pathJoin, relative as pathRelative } from "path";
-import { basenameOfKeycloakDirInPublicDir } from "./mockTestingResourcesPath";
-import { readBuildOptions } from "./keycloakify/BuildOptions";
-import { themeTypes } from "./keycloakify/generateFtl";
-import * as fs from "fs";
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
 
-(async () => {
-    const projectDirPath = process.cwd();
+    const buildContext = getBuildContext({ cliCommandOptions });
 
-    const buildOptions = readBuildOptions({
-        "processArgv": process.argv.slice(2),
-        "projectDirPath": process.cwd()
+    await copyKeycloakResourcesToPublic({
+        buildContext
     });
-
-    const keycloakDirInPublicDir = pathJoin(process.env["PUBLIC_DIR_PATH"] || pathJoin(projectDirPath, "public"), basenameOfKeycloakDirInPublicDir);
-
-    if (fs.existsSync(keycloakDirInPublicDir)) {
-        console.log(`${pathRelative(projectDirPath, keycloakDirInPublicDir)} already exists.`);
-        return;
-    }
-
-    for (const themeType of themeTypes) {
-        await downloadKeycloakStaticResources({
-            projectDirPath,
-            "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
-            "themeType": themeType,
-            "themeDirPath": keycloakDirInPublicDir,
-            "usedResources": undefined
-        });
-    }
-
-    fs.writeFileSync(
-        pathJoin(keycloakDirInPublicDir, "README.txt"),
-        Buffer.from(
-            // prettier-ignore
-            [
-                "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(keycloakDirInPublicDir, ".gitignore"), Buffer.from("*", "utf8"));
-
-    console.log(`${pathRelative(projectDirPath, keycloakDirInPublicDir)} directory created.`);
-})();
+}

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

@@ -1,97 +0,0 @@
-#!/usr/bin/env node
-import { join as pathJoin } from "path";
-import { downloadAndUnzip } from "./tools/downloadAndUnzip";
-import { promptKeycloakVersion } from "./promptKeycloakVersion";
-import { getLogger } from "./tools/logger";
-import { readBuildOptions } from "./keycloakify/BuildOptions";
-import * as child_process from "child_process";
-import * as fs from "fs";
-
-export async function downloadBuiltinKeycloakTheme(params: { projectDirPath: string; keycloakVersion: string; destDirPath: string }) {
-    const { projectDirPath, keycloakVersion, destDirPath } = params;
-
-    await downloadAndUnzip({
-        "doUseCache": true,
-        projectDirPath,
-        destDirPath,
-        "url": `https://github.com/keycloak/keycloak/archive/refs/tags/${keycloakVersion}.zip`,
-        "specificDirsToExtract": ["", "-community"].map(ext => `keycloak-${keycloakVersion}/themes/src/main/resources${ext}/theme`),
-        "preCacheTransform": {
-            "actionCacheId": "npm install and build",
-            "action": async ({ destDirPath }) => {
-                install_common_node_modules: {
-                    const commonResourcesDirPath = pathJoin(destDirPath, "keycloak", "common", "resources");
-
-                    if (!fs.existsSync(commonResourcesDirPath)) {
-                        break install_common_node_modules;
-                    }
-
-                    if (!fs.existsSync(pathJoin(commonResourcesDirPath, "package.json"))) {
-                        break install_common_node_modules;
-                    }
-
-                    if (fs.existsSync(pathJoin(commonResourcesDirPath, "node_modules"))) {
-                        break install_common_node_modules;
-                    }
-
-                    child_process.execSync("npm install --omit=dev", {
-                        "cwd": commonResourcesDirPath,
-                        "stdio": "ignore"
-                    });
-                }
-
-                install_and_move_to_common_resources_generated_in_keycloak_v2: {
-                    const accountV2DirSrcDirPath = pathJoin(destDirPath, "keycloak.v2", "account", "src");
-
-                    if (!fs.existsSync(accountV2DirSrcDirPath)) {
-                        break install_and_move_to_common_resources_generated_in_keycloak_v2;
-                    }
-
-                    child_process.execSync("npm install", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
-
-                    const packageJsonFilePath = pathJoin(accountV2DirSrcDirPath, "package.json");
-
-                    const packageJsonRaw = fs.readFileSync(packageJsonFilePath);
-
-                    const parsedPackageJson = JSON.parse(packageJsonRaw.toString("utf8"));
-
-                    parsedPackageJson.scripts.build = parsedPackageJson.scripts.build
-                        .replace("npm run check-types", "true")
-                        .replace("npm run babel", "true");
-
-                    fs.writeFileSync(packageJsonFilePath, Buffer.from(JSON.stringify(parsedPackageJson, null, 2), "utf8"));
-
-                    child_process.execSync("npm run build", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
-
-                    fs.writeFileSync(packageJsonFilePath, packageJsonRaw);
-
-                    fs.rmSync(pathJoin(accountV2DirSrcDirPath, "node_modules"), { "recursive": true });
-                }
-            }
-        }
-    });
-}
-
-async function main() {
-    const buildOptions = readBuildOptions({
-        "projectDirPath": process.cwd(),
-        "processArgv": process.argv.slice(2)
-    });
-
-    const logger = getLogger({ "isSilent": buildOptions.isSilent });
-    const { keycloakVersion } = await promptKeycloakVersion();
-
-    const destDirPath = pathJoin(buildOptions.keycloakifyBuildDirPath, "src", "main", "resources", "theme");
-
-    logger.log(`Downloading builtins theme of Keycloak ${keycloakVersion} here ${destDirPath}`);
-
-    await downloadBuiltinKeycloakTheme({
-        "projectDirPath": process.cwd(),
-        keycloakVersion,
-        destDirPath
-    });
-}
-
-if (require.main === module) {
-    main();
-}

src/bin/eject-keycloak-page.ts

@@ -1,65 +0,0 @@
-#!/usr/bin/env node
-
-import { getProjectRoot } from "./tools/getProjectRoot";
-import cliSelect from "cli-select";
-import {
-    loginThemePageIds,
-    accountThemePageIds,
-    type LoginThemePageId,
-    type AccountThemePageId,
-    themeTypes,
-    type ThemeType
-} from "./keycloakify/generateFtl";
-import { capitalize } from "tsafe/capitalize";
-import { readFile, writeFile } from "fs/promises";
-import { existsSync } from "fs";
-import { join as pathJoin, relative as pathRelative } from "path";
-import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
-import { assert, Equals } from "tsafe/assert";
-import { getThemeSrcDirPath } from "./getSrcDirPath";
-
-(async () => {
-    console.log("Select a theme type");
-
-    const { value: themeType } = await cliSelect<ThemeType>({
-        "values": [...themeTypes]
-    }).catch(() => {
-        console.log("Aborting");
-
-        process.exit(-1);
-    });
-
-    console.log("Select a page you would like to eject");
-
-    const { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({
-        "values": (() => {
-            switch (themeType) {
-                case "login":
-                    return [...loginThemePageIds];
-                case "account":
-                    return [...accountThemePageIds];
-            }
-            assert<Equals<typeof themeType, never>>(false);
-        })()
-    }).catch(() => {
-        console.log("Aborting");
-
-        process.exit(-1);
-    });
-
-    const pageBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(/ftl$/, "tsx");
-
-    const { themeSrcDirPath } = getThemeSrcDirPath({ "projectDirPath": process.cwd() });
-
-    const targetFilePath = pathJoin(themeSrcDirPath, themeType, "pages", pageBasename);
-
-    if (existsSync(targetFilePath)) {
-        console.log(`${pageId} is already ejected, ${pathRelative(process.cwd(), targetFilePath)} already exists`);
-
-        process.exit(-1);
-    }
-
-    await writeFile(targetFilePath, await readFile(pathJoin(getProjectRoot(), "src", themeType, "pages", pageBasename)));
-
-    console.log(`${pathRelative(process.cwd(), targetFilePath)} created`);
-})();

src/bin/eject-page.ts

@@ -0,0 +1,258 @@
+#!/usr/bin/env node
+
+import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
+import cliSelect from "cli-select";
+import {
+    loginThemePageIds,
+    accountThemePageIds,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    themeTypes,
+    type ThemeType
+} from "./shared/constants";
+import { capitalize } from "tsafe/capitalize";
+import * as fs from "fs";
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
+import { assert, Equals } from "tsafe/assert";
+import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
+import type { CliCommandOptions } from "./main";
+import { 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 { value: themeType } = await cliSelect<ThemeType>({
+        values: [...themeTypes]
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${themeType}`);
+
+    console.log(chalk.cyan("Select the page you want to customize:"));
+
+    const 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,
+                        ...loginThemePageIds
+                    ];
+                case "account":
+                    return [templateValue, ...accountThemePageIds];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageIdOrComponent}`);
+
+    const { themeSrcDirPath } = getThemeSrcDirPath({
+        projectDirPath: buildContext.projectDirPath
+    });
+
+    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(
+        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(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";
+
+    console.log(
+        [
+            ``,
+            `You now need to update your page router:`,
+            ``,
+            `${chalk.bold(
+                pathJoin(
+                    ".",
+                    pathRelative(process.cwd(), themeSrcDirPath),
+                    themeType,
+                    "KcPage.tsx"
+                )
+            )}:`,
+            chalk.grey("```"),
+            `// ...`,
+            ``,
+            chalk.green(
+                `+const ${componentBasename.replace(
+                    /.tsx$/,
+                    ""
+                )} = lazy(() => import("./pages/${componentBasename}"));`
+            ),
+            ...[
+                ``,
+                ` export default function KcPage(props: { kcContext: KcContext; }) {`,
+                ``,
+                `     // ...`,
+                ``,
+                `     return (`,
+                `         <Suspense>`,
+                `             {(() => {`,
+                `                 switch (kcContext.pageId) {`,
+                `                     // ...`,
+                `+                    case "${pageIdOrComponent}": return (`,
+                `+                        <${componentBasename}`,
+                `+                            {...{ 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/initialize-email-theme.ts

@@ -1,62 +1,70 @@
-#!/usr/bin/env node
-
-import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
+import { downloadKeycloakDefaultTheme } from "./shared/downloadKeycloakDefaultTheme";
 import { join as pathJoin, relative as pathRelative } from "path";
 import { transformCodebase } from "./tools/transformCodebase";
-import { promptKeycloakVersion } from "./promptKeycloakVersion";
-import { readBuildOptions } from "./keycloakify/BuildOptions";
+import { promptKeycloakVersion } from "./shared/promptKeycloakVersion";
+import { getBuildContext } from "./shared/buildContext";
 import * as fs from "fs";
-import { getLogger } from "./tools/logger";
-import { getThemeSrcDirPath } from "./getSrcDirPath";
+import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
+import type { CliCommandOptions } from "./main";
 
-export async function main() {
-    const projectDirPath = process.cwd();
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
 
-    const { isSilent } = readBuildOptions({
-        projectDirPath,
-        "processArgv": process.argv.slice(2)
-    });
-
-    const logger = getLogger({ isSilent });
+    const buildContext = getBuildContext({ cliCommandOptions });
 
     const { themeSrcDirPath } = getThemeSrcDirPath({
-        projectDirPath
+        projectDirPath: buildContext.projectDirPath
     });
 
     const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
 
     if (fs.existsSync(emailThemeSrcDirPath)) {
-        logger.warn(`There is already a ${pathRelative(process.cwd(), emailThemeSrcDirPath)} directory in your project. Aborting.`);
+        console.warn(
+            `There is already a ${pathRelative(
+                process.cwd(),
+                emailThemeSrcDirPath
+            )} directory in your project. Aborting.`
+        );
 
         process.exit(-1);
     }
 
-    const { keycloakVersion } = await promptKeycloakVersion();
+    console.log("Initialize with the base email theme from which version of Keycloak?");
 
-    const builtinKeycloakThemeTmpDirPath = pathJoin(emailThemeSrcDirPath, "..", "tmp_xIdP3_builtin_keycloak_theme");
+    const { keycloakVersion } = await promptKeycloakVersion({
+        // NOTE: This is arbitrary
+        startingFromMajor: 17,
+        excludeMajorVersions: [],
+        cacheDirPath: buildContext.cacheDirPath
+    });
 
-    await downloadBuiltinKeycloakTheme({
-        projectDirPath,
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
         keycloakVersion,
-        "destDirPath": builtinKeycloakThemeTmpDirPath
+        buildContext
     });
 
     transformCodebase({
-        "srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "base", "email"),
-        "destDirPath": emailThemeSrcDirPath
+        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"));
+        fs.writeFileSync(
+            themePropertyFilePath,
+            Buffer.from(
+                `parent=base\n${fs.readFileSync(themePropertyFilePath).toString("utf8")}`,
+                "utf8"
+            )
+        );
     }
 
-    logger.log(`${pathRelative(process.cwd(), emailThemeSrcDirPath)} ready to be customized, feel free to remove every file you do not customize`);
-
-    fs.rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true, "force": true });
-}
-
-if (require.main === module) {
-    main();
+    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,138 +0,0 @@
-import { assert } from "tsafe/assert";
-import { id } from "tsafe/id";
-import { parse as urlParse } from "url";
-import { typeGuard } from "tsafe/typeGuard";
-import { symToStr } from "tsafe/symToStr";
-import { bundlers, getParsedPackageJson, type Bundler } from "./parsedPackageJson";
-import { join as pathJoin, sep as pathSep } from "path";
-import parseArgv from "minimist";
-
-/** Consolidated build option gathered form CLI arguments and config in package.json */
-export type BuildOptions = {
-    isSilent: boolean;
-    themeVersion: string;
-    themeName: string;
-    extraThemeNames: string[];
-    extraThemeProperties: string[] | undefined;
-    groupId: string;
-    artifactId: string;
-    bundler: Bundler;
-    keycloakVersionDefaultAssets: string;
-    /** Directory of your built react project. Defaults to {cwd}/build */
-    reactAppBuildDirPath: string;
-    /** Directory that keycloakify outputs to. Defaults to {cwd}/build_keycloak */
-    keycloakifyBuildDirPath: string;
-    /** If your app is hosted under a subpath, it's the case in CRA if you have "homepage": "https://example.com/my-app" in your package.json
-     * In this case the urlPathname will be "/my-app/" */
-    urlPathname: string | undefined;
-};
-
-export function readBuildOptions(params: { projectDirPath: string; processArgv: string[] }): BuildOptions {
-    const { projectDirPath, processArgv } = params;
-
-    const { isSilentCliParamProvided } = (() => {
-        const argv = parseArgv(processArgv);
-
-        return {
-            "isSilentCliParamProvided": typeof argv["silent"] === "boolean" ? argv["silent"] : false
-        };
-    })();
-
-    const parsedPackageJson = getParsedPackageJson({ projectDirPath });
-
-    const { name, keycloakify = {}, version, homepage } = parsedPackageJson;
-
-    const { extraThemeProperties, groupId, artifactId, bundler, keycloakVersionDefaultAssets, extraThemeNames = [] } = keycloakify ?? {};
-
-    const themeName =
-        keycloakify.themeName ??
-        name
-            .replace(/^@(.*)/, "$1")
-            .split("/")
-            .join("-");
-
-    return {
-        themeName,
-        extraThemeNames,
-        "bundler": (() => {
-            const { KEYCLOAKIFY_BUNDLER } = process.env;
-
-            assert(
-                typeGuard<Bundler | undefined>(KEYCLOAKIFY_BUNDLER, [undefined, ...id<readonly string[]>(bundlers)].includes(KEYCLOAKIFY_BUNDLER)),
-                `${symToStr({ KEYCLOAKIFY_BUNDLER })} should be one of ${bundlers.join(", ")}`
-            );
-
-            return KEYCLOAKIFY_BUNDLER ?? bundler ?? "keycloakify";
-        })(),
-        "artifactId": process.env.KEYCLOAKIFY_ARTIFACT_ID ?? artifactId ?? `${themeName}-keycloak-theme`,
-        "groupId": (() => {
-            const fallbackGroupId = `${themeName}.keycloak`;
-
-            return (
-                process.env.KEYCLOAKIFY_GROUP_ID ??
-                groupId ??
-                (!homepage
-                    ? fallbackGroupId
-                    : urlParse(homepage)
-                          .host?.replace(/:[0-9]+$/, "")
-                          ?.split(".")
-                          .reverse()
-                          .join(".") ?? fallbackGroupId) + ".keycloak"
-            );
-        })(),
-        "themeVersion": process.env.KEYCLOAKIFY_THEME_VERSION ?? process.env.KEYCLOAKIFY_VERSION ?? version ?? "0.0.0",
-        extraThemeProperties,
-        "isSilent": isSilentCliParamProvided,
-        "keycloakVersionDefaultAssets": keycloakVersionDefaultAssets ?? "11.0.3",
-        "reactAppBuildDirPath": (() => {
-            let { reactAppBuildDirPath = undefined } = parsedPackageJson.keycloakify ?? {};
-
-            if (reactAppBuildDirPath === undefined) {
-                return pathJoin(projectDirPath, "build");
-            }
-
-            if (pathSep === "\\") {
-                reactAppBuildDirPath = reactAppBuildDirPath.replace(/\//g, pathSep);
-            }
-
-            if (reactAppBuildDirPath.startsWith(`.${pathSep}`)) {
-                return pathJoin(projectDirPath, reactAppBuildDirPath);
-            }
-
-            return reactAppBuildDirPath;
-        })(),
-        "keycloakifyBuildDirPath": (() => {
-            let { keycloakifyBuildDirPath = undefined } = parsedPackageJson.keycloakify ?? {};
-
-            if (keycloakifyBuildDirPath === undefined) {
-                return pathJoin(projectDirPath, "build_keycloak");
-            }
-
-            if (pathSep === "\\") {
-                keycloakifyBuildDirPath = keycloakifyBuildDirPath.replace(/\//g, pathSep);
-            }
-
-            if (keycloakifyBuildDirPath.startsWith(`.${pathSep}`)) {
-                return pathJoin(projectDirPath, keycloakifyBuildDirPath);
-            }
-
-            return keycloakifyBuildDirPath;
-        })(),
-        "urlPathname": (() => {
-            const { homepage } = parsedPackageJson;
-
-            let url: URL | undefined = undefined;
-
-            if (homepage !== undefined) {
-                url = new URL(homepage);
-            }
-
-            if (url === undefined) {
-                return undefined;
-            }
-
-            const out = url.pathname.replace(/([^/])$/, "$1/");
-            return out === "/" ? undefined : out;
-        })()
-    };
-}

src/bin/keycloakify/buildJars/buildJar.ts

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

src/bin/keycloakify/buildJars/buildJars.ts

@@ -0,0 +1,91 @@
+import { assert } from "tsafe/assert";
+import { exclude } from "tsafe/exclude";
+import {
+    keycloakAccountV1Versions,
+    keycloakThemeAdditionalInfoExtensionVersions
+} from "./extensionVersions";
+import { getKeycloakVersionRangeForJar } from "./getKeycloakVersionRangeForJar";
+import { buildJar, BuildContextLike as BuildContextLike_buildJar } from "./buildJar";
+import type { BuildContext } from "../../shared/buildContext";
+import { getJarFileBasename } from "../../shared/getJarFileBasename";
+import { readMetaInfKeycloakThemes_fromResourcesDirPath } from "../../shared/metaInfKeycloakThemes";
+import { accountV1ThemeName } from "../../shared/constants";
+
+export type BuildContextLike = BuildContextLike_buildJar & {
+    keycloakifyBuildDirPath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export async function buildJars(params: {
+    resourcesDirPath: string;
+    onlyBuildJarFileBasename: string | undefined;
+    buildContext: BuildContextLike;
+}): Promise<void> {
+    const { onlyBuildJarFileBasename, resourcesDirPath, buildContext } = params;
+
+    const doesImplementAccountTheme = readMetaInfKeycloakThemes_fromResourcesDirPath({
+        resourcesDirPath
+    }).themes.some(({ name }) => name === accountV1ThemeName);
+
+    await Promise.all(
+        keycloakAccountV1Versions
+            .map(keycloakAccountV1Version =>
+                keycloakThemeAdditionalInfoExtensionVersions
+                    .map(keycloakThemeAdditionalInfoExtensionVersion => {
+                        const keycloakVersionRange = getKeycloakVersionRangeForJar({
+                            doesImplementAccountTheme,
+                            keycloakAccountV1Version,
+                            keycloakThemeAdditionalInfoExtensionVersion
+                        });
+
+                        if (keycloakVersionRange === undefined) {
+                            return undefined;
+                        }
+
+                        return {
+                            keycloakThemeAdditionalInfoExtensionVersion,
+                            keycloakVersionRange
+                        };
+                    })
+                    .filter(exclude(undefined))
+                    .map(
+                        ({
+                            keycloakThemeAdditionalInfoExtensionVersion,
+                            keycloakVersionRange
+                        }) => {
+                            const { jarFileBasename } = getJarFileBasename({
+                                keycloakVersionRange
+                            });
+
+                            if (
+                                onlyBuildJarFileBasename !== undefined &&
+                                onlyBuildJarFileBasename !== jarFileBasename
+                            ) {
+                                return undefined;
+                            }
+
+                            return {
+                                keycloakThemeAdditionalInfoExtensionVersion,
+                                jarFileBasename
+                            };
+                        }
+                    )
+                    .filter(exclude(undefined))
+                    .map(
+                        ({
+                            keycloakThemeAdditionalInfoExtensionVersion,
+                            jarFileBasename
+                        }) =>
+                            buildJar({
+                                jarFileBasename,
+                                keycloakAccountV1Version,
+                                keycloakThemeAdditionalInfoExtensionVersion,
+                                resourcesDirPath,
+                                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: {
+    doesImplementAccountTheme: boolean;
+    keycloakAccountV1Version: KeycloakAccountV1Version;
+    keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
+}): KeycloakVersionRange | undefined {
+    const {
+        keycloakAccountV1Version,
+        keycloakThemeAdditionalInfoExtensionVersion,
+        doesImplementAccountTheme
+    } = params;
+
+    if (doesImplementAccountTheme) {
+        const keycloakVersionRange = (() => {
+            switch (keycloakAccountV1Version) {
+                case null:
+                    switch (keycloakThemeAdditionalInfoExtensionVersion) {
+                        case null:
+                            return "21-and-below" as const;
+                        case "1.1.5":
+                            return undefined;
+                    }
+                    assert<
+                        Equals<typeof keycloakThemeAdditionalInfoExtensionVersion, never>
+                    >(false);
+                case "0.3":
+                    switch (keycloakThemeAdditionalInfoExtensionVersion) {
+                        case null:
+                            return undefined;
+                        case "1.1.5":
+                            return "23" as const;
+                    }
+                    assert<
+                        Equals<typeof keycloakThemeAdditionalInfoExtensionVersion, never>
+                    >(false);
+                case "0.4":
+                    switch (keycloakThemeAdditionalInfoExtensionVersion) {
+                        case null:
+                            return undefined;
+                        case "1.1.5":
+                            return "24" 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.WithAccountTheme | undefined
+            >
+        >();
+
+        return keycloakVersionRange;
+    } else {
+        const keycloakVersionRange = (() => {
+            if (keycloakAccountV1Version !== null) {
+                return undefined;
+            }
+            switch (keycloakThemeAdditionalInfoExtensionVersion) {
+                case null:
+                    return "21-and-below";
+                case "1.1.5":
+                    return "22-and-above";
+            }
+            assert<Equals<typeof keycloakThemeAdditionalInfoExtensionVersion, never>>(
+                false
+            );
+        })();
+
+        assert<
+            Equals<
+                typeof keycloakVersionRange,
+                KeycloakVersionRange.WithoutAccountTheme | undefined
+            >
+        >();
+
+        return keycloakVersionRange;
+    }
+}

src/bin/keycloakify/buildJars/index.ts

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

src/bin/keycloakify/ftlValuesGlobalName.ts

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

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -1,416 +1,234 @@
 <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 = [ FIELD_NAMES_eKsIY4ZsZ4xeM ]>
-    
-        <#attempt>
-            <#if profile?? && profile.attributes?? && profile.attributes?is_enumerable>
-                <#list profile.attributes as attribute>
-                    <#if fieldNames?seq_contains(attribute.name)>
-                        <#continue>
+<#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
+const out = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
+out["messagesPerField"]= {
+    <#assign fieldNames = [ FIELD_NAMES_eKsIY4ZsZ4xeM ]>
+    <#attempt>
+        <#if profile?? && profile.attributes?? && profile.attributes?is_enumerable>
+            <#list profile.attributes as attribute>
+                <#if fieldNames?seq_contains(attribute.name)>
+                    <#continue>
+                </#if>
+                <#assign fieldNames += [attribute.name]>
+            </#list>
+        </#if>
+    <#recover>
+    </#attempt>
+    "printIfExists": function (fieldName, text) {
+        <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+            throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
+        <#else>
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+                    <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                    <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                        <#assign doExistErrorOnUsernameOrPassword = "">
+                        <#attempt>
+                            <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                        <#recover>
+                            <#assign doExistErrorOnUsernameOrPassword = true>
+                        </#attempt>
+                        return <#if doExistErrorOnUsernameOrPassword>text<#else>undefined</#if>
+                    <#else>
+                        <#assign doExistMessageForField = "">
+                        <#attempt>
+                            <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
+                        <#recover>
+                            <#assign doExistMessageForField = true>
+                        </#attempt>
+                        return <#if doExistMessageForField>text<#else>undefined</#if>;
                     </#if>
-                    <#assign fieldNames += [attribute.name]>
-                </#list>
-            </#if>
-        <#recover>
-        </#attempt>
-    
-        "printIfExists": function (fieldName, text) {
-
+                }
+            </#list>
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+        </#if>
+    },
+    "existsError": function (){
+        function existsError_singleFieldName(fieldName) {
             <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
                 throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
             <#else>
                 <#list fieldNames as fieldName>
                     if(fieldName === "${fieldName}" ){
-
-                        <#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
-                        <#if !messagesPerField.existsError??>
-
-                            <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                            <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                                <#assign doExistMessageForUsernameOrPassword = "">
-
-                                <#attempt>
-                                    <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
-                                <#recover>
-                                    <#assign doExistMessageForUsernameOrPassword = true>
-                                </#attempt>
-
-                                <#if !doExistMessageForUsernameOrPassword>
-                                    <#attempt>
-                                        <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
-                                    <#recover>
-                                        <#assign doExistMessageForUsernameOrPassword = true>
-                                    </#attempt>
-                                </#if>
-
-                                return <#if doExistMessageForUsernameOrPassword>text<#else>undefined</#if>;
-
-                            <#else>
-
-                                <#assign doExistMessageForField = "">
-
-                                <#attempt>
-                                    <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
-                                <#recover>
-                                    <#assign doExistMessageForField = true>
-                                </#attempt>
-
-                                return <#if doExistMessageForField>text<#else>undefined</#if>;
-
-                            </#if>
-
+                        <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                        <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                            <#assign doExistErrorOnUsernameOrPassword = "">
+                            <#attempt>
+                                <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                            <#recover>
+                                <#assign doExistErrorOnUsernameOrPassword = true>
+                            </#attempt>
+                            return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
                         <#else>
-
-                            <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                            <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                                <#assign doExistErrorOnUsernameOrPassword = "">
-
-                                <#attempt>
-                                    <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
-                                <#recover>
-                                    <#assign doExistErrorOnUsernameOrPassword = true>
-                                </#attempt>
-
-                                <#if doExistErrorOnUsernameOrPassword>
-                                    return text;
-                                <#else>
-
-                                    <#assign doExistMessageForField = "">
-
-                                    <#attempt>
-                                        <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
-                                    <#recover>
-                                        <#assign doExistMessageForField = true>
-                                    </#attempt>
-
-                                    return <#if doExistMessageForField>text<#else>undefined</#if>;
-
-                                </#if>
-
-                            <#else>
-
-                                <#assign doExistMessageForField = "">
-
-                                <#attempt>
-                                    <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
-                                <#recover>
-                                    <#assign doExistMessageForField = true>
-                                </#attempt>
-
-                                return <#if doExistMessageForField>text<#else>undefined</#if>;
-
-                            </#if>
-
+                            <#assign doExistErrorMessageForField = "">
+                            <#attempt>
+                                <#assign doExistErrorMessageForField = messagesPerField.existsError('${fieldName}')>
+                            <#recover>
+                                <#assign doExistErrorMessageForField = true>
+                            </#attempt>
+                            return <#if doExistErrorMessageForField>true<#else>false</#if>;
                         </#if>
-
                     }
                 </#list>
-
                 throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
             </#if>
-
-        },
-        "existsError": function (fieldName) {
-
-            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
-                throw new Error("You're not supposed to use messagesPerField.printIfExists in this page");
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-
-                        <#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
-                        <#if !messagesPerField.existsError??>
-
-                            <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                            <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                                <#assign doExistMessageForUsernameOrPassword = "">
-
-                                <#attempt>
-                                    <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
-                                <#recover>
-                                    <#assign doExistMessageForUsernameOrPassword = true>
-                                </#attempt>
-
-                                <#if !doExistMessageForUsernameOrPassword>
-                                    <#attempt>
-                                        <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
-                                    <#recover>
-                                        <#assign doExistMessageForUsernameOrPassword = true>
-                                    </#attempt>
-                                </#if>
-
-                                return <#if doExistMessageForUsernameOrPassword>true<#else>false</#if>;
-
-                            <#else>
-
-                                <#assign doExistMessageForField = "">
-
-                                <#attempt>
-                                    <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
-                                <#recover>
-                                    <#assign doExistMessageForField = true>
-                                </#attempt>
-
-                                return <#if doExistMessageForField>true<#else>false</#if>;
-
-                            </#if>
-
-                        <#else>
-
-                            <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                            <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                                <#assign doExistErrorOnUsernameOrPassword = "">
-
-                                <#attempt>
-                                    <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
-                                <#recover>
-                                    <#assign doExistErrorOnUsernameOrPassword = true>
-                                </#attempt>
-
-                                return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
-
-                            <#else>
-
-                                <#assign doExistErrorMessageForField = "">
-
-                                <#attempt>
-                                    <#assign doExistErrorMessageForField = messagesPerField.existsError('${fieldName}')>
-                                <#recover>
-                                    <#assign doExistErrorMessageForField = true>
-                                </#attempt>
-
-                                return <#if doExistErrorMessageForField>true<#else>false</#if>;
-
-                            </#if>
-
-                        </#if>
-
-                    }
-                </#list>
-
-                throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
-
-            </#if>
-
-        },
-        "get": function (fieldName) {
-
-
-            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
-                throw new Error("You're not supposed to use messagesPerField.get in this page");
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-
-                        <#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
-                        <#if !messagesPerField.existsError??>
-
-                            <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                            <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                                <#assign doExistMessageForUsernameOrPassword = "">
-
-                                <#attempt>
-                                    <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
-                                <#recover>
-                                    <#assign doExistMessageForUsernameOrPassword = true>
-                                </#attempt>
-
-                                <#if !doExistMessageForUsernameOrPassword>
-                                    <#attempt>
-                                        <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
-                                    <#recover>
-                                        <#assign doExistMessageForUsernameOrPassword = true>
-                                    </#attempt>
-                                </#if>
-
-                                <#if !doExistMessageForUsernameOrPassword>
-                                    return "";
-                                <#else>
-                                    <#attempt>
-                                        return "${kcSanitize(msg('invalidUserMessage'))?no_esc}";
-                                    <#recover>
-                                        return "Invalid username or password.";
-                                    </#attempt>
-                                </#if>
-
-                            <#else>
-
-                                <#attempt>
-                                    return "${messagesPerField.get('${fieldName}')?no_esc}";
-                                <#recover>
-                                    return "invalid field";
-                                </#attempt>
-
-                            </#if>
-
-                        <#else>
-
-                            <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                            <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                                <#assign doExistErrorOnUsernameOrPassword = "">
-
-                                <#attempt>
-                                    <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
-                                <#recover>
-                                    <#assign doExistErrorOnUsernameOrPassword = true>
-                                </#attempt>
-
-                                <#if doExistErrorOnUsernameOrPassword>
-
-                                    <#attempt>
-                                        return "${kcSanitize(msg('invalidUserMessage'))?no_esc}";
-                                    <#recover>
-                                        return "Invalid username or password.";
-                                    </#attempt>
-
-                                <#else>
-
-                                    <#attempt>
-                                        return "${messagesPerField.get('${fieldName}')?no_esc}";
-                                    <#recover>
-                                        return "";
-                                    </#attempt>
-
-                                </#if>
-
-                            <#else>
-
-                                <#attempt>
-                                    return "${messagesPerField.get('${fieldName}')?no_esc}";
-                                <#recover>
-                                    return "invalid field";
-                                </#attempt>
-
-                            </#if>
-
-                        </#if>
-
-                    }
-                </#list>
-
-                throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
-
-            </#if>
-
-        },
-        "exists": function (fieldName) {
-
-            <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
-                throw new Error("You're not supposed to use messagesPerField.exists in this page");
-            <#else>
-                <#list fieldNames as fieldName>
-                    if(fieldName === "${fieldName}" ){
-
-                        <#-- https://github.com/keycloakify/keycloakify/pull/359 Compat with Keycloak prior v12 -->
-                        <#if !messagesPerField.existsError??>
-
-                            <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                            <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                                <#assign doExistMessageForUsernameOrPassword = "">
-
-                                <#attempt>
-                                    <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('username')>
-                                <#recover>
-                                    <#assign doExistMessageForUsernameOrPassword = true>
-                                </#attempt>
-
-                                <#if !doExistMessageForUsernameOrPassword>
-                                    <#attempt>
-                                        <#assign doExistMessageForUsernameOrPassword = messagesPerField.exists('password')>
-                                    <#recover>
-                                        <#assign doExistMessageForUsernameOrPassword = true>
-                                    </#attempt>
-                                </#if>
-
-                                return <#if doExistMessageForUsernameOrPassword>true<#else>false</#if>;
-
-                            <#else>
-
-                                <#assign doExistMessageForField = "">
-
-                                <#attempt>
-                                    <#assign doExistMessageForField = messagesPerField.exists('${fieldName}')>
-                                <#recover>
-                                    <#assign doExistMessageForField = true>
-                                </#attempt>
-
-                                return <#if doExistMessageForField>true<#else>false</#if>;
-
-                            </#if>
-
-                        <#else>
-
-                            <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
-                            <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
-
-                                <#assign doExistErrorOnUsernameOrPassword = "">
-
-                                <#attempt>
-                                    <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
-                                <#recover>
-                                    <#assign doExistErrorOnUsernameOrPassword = true>
-                                </#attempt>
-
-                                return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
-
-                            <#else>
-
-                                <#assign doExistErrorMessageForField = "">
-
-                                <#attempt>
-                                    <#assign doExistErrorMessageForField = messagesPerField.exists('${fieldName}')>
-                                <#recover>
-                                    <#assign doExistErrorMessageForField = true>
-                                </#attempt>
-
-                                return <#if doExistErrorMessageForField>true<#else>false</#if>;
-
-                            </#if>
-
-                        </#if>
-
-                    }
-                </#list>
-
-                throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
-            </#if>
-
         }
+        for( let i = 0; i < arguments.length; i++ ){
+            if( existsError_singleFieldName(arguments[i]) ){
+                return true;
+            }
+        }
+        return false;
+    },
+    "get": function (fieldName) {
+        <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+            throw new Error("You're not supposed to use messagesPerField.get in this page");
+        <#else>
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+                    <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                    <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                        <#assign doExistErrorOnUsernameOrPassword = "">
+                        <#attempt>
+                            <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                        <#recover>
+                            <#assign doExistErrorOnUsernameOrPassword = true>
+                        </#attempt>
+                        <#if doExistErrorOnUsernameOrPassword>
+                            <#attempt>
+                                return decodeHtmlEntities("${msg('invalidUserMessage')?js_string}");
+                            <#recover>
+                                return "Invalid username or password.";
+                            </#attempt>
+                        <#else>
+                            return "";
+                        </#if>
+                    <#else>
+                        <#attempt>
+                            return decodeHtmlEntities("${messagesPerField.get('${fieldName}')?js_string}");
+                        <#recover>
+                            return "Invalid field";
+                        </#attempt>
+                    </#if>
+                }
+            </#list>
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+        </#if>
+    },
+    "exists": function (fieldName) {
+        <#if !messagesPerField?? || !(messagesPerField?is_hash)>   
+            throw new Error("You're not supposed to use messagesPerField.exists in this page");
+        <#else>
+            <#list fieldNames as fieldName>
+                if(fieldName === "${fieldName}" ){
+                    <#-- https://github.com/keycloakify/keycloakify/pull/218 -->
+                    <#if ('${fieldName}' == 'username' || '${fieldName}' == 'password') && pageId != 'register.ftl' && pageId != 'register-user-profile.ftl'>
+                        <#assign doExistErrorOnUsernameOrPassword = "">
+                        <#attempt>
+                            <#assign doExistErrorOnUsernameOrPassword = messagesPerField.existsError('username', 'password')>
+                        <#recover>
+                            <#assign doExistErrorOnUsernameOrPassword = true>
+                        </#attempt>
+                        return <#if doExistErrorOnUsernameOrPassword>true<#else>false</#if>;
+                    <#else>
+                        <#assign doExistErrorMessageForField = "">
+                        <#attempt>
+                            <#assign doExistErrorMessageForField = messagesPerField.exists('${fieldName}')>
+                        <#recover>
+                            <#assign doExistErrorMessageForField = true>
+                        </#attempt>
+                        return <#if doExistErrorMessageForField>true<#else>false</#if>;
+                    </#if>
+                }
+            </#list>
+            throw new Error(fieldName + "is probably runtime generated, see: https://docs.keycloakify.dev/limitations#field-names-cant-be-runtime-generated");
+        </#if>
+    },
+    "getFirstError": function () {
+        for( let i = 0; i < arguments.length; i++ ){
+            const fieldName = arguments[i];
+            if( out.messagesPerField.existsError(fieldName) ){
+                return out.messagesPerField.get(fieldName);
+            }
+        }
+    }
+};
+
+out["keycloakifyVersion"] = "KEYCLOAKIFY_VERSION_xEdKd3xEdr";
+out["themeVersion"] = "KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx";
+out["themeType"] = "KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr";
+out["themeName"] = "KEYCLOAKIFY_THEME_NAME_cXxKd3xEer";
+out["pageId"] = "${pageId}";
+
+try {
+    out["url"]["resourcesCommonPath"] = out["url"]["resourcesPath"] + "/" + "RESOURCES_COMMON_cLsLsMrtDkpVv";
+} catch(error) { }
+
+<#if profile?? && profile.attributes??>
+    out["lOCALIZATION_REALM_OVERRIDES_USER_PROFILE_PROPERTY_KEY_aaGLsPgGIdeeX"] = {
+        <#list profile.attributes as attribute>
+            <#if attribute.annotations?? && attribute.displayName??>
+                "${attribute.displayName}": decodeHtmlEntities("${advancedMsg(attribute.displayName)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputHelperTextBefore??>
+                "${attribute.annotations.inputHelperTextBefore}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextBefore)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputHelperTextAfter??>
+                "${attribute.annotations.inputHelperTextAfter}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextAfter)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputTypePlaceholder??>
+                "${attribute.annotations.inputTypePlaceholder}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputTypePlaceholder)?js_string}"),
+            </#if>
+            <!-- Loop through the options that are in attribute.validators.options.options -->
+            <#if (
+                attribute.annotations.inputOptionLabelsI18nPrefix?? &&
+                attribute.validators?? &&
+                attribute.validators.options??
+            )>
+                <#list attribute.validators.options.options as option>
+                    "${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}": decodeHtmlEntities("${msg(attribute.annotations.inputOptionLabelsI18nPrefix + "." + option)?js_string}"),
+                </#list>
+            </#if>
+        </#list>
     };
+</#if>
 
-    <#if account??>
-        out["url"]["getLogoutUrl"] = function () {
-            <#attempt>
-                return "${url.getLogoutUrl()}";
-            <#recover>
-            </#attempt>
-        };
-    </#if>
+attributes_to_attributesByName: {
 
-    out["keycloakifyVersion"] = "KEYCLOAKIFY_VERSION_xEdKd3xEdr";
-    out["themeVersion"] = "KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx";
-    out["themeType"] = "KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr";
-    out["themeName"] = "KEYCLOAKIFY_THEME_NAME_cXxKd3xEer";
-    out["pageId"] = "${pageId}";
+    if( !out["profile"] ){
+        break attributes_to_attributesByName;
+    }
 
-    return out;
+    if( !out["profile"]["attributes"] ){
+        break attributes_to_attributesByName;
+    }
 
-})()
+    var attributes =  out["profile"]["attributes"];
+
+    delete out["profile"]["attributes"];
+
+    out["profile"]["attributesByName"] = {};
+
+    attributes.forEach(function(attribute){
+        out["profile"]["attributesByName"][attribute.name] = attribute;
+    });
+
+}
+
+return out;
+
+function decodeHtmlEntities(htmlStr){
+    var element = decodeHtmlEntities.element;
+    if (!element) {
+        element = document.createElement("textarea");
+        decodeHtmlEntities.element = element;
+    }
+    element.innerHTML = htmlStr;
+    return element.value;
+}
+
+})();
 <#function ftl_object_to_js_code_declaring_an_object object path>
 
         <#local isHash = "">
@@ -423,7 +241,7 @@
         <#if isHash>
 
             <#if path?size gt 10>
-                <#return "ABORT: Too many recursive calls">
+                <#return "ABORT: Too many recursive calls, path: " + path?join(".")>
             </#if>
 
             <#local keys = "">
@@ -434,7 +252,6 @@
                 <#return "ABORT: We can't list keys on this object">
             </#attempt>
 
-
             <#local out_seq = []>
 
             <#list keys as key>
@@ -455,9 +272,10 @@
                         <#-- https://github.com/keycloakify/keycloakify/issues/91#issue-1212319466 (reports with error.ftl and Kc18) -->
                         <#-- https://github.com/keycloakify/keycloakify/issues/109#issuecomment-1134610163 -->
                         <#-- https://github.com/keycloakify/keycloakify/issues/357 -->
+                        <#-- https://github.com/keycloakify/keycloakify/discussions/406#discussioncomment-7514787 -->
                         key == "loginAction" && 
                         are_same_path(path, ["url"]) && 
-                        ["saml-post-form.ftl", "error.ftl", "info.ftl", "login-oauth-grant.ftl", "logout-confirm.ftl"]?seq_contains(pageId) &&
+                        ["saml-post-form.ftl", "error.ftl", "info.ftl", "login-oauth-grant.ftl", "logout-confirm.ftl", "login-oauth2-device-verify-user-code.ftl"]?seq_contains(pageId) &&
                         !(auth?has_content && auth.showTryAnotherWayLink())
                     ) || (
                         <#-- https://github.com/keycloakify/keycloakify/issues/362 -->
@@ -478,20 +296,57 @@
                         "error.ftl" == pageId &&
                         are_same_path(path, ["realm"]) &&
                         !["name", "displayName", "displayNameHtml", "internationalizationEnabled", "registrationEmailAsUsername" ]?seq_contains(key)
+                    ) || (
+                        "applications.ftl" == pageId &&
+                        ( 
+                            key == "realm" || 
+                            key == "container" 
+                        ) &&
+                        is_subpath(path, ["applications", "applications"])
+                    ) || (
+                        key == "delegateForUpdate" &&
+                        are_same_path(path, ["user"])
+                    ) || (
+                        <#-- Security audit forwarded by Garth (Gmail) -->
+                        key == "saml.signing.private.key" &&
+                        are_same_path(path, ["client", "attributes"])
+                    ) || (
+                        <#-- See: https://github.com/keycloakify/keycloakify/issues/534 -->
+                        key == "password" &&
+                        are_same_path(path, ["login"])
+                    ) || (
+                        <#-- Remove realmAttributes added by https://github.com/jcputney/keycloak-theme-additional-info-extension for peace of mind. -->
+                        key == "realmAttributes" &&
+                        are_same_path(path, [])
+                    ) || (
+                        <#-- attributesByName adds a lot of noise to the output and is not needed, we already have profile.attributes -->
+                        key == "attributesByName" &&
+                        are_same_path(path, ["profile"]) 
+                    ) || (
+                        <#-- We already have the attributes in profile speedup the rendering by filtering it out from the register object -->
+                        (key == "attributes" || key == "attributesByName") &&
+                        are_same_path(path, ["register"])
                     )
                 >
-                    <#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
+                    <#local out_seq += ["/*" + path?join(".") + "." + key + " excluded*/"]>
                     <#continue>
                 </#if>
+                
+                USER_DEFINED_EXCLUSIONS_eKsaY4ZsZ4eMr2
 
-                <#if pageId == "register.ftl" && key == "attemptedUsername" && are_same_path(path, ["auth"])>
+                <#-- https://github.com/keycloakify/keycloakify/discussions/406 -->
+                <#if (
+                    ["register.ftl", "register-user-profile.ftl", "terms.ftl", "info.ftl", "login.ftl", "login-update-password.ftl", "login-oauth2-device-verify-user-code.ftl"]?seq_contains(pageId) && 
+                    key == "attemptedUsername" && are_same_path(path, ["auth"])
+                )>
                     <#attempt>
                         <#-- https://github.com/keycloak/keycloak/blob/3a2bf0c04bcde185e497aaa32d0bb7ab7520cf4a/themes/src/main/resources/theme/base/login/template.ftl#L63 -->
-                        <#-- https://github.com/keycloakify/keycloakify/discussions/406 -->
                         <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
+                            <#local out_seq += ["/*" + path?join(".") + "." + key + " excluded*/"]>
                             <#continue>
                         </#if>
                     <#recover>
+                        <#local out_seq += ["/*Accessing attemptedUsername throwed an exception */"]>
                     </#attempt>
                 </#if>
                 
@@ -567,6 +422,26 @@
                 </#attempt>
             </#if>
 
+            <#if are_same_path(path, ["url", "getLogoutUrl"])>
+                <#local returnValue = "">
+                <#attempt>
+                    <#local returnValue = url.getLogoutUrl()>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate url.getLogoutUrl()">
+                </#attempt>
+                <#return 'function(){ return "' + returnValue + '"; }'>
+            </#if>
+
+            <#if are_same_path(path, ["totp", "policy", "getAlgorithmKey"])>
+                <#local returnValue = "">
+                <#attempt>
+                    <#local returnValue = totp.policy.getAlgorithmKey()>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate totp.policy.getAlgorithmKey()">
+                </#attempt>
+                <#return 'function(){ return "' + returnValue + '"; }'>
+            </#if>
+
             <#return "ABORT: It's a method">
         </#if>
 
@@ -636,17 +511,28 @@
             <#return '"' + object?datetime?iso_utc + '"'>
         </#if>
 
+        <#local isNumber = "">
+        <#attempt>
+            <#local isNumber = object?is_number>
+        <#recover>
+            <#return "ABORT: Can't test if it's a number">
+        </#attempt>
+
+        <#if isNumber>
+            <#return object?c>
+        </#if>
+
         <#attempt>
             <#return '"' + object?js_string + '"'>;
         <#recover>
         </#attempt>
 
-        <#return "ABORT: Couldn't convert into string non hash, non method, non boolean, non enumerable object">
+        <#return "ABORT: Couldn't convert into string non hash, non method, non boolean, non number, non enumerable object">
 
 </#function>
-<#function are_same_path path searchedPath>
+<#function is_subpath path searchedPath>
 
-    <#if path?size != searchedPath?size>
+    <#if path?size < searchedPath?size>
         <#return false>
     </#if>
 
@@ -654,8 +540,14 @@
 
     <#list path as property>
 
+        <#if i == searchedPath?size >
+            <#continue>
+        </#if>
+
         <#local searchedProperty=searchedPath[i]>
 
+        <#local i+= 1>
+
         <#if searchedProperty?is_string && searchedProperty == "*">
             <#continue>
         </#if>
@@ -672,11 +564,13 @@
             <#return false>
         </#if>
 
-        <#local i+= 1>
-
     </#list>
 
     <#return true>
 
 </#function>
+
+<#function are_same_path path searchedPath>
+    <#return path?size == searchedPath?size && is_subpath(path, searchedPath)>
+</#function>
 </script>

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -1,36 +1,49 @@
 import cheerio from "cheerio";
-import { replaceImportsFromStaticInJsCode } from "../replacers/replaceImportsFromStaticInJsCode";
+import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
 import { generateCssCodeToDefineGlobals } from "../replacers/replaceImportsInCssCode";
 import { replaceImportsInInlineCssCode } from "../replacers/replaceImportsInInlineCssCode";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
-import { 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 {
+    type ThemeType,
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir,
+    resources_common,
+    nameOfTheLocalizationRealmOverridesUserProfileProperty
+} from "../../shared/constants";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
 
-export const themeTypes = ["login", "account"] as const;
-
-export type ThemeType = (typeof themeTypes)[number];
-
-export type BuildOptionsLike = {
-    themeName: string;
+export type BuildContextLike = {
+    bundler: "vite" | "webpack";
     themeVersion: string;
     urlPathname: string | undefined;
+    projectBuildDirPath: string;
+    assetsDirPath: string;
+    kcContextExclusionsFtlCode: string | undefined;
 };
 
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
+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, keycloakifyVersion, themeType, fieldNames } = params;
+    const {
+        themeName,
+        cssGlobalsToDefine,
+        indexHtmlCode,
+        buildContext,
+        keycloakifyVersion,
+        themeType,
+        fieldNames
+    } = params;
 
     const $ = cheerio.load(indexHtmlCode);
 
@@ -40,7 +53,10 @@ export function generateFtlFilesCodeFactory(params: {
 
             assert(jsCode !== null);
 
-            const { fixedJsCode } = replaceImportsFromStaticInJsCode({ jsCode });
+            const { fixedJsCode } = replaceImportsInJsCode({
+                jsCode,
+                buildContext
+            });
 
             $(element).text(fixedJsCode);
         });
@@ -52,7 +68,7 @@ export function generateFtlFilesCodeFactory(params: {
 
             const { fixedCssCode } = replaceImportsInInlineCssCode({
                 cssCode,
-                buildOptions
+                buildContext
             });
 
             $(element).text(fixedCssCode);
@@ -73,7 +89,12 @@ export function generateFtlFilesCodeFactory(params: {
 
                 $(element).attr(
                     attrName,
-                    href.replace(new RegExp(`^${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`), "${url.resourcesPath}/build/")
+                    href.replace(
+                        new RegExp(
+                            `^${(buildContext.urlPathname ?? "/").replace(/\//g, "\\/")}`
+                        ),
+                        `\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/`
+                    )
                 );
             })
         );
@@ -85,7 +106,7 @@ export function generateFtlFilesCodeFactory(params: {
                     "<style>",
                     generateCssCodeToDefineGlobals({
                         cssGlobalsToDefine,
-                        buildOptions
+                        buildContext
                     }).cssCodeToPrependInHead,
                     "</style>",
                     ""
@@ -95,35 +116,66 @@ export function generateFtlFilesCodeFactory(params: {
     }
 
     //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]
-            .replace("FIELD_NAMES_eKsIY4ZsZ4xeM", fieldNames.map(name => `"${name}"`).join(", "))
-            .replace("KEYCLOAKIFY_VERSION_xEdKd3xEdr", keycloakifyVersion)
-            .replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildOptions.themeVersion)
-            .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
-            .replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", buildOptions.themeName),
-        "<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->": [
-            "<#if scripts??>",
-            "    <#list scripts as script>",
-            '        <script src="${script}" type="text/javascript"></script>',
-            "    </#list>",
-            "</#if>"
-        ].join("\n")
-    };
+    const ftlObjectToJsCodeDeclaringAnObject = fs
+        .readFileSync(
+            pathJoin(
+                getThisCodebaseRootDirPath(),
+                "src",
+                "bin",
+                "keycloakify",
+                "generateFtl",
+                "ftl_object_to_js_code_declaring_an_object.ftl"
+            )
+        )
+        .toString("utf8")
+        .match(/^<script>const _=((?:.|\n)+)<\/script>[\n]?$/)![1]
+        .replace(
+            "FIELD_NAMES_eKsIY4ZsZ4xeM",
+            fieldNames.map(name => `"${name}"`).join(", ")
+        )
+        .replace("KEYCLOAKIFY_VERSION_xEdKd3xEdr", keycloakifyVersion)
+        .replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildContext.themeVersion)
+        .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
+        .replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", themeName)
+        .replace("RESOURCES_COMMON_cLsLsMrtDkpVv", resources_common)
+        .replace(
+            "lOCALIZATION_REALM_OVERRIDES_USER_PROFILE_PROPERTY_KEY_aaGLsPgGIdeeX",
+            nameOfTheLocalizationRealmOverridesUserProfileProperty
+        )
+        .replace(
+            "USER_DEFINED_EXCLUSIONS_eKsaY4ZsZ4eMr2",
+            buildContext.kcContextExclusionsFtlCode ?? ""
+        );
+    const ftlObjectToJsCodeDeclaringAnObjectPlaceholder =
+        '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }';
 
     $("head").prepend(
-        [
-            "<script>",
-            `    window.${ftlValuesGlobalName}= ${objectKeys(replaceValueBySearchValue)[0]};`,
-            "</script>",
-            "",
-            objectKeys(replaceValueBySearchValue)[1]
-        ].join("\n")
+        `<script>\nwindow.${nameOfTheGlobal}=${ftlObjectToJsCodeDeclaringAnObjectPlaceholder}</script>`
     );
 
+    // Remove part of the document marked as ignored.
+    {
+        const startTags = $('meta[name="keycloakify-ignore-start"]');
+
+        startTags.each((...[, startTag]) => {
+            const $startTag = $(startTag);
+            const $endTag = $startTag
+                .nextAll('meta[name="keycloakify-ignore-end"]')
+                .first();
+
+            if ($endTag.length) {
+                let currentNode = $startTag.next();
+                while (currentNode.length && !currentNode.is($endTag)) {
+                    currentNode.remove();
+                    currentNode = $startTag.next();
+                }
+
+                $startTag.remove();
+                $endTag.remove();
+            }
+        });
+    }
+
     const partiallyFixedIndexHtmlCode = $.html();
 
     function generateFtlFilesCode(params: { pageId: string }): {
@@ -136,9 +188,13 @@ export function generateFtlFilesCodeFactory(params: {
         let ftlCode = $.html();
 
         Object.entries({
-            ...replaceValueBySearchValue,
-            "PAGE_ID_xIgLsPgGId9D8e": pageId
-        }).map(([searchValue, replaceValue]) => (ftlCode = ftlCode.replace(searchValue, replaceValue)));
+            [ftlObjectToJsCodeDeclaringAnObjectPlaceholder]:
+                ftlObjectToJsCodeDeclaringAnObject,
+            PAGE_ID_xIgLsPgGId9D8e: pageId
+        }).map(
+            ([searchValue, replaceValue]) =>
+                (ftlCode = ftlCode.replace(searchValue, replaceValue))
+        );
 
         return { ftlCode };
     }

src/bin/keycloakify/generateFtl/index.ts

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

src/bin/keycloakify/generateFtl/pageId.ts

@@ -1,31 +0,0 @@
-export const loginThemePageIds = [
-    "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",
-    "update-email.ftl",
-    "select-authenticator.ftl",
-    "saml-post-form.ftl"
-] as const;
-
-export const accountThemePageIds = ["password.ftl", "account.ftl"] as const;
-
-export type LoginThemePageId = (typeof loginThemePageIds)[number];
-export type AccountThemePageId = (typeof accountThemePageIds)[number];

src/bin/keycloakify/generateJavaStackFiles.ts

@@ -1,84 +0,0 @@
-import * as fs from "fs";
-import { join as pathJoin, dirname as pathDirname } from "path";
-import { assert } from "tsafe/assert";
-import type { BuildOptions } from "./BuildOptions";
-import type { ThemeType } from "./generateFtl";
-
-export type BuildOptionsLike = {
-    themeName: string;
-    extraThemeNames: string[];
-    groupId: string;
-    artifactId: string;
-    themeVersion: string;
-};
-
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
-
-export function generateJavaStackFiles(params: {
-    keycloakThemeBuildingDirPath: string;
-    implementedThemeTypes: Record<ThemeType | "email", boolean>;
-    buildOptions: BuildOptionsLike;
-}): {
-    jarFilePath: string;
-} {
-    const {
-        buildOptions: { groupId, themeName, extraThemeNames, themeVersion, artifactId },
-        keycloakThemeBuildingDirPath,
-        implementedThemeTypes
-    } = 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>${groupId}</groupId>`,
-                `	<artifactId>${artifactId}</artifactId>`,
-                `	<version>${themeVersion}</version>`,
-                `	<name>${artifactId}</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": [themeName, ...extraThemeNames].map(themeName => ({
-                            "name": themeName,
-                            "types": Object.entries(implementedThemeTypes)
-                                .filter(([, isImplemented]) => isImplemented)
-                                .map(([themeType]) => themeType)
-                        }))
-                    },
-                    null,
-                    2
-                ),
-                "utf8"
-            )
-        );
-    }
-
-    return {
-        "jarFilePath": pathJoin(keycloakThemeBuildingDirPath, "target", `${artifactId}-${themeVersion}.jar`)
-    };
-}

src/bin/keycloakify/generateSrcMainResources/bringInAccountV1.ts

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

src/bin/keycloakify/generateSrcMainResources/generateMessageProperties.ts

@@ -1,4 +1,4 @@
-import type { ThemeType } from "../generateFtl";
+import type { ThemeType } from "../../shared/constants";
 import { crawl } from "../../tools/crawl";
 import { join as pathJoin } from "path";
 import { readFileSync } from "fs";
@@ -8,6 +8,7 @@ import * as recast from "recast";
 import * as babelParser from "@babel/parser";
 import babelGenerate from "@babel/generator";
 import * as babelTypes from "@babel/types";
+import { escapeStringForPropertiesFile } from "../../tools/escapeStringForPropertiesFile";
 
 export function generateMessageProperties(params: {
     themeSrcDirPath: string;
@@ -16,8 +17,8 @@ export function generateMessageProperties(params: {
     const { themeSrcDirPath, themeType } = params;
 
     let files = crawl({
-        "dirPath": pathJoin(themeSrcDirPath, themeType),
-        "returnedPathsType": "absolute"
+        dirPath: pathJoin(themeSrcDirPath, themeType),
+        returnedPathsType: "absolute"
     });
 
     files = files.filter(file => {
@@ -34,7 +35,9 @@ export function generateMessageProperties(params: {
 
     files = files.sort((a, b) => a.length - b.length);
 
-    files = files.filter(file => readFileSync(file).toString("utf8").includes("createUseI18n"));
+    files = files.filter(file =>
+        readFileSync(file).toString("utf8").includes("createUseI18n")
+    );
 
     if (files.length === 0) {
         return [];
@@ -43,18 +46,25 @@ export function generateMessageProperties(params: {
     const extraMessages = files
         .map(file => {
             const root = recast.parse(readFileSync(file).toString("utf8"), {
-                "parser": {
-                    "parse": (code: string) => babelParser.parse(code, { "sourceType": "module", "plugins": ["typescript"] }),
-                    "generator": babelGenerate,
-                    "types": babelTypes
+                parser: {
+                    parse: (code: string) =>
+                        babelParser.parse(code, {
+                            sourceType: "module",
+                            plugins: ["typescript"]
+                        }),
+                    generator: babelGenerate,
+                    types: babelTypes
                 }
             });
 
             const codes: string[] = [];
 
             recast.visit(root, {
-                "visitCallExpression": function (path) {
-                    if (path.node.callee.type === "Identifier" && path.node.callee.name === "createUseI18n") {
+                visitCallExpression: function (path) {
+                    if (
+                        path.node.callee.type === "Identifier" &&
+                        path.node.callee.name === "createUseI18n"
+                    ) {
                         codes.push(babelGenerate(path.node.arguments[0] as any).code);
                     }
                     this.traverse(path);
@@ -65,7 +75,9 @@ export function generateMessageProperties(params: {
         })
         .flat()
         .map(code => {
-            let extraMessages: { [languageTag: string]: Record<string, string> } = {};
+            let extraMessages: {
+                [languageTag: string]: Record<string, string>;
+            } = {};
 
             try {
                 eval(`${symToStr({ extraMessages })} = ${code}`);
@@ -135,45 +147,21 @@ export function generateMessageProperties(params: {
 
     for (const [languageTag, keyValueMap] of Object.entries(keyValueMapByLanguageTag)) {
         const propertiesFileSource = Object.entries(keyValueMap)
-            .map(([key, value]) => `${key}=${escapeString(value)}`)
+            .map(([key, value]) => `${key}=${escapeStringForPropertiesFile(value)}`)
             .join("\n");
 
         out.push({
             languageTag,
-            "propertiesFileSource": ["# This file was generated by keycloakify", "", "parent=base", "", propertiesFileSource, ""].join("\n")
+            propertiesFileSource: [
+                "# This file was generated by keycloakify",
+                "",
+                "parent=base",
+                "",
+                propertiesFileSource,
+                ""
+            ].join("\n")
         });
     }
 
     return out;
 }
-
-// Convert a JavaScript string to UTF-16 encoding
-function toUTF16(codePoint: number): string {
-    if (codePoint <= 0xffff) {
-        // BMP character
-        return "\\u" + codePoint.toString(16).padStart(4, "0");
-    } else {
-        // Non-BMP character
-        codePoint -= 0x10000;
-        let highSurrogate = (codePoint >> 10) + 0xd800;
-        let lowSurrogate = (codePoint % 0x400) + 0xdc00;
-        return "\\u" + highSurrogate.toString(16).padStart(4, "0") + "\\u" + lowSurrogate.toString(16).padStart(4, "0");
-    }
-}
-
-// Escapes special characters and converts unicode to UTF-16 encoding
-function escapeString(str: string): string {
-    let escapedStr = "";
-    for (const char of [...str]) {
-        const codePoint = char.codePointAt(0);
-        if (!codePoint) continue;
-        if (char === "'") {
-            escapedStr += "''"; // double single quotes
-        } else if (codePoint > 0x7f) {
-            escapedStr += toUTF16(codePoint); // non-ascii characters
-        } else {
-            escapedStr += char;
-        }
-    }
-    return escapedStr;
-}

src/bin/keycloakify/generateSrcMainResources/generateSrcMainResources.ts

@@ -0,0 +1,42 @@
+import type { BuildContext } from "../../shared/buildContext";
+import { assert } from "tsafe/assert";
+import {
+    generateSrcMainResourcesForMainTheme,
+    type BuildContextLike as BuildContextLike_generateSrcMainResourcesForMainTheme
+} from "./generateSrcMainResourcesForMainTheme";
+import { generateSrcMainResourcesForThemeVariant } from "./generateSrcMainResourcesForThemeVariant";
+import fs from "fs";
+import { rmSync } from "../../tools/fs.rmSync";
+
+export type BuildContextLike = BuildContextLike_generateSrcMainResourcesForMainTheme & {
+    themeNames: string[];
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export async function generateSrcMainResources(params: {
+    buildContext: BuildContextLike;
+    resourcesDirPath: string;
+}): Promise<void> {
+    const { resourcesDirPath, buildContext } = params;
+
+    const [themeName, ...themeVariantNames] = buildContext.themeNames;
+
+    if (fs.existsSync(resourcesDirPath)) {
+        rmSync(resourcesDirPath, { recursive: true });
+    }
+
+    await generateSrcMainResourcesForMainTheme({
+        resourcesDirPath,
+        themeName,
+        buildContext
+    });
+
+    for (const themeVariantName of themeVariantNames) {
+        generateSrcMainResourcesForThemeVariant({
+            resourcesDirPath,
+            themeName,
+            themeVariantName
+        });
+    }
+}

src/bin/keycloakify/generateSrcMainResources/generateSrcMainResourcesForMainTheme.ts

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

src/bin/keycloakify/generateSrcMainResources/generateSrcMainResourcesForThemeVariant.ts

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

src/bin/keycloakify/generateSrcMainResources/index.ts

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

src/bin/keycloakify/generateSrcMainResources/readExtraPageNames.ts

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

src/bin/keycloakify/generateSrcMainResources/readFieldNameUsage.ts

@@ -0,0 +1,83 @@
+import { crawl } from "../../tools/crawl";
+import { join as pathJoin } from "path";
+import * as fs from "fs";
+import type { ThemeType } from "../../shared/constants";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
+
+/** Assumes the theme type exists */
+export function readFieldNameUsage(params: {
+    themeSrcDirPath: string;
+    themeType: ThemeType;
+}): string[] {
+    const { themeSrcDirPath, themeType } = params;
+
+    const fieldNames = new Set<string>();
+
+    for (const srcDirPath of [
+        pathJoin(getThisCodebaseRootDirPath(), "src", themeType),
+        pathJoin(themeSrcDirPath, themeType)
+    ]) {
+        const filePaths = crawl({
+            dirPath: srcDirPath,
+            returnedPathsType: "absolute"
+        }).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
+
+        for (const filePath of filePaths) {
+            const rawSourceFile = fs.readFileSync(filePath).toString("utf8");
+
+            if (!rawSourceFile.includes("messagesPerField")) {
+                continue;
+            }
+
+            for (const functionName of [
+                "printIfExists",
+                "existsError",
+                "get",
+                "exists",
+                "getFirstError"
+            ] as const) {
+                if (!rawSourceFile.includes(functionName)) {
+                    continue;
+                }
+
+                try {
+                    rawSourceFile
+                        .split(functionName)
+                        .filter(part => part.startsWith("("))
+                        .map(part => {
+                            let [p1] = part.split(")");
+
+                            p1 = p1.slice(1);
+
+                            return p1;
+                        })
+                        .map(part => {
+                            return part
+                                .split(",")
+                                .map(a => a.trim())
+                                .filter((...[, i]) =>
+                                    functionName !== "printIfExists" ? true : i === 0
+                                )
+                                .filter(
+                                    a =>
+                                        a.startsWith('"') ||
+                                        a.startsWith("'") ||
+                                        a.startsWith("`")
+                                )
+                                .filter(
+                                    a =>
+                                        a.endsWith('"') ||
+                                        a.endsWith("'") ||
+                                        a.endsWith("`")
+                                )
+                                .map(a => a.slice(1).slice(0, -1));
+                        })
+                        .flat()
+                        .forEach(fieldName => fieldNames.add(fieldName));
+                } catch {}
+            }
+        }
+    }
+
+    return Array.from(fieldNames);
+}

src/bin/keycloakify/generateStartKeycloakTestingContainer.ts

@@ -1,59 +0,0 @@
-import * as fs from "fs";
-import { join as pathJoin } from "path";
-import { assert } from "tsafe/assert";
-import type { BuildOptions } from "./BuildOptions";
-
-export type BuildOptionsLike = {
-    themeName: string;
-    extraThemeNames: string[];
-};
-
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
-
-generateStartKeycloakTestingContainer.basename = "start_keycloak_testing_container.sh";
-
-const containerName = "keycloak-testing-container";
-
-/** Files for being able to run a hot reload keycloak container */
-export function generateStartKeycloakTestingContainer(params: {
-    keycloakVersion: string;
-    keycloakThemeBuildingDirPath: string;
-    buildOptions: BuildOptionsLike;
-}) {
-    const {
-        keycloakThemeBuildingDirPath,
-        keycloakVersion,
-        buildOptions: { themeName, extraThemeNames }
-    } = params;
-
-    fs.writeFileSync(
-        pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename),
-        Buffer.from(
-            [
-                "#!/usr/bin/env bash",
-                "",
-                `docker rm ${containerName} || true`,
-                "",
-                `cd "${keycloakThemeBuildingDirPath.replace(/\\/g, "/")}"`,
-                "",
-                "docker run \\",
-                "   -p 8080:8080 \\",
-                `   --name ${containerName} \\`,
-                "   -e KEYCLOAK_ADMIN=admin \\",
-                "   -e KEYCLOAK_ADMIN_PASSWORD=admin \\",
-                ...[themeName, ...extraThemeNames].map(
-                    themeName =>
-                        `   -v "${pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName).replace(
-                            /\\/g,
-                            "/"
-                        )}":"/opt/keycloak/themes/${themeName}":rw \\`
-                ),
-                `   -it quay.io/keycloak/keycloak:${keycloakVersion} \\`,
-                `   start-dev --features=declarative-user-profile`,
-                ""
-            ].join("\n"),
-            "utf8"
-        ),
-        { "mode": 0o755 }
-    );
-}

src/bin/keycloakify/generateTheme/downloadKeycloakStaticResources.ts

@@ -1,71 +0,0 @@
-import { transformCodebase } from "../../tools/transformCodebase";
-import * as fs from "fs";
-import { join as pathJoin, relative as pathRelative } from "path";
-import type { ThemeType } from "../generateFtl";
-import { downloadBuiltinKeycloakTheme } from "../../download-builtin-keycloak-theme";
-import {
-    resourcesCommonDirPathRelativeToPublicDir,
-    resourcesDirPathRelativeToPublicDir,
-    basenameOfKeycloakDirInPublicDir
-} from "../../mockTestingResourcesPath";
-import * as crypto from "crypto";
-
-export async function downloadKeycloakStaticResources(
-    // prettier-ignore
-    params: {
-        projectDirPath: string;
-        themeType: ThemeType;
-        themeDirPath: string;
-        keycloakVersion: string;
-        usedResources: {
-            resourcesCommonFilePaths: string[];
-            resourcesFilePaths: string[];
-        } | undefined
-    }
-) {
-    const { projectDirPath, themeType, themeDirPath, keycloakVersion, usedResources } = params;
-
-    const tmpDirPath = pathJoin(
-        themeDirPath,
-        "..",
-        `tmp_suLeKsxId_${crypto.createHash("sha256").update(`${themeType}-${keycloakVersion}`).digest("hex").slice(0, 8)}`
-    );
-
-    await downloadBuiltinKeycloakTheme({
-        projectDirPath,
-        keycloakVersion,
-        "destDirPath": tmpDirPath
-    });
-
-    transformCodebase({
-        "srcDirPath": pathJoin(tmpDirPath, "keycloak", themeType, "resources"),
-        "destDirPath": pathJoin(themeDirPath, pathRelative(basenameOfKeycloakDirInPublicDir, resourcesDirPathRelativeToPublicDir)),
-        "transformSourceCode":
-            usedResources === undefined
-                ? undefined
-                : ({ fileRelativePath, sourceCode }) => {
-                      if (!usedResources.resourcesFilePaths.includes(fileRelativePath)) {
-                          return undefined;
-                      }
-
-                      return { "modifiedSourceCode": sourceCode };
-                  }
-    });
-
-    transformCodebase({
-        "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
-        "destDirPath": pathJoin(themeDirPath, pathRelative(basenameOfKeycloakDirInPublicDir, resourcesCommonDirPathRelativeToPublicDir)),
-        "transformSourceCode":
-            usedResources === undefined
-                ? undefined
-                : ({ fileRelativePath, sourceCode }) => {
-                      if (!usedResources.resourcesCommonFilePaths.includes(fileRelativePath)) {
-                          return undefined;
-                      }
-
-                      return { "modifiedSourceCode": sourceCode };
-                  }
-    });
-
-    fs.rmSync(tmpDirPath, { "recursive": true, "force": true });
-}

src/bin/keycloakify/generateTheme/generateTheme.ts

@@ -1,228 +0,0 @@
-import { transformCodebase } from "../../tools/transformCodebase";
-import * as fs from "fs";
-import { join as pathJoin } from "path";
-import { replaceImportsFromStaticInJsCode } from "../replacers/replaceImportsFromStaticInJsCode";
-import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
-import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds, themeTypes, type ThemeType } from "../generateFtl";
-import { basenameOfKeycloakDirInPublicDir } from "../../mockTestingResourcesPath";
-import { isInside } from "../../tools/isInside";
-import type { BuildOptions } from "../BuildOptions";
-import { assert } from "tsafe/assert";
-import { downloadKeycloakStaticResources } from "./downloadKeycloakStaticResources";
-import { readFieldNameUsage } from "./readFieldNameUsage";
-import { readExtraPagesNames } from "./readExtraPageNames";
-import { generateMessageProperties } from "./generateMessageProperties";
-import { readStaticResourcesUsage } from "./readStaticResourcesUsage";
-
-export type BuildOptionsLike = {
-    themeName: string;
-    extraThemeProperties: string[] | undefined;
-    themeVersion: string;
-    keycloakVersionDefaultAssets: string;
-    urlPathname: string | undefined;
-};
-
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
-
-export async function generateTheme(params: {
-    projectDirPath: string;
-    reactAppBuildDirPath: string;
-    keycloakThemeBuildingDirPath: string;
-    themeSrcDirPath: string;
-    keycloakifySrcDirPath: string;
-    buildOptions: BuildOptionsLike;
-    keycloakifyVersion: string;
-}): Promise<void> {
-    const {
-        projectDirPath,
-        reactAppBuildDirPath,
-        keycloakThemeBuildingDirPath,
-        themeSrcDirPath,
-        keycloakifySrcDirPath,
-        buildOptions,
-        keycloakifyVersion
-    } = params;
-
-    const getThemeDirPath = (themeType: ThemeType | "email") =>
-        pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", buildOptions.themeName, themeType);
-
-    let allCssGlobalsToDefine: Record<string, string> = {};
-
-    let generateFtlFilesCode_glob: ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"] | undefined = undefined;
-
-    for (const themeType of themeTypes) {
-        if (!fs.existsSync(pathJoin(themeSrcDirPath, themeType))) {
-            continue;
-        }
-
-        const themeDirPath = getThemeDirPath(themeType);
-
-        copy_app_resources_to_theme_path: {
-            const isFirstPass = themeType.indexOf(themeType) === 0;
-
-            if (!isFirstPass) {
-                break copy_app_resources_to_theme_path;
-            }
-
-            transformCodebase({
-                "destDirPath": pathJoin(themeDirPath, "resources", "build"),
-                "srcDirPath": reactAppBuildDirPath,
-                "transformSourceCode": ({ filePath, sourceCode }) => {
-                    //NOTE: Prevent cycles, excludes the folder we generated for debug in public/
-                    if (
-                        isInside({
-                            "dirPath": pathJoin(reactAppBuildDirPath, basenameOfKeycloakDirInPublicDir),
-                            filePath
-                        })
-                    ) {
-                        return undefined;
-                    }
-
-                    if (/\.css?$/i.test(filePath)) {
-                        const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode({
-                            "cssCode": sourceCode.toString("utf8")
-                        });
-
-                        register_css_variables: {
-                            if (!isFirstPass) {
-                                break register_css_variables;
-                            }
-
-                            allCssGlobalsToDefine = {
-                                ...allCssGlobalsToDefine,
-                                ...cssGlobalsToDefine
-                            };
-                        }
-
-                        return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
-                    }
-
-                    if (/\.js?$/i.test(filePath)) {
-                        const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-                            "jsCode": sourceCode.toString("utf8")
-                        });
-
-                        return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
-                    }
-
-                    return { "modifiedSourceCode": sourceCode };
-                }
-            });
-        }
-
-        const generateFtlFilesCode =
-            generateFtlFilesCode_glob !== undefined
-                ? generateFtlFilesCode_glob
-                : generateFtlFilesCodeFactory({
-                      "indexHtmlCode": fs.readFileSync(pathJoin(reactAppBuildDirPath, "index.html")).toString("utf8"),
-                      "cssGlobalsToDefine": allCssGlobalsToDefine,
-                      buildOptions,
-                      keycloakifyVersion,
-                      themeType,
-                      "fieldNames": readFieldNameUsage({
-                          keycloakifySrcDirPath,
-                          themeSrcDirPath,
-                          themeType
-                      })
-                  }).generateFtlFilesCode;
-
-        [
-            ...(() => {
-                switch (themeType) {
-                    case "login":
-                        return loginThemePageIds;
-                    case "account":
-                        return accountThemePageIds;
-                }
-            })(),
-            ...readExtraPagesNames({
-                themeType,
-                themeSrcDirPath
-            })
-        ].forEach(pageId => {
-            const { ftlCode } = generateFtlFilesCode({ pageId });
-
-            fs.mkdirSync(themeDirPath, { "recursive": true });
-
-            fs.writeFileSync(pathJoin(themeDirPath, pageId), Buffer.from(ftlCode, "utf8"));
-        });
-
-        generateMessageProperties({
-            themeSrcDirPath,
-            themeType
-        }).forEach(({ languageTag, propertiesFileSource }) => {
-            const messagesDirPath = pathJoin(themeDirPath, "messages");
-
-            fs.mkdirSync(pathJoin(themeDirPath, "messages"), { "recursive": true });
-
-            const propertiesFilePath = pathJoin(messagesDirPath, `messages_${languageTag}.properties`);
-
-            fs.writeFileSync(propertiesFilePath, Buffer.from(propertiesFileSource, "utf8"));
-        });
-
-        //TODO: Remove this block we left it for now only for backward compatibility
-        // we now have a separate script for this
-        copy_keycloak_resources_to_public: {
-            const keycloakDirInPublicDir = pathJoin(reactAppBuildDirPath, "..", "public", basenameOfKeycloakDirInPublicDir);
-
-            if (fs.existsSync(keycloakDirInPublicDir)) {
-                break copy_keycloak_resources_to_public;
-            }
-
-            await downloadKeycloakStaticResources({
-                projectDirPath,
-                "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
-                "themeDirPath": keycloakDirInPublicDir,
-                themeType,
-                "usedResources": undefined
-            });
-
-            if (themeType !== themeTypes[0]) {
-                break copy_keycloak_resources_to_public;
-            }
-
-            fs.writeFileSync(
-                pathJoin(keycloakDirInPublicDir, "README.txt"),
-                Buffer.from(
-                    // prettier-ignore
-                    [
-                        "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(keycloakDirInPublicDir, ".gitignore"), Buffer.from("*", "utf8"));
-        }
-
-        await downloadKeycloakStaticResources({
-            projectDirPath,
-            "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
-            themeDirPath,
-            themeType,
-            "usedResources": readStaticResourcesUsage({
-                keycloakifySrcDirPath,
-                themeSrcDirPath,
-                themeType
-            })
-        });
-
-        fs.writeFileSync(
-            pathJoin(themeDirPath, "theme.properties"),
-            Buffer.from([`parent=keycloak`, ...(buildOptions.extraThemeProperties ?? [])].join("\n\n"), "utf8")
-        );
-    }
-
-    email: {
-        const emailThemeSrcDirPath = pathJoin(themeSrcDirPath, "email");
-
-        if (!fs.existsSync(emailThemeSrcDirPath)) {
-            break email;
-        }
-
-        transformCodebase({
-            "srcDirPath": emailThemeSrcDirPath,
-            "destDirPath": getThemeDirPath("email")
-        });
-    }
-}

src/bin/keycloakify/generateTheme/index.ts

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

src/bin/keycloakify/generateTheme/readFieldNameUsage.ts

@@ -1,32 +0,0 @@
-import { crawl } from "../../tools/crawl";
-import { removeDuplicates } from "evt/tools/reducers/removeDuplicates";
-import { join as pathJoin } from "path";
-import * as fs from "fs";
-import type { ThemeType } from "../generateFtl";
-
-/** Assumes the theme type exists */
-export function readFieldNameUsage(params: { keycloakifySrcDirPath: string; themeSrcDirPath: string; themeType: ThemeType }): string[] {
-    const { keycloakifySrcDirPath, themeSrcDirPath, themeType } = params;
-
-    const fieldNames: string[] = [];
-
-    for (const srcDirPath of [pathJoin(keycloakifySrcDirPath, themeType), pathJoin(themeSrcDirPath, themeType)]) {
-        const filePaths = crawl({ "dirPath": srcDirPath, "returnedPathsType": "absolute" }).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
-
-        for (const filePath of filePaths) {
-            const rawSourceFile = fs.readFileSync(filePath).toString("utf8");
-
-            if (!rawSourceFile.includes("messagesPerField")) {
-                continue;
-            }
-
-            fieldNames.push(
-                ...Array.from(rawSourceFile.matchAll(/(?:(?:printIfExists)|(?:existsError)|(?:get)|(?:exists))\(\s*["']([^"']+)["']/g), m => m[1])
-            );
-        }
-    }
-
-    const out = fieldNames.reduce(...removeDuplicates<string>());
-
-    return out;
-}

src/bin/keycloakify/generateTheme/readStaticResourcesUsage.ts

@@ -1,83 +0,0 @@
-import { crawl } from "../../tools/crawl";
-import { join as pathJoin } from "path";
-import * as fs from "fs";
-import type { ThemeType } from "../generateFtl";
-
-/** Assumes the theme type exists */
-export function readStaticResourcesUsage(params: { keycloakifySrcDirPath: string; themeSrcDirPath: string; themeType: ThemeType }): {
-    resourcesCommonFilePaths: string[];
-    resourcesFilePaths: string[];
-} {
-    const { keycloakifySrcDirPath, themeSrcDirPath, themeType } = params;
-
-    const resourcesCommonFilePaths = new Set<string>();
-    const resourcesFilePaths = new Set<string>();
-
-    for (const srcDirPath of [pathJoin(keycloakifySrcDirPath, themeType), pathJoin(themeSrcDirPath, themeType)]) {
-        const filePaths = crawl({ "dirPath": srcDirPath, "returnedPathsType": "absolute" }).filter(filePath => /\.(ts|tsx|js|jsx)$/.test(filePath));
-
-        for (const filePath of filePaths) {
-            const rawSourceFile = fs.readFileSync(filePath).toString("utf8");
-
-            if (!rawSourceFile.includes("resourcesCommonPath") && !rawSourceFile.includes("resourcesPath")) {
-                continue;
-            }
-
-            const wrap = readPaths({ rawSourceFile });
-
-            wrap.resourcesCommonFilePaths.forEach(filePath => resourcesCommonFilePaths.add(filePath));
-            wrap.resourcesFilePaths.forEach(filePath => resourcesFilePaths.add(filePath));
-        }
-    }
-
-    return {
-        "resourcesCommonFilePaths": Array.from(resourcesCommonFilePaths),
-        "resourcesFilePaths": Array.from(resourcesFilePaths)
-    };
-}
-
-/** Exported for testing purpose */
-export function readPaths(params: { rawSourceFile: string }): {
-    resourcesCommonFilePaths: string[];
-    resourcesFilePaths: string[];
-} {
-    const { rawSourceFile } = params;
-
-    const resourcesCommonFilePaths = new Set<string>();
-    const resourcesFilePaths = new Set<string>();
-
-    for (const isCommon of [true, false]) {
-        const set = isCommon ? resourcesCommonFilePaths : resourcesFilePaths;
-
-        {
-            const regexp = new RegExp(`resources${isCommon ? "Common" : ""}Path\\s*}([^\`]+)\``, "g");
-
-            const matches = [...rawSourceFile.matchAll(regexp)];
-
-            for (const match of matches) {
-                const filePath = match[1];
-
-                set.add(filePath);
-            }
-        }
-
-        {
-            const regexp = new RegExp(`resources${isCommon ? "Common" : ""}Path\\s*[+,]\\s*["']([^"'\`]+)["'\`]`, "g");
-
-            const matches = [...rawSourceFile.matchAll(regexp)];
-
-            for (const match of matches) {
-                const filePath = match[1];
-
-                set.add(filePath);
-            }
-        }
-    }
-
-    const removePrefixSlash = (filePath: string) => (filePath.startsWith("/") ? filePath.slice(1) : filePath);
-
-    return {
-        "resourcesCommonFilePaths": Array.from(resourcesCommonFilePaths).map(removePrefixSlash),
-        "resourcesFilePaths": Array.from(resourcesFilePaths).map(removePrefixSlash)
-    };
-}

src/bin/keycloakify/index.ts

@@ -1,8 +1 @@
-#!/usr/bin/env node
-
 export * from "./keycloakify";
-import { main } from "./keycloakify";
-
-if (require.main === module) {
-    main();
-}

src/bin/keycloakify/keycloakify.ts

@@ -1,170 +1,118 @@
-import { generateTheme } from "./generateTheme";
-import { generateJavaStackFiles } from "./generateJavaStackFiles";
-import { join as pathJoin, relative as pathRelative, basename as pathBasename, sep as pathSep } from "path";
+import { generateSrcMainResources } from "./generateSrcMainResources";
+import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path";
 import * as child_process from "child_process";
-import { generateStartKeycloakTestingContainer } from "./generateStartKeycloakTestingContainer";
 import * as fs from "fs";
-import { readBuildOptions } from "./BuildOptions";
-import { getLogger } from "../tools/logger";
-import jar from "../tools/jar";
-import { assert } from "tsafe/assert";
-import { Equals } from "tsafe";
-import { getThemeSrcDirPath } from "../getSrcDirPath";
-import { getProjectRoot } from "../tools/getProjectRoot";
-import { objectKeys } from "tsafe/objectKeys";
+import { getBuildContext } from "../shared/buildContext";
+import {
+    vitePluginSubScriptEnvNames,
+    onlyBuildJarFileBasenameEnvName
+} from "../shared/constants";
+import { buildJars } from "./buildJars";
+import type { CliCommandOptions } from "../main";
+import chalk from "chalk";
+import { readThisNpmPackageVersion } from "../tools/readThisNpmPackageVersion";
+import * as os from "os";
+import { rmSync } from "../tools/fs.rmSync";
 
-export async function main() {
-    const projectDirPath = process.cwd();
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    exit_if_maven_not_installed: {
+        let commandOutput: Buffer | undefined = undefined;
 
-    const buildOptions = readBuildOptions({
-        projectDirPath,
-        "processArgv": process.argv.slice(2)
+        try {
+            commandOutput = child_process.execSync("mvn --version", {
+                stdio: ["ignore", "pipe", "ignore"]
+            });
+        } catch {}
+
+        if (commandOutput?.toString("utf8").includes("Apache Maven")) {
+            break exit_if_maven_not_installed;
+        }
+
+        const installationCommand = (() => {
+            switch (os.platform()) {
+                case "darwin":
+                    return "brew install mvn";
+                case "win32":
+                    return "choco install mvn";
+                case "linux":
+                default:
+                    return "sudo apt-get install mvn";
+            }
+        })();
+
+        console.log(
+            `${chalk.red("Apache Maven required.")} Install it with \`${chalk.bold(
+                installationCommand
+            )}\` (for example)`
+        );
+
+        process.exit(1);
+    }
+
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({ cliCommandOptions });
+
+    console.log(
+        [
+            chalk.cyan(`keycloakify v${readThisNpmPackageVersion()}`),
+            chalk.green(
+                `Building the keycloak theme in .${pathSep}${pathRelative(
+                    process.cwd(),
+                    buildContext.keycloakifyBuildDirPath
+                )} ...`
+            )
+        ].join(" ")
+    );
+
+    const startTime = Date.now();
+
+    {
+        if (!fs.existsSync(buildContext.keycloakifyBuildDirPath)) {
+            fs.mkdirSync(buildContext.keycloakifyBuildDirPath, {
+                recursive: true
+            });
+        }
+
+        fs.writeFileSync(
+            pathJoin(buildContext.keycloakifyBuildDirPath, ".gitignore"),
+            Buffer.from("*", "utf8")
+        );
+    }
+
+    const resourcesDirPath = pathJoin(buildContext.keycloakifyBuildDirPath, "resources");
+
+    await generateSrcMainResources({
+        resourcesDirPath,
+        buildContext
     });
 
-    const logger = getLogger({ "isSilent": buildOptions.isSilent });
-    logger.log("🔏 Building the keycloak theme...⌚");
+    run_post_build_script: {
+        if (buildContext.bundler !== "vite") {
+            break run_post_build_script;
+        }
 
-    const keycloakifyDirPath = getProjectRoot();
-
-    const { themeSrcDirPath } = getThemeSrcDirPath({ projectDirPath });
-
-    for (const themeName of [buildOptions.themeName, ...buildOptions.extraThemeNames]) {
-        await generateTheme({
-            projectDirPath,
-            "keycloakThemeBuildingDirPath": buildOptions.keycloakifyBuildDirPath,
-            themeSrcDirPath,
-            "keycloakifySrcDirPath": pathJoin(keycloakifyDirPath, "src"),
-            "reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
-            "buildOptions": {
-                ...buildOptions,
-                "themeName": themeName
-            },
-            "keycloakifyVersion": (() => {
-                const version = JSON.parse(fs.readFileSync(pathJoin(keycloakifyDirPath, "package.json")).toString("utf8"))["version"];
-
-                assert(typeof version === "string");
-
-                return version;
-            })()
+        child_process.execSync("npx vite", {
+            cwd: buildContext.projectDirPath,
+            env: {
+                ...process.env,
+                [vitePluginSubScriptEnvNames.runPostBuildScript]:
+                    JSON.stringify(buildContext)
+            }
         });
     }
 
-    const { jarFilePath } = generateJavaStackFiles({
-        "keycloakThemeBuildingDirPath": buildOptions.keycloakifyBuildDirPath,
-        "implementedThemeTypes": (() => {
-            const implementedThemeTypes = {
-                "login": false,
-                "account": false,
-                "email": false
-            };
-
-            for (const themeType of objectKeys(implementedThemeTypes)) {
-                if (!fs.existsSync(pathJoin(themeSrcDirPath, themeType))) {
-                    continue;
-                }
-                implementedThemeTypes[themeType] = true;
-            }
-
-            return implementedThemeTypes;
-        })(),
-        buildOptions
+    await buildJars({
+        resourcesDirPath,
+        buildContext,
+        onlyBuildJarFileBasename: process.env[onlyBuildJarFileBasenameEnvName]
     });
 
-    switch (buildOptions.bundler) {
-        case "none":
-            logger.log("😱 Skipping bundling step, there will be no jar");
-            break;
-        case "keycloakify":
-            logger.log("🫶 Let keycloakify do its thang");
-            await jar({
-                "rootPath": buildOptions.keycloakifyBuildDirPath,
-                "version": buildOptions.themeVersion,
-                "groupId": buildOptions.groupId,
-                "artifactId": buildOptions.artifactId,
-                "targetPath": jarFilePath
-            });
-            break;
-        case "mvn":
-            logger.log("🫙 Run maven to deliver a jar");
-            child_process.execSync("mvn package", { "cwd": buildOptions.keycloakifyBuildDirPath });
-            break;
-        default:
-            assert<Equals<typeof buildOptions.bundler, never>>(false);
-    }
+    rmSync(resourcesDirPath, { recursive: true });
 
-    // We want, however, to test in a container running the latest Keycloak version
-    const containerKeycloakVersion = "21.1.2";
-
-    generateStartKeycloakTestingContainer({
-        keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
-        "keycloakVersion": containerKeycloakVersion,
-        buildOptions
-    });
-
-    logger.log(
-        [
-            "",
-            `✅ Your keycloak theme has been generated and bundled into .${pathSep}${pathRelative(projectDirPath, jarFilePath)} 🚀`,
-            `It is to be placed in "/opt/keycloak/providers" in the container running a quay.io/keycloak/keycloak Docker image.`,
-            "",
-            //TODO: Restore when we find a good Helm chart for Keycloak.
-            //"Using Helm (https://github.com/codecentric/helm-charts), edit to reflect:",
-            "",
-            "value.yaml: ",
-            "    extraInitContainers: |",
-            "        - name: realm-ext-provider",
-            "          image: curlimages/curl",
-            "          imagePullPolicy: IfNotPresent",
-            "          command:",
-            "            - sh",
-            "          args:",
-            "            - -c",
-            `            - curl -L -f -S -o /extensions/${pathBasename(jarFilePath)} https://AN.URL.FOR/${pathBasename(jarFilePath)}`,
-            "          volumeMounts:",
-            "            - name: extensions",
-            "              mountPath: /extensions",
-            "        ",
-            "        extraVolumeMounts: |",
-            "            - name: extensions",
-            "              mountPath: /opt/keycloak/providers",
-            "    extraEnv: |",
-            "    - name: KEYCLOAK_USER",
-            "      value: admin",
-            "    - name: KEYCLOAK_PASSWORD",
-            "      value: xxxxxxxxx",
-            "    - name: JAVA_OPTS",
-            "      value: -Dkeycloak.profile=preview",
-            "",
-            "",
-            `To test your theme locally you can spin up a Keycloak ${containerKeycloakVersion} container image with the theme pre loaded by running:`,
-            "",
-            `👉 $ .${pathSep}${pathRelative(
-                projectDirPath,
-                pathJoin(buildOptions.keycloakifyBuildDirPath, generateStartKeycloakTestingContainer.basename)
-            )} 👈`,
-            "",
-            `Test with different Keycloak versions by editing the .sh file. see available versions here: https://quay.io/repository/keycloak/keycloak?tab=tags`,
-            ``,
-            `Once your container is up and running: `,
-            "- Log into the admin console 👉 http://localhost:8080/admin username: admin, password: admin 👈",
-            `- Create a realm:                       Master         -> AddRealm   -> Name: myrealm`,
-            `- Enable registration:                  Realm settings -> Login tab  -> User registration: on`,
-            `- Enable the Account theme (optional):  Realm settings -> Themes tab -> Account theme: ${buildOptions.themeName}`,
-            `                                        Clients        -> account    -> Login theme:   ${buildOptions.themeName}`,
-            `- Enable the email theme (optional):    Realm settings -> Themes tab -> Email theme:   ${buildOptions.themeName} (option will appear only if you have ran npx initialize-email-theme)`,
-            `- Create a client                       Clients        -> Create     -> Client ID:                       myclient`,
-            `                                                                        Root URL:                        https://www.keycloak.org/app/`,
-            `                                                                        Valid redirect URIs:             https://www.keycloak.org/app* http://localhost* (localhost is optional)`,
-            `                                                                        Valid post logout redirect URIs: https://www.keycloak.org/app* http://localhost*`,
-            `                                                                        Web origins:                     *`,
-            `                                                                        Login Theme:                     ${buildOptions.themeName}`,
-            `                                                                        Save (button at the bottom of the page)`,
-            ``,
-            `- Go to  👉  https://www.keycloak.org/app/ 👈 Click "Save" then "Sign in". You should see your login page`,
-            `- Got to 👉  http://localhost:8080/realms/myrealm/account 👈 to see your account theme`,
-            ``,
-            `Video tutorial: https://youtu.be/WMyGZNHQkjU`,
-            ``
-        ].join("\n")
+    console.log(
+        chalk.green(
+            `✓ keycloak theme built in ${((Date.now() - startTime) / 1000).toFixed(2)}s`
+        )
     );
 }

src/bin/keycloakify/parsedPackageJson.ts

@@ -1,57 +0,0 @@
-import * as fs from "fs";
-import { assert } from "tsafe";
-import type { Equals } from "tsafe";
-import { z } from "zod";
-import { pathJoin } from "../tools/pathJoin";
-
-export const bundlers = ["mvn", "keycloakify", "none"] as const;
-export type Bundler = (typeof bundlers)[number];
-export type ParsedPackageJson = {
-    name: string;
-    version?: string;
-    homepage?: string;
-    keycloakify?: {
-        extraThemeProperties?: string[];
-        areAppAndKeycloakServerSharingSameDomain?: boolean;
-        artifactId?: string;
-        groupId?: string;
-        bundler?: Bundler;
-        keycloakVersionDefaultAssets?: string;
-        reactAppBuildDirPath?: string;
-        keycloakifyBuildDirPath?: string;
-        themeName?: string;
-        extraThemeNames?: string[];
-    };
-};
-
-export const zParsedPackageJson = z.object({
-    "name": z.string(),
-    "version": z.string().optional(),
-    "homepage": z.string().optional(),
-    "keycloakify": z
-        .object({
-            "extraThemeProperties": z.array(z.string()).optional(),
-            "areAppAndKeycloakServerSharingSameDomain": z.boolean().optional(),
-            "artifactId": z.string().optional(),
-            "groupId": z.string().optional(),
-            "bundler": z.enum(bundlers).optional(),
-            "keycloakVersionDefaultAssets": z.string().optional(),
-            "reactAppBuildDirPath": z.string().optional(),
-            "keycloakifyBuildDirPath": z.string().optional(),
-            "themeName": z.string().optional(),
-            "extraThemeNames": z.array(z.string()).optional()
-        })
-        .optional()
-});
-
-assert<Equals<ReturnType<(typeof zParsedPackageJson)["parse"]>, ParsedPackageJson>>();
-
-let parsedPackageJson: undefined | ReturnType<(typeof zParsedPackageJson)["parse"]>;
-export function getParsedPackageJson(params: { projectDirPath: string }) {
-    const { projectDirPath } = params;
-    if (parsedPackageJson) {
-        return parsedPackageJson;
-    }
-    parsedPackageJson = zParsedPackageJson.parse(JSON.parse(fs.readFileSync(pathJoin(projectDirPath, "package.json")).toString("utf8")));
-    return parsedPackageJson;
-}

src/bin/keycloakify/replacers/replaceImportsFromStaticInJsCode.ts

@@ -1,51 +0,0 @@
-import { ftlValuesGlobalName } from "../ftlValuesGlobalName";
-
-export function replaceImportsFromStaticInJsCode(params: { jsCode: string }): { fixedJsCode: string } {
-    /* 
-	NOTE:
-
-	When we have urlOrigin defined it means that 
-	we are building with --external-assets
-	so we have to make sur that the fixed js code will run 
-	inside and outside keycloak.
-
-	When urlOrigin isn't defined we can assume the fixedJsCode
-	will always run in keycloak context.
-	*/
-
-    const { jsCode } = params;
-
-    const getReplaceArgs = (language: "js" | "css"): Parameters<typeof String.prototype.replace> => [
-        new RegExp(`([a-zA-Z_]+)\\.([a-zA-Z]+)=(function\\(([a-z]+)\\){return|([a-z]+)=>)"static\\/${language}\\/"`, "g"),
-        (...[, n, u, matchedFunction, eForFunction]) => {
-            const isArrowFunction = matchedFunction.includes("=>");
-            const e = isArrowFunction ? matchedFunction.replace("=>", "").trim() : eForFunction;
-
-            return `
-            ${n}[(function(){
-                var pd = Object.getOwnPropertyDescriptor(${n}, "p");
-                if( pd === undefined || pd.configurable ){
-                    Object.defineProperty(${n}, "p", {
-                        get: function() { return window.${ftlValuesGlobalName}.url.resourcesPath; },
-                        set: function() {}
-                    });
-                }
-                return "${u}";
-            })()] = ${isArrowFunction ? `${e} =>` : `function(${e}) { return `} "/build/static/${language}/"`
-                .replace(/\s+/g, " ")
-                .trim();
-        }
-    ];
-
-    const fixedJsCode = jsCode
-        .replace(...getReplaceArgs("js"))
-        .replace(...getReplaceArgs("css"))
-        .replace(/[a-zA-Z]+\.[a-zA-Z]+\+"static\//g, `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`)
-        //TODO: Write a test case for this
-        .replace(
-            /".chunk.css",([a-zA-Z])+=[a-zA-Z]+\.[a-zA-Z]+\+([a-zA-Z]+),/,
-            (...[, group1, group2]) => `".chunk.css",${group1} = window.${ftlValuesGlobalName}.url.resourcesPath + "/build/" + ${group2},`
-        );
-
-    return { fixedJsCode };
-}

src/bin/keycloakify/replacers/replaceImportsInCssCode.ts

@@ -1,12 +1,13 @@
 import * as crypto from "crypto";
-import type { BuildOptions } from "../BuildOptions";
+import type { BuildContext } from "../../shared/buildContext";
 import { assert } from "tsafe/assert";
+import { basenameOfTheKeycloakifyResourcesDir } from "../../shared/constants";
 
-export type BuildOptionsLike = {
+export type BuildContextLike = {
     urlPathname: string | undefined;
 };
 
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
+assert<BuildContext extends BuildContextLike ? true : false>();
 
 export function replaceImportsInCssCode(params: { cssCode: string }): {
     fixedCssCode: string;
@@ -16,8 +17,16 @@ export function replaceImportsInCssCode(params: { cssCode: string }): {
 
     const cssGlobalsToDefine: Record<string, string> = {};
 
-    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*/g) ?? []).forEach(
-        match => (cssGlobalsToDefine["url" + crypto.createHash("sha256").update(match).digest("hex").substring(0, 15)] = match)
+    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*?/g) ?? []).forEach(
+        match =>
+            (cssGlobalsToDefine[
+                "url" +
+                    crypto
+                        .createHash("sha256")
+                        .update(match)
+                        .digest("hex")
+                        .substring(0, 15)
+            ] = match)
     );
 
     let fixedCssCode = cssCode;
@@ -25,27 +34,38 @@ export function replaceImportsInCssCode(params: { cssCode: string }): {
     Object.keys(cssGlobalsToDefine).forEach(
         cssVariableName =>
             //NOTE: split/join pattern ~ replace all
-            (fixedCssCode = fixedCssCode.split(cssGlobalsToDefine[cssVariableName]).join(`var(--${cssVariableName})`))
+            (fixedCssCode = fixedCssCode
+                .split(cssGlobalsToDefine[cssVariableName])
+                .join(`var(--${cssVariableName})`))
     );
 
     return { fixedCssCode, cssGlobalsToDefine };
 }
 
-export function generateCssCodeToDefineGlobals(params: { cssGlobalsToDefine: Record<string, string>; buildOptions: BuildOptionsLike }): {
+export function generateCssCodeToDefineGlobals(params: {
+    cssGlobalsToDefine: Record<string, string>;
+    buildContext: BuildContextLike;
+}): {
     cssCodeToPrependInHead: string;
 } {
-    const { cssGlobalsToDefine, buildOptions } = params;
+    const { cssGlobalsToDefine, buildContext } = params;
 
     return {
-        "cssCodeToPrependInHead": [
+        cssCodeToPrependInHead: [
             ":root {",
             ...Object.keys(cssGlobalsToDefine)
                 .map(cssVariableName =>
                     [
                         `--${cssVariableName}:`,
                         cssGlobalsToDefine[cssVariableName].replace(
-                            new RegExp(`url\\(${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`, "g"),
-                            "url(${url.resourcesPath}/build/"
+                            new RegExp(
+                                `url\\(${(buildContext.urlPathname ?? "/").replace(
+                                    /\//g,
+                                    "\\/"
+                                )}`,
+                                "g"
+                            ),
+                            `url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/`
                         )
                     ].join(" ")
                 )

src/bin/keycloakify/replacers/replaceImportsInInlineCssCode.ts

@@ -1,22 +1,27 @@
-import type { BuildOptions } from "../BuildOptions";
+import type { BuildContext } from "../../shared/buildContext";
 import { assert } from "tsafe/assert";
+import { basenameOfTheKeycloakifyResourcesDir } from "../../shared/constants";
 
-export type BuildOptionsLike = {
+export type BuildContextLike = {
     urlPathname: string | undefined;
 };
 
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
+assert<BuildContext extends BuildContextLike ? true : false>();
 
-export function replaceImportsInInlineCssCode(params: { cssCode: string; buildOptions: BuildOptionsLike }): {
+export function replaceImportsInInlineCssCode(params: {
+    cssCode: string;
+    buildContext: BuildContextLike;
+}): {
     fixedCssCode: string;
 } {
-    const { cssCode, buildOptions } = params;
+    const { cssCode, buildContext } = params;
 
     const fixedCssCode = cssCode.replace(
-        buildOptions.urlPathname === undefined
+        buildContext.urlPathname === undefined
             ? /url\(["']?\/([^/][^)"']+)["']?\)/g
-            : new RegExp(`url\\(["']?${buildOptions.urlPathname}([^)"']+)["']?\\)`, "g"),
-        (...[, group]) => `url(\${url.resourcesPath}/build/${group})`
+            : new RegExp(`url\\(["']?${buildContext.urlPathname}([^)"']+)["']?\\)`, "g"),
+        (...[, group]) =>
+            `url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/${group})`
     );
 
     return { fixedCssCode };

src/bin/keycloakify/replacers/replaceImportsInJsCode/index.ts

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

src/bin/keycloakify/replacers/replaceImportsInJsCode/replaceImportsInJsCode.ts

@@ -0,0 +1,69 @@
+import { assert } from "tsafe/assert";
+import type { BuildContext } from "../../../shared/buildContext";
+import { replaceImportsInJsCode_vite } from "./vite";
+import { replaceImportsInJsCode_webpack } from "./webpack";
+import * as fs from "fs";
+
+export type BuildContextLike = {
+    projectBuildDirPath: string;
+    assetsDirPath: string;
+    urlPathname: string | undefined;
+    bundler: "vite" | "webpack";
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function replaceImportsInJsCode(params: {
+    jsCode: string;
+    buildContext: BuildContextLike;
+}) {
+    const { jsCode, buildContext } = params;
+
+    const { fixedJsCode } = (() => {
+        switch (buildContext.bundler) {
+            case "vite":
+                return replaceImportsInJsCode_vite({
+                    jsCode,
+                    buildContext,
+                    basenameOfAssetsFiles: readAssetsDirSync({
+                        assetsDirPath: params.buildContext.assetsDirPath
+                    })
+                });
+            case "webpack":
+                return replaceImportsInJsCode_webpack({
+                    jsCode,
+                    buildContext
+                });
+        }
+    })();
+
+    return { fixedJsCode };
+}
+
+const { readAssetsDirSync } = (() => {
+    let cache:
+        | {
+              assetsDirPath: string;
+              basenameOfAssetsFiles: string[];
+          }
+        | undefined = undefined;
+
+    function readAssetsDirSync(params: { assetsDirPath: string }): string[] {
+        const { assetsDirPath } = params;
+
+        if (cache !== undefined && cache.assetsDirPath === assetsDirPath) {
+            return cache.basenameOfAssetsFiles;
+        }
+
+        const basenameOfAssetsFiles = fs.readdirSync(assetsDirPath);
+
+        cache = {
+            assetsDirPath,
+            basenameOfAssetsFiles
+        };
+
+        return basenameOfAssetsFiles;
+    }
+
+    return { readAssetsDirSync };
+})();

src/bin/keycloakify/replacers/replaceImportsInJsCode/vite.ts

@@ -0,0 +1,103 @@
+import {
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir
+} from "../../../shared/constants";
+import { assert } from "tsafe/assert";
+import type { BuildContext } from "../../../shared/buildContext";
+import * as nodePath from "path";
+import { replaceAll } from "../../../tools/String.prototype.replaceAll";
+
+export type BuildContextLike = {
+    projectBuildDirPath: string;
+    assetsDirPath: string;
+    urlPathname: string | undefined;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function replaceImportsInJsCode_vite(params: {
+    jsCode: string;
+    buildContext: BuildContextLike;
+    basenameOfAssetsFiles: string[];
+    systemType?: "posix" | "win32";
+}): {
+    fixedJsCode: string;
+} {
+    const {
+        jsCode,
+        buildContext,
+        basenameOfAssetsFiles,
+        systemType = nodePath.sep === "/" ? "posix" : "win32"
+    } = params;
+
+    const { relative: pathRelative, sep: pathSep } = nodePath[systemType];
+
+    let fixedJsCode = jsCode;
+
+    replace_base_javacript_import: {
+        if (buildContext.urlPathname === undefined) {
+            break replace_base_javacript_import;
+        }
+        // Optimization
+        if (!jsCode.includes(buildContext.urlPathname)) {
+            break replace_base_javacript_import;
+        }
+
+        // Replace `Hv=function(e){return"/abcde12345/"+e}` by `Hv=function(e){return"/"+e}`
+        fixedJsCode = fixedJsCode.replace(
+            new RegExp(
+                `([\\w\\$][\\w\\d\\$]*)=function\\(([\\w\\$][\\w\\d\\$]*)\\)\\{return"${replaceAll(
+                    buildContext.urlPathname,
+                    "/",
+                    "\\/"
+                )}"\\+\\2\\}`,
+                "g"
+            ),
+            (...[, funcName, paramName]) =>
+                `${funcName}=function(${paramName}){return"/"+${paramName}}`
+        );
+    }
+
+    replace_javascript_relatives_import_paths: {
+        // Example: "assets/ or "foo/bar/"
+        const staticDir = (() => {
+            let out = pathRelative(
+                buildContext.projectBuildDirPath,
+                buildContext.assetsDirPath
+            );
+
+            out = replaceAll(out, pathSep, "/") + "/";
+
+            if (out === "/") {
+                throw new Error(
+                    `The assetsDirPath must be a subdirectory of projectBuildDirPath`
+                );
+            }
+
+            return out;
+        })();
+
+        // Optimization
+        if (!jsCode.includes(staticDir)) {
+            break replace_javascript_relatives_import_paths;
+        }
+
+        basenameOfAssetsFiles
+            .map(basenameOfAssetsFile => `${staticDir}${basenameOfAssetsFile}`)
+            .forEach(relativePathOfAssetFile => {
+                fixedJsCode = replaceAll(
+                    fixedJsCode,
+                    `"${relativePathOfAssetFile}"`,
+                    `(window.${nameOfTheGlobal}.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/${relativePathOfAssetFile}")`
+                );
+
+                fixedJsCode = replaceAll(
+                    fixedJsCode,
+                    `"${buildContext.urlPathname ?? "/"}${relativePathOfAssetFile}"`,
+                    `(window.${nameOfTheGlobal}.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/${relativePathOfAssetFile}")`
+                );
+            });
+    }
+
+    return { fixedJsCode };
+}

src/bin/keycloakify/replacers/replaceImportsInJsCode/webpack.ts

@@ -0,0 +1,114 @@
+import {
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir
+} from "../../../shared/constants";
+import { assert } from "tsafe/assert";
+import type { BuildContext } from "../../../shared/buildContext";
+import * as nodePath from "path";
+import { replaceAll } from "../../../tools/String.prototype.replaceAll";
+
+export type BuildContextLike = {
+    projectBuildDirPath: string;
+    assetsDirPath: string;
+    urlPathname: string | undefined;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function replaceImportsInJsCode_webpack(params: {
+    jsCode: string;
+    buildContext: BuildContextLike;
+    systemType?: "posix" | "win32";
+}): {
+    fixedJsCode: string;
+} {
+    const {
+        jsCode,
+        buildContext,
+        systemType = nodePath.sep === "/" ? "posix" : "win32"
+    } = params;
+
+    const { relative: pathRelative, sep: pathSep } = nodePath[systemType];
+
+    let fixedJsCode = jsCode;
+
+    if (buildContext.urlPathname !== undefined) {
+        // "__esModule",{value:!0})},n.p="/foo-bar/",function(){if("undefined"  -> ... n.p="/" ...
+        fixedJsCode = fixedJsCode.replace(
+            new RegExp(
+                `,([a-zA-Z]\\.[a-zA-Z])="${replaceAll(
+                    buildContext.urlPathname,
+                    "/",
+                    "\\/"
+                )}",`,
+                "g"
+            ),
+            (...[, assignTo]) => `,${assignTo}="/",`
+        );
+    }
+
+    // Example: "static/ or "foo/bar/"
+    const staticDir = (() => {
+        let out = pathRelative(
+            buildContext.projectBuildDirPath,
+            buildContext.assetsDirPath
+        );
+
+        out = replaceAll(out, pathSep, "/") + "/";
+
+        if (out === "/") {
+            throw new Error(
+                `The assetsDirPath must be a subdirectory of projectBuildDirPath`
+            );
+        }
+
+        return out;
+    })();
+
+    const getReplaceArgs = (
+        language: "js" | "css"
+    ): Parameters<typeof String.prototype.replace> => [
+        new RegExp(
+            `([a-zA-Z_]+)\\.([a-zA-Z]+)=(function\\(([a-z]+)\\){return|([a-z]+)=>)"${staticDir.replace(
+                /\//g,
+                "\\/"
+            )}${language}\\/"`,
+            "g"
+        ),
+        (...[, n, u, matchedFunction, eForFunction]) => {
+            const isArrowFunction = matchedFunction.includes("=>");
+            const e = isArrowFunction
+                ? matchedFunction.replace("=>", "").trim()
+                : eForFunction;
+
+            return `
+            ${n}[(function(){
+                var pd = Object.getOwnPropertyDescriptor(${n}, "p");
+                if( pd === undefined || pd.configurable ){
+                    Object.defineProperty(${n}, "p", {
+                        get: function() { return window.${nameOfTheGlobal}.url.resourcesPath; },
+                        set: function() {}
+                    });
+                }
+                return "${u}";
+            })()] = ${
+                isArrowFunction ? `${e} =>` : `function(${e}) { return `
+            } "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}${language}/"`
+                .replace(/\s+/g, " ")
+                .trim();
+        }
+    ];
+
+    fixedJsCode = fixedJsCode
+        .replace(...getReplaceArgs("js"))
+        .replace(...getReplaceArgs("css"))
+        .replace(
+            new RegExp(
+                `[a-zA-Z]+\\.[a-zA-Z]+\\+"${staticDir.replace(/\//g, "\\/")}`,
+                "g"
+            ),
+            `window.${nameOfTheGlobal}.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}`
+        );
+
+    return { fixedJsCode };
+}

src/bin/main.ts

@@ -0,0 +1,227 @@
+#!/usr/bin/env node
+
+import { termost } from "termost";
+import { readThisNpmPackageVersion } from "./tools/readThisNpmPackageVersion";
+import * as child_process from "child_process";
+
+export type CliCommandOptions = {
+    projectDirPath: string | undefined;
+};
+
+const program = termost<CliCommandOptions>(
+    {
+        name: "keycloakify",
+        description: "Keycloakify CLI",
+        version: readThisNpmPackageVersion()
+    },
+    {
+        onException: error => {
+            console.error(error);
+            process.exit(1);
+        }
+    }
+);
+
+const optionsKeys: string[] = [];
+
+program.option({
+    key: "projectDirPath",
+    name: (() => {
+        const long = "project";
+        const short = "p";
+
+        optionsKeys.push(long, short);
+
+        return { long, short };
+    })(),
+    description: [
+        `For monorepos, path to the keycloakify project.`,
+        "Example: `npx keycloakify build --project packages/keycloak-theme`",
+        "https://docs.keycloakify.dev/build-options#project-or-p-cli-option"
+    ].join(" "),
+    defaultValue: undefined
+});
+
+function skip(_context: any, argv: { options: Record<string, unknown> }) {
+    const unrecognizedOptionKey = Object.keys(argv.options).find(
+        key => !optionsKeys.includes(key)
+    );
+
+    if (unrecognizedOptionKey !== undefined) {
+        console.error(
+            `keycloakify: Unrecognized option: ${
+                unrecognizedOptionKey.length === 1 ? "-" : "--"
+            }${unrecognizedOptionKey}`
+        );
+        process.exit(1);
+    }
+
+    return false;
+}
+
+program
+    .command({
+        name: "build",
+        description: "Build the theme (default subcommand)."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./keycloakify");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
+program
+    .command<{
+        port: number;
+        keycloakVersion: string | undefined;
+        realmJsonFilePath: string | undefined;
+    }>({
+        name: "start-keycloak",
+        description:
+            "Spin up a pre configured Docker image of Keycloak to test your theme."
+    })
+    .option({
+        key: "port",
+        name: (() => {
+            const name = "port";
+
+            optionsKeys.push(name);
+
+            return name;
+        })(),
+        description: ["Keycloak server port.", "Example `--port 8085`"].join(" "),
+        defaultValue: 8080
+    })
+    .option({
+        key: "keycloakVersion",
+        name: (() => {
+            const name = "keycloak-version";
+
+            optionsKeys.push(name);
+
+            return name;
+        })(),
+        description: [
+            "Use a specific version of Keycloak.",
+            "Example `--keycloak-version 21.1.1`"
+        ].join(" "),
+        defaultValue: undefined
+    })
+    .option({
+        key: "realmJsonFilePath",
+        name: (() => {
+            const name = "import";
+
+            optionsKeys.push(name);
+
+            return name;
+        })(),
+        defaultValue: undefined,
+        description: [
+            "Import your own realm configuration file",
+            "Example `--import path/to/myrealm-realm.json`"
+        ].join(" ")
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./start-keycloak");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
+program
+    .command({
+        name: "eject-page",
+        description: "Eject a Keycloak page."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./eject-page");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
+program
+    .command({
+        name: "add-story",
+        description: "Add *.stories.tsx file for a specific page to in your Storybook."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./add-story");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
+program
+    .command({
+        name: "initialize-email-theme",
+        description: "Initialize an email theme."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./initialize-email-theme");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
+program
+    .command({
+        name: "copy-keycloak-resources-to-public",
+        description:
+            "(Webpack/Create-React-App only) Copy Keycloak default theme resources to the public directory."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./copy-keycloak-resources-to-public");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
+program
+    .command({
+        name: "update-kc-gen",
+        description:
+            "(Webpack/Create-React-App only) Create/update the kc.gen.ts file in your project."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./update-kc-gen");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
+// Fallback to build command if no command is provided
+{
+    const [, , ...rest] = process.argv;
+
+    if (
+        rest.length === 0 ||
+        (rest[0].startsWith("-") && rest[0] !== "--help" && rest[0] !== "-h")
+    ) {
+        const { status } = child_process.spawnSync(
+            "npx",
+            ["keycloakify", "build", ...rest],
+            {
+                stdio: "inherit"
+            }
+        );
+
+        process.exit(status ?? 1);
+    }
+}

src/bin/mockTestingResourcesPath.ts

@@ -1,5 +0,0 @@
-import { pathJoin } from "./tools/pathJoin";
-
-export const basenameOfKeycloakDirInPublicDir = "keycloak-resources";
-export const resourcesDirPathRelativeToPublicDir = pathJoin(basenameOfKeycloakDirInPublicDir, "resources");
-export const resourcesCommonDirPathRelativeToPublicDir = pathJoin(resourcesDirPathRelativeToPublicDir, "resources_common");

src/bin/promptKeycloakVersion.ts

@@ -1,47 +0,0 @@
-import { getLatestsSemVersionedTagFactory } from "./tools/octokit-addons/getLatestsSemVersionedTag";
-import { Octokit } from "@octokit/rest";
-import cliSelect from "cli-select";
-
-export async function promptKeycloakVersion() {
-    const { getLatestsSemVersionedTag } = (() => {
-        const { octokit } = (() => {
-            const githubToken = process.env.GITHUB_TOKEN;
-
-            const octokit = new Octokit(githubToken === undefined ? undefined : { "auth": githubToken });
-
-            return { octokit };
-        })();
-
-        const { getLatestsSemVersionedTag } = getLatestsSemVersionedTagFactory({ octokit });
-
-        return { getLatestsSemVersionedTag };
-    })();
-
-    console.log("Select Keycloak version?");
-
-    const tags = [
-        ...(await getLatestsSemVersionedTag({
-            "count": 10,
-            "doIgnoreBeta": true,
-            "owner": "keycloak",
-            "repo": "keycloak"
-        }).then(arr => arr.map(({ tag }) => tag))),
-        "11.0.3"
-    ];
-
-    if (process.env["GITHUB_ACTIONS"] === "true") {
-        return { "keycloakVersion": tags[0] };
-    }
-
-    const { value: keycloakVersion } = await cliSelect<string>({
-        "values": tags
-    }).catch(() => {
-        console.log("Aborting");
-
-        process.exit(-1);
-    });
-
-    console.log(keycloakVersion);
-
-    return { keycloakVersion };
-}