Fix case error

Addition of Federated Identity Account page

.github/release.yaml

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

.github/workflows/ci.yaml

@@ -13,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
@@ -27,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
@@ -41,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
@@ -70,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
@@ -88,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 }}
@@ -105,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,19 @@
+<style>
+    body.sb-show-main.sb-main-padded {
+        padding: 0;
+    }
+
+    body:not(.kcBodyClass) {
+        background-color: #393939;
+    }
+
+
+    body.sb-show-preparing-docs > .sb-wrapper {
+        visibility: hidden;
+    }
+
+    body .sb-preparing-story {
+        visibility: hidden;
+
+    }
+</style>

.storybook/preview.js

@@ -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/tos/tos_en.md

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

.storybook/static/tos/tos_es.md

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

.storybook/static/tos/tos_fr.md

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

README.md

@@ -40,6 +40,9 @@
 
 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)!
 
+> 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).
+
 ## 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.  
@@ -63,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 ✨
 

package.json

@@ -1,39 +1,27 @@
 {
     "name": "keycloakify",
-    "version": "9.5.6",
+    "version": "10.0.0-rc.28",
     "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 -p src/vite-plugin && 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 src/**/*.java",
+        "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,45 @@
     "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/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,47 +90,36 @@
         "@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",
+        "recast": "^0.23.3",
+        "run-exclusive": "^2.2.19",
         "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",
+        "termost": "^0.12.0",
+        "ts-node": "^10.9.2",
+        "tsc-alias": "^1.8.10",
+        "tss-react": "^4.9.10",
         "typescript": "^4.9.1-beta",
-        "vitest": "^0.29.8",
-        "zod-to-json-schema": "^3.20.4",
-        "vite": "^5.0.12"
-    },
-    "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",
-        "react-markdown": "^5.0.3",
-        "recast": "^0.23.3",
-        "rfc4648": "^1.5.2",
-        "tsafe": "^1.6.0",
+        "vite": "^5.2.11",
+        "vitest": "^1.6.0",
         "yauzl": "^2.10.0",
-        "yazl": "^2.5.1",
         "zod": "^3.17.10",
-        "magic-string": "^0.30.7"
+        "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,133 @@
+import * as child_process from "child_process";
+import * as fs from "fs";
+import { join, relative } from "path";
+import { assert } from "tsafe/assert";
+import { transformCodebase } from "../src/bin/tools/transformCodebase";
+import chalk from "chalk";
+
+console.log(chalk.cyan("Building Keycloakify..."));
+
+const startTime = Date.now();
+
+if (fs.existsSync(join("dist", "bin", "main.original.js"))) {
+    fs.renameSync(
+        join("dist", "bin", "main.original.js"),
+        join("dist", "bin", "main.js")
+    );
+
+    fs.readdirSync(join("dist", "bin")).forEach(fileBasename => {
+        if (/[0-9]\.index.js/.test(fileBasename)) {
+            fs.rmSync(join("dist", "bin", fileBasename));
+        }
+    });
+}
+
+run(`npx tsc -p ${join("src", "bin", "tsconfig.json")}`);
+
+if (
+    !fs
+        .readFileSync(join("dist", "bin", "main.js"))
+        .toString("utf8")
+        .includes("__nccwpck_require__")
+) {
+    fs.cpSync(join("dist", "bin", "main.js"), join("dist", "bin", "main.original.js"));
+}
+
+run(`npx ncc build ${join("dist", "bin", "main.js")} -o ${join("dist", "ncc_out")}`);
+
+transformCodebase({
+    srcDirPath: join("dist", "ncc_out"),
+    destDirPath: join("dist", "bin"),
+    transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+        if (fileRelativePath === "index.js") {
+            return {
+                newFileName: "main.js",
+                modifiedSourceCode: sourceCode
+            };
+        }
+
+        return { modifiedSourceCode: sourceCode };
+    }
+});
+
+fs.rmSync(join("dist", "ncc_out"), { recursive: true });
+
+patchDeprecatedBufferApiUsage(join("dist", "bin", "main.js"));
+
+fs.chmodSync(
+    join("dist", "bin", "main.js"),
+    fs.statSync(join("dist", "bin", "main.js")).mode |
+        fs.constants.S_IXUSR |
+        fs.constants.S_IXGRP |
+        fs.constants.S_IXOTH
+);
+
+run(`npx tsc -p ${join("src", "tsconfig.json")}`);
+run(`npx tsc-alias -p ${join("src", "tsconfig.json")}`);
+
+if (fs.existsSync(join("dist", "vite-plugin", "index.original.js"))) {
+    fs.renameSync(
+        join("dist", "vite-plugin", "index.original.js"),
+        join("dist", "vite-plugin", "index.js")
+    );
+}
+
+run(`npx tsc -p ${join("src", "vite-plugin", "tsconfig.json")}`);
+
+if (
+    !fs
+        .readFileSync(join("dist", "vite-plugin", "index.js"))
+        .toString("utf8")
+        .includes("__nccwpck_require__")
+) {
+    fs.cpSync(
+        join("dist", "vite-plugin", "index.js"),
+        join("dist", "vite-plugin", "index.original.js")
+    );
+}
+
+run(
+    `npx ncc build ${join("dist", "vite-plugin", "index.js")} -o ${join(
+        "dist",
+        "ncc_out"
+    )}`
+);
+
+transformCodebase({
+    srcDirPath: join("dist", "ncc_out"),
+    destDirPath: join("dist", "vite-plugin"),
+    transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+        assert(fileRelativePath === "index.js");
+
+        return { modifiedSourceCode: sourceCode };
+    }
+});
+
+fs.rmSync(join("dist", "ncc_out"), { recursive: true });
+
+patchDeprecatedBufferApiUsage(join("dist", "vite-plugin", "index.js"));
+
+fs.rmSync(join("dist", "src"), { recursive: true, force: true });
+
+fs.cpSync("src", join("dist", "src"), { recursive: true });
+
+console.log(chalk.green(`✓ built in ${((Date.now() - startTime) / 1000).toFixed(2)}s`));
+
+function run(command: string) {
+    console.log(chalk.grey(`$ ${command}`));
+
+    child_process.execSync(command, { stdio: "inherit" });
+}
+
+function patchDeprecatedBufferApiUsage(filePath: string) {
+    const before = fs.readFileSync(filePath).toString("utf8");
+
+    const after = before.replace(
+        `var buffer = new Buffer(toRead);`,
+        `var buffer = Buffer.allocUnsafe ? Buffer.allocUnsafe(toRead) : new Buffer(toRead);`
+    );
+
+    assert(after !== before, `Patch failed for ${relative(process.cwd(), filePath)}`);
+
+    fs.writeFileSync(filePath, Buffer.from(after, "utf8"));
+}

scripts/dump-keycloak-realm.ts

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

scripts/generate-i18n-messages.ts

@@ -1,10 +1,15 @@
 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 { crawl } from "../src/bin/tools/crawl";
-import { downloadBuiltinKeycloakTheme } from "../src/bin/download-builtin-keycloak-theme";
+import { downloadKeycloakDefaultTheme } from "../src/bin/shared/downloadKeycloakDefaultTheme";
 import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRootDirPath";
-import { getLogger } from "../src/bin/tools/logger";
+import { rmSync } from "../src/bin/tools/fs.rmSync";
 
 // NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
 // update the version array for generating for newer version.
@@ -12,29 +17,21 @@ 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 = "23.0.4";
+    const keycloakVersion = "24.0.4";
 
     const thisCodebaseRootDirPath = getThisCodebaseRootDirPath();
 
-    const tmpDirPath = pathJoin(thisCodebaseRootDirPath, "tmp_xImOef9dOd44");
-
-    fs.rmSync(tmpDirPath, { "recursive": true, "force": true });
-
-    fs.mkdirSync(tmpDirPath);
-
-    fs.writeFileSync(pathJoin(tmpDirPath, ".gitignore"), Buffer.from("/*\n!.gitignore\n", "utf8"));
-
-    await downloadBuiltinKeycloakTheme({
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
         keycloakVersion,
-        "destDirPath": tmpDirPath,
-        "buildOptions": {
-            "cacheDirPath": pathJoin(thisCodebaseRootDirPath, "node_modules", ".cache", "keycloakify"),
-            "npmWorkspaceRootDirPath": thisCodebaseRootDirPath
+        buildOptions: {
+            cacheDirPath: pathJoin(
+                thisCodebaseRootDirPath,
+                "node_modules",
+                ".cache",
+                "keycloakify"
+            ),
+            npmWorkspaceRootDirPath: thisCodebaseRootDirPath
         }
     });
 
@@ -43,12 +40,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);
 
@@ -59,15 +58,20 @@ 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];
 
@@ -75,19 +79,28 @@ async function main() {
             return;
         }
 
