Bump version

Start implementing per theme variant translations and ability to add extra languages

.all-contributorsrc

@@ -231,6 +231,34 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "madmadson",
+      "name": "Tobias Matt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/798831?v=4",
+      "profile": "https://github.com/madmadson",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "oliviergoulet5",
+      "name": "Olivier Goulet",
+      "avatar_url": "https://avatars.githubusercontent.com/u/17685861?v=4",
+      "profile": "https://github.com/oliviergoulet5",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "liamlows",
+      "name": "Liam Lowsley-Williams",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1365914?v=4",
+      "profile": "https://github.com/liamlows",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/ci.yaml

@@ -17,7 +17,7 @@ jobs:
     - uses: actions/setup-node@v4
     - uses: bahmutov/npm-install@v1
     - name: If this step fails run 'npm run format' then commit again.
-      run: npm run format:check
+      run: npm run _format --list-different
   test:
     runs-on: ${{ matrix.os }}
     needs: test_lint
@@ -37,7 +37,7 @@ jobs:
 
   storybook:
     runs-on: ubuntu-latest
-    #if: github.event_name == 'push'
+    if: github.event_name == 'push'
     needs: test
     steps:
     - uses: actions/checkout@v4
@@ -49,7 +49,7 @@ jobs:
     - run: git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${{github.repository}}.git
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-    - run: npx -y -p gh-pages@3.1.0 gh-pages -d ./storybook-static -u "github-actions-bot <actions@github.com>" 
+    - run: npx -y -p gh-pages@3.1.0 gh-pages -d ./storybook-static -u "github-actions-bot <actions@github.com>"
 
   check_if_version_upgraded:
     name: Check if version upgrade

.gitignore

@@ -48,8 +48,8 @@ jspm_packages
 
 .idea
 
-/src/login/i18n/baseMessages/
-/src/account/i18n/baseMessages/
+/src/login/i18n/messages_defaultSet/
+/src/account/i18n/
 
 # VS Code devcontainers
 .devcontainer

.prettierignore

@@ -6,8 +6,8 @@ node_modules/
 /src/tools/types/
 /build_keycloak/
 /.vscode/
-/src/login/i18n/baseMessages/
-/src/account/i18n/baseMessages/
+/src/login/i18n/messages_defaultSet/
+/src/account/i18n/messages_defaultSet/
 /dist_test
 /sample_react_project/
 /sample_custom_react_project/

.storybook/Containers.js

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

.storybook/customTheme.js

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

.storybook/customTheme.ts

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

.storybook/main.js

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

.storybook/manager.js

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

.storybook/preview-head.html