-        const baseMessagesDirPath = pathJoin(thisCodebaseRootDirPath, "src", themeType, "i18n", "baseMessages");
+        const baseMessagesDirPath = pathJoin(
+            thisCodebaseRootDirPath,
+            "src",
+            themeType,
+            "i18n",
+            "baseMessages"
+        );
 
         const languages = Object.keys(recordForPageType);
 
         const generatedFileHeader = [
-            `//This code was automatically generated by running ${pathRelative(thisCodebaseRootDirPath, __filename)}`,
+            `//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,
@@ -96,7 +109,11 @@ async function main() {
                         generatedFileHeader,
                         "",
                         "/* spell-checker: disable */",
-                        `const messages= ${JSON.stringify(recordForPageType[language], null, 2)};`,
+                        `const messages= ${JSON.stringify(
+                            recordForPageType[language],
+                            null,
+                            2
+                        )};`,
                         "",
                         "export default messages;",
                         "/* spell-checker: enable */"
@@ -105,7 +122,7 @@ async function main() {
                 )
             );
 
-            logger.log(`${filePath} wrote`);
+            //console.log(`${filePath} wrote`);
         });
 
         fs.writeFileSync(
@@ -121,7 +138,10 @@ async function main() {
                     `            case "en": return en;`,
                     ...languages
                         .filter(language => language !== "en")
-                        .map(language => `            case "${language}": return import("./${language}");`),
+                        .map(
+                            language =>
+                                `            case "${language}": return import("./${language}");`
+                        ),
                     '            default: return { "default": {} };',
                     "        }",
                     "    })();",

scripts/grant-exec-perms.ts

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

scripts/link-in-app.ts

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

@@ -1,8 +1,11 @@
-import { nameOfTheGlobal, basenameOfTheKeycloakifyResourcesDir } from "keycloakify/bin/constants";
+import {
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir
+} from "keycloakify/bin/shared/constants";
 import { assert } from "tsafe/assert";
 
 /**
- * This is an equivalent of process.env.PUBLIC_URL thay you can use in Webpack projects.
+ * 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 = (() => {

src/account/Fallback.tsx

@@ -1,11 +1,16 @@
 import { lazy, Suspense } from "react";
-import type { PageProps } from "keycloakify/account/pages/PageProps";
-import type { I18n } from "keycloakify/account/i18n";
-import type { KcContext } from "./kcContext";
 import { assert, type Equals } from "tsafe/assert";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "./KcContext";
+import type { I18n } from "./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 Fallback(props: PageProps<KcContext, I18n>) {
     const { kcContext, ...rest } = props;
@@ -16,8 +21,18 @@ export default function Fallback(props: PageProps<KcContext, I18n>) {
                 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);
             })()}

src/account/KcContext/KcContext.ts

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

src/account/KcContext/getKcContextMock.ts

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

src/account/KcContext/index.ts

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

src/account/KcContext/kcContextMocks.ts

@@ -0,0 +1,199 @@
+import "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 { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
+import { useSetClassName } from "keycloakify/tools/useSetClassName";
+import type { TemplateProps } from "keycloakify/account/TemplateProps";
+import type { KcContext } from "./KcContext";
+import type { I18n } from "./i18n";
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, active, classes, children } = props;
 
     const { getClassName } = useGetClassName({ 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: getClassName("kcHtmlClass")
     });
 
-    if (!isReady) {
+    useSetClassName({
+        qualifiedName: "body",
+        className: clsx("admin-console", "user", getClassName("kcBodyClass"))
+    });
+
+    useEffect(() => {
+        const { currentLanguageTag } = locale ?? {};
+
+        if (currentLanguageTag === undefined) {
+            return;
+        }
+
+        const html = document.querySelector("html");
+        assert(html !== null);
+        html.lang = currentLanguageTag;
+    }, []);
+
+    const { areAllStyleSheetsLoaded } = useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: !doUseDefaultCss
+            ? []
+            : [
+                  `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+                  `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+                  `${url.resourcesPath}/css/account.css`
+              ]
+    });
+
+    if (!areAllStyleSheetsLoaded) {
         return null;
     }
 
@@ -52,10 +80,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                                             <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,8 +1,11 @@
 import type { ReactNode } from "react";
-import type { KcContext } from "./kcContext";
+import type { KcContext } from "./KcContext";
 import type { I18n } from "./i18n";
 
-export type TemplateProps<KcContext extends KcContext.Common, I18nExtended extends I18n> = {
+export type TemplateProps<
+    KcContext extends KcContext.Common,
+    I18nExtended extends I18n
+> = {
     kcContext: KcContext;
     i18n: I18nExtended;
     doUseDefaultCss: boolean;
@@ -11,4 +14,17 @@ export type TemplateProps<KcContext extends KcContext.Common, I18nExtended exten
     children: ReactNode;
 };
 
-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 "keycloakify/tools/Object.fromEntries";
 import { useEffect, useState, useRef } from "react";
 import fallbackMessages from "./baseMessages/en";
 import { getMessages } from "./baseMessages";
 import { assert } from "tsafe/assert";
-import type { KcContext } from "../kcContext/KcContext";
-import { Markdown } from "keycloakify/tools/Markdown";
+import type { KcContext } from "../KcContext";
+import { Reflect } from "tsafe/Reflect";
 
 export const fallbackLanguageTag = "en";
 
@@ -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,16 +52,31 @@ 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;
 };
@@ -92,19 +105,19 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 
                 setI18n({
                     ...createI18nTranslationFunctions({
-                        "fallbackMessages": {
+                        fallbackMessages: {
                             ...fallbackMessages,
                             ...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
                             ...(extraMessages[fallbackLanguageTag] ?? {})
                         } as any,
-                        "messages": {
+                        messages: {
                             ...(await getMessages(currentLanguageTag)),
                             ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
                             ...(extraMessages[currentLanguageTag] ?? {})
                         } as any
                     }),
                     currentLanguageTag,
-                    "changeLocale": newLanguageTag => {
+                    getChangeLocalUrl: newLanguageTag => {
                         const { locale } = kcContext;
 
                         assert(locale !== undefined, "Internationalization not enabled");
@@ -113,11 +126,9 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
 
                         assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
 
-                        window.location.href = targetSupportedLocale.url;
-
-                        assert(false, "never");
+                        return targetSupportedLocale.url;
                     },
-                    "labelBySupportedLanguageTag": Object.fromEntries(
+                    labelBySupportedLanguageTag: Object.fromEntries(
                         (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
                     )
                 });
@@ -127,7 +138,10 @@ export function createUseI18n<ExtraMessageKey extends string = never>(extraMessa
         return i18n ?? null;
     }
 
-    return { useI18n };
+    return {
+        useI18n,
+        ofTypeI18n: Reflect<GenericI18n<MessageKey | ExtraMessageKey>>()
+    };
 }
 
 function createI18nTranslationFunctions<MessageKey extends string>(params: {
@@ -136,8 +150,8 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
 }): 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;
+    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
+        const { key, args, doRenderAsHtml } = props;
 
         const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
 
@@ -166,68 +180,94 @@ function createI18nTranslationFunctions<MessageKey extends string>(params: {
                     return;
                 }
 
-                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
+                messageWithArgsInjected = messageWithArgsInjected.replace(
+                    new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                );
             });
 
             return messageWithArgsInjected;
         })();
 
-        return doRenderMarkdown ? (
-            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
-                {messageWithArgsInjectedIfAny}
-            </Markdown>
+        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)[]; doRenderMarkdown: boolean }): JSX.Element | string {
-        const { key, args, doRenderMarkdown } = props;
+    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
+        const { key, args, doRenderAsHtml } = props;
 
-        const match = key.match(/^\$\{([^{]+)\}$/);
+        if (!/\$\{[^}]+\}/.test(key)) {
+            const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
 
-        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
+            if (resolvedMessage === undefined) {
+                return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
+            }
 
-        const out = resolveMsg({
-            "key": keyUnwrappedFromCurlyBraces,
-            args,
-            doRenderMarkdown
+            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 (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
+        return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
     }
 
     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
+        msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
+        msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
+        advancedMsg: (key, ...args) =>
+            resolveMsgAdvanced({
+                key,
+                args,
+                doRenderAsHtml: true
+            }) as JSX.Element,
+        advancedMsgStr: (key, ...args) =>
+            resolveMsgAdvanced({
+                key,
+                args,
+                doRenderAsHtml: false
+            }) as string
     };
 }
 
 const keycloakifyExtraMessages = {
-    "en": {
-        "shouldBeEqual": "{0} should be equal to {1}",
-        "shouldBeDifferent": "{0} should be different to {1}",
-        "shouldMatchPattern": "Pattern should match: `/{0}/`",
-        "mustBeAnInteger": "Must be an integer",
-        "notAValidOption": "Not a valid option",
-        "newPasswordSameAsOld": "New password must be different from the old one",
-        "passwordConfirmNotMatch": "Password confirmation does not match"
+    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": {
+    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",
+        shouldBeEqual: "{0} doit être égal à {1}",
+        shouldBeDifferent: "{0} doit être différent de {1}",
+        shouldMatchPattern: "Dois respecter le schéma: `/{0}/`",
+        mustBeAnInteger: "Doit être un nombre entier",
+        notAValidOption: "N'est pas une option valide",
 
-        "logoutConfirmTitle": "Déconnexion",
-        "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
-        "doLogout": "Se déconnecter",
-        "newPasswordSameAsOld": "Le nouveau mot de passe doit être différent de l'ancien",
-        "passwordConfirmNotMatch": "La confirmation du mot de passe ne correspond pas"
+        logoutConfirmTitle: "Déconnexion",
+        logoutConfirmHeader: "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
+        doLogout: "Se déconnecter",
+        newPasswordSameAsOld: "Le nouveau mot de passe doit être différent de l'ancien",
+        passwordConfirmNotMatch: "La confirmation du mot de passe ne correspond pas"
         /* spell-checker: enable */
     }
 };

src/account/i18n/index.ts

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

src/account/index.ts

@@ -1,10 +1,4 @@
-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 { ExtendKcContext } from "keycloakify/account/KcContext";
 export type { PageProps } from "keycloakify/account/pages/PageProps";
+export { createGetKcContextMock } from "keycloakify/account/KcContext";
+export { createUseI18n } from "keycloakify/account/i18n";

src/account/kcContext/KcContext.ts

@@ -1,127 +0,0 @@
-import type { AccountThemePageId } from "keycloakify/bin/keycloakify/generateFtl";
-import { assert } from "tsafe/assert";
-import type { Equals } from "tsafe";
-import { type ThemeType } from "keycloakify/bin/constants";
-
-export type KcContext = KcContext.Password | KcContext.Account;
-
-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;
-            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,100 +0,0 @@
-import type { DeepPartial } from "keycloakify/tools/DeepPartial";
-import { deepAssign } from "keycloakify/tools/deepAssign";
-import { isStorybook } from "keycloakify/lib/isStorybook";
-import type { ExtendKcContext } from "./getKcContextFromWindow";
-import { getKcContextFromWindow } from "./getKcContextFromWindow";
-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
-
-            warn_that_mock_is_enbaled: {
-                if (isStorybook) {
-                    break warn_that_mock_is_enbaled;
-                }
-
-                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 };
-        }
-
-        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 { nameOfTheGlobal } from "keycloakify/bin/constants";
-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)[nameOfTheGlobal];
-}

src/account/kcContext/index.ts

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

src/account/kcContext/kcContextMocks.ts

@@ -1,175 +0,0 @@
-import "minimal-polyfills/Object.fromEntries";
-import { resources_common, keycloak_resources } from "keycloakify/bin/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": "#",
-        "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/useGetClassName.ts

@@ -2,12 +2,20 @@ 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"
+    defaultClasses: {
+        kcHtmlClass: undefined,
+        kcBodyClass: undefined,
+        kcButtonClass: "btn",
+        kcContentWrapperClass: "row",
+        kcButtonPrimaryClass: "btn-primary",
+        kcButtonLargeClass: "btn-lg",
+        kcButtonDefaultClass: "btn-default",
+        kcFormClass: "form-horizontal",
+        kcFormGroupClass: "form-group",
+        kcInputWrapperClass: "col-xs-12 col-sm-12 col-md-12 col-lg-12",
+        kcLabelClass: "control-label",
+        kcInputClass: "form-control",
+        kcInputErrorMessageClass:
+            "pf-c-form__helper-text pf-m-error required kc-feedback-text"
     }
 });

src/account/pages/Account.tsx

@@ -1,7 +1,7 @@
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
@@ -9,9 +9,9 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
 
     const { getClassName } = useGetClassName({
         doUseDefaultCss,
-        "classes": {
+        classes: {
             ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "user")
+            kcBodyClass: clsx(classes?.kcBodyClass, "user")
         }
     });
 

src/account/pages/Applications.tsx

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

src/account/pages/PageProps.ts

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

src/account/pages/Password.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
-import type { PageProps } from "keycloakify/account/pages/PageProps";
 import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
@@ -10,9 +10,9 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
 
     const { getClassName } = useGetClassName({
         doUseDefaultCss,
-        "classes": {
+        classes: {
             ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "password")
+            kcBodyClass: clsx(classes?.kcBodyClass, "password")
         }
     });
 
@@ -57,18 +57,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 +98,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                     value={account.username ?? ""}
                     autoComplete="username"
                     readOnly
-                    style={{ "display": "none" }}
+                    style={{ display: "none" }}
                 />
 
                 {password.passwordSet && (

src/account/pages/Sessions.tsx

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

src/account/pages/Totp.tsx

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

src/bin/constants.ts

@@ -1,14 +0,0 @@
-export const nameOfTheGlobal = "kcContext";
-export const keycloak_resources = "keycloak-resources";
-export const resources_common = "resources-common";
-export const lastKeycloakVersionWithAccountV1 = "21.1.2";
-export const resolvedViteConfigJsonBasename = "vite.json";
-export const basenameOfTheKeycloakifyResourcesDir = "build";
-
-export const themeTypes = ["login", "account"] as const;
-export const retrocompatPostfix = "_retrocompat";
-export const accountV1ThemeName = "account-v1";
-
-export type ThemeType = (typeof themeTypes)[number];
-
-export const keycloakifyBuildOptionsForPostPostBuildScriptEnvName = "KEYCLOAKIFY_BUILD_OPTIONS_POST_POST_BUILD_SCRIPT";

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

@@ -1,112 +1,13 @@
-#!/usr/bin/env node
+import { copyKeycloakResourcesToPublic } from "./shared/copyKeycloakResourcesToPublic";
+import { readBuildOptions } from "./shared/buildOptions";
+import type { CliCommandOptions } from "./main";
 
-import { downloadKeycloakStaticResources, type BuildOptionsLike } from "./keycloakify/generateTheme/downloadKeycloakStaticResources";
-import { join as pathJoin, relative as pathRelative } from "path";
-import { readBuildOptions } from "./keycloakify/buildOptions";
-import { themeTypes, keycloak_resources, lastKeycloakVersionWithAccountV1 } from "./constants";
-import { readThisNpmProjectVersion } from "./tools/readThisNpmProjectVersion";
-import { assert, type Equals } from "tsafe/assert";
-import * as fs from "fs";
-import { rmSync } from "./tools/fs.rmSync";
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
 
-export async function copyKeycloakResourcesToPublic(params: { processArgv: string[] }) {
-    const { processArgv } = params;
+    const buildOptions = readBuildOptions({ cliCommandOptions });
 
-    const buildOptions = readBuildOptions({ processArgv });
-
-    const destDirPath = pathJoin(buildOptions.publicDirPath, keycloak_resources);
-
-    const keycloakifyBuildinfoFilePath = pathJoin(destDirPath, "keycloakify.buildinfo");
-
-    const { keycloakifyBuildinfoRaw } = generateKeycloakifyBuildinfoRaw({
-        destDirPath,
-        "keycloakifyVersion": readThisNpmProjectVersion(),
+    await copyKeycloakResourcesToPublic({
         buildOptions
     });
-
-    skip_if_already_done: {
-        if (!fs.existsSync(keycloakifyBuildinfoFilePath)) {
-            break skip_if_already_done;
-        }
-
-        const keycloakifyBuildinfoRaw_previousRun = fs.readFileSync(keycloakifyBuildinfoFilePath).toString("utf8");
-
-        if (keycloakifyBuildinfoRaw_previousRun !== keycloakifyBuildinfoRaw) {
-            break skip_if_already_done;
-        }
-
-        return;
-    }
-
-    rmSync(destDirPath, { "force": true, "recursive": true });
-
-    for (const themeType of themeTypes) {
-        await downloadKeycloakStaticResources({
-            "keycloakVersion": (() => {
-                switch (themeType) {
-                    case "login":
-                        return buildOptions.loginThemeResourcesFromKeycloakVersion;
-                    case "account":
-                        return lastKeycloakVersionWithAccountV1;
-                }
-            })(),
-            themeType,
-            "themeDirPath": destDirPath,
-            buildOptions
-        });
-    }
-
-    fs.writeFileSync(
-        pathJoin(destDirPath, "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(buildOptions.publicDirPath, keycloak_resources, ".gitignore"), Buffer.from("*", "utf8"));
-
-    fs.writeFileSync(keycloakifyBuildinfoFilePath, Buffer.from(keycloakifyBuildinfoRaw, "utf8"));
-}
-
-export function generateKeycloakifyBuildinfoRaw(params: {
-    destDirPath: string;
-    keycloakifyVersion: string;
-    buildOptions: BuildOptionsLike & {
-        loginThemeResourcesFromKeycloakVersion: string;
-    };
-}) {
-    const { destDirPath, keycloakifyVersion, buildOptions } = params;
-
-    const { cacheDirPath, npmWorkspaceRootDirPath, loginThemeResourcesFromKeycloakVersion, ...rest } = buildOptions;
-
-    assert<Equals<typeof rest, {}>>(true);
-
-    const keycloakifyBuildinfoRaw = JSON.stringify(
-        {
-            keycloakifyVersion,
-            "buildOptions": {
-                loginThemeResourcesFromKeycloakVersion,
-                "cacheDirPath": pathRelative(destDirPath, cacheDirPath),
-                "npmWorkspaceRootDirPath": pathRelative(destDirPath, npmWorkspaceRootDirPath)
-            }
-        },
-        null,
-        2
-    );
-
-    return { keycloakifyBuildinfoRaw };
-}
-
-async function main() {
-    await copyKeycloakResourcesToPublic({
-        "processArgv": process.argv.slice(2)
-    });
-}
-
-if (require.main === module) {
-    main();
 }

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

@@ -1,234 +0,0 @@
-#!/usr/bin/env node
-import { join as pathJoin } from "path";
-import { downloadAndUnzip } from "./downloadAndUnzip";
-import { promptKeycloakVersion } from "./promptKeycloakVersion";
-import { getLogger } from "./tools/logger";
-import { readBuildOptions, type BuildOptions } from "./keycloakify/buildOptions";
-import { assert } from "tsafe/assert";
-import * as child_process from "child_process";
-import * as fs from "fs";
-import { rmSync } from "./tools/fs.rmSync";
-import { lastKeycloakVersionWithAccountV1 } from "./constants";
-import { transformCodebase } from "./tools/transformCodebase";
-
-export type BuildOptionsLike = {
-    cacheDirPath: string;
-    npmWorkspaceRootDirPath: string;
-};
-
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
-
-export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: string; destDirPath: string; buildOptions: BuildOptionsLike }) {
-    const { keycloakVersion, destDirPath, buildOptions } = params;
-
-    await downloadAndUnzip({
-        destDirPath,
-        "url": `https://github.com/keycloak/keycloak/archive/refs/tags/${keycloakVersion}.zip`,
-        "specificDirsToExtract": ["", "-community"].map(ext => `keycloak-${keycloakVersion}/themes/src/main/resources${ext}/theme`),
-        buildOptions,
-        "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"
-                    });
-                }
-
-                remove_keycloak_v2: {
-                    const keycloakV2DirPath = pathJoin(destDirPath, "keycloak.v2");
-
-                    if (!fs.existsSync(keycloakV2DirPath)) {
-                        break remove_keycloak_v2;
-                    }
-
-                    rmSync(keycloakV2DirPath, { "recursive": true });
-                }
-
-                // Note, this is an optimization for reducing the size of the jar
-                remove_unused_node_modules: {
-                    const nodeModuleDirPath = pathJoin(destDirPath, "keycloak", "common", "resources", "node_modules");
-
-                    if (!fs.existsSync(nodeModuleDirPath)) {
-                        break remove_unused_node_modules;
-                    }
-
-                    const toDeletePerfixes = [
-                        "angular",
-                        "bootstrap",
-                        "rcue",
-                        "font-awesome",
-                        "ng-file-upload",
-                        pathJoin("patternfly", "dist", "sass"),
-                        pathJoin("patternfly", "dist", "less"),
-                        pathJoin("patternfly", "dist", "js"),
-                        "d3",
-                        pathJoin("jquery", "src"),
-                        "c3",
-                        "core-js",
-                        "eonasdan-bootstrap-datetimepicker",
-                        "moment",
-                        "react",
-                        "patternfly-bootstrap-treeview",
-                        "popper.js",
-                        "tippy.js",
-                        "jquery-match-height",
-                        "google-code-prettify",
-                        "patternfly-bootstrap-combobox",
-                        "focus-trap",
-                        "tabbable",
-                        "scheduler",
-                        "@types",
-                        "datatables.net",
-                        "datatables.net-colreorder",
-                        "tslib",
-                        "prop-types",
-                        "file-selector",
-                        "datatables.net-colreorder-bs",
-                        "object-assign",
-                        "warning",
-                        "js-tokens",
-                        "loose-envify",
-                        "prop-types-extra",
-                        "attr-accept",
-                        "datatables.net-select",
-                        "drmonty-datatables-colvis",
-                        "datatables.net-bs",
-                        pathJoin("@patternfly", "react"),
-                        pathJoin("@patternfly", "patternfly", "docs")
-                    ];
-
-                    transformCodebase({
-                        "srcDirPath": nodeModuleDirPath,
-                        "destDirPath": nodeModuleDirPath,
-                        "transformSourceCode": ({ sourceCode, fileRelativePath }) => {
-                            if (fileRelativePath.endsWith(".map")) {
-                                return undefined;
-                            }
-
-                            if (toDeletePerfixes.find(prefix => fileRelativePath.startsWith(prefix)) !== undefined) {
-                                return undefined;
-                            }
-
-                            if (fileRelativePath.startsWith(pathJoin("patternfly", "dist", "fonts"))) {
-                                if (
-                                    !fileRelativePath.endsWith(".woff2") &&
-                                    !fileRelativePath.endsWith(".woff") &&
-                                    !fileRelativePath.endsWith(".ttf")
-                                ) {
-                                    return undefined;
-                                }
-                            }
-
-                            return { "modifiedSourceCode": sourceCode };
-                        }
-                    });
-                }
-
-                // Just like node_modules
-                remove_unused_lib: {
-                    const libDirPath = pathJoin(destDirPath, "keycloak", "common", "resources", "lib");
-
-                    if (!fs.existsSync(libDirPath)) {
-                        break remove_unused_lib;
-                    }
-
-                    const toDeletePerfixes = ["ui-ace", "filesaver", "fileupload", "angular", "ui-ace", "pficon"];
-
-                    transformCodebase({
-                        "srcDirPath": libDirPath,
-                        "destDirPath": libDirPath,
-                        "transformSourceCode": ({ sourceCode, fileRelativePath }) => {
-                            if (fileRelativePath.endsWith(".map")) {
-                                return undefined;
-                            }
-
-                            if (toDeletePerfixes.find(prefix => fileRelativePath.startsWith(prefix)) !== undefined) {
-                                return undefined;
-                            }
-
-                            return { "modifiedSourceCode": sourceCode };
-                        }
-                    });
-                }
-
-                last_account_v1_transformations: {
-                    if (lastKeycloakVersionWithAccountV1 !== keycloakVersion) {
-                        break last_account_v1_transformations;
-                    }
-
-                    {
-                        const accountCssFilePath = pathJoin(destDirPath, "keycloak", "account", "resources", "css", "account.css");
-
-                        fs.writeFileSync(
-                            accountCssFilePath,
-                            Buffer.from(fs.readFileSync(accountCssFilePath).toString("utf8").replace("top: -34px;", "top: -34px !important;"), "utf8")
-                        );
-                    }
-
-                    // Note, this is an optimization for reducing the size of the jar,
-                    // For this version we know exactly which resources are used.
-                    {
-                        const nodeModulesDirPath = pathJoin(destDirPath, "keycloak", "common", "resources", "node_modules");
-
-                        const toKeepPrefixes = [
-                            ...["patternfly.min.css", "patternfly-additions.min.css", "patternfly-additions.min.css"].map(fileBasename =>
-                                pathJoin("patternfly", "dist", "css", fileBasename)
-                            ),
-                            pathJoin("patternfly", "dist", "fonts")
-                        ];
-
-                        transformCodebase({
-                            "srcDirPath": nodeModulesDirPath,
-                            "destDirPath": nodeModulesDirPath,
-                            "transformSourceCode": ({ sourceCode, fileRelativePath }) => {
-                                if (toKeepPrefixes.find(prefix => fileRelativePath.startsWith(prefix)) === undefined) {
-                                    return undefined;
-                                }
-                                return { "modifiedSourceCode": sourceCode };
-                            }
-                        });
-                    }
-                }
-            }
-        }
-    });
-}
-
-async function main() {
-    const buildOptions = readBuildOptions({
-        "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({
-        keycloakVersion,
-        destDirPath,
-        buildOptions
-    });
-}
-
-if (require.main === module) {
-    main();
-}

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

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

src/bin/downloadAndUnzip.ts

@@ -1,203 +0,0 @@
-import { createHash } from "crypto";
-import { mkdir, writeFile, unlink } from "fs/promises";
-import fetch from "make-fetch-happen";
-import { dirname as pathDirname, join as pathJoin, basename as pathBasename } from "path";
-import { assert } from "tsafe/assert";
-import { transformCodebase } from "./tools/transformCodebase";
-import { unzip, zip } from "./tools/unzip";
-import { rm } from "./tools/fs.rm";
-import * as child_process from "child_process";
-import { existsAsync } from "./tools/fs.existsAsync";
-import type { BuildOptions } from "./keycloakify/buildOptions";
-import { getProxyFetchOptions } from "./tools/fetchProxyOptions";
-
-export type BuildOptionsLike = {
-    cacheDirPath: string;
-    npmWorkspaceRootDirPath: string;
-};
-
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
-
-export async function downloadAndUnzip(params: {
-    url: string;
-    destDirPath: string;
-    specificDirsToExtract?: string[];
-    preCacheTransform?: {
-        actionCacheId: string;
-        action: (params: { destDirPath: string }) => Promise<void>;
-    };
-    buildOptions: BuildOptionsLike;
-}) {
-    const { url, destDirPath, specificDirsToExtract, preCacheTransform, buildOptions } = params;
-
-    const { extractDirPath, zipFilePath } = (() => {
-        const zipFileBasenameWithoutExt = generateFileNameFromURL({
-            url,
-            "preCacheTransform":
-                preCacheTransform === undefined
-                    ? undefined
-                    : {
-                          "actionCacheId": preCacheTransform.actionCacheId,
-                          "actionFootprint": preCacheTransform.action.toString()
-                      }
-        });
-
-        const zipFilePath = pathJoin(buildOptions.cacheDirPath, `${zipFileBasenameWithoutExt}.zip`);
-        const extractDirPath = pathJoin(buildOptions.cacheDirPath, `tmp_unzip_${zipFileBasenameWithoutExt}`);
-
-        return { zipFilePath, extractDirPath };
-    })();
-
-    download_zip_and_transform: {
-        if (await existsAsync(zipFilePath)) {
-            break download_zip_and_transform;
-        }
-
-        const { response, isFromRemoteCache } = await (async () => {
-            const proxyFetchOptions = await getProxyFetchOptions({
-                "npmWorkspaceRootDirPath": buildOptions.npmWorkspaceRootDirPath
-            });
-
-            const response = await fetch(
-                `https://github.com/keycloakify/keycloakify/releases/download/v0.0.1/${pathBasename(zipFilePath)}`,
-                proxyFetchOptions
-            );
-
-            if (response.status === 200) {
-                return {
-                    response,
-                    "isFromRemoteCache": true
-                };
-            }
-
-            return {
-                "response": await fetch(url, proxyFetchOptions),
-                "isFromRemoteCache": false
-            };
-        })();
-
-        await mkdir(pathDirname(zipFilePath), { "recursive": true });
-
-        /**
-         * The correct way to fix this is to upgrade node-fetch beyond 3.2.5
-         * (see https://github.com/node-fetch/node-fetch/issues/1295#issuecomment-1144061991.)
-         * Unfortunately, octokit (a dependency of keycloakify) also uses node-fetch, and
-         * does not support node-fetch 3.x. So we stick around with this band-aid until
-         * octokit upgrades.
-         */
-        response.body?.setMaxListeners(Number.MAX_VALUE);
-        assert(typeof response.body !== "undefined" && response.body != null);
-
-        await writeFile(zipFilePath, response.body);
-
-        if (isFromRemoteCache) {
-            break download_zip_and_transform;
-        }
-
-        if (specificDirsToExtract === undefined && preCacheTransform === undefined) {
-            break download_zip_and_transform;
-        }
-
-        await unzip(zipFilePath, extractDirPath, specificDirsToExtract);
-
-        try {
-            await preCacheTransform?.action({
-                "destDirPath": extractDirPath
-            });
-        } catch (error) {
-            await Promise.all([rm(extractDirPath, { "recursive": true }), unlink(zipFilePath)]);
-
-            throw error;
-        }
-
-        await unlink(zipFilePath);
-
-        await zip(extractDirPath, zipFilePath);
-
-        await rm(extractDirPath, { "recursive": true });
-
-        upload_to_remot_cache_if_admin: {
-            const githubToken = process.env["KEYCLOAKIFY_ADMIN_GITHUB_PERSONAL_ACCESS_TOKEN"];
-
-            if (githubToken === undefined) {
-                break upload_to_remot_cache_if_admin;
-            }
-
-            console.log("uploading to remote cache");
-
-            try {
-                child_process.execSync(`which putasset`);
-            } catch {
-                child_process.execSync(`npm install -g putasset`);
-            }
-
-            try {
-                child_process.execFileSync("putasset", [
-                    "--owner",
-                    "keycloakify",
-                    "--repo",
-                    "keycloakify",
-                    "--tag",
-                    "v0.0.1",
-                    "--filename",
-                    zipFilePath,
-                    "--token",
-                    githubToken
-                ]);
-            } catch {
-                console.log("upload failed, asset probably already exists in remote cache");
-            }
-        }
-    }
-
-    await unzip(zipFilePath, extractDirPath);
-
-    transformCodebase({
-        "srcDirPath": extractDirPath,
-        "destDirPath": destDirPath
-    });
-
-    await rm(extractDirPath, { "recursive": true });
-}
-
-function generateFileNameFromURL(params: {
-    url: string;
-    preCacheTransform:
-        | {
-              actionCacheId: string;
-              actionFootprint: string;
-          }
-        | undefined;
-}): string {
-    const { preCacheTransform } = params;
-
-    // Parse the URL
-    const url = new URL(params.url);
-
-    // Extract pathname and remove leading slashes
-    let fileName = url.pathname.replace(/^\//, "").replace(/\//g, "_");
-
-    // Optionally, add query parameters replacing special characters
-    if (url.search) {
-        fileName += url.search.replace(/[&=?]/g, "-");
-    }
-
-    // Replace any characters that are not valid in filenames
-    fileName = fileName.replace(/[^a-zA-Z0-9-_]/g, "");
-
-    // Trim or pad the fileName to a specific length
-    fileName = fileName.substring(0, 50);
-
-    add_pre_cache_transform: {
-        if (preCacheTransform === undefined) {
-            break add_pre_cache_transform;
-        }
-
-        // Sanitize actionCacheId the same way as other components
-        const sanitizedActionCacheId = preCacheTransform.actionCacheId.replace(/[^a-zA-Z0-9-_]/g, "_");
-
-        fileName += `_${sanitizedActionCacheId}_${createHash("sha256").update(preCacheTransform.actionFootprint).digest("hex").substring(0, 5)}`;
-    }
-
-    return fileName;
-}

src/bin/eject-keycloak-page.ts

@@ -1,64 +0,0 @@
-#!/usr/bin/env node
-
-import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
-import cliSelect from "cli-select";
-import { loginThemePageIds, accountThemePageIds, type LoginThemePageId, type AccountThemePageId } 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 "./getThemeSrcDirPath";
-import { themeTypes, type ThemeType } from "./constants";
-import { getReactAppRootDirPath } from "./keycloakify/buildOptions/getReactAppRootDirPath";
-
-(async () => {
-    console.log("Select a theme type");
-
-    const { reactAppRootDirPath } = getReactAppRootDirPath({
-        "processArgv": process.argv.slice(2)
-    });
-
-    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({ reactAppRootDirPath });
-
-    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(getThisCodebaseRootDirPath(), "src", themeType, "pages", pageBasename)));
-
-    console.log(`${pathRelative(process.cwd(), targetFilePath)} created`);
-})();

src/bin/eject-page.ts

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

src/bin/initialize-email-theme.ts

@@ -1,60 +1,69 @@
-#!/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 { readBuildOptions } from "./shared/buildOptions";
 import * as fs from "fs";
-import { getLogger } from "./tools/logger";
-import { getThemeSrcDirPath } from "./getThemeSrcDirPath";
-import { rmSync } from "./tools/fs.rmSync";
+import { getThemeSrcDirPath } from "./shared/getThemeSrcDirPath";
+import type { CliCommandOptions } from "./main";
 
-export async function main() {
-    const buildOptions = readBuildOptions({
-        "processArgv": process.argv.slice(2)
-    });
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
 
-    const logger = getLogger({ "isSilent": buildOptions.isSilent });
+    const buildOptions = readBuildOptions({ cliCommandOptions });
 
     const { themeSrcDirPath } = getThemeSrcDirPath({
-        "reactAppRootDirPath": buildOptions.reactAppRootDirPath
+        reactAppRootDirPath: buildOptions.reactAppRootDirPath
     });
 
     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,
+        cacheDirPath: buildOptions.cacheDirPath
+    });
 