@@ -1,3 +1,9 @@
+<link rel="preload" href="/fonts/WorkSans/worksans-bold-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="preload" href="/fonts/WorkSans/worksans-medium-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="preload" href="/fonts/WorkSans/worksans-regular-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="preload" href="/fonts/WorkSans/worksans-semibold-webfont.woff2" as="font" crossorigin="anonymous">
+<link rel="stylesheet" type="text/css" href="/fonts/WorkSans/font.css">
+
 <style>
     body.sb-show-main.sb-main-padded {
         padding: 0;

.storybook/preview.js

@@ -1,116 +1,105 @@
 import { darkTheme, lightTheme } from "./customTheme";
-import { DocsContainer, CanvasContainer } from "./Containers";
+import { create as createTheme } from "@storybook/theming";
 
 export const parameters = {
-    "actions": { "argTypesRegex": "^on[A-Z].*" },
-    "controls": {
-        "matchers": {
-            "color": /(background|color)$/i,
-            "date": /Date$/,
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
         },
     },
-    "backgrounds": { "disable": true },
-    "darkMode": {
-        "light": lightTheme,
-        "dark": darkTheme,
+    backgrounds: { disable: true },
+    darkMode: {
+        light: createTheme(lightTheme),
+        dark: createTheme(darkTheme),
     },
-    "docs": {
-        "container": DocsContainer
+    controls: {
+        disable: true,
     },
-    "controls": {
-        "disable": true,
+    actions: {
+        disable: true
     },
-    "actions": {
-        "disable": true
-    },
-    "viewport": {
-        "viewports": {
+    viewport: {
+        viewports: {
             "1440p": {
-                "name": "1440p",
-                "styles": {
-                    "width": "2560px",
-                    "height": "1440px",
+                name: "1440p",
+                styles: {
+                    width: "2560px",
+                    height: "1440px",
                 },
             },
-            "fullHD": {
-                "name": "Full HD",
-                "styles": {
-                    "width": "1920px",
-                    "height": "1080px",
+            fullHD: {
+                name: "Full HD",
+                styles: {
+                    width: "1920px",
+                    height: "1080px",
                 },
             },
-            "macBookProBig": {
-                "name": "MacBook Pro Big",
-                "styles": {
-                    "width": "1024px",
-                    "height": "640px",
+            macBookProBig: {
+                name: "MacBook Pro Big",
+                styles: {
+                    width: "1024px",
+                    height: "640px",
                 },
             },
-            "macBookProMedium": {
-                "name": "MacBook Pro Medium",
-                "styles": {
-                    "width": "1440px",
-                    "height": "900px",
+            macBookProMedium: {
+                name: "MacBook Pro Medium",
+                styles: {
+                    width: "1440px",
+                    height: "900px",
                 },
             },
-            "macBookProSmall": {
-                "name": "MacBook Pro Small",
-                "styles": {
-                    "width": "1680px",
-                    "height": "1050px",
+            macBookProSmall: {
+                name: "MacBook Pro Small",
+                styles: {
+                    width: "1680px",
+                    height: "1050px",
                 },
             },
-            "pcAgent": {
-                "name": "PC Agent",
-                "styles": {
-                    "width": "960px",
-                    "height": "540px",
+            pcAgent: {
+                name: "PC Agent",
+                styles: {
+                    width: "960px",
+                    height: "540px",
                 },
             },
-            "iphone12Pro": {
-                "name": "Iphone 12 pro",
-                "styles": {
-                    "width": "390px",
-                    "height": "844px",
+            iphone12Pro: {
+                name: "Iphone 12 pro",
+                styles: {
+                    width: "390px",
+                    height: "844px",
                 },
             },
-            "iphone5se": {
-                "name": "Iphone 5/SE",
-                "styles": {
-                    "width": "320px",
-                    "height": "568px",
+            iphone5se: {
+                name: "Iphone 5/SE",
+                styles: {
+                    width: "320px",
+                    height: "568px",
                 },
             },
-            "ipadPro": {
-                "name": "Ipad pro",
-                "styles": {
-                    "width": "1240px",
-                    "height": "1366px",
+            ipadPro: {
+                name: "Ipad pro",
+                styles: {
+                    width: "1240px",
+                    height: "1366px",
                 },
             },
             "Galaxy s9+": {
-                "name": "Galaxy S9+",
-                "styles": {
-                    "width": "320px",
-                    "height": "658px",
+                name: "Galaxy S9+",
+                styles: {
+                    width: "320px",
+                    height: "658px",
                 },
             }
         },
     },
-    "options": {
-        "storySort": (a, b) =>
+    options: {
+        storySort: (a, b) =>
             getHardCodedWeight(b[1].kind) - getHardCodedWeight(a[1].kind),
     },
 };
 
-export const decorators = [
-    (Story) => (
-        <CanvasContainer>
-            <Story />
-        </CanvasContainer>
-    ),
-];
-
 const { getHardCodedWeight } = (() => {
 
     const orderedPagesPrefix = [

.storybook/static/terms/en.md

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

.storybook/static/terms/es.md

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

.storybook/static/terms/fr.md

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

README.md

@@ -2,7 +2,7 @@
     <img src="https://user-images.githubusercontent.com/6702424/109387840-eba11f80-7903-11eb-9050-db1dad883f78.png">  
 </p>
 <p align="center">
-    <i>🔏 Create Keycloak themes using React 🔏</i>
+    <i>🔏 Keycloak Theming for the Modern Web 🔏</i>
     <br>
     <br>
     <a href="https://github.com/garronej/keycloakify/actions">
@@ -17,9 +17,12 @@
     <a href="https://github.com/thomasdarimont/awesome-keycloak">
         <img src="https://awesome.re/mentioned-badge.svg"/>
     </a>
-    <a href="https://discord.gg/kYFZG7fQmn">
-        <img src="https://img.shields.io/discord/1097708346976505977"/>
-    </a>
+    <p align="center">
+      Check out our discord server!<br/>
+      <a href="https://discord.gg/mJdYJSdcm4">
+        <img src="https://dcbadge.limes.pink/api/server/kYFZG7fQmn"/>
+      </a>
+    </p>
     <p align="center">
         <a href="https://www.keycloakify.dev">Home</a>
         -
@@ -35,23 +38,36 @@
     <i>This build tool generates a Keycloak theme <a href="https://www.keycloakify.dev">Learn more</a></i>
     <br/>
     <br/>
-    <img width="400" src="https://github.com/keycloakify/keycloakify/assets/6702424/e66d105c-c06f-47d1-8a31-a6ab09da4e80">
+    <img width="400" src="https://github.com/user-attachments/assets/6bf3bef9-00b0-4460-97b9-0d2da8500798">
 </p>
 
-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)!
+Keycloakify is fully compatible with Keycloak from version 11 to 25...[and beyond](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).
+## Sponsors
 
-## Sponsor
+Friends for the project, we trust and recommend their services.
 
-We are exclusively sponsored by [Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), a French company offering Keycloak as a service.  
-Their dedicated support helps us continue the development and maintenance of this project.
+<br/>
 
-[Cloud IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github) provides the following services:
+<div align="center">
 
--   Simplify and secure your Keycloak Identity and Access Management. Keycloak as a Service.
--   Custom theme building for your brand using Keycloakify.
+![Logo Dark](https://github.com/user-attachments/assets/088f6631-b7ef-42ad-812b-df4870dc16ae#gh-dark-mode-only)
+
+</div>
+
+<div align="center">
+
+![Logo Light](https://github.com/user-attachments/assets/53fb16f8-02ef-4523-9c36-b42d6e59837e#gh-light-mode-only)
+
+</div>
+
+<br/>
+
+<p align="center">
+  <a href="https://www.zone2.tech/services/keycloak-consulting">
+    <i><strong>Keycloak Consulting Services</strong> - Your partner in Keycloak deployment, configuration, and extension development for optimized identity management solutions.</i>
+  </a>
+</p>
 
 <div align="center">
 
@@ -66,13 +82,11 @@ 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>
-    <br/>
-    <i>5% of your annual subscription will be donated to us, and you'll get 5% off too.</i>
+<a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github"><strong>Managed Keycloak Provider</strong> - With Cloud-IAM powering your Keycloak clusters, you can sleep easy knowing you've got the software and the experts you need for operational excellence.  </a>
+<br/>
+Use code <code>keycloakify5</code> at checkout for a 5% discount.
 </p>
 
-Thank you, [Cloud-IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github), for your support!
-
 ## Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -114,7 +128,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://m-siemens.de/"><img src="https://avatars.githubusercontent.com/u/1873922?v=4?s=100" width="100px;" alt="Markus Siemens"/><br /><sub><b>Markus Siemens</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=msiemens" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/law108000"><img src="https://avatars.githubusercontent.com/u/8112024?v=4?s=100" width="100px;" alt="Rlok"/><br /><sub><b>Rlok</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=law108000" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Moulyy"><img src="https://avatars.githubusercontent.com/u/115405804?v=4?s=100" width="100px;" alt="Moulyy"/><br /><sub><b>Moulyy</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Moulyy" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/giorgoslytos"><img src="https://avatars.githubusercontent.com/u/50946162?v=4?s=100" width="100px;" alt="giorgoslytos"/><br /><sub><b>giorgoslytos</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=giorgoslytos" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/madmadson"><img src="https://avatars.githubusercontent.com/u/798831?v=4?s=100" width="100px;" alt="Tobias Matt"/><br /><sub><b>Tobias Matt</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=madmadson" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/oliviergoulet5"><img src="https://avatars.githubusercontent.com/u/17685861?v=4?s=100" width="100px;" alt="Olivier Goulet"/><br /><sub><b>Olivier Goulet</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=oliviergoulet5" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/liamlows"><img src="https://avatars.githubusercontent.com/u/1365914?v=4?s=100" width="100px;" alt="Liam Lowsley-Williams"/><br /><sub><b>Liam Lowsley-Williams</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=liamlows" title="Code">💻</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=liamlows" title="Documentation">📖</a></td>
     </tr>
   </tbody>
 </table>
@@ -123,230 +139,3 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- prettier-ignore-end -->
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
-
-# Changelog highlights
-
-## 9.5
-
--   Post build hook: You can now apply custom transformation to your theme files. [Learn more](https://docs.keycloakify.dev/build-options#postbuild-hook).
--   You can now specify your option in the Keycloakify's Vite plugin instead in the package.json. [See example](https://docs.keycloakify.dev/build-options#themename).
-
-## 9.4
-
-**Vite Support! 🎉**
-
--   [The starter is now a Vite project](https://github.com/keycloakify/keycloakify-starter).
-    The Webpack based starter is accessible [here](https://github.com/keycloakify/keycloakify-starter-cra).
--   CRA (Webpack) remains supported for the forseable future.
--   If you have a CRA Keycloakify theme that you wish to migrate to Vite checkout [this migration guide](https://docs.keycloakify.dev/migration-guides/cra-greater-than-vite).
-
-## 9.0
-
-Bring back support for account themes in Keycloak v23 and up! [See issue](https://github.com/keycloakify/keycloakify/issues/389).
-
-### Breaking changes
-
-Very few. Check them out [here](https://docs.keycloakify.dev/migration-guides/v8-greater-than-v9).
-
-## 8.0
-
--   Much smaller .jar size. 70.2 MB -> 7.8 MB.  
-    Keycloakify now detects which of the static resources from the default theme are actually used by your theme and only include those in the .jar.
--   Build time: The first build is slowed but the subsequent build are faster. [Update your CI so that the cache is persisted across CI build](https://github.com/keycloakify/keycloakify-starter/commit/bc378d5afb67e796f520afbc348185f3e319d9d0).
-
-### Breaking changes
-
-There are very few breaking changes in this major version. [Check them out](https://docs.keycloakify.dev/migration-guides/v7-greater-than-v8).
-
-## 7.15
-
--   The i18n messages you defines in your theme are now also maid available to Keycloak.
-    In practice this mean that you can now customize the `kcContext.message.summary` that
-    display a general alert and the values returned by `kcContext.messagesPerField.get()` that
-    are used to display specific error on some field of the form.
-    [See video](https://youtu.be/D6tZcemReTI)
-
-## 7.14
-
--   Deprecate the `extraPages` build option. Keycloakify is now able to analyze your code to detect extra pages.
-
-## 7.13
-
--   Deprecate `customUserAttribute`, Keycloakify now analyze your code to predict field name usage. [See doc](https://docs.keycloakify.dev/build-options#customuserattributes).  
-    It's now mandatory to [adopt the new directory structure](https://docs.keycloakify.dev/migration-guides/v6-greater-than-v7).
-
-## 7.12
-
--   You can now pack multiple themes variant in a single `.jar` bundle. In vanilla Keycloak themes you have the ability to extend a base theme.
-    There is now an idiomatic way of achieving the same result. [Learn more](https://docs.keycloakify.dev/build-options#keycloakify.themeVariantNames).
-
-## 7.9
-
--   Separate script for copying the default theme static assets to the public directory.  
-    Theses assets are only needed for testing your theme locally in Storybook or with a `mockPageId`.  
-    You are now expected to have a `"prepare": "copy-keycloak-resources-to-public",` in your package.json scripts.  
-    This script will create `public/keycloak-assets` when you run `yarn install` (If you are using another package manager
-    like `pnpm` makes sure that `"prepare"` is actually ran.)  
-    [See the updated starter](https://github.com/keycloakify/keycloakify-starter/blob/94532fcf10bf8b19e0873be8575fd28a8958a806/package.json#L11). `public/keycloak-assets` shouldn't be tracked by GIT and is automatically ignored.
-
-## 7.7
-
--   Better storybook support, see [the starter project](https://github.com/keycloakify/keycloakify-starter).
-
-## 7.0 🍾
-
--   Account theme support 🚀
--   It's much easier to customize pages at the CSS level, you can now see in the browser dev tool the customizable classes.
--   New interactive CLI tool `npx eject-keycloak-page`, that enables to select the page you want to customize at the component level.
--   There is [a Storybook](https://storybook.keycloakify.dev)
--   [Remember me is fixed](https://github.com/keycloakify/keycloakify/pull/272)
-
-## 6.13
-
--   Build work behind corporate proxies, [see issue](https://github.com/keycloakify/keycloakify/issues/257).
-
-## 6.12
-
-Massive improvement in the developer experience:
-
--   There is now only one starter repo: https://github.com/codegouvfr/keycloakify-starter
--   A lot of comments have been added in the code of the starter to make it easier to get started.
--   The doc has been updated: https://docs.keycloakify.dev
--   A lot of improvements in the type system.
-
-## 6.11.4
-
--   You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/239).
--   Feature new build options: [`bundler`](https://docs.keycloakify.dev/build-options#keycloakify.bundler), [`groupId`](https://docs.keycloakify.dev/build-options#keycloakify.groupid), [`artifactId`](https://docs.keycloakify.dev/build-options#keycloakify.artifactid), [`version`](https://docs.keycloakify.dev/build-options#version).  
-    Theses options can be user to customize the output name of the .jar. You can use environnement variables to overrides the values read in the package.json. Thanks to @lordvlad.
-
-## 6.10.0
-
--   Widows compat (thanks to @lordvlad, [see PR](https://github.com/keycloakify/keycloakify/pull/226)). WSL is no longer required 🎉
-
-## 6.8.4
-
--   `@emotion/react` is no longer a peer dependency of Keycloakify.
-
-## 6.8.0
-
--   It is now possible to pass a custom `<Template />` component as a prop to `<KcApp />` and every
-    individual page (`<Login />`, `<RegisterUserProfile />`, ...) it enables to customize only the header and footer for
-    example without having to switch to a full-component level customization. [See issue](https://github.com/keycloakify/keycloakify/issues/191).
-
-## 6.7.0
-
--   Add support for `webauthn-authenticate.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/185).
-
-## 6.6.0
-
--   Add support for `login-password.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/184).
-
-## 6.5.0
-
--   Add support for `login-username.ftl` thanks to [@mstrodl](https://github.com/Mstrodl)'s hacktoberfest [PR](https://github.com/keycloakify/keycloakify/pull/183).
-
-## 6.4.0
-
--   You can now optionally pass a `doFetchDefaultThemeResources: boolean` prop to every page component and the default `<KcApp />`
-    This enables you to prevent the default CSS and JS that comes with the builtin Keycloak theme to be downloaded.  
-    You'll get [a black slate](https://user-images.githubusercontent.com/6702424/192619083-4baa5df4-4a21-4ec7-8e28-d200d1208299.png).
-
-## 6.0.0
-
--   Bundle size drastically reduced, locals and component dynamically loaded.
--   First print much quicker, use of React.lazy() everywhere.
--   Real i18n API.
--   Actual documentation for build options.
-
-Checkout [the migration guide](https://docs.keycloakify.dev/v5-to-v6)
-
-## 5.8.0
-
--   [React.lazy()](https://reactjs.org/docs/code-splitting.html#reactlazy) support 🎉. [#141](https://github.com/keycloakify/keycloakify/issues/141)
-
-## 5.7.0
-
--   Feat `logout-confirm.ftl`. [PR](https://github.com/keycloakify/keycloakify/pull/120)
-
-## 5.6.4
-
-Fix `login-verify-email.ftl` page. [Before](https://user-images.githubusercontent.com/6702424/177436014-0bad22c4-5bfb-45bb-8fc9-dad65143cd0c.png) - [After](https://user-images.githubusercontent.com/6702424/177435797-ec5d7db3-84cf-49cb-8efc-3427a81f744e.png)
-
-## 5.6.0
-
-Add support for `login-config-totp.ftl` page [#127](https://github.com/keycloakify/keycloakify/pull/127).
-
-## 5.3.0
-
-Rename `keycloak_theme_email` to `keycloak_email`.  
-If you already had a `keycloak_theme_email` you should rename it `keycloak_email`.
-
-## 5.0.0
-
-[Migration guide](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63)  
-New i18n system.  
-Import of terms and services have changed. [See example](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63).
-
-## 4.10.0
-
-Add `login-idp-link-email.ftl` page [See PR](https://github.com/keycloakify/keycloakify/pull/92).
-
-## 4.8.0
-
-[Email template customization.](#email-template-customization)
-
-## 4.7.4
-
-**M1 Mac** support (for testing locally with a dockerized Keycloak).
-
-## 4.7.2
-
-> WARNING: This is broken.  
-> Testing with local Keycloak container working with M1 Mac. Thanks to [@eduardosanzb](https://github.com/keycloakify/keycloakify/issues/43#issuecomment-975699658).  
-> Be aware: When running M1s you are testing with Keycloak v15 else the local container spun will be a Keycloak v16.1.0.
-
-## 4.7.0
-
-Register with user profile enabled: Out of the box `options` validator support.  
-[Example](https://user-images.githubusercontent.com/6702424/158911163-81e6bbe8-feb0-4dc8-abff-de199d7a678e.mov)
-
-## 4.6.0
-
-`tss-react` and `powerhooks` are no longer peer dependencies of `keycloakify`.
-After updating Keycloakify you can remove `tss-react` and `powerhooks` from your dependencies if you don't use them explicitly.
-
-## 4.5.3
-
-There is a new recommended way to setup highly customized theme. See [here](https://github.com/garronej/keycloakify-demo-app/blob/look_and_feel/src/KcApp/KcApp.tsx).  
-Unlike with [the previous recommended method](https://github.com/garronej/keycloakify-demo-app/blob/a51660578bea15fb3e506b8a2b78e1056c6d68bb/src/KcApp/KcApp.tsx),
-with this new method your theme wont break on minor Keycloakify update.
-
-## 4.3.0
-
-Feature [`login-update-password.ftl`](https://user-images.githubusercontent.com/6702424/147517600-6191cf72-93dd-437b-a35c-47180142063e.png).  
-Every time a page is added it's a breaking change for non CSS-only theme.  
-Change [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L17) and [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L37) to update.
-
-## 4
-
--   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
--   Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
-
-## 3
-
-No breaking changes except that `@emotion/react`, [`tss-react`](https://www.npmjs.com/package/tss-react) and [`powerhooks`](https://www.npmjs.com/package/powerhooks) are now `peerDependencies` instead of being just dependencies.  
-It's important to avoid problem when using `keycloakify` alongside [`mui`](https://mui.com) and
-[when passing params from the app to the login page](https://github.com/keycloakify/keycloakify#implement-context-persistence-optional).
-
-## 2.5
-
--   Feature [Use advanced message](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/i18n/useKcMessage.tsx#L53-L66)
-    and [`messagesPerFields`](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/getKcContext/KcContextBase.ts#L70-L75) (implementation [here](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/generateFtl/common.ftl#L130-L189))
--   Test container now uses Keycloak version `15.0.2`.
-
-## 2
-
--   It's now possible to implement custom `.ftl` pages.
--   Support for Keycloak plugins that introduce non standard ftl values.
-    (Like for example [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) that define `authorizedMailDomains` in `register.ftl`).

package.json

@@ -1,21 +1,20 @@
 {
     "name": "keycloakify",
-    "version": "10.0.0-rc.76",
-    "description": "Create Keycloak themes using React",
+    "version": "11.0.0",
+    "description": "Framework to create custom Keycloak UIs",
     "repository": {
         "type": "git",
         "url": "git://github.com/keycloakify/keycloakify.git"
     },
     "scripts": {
         "prepare": "tsx scripts/generate-i18n-messages.ts",
-        "build": "tsx scripts/build.ts",
+        "build": "tsx scripts/build/main.ts",
         "storybook": "tsx scripts/start-storybook.ts",
         "link-in-starter": "tsx scripts/link-in-starter.ts",
         "test": "yarn test:types && vitest run",
         "test:types": "tsc -p test/tsconfig.json --noEmit",
         "_format": "prettier '**/*.{ts,tsx,json,md}'",
         "format": "yarn _format --write",
-        "format:check": "yarn _format --list-different",
         "link-in-app": "tsx scripts/link-in-app.ts",
         "build-storybook": "tsx scripts/build-storybook.ts",
         "dump-keycloak-realm": "tsx scripts/dump-keycloak-realm.ts"
@@ -41,14 +40,14 @@
         "!dist/bin/",
         "dist/bin/main.js",
         "dist/bin/*.index.js",
-        "!dist/bin/shared/*.js",
+        "dist/bin/*.node",
         "dist/bin/shared/constants.js",
         "dist/bin/shared/*.d.ts",
         "dist/bin/shared/*.js.map",
         "!dist/vite-plugin/",
+        "dist/vite-plugin/index.js",
         "dist/vite-plugin/index.d.ts",
-        "dist/vite-plugin/vite-plugin.d.ts",
-        "dist/vite-plugin/index.js"
+        "dist/vite-plugin/vite-plugin.d.ts"
     ],
     "keywords": [
         "keycloak",
@@ -62,11 +61,7 @@
         "bluehats"
     ],
     "homepage": "https://www.keycloakify.dev",
-    "peerDependencies": {
-        "react": "*"
-    },
     "dependencies": {
-        "react-markdown": "^5.0.3",
         "tsafe": "^1.6.6"
     },
     "devDependencies": {
@@ -77,14 +72,10 @@
         "@emotion/react": "^11.11.4",
         "@octokit/rest": "^20.1.1",
         "@storybook/addon-a11y": "^6.5.16",
-        "@storybook/addon-actions": "^6.5.13",
-        "@storybook/addon-essentials": "^6.5.13",
-        "@storybook/addon-interactions": "^6.5.13",
-        "@storybook/addon-links": "^6.5.13",
         "@storybook/builder-webpack5": "^6.5.13",
         "@storybook/manager-webpack5": "^6.5.13",
         "@storybook/react": "^6.5.13",
-        "@storybook/testing-library": "^0.0.13",
+        "eslint-plugin-storybook": "^0.6.7",
         "@types/babel__generator": "^7.6.4",
         "@types/make-fetch-happen": "^10.0.1",
         "@types/minimist": "^1.2.2",
@@ -94,10 +85,9 @@
         "@types/yauzl": "^2.10.3",
         "@vercel/ncc": "^0.38.1",
         "chalk": "^4.1.2",
-        "cheerio": "^1.0.0-rc.12",
+        "cheerio": "1.0.0-rc.12",
         "chokidar-cli": "^3.0.0",
         "cli-select": "^1.1.2",
-        "eslint-plugin-storybook": "^0.6.7",
         "husky": "^4.3.8",
         "lint-staged": "^11.0.0",
         "magic-string": "^0.30.7",
@@ -113,12 +103,20 @@
         "termost": "^v0.12.1",
         "tsc-alias": "^1.8.10",
         "tss-react": "^4.9.10",
-        "typescript": "^4.9.1-beta",
+        "typescript": "^4.9.4",
         "vite": "^5.2.11",
         "vitest": "^1.6.0",
         "yauzl": "^2.10.0",
         "zod": "^3.17.10",
         "evt": "^2.5.7",
-        "tsx": "^4.15.5"
+        "tsx": "^4.15.5",
+        "html-entities": "^2.5.2",
+        "isomorphic-dompurify": "^2.15.0",
+        "dompurify": "^3.1.6",
+        "@types/dompurify": "^2.0.0",
+        "webpack": "5.93.0",
+        "webpack-cli": "5.1.4",
+        "babel-loader": "9.1.3",
+        "@babel/preset-env": "7.24.8"
     }
 }

scripts/build-storybook.ts

@@ -1,19 +1,4 @@
-import * as child_process from "child_process";
-import { join } from "path";
+import { run } from "./shared/run";
 
 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

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

scripts/build/createAccountV1Dir.ts

@@ -0,0 +1,79 @@
+import * as fs from "fs";
+import { join as pathJoin } from "path";
+import { transformCodebase } from "../../src/bin/tools/transformCodebase";
+import { downloadKeycloakDefaultTheme } from "../shared/downloadKeycloakDefaultTheme";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../../src/bin/shared/constants";
+import { getThisCodebaseRootDirPath } from "../../src/bin/tools/getThisCodebaseRootDirPath";
+import { accountMultiPageSupportedLanguages } from "../generate-i18n-messages";
+import * as fsPr from "fs/promises";
+
+export async function createAccountV1Dir() {
+    const { extractedDirPath } = await downloadKeycloakDefaultTheme({
+        keycloakVersionId: "FOR_ACCOUNT_MULTI_PAGE"
+    });
+
+    const destDirPath = pathJoin(
+        getThisCodebaseRootDirPath(),
+        "dist",
+        "res",
+        "account-v1"
+    );
+
+    await fsPr.rm(destDirPath, { recursive: true, force: true });
+
+    transformCodebase({
+        srcDirPath: pathJoin(extractedDirPath, "base", "account"),
+        destDirPath
+    });
+
+    transformCodebase({
+        srcDirPath: pathJoin(extractedDirPath, "keycloak", "account", "resources"),
+        destDirPath: pathJoin(destDirPath, "resources")
+    });
+
+    transformCodebase({
+        srcDirPath: pathJoin(extractedDirPath, "keycloak", "common", "resources"),
+        destDirPath: pathJoin(
+            destDirPath,
+            "resources",
+            WELL_KNOWN_DIRECTORY_BASE_NAME.RESOURCES_COMMON
+        )
+    });
+
+    fs.writeFileSync(
+        pathJoin(destDirPath, "theme.properties"),
+        Buffer.from(
+            [
+                "accountResourceProvider=account-v1",
+                "",
+                `locales=${accountMultiPageSupportedLanguages.join(",")}`,
+                "",
+                "styles=" +
+                    [
+                        "css/account.css",
+                        "img/icon-sidebar-active.png",
+                        "img/logo.png",
+                        ...[
+                            "patternfly.min.css",
+                            "patternfly-additions.min.css",
+                            "patternfly-additions.min.css"
+                        ].map(
+                            fileBasename =>
+                                `${WELL_KNOWN_DIRECTORY_BASE_NAME.RESOURCES_COMMON}/node_modules/patternfly/dist/css/${fileBasename}`
+                        )
+                    ].join(" "),
+                "",
+                "##### css classes for form buttons",
+                "# main class used for all buttons",
+                "kcButtonClass=btn",
+                "# classes defining priority of the button - primary or default (there is typically only one priority button for the form)",
+                "kcButtonPrimaryClass=btn-primary",
+                "kcButtonDefaultClass=btn-default",
+                "# classes defining size of the button",
+                "kcButtonLargeClass=btn-lg",
+                ""
+            ].join("\n"),
+            "utf8"
+        )
+    );
+}

scripts/build/createPublicKeycloakifyDevResourcesDir.ts

@@ -0,0 +1,73 @@
+import { join as pathJoin } from "path";
+import { downloadKeycloakDefaultTheme } from "../shared/downloadKeycloakDefaultTheme";
+import { transformCodebase } from "../../src/bin/tools/transformCodebase";
+import { existsAsync } from "../../src/bin/tools/fs.existsAsync";
+import { getThisCodebaseRootDirPath } from "../../src/bin/tools/getThisCodebaseRootDirPath";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../../src/bin/shared/constants";
+import { assert, type Equals } from "tsafe/assert";
+import * as fsPr from "fs/promises";
+
+export async function createPublicKeycloakifyDevResourcesDir() {
+    await Promise.all(
+        (["login", "account"] as const).map(async themeType => {
+            const { extractedDirPath } = await downloadKeycloakDefaultTheme({
+                keycloakVersionId: (() => {
+                    switch (themeType) {
+                        case "login":
+                            return "FOR_LOGIN_THEME";
+                        case "account":
+                            return "FOR_ACCOUNT_MULTI_PAGE";
+                    }
+                    assert<Equals<typeof themeType, never>>();
+                })()
+            });
+
+            const destDirPath = pathJoin(
+                getThisCodebaseRootDirPath(),
+                "dist",
+                "res",
+                "public",
+                WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES,
+                themeType
+            );
+
+            await fsPr.rm(destDirPath, { recursive: true, force: true });
+
+            base_resources: {
+                const srcDirPath = pathJoin(
+                    extractedDirPath,
+                    "base",
+                    themeType,
+                    "resources"
+                );
+
+                if (!(await existsAsync(srcDirPath))) {
+                    break base_resources;
+                }
+
+                transformCodebase({
+                    srcDirPath,
+                    destDirPath
+                });
+            }
+
+            transformCodebase({
+                srcDirPath: pathJoin(
+                    extractedDirPath,
+                    "keycloak",
+                    themeType,
+                    "resources"
+                ),
+                destDirPath
+            });
+
+            transformCodebase({
+                srcDirPath: pathJoin(extractedDirPath, "keycloak", "common", "resources"),
+                destDirPath: pathJoin(
+                    destDirPath,
+                    WELL_KNOWN_DIRECTORY_BASE_NAME.RESOURCES_COMMON
+                )
+            });
+        })
+    );
+}

scripts/build/main.ts

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

scripts/build/vendorFrontendDependencies.ts

@@ -0,0 +1,103 @@
+import * as fs from "fs";
+import {
+    join as pathJoin,
+    relative as pathRelative,
+    basename as pathBasename,
+    dirname as pathDirname
+} from "path";
+import { assert } from "tsafe/assert";
+import { run } from "../shared/run";
+import { cacheDirPath as cacheDirPath_base } from "../shared/cacheDirPath";
+
+export function vendorFrontendDependencies(params: { distDirPath: string }) {
+    const { distDirPath } = params;
+
+    const vendorDirPath = pathJoin(distDirPath, "tools", "vendor");
+    const cacheDirPath = pathJoin(cacheDirPath_base, "vendorFrontendDependencies");
+
+    const extraBundleFileBasenames = new Set<string>();
+
+    fs.readdirSync(vendorDirPath)
+        .filter(fileBasename => fileBasename.endsWith(".js"))
+        .map(fileBasename => pathJoin(vendorDirPath, fileBasename))
+        .forEach(filePath => {
+            {
+                const mapFilePath = `${filePath}.map`;
+
+                if (fs.existsSync(mapFilePath)) {
+                    fs.unlinkSync(mapFilePath);
+                }
+            }
+
+            if (!fs.existsSync(cacheDirPath)) {
+                fs.mkdirSync(cacheDirPath, { recursive: true });
+            }
+
+            const webpackConfigJsFilePath = pathJoin(cacheDirPath, "webpack.config.js");
+            const webpackOutputDirPath = pathJoin(cacheDirPath, "webpack_output");
+            const webpackOutputFilePath = pathJoin(webpackOutputDirPath, "index.js");
+
+            fs.writeFileSync(
+                webpackConfigJsFilePath,
+                Buffer.from(
+                    [
+                        `const path = require('path');`,
+                        ``,
+                        `module.exports = {`,
+                        `   mode: 'production',`,
+                        `  entry: '${filePath}',`,
+                        `  output: {`,
+                        `    path: '${webpackOutputDirPath}',`,
+                        `    filename: '${pathBasename(webpackOutputFilePath)}',`,
+                        `    libraryTarget: 'module',`,
+                        `  },`,
+                        `  target: "web",`,
+                        `  module: {`,
+                        `    rules: [`,
+                        `      {`,
+                        `        test: /\.js$/,`,
+                        `        use: {`,
+                        `          loader: 'babel-loader',`,
+                        `          options: {`,
+                        `            presets: ['@babel/preset-env'],`,
+                        `          }`,
+                        `        }`,
+                        `      }`,
+                        `    ]`,
+                        `  },`,
+                        `  experiments: {`,
+                        `    outputModule: true`,
+                        `  }`,
+                        `};`
+                    ].join("\n")
+                )
+            );
+
+            run(
+                `npx webpack --config ${pathRelative(process.cwd(), webpackConfigJsFilePath)}`
+            );
+
+            fs.readdirSync(webpackOutputDirPath)
+                .filter(fileBasename => !fileBasename.endsWith(".txt"))
+                .map(fileBasename => pathJoin(webpackOutputDirPath, fileBasename))
+                .forEach(bundleFilePath => {
+                    assert(bundleFilePath.endsWith(".js"));
+
+                    if (pathBasename(bundleFilePath) === "index.js") {
+                        fs.renameSync(webpackOutputFilePath, filePath);
+                    } else {
+                        const bundleFileBasename = pathBasename(bundleFilePath);
+
+                        assert(!extraBundleFileBasenames.has(bundleFileBasename));
+                        extraBundleFileBasenames.add(bundleFileBasename);
+
+                        fs.renameSync(
+                            bundleFilePath,
+                            pathJoin(pathDirname(filePath), bundleFileBasename)
+                        );
+                    }
+                });
+
+            fs.rmSync(webpackOutputDirPath, { recursive: true });
+        });
+}

scripts/dump-keycloak-realm.ts

@@ -1,4 +1,4 @@
-import { containerName } from "../src/bin/shared/constants";
+import { CONTAINER_NAME } from "../src/bin/shared/constants";
 import child_process from "child_process";
 import { SemVer } from "../src/bin/tools/SemVer";
 import { join as pathJoin, relative as pathRelative } from "path";
@@ -6,6 +6,7 @@ import chalk from "chalk";
 import { Deferred } from "evt/tools/Deferred";
 import { assert } from "tsafe/assert";
 import { is } from "tsafe/is";
+import { run } from "./shared/run";
 
 (async () => {
     {
@@ -14,7 +15,7 @@ import { is } from "tsafe/is";
         const child = child_process.spawn(
             "docker",
             [
-                ...["exec", containerName],
+                ...["exec", CONTAINER_NAME],
                 ...["/opt/keycloak/bin/kc.sh", "export"],
                 ...["--dir", "/tmp"],
                 ...["--realm", "myrealm"],
@@ -62,7 +63,7 @@ import { is } from "tsafe/is";
 
     const keycloakMajorVersionNumber = SemVer.parse(
         child_process
-            .execSync(`docker inspect --format '{{.Config.Image}}' ${containerName}`)
+            .execSync(`docker inspect --format '{{.Config.Image}}' ${CONTAINER_NAME}`)
             .toString("utf8")
             .trim()
             .split(":")[1]
@@ -80,13 +81,7 @@ import { is } from "tsafe/is";
         )
     );
 
-    run(`docker cp ${containerName}:/tmp/myrealm-realm.json ${targetFilePath}`);
+    run(`docker cp ${CONTAINER_NAME}:/tmp/myrealm-realm.json ${targetFilePath}`);
 
     console.log(`${chalk.green(`✓ Exported realm to`)} ${chalk.bold(targetFilePath)}`);
 })();
-
-function run(command: string) {
-    console.log(chalk.grey(`$ ${command}`));
-
-    return child_process.execSync(command, { stdio: "inherit" });
-}

scripts/generate-i18n-messages.ts

@@ -1,4 +1,3 @@
-import "minimal-polyfills/Object.fromEntries";
 import * as fs from "fs";
 import {
     join as pathJoin,
@@ -6,77 +5,93 @@ import {
     dirname as pathDirname,
     sep as pathSep
 } from "path";
-import { assert } from "tsafe/assert";
+import { assert, type Equals } from "tsafe/assert";
 import { same } from "evt/tools/inDepth";
 import { crawl } from "../src/bin/tools/crawl";
-import { downloadKeycloakDefaultTheme } from "../src/bin/shared/downloadKeycloakDefaultTheme";
+import { downloadKeycloakDefaultTheme } from "./shared/downloadKeycloakDefaultTheme";
 import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRootDirPath";
 import { deepAssign } from "../src/tools/deepAssign";
+import { THEME_TYPES } from "../src/bin/shared/constants";
+import { transformCodebase } from "../src/bin/tools/transformCodebase";
+const propertiesParser: any = require("properties-parser");
 
-// NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
-// update the version array for generating for newer version.
-
-//@ts-ignore
-const propertiesParser = require("properties-parser");
-
-async function main() {
-    const keycloakVersion = "24.0.4";
+if (require.main === module) {
+    generateI18nMessages();
+}
 
+async function generateI18nMessages() {
     const thisCodebaseRootDirPath = getThisCodebaseRootDirPath();
 
-    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
-        keycloakVersion,
-        buildContext: {
-            cacheDirPath: pathJoin(
-                thisCodebaseRootDirPath,
-                "node_modules",
-                ".cache",
-                "keycloakify"
-            ),
-            npmWorkspaceRootDirPath: thisCodebaseRootDirPath
-        }
-    });
+    const accountI18nDirPath = pathJoin(
+        thisCodebaseRootDirPath,
+        "src",
+        "account",
+        "i18n"
+    );
+
+    if (fs.existsSync(accountI18nDirPath)) {
+        fs.rmSync(accountI18nDirPath, { recursive: true });
+    }
 
     type Dictionary = { [idiomId: string]: string };
 
-    const record: { [typeOfPage: string]: { [language: string]: Dictionary } } = {};
+    const record: { [themeType: string]: { [language: string]: Dictionary } } = {};
 
-    {
-        const baseThemeDirPath = pathJoin(defaultThemeDirPath, "base");
-        const re = new RegExp(
-            `^([^\\${pathSep}]+)\\${pathSep}messages\\${pathSep}messages_([^.]+).properties$`
-        );
-
-        crawl({
-            dirPath: baseThemeDirPath,
-            returnedPathsType: "relative to dirPath"
-        }).forEach(filePath => {
-            const match = filePath.match(re);
-
-            if (match === null) {
-                return;
-            }
-
-            const [, typeOfPage, language] = match;
-
-            (record[typeOfPage] ??= {})[language.replace(/_/g, "-")] = Object.fromEntries(
-                Object.entries(
-                    propertiesParser.parse(
-                        fs
-                            .readFileSync(pathJoin(baseThemeDirPath, filePath))
-                            .toString("utf8")
-                    )
-                ).map(([key, value]: any) => [
-                    key === "locale_pt_BR" ? "locale_pt-BR" : key,
-                    value.replace(/''/g, "'")
-                ])
-            );
+    for (const themeType of THEME_TYPES) {
+        const { extractedDirPath } = await downloadKeycloakDefaultTheme({
+            keycloakVersionId: (() => {
+                switch (themeType) {
+                    case "login":
+                        return "FOR_LOGIN_THEME";
+                    case "account":
+                        return "FOR_ACCOUNT_MULTI_PAGE";
+                }
+                assert<Equals<typeof themeType, never>>();
+            })()
         });
-    }
 
-    Object.keys(record).forEach(themeType => {
-        if (themeType !== "login" && themeType !== "account") {
-            return;
+        {
+            const baseThemeDirPath = pathJoin(extractedDirPath, "base");
+            const re = new RegExp(
+                `^([^\\${pathSep}]+)\\${pathSep}messages\\${pathSep}messages_([^.]+).properties$`
+            );
+
+            crawl({
+                dirPath: baseThemeDirPath,
+                returnedPathsType: "relative to dirPath"
+            }).forEach(filePath => {
+                const match = filePath.match(re);
+
+                if (match === null) {
+                    return;
+                }
+
+                const [, themeType_here, language] = match;
+
+                if (themeType_here !== themeType) {
+                    return;
+                }
+
+                (record[themeType] ??= {})[language.replace(/_/g, "-")] =
+                    Object.fromEntries(
+                        Object.entries(
+                            propertiesParser.parse(
+                                fs
+                                    .readFileSync(pathJoin(baseThemeDirPath, filePath))
+                                    .toString("utf8")
+                            ) as Record<string, string>
+                        )
+                            .map(([key, value]) => [key, value.replace(/''/g, "'")])
+                            .map(([key, value]) => [
+                                key === "locale_pt_BR" ? "locale_pt-BR" : key,
+                                value
+                            ])
+                            .map(([key, value]) => [
+                                key,
+                                key === "termsText" ? "" : value
+                            ])
+                    );
+            });
         }
 
         const recordForThemeType = record[themeType];
@@ -93,6 +108,29 @@ async function main() {
             assert(false);
         })();
 
+        /* Migration helper
+
+        console.log({ themeType });
+
+        {
+
+            const all = new Set<string>();
+
+            languages.forEach(languages => all.add(languages));
+            const currentlySupportedLanguages = Object.keys(keycloakifyExtraMessages);
+            currentlySupportedLanguages.forEach(languages => all.add(languages));
+
+            all.forEach(language => {
+                console.log([
+                    `"${language}": `,
+                    `isInLanguages: ${languages.includes(language)}`,
+                    `isInKeycloakifyExtraMessages: ${currentlySupportedLanguages.includes(language)}`
+                ].join(" "))
+            });
+
+        }
+        */
+
         assert(
             same(languages, Object.keys(keycloakifyExtraMessages), {
                 takeIntoAccountArraysOrdering: false
@@ -104,12 +142,32 @@ async function main() {
             source: keycloakifyExtraMessages
         });
 
-        const baseMessagesDirPath = pathJoin(
+        const messagesDirPath = pathJoin(
             thisCodebaseRootDirPath,
             "src",
             themeType,
             "i18n",
-            "baseMessages"
+            "messages_defaultSet"
+        );
+
+        if (!fs.existsSync(messagesDirPath)) {
+            fs.mkdirSync(messagesDirPath, { recursive: true });
+        }
+
+        fs.writeFileSync(
+            pathJoin(messagesDirPath, "types.ts"),
+            Buffer.from(
+                [
+                    ``,
+                    `export const languageTags = ${JSON.stringify(languages, null, 2)} as const;`,
+                    ``,
+                    `export type LanguageTag = typeof languageTags[number];`,
+                    ``,
+                    `export type MessageKey = keyof typeof import("./en")["default"];`,
+                    ``
+                ].join("\n"),
+                "utf8"
+            )
         );
 
         const generatedFileHeader = [
@@ -121,7 +179,7 @@ async function main() {
         ].join("\n");
 
         languages.forEach(language => {
-            const filePath = pathJoin(baseMessagesDirPath, `${language}.ts`);
+            const filePath = pathJoin(messagesDirPath, `${language}.ts`);
 
             fs.mkdirSync(pathDirname(filePath), { recursive: true });
 
@@ -149,14 +207,14 @@ async function main() {
         });
 
         fs.writeFileSync(
-            pathJoin(baseMessagesDirPath, "index.ts"),
+            pathJoin(messagesDirPath, "index.ts"),
             Buffer.from(
                 [
                     generatedFileHeader,
                     `import * as en from "./en";`,
                     "",
-                    "export async function getMessages(currentLanguageTag: string) {",
-                    "    const { default: messages } = await (() => {",
+                    "export async function fetchMessages_defaultSet(currentLanguageTag: string) {",
+                    "    const { default: messages_defaultSet } = await (() => {",
                     "        switch (currentLanguageTag) {",
                     `            case "en": return en;`,
                     ...languages
@@ -168,12 +226,24 @@ async function main() {
                     '            default: return { "default": {} };',
                     "        }",
                     "    })();",
-                    "    return messages;",
+                    "    return messages_defaultSet;",
                     "}"
                 ].join("\n"),
                 "utf8"
             )
         );
+    }
+
+    transformCodebase({
+        srcDirPath: pathJoin(thisCodebaseRootDirPath, "src", "login", "i18n"),
+        destDirPath: accountI18nDirPath,
+        transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+            if (fileRelativePath.startsWith("messages_defaultSet")) {
+                return undefined;
+            }
+
+            return { modifiedSourceCode: sourceCode };
+        }
     });
 }
 
@@ -197,6 +267,7 @@ const keycloakifyExtraMessages_login: Record<
     | "nl"
     | "no"
     | "pl"
+    | "pt"
     | "pt-BR"
     | "ru"
     | "sk"
@@ -204,7 +275,9 @@ const keycloakifyExtraMessages_login: Record<
     | "th"
     | "tr"
     | "uk"
-    | "zh-CN",
+    | "ka"
+    | "zh-CN"
+    | "zh-TW",
     Record<
         | "shouldBeEqual"
         | "shouldBeDifferent"
@@ -428,6 +501,17 @@ const keycloakifyExtraMessages_login: Record<
         addValue: "Dodaj wartość",
         languages: "Języki"
     },
+    pt: {
+        shouldBeEqual: "{0} deve ser igual a {1}",
+        shouldBeDifferent: "{0} deve ser diferente de {1}",
+        shouldMatchPattern: "O padrão deve corresponder: `/{0}/`",
+        mustBeAnInteger: "Deve ser um número inteiro",
+        notAValidOption: "Não é uma opção válida",
+        selectAnOption: "Selecione uma opção",
+        remove: "Remover",
+        addValue: "Adicionar valor",
+        languages: "Idiomas"
+    },
     "pt-BR": {
         shouldBeEqual: "{0} deve ser igual a {1}",
         shouldBeDifferent: "{0} deve ser diferente de {1}",
@@ -505,6 +589,17 @@ const keycloakifyExtraMessages_login: Record<
         addValue: "Додати значення",
         languages: "Мови"
     },
+    ka: {
+        shouldBeEqual: "{0} უნდა იყოს ტოლი {1}-სთვის",
+        shouldBeDifferent: "{0} უნდა იყოს სხვა {1}-სთვის",
+        shouldMatchPattern: "შაბლონს უნდა ემთხვევა: `/{0}/`",
+        mustBeAnInteger: "უნდა იყოს მთელი რიცხვი",
+        notAValidOption: "არასწორი ვარიანტი",
+        selectAnOption: "აირჩიეთ ვარიანტი",
+        remove: "წაშალეთ",
+        addValue: "დაამატეთ მნიშვნელობა",
+        languages: "ენები"
+    },
     "zh-CN": {
         shouldBeEqual: "{0} 应该等于 {1}",
         shouldBeDifferent: "{0} 应该不同于 {1}",
@@ -515,38 +610,49 @@ const keycloakifyExtraMessages_login: Record<
         remove: "移除",
         addValue: "添加值",
         languages: "语言"
+    },
+    "zh-TW": {
+        shouldBeEqual: "{0} 應該等於 {1}",
+        shouldBeDifferent: "{0} 應該不同於 {1}",
+        shouldMatchPattern: "模式應匹配: `/{0}/`",
+        mustBeAnInteger: "必須是整數",
+        notAValidOption: "不是有效選項",
+        selectAnOption: "選擇一個選項",
+        remove: "移除",
+        addValue: "添加值",
+        languages: "語言"
     }
     /* spell-checker: enable */
 };
 
+export const accountMultiPageSupportedLanguages = [
+    "en",
+    "ar",
+    "ca",
+    "cs",
+    "da",
+    "de",
+    "es",
+    "fi",
+    "fr",
+    "hu",
+    "it",
+    "ja",
+    "lt",
+    "lv",
+    "nl",
+    "no",
+    "pl",
+    "pt-BR",
+    "ru",
+    "sk",
+    "sv",
+    "tr",
+    "zh-CN"
+] as const;
+
 const keycloakifyExtraMessages_account: Record<
-    | "en"
-    | "ar"
-    | "ca"
-    | "cs"
-    | "da"
-    | "de"
-    | "el"
-    | "es"
-    | "fa"
-    | "fi"
-    | "fr"
-    | "hu"
-    | "it"
-    | "ja"
-    | "lt"
-    | "lv"
-    | "nl"
-    | "no"
-    | "pl"
-    | "pt-BR"
-    | "ru"
-    | "sk"
-    | "sv"
-    | "th"
-    | "tr"
-    | "uk"
-    | "zh-CN",
+    (typeof accountMultiPageSupportedLanguages)[number],
     Record<"newPasswordSameAsOld" | "passwordConfirmNotMatch", string>
 > = {
     en: {
@@ -574,18 +680,10 @@ const keycloakifyExtraMessages_account: Record<
         newPasswordSameAsOld: "Das neue Passwort muss sich vom alten unterscheiden",
         passwordConfirmNotMatch: "Passwortbestätigung stimmt nicht überein"
     },
-    el: {
-        newPasswordSameAsOld: "Ο νέος κωδικός πρόσβασης πρέπει να διαφέρει από τον παλιό",
-        passwordConfirmNotMatch: "Η επιβεβαίωση του κωδικού πρόσβασης δεν ταιριάζει"
-    },
     es: {
         newPasswordSameAsOld: "La nueva contraseña debe ser diferente de la anterior",
         passwordConfirmNotMatch: "La confirmación de la contraseña no coincide"
     },
-    fa: {
-        newPasswordSameAsOld: "رمز عبور جدید باید با رمز عبور قبلی متفاوت باشد",
-        passwordConfirmNotMatch: "تأیید رمز عبور مطابقت ندارد"
-    },
     fi: {
         newPasswordSameAsOld: "Uusi salasana on oltava erilainen kuin vanha",
         passwordConfirmNotMatch: "Salasanan vahvistus ei täsmää"
@@ -643,25 +741,13 @@ const keycloakifyExtraMessages_account: Record<
         newPasswordSameAsOld: "Det nya lösenordet måste skilja sig från det gamla",
         passwordConfirmNotMatch: "Lösenordsbekräftelsen matchar inte"
     },
-    th: {
-        newPasswordSameAsOld: "รหัสผ่านใหม่ต้องต่างจากรหัสผ่านเดิม",
-        passwordConfirmNotMatch: "การยืนยันรหัสผ่านไม่ตรงกัน"
-    },
     tr: {
         newPasswordSameAsOld: "Yeni şifre eskisinden farklı olmalıdır",
         passwordConfirmNotMatch: "Şifre doğrulama eşleşmiyor"
     },
-    uk: {
-        newPasswordSameAsOld: "Новий пароль повинен відрізнятися від старого",
-        passwordConfirmNotMatch: "Підтвердження пароля не співпадає"
-    },
     "zh-CN": {
         newPasswordSameAsOld: "新密码必须与旧密码不同",
         passwordConfirmNotMatch: "密码确认不匹配"
     }
     /* spell-checker: enable */
 };
-
-if (require.main === module) {
-    main();
-}

scripts/grant-exec-perms.ts

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

scripts/link-in-app.ts

@@ -44,6 +44,12 @@ const commonThirdPartyDeps = [
         .replace(/"!dist\//g, '"!')
         .replace(/"!\.\/dist\//g, '"!./');
 
+    modifiedPackageJsonContent = JSON.stringify(
+        { ...JSON.parse(modifiedPackageJsonContent), version: "0.0.0" },
+        null,
+        4
+    );
+
     fs.writeFileSync(
         pathJoin(rootDirPath, "dist", "package.json"),
         Buffer.from(modifiedPackageJsonContent, "utf8")

scripts/link-in-starter.ts

@@ -1,28 +1,49 @@
-import * as child_process from "child_process";
 import * as fs from "fs";
 import { join } from "path";
-import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange";
+import { startRebuildOnSrcChange } from "./shared/startRebuildOnSrcChange";
+import { crawl } from "../src/bin/tools/crawl";
+import { run } from "./shared/run";
+
+{
+    const dirPath = "node_modules";
+
+    try {
+        fs.rmSync(dirPath, { recursive: true, force: true });
+    } catch {
+        // NOTE: This is a workaround for windows
+        // we can't remove locked executables.
+
+        crawl({
+            dirPath,
+            returnedPathsType: "absolute"
+        }).forEach(filePath => {
+            try {
+                fs.rmSync(filePath, { force: true });
+            } catch (error) {
+                if (filePath.endsWith(".exe")) {
+                    return;
+                }
+                throw error;
+            }
+        });
+    }
+}
 
-fs.rmSync("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"), {
+const starterName = "keycloakify-starter";
+
+fs.rmSync(join("..", starterName, "node_modules"), {
     recursive: true,
     force: true
 });
 
-run("yarn install", { cwd: join("..", "keycloakify-starter") });
+run("yarn install", { cwd: join("..", starterName) });
 
-run(`npx tsx ${join("scripts", "link-in-app.ts")} keycloakify-starter`);
+run(`npx tsx ${join("scripts", "link-in-app.ts")} ${starterName}`);
 
 startRebuildOnSrcChange();
-
-function run(command: string, options?: { cwd: string }) {
-    console.log(`$ ${command}`);
-
-    child_process.execSync(command, { stdio: "inherit", ...options });
-}

scripts/shared/cacheDirPath.ts

@@ -0,0 +1,9 @@
+import { join as pathJoin } from "path";
+import { getThisCodebaseRootDirPath } from "../../src/bin/tools/getThisCodebaseRootDirPath";
+
+export const cacheDirPath = pathJoin(
+    getThisCodebaseRootDirPath(),
+    "node_modules",
+    ".cache",
+    "scripts"
+);

scripts/shared/downloadKeycloakDefaultTheme.ts

@@ -1,30 +1,33 @@
-import { join as pathJoin, relative as pathRelative } from "path";
-import { type BuildContext } from "./buildContext";
-import { assert } from "tsafe/assert";
-import { lastKeycloakVersionWithAccountV1 } from "./constants";
-import { downloadAndExtractArchive } from "../tools/downloadAndExtractArchive";
+import { relative as pathRelative } from "path";
+import { downloadAndExtractArchive } from "../../src/bin/tools/downloadAndExtractArchive";
+import { getProxyFetchOptions } from "../../src/bin/tools/fetchProxyOptions";
+import { join as pathJoin } from "path";
+import { assert, type Equals } from "tsafe/assert";
+import { cacheDirPath } from "./cacheDirPath";
+import { getThisCodebaseRootDirPath } from "../../src/bin/tools/getThisCodebaseRootDirPath";
 
-export type BuildContextLike = {
-    cacheDirPath: string;
-    npmWorkspaceRootDirPath: string;
-};
-
-assert<BuildContext extends BuildContextLike ? true : false>();
+const KEYCLOAK_VERSION = {
+    FOR_LOGIN_THEME: "25.0.4",
+    FOR_ACCOUNT_MULTI_PAGE: "21.1.2"
+} as const;
 
 export async function downloadKeycloakDefaultTheme(params: {
-    keycloakVersion: string;
-    buildContext: BuildContextLike;
-}): Promise<{ defaultThemeDirPath: string }> {
-    const { keycloakVersion, buildContext } = params;
+    keycloakVersionId: keyof typeof KEYCLOAK_VERSION;
+}) {
+    const { keycloakVersionId } = params;
 
-    let kcNodeModulesKeepFilePaths: string[] | undefined = undefined;
-    let kcNodeModulesKeepFilePaths_lastAccountV1: string[] | undefined = undefined;
+    const keycloakVersion = KEYCLOAK_VERSION[keycloakVersionId];
+
+    let kcNodeModulesKeepFilePaths: Set<string> | undefined = undefined;
+    let kcNodeModulesKeepFilePaths_lastAccountV1: Set<string> | undefined = undefined;
 
     const { extractedDirPath } = await downloadAndExtractArchive({
         url: `https://repo1.maven.org/maven2/org/keycloak/keycloak-themes/${keycloakVersion}/keycloak-themes-${keycloakVersion}.jar`,
-        cacheDirPath: buildContext.cacheDirPath,
-        npmWorkspaceRootDirPath: buildContext.npmWorkspaceRootDirPath,
-        uniqueIdOfOnOnArchiveFile: "downloadKeycloakDefaultTheme",
+        cacheDirPath,
+        fetchOptions: getProxyFetchOptions({
+            npmConfigGetCwd: getThisCodebaseRootDirPath()
+        }),
+        uniqueIdOfOnArchiveFile: "extractOnlyRequiredFiles",
         onArchiveFile: async params => {
             const fileRelativePath = pathRelative("theme", params.fileRelativePath);
 
@@ -34,16 +37,44 @@ export async function downloadKeycloakDefaultTheme(params: {
 
             const { readFile, writeFile } = params;
 
-            skip_keycloak_v2: {
-                if (!fileRelativePath.startsWith(pathJoin("keycloak.v2"))) {
-                    break skip_keycloak_v2;
-                }
-
+            if (
+                !fileRelativePath.startsWith("base") &&
+                !fileRelativePath.startsWith("keycloak")
+            ) {
                 return;
             }
 
+            switch (keycloakVersion) {
+                case KEYCLOAK_VERSION.FOR_LOGIN_THEME:
+                    if (
+                        !fileRelativePath.startsWith(pathJoin("base", "login")) &&
+                        !fileRelativePath.startsWith(pathJoin("keycloak", "login")) &&
+                        !fileRelativePath.startsWith(pathJoin("keycloak", "common"))
+                    ) {
+                        return;
+                    }
+
+                    if (fileRelativePath.endsWith(".ftl")) {
+                        return;
+                    }
+
+                    break;
+                case KEYCLOAK_VERSION.FOR_ACCOUNT_MULTI_PAGE:
+                    if (
+                        !fileRelativePath.startsWith(pathJoin("base", "account")) &&
+                        !fileRelativePath.startsWith(pathJoin("keycloak", "account")) &&
+                        !fileRelativePath.startsWith(pathJoin("keycloak", "common"))
+                    ) {
+                        return;
+                    }
+
+                    break;
+                default:
+                    assert<Equals<typeof keycloakVersion, never>>(false);
+            }
+
             last_account_v1_transformations: {
-                if (lastKeycloakVersionWithAccountV1 !== keycloakVersion) {
+                if (keycloakVersion !== KEYCLOAK_VERSION.FOR_ACCOUNT_MULTI_PAGE) {
                     break last_account_v1_transformations;
                 }
 
@@ -72,16 +103,19 @@ export async function downloadKeycloakDefaultTheme(params: {
                 }
 
                 skip_node_modules: {
-                    if (
-                        !fileRelativePath.startsWith(
-                            pathJoin("keycloak", "common", "resources", "node_modules")
-                        )
-                    ) {
+                    const nodeModulesRelativeDirPath = pathJoin(
+                        "keycloak",
+                        "common",
+                        "resources",
+                        "node_modules"
+                    );
+
+                    if (!fileRelativePath.startsWith(nodeModulesRelativeDirPath)) {
                         break skip_node_modules;
                     }
 
                     if (kcNodeModulesKeepFilePaths_lastAccountV1 === undefined) {
-                        kcNodeModulesKeepFilePaths_lastAccountV1 = [
+                        kcNodeModulesKeepFilePaths_lastAccountV1 = new Set([
                             pathJoin("patternfly", "dist", "css", "patternfly.min.css"),
                             pathJoin(
                                 "patternfly",
@@ -125,13 +159,19 @@ export async function downloadKeycloakDefaultTheme(params: {
                                 "fonts",
                                 "PatternFlyIcons-webfont.woff"
                             )
-                        ];
+                        ]);
                     }
 
-                    for (const keepPath of kcNodeModulesKeepFilePaths_lastAccountV1) {
-                        if (fileRelativePath.endsWith(keepPath)) {
-                            break skip_node_modules;
-                        }
+                    const fileRelativeToNodeModulesPath = fileRelativePath.substring(
+                        nodeModulesRelativeDirPath.length + 1
+                    );
+
+                    if (
+                        kcNodeModulesKeepFilePaths_lastAccountV1.has(
+                            fileRelativeToNodeModulesPath
+                        )
+                    ) {
+                        break skip_node_modules;
                     }
 
                     return;
@@ -160,21 +200,24 @@ export async function downloadKeycloakDefaultTheme(params: {
             }
 
             skip_unused_resources: {
-                if (keycloakVersion !== "24.0.4") {
+                if (keycloakVersion !== KEYCLOAK_VERSION.FOR_LOGIN_THEME) {
                     break skip_unused_resources;
                 }
 
                 skip_node_modules: {
-                    if (
-                        !fileRelativePath.startsWith(
-                            pathJoin("keycloak", "common", "resources", "node_modules")
-                        )
-                    ) {
+                    const nodeModulesRelativeDirPath = pathJoin(
+                        "keycloak",
+                        "common",
+                        "resources",
+                        "node_modules"
+                    );
+
+                    if (!fileRelativePath.startsWith(nodeModulesRelativeDirPath)) {
                         break skip_node_modules;
                     }
 
                     if (kcNodeModulesKeepFilePaths === undefined) {
-                        kcNodeModulesKeepFilePaths = [
+                        kcNodeModulesKeepFilePaths = new Set([
                             pathJoin("@patternfly", "patternfly", "patternfly.min.css"),
                             pathJoin("patternfly", "dist", "css", "patternfly.min.css"),
                             pathJoin(
@@ -231,14 +274,24 @@ export async function downloadKeycloakDefaultTheme(params: {
                                 "fonts",
                                 "PatternFlyIcons-webfont.woff"
                             ),
-                            pathJoin("jquery", "dist", "jquery.min.js")
-                        ];
+                            pathJoin(
+                                "patternfly",
+                                "dist",
+                                "fonts",
+                                "OpenSans-Semibold-webfont.woff2"
+                            ),
+                            pathJoin("patternfly", "dist", "img", "bg-login.jpg"),
+                            pathJoin("jquery", "dist", "jquery.min.js"),
+                            pathJoin("rfc4648", "lib", "rfc4648.js")
+                        ]);
                     }
 
-                    for (const keepPath of kcNodeModulesKeepFilePaths) {
-                        if (fileRelativePath.endsWith(keepPath)) {
-                            break skip_node_modules;
-                        }
+                    const fileRelativeToNodeModulesPath = fileRelativePath.substring(
+                        nodeModulesRelativeDirPath.length + 1
+                    );
+
+                    if (kcNodeModulesKeepFilePaths.has(fileRelativeToNodeModulesPath)) {
+                        break skip_node_modules;
                     }
 
                     return;
@@ -266,11 +319,21 @@ export async function downloadKeycloakDefaultTheme(params: {
 
                     return;
                 }
+
+                skip_package_json: {
+                    if (
+                        fileRelativePath !==
+                        pathJoin("keycloak", "common", "resources", "package.json")
+                    ) {
+                        break skip_package_json;
+                    }
+                    return;
+                }
             }
 
             await writeFile({ fileRelativePath });
         }
     });
 
-    return { defaultThemeDirPath: extractedDirPath };
+    return { extractedDirPath };
 }

scripts/shared/run.ts

@@ -0,0 +1,8 @@
+import * as child_process from "child_process";
+import chalk from "chalk";
+
+export function run(command: string, options?: { cwd: string }) {
+    console.log(chalk.grey(`$ ${command}`));
+
+    child_process.execSync(command, { stdio: "inherit", ...options });
+}

scripts/shared/startRebuildOnSrcChange.ts

@@ -28,9 +28,13 @@ export function startRebuildOnSrcChange() {
 
     console.log(chalk.green("Watching for changes in src/"));
 
-    chokidar.watch(["src", "stories"], { ignoreInitial: true }).on("all", async () => {
-        await waitForDebounce();
+    chokidar
+        .watch(["src", "stories"], { ignoreInitial: true })
+        .on("all", async (event, path) => {
+            console.log(chalk.bold(`${event}: ${path}`));
 
-        runYarnBuild();
-    });
+            await waitForDebounce();
+
+            runYarnBuild();
+        });
 }

scripts/start-storybook.ts

@@ -1,33 +1,21 @@
 import * as child_process from "child_process";
-import * as fs from "fs";
-import { join } from "path";
-import { startRebuildOnSrcChange } from "./startRebuildOnSrcChange";
+import { startRebuildOnSrcChange } from "./shared/startRebuildOnSrcChange";
+import { run } from "./shared/run";
 
-run("yarn build");
+(async () => {
+    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"], {
+            shell: true
+        });
+
+        child.stdout.on("data", data => process.stdout.write(data));
+
+        child.stderr.on("data", data => process.stderr.write(data));
+
+        child.on("exit", process.exit.bind(process));
     }
-});
 
-{
-    const child = child_process.spawn("npx", ["start-storybook", "-p", "6006"], {
-        shell: true
-    });
-
-    child.stdout.on("data", data => process.stdout.write(data));
-
-    child.stderr.on("data", data => process.stderr.write(data));
-
-    child.on("exit", process.exit.bind(process));
-}
-
-startRebuildOnSrcChange();
-
-function run(command: string, options?: { env?: NodeJS.ProcessEnv }) {
-    console.log(`$ ${command}`);
-
-    child_process.execSync(command, { stdio: "inherit", ...options });
-}
+    startRebuildOnSrcChange();
+})();

src/PUBLIC_URL.ts

@@ -1,4 +1,4 @@
-import { basenameOfTheKeycloakifyResourcesDir } from "keycloakify/bin/shared/constants";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "keycloakify/bin/shared/constants";
 import { assert } from "tsafe/assert";
 
 /**
@@ -6,7 +6,9 @@ import { assert } from "tsafe/assert";
  * This works both in your main app and in your Keycloak theme.
  */
 export const PUBLIC_URL = (() => {
-    const kcContext = (window as any).kcContext;
+    const kcContext: { "x-keycloakify": { resourcesPath: string } } | undefined = (
+        window as any
+    ).kcContext;
 
     if (kcContext === undefined || process.env.NODE_ENV === "development") {
         assert(
@@ -17,5 +19,5 @@ export const PUBLIC_URL = (() => {
         return process.env.PUBLIC_URL;
     }
 
-    return `${kcContext.url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}`;
+    return `${kcContext["x-keycloakify"].resourcesPath}/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}`;
 })();

src/account/KcContext/KcContext.ts

@@ -118,7 +118,10 @@ export declare namespace KcContext {
             lastName?: string;
             username?: string;
         };
-        properties: Record<string, string | undefined>;
+        properties: {};
+        "x-keycloakify": {
+            messages: Record<string, string>;
+        };
     };
 
     export type Password = Common & {

src/account/KcContext/kcContextMocks.ts

@@ -1,10 +1,12 @@
 import "keycloakify/tools/Object.fromEntries";
-import { resources_common, keycloak_resources } from "keycloakify/bin/shared/constants";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "keycloakify/bin/shared/constants";
 import { id } from "tsafe/id";
 import type { KcContext } from "./KcContext";
 import { BASE_URL } from "keycloakify/lib/BASE_URL";
+import { assert, type Equals } from "tsafe/assert";
+import type { LanguageTag } from "keycloakify/account/i18n/messages_defaultSet/types";
 
-const resourcesPath = `${BASE_URL}${keycloak_resources}/account/resources`;
+const resourcesPath = `${BASE_URL}${WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES}/account`;
 
 export const kcContextCommonMock: KcContext.Common = {
     themeVersion: "0.0.0",
@@ -13,7 +15,7 @@ export const kcContextCommonMock: KcContext.Common = {
     themeName: "my-theme-name",
     url: {
         resourcesPath,
-        resourcesCommonPath: `${resourcesPath}/${resources_common}`,
+        resourcesCommonPath: `${resourcesPath}/${WELL_KNOWN_DIRECTORY_BASE_NAME.RESOURCES_COMMON}`,
         resourceUrl: "#",
         accountUrl: "#",
         applicationsUrl: "#",
@@ -38,35 +40,53 @@ export const kcContextCommonMock: KcContext.Common = {
         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
-        ),
+        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"],
+                ["ar", "العربية"],
+                ["da", "Dansk"],
+                ["fi", "Suomi"],
+                ["hu", "Magyar"],
+                ["lv", "Latviešu"]
+                /* spell-checker: enable */
+            ] as const
+        ).map(([languageTag, label]) => {
+            {
+                type Got = typeof languageTag;
+                type Expected = LanguageTag;
+
+                type Missing = Exclude<Expected, Got>;
+                type Unexpected = Exclude<Got, Expected>;
+
+                assert<Equals<Missing, never>>;
+                assert<Equals<Unexpected, never>>;
+            }
+
+            return {
+                languageTag,
+                label,
+                url: "https://gist.github.com/garronej/52baaca1bb925f2296ab32741e062b8e"
+            } as const;
+        }),
+
         currentLanguageTag: "en"
     },
     features: {
@@ -82,7 +102,10 @@ export const kcContextCommonMock: KcContext.Common = {
         email: "john.doe@code.gouv.fr",
         username: "doe_j"
     },
-    properties: {}
+    properties: {},
+    "x-keycloakify": {
+        messages: {}
+    }
 };
 
 export const kcContextMocks: KcContext[] = [

src/account/Template.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from "react";
-import { assert } from "keycloakify/tools/assert";
 import { clsx } from "keycloakify/tools/clsx";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import { getKcClsx } from "keycloakify/account/lib/kcClsx";
-import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
 import { useSetClassName } from "keycloakify/tools/useSetClassName";
+import { useInitialize } from "keycloakify/account/Template.useInitialize";
 import type { TemplateProps } from "keycloakify/account/TemplateProps";
 import type { I18n } from "./i18n";
 import type { KcContext } from "./KcContext";
@@ -13,9 +13,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
 
-    const { msg, msgStr, getChangeLocalUrl, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
+    const { msg, msgStr, currentLanguage, enabledLanguages } = i18n;
 
-    const { locale, url, features, realm, message, referrer } = kcContext;
+    const { url, features, realm, message, referrer } = kcContext;
 
     useEffect(() => {
         document.title = msgStr("accountManagementTitle");
@@ -31,30 +31,9 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         className: clsx("admin-console", "user", kcClsx("kcBodyClass"))
     });
 
-    useEffect(() => {
-        const { currentLanguageTag } = locale ?? {};
+    const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss });
 
-        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) {
+    if (!isReadyToRender) {
         return null;
     }
 
@@ -70,16 +49,16 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     <div className="navbar-collapse navbar-collapse-1">
                         <div className="container">
                             <ul className="nav navbar-nav navbar-utility">
-                                {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
+                                {enabledLanguages.length > 1 && (
                                     <li>
                                         <div className="kc-dropdown" id="kc-locale-dropdown">
                                             <a href="#" id="kc-current-locale-link">
-                                                {labelBySupportedLanguageTag[currentLanguageTag]}
+                                                {currentLanguage.label}
                                             </a>
                                             <ul>
-                                                {locale.supported.map(({ languageTag }) => (
+                                                {enabledLanguages.map(({ languageTag, label, href }) => (
                                                     <li key={languageTag} className="kc-dropdown-item">
-                                                        <a href={getChangeLocalUrl(languageTag)}>{labelBySupportedLanguageTag[languageTag]}</a>
+                                                        <a href={href}>{label}</a>
                                                     </li>
                                                 ))}
                                             </ul>
@@ -145,7 +124,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                         <div className={clsx("alert", `alert-${message.type}`)}>
                             {message.type === "success" && <span className="pficon pficon-ok"></span>}
                             {message.type === "error" && <span className="pficon pficon-error-circle-o"></span>}
-                            <span className="kc-feedback-text">{message.summary}</span>
+                            <span
+                                className="kc-feedback-text"
+                                dangerouslySetInnerHTML={{
+                                    __html: kcSanitize(message.summary)
+                                }}
+                            />
                         </div>
                     )}
 

src/account/Template.useInitialize.ts

@@ -0,0 +1,35 @@
+import { assert } from "keycloakify/tools/assert";
+import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
+import type { KcContext } from "keycloakify/account/KcContext";
+
+export type KcContextLike = {
+    url: {
+        resourcesCommonPath: string;
+        resourcesPath: string;
+    };
+};
+
+assert<keyof KcContextLike extends keyof KcContext ? true : false>();
+assert<KcContext extends KcContextLike ? true : false>();
+
+export function useInitialize(params: {
+    kcContext: KcContextLike;
+    doUseDefaultCss: boolean;
+}) {
+    const { kcContext, doUseDefaultCss } = params;
+
+    const { url } = kcContext;
+
+    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`
+              ]
+    });
+
+    return { isReadyToRender: areAllStyleSheetsLoaded };
+}

src/account/i18n/i18n.tsx

@@ -1,323 +0,0 @@
-import "keycloakify/tools/Object.fromEntries";
-import { useEffect, useState } from "react";
-import { assert } from "tsafe/assert";
-import messages_fallbackLanguage from "./baseMessages/en";
-import { getMessages } from "./baseMessages";
-import type { KcContext } from "../KcContext";
-import { Reflect } from "tsafe/Reflect";
-
-export const fallbackLanguageTag = "en";
-
-export type KcContextLike = {
-    locale?: {
-        currentLanguageTag: string;
-        supported: { languageTag: string; url: string; label: string }[];
-    };
-};
-
-assert<KcContext extends KcContextLike ? true : false>();
-
-export type MessageKey = keyof typeof messages_fallbackLanguage;
-
-export type GenericI18n<MessageKey extends string> = {
-    /**
-     * e.g: "en", "fr", "zh-CN"
-     *
-     * The current language
-     */
-    currentLanguageTag: string;
-    /**
-     * Redirect to this url to change the language.
-     * After reload currentLanguageTag === newLanguageTag
-     */
-    getChangeLocalUrl: (newLanguageTag: string) => string;
-    /**
-     * e.g. "en" => "English", "fr" => "Français", ...
-     *
-     * Used to render a select that enable user to switch language.
-     * ex: https://user-images.githubusercontent.com/6702424/186044799-38801eec-4e89-483b-81dd-8e9233e8c0eb.png
-     * */
-    labelBySupportedLanguageTag: Record<string, string>;
-    /**
-     * Examples assuming currentLanguageTag === "en"
-     *
-     * msg("access-denied") === <span>Access denied</span>
-     * msg("impersonateTitleHtml", "Foo") === <span><strong>Foo</strong> Impersonate User</span>
-     */
-    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
-    /**
-     * It's the same thing as msg() but instead of returning a JSX.Element it returns a string.
-     * It can be more convenient to manipulate strings but if there are HTML tags it wont render.
-     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
-     */
-    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
-    /**
-     * This is meant to be used when the key argument is variable, something that might have been configured by the user
-     * in the Keycloak admin for example.
-     *
-     * Examples assuming currentLanguageTag === "en"
-     * {
-     *   en: {
-     *     "access-denied": "Access denied",
-     *     "foo": "Foo {0} {1}",
-     *     "bar": "Bar {0}"
-     *   }
-     * }
-     *
-     * advancedMsg("${access-denied} foo bar") === <span>{msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
-     * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
-     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
-     * advancedMsg("${bar}", "<strong>c</strong>")
-     *    === <span>{msgStr("bar", "<strong>XXX</strong>")}<span>
-     *    === <span>Bar &lt;strong&gt;XXX&lt;/strong&gt;</span> (The html in the arg is partially escaped for security reasons, it might be untrusted)
-     * advancedMsg("${foo} xx ${bar}", "a", "b", "c")
-     *    === <span>{msgStr("foo", "a", "b")} xx {msgStr("bar")}<span>
-     *    === <span>Foo a b xx Bar {0}</span> (The substitution are only applied in the first message)
-     */
-    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
-    /**
-     * See advancedMsg() but instead of returning a JSX.Element it returns a string.
-     */
-    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
-
-    /**
-     * Initially the messages are in english (fallback language).
-     * The translations in the current language are being fetched dynamically.
-     * This property is true while the translations are being fetched.
-     */
-    isFetchingTranslations: boolean;
-};
-
-function createGetI18n<ExtraMessageKey extends string = never>(extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } }) {
-    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
-
-    type Result = { i18n: I18n; prI18n_currentLanguage: Promise<I18n> | undefined };
-
-    const cachedResultByKcContext = new WeakMap<KcContextLike, Result>();
-
-    function getI18n(params: { kcContext: KcContextLike }): Result {
-        const { kcContext } = params;
-
-        use_cache: {
-            const cachedResult = cachedResultByKcContext.get(kcContext);
-
-            if (cachedResult === undefined) {
-                break use_cache;
-            }
-
-            return cachedResult;
-        }
-
-        const partialI18n: Pick<I18n, "currentLanguageTag" | "getChangeLocalUrl" | "labelBySupportedLanguageTag"> = {
-            currentLanguageTag: kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag,
-            getChangeLocalUrl: newLanguageTag => {
-                const { locale } = kcContext;
-
-                assert(locale !== undefined, "Internationalization not enabled");
-
-                const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
-
-                assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
-
-                return targetSupportedLocale.url;
-            },
-            labelBySupportedLanguageTag: Object.fromEntries((kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label]))
-        };
-
-        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey, ExtraMessageKey>({
-            messages_fallbackLanguage,
-            extraMessages_fallbackLanguage: extraMessages[fallbackLanguageTag],
-            extraMessages: extraMessages[partialI18n.currentLanguageTag]
-        });
-
-        const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag === fallbackLanguageTag;
-
-        const result: Result = {
-            i18n: {
-                ...partialI18n,
-                ...createI18nTranslationFunctions({ messages: undefined }),
-                isFetchingTranslations: !isCurrentLanguageFallbackLanguage
-            },
-            prI18n_currentLanguage: isCurrentLanguageFallbackLanguage
-                ? undefined
-                : (async () => {
-                      const messages = await getMessages(partialI18n.currentLanguageTag);
-
-                      const i18n_currentLanguage: I18n = {
-                          ...partialI18n,
-                          ...createI18nTranslationFunctions({ messages }),
-                          isFetchingTranslations: false
-                      };
-
-                      // NOTE: This promise.resolve is just because without it we TypeScript
-                      // gives a Variable 'result' is used before being assigned. error
-                      await Promise.resolve().then(() => {
-                          result.i18n = i18n_currentLanguage;
-                          result.prI18n_currentLanguage = undefined;
-                      });
-
-                      return i18n_currentLanguage;
-                  })()
-        };
-
-        cachedResultByKcContext.set(kcContext, result);
-
-        return result;
-    }
-
-    return { getI18n };
-}
-
-export function createUseI18n<ExtraMessageKey extends string = never>(extraMessages: {
-    [languageTag: string]: { [key in ExtraMessageKey]: string };
-}) {
-    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
-
-    const { getI18n } = createGetI18n(extraMessages);
-
-    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
-        const { kcContext } = params;
-
-        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
-
-        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(i18n);
-
-        useEffect(() => {
-            let isActive = true;
-
-            prI18n_currentLanguage?.then(i18n => {
-                if (!isActive) {
-                    return;
-                }
-
-                setI18n_toReturn(i18n);
-            });
-
-            return () => {
-                isActive = false;
-            };
-        }, []);
-
-        return { i18n: i18n_toReturn };
-    }
-
-    return { useI18n, ofTypeI18n: Reflect<I18n>() };
-}
-
-function createI18nTranslationFunctionsFactory<MessageKey extends string, ExtraMessageKey extends string>(params: {
-    messages_fallbackLanguage: Record<MessageKey, string>;
-    extraMessages_fallbackLanguage: Record<ExtraMessageKey, string> | undefined;
-    extraMessages: Partial<Record<ExtraMessageKey, string>> | undefined;
-}) {
-    const { extraMessages } = params;
-
-    const messages_fallbackLanguage = {
-        ...params.messages_fallbackLanguage,
-        ...params.extraMessages_fallbackLanguage
-    };
-
-    function createI18nTranslationFunctions(params: {
-        messages: Partial<Record<MessageKey, string>> | undefined;
-    }): Pick<GenericI18n<MessageKey | ExtraMessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
-        const messages = {
-            ...params.messages,
-            ...extraMessages
-        };
-
-        function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
-            const { key, args, doRenderAsHtml } = props;
-
-            const messageOrUndefined: string | undefined = (messages as any)[key] ?? (messages_fallbackLanguage as any)[key];
-
-            if (messageOrUndefined === undefined) {
-                return undefined;
-            }
-
-            const message = messageOrUndefined;
-
-            const messageWithArgsInjectedIfAny = (() => {
-                const startIndex = message
-                    .match(/{[0-9]+}/g)
-                    ?.map(g => g.match(/{([0-9]+)}/)![1])
-                    .map(indexStr => parseInt(indexStr))
-                    .sort((a, b) => a - b)[0];
-
-                if (startIndex === undefined) {
-                    // No {0} in message (no arguments expected)
-                    return message;
-                }
-
-                let messageWithArgsInjected = message;
-
-                args.forEach((arg, i) => {
-                    if (arg === undefined) {
-                        return;
-                    }
-
-                    messageWithArgsInjected = messageWithArgsInjected.replace(
-                        new RegExp(`\\{${i + startIndex}\\}`, "g"),
-                        arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
-                    );
-                });
-
-                return messageWithArgsInjected;
-            })();
-
-            return doRenderAsHtml ? (
-                <span
-                    // NOTE: The message is trusted. The arguments are not but are escaped.
-                    dangerouslySetInnerHTML={{
-                        __html: messageWithArgsInjectedIfAny
-                    }}
-                />
-            ) : (
-                messageWithArgsInjectedIfAny
-            );
-        }
-
-        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
-            const { key, args, doRenderAsHtml } = props;
-
-            if (!/\$\{[^}]+\}/.test(key)) {
-                const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
-
-                if (resolvedMessage === undefined) {
-                    return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
-                }
-
-                return resolvedMessage;
-            }
-
-            let isFirstMatch = true;
-
-            const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
-                const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
-
-                isFirstMatch = false;
-
-                return replaceBy;
-            });
-
-            return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
-        }
-
-        return {
-            msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
-            msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
-            advancedMsg: (key, ...args) =>
-                resolveMsgAdvanced({
-                    key,
-                    args,
-                    doRenderAsHtml: true
-                }) as JSX.Element,
-            advancedMsgStr: (key, ...args) =>
-                resolveMsgAdvanced({
-                    key,
-                    args,
-                    doRenderAsHtml: false
-                }) as string
-        };
-    }
-
-    return { createI18nTranslationFunctions };
-}

src/account/i18n/index.ts

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

src/account/index.ts

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

src/account/pages/Applications.tsx

@@ -62,7 +62,6 @@ export default function Applications(props: PageProps<Extract<KcContext, { pageI
                                                     {index < application.realmRolesAvailable.length - 1 && ", "}
                                                 </span>
                                             ))}
-                                        {!isArrayWithEmptyObject(application.realmRolesAvailable) && application.resourceRolesAvailable && ", "}
                                         {application.resourceRolesAvailable &&
                                             Object.keys(application.resourceRolesAvailable).map(resource => (
                                                 <span key={resource}>

src/account/pages/FederatedIdentity.tsx

@@ -8,7 +8,7 @@ export default function FederatedIdentity(props: PageProps<Extract<KcContext, {
     const { url, federatedIdentity, stateChecker } = kcContext;
     const { msg } = i18n;
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="federatedIdentity">
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="social">
             <div className="main-layout social">
                 <div className="row">
                     <div className="col-md-10">

src/account/pages/Totp.tsx

@@ -1,5 +1,6 @@
 import { clsx } from "keycloakify/tools/clsx";
 import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
@@ -154,9 +155,14 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                     />
 
                                     {messagesPerField.existsError("totp") && (
-                                        <span id="input-error-otp-code" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
-                                            {messagesPerField.get("totp")}
-                                        </span>
+                                        <span
+                                            id="input-error-otp-code"
+                                            className={kcClsx("kcInputErrorMessageClass")}
+                                            aria-live="polite"
+                                            dangerouslySetInnerHTML={{
+                                                __html: kcSanitize(messagesPerField.get("totp"))
+                                            }}
+                                        />
                                     )}
                                 </div>
                                 <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
@@ -180,9 +186,14 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                         aria-invalid={messagesPerField.existsError("userLabel")}
                                     />
                                     {messagesPerField.existsError("userLabel") && (
-                                        <span id="input-error-otp-label" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
-                                            {messagesPerField.get("userLabel")}
-                                        </span>
+                                        <span
+                                            id="input-error-otp-label"
+                                            className={kcClsx("kcInputErrorMessageClass")}
+                                            aria-live="polite"
+                                            dangerouslySetInnerHTML={{
+                                                __html: kcSanitize(messagesPerField.get("userLabel"))
+                                            }}
+                                        />
                                     )}
                                 </div>
                             </div>

src/bin/add-story.ts

@@ -1,11 +1,11 @@
 import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
 import cliSelect from "cli-select";
 import {
-    loginThemePageIds,
-    accountThemePageIds,
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
     type LoginThemePageId,
     type AccountThemePageId,
-    themeTypes,
+    THEME_TYPES,
     type ThemeType
 } from "./shared/constants";
 import { capitalize } from "tsafe/capitalize";
@@ -26,11 +26,43 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     console.log(chalk.cyan("Theme type:"));
 
-    const { value: themeType } = await cliSelect<ThemeType>({
-        values: [...themeTypes]
-    }).catch(() => {
-        process.exit(-1);
-    });
+    const themeType = await (async () => {
+        const values = THEME_TYPES.filter(themeType => {
+            switch (themeType) {
+                case "account":
+                    return buildContext.implementedThemeTypes.account.isImplemented;
+                case "login":
+                    return buildContext.implementedThemeTypes.login.isImplemented;
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        });
+
+        assert(values.length > 0, "No theme is implemented in this project");
+
+        if (values.length === 1) {
+            return values[0];
+        }
+
+        const { value } = await cliSelect<ThemeType>({
+            values
+        }).catch(() => {
+            process.exit(-1);
+        });
+
+        return value;
+    })();
+
+    if (
+        themeType === "account" &&
+        (assert(buildContext.implementedThemeTypes.account.isImplemented),
+        buildContext.implementedThemeTypes.account.type === "Single-Page")
+    ) {
+        console.log(
+            `${chalk.red("✗")} Sorry, there is no Storybook support for Single-Page Account themes.`
+        );
+
+        process.exit(0);
+    }
 
     console.log(`→ ${themeType}`);
 
@@ -40,9 +72,9 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         values: (() => {
             switch (themeType) {
                 case "login":
-                    return [...loginThemePageIds];
+                    return [...LOGIN_THEME_PAGE_IDS];
                 case "account":
-                    return [...accountThemePageIds];
+                    return [...ACCOUNT_THEME_PAGE_IDS];
             }
             assert<Equals<typeof themeType, never>>(false);
         })()
@@ -81,7 +113,8 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             )
         )
         .toString("utf8")
-        .replace('import React from "react";\n', "");
+        .replace('import React from "react";\n', "")
+        .replace(/from "[./]+dist\//, 'from "keycloakify/');
 
     {
         const targetDirPath = pathDirname(targetFilePath);

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

@@ -7,7 +7,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     const buildContext = getBuildContext({ cliCommandOptions });
 
-    await copyKeycloakResourcesToPublic({
+    copyKeycloakResourcesToPublic({
         buildContext
     });
 }

src/bin/eject-page.ts

@@ -3,16 +3,21 @@
 import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
 import cliSelect from "cli-select";
 import {
-    loginThemePageIds,
-    accountThemePageIds,
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
     type LoginThemePageId,
     type AccountThemePageId,
-    themeTypes,
+    THEME_TYPES,
     type ThemeType
 } from "./shared/constants";
 import { capitalize } from "tsafe/capitalize";
 import * as fs from "fs";
-import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import {
+    join as pathJoin,
+    relative as pathRelative,
+    dirname as pathDirname,
+    basename as pathBasename
+} from "path";
 import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
 import { assert, Equals } from "tsafe/assert";
 import type { CliCommandOptions } from "./main";
@@ -28,11 +33,114 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     console.log(chalk.cyan("Theme type:"));
 
-    const { value: themeType } = await cliSelect<ThemeType>({
-        values: [...themeTypes]
-    }).catch(() => {
-        process.exit(-1);
-    });
+    const themeType = await (async () => {
+        const values = THEME_TYPES.filter(themeType => {
+            switch (themeType) {
+                case "account":
+                    return buildContext.implementedThemeTypes.account.isImplemented;
+                case "login":
+                    return buildContext.implementedThemeTypes.login.isImplemented;
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        });
+
+        assert(values.length > 0, "No theme is implemented in this project");
+
+        if (values.length === 1) {
+            return values[0];
+        }
+
+        const { value } = await cliSelect<ThemeType>({
+            values
+        }).catch(() => {
+            process.exit(-1);
+        });
+
+        return value;
+    })();
+
+    if (
+        themeType === "account" &&
+        (assert(buildContext.implementedThemeTypes.account.isImplemented),
+        buildContext.implementedThemeTypes.account.type === "Single-Page")
+    ) {
+        const srcDirPath = pathJoin(
+            pathDirname(buildContext.packageJsonFilePath),
+            "node_modules",
+            "@keycloakify",
+            "keycloak-account-ui",
+            "src"
+        );
+
+        console.log(
+            [
+                `There isn't an interactive CLI to eject components of the Single-Page Account theme.`,
+                `You can however copy paste into your codebase the any file or directory from the following source directory:`,
+                ``,
+                `${chalk.bold(pathJoin(pathRelative(process.cwd(), srcDirPath)))}`,
+                ``
+            ].join("\n")
+        );
+
+        eject_entrypoint: {
+            const kcAccountUiTsxFileRelativePath = "KcAccountUi.tsx";
+
+            const accountThemeSrcDirPath = pathJoin(
+                buildContext.themeSrcDirPath,
+                "account"
+            );
+
+            const targetFilePath = pathJoin(
+                accountThemeSrcDirPath,
+                kcAccountUiTsxFileRelativePath
+            );
+
+            if (fs.existsSync(targetFilePath)) {
+                break eject_entrypoint;
+            }
+
+            fs.cpSync(
+                pathJoin(srcDirPath, kcAccountUiTsxFileRelativePath),
+                targetFilePath
+            );
+
+            {
+                const kcPageTsxFilePath = pathJoin(accountThemeSrcDirPath, "KcPage.tsx");
+
+                const kcPageTsxCode = fs.readFileSync(kcPageTsxFilePath).toString("utf8");
+
+                const componentName = pathBasename(
+                    kcAccountUiTsxFileRelativePath
+                ).replace(/.tsx$/, "");
+
+                const modifiedKcPageTsxCode = kcPageTsxCode.replace(
+                    `@keycloakify/keycloak-account-ui/${componentName}`,
+                    `./${componentName}`
+                );
+
+                fs.writeFileSync(
+                    kcPageTsxFilePath,
+                    Buffer.from(modifiedKcPageTsxCode, "utf8")
+                );
+            }
+
+            const routesTsxFilePath = pathRelative(
+                process.cwd(),
+                pathJoin(srcDirPath, "routes.tsx")
+            );
+
+            console.log(
+                [
+                    `To help you get started ${chalk.bold(pathRelative(process.cwd(), targetFilePath))} has been copied into your project.`,
+                    `The next step is usually to eject ${chalk.bold(routesTsxFilePath)}`,
+                    `with \`cp ${routesTsxFilePath} ${pathRelative(process.cwd(), accountThemeSrcDirPath)}\``,
+                    `then update the import of routes in ${kcAccountUiTsxFileRelativePath}.`
+                ].join("\n")
+            );
+        }
+
+        process.exit(0);
+    }
 
     console.log(`→ ${themeType}`);
 
@@ -54,10 +162,10 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                     return [
                         templateValue,
                         userProfileFormFieldsValue,
-                        ...loginThemePageIds
+                        ...LOGIN_THEME_PAGE_IDS
                     ];
                 case "account":
-                    return [templateValue, ...accountThemePageIds];
+                    return [templateValue, ...ACCOUNT_THEME_PAGE_IDS];
             }
             assert<Equals<typeof themeType, never>>(false);
         })()
@@ -190,6 +298,8 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     const userProfileFormFieldComponentName = "UserProfileFormFields";
 
+    const componentName = componentBasename.replace(/.tsx$/, "");
+
     console.log(
         [
             ``,
@@ -207,10 +317,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             `// ...`,
             ``,
             chalk.green(
-                `+const ${componentBasename.replace(
-                    /.tsx$/,
-                    ""
-                )} = lazy(() => import("./pages/${componentBasename}"));`
+                `+const ${componentName} = lazy(() => import("./pages/${componentName}"));`
             ),
             ...[
                 ``,
@@ -224,7 +331,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                 `                 switch (kcContext.pageId) {`,
                 `                     // ...`,
                 `+                    case "${pageIdOrComponent}": return (`,
-                `+                        <${componentBasename}`,
+                `+                        <${componentName}`,
                 `+                            {...{ kcContext, i18n, classes }}`,
                 `+                            Template={Template}`,
                 `+                            doUseDefaultCss={true}`,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { i18nBuilder } from "keycloakify/account";
+import type { ThemeName } from "../kc.gen";
+
+const { useI18n, ofTypeI18n } = i18nBuilder
+    .withThemeName<ThemeName>()
+    .withExtraLanguages({})
+    .withCustomTranslations({})
+    .build();
+
+type I18n = typeof ofTypeI18n;
+
+export { useI18n, type I18n };

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

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

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

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

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

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

src/bin/initialize-email-theme.ts

@@ -1,10 +1,10 @@
-import { downloadKeycloakDefaultTheme } from "./shared/downloadKeycloakDefaultTheme";
 import { join as pathJoin, relative as pathRelative } from "path";
 import { transformCodebase } from "./tools/transformCodebase";
 import { promptKeycloakVersion } from "./shared/promptKeycloakVersion";
 import { getBuildContext } from "./shared/buildContext";
 import * as fs from "fs";
 import type { CliCommandOptions } from "./main";
+import { downloadAndExtractArchive } from "./tools/downloadAndExtractArchive";
 
 export async function command(params: { cliCommandOptions: CliCommandOptions }) {
     const { cliCommandOptions } = params;
@@ -13,9 +13,12 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     const emailThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "email");
 
-    if (fs.existsSync(emailThemeSrcDirPath)) {
+    if (
+        fs.existsSync(emailThemeSrcDirPath) &&
+        fs.readdirSync(emailThemeSrcDirPath).length > 0
+    ) {
         console.warn(
-            `There is already a ${pathRelative(
+            `There is already a non empty ${pathRelative(
                 process.cwd(),
                 emailThemeSrcDirPath
             )} directory in your project. Aborting.`
@@ -30,16 +33,31 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         // NOTE: This is arbitrary
         startingFromMajor: 17,
         excludeMajorVersions: [],
-        cacheDirPath: buildContext.cacheDirPath
-    });
-
-    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
-        keycloakVersion,
+        doOmitPatch: false,
         buildContext
     });
 
+    const { extractedDirPath } = await downloadAndExtractArchive({
+        url: `https://repo1.maven.org/maven2/org/keycloak/keycloak-themes/${keycloakVersion}/keycloak-themes-${keycloakVersion}.jar`,
+        cacheDirPath: buildContext.cacheDirPath,
+        fetchOptions: buildContext.fetchOptions,
+        uniqueIdOfOnArchiveFile: "extractOnlyEmailTheme",
+        onArchiveFile: async ({ fileRelativePath, writeFile }) => {
+            const fileRelativePath_target = pathRelative(
+                pathJoin("theme", "base", "email"),
+                fileRelativePath
+            );
+
+            if (fileRelativePath_target.startsWith("..")) {
+                return;
+            }
+
+            await writeFile({ fileRelativePath: fileRelativePath_target });
+        }
+    });
+
     transformCodebase({
-        srcDirPath: pathJoin(defaultThemeDirPath, "base", "email"),
+        srcDirPath: extractedDirPath,
         destDirPath: emailThemeSrcDirPath
     });
 
@@ -49,7 +67,10 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         fs.writeFileSync(
             themePropertyFilePath,
             Buffer.from(
-                `parent=base\n${fs.readFileSync(themePropertyFilePath).toString("utf8")}`,
+                [
+                    `parent=base`,
+                    fs.readFileSync(themePropertyFilePath).toString("utf8")
+                ].join("\n"),
                 "utf8"
             )
         );

src/bin/keycloakify/buildJars/buildJar.ts

@@ -7,7 +7,6 @@ import { join as pathJoin, dirname as pathDirname } from "path";
 import { transformCodebase } from "../../tools/transformCodebase";
 import type { BuildContext } from "../../shared/buildContext";
 import * as fs from "fs/promises";
-import { accountV1ThemeName } from "../../shared/constants";
 import {
     generatePom,
     BuildContextLike as BuildContextLike_generatePom
@@ -24,6 +23,7 @@ export type BuildContextLike = BuildContextLike_generatePom & {
     artifactId: string;
     themeVersion: string;
     cacheDirPath: string;
+    implementedThemeTypes: BuildContext["implementedThemeTypes"];
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -33,6 +33,7 @@ export async function buildJar(params: {
     keycloakAccountV1Version: KeycloakAccountV1Version;
     keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
     resourcesDirPath: string;
+    doesImplementAccountV1Theme: boolean;
     buildContext: BuildContextLike;
 }): Promise<void> {
     const {
@@ -40,28 +41,30 @@ export async function buildJar(params: {
         keycloakAccountV1Version,
         keycloakThemeAdditionalInfoExtensionVersion,
         resourcesDirPath,
+        doesImplementAccountV1Theme,
         buildContext
     } = params;
 
-    const keycloakifyBuildTmpDirPath = pathJoin(
+    const keycloakifyBuildCacheDirPath = pathJoin(
         buildContext.cacheDirPath,
+        "maven",
         jarFileBasename.replace(".jar", "")
     );
 
-    rmSync(keycloakifyBuildTmpDirPath, { recursive: true, force: true });
-
     const tmpResourcesDirPath = pathJoin(
-        keycloakifyBuildTmpDirPath,
+        keycloakifyBuildCacheDirPath,
         "src",
         "main",
         "resources"
     );
 
+    rmSync(tmpResourcesDirPath, { recursive: true, force: true });
+
     transformCodebase({
         srcDirPath: resourcesDirPath,
         destDirPath: tmpResourcesDirPath,
         transformSourceCode:
-            keycloakAccountV1Version !== null
+            !doesImplementAccountV1Theme || keycloakAccountV1Version !== null
                 ? undefined
                 : (params: {
                       fileRelativePath: string;
@@ -71,7 +74,7 @@ export async function buildJar(params: {
 
                       if (
                           isInside({
-                              dirPath: pathJoin("theme", accountV1ThemeName),
+                              dirPath: pathJoin("theme", "account-v1"),
                               filePath: fileRelativePath
                           })
                       ) {
@@ -86,10 +89,7 @@ export async function buildJar(params: {
                               const modifiedSourceCode = Buffer.from(
                                   sourceCode
                                       .toString("utf8")
-                                      .replace(
-                                          `parent=${accountV1ThemeName}`,
-                                          "parent=keycloak"
-                                      ),
+                                      .replace(`parent=account-v1`, "parent=keycloak"),
                                   "utf8"
                               );
 
@@ -105,14 +105,24 @@ export async function buildJar(params: {
                   }
     });
 
-    if (keycloakAccountV1Version === null) {
+    remove_account_v1_in_meta_inf: {
+        if (!doesImplementAccountV1Theme) {
+            // NOTE: We do not have account v1 anyway
+            break remove_account_v1_in_meta_inf;
+        }
+
+        if (keycloakAccountV1Version !== null) {
+            // NOTE: No, we need to keep account-v1 in meta-inf
+            break remove_account_v1_in_meta_inf;
+        }
+
         writeMetaInfKeycloakThemes({
             resourcesDirPath: tmpResourcesDirPath,
             getNewMetaInfKeycloakTheme: ({ metaInfKeycloakTheme }) => {
                 assert(metaInfKeycloakTheme !== undefined);
 
                 metaInfKeycloakTheme.themes = metaInfKeycloakTheme.themes.filter(
-                    ({ name }) => name !== accountV1ThemeName
+                    ({ name }) => name !== "account-v1"
                 );
 
                 return metaInfKeycloakTheme;
@@ -121,31 +131,14 @@ export async function buildJar(params: {
     }
 
     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) {
+        if (!buildContext.implementedThemeTypes.login.isImplemented) {
             break route_legacy_pages;
         }
 
         (["register.ftl", "login-update-profile.ftl"] as const).forEach(pageId =>
             buildContext.themeNames.map(themeName => {
                 const ftlFilePath = pathJoin(
-                    keycloakifyBuildTmpDirPath,
-                    "src",
-                    "main",
-                    "resources",
+                    tmpResourcesDirPath,
                     "theme",
                     themeName,
                     "login",
@@ -154,7 +147,7 @@ export async function buildJar(params: {
 
                 const ftlFileContent = readFileSync(ftlFilePath).toString("utf8");
 
-                const realPageId = (() => {
+                const ftlFileBasename = (() => {
                     switch (pageId) {
                         case "register.ftl":
                             return "register-user-profile.ftl";
@@ -165,14 +158,14 @@ export async function buildJar(params: {
                 })();
 
                 const modifiedFtlFileContent = ftlFileContent.replace(
-                    `kcContext.pageId = "\${pageId}";`,
-                    `kcContext.pageId = "${pageId}"; kcContext.realPageId = "${realPageId}";`
+                    `"ftlTemplateFileName": "${pageId}"`,
+                    `"ftlTemplateFileName": "${ftlFileBasename}"`
                 );
 
                 assert(modifiedFtlFileContent !== ftlFileContent);
 
                 fs.writeFile(
-                    pathJoin(pathDirname(ftlFilePath), realPageId),
+                    pathJoin(pathDirname(ftlFilePath), ftlFileBasename),
                     Buffer.from(modifiedFtlFileContent, "utf8")
                 );
             })
@@ -187,15 +180,15 @@ export async function buildJar(params: {
         });
 
         await fs.writeFile(
-            pathJoin(keycloakifyBuildTmpDirPath, "pom.xml"),
+            pathJoin(keycloakifyBuildCacheDirPath, "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 },
+            `mvn install -Dmaven.repo.local="${pathJoin(keycloakifyBuildCacheDirPath, ".m2")}"`,
+            { cwd: keycloakifyBuildCacheDirPath },
             error => {
                 if (error !== null) {
                     console.error(
@@ -220,12 +213,10 @@ export async function buildJar(params: {
 
     await fs.rename(
         pathJoin(
-            keycloakifyBuildTmpDirPath,
+            keycloakifyBuildCacheDirPath,
             "target",
             `${buildContext.artifactId}-${buildContext.themeVersion}.jar`
         ),
         pathJoin(buildContext.keycloakifyBuildDirPath, jarFileBasename)
     );
-
-    rmSync(keycloakifyBuildTmpDirPath, { recursive: true });
 }

src/bin/keycloakify/buildJars/buildJars.ts

@@ -10,7 +10,7 @@ import type { BuildContext } from "../../shared/buildContext";
 export type BuildContextLike = BuildContextLike_buildJar & {
     projectDirPath: string;
     keycloakifyBuildDirPath: string;
-    recordIsImplementedByThemeType: BuildContext["recordIsImplementedByThemeType"];
+    implementedThemeTypes: BuildContext["implementedThemeTypes"];
     jarTargets: BuildContext["jarTargets"];
 };
 
@@ -22,7 +22,9 @@ export async function buildJars(params: {
 }): Promise<void> {
     const { resourcesDirPath, buildContext } = params;
 
-    const doesImplementAccountTheme = buildContext.recordIsImplementedByThemeType.account;
+    const doesImplementAccountV1Theme =
+        buildContext.implementedThemeTypes.account.isImplemented &&
+        buildContext.implementedThemeTypes.account.type === "Multi-Page";
 
     await Promise.all(
         keycloakAccountV1Versions
@@ -30,7 +32,7 @@ export async function buildJars(params: {
                 keycloakThemeAdditionalInfoExtensionVersions.map(
                     keycloakThemeAdditionalInfoExtensionVersion => {
                         const keycloakVersionRange = getKeycloakVersionRangeForJar({
-                            doesImplementAccountTheme,
+                            doesImplementAccountV1Theme,
                             keycloakAccountV1Version,
                             keycloakThemeAdditionalInfoExtensionVersion
                         });
@@ -55,6 +57,7 @@ export async function buildJars(params: {
                             keycloakAccountV1Version,
                             keycloakThemeAdditionalInfoExtensionVersion,
                             resourcesDirPath,
+                            doesImplementAccountV1Theme,
                             buildContext
                         });
                     }

src/bin/keycloakify/buildJars/getKeycloakVersionRangeForJar.ts

@@ -6,17 +6,17 @@ import type {
 import type { KeycloakVersionRange } from "../../shared/KeycloakVersionRange";
 
 export function getKeycloakVersionRangeForJar(params: {
-    doesImplementAccountTheme: boolean;
+    doesImplementAccountV1Theme: boolean;
     keycloakAccountV1Version: KeycloakAccountV1Version;
     keycloakThemeAdditionalInfoExtensionVersion: KeycloakThemeAdditionalInfoExtensionVersion;
 }): KeycloakVersionRange | undefined {
     const {
         keycloakAccountV1Version,
         keycloakThemeAdditionalInfoExtensionVersion,
-        doesImplementAccountTheme
+        doesImplementAccountV1Theme
     } = params;
 
-    if (doesImplementAccountTheme) {
+    if (doesImplementAccountV1Theme) {
         const keycloakVersionRange = (() => {
             switch (keycloakAccountV1Version) {
                 case null:
@@ -63,7 +63,7 @@ export function getKeycloakVersionRangeForJar(params: {
         assert<
             Equals<
                 typeof keycloakVersionRange,
-                KeycloakVersionRange.WithAccountTheme | undefined
+                KeycloakVersionRange.WithAccountV1Theme | undefined
             >
         >();
 
@@ -87,7 +87,7 @@ export function getKeycloakVersionRangeForJar(params: {
         assert<
             Equals<
                 typeof keycloakVersionRange,
-                KeycloakVersionRange.WithoutAccountTheme | undefined
+                KeycloakVersionRange.WithoutAccountV1Theme | undefined
             >
         >();
 

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -1,26 +1,25 @@
-import cheerio from "cheerio";
-import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
-import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
+import * as cheerio from "cheerio";
+import {
+    replaceImportsInJsCode,
+    BuildContextLike as BuildContextLike_replaceImportsInJsCode
+} from "../replacers/replaceImportsInJsCode";
+import {
+    replaceImportsInCssCode,
+    BuildContextLike as BuildContextLike_replaceImportsInCssCode
+} from "../replacers/replaceImportsInCssCode";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
 import type { BuildContext } from "../../shared/buildContext";
 import { assert } from "tsafe/assert";
-import {
-    type ThemeType,
-    basenameOfTheKeycloakifyResourcesDir,
-    resources_common,
-    nameOfTheLocalizationRealmOverridesUserProfileProperty
-} from "../../shared/constants";
+import { type ThemeType, WELL_KNOWN_DIRECTORY_BASE_NAME } from "../../shared/constants";
 import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
 
-export type BuildContextLike = {
-    bundler: "vite" | "webpack";
-    themeVersion: string;
-    urlPathname: string | undefined;
-    projectBuildDirPath: string;
-    assetsDirPath: string;
-    kcContextExclusionsFtlCode: string | undefined;
-};
+export type BuildContextLike = BuildContextLike_replaceImportsInJsCode &
+    BuildContextLike_replaceImportsInCssCode & {
+        urlPathname: string | undefined;
+        themeVersion: string;
+        kcContextExclusionsFtlCode: string | undefined;
+    };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
 
@@ -74,7 +73,8 @@ export function generateFtlFilesCodeFactory(params: {
         (
             [
                 ["link", "href"],
-                ["script", "src"]
+                ["script", "src"],
+                ["script", "data-src"]
             ] as const
         ).forEach(([selector, attrName]) =>
             $(selector).each((...[, element]) => {
@@ -90,7 +90,7 @@ export function generateFtlFilesCodeFactory(params: {
                         new RegExp(
                             `^${(buildContext.urlPathname ?? "/").replace(/\//g, "\\/")}`
                         ),
-                        `\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/`
+                        `\${xKeycloakify.resourcesPath}/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/`
                     )
                 );
             })
@@ -110,23 +110,17 @@ export function generateFtlFilesCodeFactory(params: {
             )
         )
         .toString("utf8")
+        .replace("{{themeType}}", themeType)
+        .replace("{{themeName}}", themeName)
+        .replace("{{keycloakifyVersion}}", keycloakifyVersion)
+        .replace("{{themeVersion}}", buildContext.themeVersion)
+        .replace("{{fieldNames}}", fieldNames.map(name => `"${name}"`).join(", "))
+        .replace("{{RESOURCES_COMMON}}", WELL_KNOWN_DIRECTORY_BASE_NAME.RESOURCES_COMMON)
         .replace(
-            "FIELD_NAMES_eKsIY4ZsZ4xeM",
-            fieldNames.map(name => `"${name}"`).join(", ")
-        )
-        .replace("KEYCLOAKIFY_VERSION_xEdKd3xEdr", keycloakifyVersion)
-        .replace("KEYCLOAKIFY_THEME_VERSION_sIgKd3xEdr3dx", buildContext.themeVersion)
-        .replace("KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr", themeType)
-        .replace("KEYCLOAKIFY_THEME_NAME_cXxKd3xEer", themeName)
-        .replace("RESOURCES_COMMON_cLsLsMrtDkpVv", resources_common)
-        .replace(
-            "lOCALIZATION_REALM_OVERRIDES_USER_PROFILE_PROPERTY_KEY_aaGLsPgGIdeeX",
-            nameOfTheLocalizationRealmOverridesUserProfileProperty
-        )
-        .replace(
-            "USER_DEFINED_EXCLUSIONS_eKsaY4ZsZ4eMr2",
+            "{{userDefinedExclusions}}",
             buildContext.kcContextExclusionsFtlCode ?? ""
         );
+
     const ftlObjectToJsCodeDeclaringAnObjectPlaceholder =
         '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }';
 
@@ -171,7 +165,8 @@ export function generateFtlFilesCodeFactory(params: {
         Object.entries({
             [ftlObjectToJsCodeDeclaringAnObjectPlaceholder]:
                 kcContextDeclarationTemplateFtl,
-            PAGE_ID_xIgLsPgGId9D8e: pageId
+            "{{pageId}}": pageId,
+            "{{ftlTemplateFileName}}": pageId
         }).map(
             ([searchValue, replaceValue]) =>
                 (ftlCode = ftlCode.replace(searchValue, replaceValue))

src/bin/keycloakify/generateResources/bringInAccountV1.ts

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

src/bin/keycloakify/generateResources/generateMessageProperties.ts

@@ -1,167 +1,442 @@
-import type { ThemeType } from "../../shared/constants";
+import { type ThemeType, FALLBACK_LANGUAGE_TAG } from "../../shared/constants";
 import { crawl } from "../../tools/crawl";
-import { join as pathJoin } from "path";
-import { readFileSync } from "fs";
+import { join as pathJoin, dirname as pathDirname } from "path";
 import { symToStr } from "tsafe/symToStr";
-import { removeDuplicates } from "evt/tools/reducers/removeDuplicates";
 import * as recast from "recast";
 import * as babelParser from "@babel/parser";
 import babelGenerate from "@babel/generator";
 import * as babelTypes from "@babel/types";
 import { escapeStringForPropertiesFile } from "../../tools/escapeStringForPropertiesFile";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
+import * as fs from "fs";
+import { assert } from "tsafe/assert";
+import type { BuildContext } from "../../shared/buildContext";
+import { getAbsoluteAndInOsFormatPath } from "../../tools/getAbsoluteAndInOsFormatPath";
+
+export type BuildContextLike = {
+    themeNames: string[];
+    themeSrcDirPath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
 
 export function generateMessageProperties(params: {
-    themeSrcDirPath: string;
+    buildContext: BuildContextLike;
     themeType: ThemeType;
-}): { languageTag: string; propertiesFileSource: string }[] {
-    const { themeSrcDirPath, themeType } = params;
+}): {
+    languageTags: string[];
+    writeMessagePropertiesFiles: (params: {
+        messageDirPath: string;
+        themeName: string;
+    }) => void;
+} {
+    const { buildContext, themeType } = params;
 
-    let files = crawl({
-        dirPath: pathJoin(themeSrcDirPath, themeType),
-        returnedPathsType: "absolute"
-    });
-
-    files = files.filter(file => {
-        const regex = /\.(js|ts|tsx)$/;
-        return regex.test(file);
-    });
-
-    files = files.sort((a, b) => {
-        const regex = /\.i18n\.(ts|js|tsx)$/;
-        const aIsI18nFile = regex.test(a);
-        const bIsI18nFile = regex.test(b);
-        return aIsI18nFile === bIsI18nFile ? 0 : aIsI18nFile ? -1 : 1;
-    });
-
-    files = files.sort((a, b) => a.length - b.length);
-
-    files = files.filter(file =>
-        readFileSync(file).toString("utf8").includes("createUseI18n")
+    const baseMessagesDirPath = pathJoin(
+        getThisCodebaseRootDirPath(),
+        "src",
+        themeType,
+        "i18n",
+        "messages_defaultSet"
     );
 
-    if (files.length === 0) {
-        return [];
-    }
+    const messages_defaultSet_by_languageTag_defaultSet: {
+        [languageTag_defaultSet: string]: Record<string, string>;
+    } = Object.fromEntries(
+        fs
+            .readdirSync(baseMessagesDirPath)
+            .filter(basename => basename !== "index.ts" && basename !== "types.ts")
+            .map(basename => ({
+                languageTag: basename.replace(/\.ts$/, ""),
+                filePath: pathJoin(baseMessagesDirPath, basename)
+            }))
+            .map(({ languageTag, filePath }) => {
+                const lines = fs.readFileSync(filePath).toString("utf8").split(/\r?\n/);
 
-    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
-                }
-            });
+                let messagesJson = "{";
 
-            const codes: string[] = [];
+                let isInDeclaration = false;
 
-            recast.visit(root, {
-                visitCallExpression: function (path) {
-                    if (
-                        path.node.callee.type === "Identifier" &&
-                        path.node.callee.name === "createUseI18n"
-                    ) {
-                        codes.push(babelGenerate(path.node.arguments[0] as any).code);
+                for (const line of lines) {
+                    if (!isInDeclaration) {
+                        if (line.startsWith("const messages")) {
+                            isInDeclaration = true;
+                        }
+
+                        continue;
                     }
-                    this.traverse(path);
+
+                    if (line.startsWith("}")) {
+                        messagesJson += "}";
+                        break;
+                    }
+
+                    messagesJson += line;
                 }
-            });
 
-            return codes;
-        })
-        .flat()
-        .map(code => {
-            let extraMessages: {
-                [languageTag: string]: Record<string, string>;
-            } = {};
+                const messages = JSON.parse(messagesJson) as Record<string, string>;
 
-            try {
-                eval(`${symToStr({ extraMessages })} = ${code}`);
-            } catch {
-                console.warn(
-                    [
-                        "WARNING: Make sure that the first argument of createUseI18n can be evaluated in a javascript",
-                        "runtime where only the node globals are available.",
-                        "This is important because we need to put your i18n messages in messages_*.properties files",
-                        "or they won't be available server side.",
-                        "\n",
-                        "The following code could not be evaluated:",
-                        "\n",
-                        code
-                    ].join(" ")
-                );
-            }
+                return [languageTag, messages];
+            })
+    );
 
-            return extraMessages;
+    const { i18nTsFilePath } = (() => {
+        let files = crawl({
+            dirPath: pathJoin(buildContext.themeSrcDirPath, themeType),
+            returnedPathsType: "absolute"
         });
 
-    const languageTags = extraMessages
-        .map(extraMessage => Object.keys(extraMessage))
-        .flat()
-        .reduce(...removeDuplicates<string>());
+        files = files.filter(file => {
+            const regex = /\.(js|ts|tsx)$/;
+            return regex.test(file);
+        });
 
-    const keyValueMapByLanguageTag: Record<string, Record<string, string>> = {};
+        files = files.sort((a, b) => {
+            const regex = /\.i18n\.(ts|js|tsx)$/;
+            const aIsI18nFile = regex.test(a);
+            const bIsI18nFile = regex.test(b);
+            return aIsI18nFile === bIsI18nFile ? 0 : aIsI18nFile ? -1 : 1;
+        });
 
-    for (const languageTag of languageTags) {
-        const keyValueMap: Record<string, string> = {};
+        files = files.sort((a, b) => a.length - b.length);
 
-        for (const extraMessage of extraMessages) {
-            const keyValueMap_i = extraMessage[languageTag];
+        files = files.filter(file =>
+            fs.readFileSync(file).toString("utf8").includes("i18nBuilder")
+        );
 
-            if (keyValueMap_i === undefined) {
-                continue;
-            }
+        const i18nTsFilePath: string | undefined = files[0];
 
-            for (const [key, value] of Object.entries(keyValueMap_i)) {
-                if (keyValueMap[key] !== undefined) {
-                    console.warn(
-                        [
-                            "WARNING: The following key is defined multiple times:",
-                            "\n",
-                            key,
-                            "\n",
-                            "The following value will be ignored:",
-                            "\n",
-                            value,
-                            "\n",
-                            "The following value was already defined:",
-                            "\n",
-                            keyValueMap[key]
-                        ].join(" ")
-                    );
-                    continue;
-                }
+        return { i18nTsFilePath };
+    })();
 
-                keyValueMap[key] = value;
-            }
+    const i18nTsRoot = (() => {
+        if (i18nTsFilePath === undefined) {
+            return undefined;
+        }
+        const root = recastParseTs(i18nTsFilePath);
+        return root;
+    })();
+
+    const messages_defaultSet_by_languageTag_notInDefaultSet:
+        | { [languageTag_notInDefaultSet: string]: Record<string, string> }
+        | undefined = (() => {
+        if (i18nTsRoot === undefined) {
+            return undefined;
         }
 
-        keyValueMapByLanguageTag[languageTag] = keyValueMap;
-    }
+        let extraLanguageEntryByLanguageTag: Record<
+            string,
+            { label: string; path: string }
+        > = {};
 
-    const out: { languageTag: string; propertiesFileSource: string }[] = [];
+        recast.visit(i18nTsRoot, {
+            visitCallExpression: function (path) {
+                const node = path.node;
 
-    for (const [languageTag, keyValueMap] of Object.entries(keyValueMapByLanguageTag)) {
-        const propertiesFileSource = Object.entries(keyValueMap)
-            .map(([key, value]) => `${key}=${escapeStringForPropertiesFile(value)}`)
-            .join("\n");
+                // Check if the callee is a MemberExpression with property 'withExtraLanguages'
+                if (
+                    node.callee.type === "MemberExpression" &&
+                    node.callee.property.type === "Identifier" &&
+                    node.callee.property.name === "withExtraLanguages"
+                ) {
+                    const arg = node.arguments[0];
+                    if (arg && arg.type === "ObjectExpression") {
+                        // Iterate over the properties of the object
+                        arg.properties.forEach(prop => {
+                            if (
+                                prop.type === "ObjectProperty" &&
+                                prop.key.type === "Identifier"
+                            ) {
+                                const lang = prop.key.name;
+                                const value = prop.value;
 
-        out.push({
-            languageTag,
-            propertiesFileSource: [
-                "# This file was generated by keycloakify",
-                "",
-                "parent=base",
-                "",
-                propertiesFileSource,
-                ""
-            ].join("\n")
+                                if (value.type === "ObjectExpression") {
+                                    let label: string | undefined = undefined;
+                                    let pathStr: string | undefined = undefined;
+
+                                    // Iterate over the properties of the language object
+                                    value.properties.forEach(p => {
+                                        if (
+                                            p.type === "ObjectProperty" &&
+                                            p.key.type === "Identifier"
+                                        ) {
+                                            if (
+                                                p.key.name === "label" &&
+                                                p.value.type === "StringLiteral"
+                                            ) {
+                                                label = p.value.value;
+                                            }
+                                            if (
+                                                p.key.name === "getMessages" &&
+                                                (p.value.type ===
+                                                    "ArrowFunctionExpression" ||
+                                                    p.value.type === "FunctionExpression")
+                                            ) {
+                                                // Extract the import path from the function body
+                                                const body = p.value.body;
+                                                if (
+                                                    body.type === "CallExpression" &&
+                                                    body.callee.type === "Import"
+                                                ) {
+                                                    const importArg = body.arguments[0];
+                                                    if (
+                                                        importArg.type === "StringLiteral"
+                                                    ) {
+                                                        pathStr = importArg.value;
+                                                    }
+                                                } else if (
+                                                    body.type === "BlockStatement"
+                                                ) {
+                                                    // If the function body is a block (e.g., function with braces {})
+                                                    // Look for return statement
+                                                    body.body.forEach(statement => {
+                                                        if (
+                                                            statement.type ===
+                                                                "ReturnStatement" &&
+                                                            statement.argument &&
+                                                            statement.argument.type ===
+                                                                "CallExpression" &&
+                                                            statement.argument.callee
+                                                                .type === "Import"
+                                                        ) {
+                                                            const importArg =
+                                                                statement.argument
+                                                                    .arguments[0];
+                                                            if (
+                                                                importArg.type ===
+                                                                "StringLiteral"
+                                                            ) {
+                                                                pathStr = importArg.value;
+                                                            }
+                                                        }
+                                                    });
+                                                }
+                                            }
+                                        }
+                                    });
+
+                                    if (label && pathStr) {
+                                        extraLanguageEntryByLanguageTag[lang] = {
+                                            label,
+                                            path: pathStr
+                                        };
+                                    }
+                                }
+                            }
+                        });
+                    }
+
+                    return false; // Stop traversing this path
+                }
+
+                this.traverse(path); // Continue traversing other paths
+            }
         });
-    }
 
-    return out;
+        const messages_defaultSet_by_languageTag_notInDefaultSet = Object.fromEntries(
+            Object.entries(extraLanguageEntryByLanguageTag).map(
+                ([languageTag, { path: relativePathWithoutExt }]) => [
+                    languageTag,
+                    (() => {
+                        const filePath = getAbsoluteAndInOsFormatPath({
+                            pathIsh: relativePathWithoutExt.endsWith(".ts")
+                                ? relativePathWithoutExt
+                                : `${relativePathWithoutExt}.ts`,
+                            cwd: pathDirname(i18nTsFilePath)
+                        });
+
+                        const root = recastParseTs(filePath);
+
+                        let declarationCode: string | undefined = "";
+
+                        recast.visit(root, {
+                            visitVariableDeclarator: function (path) {
+                                const node = path.node;
+
+                                // Check if the variable name is 'messages'
+                                if (
+                                    node.id.type === "Identifier" &&
+                                    node.id.name === "messages"
+                                ) {
+                                    // Ensure there is an initializer
+                                    if (node.init) {
+                                        // Generate code from the initializer, preserving comments
+                                        declarationCode = recast
+                                            .print(node.init)
+                                            .code.replace(/}.*$/, "}");
+                                    }
+                                    return false; // Stop traversing this path
+                                }
+
+                                this.traverse(path); // Continue traversing other paths
+                            }
+                        });
+
+                        assert(
+                            declarationCode !== undefined,
+                            `${filePath} does not contain a 'messages' variable declaration`
+                        );
+
+                        let messages: Record<string, string> = {};
+
+                        try {
+                            eval(`${symToStr({ messages })} = ${declarationCode};`);
+                        } catch {
+                            throw new Error(
+                                `The declaration of 'message' in ${filePath} cannot be statically evaluated: ${declarationCode}`
+                            );
+                        }
+
+                        return messages;
+                    })()
+                ]
+            )
+        );
+
+        return messages_defaultSet_by_languageTag_notInDefaultSet;
+    })();
+
+    const messages_defaultSet_by_languageTag = {
+        ...messages_defaultSet_by_languageTag_defaultSet,
+        ...messages_defaultSet_by_languageTag_notInDefaultSet
+    };
+
+    const messages_themeDefined_by_languageTag:
+        | {
+              [languageTag: string]:
+                  | Record<string, string | Record<string, string>>
+                  | undefined;
+          }
+        | undefined = (() => {
+        if (i18nTsRoot === undefined) {
+            return undefined;
+        }
+
+        let firstArgumentCode: string | undefined = undefined;
+
+        recast.visit(i18nTsRoot, {
+            visitCallExpression: function (path) {
+                const node = path.node;
+
+                if (
+                    node.callee.type === "MemberExpression" &&
+                    node.callee.property.type === "Identifier" &&
+                    node.callee.property.name === "withCustomTranslations"
+                ) {
+                    firstArgumentCode = babelGenerate(node.arguments[0] as any).code;
+                    return false;
+                }
+
+                this.traverse(path);
+            }
+        });
+
+        if (firstArgumentCode === undefined) {
+            return undefined;
+        }
+
+        let messages_themeDefined_by_languageTag: {
+            [languageTag: string]: Record<string, string | Record<string, string>>;
+        } = {};
+
+        try {
+            eval(
+                `${symToStr({ messages_themeDefined_by_languageTag })} = ${firstArgumentCode}`
+            );
+        } catch {
+            console.warn(
+                [
+                    "WARNING: The argument of withCustomTranslations can't be statically evaluated!",
+                    "This needs to be fixed refer to the documentation: https://docs.keycloakify.dev/i18n",
+                    firstArgumentCode
+                ].join(" ")
+            );
+            return undefined;
+        }
+
+        return messages_themeDefined_by_languageTag;
+    })();
+
+    const languageTags = Object.keys(messages_defaultSet_by_languageTag);
+
+    return {
+        languageTags,
+        writeMessagePropertiesFiles: ({ messageDirPath, themeName }) => {
+            for (const languageTag of languageTags) {
+                const messages = {
+                    ...messages_defaultSet_by_languageTag[languageTag]
+                };
+
+                add_theme_defined_messages: {
+                    if (messages_themeDefined_by_languageTag === undefined) {
+                        break add_theme_defined_messages;
+                    }
+
+                    let messages_themeDefined =
+                        messages_themeDefined_by_languageTag[languageTag];
+
+                    if (messages_themeDefined === undefined) {
+                        messages_themeDefined =
+                            messages_themeDefined_by_languageTag[FALLBACK_LANGUAGE_TAG];
+                    }
+                    if (messages_themeDefined === undefined) {
+                        messages_themeDefined =
+                            messages_themeDefined_by_languageTag[
+                                Object.keys(messages_themeDefined_by_languageTag)[0]
+                            ];
+                    }
+                    if (messages_themeDefined === undefined) {
+                        break add_theme_defined_messages;
+                    }
+
+                    for (const [key, messageOrMessageByThemeName] of Object.entries(
+                        messages_themeDefined
+                    )) {
+                        const message = (() => {
+                            if (typeof messageOrMessageByThemeName === "string") {
+                                return messageOrMessageByThemeName;
+                            }
+
+                            const message = messageOrMessageByThemeName[themeName];
+
+                            assert(message !== undefined);
+
+                            return message;
+                        })();
+
+                        messages[key] = message;
+                    }
+                }
+
+                const propertiesFileSource = [
+                    "",
+                    ...Object.entries(messages).map(
+                        ([key, value]) => `${key}=${escapeStringForPropertiesFile(value)}`
+                    ),
+                    ""
+                ].join("\n");
+
+                fs.mkdirSync(messageDirPath, { recursive: true });
+
+                fs.writeFileSync(
+                    pathJoin(messageDirPath, `messages_${languageTag}.properties`),
+                    Buffer.from(propertiesFileSource, "utf8")
+                );
+            }
+        }
+    };
+}
+
+function recastParseTs(filePath: string): recast.types.ASTNode {
+    return recast.parse(fs.readFileSync(filePath).toString("utf8"), {
+        parser: {
+            parse: (code: string) =>
+                babelParser.parse(code, {
+                    sourceType: "module",
+                    plugins: ["typescript"]
+                }),
+            generator: babelGenerate,
+            types: babelTypes
+        }
+    });
 }

src/bin/keycloakify/generateResources/generateResources.ts

@@ -26,17 +26,19 @@ export async function generateResources(params: {
         rmSync(resourcesDirPath, { recursive: true });
     }
 
-    await generateResourcesForMainTheme({
-        resourcesDirPath,
-        themeName,
-        buildContext
-    });
+    const { writeMessagePropertiesFilesForThemeVariant } =
+        await generateResourcesForMainTheme({
+            resourcesDirPath,
+            themeName,
+            buildContext
+        });
 
     for (const themeVariantName of themeVariantNames) {
         generateResourcesForThemeVariant({
             resourcesDirPath,
             themeName,
-            themeVariantName
+            themeVariantName,
+            writeMessagePropertiesFiles: writeMessagePropertiesFilesForThemeVariant
         });
     }
 }

src/bin/keycloakify/generateResources/generateResourcesForMainTheme.ts

@@ -1,11 +1,6 @@
 import { transformCodebase } from "../../tools/transformCodebase";
 import * as fs from "fs";
-import {
-    join as pathJoin,
-    resolve as pathResolve,
-    relative as pathRelative,
-    dirname as pathDirname
-} from "path";
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
 import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
 import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
 import {
@@ -14,26 +9,18 @@ import {
 } from "../generateFtl";
 import {
     type ThemeType,
-    lastKeycloakVersionWithAccountV1,
-    keycloak_resources,
-    accountV1ThemeName,
-    basenameOfTheKeycloakifyResourcesDir,
-    loginThemePageIds,
-    accountThemePageIds
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
+    WELL_KNOWN_DIRECTORY_BASE_NAME
 } from "../../shared/constants";
 import type { BuildContext } from "../../shared/buildContext";
 import { assert, type Equals } from "tsafe/assert";
-import {
-    downloadKeycloakStaticResources,
-    type BuildContextLike as BuildContextLike_downloadKeycloakStaticResources
-} from "../../shared/downloadKeycloakStaticResources";
 import { readFieldNameUsage } from "./readFieldNameUsage";
 import { readExtraPagesNames } from "./readExtraPageNames";
-import { generateMessageProperties } from "./generateMessageProperties";
 import {
-    bringInAccountV1,
-    type BuildContextLike as BuildContextLike_bringInAccountV1
-} from "./bringInAccountV1";
+    generateMessageProperties,
+    type BuildContextLike as BuildContextLike_generateMessageProperties
+} from "./generateMessageProperties";
 import { rmSync } from "../../tools/fs.rmSync";
 import { readThisNpmPackageVersion } from "../../tools/readThisNpmPackageVersion";
 import {
@@ -42,26 +29,33 @@ import {
 } from "../../shared/metaInfKeycloakThemes";
 import { objectEntries } from "tsafe/objectEntries";
 import { escapeStringForPropertiesFile } from "../../tools/escapeStringForPropertiesFile";
+import * as child_process from "child_process";
+import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
 
 export type BuildContextLike = BuildContextLike_kcContextExclusionsFtlCode &
-    BuildContextLike_downloadKeycloakStaticResources &
-    BuildContextLike_bringInAccountV1 & {
+    BuildContextLike_generateMessageProperties & {
         extraThemeProperties: string[] | undefined;
-        loginThemeResourcesFromKeycloakVersion: string;
         projectDirPath: string;
         projectBuildDirPath: string;
         environmentVariables: { name: string; default: string }[];
-        recordIsImplementedByThemeType: BuildContext["recordIsImplementedByThemeType"];
+        implementedThemeTypes: BuildContext["implementedThemeTypes"];
         themeSrcDirPath: string;
+        bundler: "vite" | "webpack";
+        packageJsonFilePath: string;
     };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
 
 export async function generateResourcesForMainTheme(params: {
+    buildContext: BuildContextLike;
     themeName: string;
     resourcesDirPath: string;
-    buildContext: BuildContextLike;
-}): Promise<void> {
+}): Promise<{
+    writeMessagePropertiesFilesForThemeVariant: (params: {
+        getMessageDirPath: (params: { themeType: ThemeType }) => string;
+        themeName: string;
+    }) => void;
+}> {
     const { themeName, resourcesDirPath, buildContext } = params;
 
     const getThemeTypeDirPath = (params: { themeType: ThemeType | "email" }) => {
@@ -69,18 +63,27 @@ export async function generateResourcesForMainTheme(params: {
         return pathJoin(resourcesDirPath, "theme", themeName, themeType);
     };
 
+    const writeMessagePropertiesFilesByThemeType: Partial<
+        Record<ThemeType, (params: { messageDirPath: string; themeName: string }) => void>
+    > = {};
+
     for (const themeType of ["login", "account"] as const) {
-        if (!buildContext.recordIsImplementedByThemeType[themeType]) {
+        if (!buildContext.implementedThemeTypes[themeType].isImplemented) {
             continue;
         }
 
+        const isForAccountSpa =
+            themeType === "account" &&
+            (assert(buildContext.implementedThemeTypes.account.isImplemented),
+            buildContext.implementedThemeTypes.account.type === "Single-Page");
+
         const themeTypeDirPath = getThemeTypeDirPath({ themeType });
 
         apply_replacers_and_move_to_theme_resources: {
             const destDirPath = pathJoin(
                 themeTypeDirPath,
                 "resources",
-                basenameOfTheKeycloakifyResourcesDir
+                WELL_KNOWN_DIRECTORY_BASE_NAME.DIST
             );
 
             // NOTE: Prevent accumulation of files in the assets dir, as names are hashed they pile up.
@@ -88,7 +91,7 @@ export async function generateResourcesForMainTheme(params: {
 
             if (
                 themeType === "account" &&
-                buildContext.recordIsImplementedByThemeType.login
+                buildContext.implementedThemeTypes.login.isImplemented
             ) {
                 // NOTE: We prevent doing it twice, it has been done for the login theme.
 
@@ -98,7 +101,7 @@ export async function generateResourcesForMainTheme(params: {
                             themeType: "login"
                         }),
                         "resources",
-                        basenameOfTheKeycloakifyResourcesDir
+                        WELL_KNOWN_DIRECTORY_BASE_NAME.DIST
                     ),
                     destDirPath
                 });
@@ -109,7 +112,7 @@ export async function generateResourcesForMainTheme(params: {
             {
                 const dirPath = pathJoin(
                     buildContext.projectBuildDirPath,
-                    keycloak_resources
+                    WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES
                 );
 
                 if (fs.existsSync(dirPath)) {
@@ -117,7 +120,7 @@ export async function generateResourcesForMainTheme(params: {
 
                     throw new Error(
                         [
-                            `Keycloakify build error: The ${keycloak_resources} directory shouldn't exist in your build directory.`,
+                            `Keycloakify build error: The ${WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES} directory shouldn't exist in your build directory.`,
                             `(${pathRelative(process.cwd(), dirPath)}).\n`,
                             `Theses assets are only required for local development with Storybook.",
                             "Please remove this directory as an additional step of your command.\n`,
@@ -177,15 +180,17 @@ export async function generateResourcesForMainTheme(params: {
             ...(() => {
                 switch (themeType) {
                     case "login":
-                        return loginThemePageIds;
+                        return LOGIN_THEME_PAGE_IDS;
                     case "account":
-                        return accountThemePageIds;
+                        return isForAccountSpa ? ["index.ftl"] : ACCOUNT_THEME_PAGE_IDS;
                 }
             })(),
-            ...readExtraPagesNames({
-                themeType,
-                themeSrcDirPath: buildContext.themeSrcDirPath
-            })
+            ...(isForAccountSpa
+                ? []
+                : readExtraPagesNames({
+                      themeType,
+                      themeSrcDirPath: buildContext.themeSrcDirPath
+                  }))
         ].forEach(pageId => {
             const { ftlCode } = generateFtlFilesCode({ pageId });
 
@@ -195,40 +200,78 @@ export async function generateResourcesForMainTheme(params: {
             );
         });
 
-        generateMessageProperties({
-            themeSrcDirPath: buildContext.themeSrcDirPath,
-            themeType
-        }).forEach(({ languageTag, propertiesFileSource }) => {
-            const messagesDirPath = pathJoin(themeTypeDirPath, "messages");
+        let languageTags: string[] | undefined = undefined;
 
-            fs.mkdirSync(pathJoin(themeTypeDirPath, "messages"), {
-                recursive: true
+        i18n_messages_generation: {
+            if (isForAccountSpa) {
+                break i18n_messages_generation;
+            }
+
+            const wrap = generateMessageProperties({
+                buildContext,
+                themeType
             });
 
-            const propertiesFilePath = pathJoin(
-                messagesDirPath,
-                `messages_${languageTag}.properties`
-            );
+            languageTags = wrap.languageTags;
+            const { writeMessagePropertiesFiles } = wrap;
 
-            fs.writeFileSync(
-                propertiesFilePath,
-                Buffer.from(propertiesFileSource, "utf8")
-            );
-        });
+            writeMessagePropertiesFilesByThemeType[themeType] =
+                writeMessagePropertiesFiles;
 
-        await downloadKeycloakStaticResources({
-            keycloakVersion: (() => {
-                switch (themeType) {
-                    case "account":
-                        return lastKeycloakVersionWithAccountV1;
-                    case "login":
-                        return buildContext.loginThemeResourcesFromKeycloakVersion;
-                }
-            })(),
-            themeDirPath: pathResolve(pathJoin(themeTypeDirPath, "..")),
-            themeType,
-            buildContext
-        });
+            writeMessagePropertiesFiles({
+                messageDirPath: pathJoin(themeTypeDirPath, "messages"),
+                themeName
+            });
+        }
+
+        bring_in_account_v3_i18n_messages: {
+            if (!buildContext.implementedThemeTypes.account.isImplemented) {
+                break bring_in_account_v3_i18n_messages;
+            }
+            if (buildContext.implementedThemeTypes.account.type !== "Single-Page") {
+                break bring_in_account_v3_i18n_messages;
+            }
+
+            const accountUiDirPath = child_process
+                .execSync("npm list @keycloakify/keycloak-account-ui --parseable", {
+                    cwd: pathDirname(buildContext.packageJsonFilePath)
+                })
+                .toString("utf8")
+                .trim();
+
+            const messagesDirPath = pathJoin(accountUiDirPath, "messages");
+
+            if (!fs.existsSync(messagesDirPath)) {
+                throw new Error(
+                    `Please update @keycloakify/keycloak-account-ui to 25.0.4-rc.5 or later.`
+                );
+            }
+
+            transformCodebase({
+                srcDirPath: messagesDirPath,
+                destDirPath: pathJoin(
+                    getThemeTypeDirPath({ themeType: "account" }),
+                    "messages"
+                )
+            });
+        }
+
+        keycloak_static_resources: {
+            if (isForAccountSpa) {
+                break keycloak_static_resources;
+            }
+
+            transformCodebase({
+                srcDirPath: pathJoin(
+                    getThisCodebaseRootDirPath(),
+                    "res",
+                    "public",
+                    WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES,
+                    themeType
+                ),
+                destDirPath: pathJoin(themeTypeDirPath, "resources")
+            });
+        }
 
         fs.writeFileSync(
             pathJoin(themeTypeDirPath, "theme.properties"),
@@ -237,17 +280,21 @@ export async function generateResourcesForMainTheme(params: {
                     `parent=${(() => {
                         switch (themeType) {
                             case "account":
-                                return accountV1ThemeName;
+                                return isForAccountSpa ? "base" : "account-v1";
                             case "login":
                                 return "keycloak";
                         }
                         assert<Equals<typeof themeType, never>>(false);
                     })()}`,
+                    ...(isForAccountSpa ? ["deprecatedMode=false"] : []),
                     ...(buildContext.extraThemeProperties ?? []),
                     ...buildContext.environmentVariables.map(
                         ({ name, default: defaultValue }) =>
                             `${name}=\${env.${name}:${escapeStringForPropertiesFile(defaultValue)}}`
-                    )
+                    ),
+                    ...(languageTags === undefined
+                        ? []
+                        : [`locales=${languageTags.join(",")}`])
                 ].join("\n\n"),
                 "utf8"
             )
@@ -255,7 +302,7 @@ export async function generateResourcesForMainTheme(params: {
     }
 
     email: {
-        if (!buildContext.recordIsImplementedByThemeType.email) {
+        if (!buildContext.implementedThemeTypes.email.isImplemented) {
             break email;
         }
 
@@ -267,10 +314,18 @@ export async function generateResourcesForMainTheme(params: {
         });
     }
 
-    if (buildContext.recordIsImplementedByThemeType.account) {
-        await bringInAccountV1({
-            resourcesDirPath,
-            buildContext
+    bring_in_account_v1: {
+        if (!buildContext.implementedThemeTypes.account.isImplemented) {
+            break bring_in_account_v1;
+        }
+
+        if (buildContext.implementedThemeTypes.account.type !== "Multi-Page") {
+            break bring_in_account_v1;
+        }
+
+        transformCodebase({
+            srcDirPath: pathJoin(getThisCodebaseRootDirPath(), "res", "account-v1"),
+            destDirPath: pathJoin(resourcesDirPath, "theme", "account-v1", "account")
         });
     }
 
@@ -279,14 +334,14 @@ export async function generateResourcesForMainTheme(params: {
 
         metaInfKeycloakThemes.themes.push({
             name: themeName,
-            types: objectEntries(buildContext.recordIsImplementedByThemeType)
-                .filter(([, isImplemented]) => isImplemented)
+            types: objectEntries(buildContext.implementedThemeTypes)
+                .filter(([, { isImplemented }]) => isImplemented)
                 .map(([themeType]) => themeType)
         });
 
-        if (buildContext.recordIsImplementedByThemeType.account) {
+        if (buildContext.implementedThemeTypes.account.isImplemented) {
             metaInfKeycloakThemes.themes.push({
-                name: accountV1ThemeName,
+                name: "account-v1",
                 types: ["account"]
             });
         }
@@ -296,4 +351,23 @@ export async function generateResourcesForMainTheme(params: {
             getNewMetaInfKeycloakTheme: () => metaInfKeycloakThemes
         });
     }
+
+    return {
+        writeMessagePropertiesFilesForThemeVariant: ({
+            getMessageDirPath,
+            themeName
+        }) => {
+            objectEntries(writeMessagePropertiesFilesByThemeType).forEach(
+                ([themeType, writeMessagePropertiesFiles]) => {
+                    if (writeMessagePropertiesFiles === undefined) {
+                        return;
+                    }
+                    writeMessagePropertiesFiles({
+                        messageDirPath: getMessageDirPath({ themeType }),
+                        themeName
+                    });
+                }
+            );
+        }
+    };
 }

src/bin/keycloakify/generateResources/generateResourcesForThemeVariant.ts

@@ -1,27 +1,27 @@
 import { join as pathJoin, extname as pathExtname, sep as pathSep } from "path";
 import { transformCodebase } from "../../tools/transformCodebase";
-import type { BuildContext } from "../../shared/buildContext";
 import { writeMetaInfKeycloakThemes } from "../../shared/metaInfKeycloakThemes";
 import { assert } from "tsafe/assert";
-
-export type BuildContextLike = {
-    keycloakifyBuildDirPath: string;
-};
-
-assert<BuildContext extends BuildContextLike ? true : false>();
+import type { ThemeType } from "../../shared/constants";
 
 export function generateResourcesForThemeVariant(params: {
     resourcesDirPath: string;
     themeName: string;
     themeVariantName: string;
+    writeMessagePropertiesFiles: (params: {
+        getMessageDirPath: (params: { themeType: ThemeType }) => string;
+        themeName: string;
+    }) => void;
 }) {
-    const { resourcesDirPath, themeName, themeVariantName } = params;
+    const { resourcesDirPath, themeName, themeVariantName, writeMessagePropertiesFiles } =
+        params;
 
     const mainThemeDirPath = pathJoin(resourcesDirPath, "theme", themeName);
+    const themeVariantDirPath = pathJoin(mainThemeDirPath, "..", themeVariantName);
 
     transformCodebase({
         srcDirPath: mainThemeDirPath,
-        destDirPath: pathJoin(mainThemeDirPath, "..", themeVariantName),
+        destDirPath: themeVariantDirPath,
         transformSourceCode: ({ fileRelativePath, sourceCode }) => {
             if (
                 pathExtname(fileRelativePath) === ".ftl" &&
@@ -31,8 +31,8 @@ export function generateResourcesForThemeVariant(params: {
                     Buffer.from(sourceCode)
                         .toString("utf-8")
                         .replace(
-                            `kcContext.themeName = "${themeName}";`,
-                            `kcContext.themeName = "${themeVariantName}";`
+                            `"themeName": "${themeName}"`,
+                            `"themeName": "${themeVariantName}"`
                         ),
                     "utf8"
                 );
@@ -67,4 +67,10 @@ export function generateResourcesForThemeVariant(params: {
             return newMetaInfKeycloakTheme;
         }
     });
+
+    writeMessagePropertiesFiles({
+        getMessageDirPath: ({ themeType }) =>
+            pathJoin(themeVariantDirPath, themeType, "messages"),
+        themeName: themeVariantName
+    });
 }

src/bin/keycloakify/generateResources/readExtraPageNames.ts

@@ -5,8 +5,8 @@ import * as fs from "fs";
 import { join as pathJoin } from "path";
 import {
     type ThemeType,
-    accountThemePageIds,
-    loginThemePageIds
+    ACCOUNT_THEME_PAGE_IDS,
+    LOGIN_THEME_PAGE_IDS
 } from "../../shared/constants";
 
 export function readExtraPagesNames(params: {
@@ -34,19 +34,16 @@ export function readExtraPagesNames(params: {
         const rawSourceFile = fs.readFileSync(candidateFilPath).toString("utf8");
 
         extraPages.push(
-            ...Array.from(
-                rawSourceFile.matchAll(/["']?pageId["']?\s*:\s*["']([^.]+.ftl)["']/g),
-                m => m[1]
-            )
+            ...Array.from(rawSourceFile.matchAll(/["']([^.\s]+.ftl)["']:/g), m => m[1])
         );
     }
 
     return extraPages.reduce(...removeDuplicates<string>()).filter(pageId => {
         switch (themeType) {
             case "account":
-                return !id<readonly string[]>(accountThemePageIds).includes(pageId);
+                return !id<readonly string[]>(ACCOUNT_THEME_PAGE_IDS).includes(pageId);
             case "login":
-                return !id<readonly string[]>(loginThemePageIds).includes(pageId);
+                return !id<readonly string[]>(LOGIN_THEME_PAGE_IDS).includes(pageId);
         }
     });
 }

src/bin/keycloakify/generateResources/readFieldNameUsage.ts

@@ -11,7 +11,15 @@ export function readFieldNameUsage(params: {
 }): string[] {
     const { themeSrcDirPath, themeType } = params;
 
-    const fieldNames = new Set<string>();
+    // NOTE: We pre-populate with the synthetic user attributes defined in useUserProfileForm (can't be parsed automatically)
+    const fieldNames = new Set<string>([
+        "firstName",
+        "lastName",
+        "email",
+        "username",
+        "password",
+        "password-confirm"
+    ]);
 
     for (const srcDirPath of [
         pathJoin(getThisCodebaseRootDirPath(), "src", themeType),

src/bin/keycloakify/keycloakify.ts

@@ -3,7 +3,7 @@ import { join as pathJoin, relative as pathRelative, sep as pathSep } from "path
 import * as child_process from "child_process";
 import * as fs from "fs";
 import { getBuildContext } from "../shared/buildContext";
-import { vitePluginSubScriptEnvNames } from "../shared/constants";
+import { VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES } from "../shared/constants";
 import { buildJars } from "./buildJars";
 import type { CliCommandOptions } from "../main";
 import chalk from "chalk";
@@ -12,6 +12,10 @@ import * as os from "os";
 import { rmSync } from "../tools/fs.rmSync";
 
 export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({ cliCommandOptions });
+
     exit_if_maven_not_installed: {
         let commandOutput: Buffer | undefined = undefined;
 
@@ -25,31 +29,44 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             break exit_if_maven_not_installed;
         }
 
-        const installationCommand = (() => {
-            switch (os.platform()) {
-                case "darwin":
-                    return "brew install mvn";
-                case "win32":
-                    return "choco install mvn";
-                case "linux":
-                default:
-                    return "sudo apt-get install mvn";
-            }
-        })();
+        if (
+            fs
+                .readFileSync(buildContext.packageJsonFilePath)
+                .toString("utf8")
+                .includes(`"mvn"`)
+        ) {
+            console.log(
+                chalk.red(
+                    [
+                        "Please remove the 'mvn' package from your package.json'dependencies list,",
+                        "reinstall your dependencies and try again.",
+                        "We need the Apache Maven CLI, not this: https://www.npmjs.com/package/mvn"
+                    ].join(" ")
+                )
+            );
+        } else {
+            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)`
-        );
+            console.log(
+                `${chalk.red("Apache Maven required.")} Install it with \`${chalk.bold(
+                    installationCommand
+                )}\` (for example)`
+            );
+        }
 
         process.exit(1);
     }
 
-    const { cliCommandOptions } = params;
-
-    const buildContext = getBuildContext({ cliCommandOptions });
-
     console.log(
         [
             chalk.cyan(`keycloakify v${readThisNpmPackageVersion()}`),
@@ -93,10 +110,12 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             cwd: buildContext.projectDirPath,
             env: {
                 ...process.env,
-                [vitePluginSubScriptEnvNames.runPostBuildScript]: JSON.stringify({
-                    resourcesDirPath,
-                    buildContext
-                })
+                [VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES.RUN_POST_BUILD_SCRIPT]: JSON.stringify(
+                    {
+                        resourcesDirPath,
+                        buildContext
+                    }
+                )
             }
         });
     }

src/bin/keycloakify/replacers/replaceImportsInCssCode.ts

@@ -1,5 +1,5 @@
 import type { BuildContext } from "../../shared/buildContext";
-import { basenameOfTheKeycloakifyResourcesDir } from "../../shared/constants";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../../shared/constants";
 import { assert } from "tsafe/assert";
 import { posix } from "path";
 
@@ -18,35 +18,49 @@ export function replaceImportsInCssCode(params: {
 } {
     const { cssCode, cssFileRelativeDirPath, buildContext } = params;
 
-    const fixedCssCode = cssCode.replace(
-        /url\(["']?(\/[^/][^)"']+)["']?\)/g,
-        (match, assetFileAbsoluteUrlPathname) => {
-            if (buildContext.urlPathname !== undefined) {
-                if (!assetFileAbsoluteUrlPathname.startsWith(buildContext.urlPathname)) {
-                    // NOTE: Should never happen
-                    return match;
+    let fixedCssCode = cssCode;
+
+    [
+        /url\("(\/[^/][^"]+)"\)/g,
+        /url\('(\/[^/][^']+)'\)/g,
+        /url\((\/[^/][^)]+)\)/g
+    ].forEach(
+        regex =>
+            (fixedCssCode = fixedCssCode.replace(
+                regex,
+                (match, assetFileAbsoluteUrlPathname) => {
+                    if (buildContext.urlPathname !== undefined) {
+                        if (
+                            !assetFileAbsoluteUrlPathname.startsWith(
+                                buildContext.urlPathname
+                            )
+                        ) {
+                            // NOTE: Should never happen
+                            return match;
+                        }
+                        assetFileAbsoluteUrlPathname =
+                            assetFileAbsoluteUrlPathname.replace(
+                                buildContext.urlPathname,
+                                "/"
+                            );
+                    }
+
+                    inline_style_in_html: {
+                        if (cssFileRelativeDirPath !== undefined) {
+                            break inline_style_in_html;
+                        }
+
+                        return `url("\${xKeycloakify.resourcesPath}/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}${assetFileAbsoluteUrlPathname}")`;
+                    }
+
+                    const assetFileRelativeUrlPathname = posix.relative(
+                        cssFileRelativeDirPath.replace(/\\/g, "/"),
+                        assetFileAbsoluteUrlPathname.replace(/^\//, "")
+                    );
+
+                    return `url("${assetFileRelativeUrlPathname}")`;
                 }
-                assetFileAbsoluteUrlPathname = assetFileAbsoluteUrlPathname.replace(
-                    buildContext.urlPathname,
-                    "/"
-                );
-            }
-
-            inline_style_in_html: {
-                if (cssFileRelativeDirPath !== undefined) {
-                    break inline_style_in_html;
-                }
-
-                return `url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}${assetFileAbsoluteUrlPathname})`;
-            }
-
-            const assetFileRelativeUrlPathname = posix.relative(
-                cssFileRelativeDirPath.replace(/\\/g, "/"),
-                assetFileAbsoluteUrlPathname.replace(/^\//, "")
-            );
-
-            return `url(${assetFileRelativeUrlPathname})`;
-        }
+            ))
     );
 
     return { fixedCssCode };

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

@@ -1,4 +1,4 @@
-import { basenameOfTheKeycloakifyResourcesDir } from "../../../shared/constants";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../../../shared/constants";
 import { assert } from "tsafe/assert";
 import type { BuildContext } from "../../../shared/buildContext";
 import * as nodePath from "path";
@@ -31,13 +31,13 @@ export function replaceImportsInJsCode_vite(params: {
 
     let fixedJsCode = jsCode;
 
-    replace_base_javacript_import: {
+    replace_base_js_import: {
         if (buildContext.urlPathname === undefined) {
-            break replace_base_javacript_import;
+            break replace_base_js_import;
         }
         // Optimization
         if (!jsCode.includes(buildContext.urlPathname)) {
-            break replace_base_javacript_import;
+            break replace_base_js_import;
         }
 
         // Replace `Hv=function(e){return"/abcde12345/"+e}` by `Hv=function(e){return"/"+e}`
@@ -85,13 +85,13 @@ export function replaceImportsInJsCode_vite(params: {
                 fixedJsCode = replaceAll(
                     fixedJsCode,
                     `"${relativePathOfAssetFile}"`,
-                    `(window.kcContext.url.resourcesPath.substring(1) + "/${basenameOfTheKeycloakifyResourcesDir}/${relativePathOfAssetFile}")`
+                    `(window.kcContext["x-keycloakify"].resourcesPath.substring(1) + "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/${relativePathOfAssetFile}")`
                 );
 
                 fixedJsCode = replaceAll(
                     fixedJsCode,
                     `"${buildContext.urlPathname ?? "/"}${relativePathOfAssetFile}"`,
-                    `(window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/${relativePathOfAssetFile}")`
+                    `(window.kcContext["x-keycloakify"].resourcesPath + "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/${relativePathOfAssetFile}")`
                 );
             });
     }

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

@@ -1,4 +1,4 @@
-import { basenameOfTheKeycloakifyResourcesDir } from "../../../shared/constants";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../../../shared/constants";
 import { assert } from "tsafe/assert";
 import type { BuildContext } from "../../../shared/buildContext";
 import * as nodePath from "path";
@@ -83,14 +83,14 @@ export function replaceImportsInJsCode_webpack(params: {
                 var pd = Object.getOwnPropertyDescriptor(${n}, "p");
                 if( pd === undefined || pd.configurable ){
                     Object.defineProperty(${n}, "p", {
-                        get: function() { return window.kcContext.url.resourcesPath; },
+                        get: function() { return window.kcContext["x-keycloakify"].resourcesPath; },
                         set: function() {}
                     });
                 }
                 return "${u}";
             })()] = ${
                 isArrowFunction ? `${e} =>` : `function(${e}) { return `
-            } "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}${language}/"`
+            } "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/${staticDir}${language}/"`
                 .replace(/\s+/g, " ")
                 .trim();
         }
@@ -104,7 +104,7 @@ export function replaceImportsInJsCode_webpack(params: {
                 `[a-zA-Z]+\\.[a-zA-Z]+\\+"${staticDir.replace(/\//g, "\\/")}`,
                 "g"
             ),
-            `window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/${staticDir}`
+            `window.kcContext["x-keycloakify"].resourcesPath + "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/${staticDir}`
         );
 
     return { fixedJsCode };

src/bin/main.ts

@@ -3,11 +3,14 @@
 import { termost } from "termost";
 import { readThisNpmPackageVersion } from "./tools/readThisNpmPackageVersion";
 import * as child_process from "child_process";
+import { assertNoPnpmDlx } from "./tools/assertNoPnpmDlx";
 
 export type CliCommandOptions = {
     projectDirPath: string | undefined;
 };
 
+assertNoPnpmDlx();
+
 const program = termost<CliCommandOptions>(
     {
         name: "keycloakify",
@@ -75,7 +78,7 @@ program
 
 program
     .command<{
-        port: number;
+        port: number | undefined;
         keycloakVersion: string | undefined;
         realmJsonFilePath: string | undefined;
     }>({
@@ -93,7 +96,7 @@ program
             return name;
         })(),
         description: ["Keycloak server port.", "Example `--port 8085`"].join(" "),
-        defaultValue: 8080
+        defaultValue: undefined
     })
     .option({
         key: "keycloakVersion",
@@ -176,6 +179,20 @@ program
         }
     });
 
+program
+    .command({
+        name: "initialize-account-theme",
+        description: "Initialize the account theme."
+    })
+    .task({
+        skip,
+        handler: async cliCommandOptions => {
+            const { command } = await import("./initialize-account-theme");
+
+            await command({ cliCommandOptions });
+        }
+    });
+
 program
     .command({
         name: "copy-keycloak-resources-to-public",

src/bin/shared/KeycloakVersionRange.ts

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

src/bin/shared/constants.ts

@@ -1,24 +1,22 @@
-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 = "dist";
-
-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"
+export const WELL_KNOWN_DIRECTORY_BASE_NAME = {
+    KEYCLOAKIFY_DEV_RESOURCES: "keycloakify-dev-resources",
+    RESOURCES_COMMON: "resources-common",
+    DIST: "dist"
 } as const;
 
-export const buildForKeycloakMajorVersionEnvName =
+export const THEME_TYPES = ["login", "account"] as const;
+
+export type ThemeType = (typeof THEME_TYPES)[number];
+
+export const VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES = {
+    RUN_POST_BUILD_SCRIPT: "KEYCLOAKIFY_RUN_POST_BUILD_SCRIPT",
+    RESOLVE_VITE_CONFIG: "KEYCLOAKIFY_RESOLVE_VITE_CONFIG"
+} as const;
+
+export const BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME =
     "KEYCLOAKIFY_BUILD_FOR_KEYCLOAK_MAJOR_VERSION";
 
-export const loginThemePageIds = [
+export const LOGIN_THEME_PAGE_IDS = [
     "login.ftl",
     "login-username.ftl",
     "login-password.ftl",
@@ -52,10 +50,12 @@ export const loginThemePageIds = [
     "login-recovery-authn-code-input.ftl",
     "login-reset-otp.ftl",
     "login-x509-info.ftl",
-    "webauthn-error.ftl"
+    "webauthn-error.ftl",
+    "login-passkeys-conditional-authenticate.ftl",
+    "login-idp-link-confirm-override.ftl"
 ] as const;
 
-export const accountThemePageIds = [
+export const ACCOUNT_THEME_PAGE_IDS = [
     "password.ftl",
     "account.ftl",
     "sessions.ftl",
@@ -65,7 +65,9 @@ export const accountThemePageIds = [
     "federatedIdentity.ftl"
 ] as const;
 
-export type LoginThemePageId = (typeof loginThemePageIds)[number];
-export type AccountThemePageId = (typeof accountThemePageIds)[number];
+export type LoginThemePageId = (typeof LOGIN_THEME_PAGE_IDS)[number];
+export type AccountThemePageId = (typeof ACCOUNT_THEME_PAGE_IDS)[number];
 
-export const containerName = "keycloak-keycloakify";
+export const CONTAINER_NAME = "keycloak-keycloakify";
+
+export const FALLBACK_LANGUAGE_TAG = "en";

src/bin/shared/copyKeycloakResourcesToPublic.ts

@@ -1,47 +1,34 @@
-import {
-    downloadKeycloakStaticResources,
-    type BuildContextLike as BuildContextLike_downloadKeycloakStaticResources
-} from "./downloadKeycloakStaticResources";
-import { join as pathJoin, relative as pathRelative } from "path";
-import {
-    themeTypes,
-    keycloak_resources,
-    lastKeycloakVersionWithAccountV1
-} from "../shared/constants";
+import { join as pathJoin, dirname as pathDirname } from "path";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "../shared/constants";
 import { readThisNpmPackageVersion } from "../tools/readThisNpmPackageVersion";
 import { assert } from "tsafe/assert";
 import * as fs from "fs";
 import { rmSync } from "../tools/fs.rmSync";
 import type { BuildContext } from "./buildContext";
+import { transformCodebase } from "../tools/transformCodebase";
+import { getThisCodebaseRootDirPath } from "../tools/getThisCodebaseRootDirPath";
 
-export type BuildContextLike = BuildContextLike_downloadKeycloakStaticResources & {
-    loginThemeResourcesFromKeycloakVersion: string;
+export type BuildContextLike = {
     publicDirPath: string;
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
 
-export async function copyKeycloakResourcesToPublic(params: {
+export function copyKeycloakResourcesToPublic(params: {
     buildContext: BuildContextLike;
 }) {
     const { buildContext } = params;
 
-    const destDirPath = pathJoin(buildContext.publicDirPath, keycloak_resources);
+    const destDirPath = pathJoin(
+        buildContext.publicDirPath,
+        WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES
+    );
 
     const keycloakifyBuildinfoFilePath = pathJoin(destDirPath, "keycloakify.buildinfo");
 
     const keycloakifyBuildinfoRaw = JSON.stringify(
         {
-            destDirPath,
-            keycloakifyVersion: readThisNpmPackageVersion(),
-            buildContext: {
-                loginThemeResourcesFromKeycloakVersion: readThisNpmPackageVersion(),
-                cacheDirPath: pathRelative(destDirPath, buildContext.cacheDirPath),
-                npmWorkspaceRootDirPath: pathRelative(
-                    destDirPath,
-                    buildContext.npmWorkspaceRootDirPath
-                )
-            }
+            keycloakifyVersion: readThisNpmPackageVersion()
         },
         null,
         2
@@ -65,35 +52,39 @@ export async function copyKeycloakResourcesToPublic(params: {
 
     rmSync(destDirPath, { force: true, recursive: true });
 
+    // NOTE: To remove in a while, remove the legacy keycloak-resources directory
+    rmSync(pathJoin(pathDirname(destDirPath), "keycloak-resources"), {
+        force: true,
+        recursive: true
+    });
+    rmSync(pathJoin(pathDirname(destDirPath), ".keycloakify"), {
+        force: true,
+        recursive: true
+    });
+
     fs.mkdirSync(destDirPath, { recursive: true });
 
     fs.writeFileSync(pathJoin(destDirPath, ".gitignore"), Buffer.from("*", "utf8"));
 
-    for (const themeType of themeTypes) {
-        await downloadKeycloakStaticResources({
-            keycloakVersion: (() => {
-                switch (themeType) {
-                    case "login":
-                        return buildContext.loginThemeResourcesFromKeycloakVersion;
-                    case "account":
-                        return lastKeycloakVersionWithAccountV1;
-                }
-            })(),
-            themeType,
-            themeDirPath: destDirPath,
-            buildContext
-        });
-    }
+    transformCodebase({
+        srcDirPath: pathJoin(
+            getThisCodebaseRootDirPath(),
+            "res",
+            "public",
+            WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES
+        ),
+        destDirPath
+    });
 
     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\n",
-                "This directory will be automatically excluded from the final build."
-            ].join(" ")
+                "This directory is only used in dev mode by Keycloakify",
+                "It won't be included in your final build.",
+                "Do not modify anything in this directory.",
+            ].join("\n")
         )
     );
 

src/bin/shared/downloadKeycloakStaticResources.ts

@@ -1,53 +0,0 @@
-import { transformCodebase } from "../tools/transformCodebase";
-import { join as pathJoin } from "path";
-import {
-    downloadKeycloakDefaultTheme,
-    type BuildContextLike as BuildContextLike_downloadKeycloakDefaultTheme
-} from "./downloadKeycloakDefaultTheme";
-import { resources_common, type ThemeType } from "./constants";
-import type { BuildContext } from "./buildContext";
-import { assert } from "tsafe/assert";
-import { existsAsync } from "../tools/fs.existsAsync";
-
-export type BuildContextLike = BuildContextLike_downloadKeycloakDefaultTheme & {};
-
-assert<BuildContext extends BuildContextLike ? true : false>();
-
-export async function downloadKeycloakStaticResources(params: {
-    themeType: ThemeType;
-    themeDirPath: string;
-    keycloakVersion: string;
-    buildContext: BuildContextLike;
-}) {
-    const { themeType, themeDirPath, keycloakVersion, buildContext } = params;
-
-    const { defaultThemeDirPath } = await downloadKeycloakDefaultTheme({
-        keycloakVersion,
-        buildContext
-    });
-
-    const resourcesDirPath = pathJoin(themeDirPath, themeType, "resources");
-
-    repatriate_base_resources: {
-        const srcDirPath = pathJoin(defaultThemeDirPath, "base", themeType, "resources");
-
-        if (!(await existsAsync(srcDirPath))) {
-            break repatriate_base_resources;
-        }
-
-        transformCodebase({
-            srcDirPath,
-            destDirPath: resourcesDirPath
-        });
-    }
-
-    transformCodebase({
-        srcDirPath: pathJoin(defaultThemeDirPath, "keycloak", themeType, "resources"),
-        destDirPath: resourcesDirPath
-    });
-
-    transformCodebase({
-        srcDirPath: pathJoin(defaultThemeDirPath, "keycloak", "common", "resources"),
-        destDirPath: pathJoin(resourcesDirPath, resources_common)
-    });
-}

src/bin/shared/generateKcGenTs.ts

@@ -1,14 +1,21 @@
-import { assert } from "tsafe/assert";
+import { assert, type Equals } from "tsafe/assert";
+import { id } from "tsafe/id";
 import type { BuildContext } from "./buildContext";
 import * as fs from "fs/promises";
 import { join as pathJoin } from "path";
 import { existsAsync } from "../tools/fs.existsAsync";
+import { z } from "zod";
 
 export type BuildContextLike = {
     projectDirPath: string;
     themeNames: string[];
     environmentVariables: { name: string; default: string }[];
     themeSrcDirPath: string;
+    implementedThemeTypes: Pick<
+        BuildContext["implementedThemeTypes"],
+        "login" | "account"
+    >;
+    packageJsonFilePath: string;
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -18,12 +25,53 @@ export async function generateKcGenTs(params: {
 }): Promise<void> {
     const { buildContext } = params;
 
-    const filePath = pathJoin(buildContext.themeSrcDirPath, "kc.gen.ts");
+    const isReactProject: boolean = await (async () => {
+        const parsedPackageJson = await (async () => {
+            type ParsedPackageJson = {
+                dependencies?: Record<string, string>;
+                devDependencies?: Record<string, string>;
+            };
+
+            const zParsedPackageJson = (() => {
+                type TargetType = ParsedPackageJson;
+
+                const zTargetType = z.object({
+                    dependencies: z.record(z.string()).optional(),
+                    devDependencies: z.record(z.string()).optional()
+                });
+
+                assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+                return id<z.ZodType<TargetType>>(zTargetType);
+            })();
+
+            return zParsedPackageJson.parse(
+                JSON.parse(
+                    (await fs.readFile(buildContext.packageJsonFilePath)).toString("utf8")
+                )
+            );
+        })();
+
+        return (
+            {
+                ...parsedPackageJson.dependencies,
+                ...parsedPackageJson.devDependencies
+            }.react !== undefined
+        );
+    })();
+
+    const filePath = pathJoin(
+        buildContext.themeSrcDirPath,
+        `kc.gen.ts${isReactProject ? "x" : ""}`
+    );
 
     const currentContent = (await existsAsync(filePath))
         ? await fs.readFile(filePath)
         : undefined;
 
+    const hasLoginTheme = buildContext.implementedThemeTypes.login.isImplemented;
+    const hasAccountTheme = buildContext.implementedThemeTypes.account.isImplemented;
+
     const newContent = Buffer.from(
         [
             `/* prettier-ignore-start */`,
@@ -36,6 +84,8 @@ export async function generateKcGenTs(params: {
             ``,
             `// This file is auto-generated by Keycloakify`,
             ``,
+            isReactProject && `import { lazy, Suspense, type ReactNode } from "react";`,
+            ``,
             `export type ThemeName = ${buildContext.themeNames.map(themeName => `"${themeName}"`).join(" | ")};`,
             ``,
             `export const themeNames: ThemeName[] = [${buildContext.themeNames.map(themeName => `"${themeName}"`).join(", ")}];`,
@@ -54,9 +104,52 @@ export async function generateKcGenTs(params: {
                 2
             )};`,
             ``,
+            `export type KcContext =`,
+            hasLoginTheme && `    | import("./login/KcContext").KcContext`,
+            hasAccountTheme && `    | import("./account/KcContext").KcContext`,
+            `    ;`,
+            ``,
+            `declare global {`,
+            `    interface Window {`,
+            `        kcContext?: KcContext;`,
+            `    }`,
+            `}`,
+            ``,
+            ...(!isReactProject
+                ? []
+                : [
+                      hasLoginTheme &&
+                          `export const KcLoginPage = lazy(() => import("./login/KcPage"));`,
+                      hasAccountTheme &&
+                          `export const KcAccountPage = lazy(() => import("./account/KcPage"));`,
+                      ``,
+                      `export function KcPage(`,
+                      `    props: {`,
+                      `        kcContext: KcContext;`,
+                      `        fallback?: ReactNode;`,
+                      `    }`,
+                      `) {`,
+                      `    const { kcContext, fallback } = props;`,
+                      `    return (`,
+                      `        <Suspense fallback={fallback}>`,
+                      `            {(() => {`,
+                      `                switch (kcContext.themeType) {`,
+                      hasLoginTheme &&
+                          `                    case "login": return <KcLoginPage kcContext={kcContext} />;`,
+                      hasAccountTheme &&
+                          `                    case "account": return <KcAccountPage kcContext={kcContext} />;`,
+                      `                }`,
+                      `            })()}`,
+                      `        </Suspense>`,
+                      `    );`,
+                      `}`
+                  ]),
+            ``,
             `/* prettier-ignore-end */`,
             ``
-        ].join("\n"),
+        ]
+            .filter(item => typeof item === "string")
+            .join("\n"),
         "utf8"
     );
 
@@ -65,4 +158,18 @@ export async function generateKcGenTs(params: {
     }
 
     await fs.writeFile(filePath, newContent);
+
+    delete_legacy_file: {
+        if (!isReactProject) {
+            break delete_legacy_file;
+        }
+
+        const legacyFilePath = filePath.replace(/tsx$/, "ts");
+
+        if (!(await existsAsync(legacyFilePath))) {
+            break delete_legacy_file;
+        }
+
+        await fs.unlink(legacyFilePath);
+    }
 }

src/bin/shared/getLatestsSemVersionedTag.ts

@@ -0,0 +1,201 @@
+import { getLatestsSemVersionedTagFactory } from "../tools/octokit-addons/getLatestsSemVersionedTag";
+import { Octokit } from "@octokit/rest";
+import type { ReturnType } from "tsafe";
+import type { Param0 } from "tsafe";
+import { join as pathJoin, dirname as pathDirname } from "path";
+import * as fs from "fs";
+import { z } from "zod";
+import { assert, type Equals } from "tsafe/assert";
+import { id } from "tsafe/id";
+import type { SemVer } from "../tools/SemVer";
+import { same } from "evt/tools/inDepth/same";
+import type { BuildContext } from "./buildContext";
+import fetch from "make-fetch-happen";
+
+type GetLatestsSemVersionedTag = ReturnType<
+    typeof getLatestsSemVersionedTagFactory
+>["getLatestsSemVersionedTag"];
+
+type Params = Param0<GetLatestsSemVersionedTag>;
+type R = ReturnType<GetLatestsSemVersionedTag>;
+
+let getLatestsSemVersionedTag_stateless: GetLatestsSemVersionedTag | undefined =
+    undefined;
+
+const CACHE_VERSION = 1;
+
+type Cache = {
+    version: typeof CACHE_VERSION;
+    entries: {
+        time: number;
+        params: Params;
+        result: R;
+    }[];
+};
+
+export type BuildContextLike = {
+    cacheDirPath: string;
+    fetchOptions: BuildContext["fetchOptions"];
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export async function getLatestsSemVersionedTag({
+    buildContext,
+    ...params
+}: Params & {
+    buildContext: BuildContextLike;
+}): Promise<R> {
+    const cacheFilePath = pathJoin(
+        buildContext.cacheDirPath,
+        "latest-sem-versioned-tags.json"
+    );
+
+    const cacheLookupResult = (() => {
+        const getResult_currentCache = (currentCacheEntries: Cache["entries"]) => ({
+            hasCachedResult: false as const,
+            currentCache: {
+                version: CACHE_VERSION,
+                entries: currentCacheEntries
+            }
+        });
+
+        if (!fs.existsSync(cacheFilePath)) {
+            return getResult_currentCache([]);
+        }
+
+        let cache_json;
+
+        try {
+            cache_json = fs.readFileSync(cacheFilePath).toString("utf8");
+        } catch {
+            return getResult_currentCache([]);
+        }
+
+        let cache_json_parsed: unknown;
+
+        try {
+            cache_json_parsed = JSON.parse(cache_json);
+        } catch {
+            return getResult_currentCache([]);
+        }
+
+        const zSemVer = (() => {
+            type TargetType = SemVer;
+
+            const zTargetType = z.object({
+                major: z.number(),
+                minor: z.number(),
+                patch: z.number(),
+                rc: z.number().optional(),
+                parsedFrom: z.string()
+            });
+
+            assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+        })();
+
+        const zCache = (() => {
+            type TargetType = Cache;
+
+            const zTargetType = z.object({
+                version: z.literal(CACHE_VERSION),
+                entries: z.array(
+                    z.object({
+                        time: z.number(),
+                        params: z.object({
+                            owner: z.string(),
+                            repo: z.string(),
+                            count: z.number(),
+                            doIgnoreReleaseCandidates: z.boolean()
+                        }),
+                        result: z.array(
+                            z.object({
+                                tag: z.string(),
+                                version: zSemVer
+                            })
+                        )
+                    })
+                )
+            });
+
+            assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+        })();
+
+        let cache: Cache;
+
+        try {
+            cache = zCache.parse(cache_json_parsed);
+        } catch {
+            return getResult_currentCache([]);
+        }
+
+        const cacheEntry = cache.entries.find(e => same(e.params, params));
+
+        if (cacheEntry === undefined) {
+            return getResult_currentCache(cache.entries);
+        }
+
+        if (Date.now() - cacheEntry.time > 3_600_000) {
+            return getResult_currentCache(cache.entries.filter(e => e !== cacheEntry));
+        }
+        return {
+            hasCachedResult: true as const,
+            cachedResult: cacheEntry.result
+        };
+    })();
+
+    if (cacheLookupResult.hasCachedResult) {
+        return cacheLookupResult.cachedResult;
+    }
+
+    const { currentCache } = cacheLookupResult;
+
+    getLatestsSemVersionedTag_stateless ??= (() => {
+        const octokit = (() => {
+            const githubToken = process.env.GITHUB_TOKEN;
+
+            const octokit = new Octokit({
+                ...(githubToken === undefined ? {} : { auth: githubToken }),
+                request: {
+                    fetch: (url: string, options?: any) =>
+                        fetch(url, {
+                            ...options,
+                            ...buildContext.fetchOptions
+                        })
+                }
+            });
+
+            return octokit;
+        })();
+
+        const { getLatestsSemVersionedTag } = getLatestsSemVersionedTagFactory({
+            octokit
+        });
+
+        return getLatestsSemVersionedTag;
+    })();
+
+    const result = await getLatestsSemVersionedTag_stateless(params);
+
+    currentCache.entries.push({
+        time: Date.now(),
+        params,
+        result
+    });
+
+    {
+        const dirPath = pathDirname(cacheFilePath);
+
+        if (!fs.existsSync(dirPath)) {
+            fs.mkdirSync(dirPath, { recursive: true });
+        }
+    }
+
+    fs.writeFileSync(cacheFilePath, JSON.stringify(currentCache, null, 2));
+
+    return result;
+}

src/bin/shared/promptKeycloakVersion.ts

@@ -1,92 +1,33 @@
-import { getLatestsSemVersionedTagFactory } from "../tools/octokit-addons/getLatestsSemVersionedTag";
-import { Octokit } from "@octokit/rest";
+import {
+    getLatestsSemVersionedTag,
+    type BuildContextLike as BuildContextLike_getLatestsSemVersionedTag
+} from "./getLatestsSemVersionedTag";
 import cliSelect from "cli-select";
+import { assert } from "tsafe/assert";
 import { SemVer } from "../tools/SemVer";
-import { join as pathJoin, dirname as pathDirname } from "path";
-import * as fs from "fs";
-import type { ReturnType } from "tsafe";
-import { id } from "tsafe/id";
+import type { BuildContext } from "./buildContext";
+
+export type BuildContextLike = BuildContextLike_getLatestsSemVersionedTag & {};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
 
 export async function promptKeycloakVersion(params: {
     startingFromMajor: number | undefined;
     excludeMajorVersions: number[];
-    cacheDirPath: string;
+    doOmitPatch: boolean;
+    buildContext: BuildContextLike;
 }) {
-    const { startingFromMajor, excludeMajorVersions, cacheDirPath } = params;
-
-    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 };
-    })();
+    const { startingFromMajor, excludeMajorVersions, doOmitPatch, buildContext } = params;
 
     const semVersionedTagByMajor = new Map<number, { tag: string; version: SemVer }>();
 
-    const semVersionedTags = await (async () => {
-        const cacheFilePath = pathJoin(cacheDirPath, "keycloak-versions.json");
-
-        type Cache = {
-            time: number;
-            semVersionedTags: ReturnType<typeof getLatestsSemVersionedTag>;
-        };
-
-        use_cache: {
-            if (!fs.existsSync(cacheFilePath)) {
-                break use_cache;
-            }
-
-            const cache: Cache = JSON.parse(
-                fs.readFileSync(cacheFilePath).toString("utf8")
-            );
-
-            if (Date.now() - cache.time > 3_600_000) {
-                fs.unlinkSync(cacheFilePath);
-                break use_cache;
-            }
-
-            return cache.semVersionedTags;
-        }
-
-        const semVersionedTags = await getLatestsSemVersionedTag({
-            count: 50,
-            owner: "keycloak",
-            repo: "keycloak"
-        });
-
-        {
-            const dirPath = pathDirname(cacheFilePath);
-
-            if (!fs.existsSync(dirPath)) {
-                fs.mkdirSync(dirPath, { recursive: true });
-            }
-        }
-
-        fs.writeFileSync(
-            cacheFilePath,
-            JSON.stringify(
-                id<Cache>({
-                    time: Date.now(),
-                    semVersionedTags
-                }),
-                null,
-                2
-            )
-        );
-
-        return semVersionedTags;
-    })();
+    const semVersionedTags = await getLatestsSemVersionedTag({
+        count: 50,
+        owner: "keycloak",
+        repo: "keycloak",
+        doIgnoreReleaseCandidates: true,
+        buildContext
+    });
 
     semVersionedTags.forEach(semVersionedTag => {
         if (
@@ -115,7 +56,8 @@ export async function promptKeycloakVersion(params: {
     });
 
     const lastMajorVersions = Array.from(semVersionedTagByMajor.values()).map(
-        ({ tag }) => tag
+        ({ version }) =>
+            `${version.major}.${version.minor}${doOmitPatch ? "" : `.${version.patch}`}`
     );
 
     const { value } = await cliSelect<string>({

src/bin/start-keycloak/appBuild.ts

@@ -1,17 +1,19 @@
 import * as child_process from "child_process";
 import { Deferred } from "evt/tools/Deferred";
 import { assert } from "tsafe/assert";
-import { is } from "tsafe/is";
 import type { BuildContext } from "../shared/buildContext";
+import chalk from "chalk";
+import { sep as pathSep, join as pathJoin } from "path";
+import { getAbsoluteAndInOsFormatPath } from "../tools/getAbsoluteAndInOsFormatPath";
 import * as fs from "fs";
-import { join as pathJoin } from "path";
+import { dirname as pathDirname, relative as pathRelative } from "path";
 
 export type BuildContextLike = {
     projectDirPath: string;
     keycloakifyBuildDirPath: string;
-    bundler: "vite" | "webpack";
-    npmWorkspaceRootDirPath: string;
+    bundler: BuildContext["bundler"];
     projectBuildDirPath: string;
+    packageJsonFilePath: string;
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -21,95 +23,29 @@ export async function appBuild(params: {
 }): Promise<{ isAppBuildSuccess: boolean }> {
     const { buildContext } = params;
 
-    const { bundler } = buildContext;
+    switch (buildContext.bundler) {
+        case "vite":
+            return appBuild_vite({ buildContext });
+        case "webpack":
+            return appBuild_webpack({ buildContext });
+    }
+}
 
-    const { command, args, cwd } = (() => {
-        switch (bundler) {
-            case "vite":
-                return {
-                    command: "npx",
-                    args: ["vite", "build"],
-                    cwd: buildContext.projectDirPath
-                };
-            case "webpack": {
-                for (const dirPath of [
-                    buildContext.projectDirPath,
-                    buildContext.npmWorkspaceRootDirPath
-                ]) {
-                    try {
-                        const parsedPackageJson = JSON.parse(
-                            fs
-                                .readFileSync(pathJoin(dirPath, "package.json"))
-                                .toString("utf8")
-                        );
+async function appBuild_vite(params: {
+    buildContext: BuildContextLike;
+}): Promise<{ isAppBuildSuccess: boolean }> {
+    const { buildContext } = params;
 
-                        const [scriptName] =
-                            Object.entries(parsedPackageJson.scripts).find(
-                                ([, scriptValue]) => {
-                                    assert(is<string>(scriptValue));
-                                    if (
-                                        scriptValue.includes("webpack") &&
-                                        scriptValue.includes("--mode production")
-                                    ) {
-                                        return true;
-                                    }
+    assert(buildContext.bundler === "vite");
 
-                                    if (
-                                        scriptValue.includes("react-scripts") &&
-                                        scriptValue.includes("build")
-                                    ) {
-                                        return true;
-                                    }
+    const dIsSuccess = new Deferred<boolean>();
 
-                                    if (
-                                        scriptValue.includes("react-app-rewired") &&
-                                        scriptValue.includes("build")
-                                    ) {
-                                        return true;
-                                    }
+    console.log(chalk.blue("$ npx vite build"));
 
-                                    if (
-                                        scriptValue.includes("craco") &&
-                                        scriptValue.includes("build")
-                                    ) {
-                                        return true;
-                                    }
-
-                                    if (
-                                        scriptValue.includes("ng") &&
-                                        scriptValue.includes("build")
-                                    ) {
-                                        return true;
-                                    }
-
-                                    return false;
-                                }
-                            ) ?? [];
-
-                        if (scriptName === undefined) {
-                            continue;
-                        }
-
-                        return {
-                            command: "npm",
-                            args: ["run", scriptName],
-                            cwd: dirPath
-                        };
-                    } catch {
-                        continue;
-                    }
-                }
-
-                throw new Error(
-                    "Keycloakify was unable to determine which script is responsible for building the app."
-                );
-            }
-        }
-    })();
-
-    const dResult = new Deferred<{ isSuccess: boolean }>();
-
-    const child = child_process.spawn(command, args, { cwd, shell: true });
+    const child = child_process.spawn("npx", ["vite", "build"], {
+        cwd: buildContext.projectDirPath,
+        shell: true
+    });
 
     child.stdout.on("data", data => {
         if (data.toString("utf8").includes("gzip:")) {
@@ -121,9 +57,128 @@ export async function appBuild(params: {
 
     child.stderr.on("data", data => process.stderr.write(data));
 
-    child.on("exit", code => dResult.resolve({ isSuccess: code === 0 }));
+    child.on("exit", code => dIsSuccess.resolve(code === 0));
 
-    const { isSuccess } = await dResult.pr;
+    const isSuccess = await dIsSuccess.pr;
 
     return { isAppBuildSuccess: isSuccess };
 }
+
+async function appBuild_webpack(params: {
+    buildContext: BuildContextLike;
+}): Promise<{ isAppBuildSuccess: boolean }> {
+    const { buildContext } = params;
+
+    assert(buildContext.bundler === "webpack");
+
+    const entries = Object.entries(
+        (JSON.parse(fs.readFileSync(buildContext.packageJsonFilePath).toString("utf8"))
+            .scripts ?? {}) as Record<string, string>
+    ).filter(([, scriptCommand]) => scriptCommand.includes("keycloakify build"));
+
+    if (entries.length === 0) {
+        console.log(
+            chalk.red(
+                [
+                    `You should have a script in your package.json at ${pathRelative(process.cwd(), pathDirname(buildContext.packageJsonFilePath))}`,
+                    `that includes the 'keycloakify build' command`
+                ].join(" ")
+            )
+        );
+        process.exit(-1);
+    }
+
+    const entry =
+        entries.length === 1
+            ? entries[0]
+            : entries.find(([scriptName]) => scriptName === "build-keycloak-theme");
+
+    if (entry === undefined) {
+        console.log(
+            chalk.red(
+                "There's multiple candidate script for building your app, name one 'build-keycloak-theme'"
+            )
+        );
+        process.exit(-1);
+    }
+
+    const [scriptName, scriptCommand] = entry;
+
+    const { appBuildSubCommands } = (() => {
+        const appBuildSubCommands: string[] = [];
+
+        for (const subCmd of scriptCommand.split("&&").map(s => s.trim())) {
+            if (subCmd.includes("keycloakify build")) {
+                break;
+            }
+
+            appBuildSubCommands.push(subCmd);
+        }
+
+        return { appBuildSubCommands };
+    })();
+
+    if (appBuildSubCommands.length === 0) {
+        console.log(
+            chalk.red(
+                `Your ${scriptName} script should look like "... && keycloakify build ..."`
+            )
+        );
+        process.exit(-1);
+    }
+
+    let commandCwd = pathDirname(buildContext.packageJsonFilePath);
+
+    for (const subCommand of appBuildSubCommands) {
+        const dIsSuccess = new Deferred<boolean>();
+
+        const [command, ...args] = subCommand.split(" ");
+
+        if (command === "cd") {
+            const [pathIsh] = args;
+
+            commandCwd = getAbsoluteAndInOsFormatPath({
+                pathIsh,
+                cwd: commandCwd
+            });
+
+            continue;
+        }
+
+        console.log(chalk.blue(`$ ${subCommand}`));
+
+        const child = child_process.spawn(command, args, {
+            cwd: commandCwd,
+            env: {
+                ...process.env,
+                PATH: (() => {
+                    const separator = pathSep === "/" ? ":" : ";";
+
+                    return [
+                        pathJoin(
+                            pathDirname(buildContext.packageJsonFilePath),
+                            "node_modules",
+                            ".bin"
+                        ),
+                        ...(process.env.PATH ?? "").split(separator)
+                    ].join(separator);
+                })()
+            },
+            shell: true
+        });
+
+        child.stdout.on("data", data => process.stdout.write(data));
+
+        child.stderr.on("data", data => process.stderr.write(data));
+
+        child.on("exit", code => dIsSuccess.resolve(code === 0));
+
+        const isSuccess = await dIsSuccess.pr;
+
+        if (!isSuccess) {
+            return { isAppBuildSuccess: false };
+        }
+    }
+
+    return { isAppBuildSuccess: true };
+}

src/bin/start-keycloak/keycloakifyBuild.ts

@@ -1,14 +1,13 @@
-import { buildForKeycloakMajorVersionEnvName } from "../shared/constants";
+import { BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME } from "../shared/constants";
 import * as child_process from "child_process";
 import { Deferred } from "evt/tools/Deferred";
 import { assert } from "tsafe/assert";
 import type { BuildContext } from "../shared/buildContext";
+import chalk from "chalk";
 
 export type BuildContextLike = {
     projectDirPath: string;
     keycloakifyBuildDirPath: string;
-    bundler: "vite" | "webpack";
-    npmWorkspaceRootDirPath: string;
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
@@ -21,11 +20,13 @@ export async function keycloakifyBuild(params: {
 
     const dResult = new Deferred<{ isSuccess: boolean }>();
 
+    console.log(chalk.blue("$ npx keycloakify build"));
+
     const child = child_process.spawn("npx", ["keycloakify", "build"], {
         cwd: buildContext.projectDirPath,
         env: {
             ...process.env,
-            [buildForKeycloakMajorVersionEnvName]: `${buildForKeycloakMajorVersionNumber}`
+            [BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME]: `${buildForKeycloakMajorVersionNumber}`
         },
         shell: true
     });

src/bin/start-keycloak/myrealm-realm-18.json

@@ -73,7 +73,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -611,8 +611,8 @@
             "name": "",
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2099,7 +2099,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-19.json

@@ -73,7 +73,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -618,8 +618,8 @@
             "name": "",
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2130,7 +2130,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-20.json

@@ -73,7 +73,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -628,8 +628,8 @@
             "name": "",
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2140,7 +2140,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-21.json

@@ -73,7 +73,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -632,8 +632,8 @@
             "name": "",
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
-            "adminUrl": "",
-            "baseUrl": "",
+            "adminUrl": "https://my-theme.keycloakify.dev",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2144,7 +2144,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-23.json

@@ -1,6 +1,8 @@
 {
     "id": "34c5f904-d66e-4d8f-8876-8f00d9fa9d6c",
     "realm": "myrealm",
+    "displayName": "",
+    "displayNameHtml": "",
     "notBefore": 0,
     "defaultSignatureAlgorithm": "RS256",
     "revokeRefreshToken": false,
@@ -53,7 +55,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["view-profile", "manage-account"]
+                        "account": ["delete-account", "view-profile", "manage-account"]
                     }
                 },
                 "clientRole": false,
@@ -642,7 +644,7 @@
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
             "adminUrl": "https://my-theme.keycloakify.dev",
-            "baseUrl": "",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -1356,11 +1358,11 @@
                 "config": {
                     "allowed-protocol-mapper-types": [
                         "oidc-sha256-pairwise-sub-mapper",
-                        "oidc-address-mapper",
                         "saml-user-property-mapper",
+                        "oidc-address-mapper",
                         "oidc-full-name-mapper",
-                        "oidc-usermodel-attribute-mapper",
                         "saml-role-list-mapper",
+                        "oidc-usermodel-attribute-mapper",
                         "saml-user-attribute-mapper",
                         "oidc-usermodel-property-mapper"
                     ]
@@ -1431,13 +1433,13 @@
                 "subComponents": {},
                 "config": {
                     "allowed-protocol-mapper-types": [
-                        "saml-user-property-mapper",
+                        "saml-role-list-mapper",
                         "oidc-full-name-mapper",
+                        "oidc-address-mapper",
                         "saml-user-attribute-mapper",
                         "oidc-sha256-pairwise-sub-mapper",
-                        "saml-role-list-mapper",
-                        "oidc-address-mapper",
                         "oidc-usermodel-attribute-mapper",
+                        "saml-user-property-mapper",
                         "oidc-usermodel-property-mapper"
                     ]
                 }
@@ -2086,7 +2088,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}
@@ -2127,17 +2129,20 @@
     "dockerAuthenticationFlow": "docker auth",
     "attributes": {
         "cibaBackchannelTokenDeliveryMode": "poll",
-        "cibaExpiresIn": "120",
         "cibaAuthRequestedUserHint": "login_hint",
-        "oauth2DeviceCodeLifespan": "600",
         "clientOfflineSessionMaxLifespan": "0",
         "oauth2DevicePollingInterval": "5",
         "clientSessionIdleTimeout": "0",
-        "parRequestUriLifespan": "60",
-        "clientSessionMaxLifespan": "0",
+        "userProfileEnabled": "true",
         "clientOfflineSessionIdleTimeout": "0",
         "cibaInterval": "5",
-        "realmReusableOtpCode": "false"
+        "realmReusableOtpCode": "false",
+        "cibaExpiresIn": "120",
+        "oauth2DeviceCodeLifespan": "600",
+        "parRequestUriLifespan": "60",
+        "clientSessionMaxLifespan": "0",
+        "frontendUrl": "",
+        "acr.loa.map": "{}"
     },
     "keycloakVersion": "23.0.7",
     "userManagedAccessAllowed": false,

src/bin/start-keycloak/myrealm-realm-24.json

@@ -63,7 +63,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["manage-account", "view-profile"]
+                        "account": ["delete-account", "manage-account", "view-profile"]
                     }
                 },
                 "clientRole": false,
@@ -449,7 +449,7 @@
                 "gender": ["prefer_not_to_say"],
                 "bio": ["Hello I'm Test User and I do not exist."],
                 "phone_number": ["1111111111"],
-                "locale": ["fr"],
+                "locale": ["en"],
                 "favorite_media": ["movies", "series"]
             },
             "createdTimestamp": 1716183898408,
@@ -653,7 +653,7 @@
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
             "adminUrl": "https://my-theme.keycloakify.dev",
-            "baseUrl": "",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2235,7 +2235,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/myrealm-realm-25.json

@@ -63,7 +63,7 @@
                 "composites": {
                     "realm": ["offline_access", "uma_authorization"],
                     "client": {
-                        "account": ["manage-account", "view-profile"]
+                        "account": ["delete-account", "manage-account", "view-profile"]
                     }
                 },
                 "clientRole": false,
@@ -543,7 +543,7 @@
                 "favourite_pet": ["cat"],
                 "bio": ["Hello I'm Test User and I do not exist."],
                 "phone_number": ["1111111111"],
-                "locale": ["fr"],
+                "locale": ["en"],
                 "favorite_media": ["movies", "series"]
             },
             "createdTimestamp": 1716183898408,
@@ -767,7 +767,7 @@
             "description": "",
             "rootUrl": "https://my-theme.keycloakify.dev",
             "adminUrl": "https://my-theme.keycloakify.dev",
-            "baseUrl": "",
+            "baseUrl": "https://my-theme.keycloakify.dev",
             "surrogateAuthRequired": false,
             "enabled": true,
             "alwaysDisplayInConsole": false,
@@ -2315,7 +2315,7 @@
             "alias": "delete_account",
             "name": "Delete Account",
             "providerId": "delete_account",
-            "enabled": false,
+            "enabled": true,
             "defaultAction": false,
             "priority": 60,
             "config": {}

src/bin/start-keycloak/start-keycloak.ts

@@ -2,15 +2,16 @@ import { getBuildContext } from "../shared/buildContext";
 import { exclude } from "tsafe/exclude";
 import type { CliCommandOptions as CliCommandOptions_common } from "../main";
 import { promptKeycloakVersion } from "../shared/promptKeycloakVersion";
-import { accountV1ThemeName, containerName } from "../shared/constants";
+import { CONTAINER_NAME } from "../shared/constants";
 import { SemVer } from "../tools/SemVer";
-import { assert } from "tsafe/assert";
+import { assert, type Equals } from "tsafe/assert";
 import * as fs from "fs";
 import {
     join as pathJoin,
     relative as pathRelative,
     sep as pathSep,
-    basename as pathBasename
+    basename as pathBasename,
+    dirname as pathDirname
 } from "path";
 import * as child_process from "child_process";
 import chalk from "chalk";
@@ -26,24 +27,27 @@ import { keycloakifyBuild } from "./keycloakifyBuild";
 import { isInside } from "../tools/isInside";
 import { existsAsync } from "../tools/fs.existsAsync";
 import { rm } from "../tools/fs.rm";
+import { downloadAndExtractArchive } from "../tools/downloadAndExtractArchive";
 
 export type CliCommandOptions = CliCommandOptions_common & {
-    port: number;
+    port: number | undefined;
     keycloakVersion: string | undefined;
     realmJsonFilePath: string | undefined;
 };
 
 export async function command(params: { cliCommandOptions: CliCommandOptions }) {
     exit_if_docker_not_installed: {
-        let commandOutput: Buffer | undefined = undefined;
+        let commandOutput: string | undefined = undefined;
 
         try {
-            commandOutput = child_process.execSync("docker --version", {
-                stdio: ["ignore", "pipe", "ignore"]
-            });
+            commandOutput = child_process
+                .execSync("docker --version", {
+                    stdio: ["ignore", "pipe", "ignore"]
+                })
+                ?.toString("utf8");
         } catch {}
 
-        if (commandOutput?.toString("utf8").includes("Docker")) {
+        if (commandOutput?.includes("Docker") || commandOutput?.includes("podman")) {
             break exit_if_docker_not_installed;
         }
 
@@ -88,30 +92,66 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     const buildContext = getBuildContext({ cliCommandOptions });
 
-    const { keycloakVersion } = await (async () => {
+    const { dockerImageTag } = await (async () => {
         if (cliCommandOptions.keycloakVersion !== undefined) {
+            return { dockerImageTag: cliCommandOptions.keycloakVersion };
+        }
+
+        if (buildContext.startKeycloakOptions.dockerImage !== undefined) {
             return {
-                keycloakVersion: cliCommandOptions.keycloakVersion,
-                keycloakMajorNumber: SemVer.parse(cliCommandOptions.keycloakVersion).major
+                dockerImageTag: buildContext.startKeycloakOptions.dockerImage.tag
             };
         }
 
         console.log(
-            chalk.cyan("On which version of Keycloak do you want to test your theme?")
+            [
+                chalk.cyan(
+                    "On which version of Keycloak do you want to test your theme?"
+                ),
+                chalk.gray(
+                    "You can also explicitly provide the version with `npx keycloakify start-keycloak --keycloak-version 25.0.2` (or any other version)"
+                )
+            ].join("\n")
         );
 
         const { keycloakVersion } = await promptKeycloakVersion({
             startingFromMajor: 18,
             excludeMajorVersions: [22],
-            cacheDirPath: buildContext.cacheDirPath
+            doOmitPatch: true,
+            buildContext
         });
 
         console.log(`→ ${keycloakVersion}`);
 
-        return { keycloakVersion };
+        return { dockerImageTag: keycloakVersion };
     })();
 
-    const keycloakMajorVersionNumber = SemVer.parse(keycloakVersion).major;
+    const keycloakMajorVersionNumber = (() => {
+        if (buildContext.startKeycloakOptions.dockerImage === undefined) {
+            return SemVer.parse(dockerImageTag).major;
+        }
+
+        const { tag } = buildContext.startKeycloakOptions.dockerImage;
+
+        const [wrap] = [18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
+            .map(majorVersionNumber => ({
+                majorVersionNumber,
+                index: tag.indexOf(`${majorVersionNumber}`)
+            }))
+            .filter(({ index }) => index !== -1)
+            .sort((a, b) => a.index - b.index);
+
+        if (wrap === undefined) {
+            console.warn(
+                chalk.yellow(
+                    `Could not determine the major Keycloak version number from the docker image tag ${tag}. Assuming 25`
+                )
+            );
+            return 25;
+        }
+
+        return wrap.majorVersionNumber;
+    })();
 
     {
         const { isAppBuildSuccess } = await appBuild({
@@ -121,7 +161,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         if (!isAppBuildSuccess) {
             console.log(
                 chalk.red(
-                    `App build failed, exiting. Try running 'npm run build' and see what's wrong.`
+                    `App build failed, exiting. Try building your app (e.g 'npm run build') and see what's wrong.`
                 )
             );
             process.exit(1);
@@ -150,41 +190,68 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     assert(jarFilePath !== undefined);
 
-    console.log(`Using ${chalk.bold(pathBasename(jarFilePath))}`);
+    const extensionJarFilePaths = await Promise.all(
+        buildContext.startKeycloakOptions.extensionJars.map(async extensionJar => {
+            switch (extensionJar.type) {
+                case "path": {
+                    assert(
+                        await existsAsync(extensionJar.path),
+                        `${extensionJar.path} does not exist`
+                    );
+                    return extensionJar.path;
+                }
+                case "url": {
+                    const { archiveFilePath } = await downloadAndExtractArchive({
+                        cacheDirPath: buildContext.cacheDirPath,
+                        fetchOptions: buildContext.fetchOptions,
+                        url: extensionJar.url,
+                        uniqueIdOfOnArchiveFile: "no extraction",
+                        onArchiveFile: async () => {}
+                    });
+                    return archiveFilePath;
+                }
+            }
+            assert<Equals<typeof extensionJar, never>>(false);
+        })
+    );
+
+    const getRealmJsonFilePath_defaultForKeycloakMajor = (
+        keycloakMajorVersionNumber: number
+    ) =>
+        pathJoin(
+            getThisCodebaseRootDirPath(),
+            "src",
+            "bin",
+            "start-keycloak",
+            `myrealm-realm-${keycloakMajorVersionNumber}.json`
+        );
 
     const realmJsonFilePath = await (async () => {
         if (cliCommandOptions.realmJsonFilePath !== undefined) {
             if (cliCommandOptions.realmJsonFilePath === "none") {
                 return undefined;
             }
-
-            console.log(
-                chalk.green(
-                    `Using realm json file: ${cliCommandOptions.realmJsonFilePath}`
-                )
-            );
-
             return getAbsoluteAndInOsFormatPath({
                 pathIsh: cliCommandOptions.realmJsonFilePath,
                 cwd: process.cwd()
             });
         }
 
+        if (buildContext.startKeycloakOptions.realmJsonFilePath !== undefined) {
+            assert(
+                await existsAsync(buildContext.startKeycloakOptions.realmJsonFilePath),
+                `${pathRelative(process.cwd(), buildContext.startKeycloakOptions.realmJsonFilePath)} does not exist`
+            );
+            return buildContext.startKeycloakOptions.realmJsonFilePath;
+        }
+
         const internalFilePath = await (async () => {
-            const dirPath = pathJoin(
-                getThisCodebaseRootDirPath(),
-                "src",
-                "bin",
-                "start-keycloak"
+            const defaultFilePath = getRealmJsonFilePath_defaultForKeycloakMajor(
+                keycloakMajorVersionNumber
             );
 
-            const filePath = pathJoin(
-                dirPath,
-                `myrealm-realm-${keycloakMajorVersionNumber}.json`
-            );
-
-            if (fs.existsSync(filePath)) {
-                return filePath;
+            if (fs.existsSync(defaultFilePath)) {
+                return defaultFilePath;
             }
 
             console.log(
@@ -195,6 +262,8 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
             console.log(chalk.cyan("Select what configuration to use:"));
 
+            const dirPath = pathDirname(defaultFilePath);
+
             const { value } = await cliSelect<string>({
                 values: [
                     ...fs
@@ -236,6 +305,40 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         return filePath;
     })();
 
+    add_test_user_if_missing: {
+        if (realmJsonFilePath === undefined) {
+            break add_test_user_if_missing;
+        }
+
+        const realm: Record<string, unknown> = JSON.parse(
+            fs.readFileSync(realmJsonFilePath).toString("utf8")
+        );
+
+        if (realm.users !== undefined) {
+            break add_test_user_if_missing;
+        }
+
+        const realmJsonFilePath_internal = (() => {
+            const filePath = getRealmJsonFilePath_defaultForKeycloakMajor(
+                keycloakMajorVersionNumber
+            );
+
+            if (!fs.existsSync(filePath)) {
+                return getRealmJsonFilePath_defaultForKeycloakMajor(25);
+            }
+
+            return filePath;
+        })();
+
+        const users = JSON.parse(
+            fs.readFileSync(realmJsonFilePath_internal).toString("utf8")
+        ).users;
+
+        realm.users = users;
+
+        fs.writeFileSync(realmJsonFilePath, JSON.stringify(realm, null, 2), "utf8");
+    }
+
     async function extractThemeResourcesFromJar() {
         await extractArchive({
             archiveFilePath: jarFilePath,
@@ -269,82 +372,106 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
     fs.copyFileSync(jarFilePath, jarFilePath_cacheDir);
 
     try {
-        child_process.execSync(`docker rm --force ${containerName}`, {
+        child_process.execSync(`docker rm --force ${CONTAINER_NAME}`, {
             stdio: "ignore"
         });
     } catch {}
 
-    const spawnArgs = [
-        "docker",
-        [
-            "run",
-            ...["-p", `${cliCommandOptions.port}:8080`],
-            ...["--name", containerName],
-            ...["-e", "KEYCLOAK_ADMIN=admin"],
-            ...["-e", "KEYCLOAK_ADMIN_PASSWORD=admin"],
-            ...(realmJsonFilePath === undefined
-                ? []
-                : [
-                      "-v",
-                      `${realmJsonFilePath}:/opt/keycloak/data/import/myrealm-realm.json`
-                  ]),
-            ...[
-                "-v",
-                `${jarFilePath_cacheDir}:/opt/keycloak/providers/keycloak-theme.jar`
-            ],
-            ...(keycloakMajorVersionNumber <= 20
-                ? ["-e", "JAVA_OPTS=-Dkeycloak.profile=preview"]
-                : []),
-            ...[
-                ...buildContext.themeNames,
-                ...(fs.existsSync(
-                    pathJoin(
-                        buildContext.keycloakifyBuildDirPath,
-                        "theme",
-                        accountV1ThemeName
-                    )
-                )
-                    ? [accountV1ThemeName]
-                    : [])
-            ]
-                .map(themeName => ({
-                    localDirPath: pathJoin(
-                        buildContext.keycloakifyBuildDirPath,
-                        "theme",
-                        themeName
-                    ),
-                    containerDirPath: `/opt/keycloak/themes/${themeName}`
-                }))
-                .map(({ localDirPath, containerDirPath }) => [
-                    "-v",
-                    `${localDirPath}:${containerDirPath}:rw`
-                ])
-                .flat(),
-            ...buildContext.environmentVariables
-                .map(({ name }) => ({ name, envValue: process.env[name] }))
-                .map(({ name, envValue }) =>
-                    envValue === undefined ? undefined : { name, envValue }
-                )
-                .filter(exclude(undefined))
-                .map(({ name, envValue }) => [
-                    "--env",
-                    `${name}='${envValue.replace(/'/g, "'\\''")}'`
-                ])
-                .flat(),
-            `quay.io/keycloak/keycloak:${keycloakVersion}`,
-            "start-dev",
-            ...(21 <= keycloakMajorVersionNumber && keycloakMajorVersionNumber < 24
-                ? ["--features=declarative-user-profile"]
-                : []),
-            ...(realmJsonFilePath === undefined ? [] : ["--import-realm"])
-        ],
-        {
-            cwd: buildContext.keycloakifyBuildDirPath,
-            shell: true
-        }
-    ] as const;
+    const DEFAULT_PORT = 8080;
+    const port =
+        cliCommandOptions.port ?? buildContext.startKeycloakOptions.port ?? DEFAULT_PORT;
 
-    const child = child_process.spawn(...spawnArgs);
+    const SPACE_PLACEHOLDER = "SPACE_PLACEHOLDER_xKLmdPd";
+
+    const dockerRunArgs: string[] = [
+        `-p${SPACE_PLACEHOLDER}${port}:8080`,
+        `--name${SPACE_PLACEHOLDER}${CONTAINER_NAME}`,
+        `-e${SPACE_PLACEHOLDER}KEYCLOAK_ADMIN=admin`,
+        `-e${SPACE_PLACEHOLDER}KEYCLOAK_ADMIN_PASSWORD=admin`,
+        ...(buildContext.startKeycloakOptions.dockerExtraArgs.length === 0
+            ? []
+            : [
+                  buildContext.startKeycloakOptions.dockerExtraArgs.join(
+                      SPACE_PLACEHOLDER
+                  )
+              ]),
+        ...(realmJsonFilePath === undefined
+            ? []
+            : [
+                  `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), realmJsonFilePath)}":/opt/keycloak/data/import/myrealm-realm.json`
+              ]),
+        `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), jarFilePath_cacheDir)}":/opt/keycloak/providers/keycloak-theme.jar`,
+        ...extensionJarFilePaths.map(
+            jarFilePath =>
+                `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), jarFilePath)}":/opt/keycloak/providers/${pathBasename(jarFilePath)}`
+        ),
+        ...(keycloakMajorVersionNumber <= 20
+            ? [`-e${SPACE_PLACEHOLDER}JAVA_OPTS=-Dkeycloak.profile=preview`]
+            : []),
+        ...[
+            ...buildContext.themeNames,
+            ...(fs.existsSync(
+                pathJoin(buildContext.keycloakifyBuildDirPath, "theme", "account-v1")
+            )
+                ? ["account-v1"]
+                : [])
+        ]
+            .map(themeName => ({
+                localDirPath: pathJoin(
+                    buildContext.keycloakifyBuildDirPath,
+                    "theme",
+                    themeName
+                ),
+                containerDirPath: `/opt/keycloak/themes/${themeName}`
+            }))
+            .map(
+                ({ localDirPath, containerDirPath }) =>
+                    `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), localDirPath)}":${containerDirPath}:rw`
+            ),
+        ...buildContext.environmentVariables
+            .map(({ name }) => ({ name, envValue: process.env[name] }))
+            .map(({ name, envValue }) =>
+                envValue === undefined ? undefined : { name, envValue }
+            )
+            .filter(exclude(undefined))
+            .map(
+                ({ name, envValue }) =>
+                    `--env${SPACE_PLACEHOLDER}${name}='${envValue.replace(/'/g, "'\\''")}'`
+            ),
+        `${buildContext.startKeycloakOptions.dockerImage?.reference ?? "quay.io/keycloak/keycloak"}:${dockerImageTag}`,
+        "start-dev",
+        ...(21 <= keycloakMajorVersionNumber && keycloakMajorVersionNumber < 24
+            ? ["--features=declarative-user-profile"]
+            : []),
+        ...(realmJsonFilePath === undefined ? [] : ["--import-realm"]),
+        ...(buildContext.startKeycloakOptions.keycloakExtraArgs.length === 0
+            ? []
+            : [
+                  buildContext.startKeycloakOptions.keycloakExtraArgs.join(
+                      SPACE_PLACEHOLDER
+                  )
+              ])
+    ];
+
+    console.log(
+        chalk.blue(
+            [
+                `$ docker run \\`,
+                ...dockerRunArgs
+                    .map(arg => arg.replace(new RegExp(SPACE_PLACEHOLDER, "g"), " "))
+                    .map(
+                        (line, i, arr) =>
+                            `    ${line}${arr.length - 1 === i ? "" : " \\"}`
+                    )
+            ].join("\n")
+        )
+    );
+
+    const child = child_process.spawn(
+        "docker",
+        ["run", ...dockerRunArgs.map(line => line.split(SPACE_PLACEHOLDER)).flat()],
+        { shell: true }
+    );
 
     child.stdout.on("data", data => process.stdout.write(data));
 
@@ -355,6 +482,18 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
     const srcDirPath = pathJoin(buildContext.projectDirPath, "src");
 
     {
+        const kcHttpRelativePath = (() => {
+            const match = buildContext.startKeycloakOptions.dockerExtraArgs
+                .join(" ")
+                .match(/KC_HTTP_RELATIVE_PATH=([^ ]+)/);
+
+            if (match === null) {
+                return undefined;
+            }
+
+            return match[1];
+        })();
+
         const handler = async (data: Buffer) => {
             if (!data.toString("utf8").includes("Listening on: http://0.0.0.0:8080")) {
                 return;
@@ -372,7 +511,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                     )} are mounted in the Keycloak container.`,
                     "",
                     `Keycloak Admin console: ${chalk.cyan.bold(
-                        `http://localhost:${cliCommandOptions.port}`
+                        `http://localhost:${port}${kcHttpRelativePath ?? ""}`
                     )}`,
                     `- user:     ${chalk.cyan.bold("admin")}`,
                     `- password: ${chalk.cyan.bold("admin")}`,
@@ -380,7 +519,21 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                     "",
                     `${chalk.green("Your theme is accessible at:")}`,
                     `${chalk.green("➜")} ${chalk.cyan.bold(
-                        `https://my-theme.keycloakify.dev${cliCommandOptions.port === 8080 ? "" : `?port=${cliCommandOptions.port}`}`
+                        (() => {
+                            const url = new URL("https://my-theme.keycloakify.dev");
+
+                            if (port !== DEFAULT_PORT) {
+                                url.searchParams.set("port", `${port}`);
+                            }
+                            if (kcHttpRelativePath !== undefined) {
+                                url.searchParams.set(
+                                    "kcHttpRelativePath",
+                                    kcHttpRelativePath
+                                );
+                            }
+
+                            return url.href;
+                        })()
                     )}`,
                     "",
                     "You can login with the following credentials:",

src/bin/tools/assertNoPnpmDlx.ts

@@ -0,0 +1,17 @@
+import { sep as pathSep } from "path";
+import chalk from "chalk";
+
+export function assertNoPnpmDlx() {
+    if (__dirname.includes(`${pathSep}pnpm${pathSep}dlx${pathSep}`)) {
+        console.log(
+            [
+                chalk.red(
+                    "Please don't use `pnpm dlx keycloakify` (download and execute)"
+                ),
+                "\nUse `npx keycloakify` or `pnpm exec keycloakify` instead since you want to use the keycloakify",
+                "version that is installed in your project and not download and run the latest NPM version of keycloakify."
+            ].join(" ")
+        );
+        process.exit(1);
+    }
+}

src/bin/tools/downloadAndExtractArchive.ts

@@ -1,16 +1,15 @@
-import fetch from "make-fetch-happen";
+import fetch, { type FetchOptions } from "make-fetch-happen";
 import { mkdir, unlink, writeFile, readdir, readFile } from "fs/promises";
 import { dirname as pathDirname, join as pathJoin } from "path";
 import { assert } from "tsafe/assert";
-import { extractArchive } from "../extractArchive";
-import { existsAsync } from "../fs.existsAsync";
-import { getProxyFetchOptions } from "./fetchProxyOptions";
+import { extractArchive } from "./extractArchive";
+import { existsAsync } from "./fs.existsAsync";
 import * as crypto from "crypto";
-import { rm } from "../fs.rm";
+import { rm } from "./fs.rm";
 
 export async function downloadAndExtractArchive(params: {
     url: string;
-    uniqueIdOfOnOnArchiveFile: string;
+    uniqueIdOfOnArchiveFile: string;
     onArchiveFile: (params: {
         fileRelativePath: string;
         readFile: () => Promise<Buffer>;
@@ -20,21 +19,18 @@ export async function downloadAndExtractArchive(params: {
         }) => Promise<void>;
     }) => Promise<void>;
     cacheDirPath: string;
-    npmWorkspaceRootDirPath: string;
-}): Promise<{ extractedDirPath: string }> {
-    const {
-        url,
-        uniqueIdOfOnOnArchiveFile,
-        onArchiveFile,
-        cacheDirPath,
-        npmWorkspaceRootDirPath
-    } = params;
+    fetchOptions: FetchOptions | undefined;
+}): Promise<{ extractedDirPath: string; archiveFilePath: string }> {
+    const { url, uniqueIdOfOnArchiveFile, onArchiveFile, cacheDirPath, fetchOptions } =
+        params;
 
     const archiveFileBasename = url.split("?")[0].split("/").reverse()[0];
 
     const archiveFilePath = pathJoin(cacheDirPath, archiveFileBasename);
 
     download: {
+        await mkdir(pathDirname(archiveFilePath), { recursive: true });
+
         if (await existsAsync(archiveFilePath)) {
             const isDownloaded = await SuccessTracker.getIsDownloaded({
                 cacheDirPath,
@@ -53,12 +49,7 @@ export async function downloadAndExtractArchive(params: {
             });
         }
 
-        await mkdir(pathDirname(archiveFilePath), { recursive: true });
-
-        const response = await fetch(
-            url,
-            await getProxyFetchOptions({ npmWorkspaceRootDirPath })
-        );
+        const response = await fetch(url, fetchOptions);
 
         response.body?.setMaxListeners(Number.MAX_VALUE);
         assert(typeof response.body !== "undefined" && response.body != null);
@@ -71,7 +62,7 @@ export async function downloadAndExtractArchive(params: {
         });
     }
 
-    const extractDirBasename = `${archiveFileBasename.split(".")[0]}_${uniqueIdOfOnOnArchiveFile}_${crypto
+    const extractDirBasename = `${archiveFileBasename.replace(/\.([^.]+)$/, (...[, ext]) => `_${ext}`)}_${uniqueIdOfOnArchiveFile}_${crypto
         .createHash("sha256")
         .update(onArchiveFile.toString())
         .digest("hex")
@@ -93,7 +84,9 @@ export async function downloadAndExtractArchive(params: {
                 })()
             )
             .map(async extractDirBasename => {
-                await rm(pathJoin(cacheDirPath, extractDirBasename), { recursive: true });
+                await rm(pathJoin(cacheDirPath, extractDirBasename), {
+                    recursive: true
+                });
                 await SuccessTracker.removeFromExtracted({
                     cacheDirPath,
                     extractDirBasename
@@ -142,7 +135,7 @@ export async function downloadAndExtractArchive(params: {
         });
     }
 
-    return { extractedDirPath };
+    return { extractedDirPath, archiveFilePath };
 }
 
 type SuccessTracker = {

src/bin/tools/downloadAndExtractArchive/fetchProxyOptions.ts

@@ -1,104 +0,0 @@
-import { exec as execCallback } from "child_process";
-import { readFile } from "fs/promises";
-import { type FetchOptions } from "make-fetch-happen";
-import { promisify } from "util";
-
-function ensureArray<T>(arg0: T | T[]) {
-    return Array.isArray(arg0) ? arg0 : typeof arg0 === "undefined" ? [] : [arg0];
-}
-
-function ensureSingleOrNone<T>(arg0: T | T[]) {
-    if (!Array.isArray(arg0)) return arg0;
-    if (arg0.length === 0) return undefined;
-    if (arg0.length === 1) return arg0[0];
-    throw new Error(
-        "Illegal configuration, expected a single value but found multiple: " +
-            arg0.map(String).join(", ")
-    );
-}
-
-type NPMConfig = Record<string, string | string[]>;
-
-/**
- * Get npm configuration as map
- */
-async function getNmpConfig(params: { npmWorkspaceRootDirPath: string }) {
-    const { npmWorkspaceRootDirPath } = params;
-
-    const exec = promisify(execCallback);
-
-    const stdout = await exec("npm config get", {
-        encoding: "utf8",
-        cwd: npmWorkspaceRootDirPath
-    }).then(({ stdout }) => stdout);
-
-    const npmConfigReducer = (cfg: NPMConfig, [key, value]: [string, string]) =>
-        key in cfg
-            ? { ...cfg, [key]: [...ensureArray(cfg[key]), value] }
-            : { ...cfg, [key]: value };
-
-    return stdout
-        .split("\n")
-        .filter(line => !line.startsWith(";"))
-        .map(line => line.trim())
-        .map(line => line.split("=", 2) as [string, string])
-        .reduce(npmConfigReducer, {} as NPMConfig);
-}
-
-export type ProxyFetchOptions = Pick<
-    FetchOptions,
-    "proxy" | "noProxy" | "strictSSL" | "cert" | "ca"
->;
-
-export async function getProxyFetchOptions(params: {
-    npmWorkspaceRootDirPath: string;
-}): Promise<ProxyFetchOptions> {
-    const { npmWorkspaceRootDirPath } = params;
-
-    const cfg = await getNmpConfig({ npmWorkspaceRootDirPath });
-
-    const proxy = ensureSingleOrNone(cfg["https-proxy"] ?? cfg["proxy"]);
-    const noProxy = cfg["noproxy"] ?? cfg["no-proxy"];
-
-    function maybeBoolean(arg0: string | undefined) {
-        return typeof arg0 === "undefined" ? undefined : Boolean(arg0);
-    }
-
-    const strictSSL = maybeBoolean(ensureSingleOrNone(cfg["strict-ssl"]));
-    const cert = cfg["cert"];
-    const ca = ensureArray(cfg["ca"] ?? cfg["ca[]"]);
-    const cafile = ensureSingleOrNone(cfg["cafile"]);
-
-    if (typeof cafile !== "undefined" && cafile !== "null") {
-        ca.push(
-            ...(await (async () => {
-                function chunks<T>(arr: T[], size: number = 2) {
-                    return arr
-                        .map((_, i) => i % size == 0 && arr.slice(i, i + size))
-                        .filter(Boolean) as T[][];
-                }
-
-                const cafileContent = await readFile(cafile, "utf-8");
-
-                const newLinePlaceholder = "NEW_LINE_PLACEHOLDER_xIsPsK23svt";
-
-                return chunks(cafileContent.split(/(-----END CERTIFICATE-----)/), 2).map(
-                    ca =>
-                        ca
-                            .join("")
-                            .replace(/\r?\n/g, newLinePlaceholder)
-                            .replace(new RegExp(`^${newLinePlaceholder}`), "")
-                            .replace(new RegExp(newLinePlaceholder, "g"), "\\n")
-                );
-            })())
-        );
-    }
-
-    return {
-        proxy,
-        noProxy,
-        strictSSL,
-        cert,
-        ca: ca.length === 0 ? undefined : ca
-    };
-}

src/bin/tools/downloadAndExtractArchive/index.ts

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

src/bin/tools/fetchProxyOptions.ts

@@ -0,0 +1,117 @@
+import { type FetchOptions } from "make-fetch-happen";
+import * as child_process from "child_process";
+import * as fs from "fs";
+import { exclude } from "tsafe/exclude";
+
+export type ProxyFetchOptions = Pick<
+    FetchOptions,
+    "proxy" | "noProxy" | "strictSSL" | "cert" | "ca"
+>;
+
+export function getProxyFetchOptions(params: {
+    npmConfigGetCwd: string;
+}): ProxyFetchOptions {
+    const { npmConfigGetCwd } = params;
+
+    const cfg = (() => {
+        const output = child_process
+            .execSync("npm config get", {
+                cwd: npmConfigGetCwd
+            })
+            .toString("utf8");
+
+        return output
+            .split("\n")
+            .filter(line => !line.startsWith(";"))
+            .map(line => line.trim())
+            .map(line => {
+                const [key, value] = line.split("=");
+                if (key === undefined) {
+                    return undefined;
+                }
+                if (value === undefined) {
+                    return undefined;
+                }
+                return [key.trim(), value.trim()] as const;
+            })
+            .filter(exclude(undefined))
+            .filter(([key]) => key !== "")
+            .map(([key, value]) => {
+                if (value.startsWith('"') && value.endsWith('"')) {
+                    return [key, value.slice(1, -1)] as const;
+                }
+
+                if (value === "true" || value === "false") {
+                    return [key, value] as const;
+                }
+
+                return undefined;
+            })
+            .filter(exclude(undefined))
+            .reduce(
+                (cfg: Record<string, string | string[]>, [key, value]) =>
+                    key in cfg
+                        ? { ...cfg, [key]: [...ensureArray(cfg[key]), value] }
+                        : { ...cfg, [key]: value },
+                {}
+            );
+    })();
+
+    const proxy = ensureSingleOrNone(cfg["https-proxy"] ?? cfg["proxy"]);
+
+    const noProxy = cfg["noproxy"] ?? cfg["no-proxy"];
+
+    const strictSSL = ensureSingleOrNone(cfg["strict-ssl"]) === "true";
+
+    const cert = cfg["cert"];
+
+    const ca = ensureArray(cfg["ca"] ?? cfg["ca[]"]);
+
+    const cafile = ensureSingleOrNone(cfg["cafile"]);
+
+    if (cafile !== undefined) {
+        ca.push(
+            ...(() => {
+                const cafileContent = fs.readFileSync(cafile).toString("utf8");
+
+                const newLinePlaceholder = "NEW_LINE_PLACEHOLDER_xIsPsK23svt";
+
+                const chunks = <T>(arr: T[], size: number = 2) =>
+                    arr
+                        .map((_, i) => i % size == 0 && arr.slice(i, i + size))
+                        .filter(Boolean) as T[][];
+
+                return chunks(cafileContent.split(/(-----END CERTIFICATE-----)/), 2).map(
+                    ca =>
+                        ca
+                            .join("")
+                            .replace(/\r?\n/g, newLinePlaceholder)
+                            .replace(new RegExp(`^${newLinePlaceholder}`), "")
+                            .replace(new RegExp(newLinePlaceholder, "g"), "\\n")
+                );
+            })()
+        );
+    }
+
+    return {
+        proxy,
+        noProxy,
+        strictSSL,
+        cert,
+        ca: ca.length === 0 ? undefined : ca
+    };
+}
+
+function ensureArray<T>(arg0: T | T[]) {
+    return Array.isArray(arg0) ? arg0 : arg0 === undefined ? [] : [arg0];
+}
+
+function ensureSingleOrNone<T>(arg0: T | T[]) {
+    if (!Array.isArray(arg0)) return arg0;
+    if (arg0.length === 0) return undefined;
+    if (arg0.length === 1) return arg0[0];
+    throw new Error(
+        "Illegal configuration, expected a single value but found multiple: " +
+            arg0.map(String).join(", ")
+    );
+}

src/bin/tools/getNpmWorkspaceRootDirPath.ts

@@ -1,73 +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";
-import * as fs from "fs";
-
-export function getNpmWorkspaceRootDirPath(params: {
-    projectDirPath: string;
-    dependencyExpected: string;
-}) {
-    const { projectDirPath, dependencyExpected } = params;
-
-    const npmWorkspaceRootDirPath = (function callee(depth: number): string {
-        const cwd = pathResolve(
-            pathJoin(...[projectDirPath, ...Array(depth).fill("..")])
-        );
-
-        assert(cwd !== pathSep, "NPM workspace not found");
-
-        try {
-            child_process.execSync("npm config get", {
-                cwd,
-                stdio: "ignore"
-            });
-        } catch (error) {
-            if (String(error).includes("ENOWORKSPACES")) {
-                return callee(depth + 1);
-            }
-
-            throw error;
-        }
-
-        const packageJsonFilePath = pathJoin(cwd, "package.json");
-
-        if (!fs.existsSync(packageJsonFilePath)) {
-            return callee(depth + 1);
-        }
-
-        assert(fs.existsSync(packageJsonFilePath));
-
-        const parsedPackageJson = JSON.parse(
-            fs.readFileSync(packageJsonFilePath).toString("utf8")
-        );
-
-        let isExpectedDependencyFound = false;
-
-        for (const dependenciesOrDevDependencies of [
-            "dependencies",
-            "devDependencies"
-        ] as const) {
-            const dependencies = parsedPackageJson[dependenciesOrDevDependencies];
-
-            if (dependencies === undefined) {
-                continue;
-            }
-
-            assert(dependencies instanceof Object);
-
-            if (dependencies[dependencyExpected] === undefined) {
-                continue;
-            }
-
-            isExpectedDependencyFound = true;
-        }
-
-        if (!isExpectedDependencyFound && parsedPackageJson.name !== dependencyExpected) {
-            return callee(depth + 1);
-        }
-
-        return cwd;
-    })(0);
-
-    return { npmWorkspaceRootDirPath };
-}