-    await downloadBuiltinKeycloakTheme({
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
         keycloakVersion,
-        "destDirPath": builtinKeycloakThemeTmpDirPath,
         buildOptions
     });
 
     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`);
-
-    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/buildJars/buildJar.ts

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

src/bin/keycloakify/buildJars/buildJars.ts

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

src/bin/keycloakify/buildJars/extensionVersions.ts

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

src/bin/keycloakify/buildJars/generatePom.ts

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

src/bin/keycloakify/buildJars/getKeycloakVersionRangeForJar.ts

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

src/bin/keycloakify/buildJars/index.ts

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

src/bin/keycloakify/buildOptions/UserProvidedBuildOptions.ts

@@ -1,25 +0,0 @@
-import { z } from "zod";
-
-export type UserProvidedBuildOptions = {
-    extraThemeProperties?: string[];
-    artifactId?: string;
-    groupId?: string;
-    doCreateJar?: boolean;
-    loginThemeResourcesFromKeycloakVersion?: string;
-    reactAppBuildDirPath?: string;
-    keycloakifyBuildDirPath?: string;
-    themeName?: string | string[];
-    doBuildRetrocompatAccountTheme?: boolean;
-};
-
-export const zUserProvidedBuildOptions = z.object({
-    "extraThemeProperties": z.array(z.string()).optional(),
-    "artifactId": z.string().optional(),
-    "groupId": z.string().optional(),
-    "doCreateJar": z.boolean().optional(),
-    "loginThemeResourcesFromKeycloakVersion": z.string().optional(),
-    "reactAppBuildDirPath": z.string().optional(),
-    "keycloakifyBuildDirPath": z.string().optional(),
-    "themeName": z.union([z.string(), z.array(z.string())]).optional(),
-    "doBuildRetrocompatAccountTheme": z.boolean().optional()
-});

src/bin/keycloakify/buildOptions/buildOptions.ts

@@ -1,193 +0,0 @@
-import { parse as urlParse } from "url";
-import { readParsedPackageJson } from "./parsedPackageJson";
-import { join as pathJoin } from "path";
-import parseArgv from "minimist";
-import { getAbsoluteAndInOsFormatPath } from "../../tools/getAbsoluteAndInOsFormatPath";
-import { readResolvedViteConfig } from "./resolvedViteConfig";
-import * as fs from "fs";
-import { getCacheDirPath } from "./getCacheDirPath";
-import { getReactAppRootDirPath } from "./getReactAppRootDirPath";
-import { getNpmWorkspaceRootDirPath } from "./getNpmWorkspaceRootDirPath";
-
-/** Consolidated build option gathered form CLI arguments and config in package.json */
-export type BuildOptions = {
-    bundler: "vite" | "webpack";
-    isSilent: boolean;
-    themeVersion: string;
-    themeNames: string[];
-    extraThemeProperties: string[] | undefined;
-    groupId: string;
-    artifactId: string;
-    doCreateJar: boolean;
-    loginThemeResourcesFromKeycloakVersion: string;
-    reactAppRootDirPath: string;
-    reactAppBuildDirPath: string;
-    /** Directory that keycloakify outputs to. Defaults to {cwd}/build_keycloak */
-    keycloakifyBuildDirPath: string;
-    publicDirPath: string;
-    cacheDirPath: 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;
-    assetsDirPath: string;
-    doBuildRetrocompatAccountTheme: boolean;
-    npmWorkspaceRootDirPath: string;
-};
-
-export function readBuildOptions(params: { processArgv: string[] }): BuildOptions {
-    const { processArgv } = params;
-
-    const { reactAppRootDirPath } = getReactAppRootDirPath({ processArgv });
-
-    const { cacheDirPath } = getCacheDirPath({ reactAppRootDirPath });
-
-    const { resolvedViteConfig } = readResolvedViteConfig({ cacheDirPath });
-
-    if (resolvedViteConfig === undefined && fs.existsSync(pathJoin(reactAppRootDirPath, "vite.config.ts"))) {
-        throw new Error("Keycloakify's Vite plugin output not found");
-    }
-
-    const { keycloakify: userProvidedBuildOptionsFromPackageJson, ...parsedPackageJson } = readParsedPackageJson({ reactAppRootDirPath });
-
-    const userProvidedBuildOptions = {
-        ...userProvidedBuildOptionsFromPackageJson,
-        ...resolvedViteConfig?.userProvidedBuildOptions
-    };
-
-    const themeNames = (() => {
-        if (userProvidedBuildOptions.themeName === undefined) {
-            return [
-                parsedPackageJson.name
-                    .replace(/^@(.*)/, "$1")
-                    .split("/")
-                    .join("-")
-            ];
-        }
-
-        if (typeof userProvidedBuildOptions.themeName === "string") {
-            return [userProvidedBuildOptions.themeName];
-        }
-
-        return userProvidedBuildOptions.themeName;
-    })();
-
-    const reactAppBuildDirPath = (() => {
-        webpack: {
-            if (resolvedViteConfig !== undefined) {
-                break webpack;
-            }
-
-            if (userProvidedBuildOptions.reactAppBuildDirPath !== undefined) {
-                return getAbsoluteAndInOsFormatPath({
-                    "pathIsh": userProvidedBuildOptions.reactAppBuildDirPath,
-                    "cwd": reactAppRootDirPath
-                });
-            }
-
-            return pathJoin(reactAppRootDirPath, "build");
-        }
-
-        return pathJoin(reactAppRootDirPath, resolvedViteConfig.buildDir);
-    })();
-
-    const argv = parseArgv(processArgv);
-
-    const { npmWorkspaceRootDirPath } = getNpmWorkspaceRootDirPath({ reactAppRootDirPath });
-
-    return {
-        "bundler": resolvedViteConfig !== undefined ? "vite" : "webpack",
-        "isSilent": typeof argv["silent"] === "boolean" ? argv["silent"] : false,
-        "themeVersion": process.env.KEYCLOAKIFY_THEME_VERSION ?? parsedPackageJson.version ?? "0.0.0",
-        themeNames,
-        "extraThemeProperties": userProvidedBuildOptions.extraThemeProperties,
-        "groupId": (() => {
-            const fallbackGroupId = `${themeNames[0]}.keycloak`;
-
-            return (
-                process.env.KEYCLOAKIFY_GROUP_ID ??
-                userProvidedBuildOptions.groupId ??
-                (parsedPackageJson.homepage === undefined
-                    ? fallbackGroupId
-                    : urlParse(parsedPackageJson.homepage)
-                          .host?.replace(/:[0-9]+$/, "")
-                          ?.split(".")
-                          .reverse()
-                          .join(".") ?? fallbackGroupId) + ".keycloak"
-            );
-        })(),
-        "artifactId": process.env.KEYCLOAKIFY_ARTIFACT_ID ?? userProvidedBuildOptions.artifactId ?? `${themeNames[0]}-keycloak-theme`,
-        "doCreateJar": userProvidedBuildOptions.doCreateJar ?? true,
-        "loginThemeResourcesFromKeycloakVersion": userProvidedBuildOptions.loginThemeResourcesFromKeycloakVersion ?? "11.0.3",
-        reactAppRootDirPath,
-        reactAppBuildDirPath,
-        "keycloakifyBuildDirPath": (() => {
-            if (userProvidedBuildOptions.keycloakifyBuildDirPath !== undefined) {
-                return getAbsoluteAndInOsFormatPath({
-                    "pathIsh": userProvidedBuildOptions.keycloakifyBuildDirPath,
-                    "cwd": reactAppRootDirPath
-                });
-            }
-
-            return pathJoin(
-                reactAppRootDirPath,
-                resolvedViteConfig?.buildDir === undefined ? "build_keycloak" : `${resolvedViteConfig.buildDir}_keycloak`
-            );
-        })(),
-        "publicDirPath": (() => {
-            webpack: {
-                if (resolvedViteConfig !== undefined) {
-                    break webpack;
-                }
-
-                if (process.env.PUBLIC_DIR_PATH !== undefined) {
-                    return getAbsoluteAndInOsFormatPath({
-                        "pathIsh": process.env.PUBLIC_DIR_PATH,
-                        "cwd": reactAppRootDirPath
-                    });
-                }
-
-                return pathJoin(reactAppRootDirPath, "public");
-            }
-
-            return pathJoin(reactAppRootDirPath, resolvedViteConfig.publicDir);
-        })(),
-        cacheDirPath,
-        "urlPathname": (() => {
-            webpack: {
-                if (resolvedViteConfig !== undefined) {
-                    break webpack;
-                }
-
-                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;
-            }
-
-            return resolvedViteConfig.urlPathname;
-        })(),
-        "assetsDirPath": (() => {
-            webpack: {
-                if (resolvedViteConfig !== undefined) {
-                    break webpack;
-                }
-
-                return pathJoin(reactAppBuildDirPath, "static");
-            }
-
-            return pathJoin(reactAppBuildDirPath, resolvedViteConfig.assetsDir);
-        })(),
-        "doBuildRetrocompatAccountTheme": userProvidedBuildOptions.doBuildRetrocompatAccountTheme ?? true,
-        npmWorkspaceRootDirPath
-    };
-}

src/bin/keycloakify/buildOptions/getCacheDirPath.ts

@@ -1,25 +0,0 @@
-import { join as pathJoin } from "path";
-import { getAbsoluteAndInOsFormatPath } from "../../tools/getAbsoluteAndInOsFormatPath";
-import { getNpmWorkspaceRootDirPath } from "./getNpmWorkspaceRootDirPath";
-
-export function getCacheDirPath(params: { reactAppRootDirPath: string }) {
-    const { reactAppRootDirPath } = params;
-
-    const { npmWorkspaceRootDirPath } = getNpmWorkspaceRootDirPath({ reactAppRootDirPath });
-
-    const cacheDirPath = pathJoin(
-        (() => {
-            if (process.env.XDG_CACHE_HOME !== undefined) {
-                return getAbsoluteAndInOsFormatPath({
-                    "pathIsh": process.env.XDG_CACHE_HOME,
-                    "cwd": reactAppRootDirPath
-                });
-            }
-
-            return pathJoin(npmWorkspaceRootDirPath, "node_modules", ".cache");
-        })(),
-        "keycloakify"
-    );
-
-    return { cacheDirPath };
-}

src/bin/keycloakify/buildOptions/getNpmWorkspaceRootDirPath.ts

@@ -1,49 +0,0 @@
-import * as child_process from "child_process";
-import { join as pathJoin, resolve as pathResolve, sep as pathSep } from "path";
-import { assert } from "tsafe/assert";
-
-let cache:
-    | {
-          reactAppRootDirPath: string;
-          npmWorkspaceRootDirPath: string;
-      }
-    | undefined = undefined;
-
-export function getNpmWorkspaceRootDirPath(params: { reactAppRootDirPath: string }) {
-    const { reactAppRootDirPath } = params;
-
-    use_cache: {
-        if (cache === undefined || cache.reactAppRootDirPath !== reactAppRootDirPath) {
-            break use_cache;
-        }
-
-        const { npmWorkspaceRootDirPath } = cache;
-
-        return { npmWorkspaceRootDirPath };
-    }
-
-    const npmWorkspaceRootDirPath = (function callee(depth: number): string {
-        const cwd = pathResolve(pathJoin(...[reactAppRootDirPath, ...Array(depth).fill("..")]));
-
-        try {
-            child_process.execSync("npm config get", { cwd: cwd });
-        } catch (error) {
-            if (String(error).includes("ENOWORKSPACES")) {
-                assert(cwd !== pathSep, "NPM workspace not found");
-
-                return callee(depth + 1);
-            }
-
-            throw error;
-        }
-
-        return cwd;
-    })(0);
-
-    cache = {
-        reactAppRootDirPath,
-        npmWorkspaceRootDirPath
-    };
-
-    return { npmWorkspaceRootDirPath };
-}

src/bin/keycloakify/buildOptions/getReactAppRootDirPath.ts

@@ -1,23 +0,0 @@
-import parseArgv from "minimist";
-import { getAbsoluteAndInOsFormatPath } from "../../tools/getAbsoluteAndInOsFormatPath";
-
-export function getReactAppRootDirPath(params: { processArgv: string[] }) {
-    const { processArgv } = params;
-
-    const argv = parseArgv(processArgv);
-
-    const reactAppRootDirPath = (() => {
-        const arg = argv["project"] ?? argv["p"];
-
-        if (typeof arg !== "string") {
-            return process.cwd();
-        }
-
-        return getAbsoluteAndInOsFormatPath({
-            "pathIsh": arg,
-            "cwd": process.cwd()
-        });
-    })();
-
-    return { reactAppRootDirPath };
-}

src/bin/keycloakify/buildOptions/index.ts

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

src/bin/keycloakify/buildOptions/parsedPackageJson.ts

@@ -1,32 +0,0 @@
-import * as fs from "fs";
-import { assert } from "tsafe";
-import type { Equals } from "tsafe";
-import { z } from "zod";
-import { join as pathJoin } from "path";
-import { type UserProvidedBuildOptions, zUserProvidedBuildOptions } from "./UserProvidedBuildOptions";
-
-export type ParsedPackageJson = {
-    name: string;
-    version?: string;
-    homepage?: string;
-    keycloakify?: UserProvidedBuildOptions;
-};
-
-const zParsedPackageJson = z.object({
-    "name": z.string(),
-    "version": z.string().optional(),
-    "homepage": z.string().optional(),
-    "keycloakify": zUserProvidedBuildOptions.optional()
-});
-
-assert<Equals<ReturnType<(typeof zParsedPackageJson)["parse"]>, ParsedPackageJson>>();
-
-let parsedPackageJson: undefined | ParsedPackageJson;
-export function readParsedPackageJson(params: { reactAppRootDirPath: string }) {
-    const { reactAppRootDirPath } = params;
-    if (parsedPackageJson) {
-        return parsedPackageJson;
-    }
-    parsedPackageJson = zParsedPackageJson.parse(JSON.parse(fs.readFileSync(pathJoin(reactAppRootDirPath, "package.json")).toString("utf8")));
-    return parsedPackageJson;
-}

src/bin/keycloakify/buildOptions/resolvedViteConfig.ts

@@ -1,74 +0,0 @@
-import * as fs from "fs";
-import { assert } from "tsafe";
-import type { Equals } from "tsafe";
-import { z } from "zod";
-import { join as pathJoin } from "path";
-import { resolvedViteConfigJsonBasename } from "../../constants";
-import type { OptionalIfCanBeUndefined } from "../../tools/OptionalIfCanBeUndefined";
-import { UserProvidedBuildOptions, zUserProvidedBuildOptions } from "./UserProvidedBuildOptions";
-
-export type ResolvedViteConfig = {
-    buildDir: string;
-    publicDir: string;
-    assetsDir: string;
-    urlPathname: string | undefined;
-    userProvidedBuildOptions: UserProvidedBuildOptions;
-};
-
-const zResolvedViteConfig = z.object({
-    "buildDir": z.string(),
-    "publicDir": z.string(),
-    "assetsDir": z.string(),
-    "urlPathname": z.string().optional(),
-    "userProvidedBuildOptions": zUserProvidedBuildOptions
-});
-
-{
-    type Got = ReturnType<(typeof zResolvedViteConfig)["parse"]>;
-    type Expected = OptionalIfCanBeUndefined<ResolvedViteConfig>;
-
-    assert<Equals<Got, Expected>>();
-}
-
-export function readResolvedViteConfig(params: { cacheDirPath: string }): {
-    resolvedViteConfig: ResolvedViteConfig | undefined;
-} {
-    const { cacheDirPath } = params;
-
-    const resolvedViteConfigJsonFilePath = pathJoin(cacheDirPath, resolvedViteConfigJsonBasename);
-
-    if (!fs.existsSync(resolvedViteConfigJsonFilePath)) {
-        return { "resolvedViteConfig": undefined };
-    }
-
-    const resolvedViteConfig = (() => {
-        if (!fs.existsSync(resolvedViteConfigJsonFilePath)) {
-            throw new Error("Missing Keycloakify Vite plugin output.");
-        }
-
-        let out: ResolvedViteConfig;
-
-        try {
-            out = JSON.parse(fs.readFileSync(resolvedViteConfigJsonFilePath).toString("utf8"));
-        } catch {
-            throw new Error("The output of the Keycloakify Vite plugin is not a valid JSON.");
-        }
-
-        try {
-            const zodParseReturn = zResolvedViteConfig.parse(out);
-
-            // So that objectKeys from tsafe return the expected result no matter what.
-            Object.keys(zodParseReturn)
-                .filter(key => !(key in out))
-                .forEach(key => {
-                    delete (out as any)[key];
-                });
-        } catch {
-            throw new Error("The output of the Keycloakify Vite plugin do not match the expected schema.");
-        }
-
-        return out;
-    })();
-
-    return { resolvedViteConfig };
-}

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -1,424 +1,202 @@
 <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>
-
         }
-    };
-
-    <#if account??>
-        out["url"]["getLogoutUrl"] = function () {
-            <#attempt>
-                return "${url.getLogoutUrl()}";
-            <#recover>
-            </#attempt>
-        };
-    </#if>
-
-    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) {
-
+        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);
+            }
+        }
     }
+};
 
-    return out;
+out["keycloakifyVersion"] = "KEYCLOAKIFY_VERSION_xEdKd3xEdr";
+out["themeVersion"] = "KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx";
+out["themeType"] = "KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr";
+out["themeName"] = "KEYCLOAKIFY_THEME_NAME_cXxKd3xEer";
+out["pageId"] = "${pageId}";
 
-})()
+try {
+    out["url"]["resourcesCommonPath"] = out["url"]["resourcesPath"] + "/" + "RESOURCES_COMMON_cLsLsMrtDkpVv";
+} catch(error) { }
+
+<#if profile?? && profile.attributes??>
+    out["lOCALIZATION_REALM_OVERRIDES_USER_PROFILE_PROPERTY_KEY_aaGLsPgGIdeeX"] = {
+        <#list profile.attributes as attribute>
+            <#if attribute.annotations?? && attribute.displayName??>
+                "${attribute.displayName}": decodeHtmlEntities("${advancedMsg(attribute.displayName)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputHelperTextBefore??>
+                "${attribute.annotations.inputHelperTextBefore}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextBefore)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputHelperTextAfter??>
+                "${attribute.annotations.inputHelperTextAfter}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextAfter)?js_string}"),
+            </#if>
+            <#if attribute.annotations.inputTypePlaceholder??>
+                "${attribute.annotations.inputTypePlaceholder}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputTypePlaceholder)?js_string}"),
+            </#if>
+        </#list>
+    };
+</#if>
+
+return out;
+
+function decodeHtmlEntities(htmlStr){
+    var element = decodeHtmlEntities.element;
+    if (!element) {
+        element = document.createElement("textarea");
+        decodeHtmlEntities.element = element;
+    }
+    element.innerHTML = htmlStr;
+    return element.value;
+}
+
+})();
 <#function ftl_object_to_js_code_declaring_an_object object path>
 
         <#local isHash = "">
@@ -442,7 +220,6 @@
                 <#return "ABORT: We can't list keys on this object">
             </#attempt>
 
-
             <#local out_seq = []>
 
             <#list keys as key>
@@ -489,33 +266,53 @@
                         !["name", "displayName", "displayNameHtml", "internationalizationEnabled", "registrationEmailAsUsername" ]?seq_contains(key)
                     ) || (
                         "applications.ftl" == pageId &&
-                        is_subpath(path, ["applications", "applications"]) &&
                         ( 
                             key == "realm" || 
                             key == "container" 
-                        )
+                        ) &&
+                        is_subpath(path, ["applications", "applications"])
                     ) || (
-                        are_same_path(path, ["user"]) &&
-                        key == "delegateForUpdate"
+                        key == "delegateForUpdate" &&
+                        are_same_path(path, ["user"])
+                    ) || (
+                        <#-- Security audit forwarded by Garth (Gmail) -->
+                        key == "saml.signing.private.key" &&
+                        are_same_path(path, ["client", "attributes"])
+                    ) || (
+                        <#-- See: https://github.com/keycloakify/keycloakify/issues/534 -->
+                        key == "password" &&
+                        are_same_path(path, ["login"])
+                    ) || (
+                        <#-- Remove realmAttributes added by https://github.com/jcputney/keycloak-theme-additional-info-extension for peace of mind. -->
+                        key == "realmAttributes" &&
+                        are_same_path(path, [])
+                    ) || (
+                        <#-- attributesByName adds a lot of noise to the output and is not needed -->
+                        key == "attributes" &&
+                        are_same_path(path, ["profile"]) 
+                    ) || (
+                        <#-- We already have the attributes in profile speedup the rendering by filtering it out from the register object -->
+                        (key == "attributes" || key == "attributesByName") &&
+                        are_same_path(path, ["register"])
                     )
                 >
-                    <#local out_seq += ["/*If you need '" + path?join(".") + "." + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
+                    <#local out_seq += ["/*" + path?join(".") + "." + key + " excluded*/"]>
                     <#continue>
                 </#if>
 
                 <#-- https://github.com/keycloakify/keycloakify/discussions/406 -->
                 <#if (
-                    ["register.ftl", "info.ftl", "login.ftl", "login-update-password.ftl", "login-oauth2-device-verify-user-code.ftl"]?seq_contains(pageId) && 
+                    ["register.ftl", "register-user-profile.ftl", "info.ftl", "login.ftl", "login-update-password.ftl", "login-oauth2-device-verify-user-code.ftl"]?seq_contains(pageId) && 
                     key == "attemptedUsername" && are_same_path(path, ["auth"])
                 )>
                     <#attempt>
                         <#-- https://github.com/keycloak/keycloak/blob/3a2bf0c04bcde185e497aaa32d0bb7ab7520cf4a/themes/src/main/resources/theme/base/login/template.ftl#L63 -->
                         <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
-                            <#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
+                            <#local out_seq += ["/*" + path?join(".") + "." + key + " excluded*/"]>
                             <#continue>
                         </#if>
                     <#recover>
-                        <#local out_seq += ["/*Testing if attemptedUsername should be skipped throwed an exception */"]>
+                        <#local out_seq += ["/*Accessing attemptedUsername throwed an exception */"]>
                     </#attempt>
                 </#if>
                 
@@ -591,6 +388,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>
 
@@ -660,12 +477,23 @@
             <#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 is_subpath path searchedPath>

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -4,10 +4,16 @@ import { generateCssCodeToDefineGlobals } from "../replacers/replaceImportsInCss
 import { replaceImportsInInlineCssCode } from "../replacers/replaceImportsInInlineCssCode";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
-import { objectKeys } from "tsafe/objectKeys";
-import type { BuildOptions } from "../buildOptions";
+import type { BuildOptions } from "../../shared/buildOptions";
 import { assert } from "tsafe/assert";
-import { type ThemeType, nameOfTheGlobal, basenameOfTheKeycloakifyResourcesDir, resources_common } from "../../constants";
+import {
+    type ThemeType,
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir,
+    resources_common,
+    nameOfTheLocalizationRealmOverridesUserProfileProperty
+} from "../../shared/constants";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
 
 export type BuildOptionsLike = {
     bundler: "vite" | "webpack";
@@ -28,7 +34,15 @@ export function generateFtlFilesCodeFactory(params: {
     themeType: ThemeType;
     fieldNames: string[];
 }) {
-    const { themeName, cssGlobalsToDefine, indexHtmlCode, buildOptions, keycloakifyVersion, themeType, fieldNames } = params;
+    const {
+        themeName,
+        cssGlobalsToDefine,
+        indexHtmlCode,
+        buildOptions,
+        keycloakifyVersion,
+        themeType,
+        fieldNames
+    } = params;
 
     const $ = cheerio.load(indexHtmlCode);
 
@@ -38,7 +52,10 @@ export function generateFtlFilesCodeFactory(params: {
 
             assert(jsCode !== null);
 
-            const { fixedJsCode } = replaceImportsInJsCode({ jsCode, buildOptions });
+            const { fixedJsCode } = replaceImportsInJsCode({
+                jsCode,
+                buildOptions
+            });
 
             $(element).text(fixedJsCode);
         });
@@ -72,7 +89,9 @@ export function generateFtlFilesCodeFactory(params: {
                 $(element).attr(
                     attrName,
                     href.replace(
-                        new RegExp(`^${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`),
+                        new RegExp(
+                            `^${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`
+                        ),
                         `\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/`
                     )
                 );
@@ -96,34 +115,37 @@ 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", themeName)
-            .replace("RESOURCES_COMMON_cLsLsMrtDkpVv", resources_common),
-        "<!-- 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", buildOptions.themeVersion)
+        .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
+        .replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", themeName)
+        .replace("RESOURCES_COMMON_cLsLsMrtDkpVv", resources_common)
+        .replace(
+            "lOCALIZATION_REALM_OVERRIDES_USER_PROFILE_PROPERTY_KEY_aaGLsPgGIdeeX",
+            nameOfTheLocalizationRealmOverridesUserProfileProperty
+        );
+    const ftlObjectToJsCodeDeclaringAnObjectPlaceholder =
+        '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }';
 
     $("head").prepend(
-        [
-            "<script>",
-            `    window.${nameOfTheGlobal}= ${objectKeys(replaceValueBySearchValue)[0]};`,
-            "</script>",
-            "",
-            objectKeys(replaceValueBySearchValue)[1]
-        ].join("\n")
+        `<script>\nwindow.${nameOfTheGlobal}=${ftlObjectToJsCodeDeclaringAnObjectPlaceholder}</script>`
     );
 
     // Remove part of the document marked as ignored.
@@ -132,7 +154,9 @@ export function generateFtlFilesCodeFactory(params: {
 
         startTags.each((...[, startTag]) => {
             const $startTag = $(startTag);
-            const $endTag = $startTag.nextAll('meta[name="keycloakify-ignore-end"]').first();
+            const $endTag = $startTag
+                .nextAll('meta[name="keycloakify-ignore-end"]')
+                .first();
 
             if ($endTag.length) {
                 let currentNode = $startTag.next();
@@ -159,9 +183,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,33 +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-oauth2-device-verify-user-code.ftl",
-    "login-oauth-grant.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/generatePom.ts

@@ -1,70 +0,0 @@
-import { assert } from "tsafe/assert";
-import { Reflect } from "tsafe/Reflect";
-import type { BuildOptions } from "./buildOptions";
-
-type BuildOptionsLike = {
-    groupId: string;
-    artifactId: string;
-    themeVersion: string;
-    keycloakifyBuildDirPath: string;
-};
-
-{
-    const buildOptions = Reflect<BuildOptions>();
-
-    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
-}
-
-export function generatePom(params: { buildOptions: BuildOptionsLike }) {
-    const { buildOptions } = params;
-
-    const { pomFileCode } = (function generatePomFileCode(): {
-        pomFileCode: string;
-    } {
-        const pomFileCode = [
-            `<?xml version="1.0"?>`,
-            `<project xmlns="http://maven.apache.org/POM/4.0.0"`,
-            `	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"`,
-            `	 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">`,
-            `  <modelVersion>4.0.0</modelVersion>`,
-            `	<groupId>${buildOptions.groupId}</groupId>`,
-            `	<artifactId>${buildOptions.artifactId}</artifactId>`,
-            `	<version>${buildOptions.themeVersion}</version>`,
-            `	<name>${buildOptions.artifactId}</name>`,
-            `  <description />`,
-            `  <packaging>jar</packaging>`,
-            `  <properties>`,
-            `    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>`,
-            `  </properties>`,
-            `  <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>`,
-            `    <dependency>`,
-            `      <groupId>io.phasetwo.keycloak</groupId>`,
-            `      <artifactId>keycloak-account-v1</artifactId>`,
-            `      <version>0.1</version>`,
-            `    </dependency>`,
-            `  </dependencies>`,
-            `</project>`
-        ].join("\n");
-
-        return { pomFileCode };
-    })();
-
-    return { pomFileCode };
-}

src/bin/keycloakify/generateSrcMainResources/bringInAccountV1.ts

@@ -1,55 +1,56 @@
 import * as fs from "fs";
 import { join as pathJoin } from "path";
 import { assert } from "tsafe/assert";
-import { Reflect } from "tsafe/Reflect";
-import type { BuildOptions } from "../buildOptions";
-import { resources_common, lastKeycloakVersionWithAccountV1, accountV1ThemeName } from "../../constants";
-import { downloadBuiltinKeycloakTheme } from "../../download-builtin-keycloak-theme";
+import type { BuildOptions } from "../../shared/buildOptions";
+import {
+    resources_common,
+    lastKeycloakVersionWithAccountV1,
+    accountV1ThemeName
+} from "../../shared/constants";
+import { downloadKeycloakDefaultTheme } from "../../shared/downloadKeycloakDefaultTheme";
 import { transformCodebase } from "../../tools/transformCodebase";
-import { rmSync } from "../../tools/fs.rmSync";
 
 type BuildOptionsLike = {
-    keycloakifyBuildDirPath: string;
     cacheDirPath: string;
     npmWorkspaceRootDirPath: string;
+    keycloakifyBuildDirPath: string;
 };
 
-{
-    const buildOptions = Reflect<BuildOptions>();
-
-    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
-}
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
 
 export async function bringInAccountV1(params: { buildOptions: BuildOptionsLike }) {
     const { buildOptions } = params;
 
-    const builtinKeycloakThemeTmpDirPath = pathJoin(buildOptions.keycloakifyBuildDirPath, "..", "tmp_yxdE2_builtin_keycloak_theme");
-
-    await downloadBuiltinKeycloakTheme({
-        "destDirPath": builtinKeycloakThemeTmpDirPath,
-        "keycloakVersion": lastKeycloakVersionWithAccountV1,
+    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
+        keycloakVersion: lastKeycloakVersionWithAccountV1,
         buildOptions
     });
 
-    const accountV1DirPath = pathJoin(buildOptions.keycloakifyBuildDirPath, "src", "main", "resources", "theme", accountV1ThemeName, "account");
+    const accountV1DirPath = pathJoin(
+        buildOptions.keycloakifyBuildDirPath,
+        "src",
+        "main",
+        "resources",
+        "theme",
+        accountV1ThemeName,
+        "account"
+    );
 
     transformCodebase({
-        "srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "base", "account"),
-        "destDirPath": accountV1DirPath
+        srcDirPath: pathJoin(defaultThemeDirPath, "base", "account"),
+        destDirPath: accountV1DirPath
     });
 
     transformCodebase({
-        "srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "keycloak", "account", "resources"),
-        "destDirPath": pathJoin(accountV1DirPath, "resources")
+        srcDirPath: pathJoin(defaultThemeDirPath, "keycloak", "account", "resources"),
+        destDirPath: pathJoin(accountV1DirPath, "resources")
     });
 
     transformCodebase({
-        "srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "keycloak", "common", "resources"),
-        "destDirPath": pathJoin(accountV1DirPath, "resources", resources_common)
+        srcDirPath: pathJoin(defaultThemeDirPath, "keycloak", "common", "resources"),
+        destDirPath: pathJoin(accountV1DirPath, "resources", resources_common)
     });
 
-    rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true });
-
     fs.writeFileSync(
         pathJoin(accountV1DirPath, "theme.properties"),
         Buffer.from(
@@ -63,8 +64,13 @@ export async function bringInAccountV1(params: { buildOptions: BuildOptionsLike
                         "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}`
+                        ...[
+                            "patternfly.min.css",
+                            "patternfly-additions.min.css",
+                            "patternfly-additions.min.css"
+                        ].map(
+                            fileBasename =>
+                                `${resources_common}/node_modules/patternfly/dist/css/${fileBasename}`
                         )
                     ].join(" "),
                 "",

src/bin/keycloakify/generateSrcMainResources/generateMessageProperties.ts

@@ -1,4 +1,4 @@
-import type { ThemeType } from "../../constants";
+import type { ThemeType } from "../../shared/constants";
 import { crawl } from "../../tools/crawl";
 import { join as pathJoin } from "path";
 import { readFileSync } from "fs";
@@ -16,8 +16,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 +34,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 +45,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 +74,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}`);
@@ -140,7 +151,14 @@ export function generateMessageProperties(params: {
 
         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")
         });
     }
 
@@ -157,22 +175,56 @@ function toUTF16(codePoint: number): string {
         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");
+        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
+// Escapes special characters for use in a .properties file
 function escapeString(str: string): string {
     let escapedStr = "";
     for (const char of [...str]) {
         const codePoint = char.codePointAt(0);
         if (!codePoint) continue;
-        if (char === "'") {
-            escapedStr += "''"; // double single quotes
-        } else if (codePoint > 0x7f) {
-            escapedStr += toUTF16(codePoint); // non-ascii characters
-        } else {
-            escapedStr += char;
+
+        switch (char) {
+            case "\n":
+                escapedStr += "\\n";
+                break;
+            case "\r":
+                escapedStr += "\\r";
+                break;
+            case "\t":
+                escapedStr += "\\t";
+                break;
+            case "\\":
+                escapedStr += "\\\\";
+                break;
+            case ":":
+                escapedStr += "\\:";
+                break;
+            case "=":
+                escapedStr += "\\=";
+                break;
+            case "#":
+                escapedStr += "\\#";
+                break;
+            case "!":
+                escapedStr += "\\!";
+                break;
+            case "'":
+                escapedStr += "''";
+                break;
+            default:
+                if (codePoint > 0x7f) {
+                    escapedStr += toUTF16(codePoint); // Non-ASCII characters
+                } else {
+                    escapedStr += char; // ASCII character needs no escape
+                }
         }
     }
     return escapedStr;

src/bin/keycloakify/generateSrcMainResources/generateSrcMainResources.ts

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

src/bin/keycloakify/generateSrcMainResources/generateSrcMainResourcesForMainTheme.ts

@@ -1,62 +1,70 @@
 import { transformCodebase } from "../../tools/transformCodebase";
 import * as fs from "fs";
-import { join as pathJoin, basename as pathBasename, resolve as pathResolve, dirname as pathDirname } from "path";
+import { join as pathJoin, resolve as pathResolve } from "path";
 import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
 import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
-import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds } from "../generateFtl";
+import { generateFtlFilesCodeFactory } from "../generateFtl";
 import {
     type ThemeType,
     lastKeycloakVersionWithAccountV1,
     keycloak_resources,
-    retrocompatPostfix,
     accountV1ThemeName,
-    basenameOfTheKeycloakifyResourcesDir
-} from "../../constants";
+    basenameOfTheKeycloakifyResourcesDir,
+    loginThemePageIds,
+    accountThemePageIds
+} from "../../shared/constants";
 import { isInside } from "../../tools/isInside";
-import type { BuildOptions } from "../buildOptions";
+import type { BuildOptions } from "../../shared/buildOptions";
 import { assert, type Equals } from "tsafe/assert";
-import { downloadKeycloakStaticResources } from "./downloadKeycloakStaticResources";
+import { downloadKeycloakStaticResources } from "../../shared/downloadKeycloakStaticResources";
 import { readFieldNameUsage } from "./readFieldNameUsage";
 import { readExtraPagesNames } from "./readExtraPageNames";
 import { generateMessageProperties } from "./generateMessageProperties";
 import { bringInAccountV1 } from "./bringInAccountV1";
+import { getThemeSrcDirPath } from "../../shared/getThemeSrcDirPath";
 import { rmSync } from "../../tools/fs.rmSync";
+import { readThisNpmPackageVersion } from "../../tools/readThisNpmPackageVersion";
+import {
+    writeMetaInfKeycloakThemes,
+    type MetaInfKeycloakTheme
+} from "../../shared/metaInfKeycloakThemes";
+import { objectEntries } from "tsafe/objectEntries";
 
 export type BuildOptionsLike = {
     bundler: "vite" | "webpack";
     extraThemeProperties: string[] | undefined;
     themeVersion: string;
     loginThemeResourcesFromKeycloakVersion: string;
-    keycloakifyBuildDirPath: string;
     reactAppBuildDirPath: string;
     cacheDirPath: string;
     assetsDirPath: string;
     urlPathname: string | undefined;
-    doBuildRetrocompatAccountTheme: boolean;
-    themeNames: string[];
     npmWorkspaceRootDirPath: string;
+    reactAppRootDirPath: string;
+    keycloakifyBuildDirPath: string;
 };
 
 assert<BuildOptions extends BuildOptionsLike ? true : false>();
 
-export async function generateTheme(params: {
+export async function generateSrcMainResourcesForMainTheme(params: {
     themeName: string;
-    themeSrcDirPath: string;
-    keycloakifySrcDirPath: string;
     buildOptions: BuildOptionsLike;
-    keycloakifyVersion: string;
 }): Promise<void> {
-    const { themeName, themeSrcDirPath, keycloakifySrcDirPath, buildOptions, keycloakifyVersion } = params;
+    const { themeName, buildOptions } = params;
 
-    const getThemeTypeDirPath = (params: { themeType: ThemeType | "email"; isRetrocompat?: true }) => {
-        const { themeType, isRetrocompat = false } = params;
+    const { themeSrcDirPath } = getThemeSrcDirPath({
+        reactAppRootDirPath: buildOptions.reactAppRootDirPath
+    });
+
+    const getThemeTypeDirPath = (params: { themeType: ThemeType | "email" }) => {
+        const { themeType } = params;
         return pathJoin(
             buildOptions.keycloakifyBuildDirPath,
             "src",
             "main",
             "resources",
             "theme",
-            `${themeName}${isRetrocompat ? retrocompatPostfix : ""}`,
+            themeName,
             themeType
         );
     };
@@ -64,9 +72,9 @@ export async function generateTheme(params: {
     const cssGlobalsToDefine: Record<string, string> = {};
 
     const implementedThemeTypes: Record<ThemeType | "email", boolean> = {
-        "login": false,
-        "account": false,
-        "email": false
+        login: false,
+        account: false,
+        email: false
     };
 
     for (const themeType of ["login", "account"] as const) {
@@ -79,18 +87,22 @@ export async function generateTheme(params: {
         const themeTypeDirPath = getThemeTypeDirPath({ themeType });
 
         apply_replacers_and_move_to_theme_resources: {
-            const destDirPath = pathJoin(themeTypeDirPath, "resources", basenameOfTheKeycloakifyResourcesDir);
+            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 });
+            rmSync(destDirPath, { recursive: true, force: true });
 
             if (themeType === "account" && implementedThemeTypes.login) {
-                // NOTE: We prevend doing it twice, it has been done for the login theme.
+                // NOTE: We prevent doing it twice, it has been done for the login theme.
 
                 transformCodebase({
-                    "srcDirPath": pathJoin(
+                    srcDirPath: pathJoin(
                         getThemeTypeDirPath({
-                            "themeType": "login"
+                            themeType: "login"
                         }),
                         "resources",
                         basenameOfTheKeycloakifyResourcesDir
@@ -102,14 +114,17 @@ export async function generateTheme(params: {
             }
 
             transformCodebase({
-                "srcDirPath": buildOptions.reactAppBuildDirPath,
+                srcDirPath: buildOptions.reactAppBuildDirPath,
                 destDirPath,
-                "transformSourceCode": ({ filePath, sourceCode }) => {
+                transformSourceCode: ({ filePath, sourceCode }) => {
                     //NOTE: Prevent cycles, excludes the folder we generated for debug in public/
                     // This should not happen if users follow the new instruction setup but we keep it for retrocompatibility.
                     if (
                         isInside({
-                            "dirPath": pathJoin(buildOptions.reactAppBuildDirPath, keycloak_resources),
+                            dirPath: pathJoin(
+                                buildOptions.reactAppBuildDirPath,
+                                keycloak_resources
+                            ),
                             filePath
                         })
                     ) {
@@ -117,40 +132,50 @@ export async function generateTheme(params: {
                     }
 
                     if (/\.css?$/i.test(filePath)) {
-                        const { cssGlobalsToDefine: cssGlobalsToDefineForThisFile, fixedCssCode } = replaceImportsInCssCode({
-                            "cssCode": sourceCode.toString("utf8")
+                        const {
+                            cssGlobalsToDefine: cssGlobalsToDefineForThisFile,
+                            fixedCssCode
+                        } = replaceImportsInCssCode({
+                            cssCode: sourceCode.toString("utf8")
                         });
 
-                        Object.entries(cssGlobalsToDefineForThisFile).forEach(([key, value]) => {
-                            cssGlobalsToDefine[key] = value;
-                        });
+                        Object.entries(cssGlobalsToDefineForThisFile).forEach(
+                            ([key, value]) => {
+                                cssGlobalsToDefine[key] = value;
+                            }
+                        );
 
-                        return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
+                        return {
+                            modifiedSourceCode: Buffer.from(fixedCssCode, "utf8")
+                        };
                     }
 
                     if (/\.js?$/i.test(filePath)) {
                         const { fixedJsCode } = replaceImportsInJsCode({
-                            "jsCode": sourceCode.toString("utf8"),
+                            jsCode: sourceCode.toString("utf8"),
                             buildOptions
                         });
 
-                        return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
+                        return {
+                            modifiedSourceCode: Buffer.from(fixedJsCode, "utf8")
+                        };
                     }
 
-                    return { "modifiedSourceCode": sourceCode };
+                    return { modifiedSourceCode: sourceCode };
                 }
             });
         }
 
         const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
             themeName,
-            "indexHtmlCode": fs.readFileSync(pathJoin(buildOptions.reactAppBuildDirPath, "index.html")).toString("utf8"),
+            indexHtmlCode: fs
+                .readFileSync(pathJoin(buildOptions.reactAppBuildDirPath, "index.html"))
+                .toString("utf8"),
             cssGlobalsToDefine,
             buildOptions,
-            keycloakifyVersion,
+            keycloakifyVersion: readThisNpmPackageVersion(),
             themeType,
-            "fieldNames": readFieldNameUsage({
-                keycloakifySrcDirPath,
+            fieldNames: readFieldNameUsage({
                 themeSrcDirPath,
                 themeType
             })
@@ -172,9 +197,12 @@ export async function generateTheme(params: {
         ].forEach(pageId => {
             const { ftlCode } = generateFtlFilesCode({ pageId });
 
-            fs.mkdirSync(themeTypeDirPath, { "recursive": true });
+            fs.mkdirSync(themeTypeDirPath, { recursive: true });
 
-            fs.writeFileSync(pathJoin(themeTypeDirPath, pageId), Buffer.from(ftlCode, "utf8"));
+            fs.writeFileSync(
+                pathJoin(themeTypeDirPath, pageId),
+                Buffer.from(ftlCode, "utf8")
+            );
         });
 
         generateMessageProperties({
@@ -183,15 +211,23 @@ export async function generateTheme(params: {
         }).forEach(({ languageTag, propertiesFileSource }) => {
             const messagesDirPath = pathJoin(themeTypeDirPath, "messages");
 
-            fs.mkdirSync(pathJoin(themeTypeDirPath, "messages"), { "recursive": true });
+            fs.mkdirSync(pathJoin(themeTypeDirPath, "messages"), {
+                recursive: true
+            });
 
-            const propertiesFilePath = pathJoin(messagesDirPath, `messages_${languageTag}.properties`);
+            const propertiesFilePath = pathJoin(
+                messagesDirPath,
+                `messages_${languageTag}.properties`
+            );
 
-            fs.writeFileSync(propertiesFilePath, Buffer.from(propertiesFileSource, "utf8"));
+            fs.writeFileSync(
+                propertiesFilePath,
+                Buffer.from(propertiesFileSource, "utf8")
+            );
         });
 
         await downloadKeycloakStaticResources({
-            "keycloakVersion": (() => {
+            keycloakVersion: (() => {
                 switch (themeType) {
                     case "account":
                         return lastKeycloakVersionWithAccountV1;
@@ -199,7 +235,7 @@ export async function generateTheme(params: {
                         return buildOptions.loginThemeResourcesFromKeycloakVersion;
                 }
             })(),
-            "themeDirPath": pathResolve(pathJoin(themeTypeDirPath, "..")),
+            themeDirPath: pathResolve(pathJoin(themeTypeDirPath, "..")),
             themeType,
             buildOptions
         });
@@ -222,25 +258,6 @@ export async function generateTheme(params: {
                 "utf8"
             )
         );
-
-        if (themeType === "account" && buildOptions.doBuildRetrocompatAccountTheme) {
-            transformCodebase({
-                "srcDirPath": themeTypeDirPath,
-                "destDirPath": getThemeTypeDirPath({ themeType, "isRetrocompat": true }),
-                "transformSourceCode": ({ filePath, sourceCode }) => {
-                    if (pathBasename(filePath) === "theme.properties") {
-                        return {
-                            "modifiedSourceCode": Buffer.from(
-                                sourceCode.toString("utf8").replace(`parent=${accountV1ThemeName}`, "parent=keycloak"),
-                                "utf8"
-                            )
-                        };
-                    }
-
-                    return { "modifiedSourceCode": sourceCode };
-                }
-            });
-        }
     }
 
     email: {
@@ -253,79 +270,37 @@ export async function generateTheme(params: {
         implementedThemeTypes.email = true;
 
         transformCodebase({
-            "srcDirPath": emailThemeSrcDirPath,
-            "destDirPath": getThemeTypeDirPath({ "themeType": "email" })
+            srcDirPath: emailThemeSrcDirPath,
+            destDirPath: getThemeTypeDirPath({ themeType: "email" })
         });
     }
 
-    const parsedKeycloakThemeJson: { themes: { name: string; types: string[] }[] } = { "themes": [] };
-
-    buildOptions.themeNames.forEach(themeName =>
-        parsedKeycloakThemeJson.themes.push({
-            "name": themeName,
-            "types": Object.entries(implementedThemeTypes)
-                .filter(([, isImplemented]) => isImplemented)
-                .map(([themeType]) => themeType)
-        })
-    );
-
-    account_specific_extra_work: {
-        if (!implementedThemeTypes.account) {
-            break account_specific_extra_work;
-        }
-
-        await bringInAccountV1({ buildOptions });
-
-        parsedKeycloakThemeJson.themes.push({
-            "name": accountV1ThemeName,
-            "types": ["account"]
+    if (implementedThemeTypes.account) {
+        await bringInAccountV1({
+            buildOptions
         });
-
-        add_retrocompat_account_theme: {
-            if (!buildOptions.doBuildRetrocompatAccountTheme) {
-                break add_retrocompat_account_theme;
-            }
-
-            transformCodebase({
-                "srcDirPath": getThemeTypeDirPath({ "themeType": "account" }),
-                "destDirPath": getThemeTypeDirPath({ "themeType": "account", "isRetrocompat": true }),
-                "transformSourceCode": ({ filePath, sourceCode }) => {
-                    if (pathBasename(filePath) === "theme.properties") {
-                        return {
-                            "modifiedSourceCode": Buffer.from(
-                                sourceCode.toString("utf8").replace(`parent=${accountV1ThemeName}`, "parent=keycloak"),
-                                "utf8"
-                            )
-                        };
-                    }
-
-                    return { "modifiedSourceCode": sourceCode };
-                }
-            });
-
-            buildOptions.themeNames.forEach(themeName =>
-                parsedKeycloakThemeJson.themes.push({
-                    "name": `${themeName}${retrocompatPostfix}`,
-                    "types": ["account"]
-                })
-            );
-        }
     }
 
     {
-        const keycloakThemeJsonFilePath = pathJoin(
-            buildOptions.keycloakifyBuildDirPath,
-            "src",
-            "main",
-            "resources",
-            "META-INF",
-            "keycloak-themes.json"
-        );
+        const metaInfKeycloakThemes: MetaInfKeycloakTheme = { themes: [] };
 
-        try {
-            fs.mkdirSync(pathDirname(keycloakThemeJsonFilePath));
-        } catch {}
+        metaInfKeycloakThemes.themes.push({
+            name: themeName,
+            types: objectEntries(implementedThemeTypes)
+                .filter(([, isImplemented]) => isImplemented)
+                .map(([themeType]) => themeType)
+        });
 
-        fs.writeFileSync(keycloakThemeJsonFilePath, Buffer.from(JSON.stringify(parsedKeycloakThemeJson, null, 2), "utf8"));
+        if (implementedThemeTypes.account) {
+            metaInfKeycloakThemes.themes.push({
+                name: accountV1ThemeName,
+                types: ["account"]
+            });
+        }
+
+        writeMetaInfKeycloakThemes({
+            keycloakifyBuildDirPath: buildOptions.keycloakifyBuildDirPath,
+            metaInfKeycloakThemes
+        });
     }
 }

src/bin/keycloakify/generateSrcMainResources/generateSrcMainResourcesForThemeVariant.ts

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

src/bin/keycloakify/generateSrcMainResources/index.ts

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

src/bin/keycloakify/generateSrcMainResources/readExtraPageNames.ts

@@ -1,20 +1,28 @@
 import { crawl } from "../../tools/crawl";
-import { 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 } from "../../constants";
+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);
@@ -25,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,32 +1,40 @@
 import * as fs from "fs";
-import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
+import {
+    join as pathJoin,
+    relative as pathRelative,
+    basename as pathBasename
+} from "path";
 import { assert } from "tsafe/assert";
-import { Reflect } from "tsafe/Reflect";
-import type { BuildOptions } from "./buildOptions";
+import type { BuildOptions } from "../shared/buildOptions";
+import { accountV1ThemeName } from "../shared/constants";
 
 export type BuildOptionsLike = {
     keycloakifyBuildDirPath: string;
+    themeNames: string[];
 };
 
-{
-    const buildOptions = Reflect<BuildOptions>();
-
-    assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
-}
+assert<BuildOptions extends BuildOptionsLike ? true : false>();
 
 generateStartKeycloakTestingContainer.basename = "start_keycloak_testing_container.sh";
 
 const containerName = "keycloak-testing-container";
+const keycloakVersion = "24.0.4";
 
 /** Files for being able to run a hot reload keycloak container */
-export function generateStartKeycloakTestingContainer(params: { jarFilePath: string; keycloakVersion: string; buildOptions: BuildOptionsLike }) {
-    const { jarFilePath, keycloakVersion, buildOptions } = params;
+export function generateStartKeycloakTestingContainer(params: {
+    jarFilePath: string;
+    doesImplementAccountTheme: boolean;
+    buildOptions: BuildOptionsLike;
+}) {
+    const { jarFilePath, doesImplementAccountTheme, buildOptions } = params;
 
     const themeRelativeDirPath = pathJoin("src", "main", "resources", "theme");
-    const themeDirPath = pathJoin(buildOptions.keycloakifyBuildDirPath, themeRelativeDirPath);
 
     fs.writeFileSync(
-        pathJoin(buildOptions.keycloakifyBuildDirPath, generateStartKeycloakTestingContainer.basename),
+        pathJoin(
+            buildOptions.keycloakifyBuildDirPath,
+            generateStartKeycloakTestingContainer.basename
+        ),
         Buffer.from(
             [
                 "#!/usr/bin/env bash",
@@ -44,22 +52,23 @@ export function generateStartKeycloakTestingContainer(params: { jarFilePath: str
                     "$(pwd)",
                     pathRelative(buildOptions.keycloakifyBuildDirPath, jarFilePath)
                 )}":"/opt/keycloak/providers/${pathBasename(jarFilePath)}" \\`,
-                ...fs
-                    .readdirSync(themeDirPath)
-                    .filter(name => fs.lstatSync(pathJoin(themeDirPath, name)).isDirectory())
-                    .map(
-                        themeName =>
-                            `   -v "${pathJoin("$(pwd)", themeRelativeDirPath, themeName).replace(
-                                /\\/g,
-                                "/"
-                            )}":"/opt/keycloak/themes/${themeName}":rw \\`
-                    ),
+                [
+                    ...(doesImplementAccountTheme ? [accountV1ThemeName] : []),
+                    ...buildOptions.themeNames
+                ].map(
+                    themeName =>
+                        `   -v "${pathJoin(
+                            "$(pwd)",
+                            themeRelativeDirPath,
+                            themeName
+                        ).replace(/\\/g, "/")}":"/opt/keycloak/themes/${themeName}":rw \\`
+                ),
                 `   -it quay.io/keycloak/keycloak:${keycloakVersion} \\`,
-                `   start-dev --features=declarative-user-profile`,
+                `   start-dev`,
                 ""
             ].join("\n"),
             "utf8"
         ),
-        { "mode": 0o755 }
+        { mode: 0o755 }
     );
 }

src/bin/keycloakify/generateTheme/downloadKeycloakStaticResources.ts

@@ -1,49 +0,0 @@
-import { transformCodebase } from "../../tools/transformCodebase";
-import { join as pathJoin } from "path";
-import { downloadBuiltinKeycloakTheme } from "../../download-builtin-keycloak-theme";
-import { resources_common, type ThemeType } from "../../constants";
-import { BuildOptions } from "../buildOptions";
-import { assert } from "tsafe/assert";
-import * as crypto from "crypto";
-import { rmSync } from "../../tools/fs.rmSync";
-
-export type BuildOptionsLike = {
-    cacheDirPath: string;
-    npmWorkspaceRootDirPath: string;
-};
-
-assert<BuildOptions extends BuildOptionsLike ? true : false>();
-
-export async function downloadKeycloakStaticResources(params: {
-    themeType: ThemeType;
-    themeDirPath: string;
-    keycloakVersion: string;
-    buildOptions: BuildOptionsLike;
-}) {
-    const { themeType, themeDirPath, keycloakVersion, buildOptions } = params;
-
-    const tmpDirPath = pathJoin(
-        themeDirPath,
-        `tmp_suLeKsxId_${crypto.createHash("sha256").update(`${themeType}-${keycloakVersion}`).digest("hex").slice(0, 8)}`
-    );
-
-    await downloadBuiltinKeycloakTheme({
-        keycloakVersion,
-        "destDirPath": tmpDirPath,
-        buildOptions
-    });
-
-    const resourcesPath = pathJoin(themeDirPath, themeType, "resources");
-
-    transformCodebase({
-        "srcDirPath": pathJoin(tmpDirPath, "keycloak", themeType, "resources"),
-        "destDirPath": resourcesPath
-    });
-
-    transformCodebase({
-        "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
-        "destDirPath": pathJoin(resourcesPath, resources_common)
-    });
-
-    rmSync(tmpDirPath, { "recursive": true, "force": true });
-}

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 "../../constants";
-
-/** 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/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,126 +1,107 @@
-import { generateTheme } from "./generateTheme";
-import { generatePom } from "./generatePom";
-import { join as pathJoin, relative as pathRelative, basename as pathBasename, dirname as pathDirname, 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 { getThemeSrcDirPath } from "../getThemeSrcDirPath";
-import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";
-import { readThisNpmProjectVersion } from "../tools/readThisNpmProjectVersion";
-import { keycloakifyBuildOptionsForPostPostBuildScriptEnvName } from "../constants";
+import { readBuildOptions } from "../shared/buildOptions";
+import { vitePluginSubScriptEnvNames, skipBuildJarsEnvName } 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";
 
-export async function main() {
-    const buildOptions = readBuildOptions({
-        "processArgv": process.argv.slice(2)
-    });
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    exit_if_maven_not_installed: {
+        let commandOutput: Buffer | undefined = undefined;
 
-    const logger = getLogger({ "isSilent": buildOptions.isSilent });
-    logger.log("🔏 Building the keycloak theme...⌚");
+        try {
+            commandOutput = child_process.execSync("mvn --version", {
+                stdio: ["ignore", "pipe", "ignore"]
+            });
+        } catch {}
 
-    const { themeSrcDirPath } = getThemeSrcDirPath({ "reactAppRootDirPath": buildOptions.reactAppRootDirPath });
+        if (commandOutput?.toString("utf8").includes("Apache Maven")) {
+            break exit_if_maven_not_installed;
+        }
 
-    for (const themeName of buildOptions.themeNames) {
-        await generateTheme({
-            themeName,
-            themeSrcDirPath,
-            "keycloakifySrcDirPath": pathJoin(getThisCodebaseRootDirPath(), "src"),
-            "keycloakifyVersion": readThisNpmProjectVersion(),
-            buildOptions
-        });
+        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 buildOptions = readBuildOptions({ cliCommandOptions });
+
+    console.log(
+        [
+            chalk.cyan(`keycloakify v${readThisNpmPackageVersion()}`),
+            chalk.green(
+                `Building the keycloak theme in .${pathSep}${pathRelative(
+                    process.cwd(),
+                    buildOptions.keycloakifyBuildDirPath
+                )} ...`
+            )
+        ].join(" ")
+    );
+
+    const startTime = Date.now();
+
     {
-        const { pomFileCode } = generatePom({ buildOptions });
-
-        fs.writeFileSync(pathJoin(buildOptions.keycloakifyBuildDirPath, "pom.xml"), Buffer.from(pomFileCode, "utf8"));
-    }
-
-    const containerKeycloakVersion = "23.0.6";
-
-    const jarFilePath = pathJoin(buildOptions.keycloakifyBuildDirPath, "target", `${buildOptions.artifactId}-${buildOptions.themeVersion}.jar`);
-
-    generateStartKeycloakTestingContainer({
-        "keycloakVersion": containerKeycloakVersion,
-        jarFilePath,
-        buildOptions
-    });
-
-    fs.writeFileSync(pathJoin(buildOptions.keycloakifyBuildDirPath, ".gitignore"), Buffer.from("*", "utf8"));
-
-    child_process.execSync("npx vite", {
-        "cwd": buildOptions.reactAppRootDirPath,
-        "env": {
-            ...process.env,
-            [keycloakifyBuildOptionsForPostPostBuildScriptEnvName]: JSON.stringify(buildOptions)
+        if (!fs.existsSync(buildOptions.keycloakifyBuildDirPath)) {
+            fs.mkdirSync(buildOptions.keycloakifyBuildDirPath, {
+                recursive: true
+            });
         }
-    });
-
-    create_jar: {
-        if (!buildOptions.doCreateJar) {
-            break create_jar;
-        }
-
-        child_process.execSync("mvn clean install", { "cwd": buildOptions.keycloakifyBuildDirPath });
-
-        const jarDirPath = pathDirname(jarFilePath);
-        const retrocompatJarFilePath = pathJoin(jarDirPath, "retrocompat-" + pathBasename(jarFilePath));
-
-        fs.renameSync(pathJoin(jarDirPath, "original-" + pathBasename(jarFilePath)), retrocompatJarFilePath);
 
         fs.writeFileSync(
-            pathJoin(jarDirPath, "README.md"),
-            Buffer.from(
-                [
-                    `- The ${jarFilePath} is to be used in Keycloak 23 and up.  `,
-                    `- The ${retrocompatJarFilePath} is to be used in Keycloak 22 and below.`,
-                    `  Note that Keycloak 22 is only supported for login and email theme but not for account themes.  `
-                ].join("\n"),
-                "utf8"
-            )
+            pathJoin(buildOptions.keycloakifyBuildDirPath, ".gitignore"),
+            Buffer.from("*", "utf8")
         );
     }
 
-    logger.log(
-        [
-            "",
-            ...(!buildOptions.doCreateJar
-                ? []
-                : [
-                      `✅ Your keycloak theme has been generated and bundled into .${pathSep}${pathRelative(
-                          buildOptions.reactAppRootDirPath,
-                          jarFilePath
-                      )} 🚀`
-                  ]),
-            "",
-            `To test your theme locally you can spin up a Keycloak ${containerKeycloakVersion} container image with the theme pre loaded by running:`,
-            "",
-            `👉 $ .${pathSep}${pathRelative(
-                buildOptions.reactAppRootDirPath,
-                pathJoin(buildOptions.keycloakifyBuildDirPath, generateStartKeycloakTestingContainer.basename)
-            )} 👈`,
-            ``,
-            `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.themeNames[0]}`,
-            `                                        Clients        -> account    -> Login theme:   ${buildOptions.themeNames[0]}`,
-            `- Enable the email theme (optional):    Realm settings -> Themes tab -> Email theme:   ${buildOptions.themeNames[0]} (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.themeNames[0]}`,
-            `                                                                        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")
+    await generateSrcMainResources({ buildOptions });
+
+    run_post_build_script: {
+        if (buildOptions.bundler !== "vite") {
+            break run_post_build_script;
+        }
+
+        child_process.execSync("npx vite", {
+            cwd: buildOptions.reactAppRootDirPath,
+            env: {
+                ...process.env,
+                [vitePluginSubScriptEnvNames.runPostBuildScript]:
+                    JSON.stringify(buildOptions)
+            }
+        });
+    }
+
+    build_jars: {
+        if (process.env[skipBuildJarsEnvName]) {
+            break build_jars;
+        }
+
+        await buildJars({ buildOptions });
+    }
+
+    console.log(
+        chalk.green(`✓ built in ${((Date.now() - startTime) / 1000).toFixed(2)}s`)
     );
 }

src/bin/keycloakify/replacers/replaceImportsInCssCode.ts

@@ -1,7 +1,7 @@
 import * as crypto from "crypto";
-import type { BuildOptions } from "../buildOptions";
+import type { BuildOptions } from "../../shared/buildOptions";
 import { assert } from "tsafe/assert";
-import { basenameOfTheKeycloakifyResourcesDir } from "../../constants";
+import { basenameOfTheKeycloakifyResourcesDir } from "../../shared/constants";
 
 export type BuildOptionsLike = {
     urlPathname: string | undefined;
@@ -18,7 +18,15 @@ 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)
+        match =>
+            (cssGlobalsToDefine[
+                "url" +
+                    crypto
+                        .createHash("sha256")
+                        .update(match)
+                        .digest("hex")
+                        .substring(0, 15)
+            ] = match)
     );
 
     let fixedCssCode = cssCode;
@@ -26,26 +34,37 @@ 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>;
+    buildOptions: BuildOptionsLike;
+}): {
     cssCodeToPrependInHead: string;
 } {
     const { cssGlobalsToDefine, buildOptions } = params;
 
     return {
-        "cssCodeToPrependInHead": [
+        cssCodeToPrependInHead: [
             ":root {",
             ...Object.keys(cssGlobalsToDefine)
                 .map(cssVariableName =>
                     [
                         `--${cssVariableName}:`,
                         cssGlobalsToDefine[cssVariableName].replace(
-                            new RegExp(`url\\(${(buildOptions.urlPathname ?? "/").replace(/\//g, "\\/")}`, "g"),
+                            new RegExp(
+                                `url\\(${(buildOptions.urlPathname ?? "/").replace(
+                                    /\//g,
+                                    "\\/"
+                                )}`,
+                                "g"
+                            ),
                             `url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/`
                         )
                     ].join(" ")

src/bin/keycloakify/replacers/replaceImportsInInlineCssCode.ts

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

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

@@ -1,5 +1,5 @@
 import { assert } from "tsafe/assert";
-import type { BuildOptions } from "../../buildOptions";
+import type { BuildOptions } from "../../../shared/buildOptions";
 import { replaceImportsInJsCode_vite } from "./vite";
 import { replaceImportsInJsCode_webpack } from "./webpack";
 import * as fs from "fs";
@@ -13,7 +13,10 @@ export type BuildOptionsLike = {
 
 assert<BuildOptions extends BuildOptionsLike ? true : false>();
 
-export function replaceImportsInJsCode(params: { jsCode: string; buildOptions: BuildOptionsLike }) {
+export function replaceImportsInJsCode(params: {
+    jsCode: string;
+    buildOptions: BuildOptionsLike;
+}) {
     const { jsCode, buildOptions } = params;
 
     const { fixedJsCode } = (() => {
@@ -22,8 +25,8 @@ export function replaceImportsInJsCode(params: { jsCode: string; buildOptions: B
                 return replaceImportsInJsCode_vite({
                     jsCode,
                     buildOptions,
-                    "basenameOfAssetsFiles": readAssetsDirSync({
-                        "assetsDirPath": params.buildOptions.assetsDirPath
+                    basenameOfAssetsFiles: readAssetsDirSync({
+                        assetsDirPath: params.buildOptions.assetsDirPath
                     })
                 });
             case "webpack":

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

@@ -1,6 +1,9 @@
-import { nameOfTheGlobal, basenameOfTheKeycloakifyResourcesDir } from "../../../constants";
+import {
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir
+} from "../../../shared/constants";
 import { assert } from "tsafe/assert";
-import type { BuildOptions } from "../../buildOptions";
+import type { BuildOptions } from "../../../shared/buildOptions";
 import * as nodePath from "path";
 import { replaceAll } from "../../../tools/String.prototype.replaceAll";
 
@@ -20,7 +23,12 @@ export function replaceImportsInJsCode_vite(params: {
 }): {
     fixedJsCode: string;
 } {
-    const { jsCode, buildOptions, basenameOfAssetsFiles, systemType = nodePath.sep === "/" ? "posix" : "win32" } = params;
+    const {
+        jsCode,
+        buildOptions,
+        basenameOfAssetsFiles,
+        systemType = nodePath.sep === "/" ? "posix" : "win32"
+    } = params;
 
     const { relative: pathRelative, sep: pathSep } = nodePath[systemType];
 
@@ -38,22 +46,32 @@ export function replaceImportsInJsCode_vite(params: {
         // 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(buildOptions.urlPathname, "/", "\\/")}"\\+\\2\\}`,
+                `([\\w\\$][\\w\\d\\$]*)=function\\(([\\w\\$][\\w\\d\\$]*)\\)\\{return"${replaceAll(
+                    buildOptions.urlPathname,
+                    "/",
+                    "\\/"
+                )}"\\+\\2\\}`,
                 "g"
             ),
-            (...[, funcName, paramName]) => `${funcName}=function(${paramName}){return"/"+${paramName}}`
+            (...[, funcName, paramName]) =>
+                `${funcName}=function(${paramName}){return"/"+${paramName}}`
         );
     }
 
     replace_javascript_relatives_import_paths: {
         // Example: "assets/ or "foo/bar/"
         const staticDir = (() => {
-            let out = pathRelative(buildOptions.reactAppBuildDirPath, buildOptions.assetsDirPath);
+            let out = pathRelative(
+                buildOptions.reactAppBuildDirPath,
+                buildOptions.assetsDirPath
+            );
 
             out = replaceAll(out, pathSep, "/") + "/";
 
             if (out === "/") {
-                throw new Error(`The assetsDirPath must be a subdirectory of reactAppBuildDirPath`);
+                throw new Error(
+                    `The assetsDirPath must be a subdirectory of reactAppBuildDirPath`
+                );
             }
 
             return out;

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

@@ -1,6 +1,9 @@
-import { nameOfTheGlobal, basenameOfTheKeycloakifyResourcesDir } from "../../../constants";
+import {
+    nameOfTheGlobal,
+    basenameOfTheKeycloakifyResourcesDir
+} from "../../../shared/constants";
 import { assert } from "tsafe/assert";
-import type { BuildOptions } from "../../buildOptions";
+import type { BuildOptions } from "../../../shared/buildOptions";
 import * as nodePath from "path";
 import { replaceAll } from "../../../tools/String.prototype.replaceAll";
 
@@ -12,10 +15,18 @@ export type BuildOptionsLike = {
 
 assert<BuildOptions extends BuildOptionsLike ? true : false>();
 
-export function replaceImportsInJsCode_webpack(params: { jsCode: string; buildOptions: BuildOptionsLike; systemType?: "posix" | "win32" }): {
+export function replaceImportsInJsCode_webpack(params: {
+    jsCode: string;
+    buildOptions: BuildOptionsLike;
+    systemType?: "posix" | "win32";
+}): {
     fixedJsCode: string;
 } {
-    const { jsCode, buildOptions, systemType = nodePath.sep === "/" ? "posix" : "win32" } = params;
+    const {
+        jsCode,
+        buildOptions,
+        systemType = nodePath.sep === "/" ? "posix" : "win32"
+    } = params;
 
     const { relative: pathRelative, sep: pathSep } = nodePath[systemType];
 
@@ -24,29 +35,51 @@ export function replaceImportsInJsCode_webpack(params: { jsCode: string; buildOp
     if (buildOptions.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(buildOptions.urlPathname, "/", "\\/")}",`, "g"),
+            new RegExp(
+                `,([a-zA-Z]\\.[a-zA-Z])="${replaceAll(
+                    buildOptions.urlPathname,
+                    "/",
+                    "\\/"
+                )}",`,
+                "g"
+            ),
             (...[, assignTo]) => `,${assignTo}="/",`
         );
     }
 
     // Example: "static/ or "foo/bar/"
     const staticDir = (() => {
-        let out = pathRelative(buildOptions.reactAppBuildDirPath, buildOptions.assetsDirPath);
+        let out = pathRelative(
+            buildOptions.reactAppBuildDirPath,
+            buildOptions.assetsDirPath
+        );
 
         out = replaceAll(out, pathSep, "/") + "/";
 
         if (out === "/") {
-            throw new Error(`The assetsDirPath must be a subdirectory of reactAppBuildDirPath`);
+            throw new Error(
+                `The assetsDirPath must be a subdirectory of reactAppBuildDirPath`
+            );
         }
 
         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"),
+    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;
+            const e = isArrowFunction
+                ? matchedFunction.replace("=>", "").trim()
+                : eForFunction;
 
             return `
             ${n}[(function(){
@@ -58,7 +91,9 @@ export function replaceImportsInJsCode_webpack(params: { jsCode: string; buildOp
                     });
                 }
                 return "${u}";
-            })()] = ${isArrowFunction ? `${e} =>` : `function(${e}) { return `} "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}${language}/"`
+            })()] = ${
+                isArrowFunction ? `${e} =>` : `function(${e}) { return `
+            } "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}${language}/"`
                 .replace(/\s+/g, " ")
                 .trim();
         }
@@ -68,7 +103,10 @@ export function replaceImportsInJsCode_webpack(params: { jsCode: string; buildOp
         .replace(...getReplaceArgs("js"))
         .replace(...getReplaceArgs("css"))
         .replace(
-            new RegExp(`[a-zA-Z]+\\.[a-zA-Z]+\\+"${staticDir.replace(/\//g, "\\/")}`, "g"),
+            new RegExp(
+                `[a-zA-Z]+\\.[a-zA-Z]+\\+"${staticDir.replace(/\//g, "\\/")}`,
+                "g"
+            ),
             `window.${nameOfTheGlobal}.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}`
         );
 

src/bin/main.ts

@@ -0,0 +1,212 @@
+#!/usr/bin/env node
+
+import { termost } from "termost";
+import { readThisNpmPackageVersion } from "./tools/readThisNpmPackageVersion";
+import * as child_process from "child_process";
+
+export type CliCommandOptions = {
+    reactAppRootDirPath: 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: "reactAppRootDirPath",
+    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: "download-keycloak-default-theme",
+        description: "Download the built-in Keycloak theme."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./download-keycloak-default-theme");
+
+            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: "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 });
+        }
+    });
+
+// 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/promptKeycloakVersion.ts

@@ -1,48 +0,0 @@
-import { getLatestsSemVersionedTagFactory } from "./tools/octokit-addons/getLatestsSemVersionedTag";
-import { Octokit } from "@octokit/rest";
-import cliSelect from "cli-select";
-import { lastKeycloakVersionWithAccountV1 } from "./constants";
-
-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,
-            "owner": "keycloak",
-            "repo": "keycloak"
-        }).then(arr => arr.map(({ tag }) => tag))),
-        lastKeycloakVersionWithAccountV1,
-        "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 };
-}

src/bin/shared/KeycloakVersionRange.ts

@@ -0,0 +1,9 @@
+export type KeycloakVersionRange =
+    | KeycloakVersionRange.WithAccountTheme
+    | KeycloakVersionRange.WithoutAccountTheme;
+
+export namespace KeycloakVersionRange {
+    export type WithoutAccountTheme = "21-and-below" | "22-and-above";
+
+    export type WithAccountTheme = "21-and-below" | "23" | "24-and-above";
+}

src/bin/shared/buildOptions.ts

@@ -0,0 +1,307 @@
+import { parse as urlParse } from "url";
+import { join as pathJoin } from "path";
+import { getAbsoluteAndInOsFormatPath } from "../tools/getAbsoluteAndInOsFormatPath";
+import { getNpmWorkspaceRootDirPath } from "../tools/getNpmWorkspaceRootDirPath";
+import type { CliCommandOptions } from "../main";
+import { z } from "zod";
+import * as fs from "fs";
+import { assert } from "tsafe";
+import * as child_process from "child_process";
+import { vitePluginSubScriptEnvNames } from "./constants";
+
+/** Consolidated build option gathered form CLI arguments and config in package.json */
+export type BuildOptions = {
+    bundler: "vite" | "webpack";
+    themeVersion: string;
+    themeNames: string[];
+    extraThemeProperties: string[] | undefined;
+    groupId: string;
+    artifactId: string;
+    loginThemeResourcesFromKeycloakVersion: string;
+    reactAppRootDirPath: string;
+    // TODO: Remove from vite type
+    reactAppBuildDirPath: string;
+    /** Directory that keycloakify outputs to. Defaults to {cwd}/build_keycloak */
+    keycloakifyBuildDirPath: string;
+    publicDirPath: string;
+    cacheDirPath: 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;
+    assetsDirPath: string;
+    npmWorkspaceRootDirPath: string;
+};
+
+export type UserProvidedBuildOptions = {
+    extraThemeProperties?: string[];
+    artifactId?: string;
+    groupId?: string;
+    loginThemeResourcesFromKeycloakVersion?: string;
+    keycloakifyBuildDirPath?: string;
+    themeName?: string | string[];
+};
+
+export type ResolvedViteConfig = {
+    buildDir: string;
+    publicDir: string;
+    assetsDir: string;
+    urlPathname: string | undefined;
+    userProvidedBuildOptions: UserProvidedBuildOptions;
+};
+
+export function readBuildOptions(params: {
+    cliCommandOptions: CliCommandOptions;
+}): BuildOptions {
+    const { cliCommandOptions } = params;
+
+    const reactAppRootDirPath = (() => {
+        if (cliCommandOptions.reactAppRootDirPath === undefined) {
+            return process.cwd();
+        }
+
+        return getAbsoluteAndInOsFormatPath({
+            pathIsh: cliCommandOptions.reactAppRootDirPath,
+            cwd: process.cwd()
+        });
+    })();
+
+    const { resolvedViteConfig } = (() => {
+        if (
+            fs
+                .readdirSync(reactAppRootDirPath)
+                .find(fileBasename => fileBasename.startsWith("vite.config")) ===
+            undefined
+        ) {
+            return { resolvedViteConfig: undefined };
+        }
+
+        const output = child_process
+            .execSync("npx vite", {
+                cwd: reactAppRootDirPath,
+                env: {
+                    ...process.env,
+                    [vitePluginSubScriptEnvNames.resolveViteConfig]: "true"
+                }
+            })
+            .toString("utf8");
+
+        assert(
+            output.includes(vitePluginSubScriptEnvNames.resolveViteConfig),
+            "Seems like the Keycloakify's Vite plugin is not installed."
+        );
+
+        const resolvedViteConfigStr = output
+            .split(vitePluginSubScriptEnvNames.resolveViteConfig)
+            .reverse()[0];
+
+        const resolvedViteConfig: ResolvedViteConfig = JSON.parse(resolvedViteConfigStr);
+
+        return { resolvedViteConfig };
+    })();
+
+    const parsedPackageJson = (() => {
+        type ParsedPackageJson = {
+            name: string;
+            version?: string;
+            homepage?: string;
+            keycloakify?: UserProvidedBuildOptions & {
+                reactAppBuildDirPath?: string;
+            };
+        };
+
+        const zParsedPackageJson = z.object({
+            name: z.string(),
+            version: z.string().optional(),
+            homepage: z.string().optional(),
+            keycloakify: z
+                .object({
+                    extraThemeProperties: z.array(z.string()).optional(),
+                    artifactId: z.string().optional(),
+                    groupId: z.string().optional(),
+                    loginThemeResourcesFromKeycloakVersion: z.string().optional(),
+                    reactAppBuildDirPath: z.string().optional(),
+                    keycloakifyBuildDirPath: z.string().optional(),
+                    themeName: z.union([z.string(), z.array(z.string())]).optional()
+                })
+                .optional()
+        });
+
+        {
+            type Got = ReturnType<(typeof zParsedPackageJson)["parse"]>;
+            type Expected = ParsedPackageJson;
+            assert<Got extends Expected ? true : false>();
+            assert<Expected extends Got ? true : false>();
+        }
+
+        return zParsedPackageJson.parse(
+            JSON.parse(
+                fs
+                    .readFileSync(pathJoin(reactAppRootDirPath, "package.json"))
+                    .toString("utf8")
+            )
+        );
+    })();
+
+    const userProvidedBuildOptions: UserProvidedBuildOptions = {
+        ...parsedPackageJson.keycloakify,
+        ...resolvedViteConfig?.userProvidedBuildOptions
+    };
+
+    const themeNames = (() => {
+        if (userProvidedBuildOptions.themeName === undefined) {
+            return [
+                parsedPackageJson.name
+                    .replace(/^@(.*)/, "$1")
+                    .split("/")
+                    .join("-")
+            ];
+        }
+
+        if (typeof userProvidedBuildOptions.themeName === "string") {
+            return [userProvidedBuildOptions.themeName];
+        }
+
+        return userProvidedBuildOptions.themeName;
+    })();
+
+    const reactAppBuildDirPath = (() => {
+        webpack: {
+            if (resolvedViteConfig !== undefined) {
+                break webpack;
+            }
+
+            if (parsedPackageJson.keycloakify?.reactAppBuildDirPath !== undefined) {
+                return getAbsoluteAndInOsFormatPath({
+                    pathIsh: parsedPackageJson.keycloakify.reactAppBuildDirPath,
+                    cwd: reactAppRootDirPath
+                });
+            }
+
+            return pathJoin(reactAppRootDirPath, "build");
+        }
+
+        return pathJoin(reactAppRootDirPath, resolvedViteConfig.buildDir);
+    })();
+
+    const { npmWorkspaceRootDirPath } = getNpmWorkspaceRootDirPath({
+        reactAppRootDirPath,
+        dependencyExpected: "keycloakify"
+    });
+
+    return {
+        bundler: resolvedViteConfig !== undefined ? "vite" : "webpack",
+        themeVersion:
+            process.env.KEYCLOAKIFY_THEME_VERSION ?? parsedPackageJson.version ?? "0.0.0",
+        themeNames,
+        extraThemeProperties: userProvidedBuildOptions.extraThemeProperties,
+        groupId: (() => {
+            const fallbackGroupId = `${themeNames[0]}.keycloak`;
+
+            return (
+                process.env.KEYCLOAKIFY_GROUP_ID ??
+                userProvidedBuildOptions.groupId ??
+                (parsedPackageJson.homepage === undefined
+                    ? fallbackGroupId
+                    : urlParse(parsedPackageJson.homepage)
+                          .host?.replace(/:[0-9]+$/, "")
+                          ?.split(".")
+                          .reverse()
+                          .join(".") ?? fallbackGroupId) + ".keycloak"
+            );
+        })(),
+        artifactId:
+            process.env.KEYCLOAKIFY_ARTIFACT_ID ??
+            userProvidedBuildOptions.artifactId ??
+            `${themeNames[0]}-keycloak-theme`,
+        loginThemeResourcesFromKeycloakVersion:
+            userProvidedBuildOptions.loginThemeResourcesFromKeycloakVersion ?? "24.0.4",
+        reactAppRootDirPath,
+        reactAppBuildDirPath,
+        keycloakifyBuildDirPath: (() => {
+            if (userProvidedBuildOptions.keycloakifyBuildDirPath !== undefined) {
+                return getAbsoluteAndInOsFormatPath({
+                    pathIsh: userProvidedBuildOptions.keycloakifyBuildDirPath,
+                    cwd: reactAppRootDirPath
+                });
+            }
+
+            return pathJoin(
+                reactAppRootDirPath,
+                resolvedViteConfig?.buildDir === undefined
+                    ? "build_keycloak"
+                    : `${resolvedViteConfig.buildDir}_keycloak`
+            );
+        })(),
+        publicDirPath: (() => {
+            webpack: {
+                if (resolvedViteConfig !== undefined) {
+                    break webpack;
+                }
+
+                if (process.env.PUBLIC_DIR_PATH !== undefined) {
+                    return getAbsoluteAndInOsFormatPath({
+                        pathIsh: process.env.PUBLIC_DIR_PATH,
+                        cwd: reactAppRootDirPath
+                    });
+                }
+
+                return pathJoin(reactAppRootDirPath, "public");
+            }
+
+            return pathJoin(reactAppRootDirPath, resolvedViteConfig.publicDir);
+        })(),
+        cacheDirPath: (() => {
+            const cacheDirPath = pathJoin(
+                (() => {
+                    if (process.env.XDG_CACHE_HOME !== undefined) {
+                        return getAbsoluteAndInOsFormatPath({
+                            pathIsh: process.env.XDG_CACHE_HOME,
+                            cwd: process.cwd()
+                        });
+                    }
+
+                    return pathJoin(npmWorkspaceRootDirPath, "node_modules", ".cache");
+                })(),
+                "keycloakify"
+            );
+
+            return cacheDirPath;
+        })(),
+        urlPathname: (() => {
+            webpack: {
+                if (resolvedViteConfig !== undefined) {
+                    break webpack;
+                }
+
+                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;
+            }
+
+            return resolvedViteConfig.urlPathname;
+        })(),
+        assetsDirPath: (() => {
+            webpack: {
+                if (resolvedViteConfig !== undefined) {
+                    break webpack;
+                }
+
+                return pathJoin(reactAppBuildDirPath, "static");
+            }
+
+            return pathJoin(reactAppBuildDirPath, resolvedViteConfig.assetsDir);
+        })(),
+        npmWorkspaceRootDirPath
+    };
+}

src/bin/shared/constants.ts

@@ -0,0 +1,71 @@
+export const nameOfTheGlobal = "kcContext";
+export const nameOfTheLocalizationRealmOverridesUserProfileProperty =
+    "__localizationRealmOverridesUserProfile";
+export const keycloak_resources = "keycloak-resources";
+export const resources_common = "resources-common";
+export const lastKeycloakVersionWithAccountV1 = "21.1.2";
+export const basenameOfTheKeycloakifyResourcesDir = "build";
+
+export const themeTypes = ["login", "account"] as const;
+export const accountV1ThemeName = "account-v1";
+
+export type ThemeType = (typeof themeTypes)[number];
+
+export const vitePluginSubScriptEnvNames = {
+    runPostBuildScript: "KEYCLOAKIFY_RUN_POST_BUILD_SCRIPT",
+    resolveViteConfig: "KEYCLOAKIFY_RESOLVE_VITE_CONFIG"
+} as const;
+
+export const skipBuildJarsEnvName = "KEYCLOAKIFY_SKIP_BUILD_JAR";
+
+export const loginThemePageIds = [
+    "login.ftl",
+    "login-username.ftl",
+    "login-password.ftl",
+    "webauthn-authenticate.ftl",
+    "webauthn-register.ftl",
+    "register.ftl",
+    "info.ftl",
+    "error.ftl",
+    "login-reset-password.ftl",
+    "login-verify-email.ftl",
+    "terms.ftl",
+    "login-oauth2-device-verify-user-code.ftl",
+    "login-oauth-grant.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",
+    "idp-review-user-profile.ftl",
+    "update-email.ftl",
+    "select-authenticator.ftl",
+    "saml-post-form.ftl",
+    "delete-credential.ftl",
+    "code.ftl",
+    "delete-account-confirm.ftl",
+    "frontchannel-logout.ftl",
+    "login-recovery-authn-code-config.ftl",
+    "login-recovery-authn-code-input.ftl",
+    "login-reset-otp.ftl",
+    "login-x509-info.ftl",
+    "webauthn-error.ftl"
+] as const;
+
+export const accountThemePageIds = [
+    "password.ftl",
+    "account.ftl",
+    "sessions.ftl",
+    "totp.ftl",
+    "applications.ftl",
+    "log.ftl",
+    "federatedIdentity.ftl"
+] as const;
+
+export type LoginThemePageId = (typeof loginThemePageIds)[number];
+export type AccountThemePageId = (typeof accountThemePageIds)[number];
+
+export const containerName = "keycloak-keycloakify";