Remove ignored file that where removed

Removed Error Message from Terms and Conditions Page

.all-contributorsrc

@@ -259,6 +259,56 @@
         "code",
         "doc"
       ]
+    },
+    {
+      "login": "uchar",
+      "name": "Omid",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5172296?v=4",
+      "profile": "https://www.linkedin.com/in/oes-rioniz/",
+      "contributions": [
+        "test",
+        "code"
+      ]
+    },
+    {
+      "login": "kathari00",
+      "name": "Katharina Eiserfey",
+      "avatar_url": "https://avatars.githubusercontent.com/u/42547712?v=4",
+      "profile": "https://github.com/kathari00",
+      "contributions": [
+        "code",
+        "test",
+        "doc"
+      ]
+    },
+    {
+      "login": "luca-peruzzo",
+      "name": "Luca Peruzzo",
+      "avatar_url": "https://avatars.githubusercontent.com/u/69015314?v=4",
+      "profile": "https://github.com/luca-peruzzo",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "nima70",
+      "name": "Nima Shokouhfar",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5094767?v=4",
+      "profile": "https://github.com/nima70",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "marvinruder",
+      "name": "Marvin A. Ruder",
+      "avatar_url": "https://avatars.githubusercontent.com/u/18495294?v=4",
+      "profile": "https://mruder.dev",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/ci.yaml

@@ -37,7 +37,7 @@ jobs:
 
   storybook:
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
     needs: test
     steps:
     - uses: actions/checkout@v4
@@ -112,7 +112,7 @@ jobs:
         registry-url: https://registry.npmjs.org/
     - uses: bahmutov/npm-install@v1
     - run: npm run build
-    - run: npx -y -p denoify@1.6.12 enable_short_npm_import_path
+    - run: npx -y -p denoify@1.6.13 enable_short_npm_import_path
       env:
         DRY_RUN: "0"
     - uses: garronej/ts-ci@v2.1.2

CONTRIBUTING.md

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

README.md

@@ -41,23 +41,50 @@
     <img width="400" src="https://github.com/user-attachments/assets/6bf3bef9-00b0-4460-97b9-0d2da8500798">
 </p>
 
-Keycloakify is fully compatible with Keycloak from version 11 to 25...[and beyond](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791)
+Keycloakify is fully compatible with Keycloak from version 11 to 26...[and beyond](https://github.com/keycloakify/keycloakify/discussions/346#discussioncomment-5889791)
+
+> 📣 **Keycloakify 26 Released**  
+> Themes built with Keycloakify versions **prior** to Keycloak 26 are **incompatible** with Keycloak 26.  
+> To ensure compatibility, simply upgrade to the latest Keycloakify version for your major release (v10 or v11) and rebuild your theme.  
+> No breaking changes have been introduced, but the target version ranges have been updated. For more details, see [this guide](https://docs.keycloakify.dev/targeting-specific-keycloak-versions).
 
 ## Sponsors
 
-Friends for the project, we trust and recommend their services.
+Project backers, we trust and recommend their services.
 
 <br/>
 
 <div align="center">
 
-![Logo Dark](https://github.com/user-attachments/assets/088f6631-b7ef-42ad-812b-df4870dc16ae#gh-dark-mode-only)
+![Logo Dark](https://github.com/user-attachments/assets/d8f6b6f5-3de4-4adc-ba15-cb4074e8309b#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)
+![Logo Light](https://github.com/user-attachments/assets/20736d6f-f22d-4a9d-9dfe-93be209a8191#gh-light-mode-only)
+
+</div>
+
+<br/>
+
+<p align="center">
+    <i><a href="https://phasetwo.io/?utm_source=keycloakify"><strong>Keycloak as a Service</strong></a> - Keycloak community contributors of popular <a href="https://github.com/p2-inc#our-extensions-?utm_source=keycloakify">extensions</a> providing free and dedicated <a href="https://phasetwo.io/hosting/?utm_source=keycloakify">Keycloak hosting</a> and enterprise <a href="https://phasetwo.io/support/?utm_source=keycloakify">Keycloak support</a> to businesses of all sizes.</i>
+</p>
+
+<br/>
+<br/>
+<br/>
+
+<div align="center">
+
+![Logo Dark](https://github.com/user-attachments/assets/dd3925fb-a58a-4e91-b360-69c2fa1f1087#gh-dark-mode-only)
+
+</div>
+
+<div align="center">
+
+![Logo Light](https://github.com/user-attachments/assets/6c00c201-eed7-485a-a887-70891559d69b#gh-light-mode-only)
 
 </div>
 
@@ -82,7 +109,7 @@ Friends for the project, we trust and recommend their services.
 </div>
 
 <p align="center">
-<a href="https://cloud-iam.com/?mtm_campaign=keycloakify-deal&mtm_source=keycloakify-github"><strong>Managed Keycloak Provider</strong> - With Cloud-IAM powering your Keycloak clusters, you can sleep easy knowing you've got the software and the experts you need for operational excellence.  </a>
+<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. Cloud IAM is a french company. </a>
 <br/>
 Use code <code>keycloakify5</code> at checkout for a 5% discount.
 </p>
@@ -132,6 +159,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/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>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/oes-rioniz/"><img src="https://avatars.githubusercontent.com/u/5172296?v=4?s=100" width="100px;" alt="Omid"/><br /><sub><b>Omid</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=uchar" title="Tests">⚠️</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=uchar" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/kathari00"><img src="https://avatars.githubusercontent.com/u/42547712?v=4?s=100" width="100px;" alt="Katharina Eiserfey"/><br /><sub><b>Katharina Eiserfey</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=kathari00" title="Code">💻</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=kathari00" title="Tests">⚠️</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=kathari00" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/luca-peruzzo"><img src="https://avatars.githubusercontent.com/u/69015314?v=4?s=100" width="100px;" alt="Luca Peruzzo"/><br /><sub><b>Luca Peruzzo</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=luca-peruzzo" title="Code">💻</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=luca-peruzzo" title="Tests">⚠️</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/nima70"><img src="https://avatars.githubusercontent.com/u/5094767?v=4?s=100" width="100px;" alt="Nima Shokouhfar"/><br /><sub><b>Nima Shokouhfar</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=nima70" title="Code">💻</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=nima70" title="Tests">⚠️</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://mruder.dev"><img src="https://avatars.githubusercontent.com/u/18495294?v=4?s=100" width="100px;" alt="Marvin A. Ruder"/><br /><sub><b>Marvin A. Ruder</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/issues?q=author%3Amarvinruder" title="Bug reports">🐛</a></td>
+    </tr>
   </tbody>
 </table>
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "11.0.0",
+    "version": "11.3.19",
     "description": "Framework to create custom Keycloak UIs",
     "repository": {
         "type": "git",
@@ -38,12 +38,14 @@
         "dist/",
         "!dist/tsconfig.tsbuildinfo",
         "!dist/bin/",
+        "dist/bin/**/*.d.ts",
         "dist/bin/main.js",
         "dist/bin/*.index.js",
         "dist/bin/*.node",
         "dist/bin/shared/constants.js",
-        "dist/bin/shared/*.d.ts",
-        "dist/bin/shared/*.js.map",
+        "dist/bin/shared/constants.js.map",
+        "dist/bin/shared/customHandler.js",
+        "dist/bin/shared/customHandler.js.map",
         "!dist/vite-plugin/",
         "dist/vite-plugin/index.js",
         "dist/vite-plugin/index.d.ts",
@@ -62,12 +64,13 @@
     ],
     "homepage": "https://www.keycloakify.dev",
     "dependencies": {
-        "tsafe": "^1.6.6"
+        "tsafe": "^1.7.5"
     },
     "devDependencies": {
         "@babel/core": "^7.24.5",
         "@babel/generator": "^7.24.5",
         "@babel/parser": "^7.24.5",
+        "@babel/preset-env": "7.24.8",
         "@babel/types": "^7.24.5",
         "@emotion/react": "^11.11.4",
         "@octokit/rest": "^20.1.1",
@@ -75,20 +78,27 @@
         "@storybook/builder-webpack5": "^6.5.13",
         "@storybook/manager-webpack5": "^6.5.13",
         "@storybook/react": "^6.5.13",
-        "eslint-plugin-storybook": "^0.6.7",
         "@types/babel__generator": "^7.6.4",
+        "@types/dompurify": "^2.0.0",
         "@types/make-fetch-happen": "^10.0.1",
         "@types/minimist": "^1.2.2",
         "@types/node": "^18.15.3",
+        "@types/properties-parser": "^0.3.3",
         "@types/react": "^18.0.35",
         "@types/react-dom": "^18.0.11",
         "@types/yauzl": "^2.10.3",
         "@vercel/ncc": "^0.38.1",
+        "babel-loader": "9.1.3",
         "chalk": "^4.1.2",
         "cheerio": "1.0.0-rc.12",
         "chokidar-cli": "^3.0.0",
         "cli-select": "^1.1.2",
+        "dompurify": "^3.1.6",
+        "eslint-plugin-storybook": "^0.6.7",
+        "evt": "^2.5.7",
+        "html-entities": "^2.5.2",
         "husky": "^4.3.8",
+        "isomorphic-dompurify": "^2.15.0",
         "lint-staged": "^11.0.0",
         "magic-string": "^0.30.7",
         "make-fetch-happen": "^11.0.3",
@@ -103,20 +113,13 @@
         "termost": "^v0.12.1",
         "tsc-alias": "^1.8.10",
         "tss-react": "^4.9.10",
+        "tsx": "^4.15.5",
         "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",
-        "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"
+        "yauzl": "^2.10.0",
+        "zod": "^3.17.10"
     }
 }

scripts/build/main.ts

@@ -40,7 +40,9 @@ import { vendorFrontendDependencies } from "./vendorFrontendDependencies";
         );
     }
 
-    run(`npx ncc build ${join("dist", "bin", "main.js")} -o ${join("dist", "ncc_out")}`);
+    run(
+        `npx ncc build ${join("dist", "bin", "main.js")} --external prettier -o ${join("dist", "ncc_out")}`
+    );
 
     transformCodebase({
         srcDirPath: join("dist", "ncc_out"),
@@ -113,7 +115,7 @@ import { vendorFrontendDependencies } from "./vendorFrontendDependencies";
     }
 
     run(
-        `npx ncc build ${join("dist", "vite-plugin", "index.js")} -o ${join(
+        `npx ncc build ${join("dist", "vite-plugin", "index.js")} --external prettier -o ${join(
             "dist",
             "ncc_out"
         )}`

scripts/build/vendorFrontendDependencies.ts

@@ -1,10 +1,5 @@
 import * as fs from "fs";
-import {
-    join as pathJoin,
-    relative as pathRelative,
-    basename as pathBasename,
-    dirname as pathDirname
-} from "path";
+import { join as pathJoin, 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";
@@ -41,13 +36,12 @@ export function vendorFrontendDependencies(params: { distDirPath: string }) {
                 webpackConfigJsFilePath,
                 Buffer.from(
                     [
-                        `const path = require('path');`,
                         ``,
                         `module.exports = {`,
                         `   mode: 'production',`,
-                        `  entry: '${filePath}',`,
+                        `  entry: Buffer.from("${Buffer.from(filePath, "utf8").toString("base64")}", "base64").toString("utf8"),`,
                         `  output: {`,
-                        `    path: '${webpackOutputDirPath}',`,
+                        `    path: Buffer.from("${Buffer.from(webpackOutputDirPath, "utf8").toString("base64")}", "base64").toString("utf8"),`,
                         `    filename: '${pathBasename(webpackOutputFilePath)}',`,
                         `    libraryTarget: 'module',`,
                         `  },`,
@@ -73,9 +67,7 @@ export function vendorFrontendDependencies(params: { distDirPath: string }) {
                 )
             );
 
-            run(
-                `npx webpack --config ${pathRelative(process.cwd(), webpackConfigJsFilePath)}`
-            );
+            run(`npx webpack --config ${webpackConfigJsFilePath}`);
 
             fs.readdirSync(webpackOutputDirPath)
                 .filter(fileBasename => !fileBasename.endsWith(".txt"))

scripts/generate-i18n-messages.ts

@@ -13,7 +13,7 @@ import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRoot
 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");
+import propertiesParser from "properties-parser";
 
 if (require.main === module) {
     generateI18nMessages();
@@ -37,7 +37,7 @@ async function generateI18nMessages() {
 
     const record: { [themeType: string]: { [language: string]: Dictionary } } = {};
 
-    for (const themeType of THEME_TYPES) {
+    for (const themeType of THEME_TYPES.filter(themeType => themeType !== "admin")) {
         const { extractedDirPath } = await downloadKeycloakDefaultTheme({
             keycloakVersionId: (() => {
                 switch (themeType) {

scripts/link-in-app.ts

@@ -55,7 +55,6 @@ const commonThirdPartyDeps = [
         Buffer.from(modifiedPackageJsonContent, "utf8")
     );
 }
-
 const yarnGlobalDirPath = pathJoin(rootDirPath, ".yarn_home");
 
 fs.rmSync(yarnGlobalDirPath, { recursive: true, force: true });
@@ -64,6 +63,21 @@ fs.mkdirSync(yarnGlobalDirPath);
 const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
     const { targetModuleName, cwd } = params;
 
+    if (targetModuleName === undefined) {
+        const packageJsonFilePath = pathJoin(cwd, "package.json");
+
+        const packageJson = JSON.parse(
+            fs.readFileSync(packageJsonFilePath).toString("utf8")
+        );
+
+        delete packageJson["packageManager"];
+
+        fs.writeFileSync(
+            packageJsonFilePath,
+            Buffer.from(JSON.stringify(packageJson, null, 2))
+        );
+    }
+
     const cmd = [
         "yarn",
         "link",
@@ -77,7 +91,10 @@ const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
         env: {
             ...process.env,
             ...(os.platform() === "win32"
-                ? { USERPROFILE: yarnGlobalDirPath }
+                ? {
+                      USERPROFILE: yarnGlobalDirPath,
+                      LOCALAPPDATA: yarnGlobalDirPath
+                  }
                 : { HOME: yarnGlobalDirPath })
         }
     });
@@ -108,7 +125,54 @@ if (testAppPaths.length === 0) {
     process.exit(-1);
 }
 
-testAppPaths.forEach(testAppPath => execSync("yarn install", { cwd: testAppPath }));
+testAppPaths.forEach(testAppPath => {
+    const packageJsonFilePath = pathJoin(testAppPath, "package.json");
+
+    const packageJsonContent = fs.readFileSync(packageJsonFilePath);
+
+    const parsedPackageJson = JSON.parse(packageJsonContent.toString("utf8")) as {
+        scripts?: Record<string, string>;
+    };
+
+    let hasPostInstallOrPrepareScript = false;
+
+    if (parsedPackageJson.scripts !== undefined) {
+        for (const scriptName of ["postinstall", "prepare"]) {
+            if (parsedPackageJson.scripts[scriptName] === undefined) {
+                continue;
+            }
+
+            hasPostInstallOrPrepareScript = true;
+
+            delete parsedPackageJson.scripts[scriptName];
+        }
+    }
+
+    if (hasPostInstallOrPrepareScript) {
+        fs.writeFileSync(
+            packageJsonFilePath,
+            Buffer.from(JSON.stringify(parsedPackageJson, null, 2), "utf8")
+        );
+    }
+
+    const restorePackageJson = () => {
+        if (!hasPostInstallOrPrepareScript) {
+            return;
+        }
+
+        fs.writeFileSync(packageJsonFilePath, packageJsonContent);
+    };
+
+    try {
+        execSync("yarn install", { cwd: testAppPath });
+    } catch (error) {
+        restorePackageJson();
+
+        throw error;
+    }
+
+    restorePackageJson();
+});
 
 console.log("=== Linking common dependencies ===");
 
@@ -155,4 +219,20 @@ testAppPaths.forEach(testAppPath =>
     })
 );
 
+testAppPaths.forEach(testAppPath => {
+    const { scripts = {} } = JSON.parse(
+        fs.readFileSync(pathJoin(testAppPath, "package.json")).toString("utf8")
+    ) as {
+        scripts?: Record<string, string>;
+    };
+
+    for (const scriptName of ["postinstall", "prepare"]) {
+        if (scripts[scriptName] === undefined) {
+            continue;
+        }
+
+        execSync(`yarn run ${scriptName}`, { cwd: testAppPath });
+    }
+});
+
 export {};

scripts/link-in-starter.ts

@@ -1,49 +1,88 @@
 import * as fs from "fs";
-import { join } from "path";
-import { startRebuildOnSrcChange } from "./shared/startRebuildOnSrcChange";
-import { crawl } from "../src/bin/tools/crawl";
+import { join as pathJoin, sep as pathSep } from "path";
 import { run } from "./shared/run";
+import cliSelect from "cli-select";
+import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRootDirPath";
+import chalk from "chalk";
+import { removeNodeModules } from "./tools/removeNodeModules";
+import { startRebuildOnSrcChange } from "./shared/startRebuildOnSrcChange";
 
-{
-    const dirPath = "node_modules";
+(async () => {
+    const parentDirPath = pathJoin(getThisCodebaseRootDirPath(), "..");
 
-    try {
-        fs.rmSync(dirPath, { recursive: true, force: true });
-    } catch {
-        // NOTE: This is a workaround for windows
-        // we can't remove locked executables.
+    const { starterName } = await (async () => {
+        const starterNames = fs
+            .readdirSync(parentDirPath)
+            .filter(
+                basename =>
+                    basename.includes("starter") &&
+                    basename.includes("keycloakify") &&
+                    fs.statSync(pathJoin(parentDirPath, basename)).isDirectory()
+            );
 
-        crawl({
-            dirPath,
-            returnedPathsType: "absolute"
-        }).forEach(filePath => {
-            try {
-                fs.rmSync(filePath, { force: true });
-            } catch (error) {
-                if (filePath.endsWith(".exe")) {
-                    return;
-                }
-                throw error;
+        if (starterNames.length === 0) {
+            console.log(
+                chalk.red(
+                    `No starter found. Keycloakify Angular starter found in ${parentDirPath}`
+                )
+            );
+            process.exit(-1);
+        }
+
+        const starterName = await (async () => {
+            if (starterNames.length === 1) {
+                return starterNames[0];
             }
-        });
-    }
-}
 
-fs.rmSync("dist", { recursive: true, force: true });
-fs.rmSync(".yarn_home", { recursive: true, force: true });
+            console.log(chalk.cyan(`\nSelect a starter to link in:`));
 
-run("yarn install");
-run("yarn build");
+            const { value } = await cliSelect<string>({
+                values: starterNames.map(starterName => `..${pathSep}${starterName}`)
+            }).catch(() => {
+                process.exit(-1);
+            });
 
-const starterName = "keycloakify-starter";
+            return value.split(pathSep)[1];
+        })();
 
-fs.rmSync(join("..", starterName, "node_modules"), {
-    recursive: true,
-    force: true
-});
+        return { starterName };
+    })();
 
-run("yarn install", { cwd: join("..", starterName) });
+    const startTime = Date.now();
 
-run(`npx tsx ${join("scripts", "link-in-app.ts")} ${starterName}`);
+    console.log(chalk.cyan(`\n\nLinking in ..${pathSep}${starterName}...`));
 
-startRebuildOnSrcChange();
+    removeNodeModules({
+        nodeModulesDirPath: pathJoin(getThisCodebaseRootDirPath(), "node_modules")
+    });
+
+    fs.rmSync(pathJoin(getThisCodebaseRootDirPath(), "dist"), {
+        recursive: true,
+        force: true
+    });
+    fs.rmSync(pathJoin(getThisCodebaseRootDirPath(), ".yarn_home"), {
+        recursive: true,
+        force: true
+    });
+
+    run("yarn install");
+    run("yarn build");
+
+    const starterDirPath = pathJoin(parentDirPath, starterName);
+
+    removeNodeModules({
+        nodeModulesDirPath: pathJoin(starterDirPath, "node_modules")
+    });
+
+    run("yarn install", { cwd: starterDirPath });
+
+    run(`npx tsx ${pathJoin("scripts", "link-in-app.ts")} ${starterName}`);
+
+    const durationSeconds = Math.round((Date.now() - startTime) / 1000);
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    startRebuildOnSrcChange();
+
+    console.log(chalk.green(`\n\nLinked in ${starterName} in ${durationSeconds}s`));
+})();

scripts/tools/removeNodeModules.ts

@@ -0,0 +1,27 @@
+import * as fs from "fs";
+import { crawl } from "../../src/bin/tools/crawl";
+
+export function removeNodeModules(params: { nodeModulesDirPath: string }) {
+    const { nodeModulesDirPath } = params;
+
+    try {
+        fs.rmSync(nodeModulesDirPath, { recursive: true, force: true });
+    } catch {
+        // NOTE: This is a workaround for windows
+        // we can't remove locked executables.
+
+        crawl({
+            dirPath: nodeModulesDirPath,
+            returnedPathsType: "absolute"
+        }).forEach(filePath => {
+            try {
+                fs.rmSync(filePath, { force: true });
+            } catch (error) {
+                if (filePath.endsWith(".exe")) {
+                    return;
+                }
+                throw error;
+            }
+        });
+    }
+}

src/account/TemplateProps.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { ClassKey } from "keycloakify/account/lib/kcClsx";
 
 export type TemplateProps<KcContext, I18n> = {
     kcContext: KcContext;
@@ -10,17 +11,4 @@ export type TemplateProps<KcContext, I18n> = {
     active: string;
 };
 
-export type ClassKey =
-    | "kcHtmlClass"
-    | "kcBodyClass"
-    | "kcButtonClass"
-    | "kcButtonPrimaryClass"
-    | "kcButtonLargeClass"
-    | "kcButtonDefaultClass"
-    | "kcContentWrapperClass"
-    | "kcFormClass"
-    | "kcFormGroupClass"
-    | "kcInputWrapperClass"
-    | "kcLabelClass"
-    | "kcInputClass"
-    | "kcInputErrorMessageClass";
+export type { ClassKey };

src/account/lib/kcClsx.ts

@@ -1,5 +1,19 @@
 import { createGetKcClsx } from "keycloakify/lib/getKcClsx";
-import type { ClassKey } from "keycloakify/account/TemplateProps";
+
+export type ClassKey =
+    | "kcHtmlClass"
+    | "kcBodyClass"
+    | "kcButtonClass"
+    | "kcButtonPrimaryClass"
+    | "kcButtonLargeClass"
+    | "kcButtonDefaultClass"
+    | "kcContentWrapperClass"
+    | "kcFormClass"
+    | "kcFormGroupClass"
+    | "kcInputWrapperClass"
+    | "kcLabelClass"
+    | "kcInputClass"
+    | "kcInputErrorMessageClass";
 
 export const { getKcClsx } = createGetKcClsx<ClassKey>({
     defaultClasses: {
@@ -20,6 +34,4 @@ export const { getKcClsx } = createGetKcClsx<ClassKey>({
     }
 });
 
-export type { ClassKey };
-
 export type KcClsx = ReturnType<typeof getKcClsx>["kcClsx"];

src/bin/add-story.ts

@@ -5,25 +5,30 @@ import {
     ACCOUNT_THEME_PAGE_IDS,
     type LoginThemePageId,
     type AccountThemePageId,
-    THEME_TYPES,
-    type ThemeType
+    THEME_TYPES
 } from "./shared/constants";
 import { capitalize } from "tsafe/capitalize";
 import * as fs from "fs";
 import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
 import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
 import { assert, Equals } from "tsafe/assert";
-import type { CliCommandOptions } from "./main";
-import { getBuildContext } from "./shared/buildContext";
+import type { BuildContext } from "./shared/buildContext";
 import chalk from "chalk";
+import { runPrettier, getIsPrettierAvailable } from "./tools/runPrettier";
+import { maybeDelegateCommandToCustomHandler } from "./shared/customHandler_delegate";
 
-export async function command(params: { cliCommandOptions: CliCommandOptions }) {
-    const { cliCommandOptions } = params;
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
 
-    const buildContext = getBuildContext({
-        cliCommandOptions
+    const { hasBeenHandled } = maybeDelegateCommandToCustomHandler({
+        commandName: "add-story",
+        buildContext
     });
 
+    if (hasBeenHandled) {
+        return;
+    }
+
     console.log(chalk.cyan("Theme type:"));
 
     const themeType = await (async () => {
@@ -33,6 +38,8 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                     return buildContext.implementedThemeTypes.account.isImplemented;
                 case "login":
                     return buildContext.implementedThemeTypes.login.isImplemented;
+                case "admin":
+                    return buildContext.implementedThemeTypes.admin.isImplemented;
             }
             assert<Equals<typeof themeType, never>>(false);
         });
@@ -43,7 +50,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             return values[0];
         }
 
-        const { value } = await cliSelect<ThemeType>({
+        const { value } = await cliSelect({
             values
         }).catch(() => {
             process.exit(-1);
@@ -62,6 +69,16 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         );
 
         process.exit(0);
+        return;
+    }
+
+    if (themeType === "admin") {
+        console.log(
+            `${chalk.red("✗")} Sorry, there is no Storybook support for the Account UI.`
+        );
+
+        process.exit(0);
+        return;
     }
 
     console.log(`→ ${themeType}`);
@@ -102,7 +119,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         process.exit(-1);
     }
 
-    const componentCode = fs
+    let sourceCode = fs
         .readFileSync(
             pathJoin(
                 getThisCodebaseRootDirPath(),
@@ -116,6 +133,17 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         .replace('import React from "react";\n', "")
         .replace(/from "[./]+dist\//, 'from "keycloakify/');
 
+    run_prettier: {
+        if (!(await getIsPrettierAvailable())) {
+            break run_prettier;
+        }
+
+        sourceCode = await runPrettier({
+            filePath: targetFilePath,
+            sourceCode: sourceCode
+        });
+    }
+
     {
         const targetDirPath = pathDirname(targetFilePath);
 
@@ -124,7 +152,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         }
     }
 
-    fs.writeFileSync(targetFilePath, Buffer.from(componentCode, "utf8"));
+    fs.writeFileSync(targetFilePath, Buffer.from(sourceCode, "utf8"));
 
     console.log(
         [

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

@@ -1,13 +1,96 @@
-import { copyKeycloakResourcesToPublic } from "./shared/copyKeycloakResourcesToPublic";
-import { getBuildContext } from "./shared/buildContext";
-import type { CliCommandOptions } from "./main";
+import { maybeDelegateCommandToCustomHandler } from "./shared/customHandler_delegate";
+import { join as pathJoin, dirname as pathDirname } from "path";
+import { WELL_KNOWN_DIRECTORY_BASE_NAME } from "./shared/constants";
+import { readThisNpmPackageVersion } from "./tools/readThisNpmPackageVersion";
+import * as fs from "fs";
+import { rmSync } from "./tools/fs.rmSync";
+import type { BuildContext } from "./shared/buildContext";
+import { transformCodebase } from "./tools/transformCodebase";
+import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
 
-export async function command(params: { cliCommandOptions: CliCommandOptions }) {
-    const { cliCommandOptions } = params;
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
 
-    const buildContext = getBuildContext({ cliCommandOptions });
-
-    copyKeycloakResourcesToPublic({
+    const { hasBeenHandled } = maybeDelegateCommandToCustomHandler({
+        commandName: "copy-keycloak-resources-to-public",
         buildContext
     });
+
+    if (hasBeenHandled) {
+        return;
+    }
+
+    const destDirPath = pathJoin(
+        buildContext.publicDirPath,
+        WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES
+    );
+
+    const keycloakifyBuildinfoFilePath = pathJoin(destDirPath, "keycloakify.buildinfo");
+
+    const keycloakifyBuildinfoRaw = JSON.stringify(
+        {
+            keycloakifyVersion: readThisNpmPackageVersion()
+        },
+        null,
+        2
+    );
+
+    skip_if_already_done: {
+        if (!fs.existsSync(keycloakifyBuildinfoFilePath)) {
+            break skip_if_already_done;
+        }
+
+        const keycloakifyBuildinfoRaw_previousRun = fs
+            .readFileSync(keycloakifyBuildinfoFilePath)
+            .toString("utf8");
+
+        if (keycloakifyBuildinfoRaw_previousRun !== keycloakifyBuildinfoRaw) {
+            break skip_if_already_done;
+        }
+
+        return;
+    }
+
+    rmSync(destDirPath, { force: true, recursive: true });
+
+    // 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"));
+
+    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 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")
+        )
+    );
+
+    fs.writeFileSync(
+        keycloakifyBuildinfoFilePath,
+        Buffer.from(keycloakifyBuildinfoRaw, "utf8")
+    );
 }

src/bin/eject-file.ts

@@ -0,0 +1,68 @@
+import type { BuildContext } from "./shared/buildContext";
+import { getUiModuleFileSourceCodeReadyToBeCopied } from "./postinstall/getUiModuleFileSourceCodeReadyToBeCopied";
+import { getAbsoluteAndInOsFormatPath } from "./tools/getAbsoluteAndInOsFormatPath";
+import { relative as pathRelative, dirname as pathDirname, join as pathJoin } from "path";
+import { getUiModuleMetas } from "./postinstall/uiModuleMeta";
+import { getInstalledModuleDirPath } from "./tools/getInstalledModuleDirPath";
+import * as fsPr from "fs/promises";
+import {
+    readManagedGitignoreFile,
+    writeManagedGitignoreFile
+} from "./postinstall/managedGitignoreFile";
+
+export async function command(params: {
+    buildContext: BuildContext;
+    cliCommandOptions: {
+        file: string;
+    };
+}) {
+    const { buildContext, cliCommandOptions } = params;
+
+    const fileRelativePath = pathRelative(
+        buildContext.themeSrcDirPath,
+        getAbsoluteAndInOsFormatPath({
+            cwd: buildContext.themeSrcDirPath,
+            pathIsh: cliCommandOptions.file
+        })
+    );
+
+    const uiModuleMetas = await getUiModuleMetas({ buildContext });
+
+    const uiModuleMeta = uiModuleMetas.find(({ files }) =>
+        files.map(({ fileRelativePath }) => fileRelativePath).includes(fileRelativePath)
+    );
+
+    if (!uiModuleMeta) {
+        throw new Error(`No UI module found for the file ${fileRelativePath}`);
+    }
+
+    const uiModuleDirPath = await getInstalledModuleDirPath({
+        moduleName: uiModuleMeta.moduleName,
+        packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath),
+        projectDirPath: buildContext.projectDirPath
+    });
+
+    const sourceCode = await getUiModuleFileSourceCodeReadyToBeCopied({
+        buildContext,
+        fileRelativePath,
+        isForEjection: true,
+        uiModuleName: uiModuleMeta.moduleName,
+        uiModuleDirPath,
+        uiModuleVersion: uiModuleMeta.version
+    });
+
+    await fsPr.writeFile(
+        pathJoin(buildContext.themeSrcDirPath, fileRelativePath),
+        sourceCode
+    );
+
+    const { ejectedFilesRelativePaths } = await readManagedGitignoreFile({
+        buildContext
+    });
+
+    await writeManagedGitignoreFile({
+        buildContext,
+        uiModuleMetas,
+        ejectedFilesRelativePaths: [...ejectedFilesRelativePaths, fileRelativePath]
+    });
+}

src/bin/eject-page.ts

@@ -7,8 +7,7 @@ import {
     ACCOUNT_THEME_PAGE_IDS,
     type LoginThemePageId,
     type AccountThemePageId,
-    THEME_TYPES,
-    type ThemeType
+    THEME_TYPES
 } from "./shared/constants";
 import { capitalize } from "tsafe/capitalize";
 import * as fs from "fs";
@@ -20,17 +19,23 @@ import {
 } from "path";
 import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
 import { assert, Equals } from "tsafe/assert";
-import type { CliCommandOptions } from "./main";
-import { getBuildContext } from "./shared/buildContext";
+import type { BuildContext } from "./shared/buildContext";
 import chalk from "chalk";
+import { maybeDelegateCommandToCustomHandler } from "./shared/customHandler_delegate";
+import { runPrettier, getIsPrettierAvailable } from "./tools/runPrettier";
 
-export async function command(params: { cliCommandOptions: CliCommandOptions }) {
-    const { cliCommandOptions } = params;
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
 
-    const buildContext = getBuildContext({
-        cliCommandOptions
+    const { hasBeenHandled } = maybeDelegateCommandToCustomHandler({
+        commandName: "eject-page",
+        buildContext
     });
 
+    if (hasBeenHandled) {
+        return;
+    }
+
     console.log(chalk.cyan("Theme type:"));
 
     const themeType = await (async () => {
@@ -40,6 +45,8 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                     return buildContext.implementedThemeTypes.account.isImplemented;
                 case "login":
                     return buildContext.implementedThemeTypes.login.isImplemented;
+                case "admin":
+                    return buildContext.implementedThemeTypes.admin.isImplemented;
             }
             assert<Equals<typeof themeType, never>>(false);
         });
@@ -50,7 +57,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             return values[0];
         }
 
-        const { value } = await cliSelect<ThemeType>({
+        const { value } = await cliSelect({
             values
         }).catch(() => {
             process.exit(-1);
@@ -59,6 +66,14 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         return value;
     })();
 
+    if (themeType === "admin") {
+        console.log(
+            "Use `npx keycloakify eject-file` command instead, see documentation"
+        );
+
+        process.exit(-1);
+    }
+
     if (
         themeType === "account" &&
         (assert(buildContext.implementedThemeTypes.account.isImplemented),
@@ -68,13 +83,13 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             pathDirname(buildContext.packageJsonFilePath),
             "node_modules",
             "@keycloakify",
-            "keycloak-account-ui",
+            `keycloak-account-ui`,
             "src"
         );
 
         console.log(
             [
-                `There isn't an interactive CLI to eject components of the Single-Page Account theme.`,
+                `There isn't an interactive CLI to eject components of the Account SPA UI.`,
                 `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)))}`,
@@ -83,41 +98,44 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         );
 
         eject_entrypoint: {
-            const kcAccountUiTsxFileRelativePath = "KcAccountUi.tsx";
+            const kcUiTsxFileRelativePath = `KcAccountUi.tsx` as const;
 
-            const accountThemeSrcDirPath = pathJoin(
-                buildContext.themeSrcDirPath,
-                "account"
-            );
+            const themeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "account");
 
-            const targetFilePath = pathJoin(
-                accountThemeSrcDirPath,
-                kcAccountUiTsxFileRelativePath
-            );
+            const targetFilePath = pathJoin(themeSrcDirPath, kcUiTsxFileRelativePath);
 
             if (fs.existsSync(targetFilePath)) {
                 break eject_entrypoint;
             }
 
-            fs.cpSync(
-                pathJoin(srcDirPath, kcAccountUiTsxFileRelativePath),
-                targetFilePath
-            );
+            fs.cpSync(pathJoin(srcDirPath, kcUiTsxFileRelativePath), targetFilePath);
 
             {
-                const kcPageTsxFilePath = pathJoin(accountThemeSrcDirPath, "KcPage.tsx");
+                const kcPageTsxFilePath = pathJoin(themeSrcDirPath, "KcPage.tsx");
 
                 const kcPageTsxCode = fs.readFileSync(kcPageTsxFilePath).toString("utf8");
 
-                const componentName = pathBasename(
-                    kcAccountUiTsxFileRelativePath
-                ).replace(/.tsx$/, "");
+                const componentName = pathBasename(kcUiTsxFileRelativePath).replace(
+                    /.tsx$/,
+                    ""
+                );
 
-                const modifiedKcPageTsxCode = kcPageTsxCode.replace(
+                let modifiedKcPageTsxCode = kcPageTsxCode.replace(
                     `@keycloakify/keycloak-account-ui/${componentName}`,
                     `./${componentName}`
                 );
 
+                run_prettier: {
+                    if (!(await getIsPrettierAvailable())) {
+                        break run_prettier;
+                    }
+
+                    modifiedKcPageTsxCode = await runPrettier({
+                        filePath: kcPageTsxFilePath,
+                        sourceCode: modifiedKcPageTsxCode
+                    });
+                }
+
                 fs.writeFileSync(
                     kcPageTsxFilePath,
                     Buffer.from(modifiedKcPageTsxCode, "utf8")
@@ -133,13 +151,14 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
                 [
                     `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}.`
+                    `with \`cp ${routesTsxFilePath} ${pathRelative(process.cwd(), themeSrcDirPath)}\``,
+                    `then update the import of routes in ${kcUiTsxFileRelativePath}.`
                 ].join("\n")
             );
         }
 
         process.exit(0);
+        return;
     }
 
     console.log(`→ ${themeType}`);
@@ -216,7 +235,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         process.exit(-1);
     }
 
-    const componentCode = fs
+    let componentCode = fs
         .readFileSync(
             pathJoin(
                 getThisCodebaseRootDirPath(),
@@ -228,6 +247,17 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         )
         .toString("utf8");
 
+    run_prettier: {
+        if (!(await getIsPrettierAvailable())) {
+            break run_prettier;
+        }
+
+        componentCode = await runPrettier({
+            filePath: targetFilePath,
+            sourceCode: componentCode
+        });
+    }
+
     {
         const targetDirPath = pathDirname(targetFilePath);
 
@@ -244,12 +274,12 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         )} copy pasted from the Keycloakify source code into your project`
     );
 
-    edit_KcApp: {
+    edit_KcPage: {
         if (
             pageIdOrComponent !== templateValue &&
             pageIdOrComponent !== userProfileFormFieldsValue
         ) {
-            break edit_KcApp;
+            break edit_KcPage;
         }
 
         const kcAppTsxPath = pathJoin(

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

@@ -1,17 +1,24 @@
-import { getBuildContext } from "../shared/buildContext";
-import type { CliCommandOptions } from "../main";
+import type { BuildContext } from "../shared/buildContext";
 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";
+import { command as updateKcGenCommand } from "../update-kc-gen";
+import { maybeDelegateCommandToCustomHandler } from "../shared/customHandler_delegate";
+import { exitIfUncommittedChanges } from "../shared/exitIfUncommittedChanges";
 
-export async function command(params: { cliCommandOptions: CliCommandOptions }) {
-    const { cliCommandOptions } = params;
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
 
-    const buildContext = getBuildContext({ cliCommandOptions });
+    const { hasBeenHandled } = maybeDelegateCommandToCustomHandler({
+        commandName: "initialize-account-theme",
+        buildContext
+    });
+
+    if (hasBeenHandled) {
+        return;
+    }
 
     const accountThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "account");
 
@@ -31,37 +38,9 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         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);
-    }
+    exitIfUncommittedChanges({
+        projectDirPath: buildContext.projectDirPath
+    });
 
     const { value: accountThemeType } = await cliSelect({
         values: ["Single-Page" as const, "Multi-Page" as const]
@@ -97,7 +76,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     updateAccountThemeImplementationInConfig({ buildContext, accountThemeType });
 
-    await generateKcGenTs({
+    await updateKcGenCommand({
         buildContext: {
             ...buildContext,
             implementedThemeTypes: {

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

@@ -1,4 +1,4 @@
-import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import { relative as pathRelative, dirname as pathDirname } from "path";
 import type { BuildContext } from "../shared/buildContext";
 import * as fs from "fs";
 import chalk from "chalk";
@@ -14,7 +14,6 @@ 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"];
@@ -121,20 +120,7 @@ export async function initializeAccountTheme_singlePage(params: {
         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) });
-    }
+    npmInstall({ packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath) });
 
     copyBoilerplate({
         accountThemeType: "Single-Page",

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

@@ -5,15 +5,18 @@ import * as fs from "fs";
 import chalk from "chalk";
 import { z } from "zod";
 import { id } from "tsafe/id";
+import { is } from "tsafe/is";
 
 export type BuildContextLike = {
     bundler: BuildContext["bundler"];
+    projectDirPath: string;
+    packageJsonFilePath: string;
 };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
 
 export function updateAccountThemeImplementationInConfig(params: {
-    buildContext: BuildContext;
+    buildContext: BuildContextLike;
     accountThemeType: "Single-Page" | "Multi-Page";
 }) {
     const { buildContext, accountThemeType } = params;
@@ -81,6 +84,8 @@ export function updateAccountThemeImplementationInConfig(params: {
 
                     zParsedPackageJson.parse(parsedPackageJson);
 
+                    assert(is<ParsedPackageJson>(parsedPackageJson));
+
                     return parsedPackageJson;
                 })();
 

src/bin/initialize-email-theme.ts

@@ -1,15 +1,25 @@
 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 type { BuildContext } from "./shared/buildContext";
 import * as fs from "fs";
-import type { CliCommandOptions } from "./main";
 import { downloadAndExtractArchive } from "./tools/downloadAndExtractArchive";
+import { maybeDelegateCommandToCustomHandler } from "./shared/customHandler_delegate";
+import fetch from "make-fetch-happen";
+import { SemVer } from "./tools/SemVer";
+import { assert } from "tsafe/assert";
 
-export async function command(params: { cliCommandOptions: CliCommandOptions }) {
-    const { cliCommandOptions } = params;
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
 
-    const buildContext = getBuildContext({ cliCommandOptions });
+    const { hasBeenHandled } = maybeDelegateCommandToCustomHandler({
+        commandName: "initialize-email-theme",
+        buildContext
+    });
+
+    if (hasBeenHandled) {
+        return;
+    }
 
     const emailThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "email");
 
@@ -29,7 +39,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
 
     console.log("Initialize with the base email theme from which version of Keycloak?");
 
-    const { keycloakVersion } = await promptKeycloakVersion({
+    let { keycloakVersion } = await promptKeycloakVersion({
         // NOTE: This is arbitrary
         startingFromMajor: 17,
         excludeMajorVersions: [],
@@ -37,8 +47,32 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         buildContext
     });
 
+    const getUrl = (keycloakVersion: string) => {
+        return `https://repo1.maven.org/maven2/org/keycloak/keycloak-themes/${keycloakVersion}/keycloak-themes-${keycloakVersion}.jar`;
+    };
+
+    keycloakVersion = await (async () => {
+        const keycloakVersionParsed = SemVer.parse(keycloakVersion);
+
+        while (true) {
+            const url = getUrl(SemVer.stringify(keycloakVersionParsed));
+
+            const response = await fetch(url, buildContext.fetchOptions);
+
+            if (response.ok) {
+                break;
+            }
+
+            assert(keycloakVersionParsed.patch !== 0);
+
+            keycloakVersionParsed.patch--;
+        }
+
+        return SemVer.stringify(keycloakVersionParsed);
+    })();
+
     const { extractedDirPath } = await downloadAndExtractArchive({
-        url: `https://repo1.maven.org/maven2/org/keycloak/keycloak-themes/${keycloakVersion}/keycloak-themes-${keycloakVersion}.jar`,
+        url: getUrl(keycloakVersion),
         cacheDirPath: buildContext.cacheDirPath,
         fetchOptions: buildContext.fetchOptions,
         uniqueIdOfOnArchiveFile: "extractOnlyEmailTheme",

src/bin/keycloakify/buildJars/buildJar.ts

@@ -16,6 +16,7 @@ import { isInside } from "../../tools/isInside";
 import child_process from "child_process";
 import { rmSync } from "../../tools/fs.rmSync";
 import { writeMetaInfKeycloakThemes } from "../../shared/metaInfKeycloakThemes";
+import { existsAsync } from "../../tools/fs.existsAsync";
 
 export type BuildContextLike = BuildContextLike_generatePom & {
     keycloakifyBuildDirPath: string;
@@ -135,40 +136,49 @@ export async function buildJar(params: {
             break route_legacy_pages;
         }
 
-        (["register.ftl", "login-update-profile.ftl"] as const).forEach(pageId =>
-            buildContext.themeNames.map(themeName => {
-                const ftlFilePath = pathJoin(
-                    tmpResourcesDirPath,
-                    "theme",
-                    themeName,
-                    "login",
-                    pageId
-                );
+        await Promise.all(
+            (["register.ftl", "login-update-profile.ftl"] as const)
+                .map(pageId =>
+                    buildContext.themeNames.map(async themeName => {
+                        const ftlFilePath = pathJoin(
+                            tmpResourcesDirPath,
+                            "theme",
+                            themeName,
+                            "login",
+                            pageId
+                        );
 
-                const ftlFileContent = readFileSync(ftlFilePath).toString("utf8");
+                        // NOTE: https://github.com/keycloakify/keycloakify/issues/665
+                        if (!(await existsAsync(ftlFilePath))) {
+                            return;
+                        }
 
-                const ftlFileBasename = (() => {
-                    switch (pageId) {
-                        case "register.ftl":
-                            return "register-user-profile.ftl";
-                        case "login-update-profile.ftl":
-                            return "update-user-profile.ftl";
-                    }
-                    assert<Equals<typeof pageId, never>>(false);
-                })();
+                        const ftlFileContent = readFileSync(ftlFilePath).toString("utf8");
 
-                const modifiedFtlFileContent = ftlFileContent.replace(
-                    `"ftlTemplateFileName": "${pageId}"`,
-                    `"ftlTemplateFileName": "${ftlFileBasename}"`
-                );
+                        const ftlFileBasename = (() => {
+                            switch (pageId) {
+                                case "register.ftl":
+                                    return "register-user-profile.ftl";
+                                case "login-update-profile.ftl":
+                                    return "update-user-profile.ftl";
+                            }
+                            assert<Equals<typeof pageId, never>>(false);
+                        })();
 
-                assert(modifiedFtlFileContent !== ftlFileContent);
+                        const modifiedFtlFileContent = ftlFileContent.replace(
+                            `"ftlTemplateFileName": "${pageId}"`,
+                            `"ftlTemplateFileName": "${ftlFileBasename}"`
+                        );
 
-                fs.writeFile(
-                    pathJoin(pathDirname(ftlFilePath), ftlFileBasename),
-                    Buffer.from(modifiedFtlFileContent, "utf8")
-                );
-            })
+                        assert(modifiedFtlFileContent !== ftlFileContent);
+
+                        await fs.writeFile(
+                            pathJoin(pathDirname(ftlFilePath), ftlFileBasename),
+                            Buffer.from(modifiedFtlFileContent, "utf8")
+                        );
+                    })
+                )
+                .flat()
         );
     }
 
@@ -187,7 +197,7 @@ export async function buildJar(params: {
 
     await new Promise<void>((resolve, reject) =>
         child_process.exec(
-            `mvn install -Dmaven.repo.local="${pathJoin(keycloakifyBuildCacheDirPath, ".m2")}"`,
+            `mvn clean install -Dmaven.repo.local="${pathJoin(keycloakifyBuildCacheDirPath, ".m2")}"`,
             { cwd: keycloakifyBuildCacheDirPath },
             error => {
                 if (error !== null) {

src/bin/keycloakify/buildJars/getKeycloakVersionRangeForJar.ts

@@ -52,9 +52,9 @@ export function getKeycloakVersionRangeForJar(params: {
                 case "0.6":
                     switch (keycloakThemeAdditionalInfoExtensionVersion) {
                         case null:
-                            return undefined;
+                            return "26-and-above" as const;
                         case "1.1.5":
-                            return "25-and-above" as const;
+                            return "25" as const;
                     }
             }
             assert<Equals<typeof keycloakAccountV1Version, never>>(false);
@@ -75,9 +75,9 @@ export function getKeycloakVersionRangeForJar(params: {
             }
             switch (keycloakThemeAdditionalInfoExtensionVersion) {
                 case null:
-                    return "21-and-below";
+                    return "all-other-versions";
                 case "1.1.5":
-                    return "22-and-above";
+                    return "22-to-25";
             }
             assert<Equals<typeof keycloakThemeAdditionalInfoExtensionVersion, never>>(
                 false

src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl

@@ -166,7 +166,7 @@ function decodeHtmlEntities(htmlStr){
                     areSamePath(path, []) &&
                     ["login-idp-link-confirm.ftl", "login-idp-link-email.ftl" ]?seq_contains(xKeycloakify.pageId)
                 ) ||  (
-                    ["masterAdminClient", "delegateForUpdate", "defaultRole"]?seq_contains(key) &&
+                    ["masterAdminClient", "delegateForUpdate", "defaultRole", "smtpConfig"]?seq_contains(key) &&
                     areSamePath(path, ["realm"])
                 ) || (
                     xKeycloakify.pageId == "error.ftl" &&
@@ -235,6 +235,9 @@ function decodeHtmlEntities(htmlStr){
                         "identityFederationEnabled",
                         "userManagedAccessAllowed"
                     ]?seq_contains(key)
+                ) || (
+                    ["flowContext", "session", "realm"]?seq_contains(key) &&
+                    areSamePath(path, ["social"])
                 )
             >
                 <#-- <#local outSeq += ["/*" + path?join(".") + "." + key + " excluded*/"]> -->

src/bin/keycloakify/generateResources/generateMessageProperties.ts

@@ -22,7 +22,7 @@ assert<BuildContext extends BuildContextLike ? true : false>();
 
 export function generateMessageProperties(params: {
     buildContext: BuildContextLike;
-    themeType: ThemeType;
+    themeType: Exclude<ThemeType, "admin">;
 }): {
     languageTags: string[];
     writeMessagePropertiesFiles: (params: {

src/bin/keycloakify/generateResources/generateResources.ts

@@ -1,16 +1,57 @@
 import type { BuildContext } from "../../shared/buildContext";
-import { assert } from "tsafe/assert";
-import {
-    generateResourcesForMainTheme,
-    type BuildContextLike as BuildContextLike_generateResourcesForMainTheme
-} from "./generateResourcesForMainTheme";
-import { generateResourcesForThemeVariant } from "./generateResourcesForThemeVariant";
 import fs from "fs";
 import { rmSync } from "../../tools/fs.rmSync";
+import { transformCodebase } from "../../tools/transformCodebase";
+import {
+    join as pathJoin,
+    relative as pathRelative,
+    dirname as pathDirname,
+    extname as pathExtname,
+    sep as pathSep
+} from "path";
+import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
+import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
+import {
+    generateFtlFilesCodeFactory,
+    type BuildContextLike as BuildContextLike_kcContextExclusionsFtlCode
+} from "../generateFtl";
+import {
+    type ThemeType,
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
+    WELL_KNOWN_DIRECTORY_BASE_NAME,
+    THEME_TYPES
+} from "../../shared/constants";
+import { assert, type Equals } from "tsafe/assert";
+import { readFieldNameUsage } from "./readFieldNameUsage";
+import { readExtraPagesNames } from "./readExtraPageNames";
+import {
+    generateMessageProperties,
+    type BuildContextLike as BuildContextLike_generateMessageProperties
+} from "./generateMessageProperties";
+import { readThisNpmPackageVersion } from "../../tools/readThisNpmPackageVersion";
+import {
+    writeMetaInfKeycloakThemes,
+    type MetaInfKeycloakTheme
+} 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";
+import propertiesParser from "properties-parser";
 
-export type BuildContextLike = BuildContextLike_generateResourcesForMainTheme & {
-    themeNames: string[];
-};
+export type BuildContextLike = BuildContextLike_kcContextExclusionsFtlCode &
+    BuildContextLike_generateMessageProperties & {
+        themeNames: string[];
+        extraThemeProperties: string[] | undefined;
+        projectDirPath: string;
+        projectBuildDirPath: string;
+        environmentVariables: { name: string; default: string }[];
+        implementedThemeTypes: BuildContext["implementedThemeTypes"];
+        themeSrcDirPath: string;
+        bundler: "vite" | "webpack";
+        packageJsonFilePath: string;
+    };
 
 assert<BuildContext extends BuildContextLike ? true : false>();
 
@@ -20,25 +61,474 @@ export async function generateResources(params: {
 }): Promise<void> {
     const { resourcesDirPath, buildContext } = params;
 
-    const [themeName, ...themeVariantNames] = buildContext.themeNames;
+    const [themeName] = buildContext.themeNames;
 
     if (fs.existsSync(resourcesDirPath)) {
         rmSync(resourcesDirPath, { recursive: true });
     }
 
-    const { writeMessagePropertiesFilesForThemeVariant } =
-        await generateResourcesForMainTheme({
-            resourcesDirPath,
+    const getThemeTypeDirPath = (params: {
+        themeType: ThemeType | "email";
+        themeName: string;
+    }) => {
+        const { themeType, themeName } = params;
+        return pathJoin(resourcesDirPath, "theme", themeName, themeType);
+    };
+
+    const writeMessagePropertiesFilesByThemeType: Partial<
+        Record<ThemeType, (params: { messageDirPath: string; themeName: string }) => void>
+    > = {};
+
+    for (const themeType of THEME_TYPES) {
+        if (!buildContext.implementedThemeTypes[themeType].isImplemented) {
+            continue;
+        }
+
+        const getAccountThemeType = () => {
+            assert(themeType === "account");
+
+            assert(buildContext.implementedThemeTypes.account.isImplemented);
+
+            return buildContext.implementedThemeTypes.account.type;
+        };
+
+        const isSpa = (() => {
+            switch (themeType) {
+                case "login":
+                    return false;
+                case "account":
+                    return getAccountThemeType() === "Single-Page";
+                case "admin":
+                    return true;
+            }
+        })();
+
+        const themeTypeDirPath = getThemeTypeDirPath({ themeName, themeType });
+
+        apply_replacers_and_move_to_theme_resources: {
+            const destDirPath = pathJoin(
+                themeTypeDirPath,
+                "resources",
+                WELL_KNOWN_DIRECTORY_BASE_NAME.DIST
+            );
+
+            // NOTE: Prevent accumulation of files in the assets dir, as names are hashed they pile up.
+            rmSync(destDirPath, { recursive: true, force: true });
+
+            if (
+                themeType !== "login" &&
+                buildContext.implementedThemeTypes.login.isImplemented
+            ) {
+                // NOTE: We prevent doing it twice, it has been done for the login theme.
+
+                transformCodebase({
+                    srcDirPath: pathJoin(
+                        getThemeTypeDirPath({
+                            themeName,
+                            themeType: "login"
+                        }),
+                        "resources",
+                        WELL_KNOWN_DIRECTORY_BASE_NAME.DIST
+                    ),
+                    destDirPath
+                });
+
+                break apply_replacers_and_move_to_theme_resources;
+            }
+
+            {
+                const dirPath = pathJoin(
+                    buildContext.projectBuildDirPath,
+                    WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES
+                );
+
+                if (fs.existsSync(dirPath)) {
+                    assert(buildContext.bundler === "webpack");
+
+                    throw new Error(
+                        [
+                            `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`,
+                            `For example: \`"build": "... && rimraf ${pathRelative(buildContext.projectDirPath, dirPath)}"\``
+                        ].join(" ")
+                    );
+                }
+            }
+
+            transformCodebase({
+                srcDirPath: buildContext.projectBuildDirPath,
+                destDirPath,
+                transformSourceCode: ({ filePath, fileRelativePath, sourceCode }) => {
+                    if (filePath.endsWith(".css")) {
+                        const { fixedCssCode } = replaceImportsInCssCode({
+                            cssCode: sourceCode.toString("utf8"),
+                            cssFileRelativeDirPath: pathDirname(fileRelativePath),
+                            buildContext
+                        });
+
+                        return {
+                            modifiedSourceCode: Buffer.from(fixedCssCode, "utf8")
+                        };
+                    }
+
+                    if (filePath.endsWith(".js")) {
+                        const { fixedJsCode } = replaceImportsInJsCode({
+                            jsCode: sourceCode.toString("utf8"),
+                            buildContext
+                        });
+
+                        return {
+                            modifiedSourceCode: Buffer.from(fixedJsCode, "utf8")
+                        };
+                    }
+
+                    return { modifiedSourceCode: sourceCode };
+                }
+            });
+        }
+
+        const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
             themeName,
-            buildContext
+            indexHtmlCode: fs
+                .readFileSync(pathJoin(buildContext.projectBuildDirPath, "index.html"))
+                .toString("utf8"),
+            buildContext,
+            keycloakifyVersion: readThisNpmPackageVersion(),
+            themeType,
+            fieldNames: isSpa
+                ? []
+                : (assert(themeType !== "admin"),
+                  readFieldNameUsage({
+                      themeSrcDirPath: buildContext.themeSrcDirPath,
+                      themeType
+                  }))
         });
 
-    for (const themeVariantName of themeVariantNames) {
-        generateResourcesForThemeVariant({
-            resourcesDirPath,
-            themeName,
-            themeVariantName,
-            writeMessagePropertiesFiles: writeMessagePropertiesFilesForThemeVariant
+        [
+            ...(() => {
+                switch (themeType) {
+                    case "login":
+                        return LOGIN_THEME_PAGE_IDS;
+                    case "account":
+                        return getAccountThemeType() === "Single-Page"
+                            ? ["index.ftl"]
+                            : ACCOUNT_THEME_PAGE_IDS;
+                    case "admin":
+                        return ["index.ftl"];
+                }
+            })(),
+            ...(isSpa
+                ? []
+                : readExtraPagesNames({
+                      themeType,
+                      themeSrcDirPath: buildContext.themeSrcDirPath
+                  }))
+        ].forEach(pageId => {
+            const { ftlCode } = generateFtlFilesCode({ pageId });
+
+            fs.writeFileSync(
+                pathJoin(themeTypeDirPath, pageId),
+                Buffer.from(ftlCode, "utf8")
+            );
+        });
+
+        let languageTags: string[] | undefined = undefined;
+
+        i18n_messages_generation: {
+            if (isSpa) {
+                break i18n_messages_generation;
+            }
+
+            assert(themeType !== "admin");
+
+            const wrap = generateMessageProperties({
+                buildContext,
+                themeType
+            });
+
+            languageTags = wrap.languageTags;
+            const { writeMessagePropertiesFiles } = wrap;
+
+            writeMessagePropertiesFilesByThemeType[themeType] =
+                writeMessagePropertiesFiles;
+        }
+
+        bring_in_spas_messages: {
+            if (!isSpa) {
+                break bring_in_spas_messages;
+            }
+
+            assert(themeType !== "login");
+
+            const accountUiDirPath = child_process
+                .execSync(`npm list @keycloakify/keycloak-${themeType}-ui --parseable`, {
+                    cwd: pathDirname(buildContext.packageJsonFilePath)
+                })
+                .toString("utf8")
+                .trim();
+
+            const messageDirPath_defaults = pathJoin(accountUiDirPath, "messages");
+
+            if (!fs.existsSync(messageDirPath_defaults)) {
+                throw new Error(
+                    `Please update @keycloakify/keycloak-account-ui to 25.0.4-rc.5 or later.`
+                );
+            }
+
+            const messagesDirPath_dest = pathJoin(
+                getThemeTypeDirPath({ themeName, themeType }),
+                "messages"
+            );
+
+            transformCodebase({
+                srcDirPath: messageDirPath_defaults,
+                destDirPath: messagesDirPath_dest
+            });
+
+            apply_theme_changes: {
+                const messagesDirPath_theme = pathJoin(
+                    buildContext.themeSrcDirPath,
+                    themeType,
+                    "messages"
+                );
+
+                if (!fs.existsSync(messagesDirPath_theme)) {
+                    break apply_theme_changes;
+                }
+
+                fs.readdirSync(messagesDirPath_theme).forEach(basename => {
+                    const filePath_src = pathJoin(messagesDirPath_theme, basename);
+                    const filePath_dest = pathJoin(messagesDirPath_dest, basename);
+
+                    if (!fs.existsSync(filePath_dest)) {
+                        fs.cpSync(filePath_src, filePath_dest);
+                    }
+
+                    const messages_src = propertiesParser.parse(
+                        fs.readFileSync(filePath_src).toString("utf8")
+                    );
+                    const messages_dest = propertiesParser.parse(
+                        fs.readFileSync(filePath_dest).toString("utf8")
+                    );
+
+                    const messages = {
+                        ...messages_dest,
+                        ...messages_src
+                    };
+
+                    const editor = propertiesParser.createEditor();
+
+                    Object.entries(messages).forEach(([key, value]) => {
+                        editor.set(key, value);
+                    });
+
+                    fs.writeFileSync(
+                        filePath_dest,
+                        Buffer.from(editor.toString(), "utf8")
+                    );
+                });
+            }
+
+            languageTags = fs
+                .readdirSync(messagesDirPath_dest)
+                .map(basename =>
+                    basename.replace(/^messages_/, "").replace(/\.properties$/, "")
+                );
+        }
+
+        keycloak_static_resources: {
+            if (isSpa) {
+                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"),
+            Buffer.from(
+                [
+                    `parent=${(() => {
+                        switch (themeType) {
+                            case "account":
+                                switch (getAccountThemeType()) {
+                                    case "Multi-Page":
+                                        return "account-v1";
+                                    case "Single-Page":
+                                        return "base";
+                                }
+                            case "login":
+                                return "keycloak";
+                            case "admin":
+                                return "base";
+                        }
+                        assert<Equals<typeof themeType, never>>(false);
+                    })()}`,
+                    ...(themeType === "account" && getAccountThemeType() === "Single-Page"
+                        ? ["deprecatedMode=false"]
+                        : []),
+                    ...(buildContext.extraThemeProperties ?? []),
+                    ...buildContext.environmentVariables.map(
+                        ({ name, default: defaultValue }) =>
+                            `${name}=\${env.${name}:${escapeStringForPropertiesFile(defaultValue)}}`
+                    ),
+                    ...(languageTags === undefined
+                        ? []
+                        : [`locales=${languageTags.join(",")}`])
+                ].join("\n\n"),
+                "utf8"
+            )
+        );
+    }
+
+    email: {
+        if (!buildContext.implementedThemeTypes.email.isImplemented) {
+            break email;
+        }
+
+        const emailThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "email");
+
+        transformCodebase({
+            srcDirPath: emailThemeSrcDirPath,
+            destDirPath: getThemeTypeDirPath({ themeName, themeType: "email" })
         });
     }
+
+    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: getThemeTypeDirPath({
+                themeName: "account-v1",
+                themeType: "account"
+            })
+        });
+    }
+
+    {
+        const metaInfKeycloakThemes: MetaInfKeycloakTheme = { themes: [] };
+
+        for (const themeName of buildContext.themeNames) {
+            metaInfKeycloakThemes.themes.push({
+                name: themeName,
+                types: objectEntries(buildContext.implementedThemeTypes)
+                    .filter(([, { isImplemented }]) => isImplemented)
+                    .map(([themeType]) => themeType)
+            });
+        }
+
+        if (buildContext.implementedThemeTypes.account.isImplemented) {
+            metaInfKeycloakThemes.themes.push({
+                name: "account-v1",
+                types: ["account"]
+            });
+        }
+
+        writeMetaInfKeycloakThemes({
+            resourcesDirPath,
+            getNewMetaInfKeycloakTheme: () => metaInfKeycloakThemes
+        });
+    }
+
+    for (const themeVariantName of buildContext.themeNames) {
+        if (themeVariantName === themeName) {
+            continue;
+        }
+
+        transformCodebase({
+            srcDirPath: pathJoin(resourcesDirPath, "theme", themeName),
+            destDirPath: pathJoin(resourcesDirPath, "theme", themeVariantName),
+            transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+                if (
+                    pathExtname(fileRelativePath) === ".ftl" &&
+                    fileRelativePath.split(pathSep).length === 2
+                ) {
+                    const modifiedSourceCode = Buffer.from(
+                        Buffer.from(sourceCode)
+                            .toString("utf-8")
+                            .replace(
+                                `"themeName": "${themeName}"`,
+                                `"themeName": "${themeVariantName}"`
+                            ),
+                        "utf8"
+                    );
+
+                    assert(Buffer.compare(modifiedSourceCode, sourceCode) !== 0);
+
+                    return { modifiedSourceCode };
+                }
+
+                return { modifiedSourceCode: sourceCode };
+            }
+        });
+    }
+
+    for (const themeName of buildContext.themeNames) {
+        for (const [themeType, writeMessagePropertiesFiles] of objectEntries(
+            writeMessagePropertiesFilesByThemeType
+        )) {
+            // NOTE: This is just a quirk of the type system: We can't really differentiate in a record
+            // between the case where the key isn't present and the case where the value is `undefined`.
+            if (writeMessagePropertiesFiles === undefined) {
+                return;
+            }
+            writeMessagePropertiesFiles({
+                messageDirPath: pathJoin(
+                    getThemeTypeDirPath({ themeName, themeType }),
+                    "messages"
+                ),
+                themeName
+            });
+        }
+    }
+
+    modify_email_theme_per_variant: {
+        if (!buildContext.implementedThemeTypes.email.isImplemented) {
+            break modify_email_theme_per_variant;
+        }
+
+        for (const themeName of buildContext.themeNames) {
+            const emailThemeDirPath = getThemeTypeDirPath({
+                themeName,
+                themeType: "email"
+            });
+
+            transformCodebase({
+                srcDirPath: emailThemeDirPath,
+                destDirPath: emailThemeDirPath,
+                transformSourceCode: ({ filePath, sourceCode }) => {
+                    if (!filePath.endsWith(".ftl")) {
+                        return { modifiedSourceCode: sourceCode };
+                    }
+
+                    return {
+                        modifiedSourceCode: Buffer.from(
+                            sourceCode
+                                .toString("utf8")
+                                .replace(/xKeycloakify\.themeName/g, `"${themeName}"`),
+                            "utf8"
+                        )
+                    };
+                }
+            });
+        }
+    }
 }

src/bin/keycloakify/generateResources/generateResourcesForMainTheme.ts

@@ -1,373 +0,0 @@
-import { transformCodebase } from "../../tools/transformCodebase";
-import * as fs from "fs";
-import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
-import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
-import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
-import {
-    generateFtlFilesCodeFactory,
-    type BuildContextLike as BuildContextLike_kcContextExclusionsFtlCode
-} from "../generateFtl";
-import {
-    type ThemeType,
-    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 { readFieldNameUsage } from "./readFieldNameUsage";
-import { readExtraPagesNames } from "./readExtraPageNames";
-import {
-    generateMessageProperties,
-    type BuildContextLike as BuildContextLike_generateMessageProperties
-} from "./generateMessageProperties";
-import { rmSync } from "../../tools/fs.rmSync";
-import { readThisNpmPackageVersion } from "../../tools/readThisNpmPackageVersion";
-import {
-    writeMetaInfKeycloakThemes,
-    type MetaInfKeycloakTheme
-} from "../../shared/metaInfKeycloakThemes";
-import { objectEntries } from "tsafe/objectEntries";
-import { escapeStringForPropertiesFile } from "../../tools/escapeStringForPropertiesFile";
-import * as child_process from "child_process";
-import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPath";
-
-export type BuildContextLike = BuildContextLike_kcContextExclusionsFtlCode &
-    BuildContextLike_generateMessageProperties & {
-        extraThemeProperties: string[] | undefined;
-        projectDirPath: string;
-        projectBuildDirPath: string;
-        environmentVariables: { name: string; default: string }[];
-        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;
-}): Promise<{
-    writeMessagePropertiesFilesForThemeVariant: (params: {
-        getMessageDirPath: (params: { themeType: ThemeType }) => string;
-        themeName: string;
-    }) => void;
-}> {
-    const { themeName, resourcesDirPath, buildContext } = params;
-
-    const getThemeTypeDirPath = (params: { themeType: ThemeType | "email" }) => {
-        const { themeType } = 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.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",
-                WELL_KNOWN_DIRECTORY_BASE_NAME.DIST
-            );
-
-            // NOTE: Prevent accumulation of files in the assets dir, as names are hashed they pile up.
-            rmSync(destDirPath, { recursive: true, force: true });
-
-            if (
-                themeType === "account" &&
-                buildContext.implementedThemeTypes.login.isImplemented
-            ) {
-                // NOTE: We prevent doing it twice, it has been done for the login theme.
-
-                transformCodebase({
-                    srcDirPath: pathJoin(
-                        getThemeTypeDirPath({
-                            themeType: "login"
-                        }),
-                        "resources",
-                        WELL_KNOWN_DIRECTORY_BASE_NAME.DIST
-                    ),
-                    destDirPath
-                });
-
-                break apply_replacers_and_move_to_theme_resources;
-            }
-
-            {
-                const dirPath = pathJoin(
-                    buildContext.projectBuildDirPath,
-                    WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES
-                );
-
-                if (fs.existsSync(dirPath)) {
-                    assert(buildContext.bundler === "webpack");
-
-                    throw new Error(
-                        [
-                            `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`,
-                            `For example: \`"build": "... && rimraf ${pathRelative(buildContext.projectDirPath, dirPath)}"\``
-                        ].join(" ")
-                    );
-                }
-            }
-
-            transformCodebase({
-                srcDirPath: buildContext.projectBuildDirPath,
-                destDirPath,
-                transformSourceCode: ({ filePath, fileRelativePath, sourceCode }) => {
-                    if (filePath.endsWith(".css")) {
-                        const { fixedCssCode } = replaceImportsInCssCode({
-                            cssCode: sourceCode.toString("utf8"),
-                            cssFileRelativeDirPath: pathDirname(fileRelativePath),
-                            buildContext
-                        });
-
-                        return {
-                            modifiedSourceCode: Buffer.from(fixedCssCode, "utf8")
-                        };
-                    }
-
-                    if (filePath.endsWith(".js")) {
-                        const { fixedJsCode } = replaceImportsInJsCode({
-                            jsCode: sourceCode.toString("utf8"),
-                            buildContext
-                        });
-
-                        return {
-                            modifiedSourceCode: Buffer.from(fixedJsCode, "utf8")
-                        };
-                    }
-
-                    return { modifiedSourceCode: sourceCode };
-                }
-            });
-        }
-
-        const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
-            themeName,
-            indexHtmlCode: fs
-                .readFileSync(pathJoin(buildContext.projectBuildDirPath, "index.html"))
-                .toString("utf8"),
-            buildContext,
-            keycloakifyVersion: readThisNpmPackageVersion(),
-            themeType,
-            fieldNames: readFieldNameUsage({
-                themeSrcDirPath: buildContext.themeSrcDirPath,
-                themeType
-            })
-        });
-
-        [
-            ...(() => {
-                switch (themeType) {
-                    case "login":
-                        return LOGIN_THEME_PAGE_IDS;
-                    case "account":
-                        return isForAccountSpa ? ["index.ftl"] : ACCOUNT_THEME_PAGE_IDS;
-                }
-            })(),
-            ...(isForAccountSpa
-                ? []
-                : readExtraPagesNames({
-                      themeType,
-                      themeSrcDirPath: buildContext.themeSrcDirPath
-                  }))
-        ].forEach(pageId => {
-            const { ftlCode } = generateFtlFilesCode({ pageId });
-
-            fs.writeFileSync(
-                pathJoin(themeTypeDirPath, pageId),
-                Buffer.from(ftlCode, "utf8")
-            );
-        });
-
-        let languageTags: string[] | undefined = undefined;
-
-        i18n_messages_generation: {
-            if (isForAccountSpa) {
-                break i18n_messages_generation;
-            }
-
-            const wrap = generateMessageProperties({
-                buildContext,
-                themeType
-            });
-
-            languageTags = wrap.languageTags;
-            const { writeMessagePropertiesFiles } = wrap;
-
-            writeMessagePropertiesFilesByThemeType[themeType] =
-                writeMessagePropertiesFiles;
-
-            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"),
-            Buffer.from(
-                [
-                    `parent=${(() => {
-                        switch (themeType) {
-                            case "account":
-                                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"
-            )
-        );
-    }
-
-    email: {
-        if (!buildContext.implementedThemeTypes.email.isImplemented) {
-            break email;
-        }
-
-        const emailThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, "email");
-
-        transformCodebase({
-            srcDirPath: emailThemeSrcDirPath,
-            destDirPath: getThemeTypeDirPath({ themeType: "email" })
-        });
-    }
-
-    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")
-        });
-    }
-
-    {
-        const metaInfKeycloakThemes: MetaInfKeycloakTheme = { themes: [] };
-
-        metaInfKeycloakThemes.themes.push({
-            name: themeName,
-            types: objectEntries(buildContext.implementedThemeTypes)
-                .filter(([, { isImplemented }]) => isImplemented)
-                .map(([themeType]) => themeType)
-        });
-
-        if (buildContext.implementedThemeTypes.account.isImplemented) {
-            metaInfKeycloakThemes.themes.push({
-                name: "account-v1",
-                types: ["account"]
-            });
-        }
-
-        writeMetaInfKeycloakThemes({
-            resourcesDirPath,
-            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,76 +0,0 @@
-import { join as pathJoin, extname as pathExtname, sep as pathSep } from "path";
-import { transformCodebase } from "../../tools/transformCodebase";
-import { writeMetaInfKeycloakThemes } from "../../shared/metaInfKeycloakThemes";
-import { assert } from "tsafe/assert";
-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, writeMessagePropertiesFiles } =
-        params;
-
-    const mainThemeDirPath = pathJoin(resourcesDirPath, "theme", themeName);
-    const themeVariantDirPath = pathJoin(mainThemeDirPath, "..", themeVariantName);
-
-    transformCodebase({
-        srcDirPath: mainThemeDirPath,
-        destDirPath: themeVariantDirPath,
-        transformSourceCode: ({ fileRelativePath, sourceCode }) => {
-            if (
-                pathExtname(fileRelativePath) === ".ftl" &&
-                fileRelativePath.split(pathSep).length === 2
-            ) {
-                const modifiedSourceCode = Buffer.from(
-                    Buffer.from(sourceCode)
-                        .toString("utf-8")
-                        .replace(
-                            `"themeName": "${themeName}"`,
-                            `"themeName": "${themeVariantName}"`
-                        ),
-                    "utf8"
-                );
-
-                assert(Buffer.compare(modifiedSourceCode, sourceCode) !== 0);
-
-                return { modifiedSourceCode };
-            }
-
-            return { modifiedSourceCode: sourceCode };
-        }
-    });
-
-    writeMetaInfKeycloakThemes({
-        resourcesDirPath,
-        getNewMetaInfKeycloakTheme: ({ metaInfKeycloakTheme }) => {
-            assert(metaInfKeycloakTheme !== undefined);
-
-            const newMetaInfKeycloakTheme = metaInfKeycloakTheme;
-
-            newMetaInfKeycloakTheme.themes.push({
-                name: themeVariantName,
-                types: (() => {
-                    const theme = newMetaInfKeycloakTheme.themes.find(
-                        ({ name }) => name === themeName
-                    );
-                    assert(theme !== undefined);
-                    return theme.types;
-                })()
-            });
-
-            return newMetaInfKeycloakTheme;
-        }
-    });
-
-    writeMessagePropertiesFiles({
-        getMessageDirPath: ({ themeType }) =>
-            pathJoin(themeVariantDirPath, themeType, "messages"),
-        themeName: themeVariantName
-    });
-}

src/bin/keycloakify/generateResources/readFieldNameUsage.ts

@@ -7,7 +7,7 @@ import { getThisCodebaseRootDirPath } from "../../tools/getThisCodebaseRootDirPa
 /** Assumes the theme type exists */
 export function readFieldNameUsage(params: {
     themeSrcDirPath: string;
-    themeType: ThemeType;
+    themeType: Exclude<ThemeType, "admin">;
 }): string[] {
     const { themeSrcDirPath, themeType } = params;
 

src/bin/keycloakify/keycloakify.ts

@@ -2,19 +2,16 @@ import { generateResources } from "./generateResources";
 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 type { BuildContext } from "../shared/buildContext";
 import { VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES } from "../shared/constants";
 import { buildJars } from "./buildJars";
-import type { CliCommandOptions } from "../main";
 import chalk from "chalk";
 import { readThisNpmPackageVersion } from "../tools/readThisNpmPackageVersion";
 import * as os from "os";
 import { rmSync } from "../tools/fs.rmSync";
 
-export async function command(params: { cliCommandOptions: CliCommandOptions }) {
-    const { cliCommandOptions } = params;
-
-    const buildContext = getBuildContext({ cliCommandOptions });
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
 
     exit_if_maven_not_installed: {
         let commandOutput: Buffer | undefined = undefined;

src/bin/main.ts

@@ -4,8 +4,9 @@ import { termost } from "termost";
 import { readThisNpmPackageVersion } from "./tools/readThisNpmPackageVersion";
 import * as child_process from "child_process";
 import { assertNoPnpmDlx } from "./tools/assertNoPnpmDlx";
+import { getBuildContext } from "./shared/buildContext";
 
-export type CliCommandOptions = {
+type CliCommandOptions = {
     projectDirPath: string | undefined;
 };
 
@@ -69,10 +70,10 @@ program
     })
     .task({
         skip,
-        handler: async cliCommandOptions => {
+        handler: async ({ projectDirPath }) => {
             const { command } = await import("./keycloakify");
 
-            await command({ cliCommandOptions });
+            await command({ buildContext: getBuildContext({ projectDirPath }) });
         }
     });
 
@@ -130,10 +131,13 @@ program
     })
     .task({
         skip,
-        handler: async cliCommandOptions => {
+        handler: async ({ projectDirPath, keycloakVersion, port, realmJsonFilePath }) => {
             const { command } = await import("./start-keycloak");
 
-            await command({ cliCommandOptions });
+            await command({
+                buildContext: getBuildContext({ projectDirPath }),
+                cliCommandOptions: { keycloakVersion, port, realmJsonFilePath }
+            });
         }
     });
 
@@ -144,10 +148,10 @@ program
     })
     .task({
         skip,
-        handler: async cliCommandOptions => {
+        handler: async ({ projectDirPath }) => {
             const { command } = await import("./eject-page");
 
-            await command({ cliCommandOptions });
+            await command({ buildContext: getBuildContext({ projectDirPath }) });
         }
     });
 
@@ -158,10 +162,10 @@ program
     })
     .task({
         skip,
-        handler: async cliCommandOptions => {
+        handler: async ({ projectDirPath }) => {
             const { command } = await import("./add-story");
 
-            await command({ cliCommandOptions });
+            await command({ buildContext: getBuildContext({ projectDirPath }) });
         }
     });
 
@@ -172,10 +176,10 @@ program
     })
     .task({
         skip,
-        handler: async cliCommandOptions => {
+        handler: async ({ projectDirPath }) => {
             const { command } = await import("./initialize-email-theme");
 
-            await command({ cliCommandOptions });
+            await command({ buildContext: getBuildContext({ projectDirPath }) });
         }
     });
 
@@ -186,10 +190,10 @@ program
     })
     .task({
         skip,
-        handler: async cliCommandOptions => {
+        handler: async ({ projectDirPath }) => {
             const { command } = await import("./initialize-account-theme");
 
-            await command({ cliCommandOptions });
+            await command({ buildContext: getBuildContext({ projectDirPath }) });
         }
     });
 
@@ -201,10 +205,10 @@ program
     })
     .task({
         skip,
-        handler: async cliCommandOptions => {
+        handler: async ({ projectDirPath }) => {
             const { command } = await import("./copy-keycloak-resources-to-public");
 
-            await command({ cliCommandOptions });
+            await command({ buildContext: getBuildContext({ projectDirPath }) });
         }
     });
 
@@ -216,10 +220,60 @@ program
     })
     .task({
         skip,
-        handler: async cliCommandOptions => {
+        handler: async ({ projectDirPath }) => {
             const { command } = await import("./update-kc-gen");
 
-            await command({ cliCommandOptions });
+            await command({ buildContext: getBuildContext({ projectDirPath }) });
+        }
+    });
+
+program
+    .command({
+        name: "postinstall",
+        description: "Initialize all the Keycloakify UI modules installed in the project."
+    })
+    .task({
+        skip,
+        handler: async ({ projectDirPath }) => {
+            const { command } = await import("./postinstall");
+
+            await command({ buildContext: getBuildContext({ projectDirPath }) });
+        }
+    });
+
+program
+    .command<{
+        file: string;
+    }>({
+        name: "eject-file",
+        description: [
+            "WARNING: Not usable yet, will be used for future features",
+            "Take ownership over a given file"
+        ].join(" ")
+    })
+    .option({
+        key: "file",
+        name: (() => {
+            const name = "file";
+
+            optionsKeys.push(name);
+
+            return name;
+        })(),
+        description: [
+            "Relative path of the file relative to the directory of your keycloak theme source",
+            "Example `--file src/login/page/Login.tsx`"
+        ].join(" ")
+    })
+    .task({
+        skip,
+        handler: async ({ projectDirPath, file }) => {
+            const { command } = await import("./eject-file");
+
+            await command({
+                buildContext: getBuildContext({ projectDirPath }),
+                cliCommandOptions: { file }
+            });
         }
     });
 

src/bin/postinstall/getUiModuleFileSourceCodeReadyToBeCopied.ts

@@ -0,0 +1,71 @@
+import { getIsPrettierAvailable, runPrettier } from "../tools/runPrettier";
+import * as fsPr from "fs/promises";
+import { join as pathJoin, sep as pathSep } from "path";
+import { assert } from "tsafe/assert";
+import type { BuildContext } from "../shared/buildContext";
+import { KEYCLOAK_THEME } from "../shared/constants";
+
+export type BuildContextLike = {
+    themeSrcDirPath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export async function getUiModuleFileSourceCodeReadyToBeCopied(params: {
+    buildContext: BuildContextLike;
+    fileRelativePath: string;
+    isForEjection: boolean;
+    uiModuleDirPath: string;
+    uiModuleName: string;
+    uiModuleVersion: string;
+}): Promise<Buffer> {
+    const {
+        buildContext,
+        uiModuleDirPath,
+        fileRelativePath,
+        isForEjection,
+        uiModuleName,
+        uiModuleVersion
+    } = params;
+
+    let sourceCode = (
+        await fsPr.readFile(pathJoin(uiModuleDirPath, KEYCLOAK_THEME, fileRelativePath))
+    ).toString("utf8");
+
+    const comment = (() => {
+        if (isForEjection) {
+            return [
+                `/*`,
+                `This file was ejected from ${uiModuleName} version ${uiModuleVersion}.`,
+                `*/`
+            ].join("\n");
+        } else {
+            return [
+                `/*`,
+                `WARNING: Before modifying this file run the following command:`,
+                ``,
+                `npx keycloakify eject-file --file ${fileRelativePath.split(pathSep).join("/")}\``,
+                ``,
+                `This file comes from ${uiModuleName} version ${uiModuleVersion}.`,
+                `*/`
+            ];
+        }
+    })();
+
+    sourceCode = [comment, ``, sourceCode].join("\n");
+
+    const destFilePath = pathJoin(buildContext.themeSrcDirPath, fileRelativePath);
+
+    format: {
+        if (!(await getIsPrettierAvailable())) {
+            break format;
+        }
+
+        sourceCode = await runPrettier({
+            filePath: destFilePath,
+            sourceCode
+        });
+    }
+
+    return Buffer.from(sourceCode, "utf8");
+}

src/bin/postinstall/index.ts

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

src/bin/postinstall/installUiModulesPeerDependencies.ts

@@ -0,0 +1,157 @@
+import { assert, type Equals } from "tsafe/assert";
+import { is } from "tsafe/is";
+import type { BuildContext } from "../shared/buildContext";
+import type { UiModuleMeta } from "./uiModuleMeta";
+import { z } from "zod";
+import { id } from "tsafe/id";
+import * as fsPr from "fs/promises";
+import { SemVer } from "../tools/SemVer";
+import { same } from "evt/tools/inDepth/same";
+import { runPrettier, getIsPrettierAvailable } from "../tools/runPrettier";
+import { npmInstall } from "../tools/npmInstall";
+
+export type BuildContextLike = {
+    packageJsonFilePath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export type UiModuleMetaLike = {
+    moduleName: string;
+    peerDependencies: Record<string, string>;
+};
+
+assert<UiModuleMeta extends UiModuleMetaLike ? true : false>();
+
+export async function installUiModulesPeerDependencies(params: {
+    buildContext: BuildContextLike;
+    uiModuleMetas: UiModuleMetaLike[];
+}): Promise<void | never> {
+    const { buildContext, uiModuleMetas } = params;
+
+    const { uiModulesPerDependencies } = (() => {
+        const uiModulesPerDependencies: Record<string, string> = {};
+
+        for (const { peerDependencies } of uiModuleMetas) {
+            for (const [peerDependencyName, versionRange_candidate] of Object.entries(
+                peerDependencies
+            )) {
+                const versionRange = (() => {
+                    const versionRange_current =
+                        uiModulesPerDependencies[peerDependencyName];
+
+                    if (versionRange_current === undefined) {
+                        return versionRange_candidate;
+                    }
+
+                    if (versionRange_current === "*") {
+                        return versionRange_candidate;
+                    }
+
+                    if (versionRange_candidate === "*") {
+                        return versionRange_current;
+                    }
+
+                    const { versionRange } = [
+                        versionRange_current,
+                        versionRange_candidate
+                    ]
+                        .map(versionRange => ({
+                            versionRange,
+                            semVer: SemVer.parse(
+                                (() => {
+                                    if (
+                                        versionRange.startsWith("^") ||
+                                        versionRange.startsWith("~")
+                                    ) {
+                                        return versionRange.slice(1);
+                                    }
+
+                                    return versionRange;
+                                })()
+                            )
+                        }))
+                        .sort((a, b) => SemVer.compare(b.semVer, a.semVer))[0];
+
+                    return versionRange;
+                })();
+
+                uiModulesPerDependencies[peerDependencyName] = versionRange;
+            }
+        }
+
+        return { uiModulesPerDependencies };
+    })();
+
+    const parsedPackageJson = await (async () => {
+        type ParsedPackageJson = {
+            dependencies?: Record<string, string>;
+            devDependencies?: Record<string, string>;
+        };
+
+        const zParsedPackageJson = (() => {
+            type TargetType = ParsedPackageJson;
+
+            const zParsedPackageJson = z.object({
+                dependencies: z.record(z.string()).optional(),
+                devDependencies: z.record(z.string()).optional()
+            });
+
+            type InferredType = z.infer<typeof zParsedPackageJson>;
+
+            assert<Equals<InferredType, TargetType>>();
+
+            return id<z.ZodType<TargetType>>(zParsedPackageJson);
+        })();
+
+        const parsedPackageJson = JSON.parse(
+            (await fsPr.readFile(buildContext.packageJsonFilePath)).toString("utf8")
+        );
+
+        zParsedPackageJson.parse(parsedPackageJson);
+
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return parsedPackageJson;
+    })();
+
+    const parsedPackageJson_before = JSON.parse(JSON.stringify(parsedPackageJson));
+
+    for (const [moduleName, versionRange] of Object.entries(uiModulesPerDependencies)) {
+        if (moduleName.startsWith("@types/")) {
+            (parsedPackageJson.devDependencies ??= {})[moduleName] = versionRange;
+            continue;
+        }
+
+        if (parsedPackageJson.devDependencies !== undefined) {
+            delete parsedPackageJson.devDependencies[moduleName];
+        }
+
+        (parsedPackageJson.dependencies ??= {})[moduleName] = versionRange;
+    }
+
+    if (same(parsedPackageJson, parsedPackageJson_before)) {
+        return;
+    }
+
+    let packageJsonContentStr = JSON.stringify(parsedPackageJson, null, 2);
+
+    format: {
+        if (!(await getIsPrettierAvailable())) {
+            break format;
+        }
+
+        packageJsonContentStr = await runPrettier({
+            sourceCode: packageJsonContentStr,
+            filePath: buildContext.packageJsonFilePath
+        });
+    }
+
+    await fsPr.writeFile(buildContext.packageJsonFilePath, packageJsonContentStr);
+
+    npmInstall({
+        packageJsonDirPath: buildContext.packageJsonFilePath
+    });
+
+    process.exit(0);
+}

src/bin/postinstall/managedGitignoreFile.ts

@@ -0,0 +1,135 @@
+import * as fsPr from "fs/promises";
+import {
+    join as pathJoin,
+    sep as pathSep,
+    dirname as pathDirname,
+    relative as pathRelative
+} from "path";
+import { assert } from "tsafe/assert";
+import type { BuildContext } from "../shared/buildContext";
+import type { UiModuleMeta } from "./uiModuleMeta";
+import { existsAsync } from "../tools/fs.existsAsync";
+import { getAbsoluteAndInOsFormatPath } from "../tools/getAbsoluteAndInOsFormatPath";
+
+export type BuildContextLike = {
+    themeSrcDirPath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+const DELIMITER_START = `# === Ejected files start ===`;
+const DELIMITER_END = `# === Ejected files end =====`;
+
+export async function writeManagedGitignoreFile(params: {
+    buildContext: BuildContextLike;
+    uiModuleMetas: UiModuleMeta[];
+    ejectedFilesRelativePaths: string[];
+}): Promise<void> {
+    const { buildContext, uiModuleMetas, ejectedFilesRelativePaths } = params;
+
+    if (uiModuleMetas.length === 0) {
+        return;
+    }
+
+    const filePath = pathJoin(buildContext.themeSrcDirPath, ".gitignore");
+
+    const content_new = Buffer.from(
+        [
+            `# This file is managed by Keycloakify, do not edit it manually.`,
+            ``,
+            DELIMITER_START,
+            ...ejectedFilesRelativePaths.map(fileRelativePath =>
+                fileRelativePath.split(pathSep).join("/")
+            ),
+            DELIMITER_END,
+            ``,
+            ...uiModuleMetas
+                .map(uiModuleMeta => [
+                    `# === ${uiModuleMeta.moduleName} v${uiModuleMeta.version} ===`,
+                    ...uiModuleMeta.files
+                        .map(({ fileRelativePath }) => fileRelativePath)
+                        .filter(
+                            fileRelativePath =>
+                                !ejectedFilesRelativePaths.includes(fileRelativePath)
+                        )
+                        .map(
+                            fileRelativePath =>
+                                `/${fileRelativePath.split(pathSep).join("/").replace(/^\.\//, "")}`
+                        ),
+
+                    ``
+                ])
+                .flat()
+        ].join("\n"),
+        "utf8"
+    );
+
+    const content_current = await (async () => {
+        if (!(await existsAsync(filePath))) {
+            return undefined;
+        }
+
+        return await fsPr.readFile(filePath);
+    })();
+
+    if (content_current !== undefined && content_current.equals(content_new)) {
+        return;
+    }
+
+    create_dir: {
+        const dirPath = pathDirname(filePath);
+
+        if (await existsAsync(dirPath)) {
+            break create_dir;
+        }
+
+        await fsPr.mkdir(dirPath, { recursive: true });
+    }
+
+    await fsPr.writeFile(filePath, content_new);
+}
+
+export async function readManagedGitignoreFile(params: {
+    buildContext: BuildContextLike;
+}): Promise<{
+    ejectedFilesRelativePaths: string[];
+}> {
+    const { buildContext } = params;
+
+    const filePath = pathJoin(buildContext.themeSrcDirPath, ".gitignore");
+
+    if (!(await existsAsync(filePath))) {
+        return { ejectedFilesRelativePaths: [] };
+    }
+
+    const contentStr = (await fsPr.readFile(filePath)).toString("utf8");
+
+    const payload = (() => {
+        const index_start = contentStr.indexOf(DELIMITER_START);
+        const index_end = contentStr.indexOf(DELIMITER_END);
+
+        if (index_start === -1 || index_end === -1) {
+            return undefined;
+        }
+
+        return contentStr.slice(index_start + DELIMITER_START.length, index_end).trim();
+    })();
+
+    if (payload === undefined) {
+        return { ejectedFilesRelativePaths: [] };
+    }
+
+    const ejectedFilesRelativePaths = payload
+        .split("\n")
+        .map(line => line.trim())
+        .filter(line => line !== "")
+        .map(line =>
+            getAbsoluteAndInOsFormatPath({
+                cwd: buildContext.themeSrcDirPath,
+                pathIsh: line
+            })
+        )
+        .map(filePath => pathRelative(buildContext.themeSrcDirPath, filePath));
+
+    return { ejectedFilesRelativePaths };
+}

src/bin/postinstall/postinstall.ts

@@ -0,0 +1,79 @@
+import type { BuildContext } from "../shared/buildContext";
+import { getUiModuleMetas, computeHash } from "./uiModuleMeta";
+import { installUiModulesPeerDependencies } from "./installUiModulesPeerDependencies";
+import {
+    readManagedGitignoreFile,
+    writeManagedGitignoreFile
+} from "./managedGitignoreFile";
+import { dirname as pathDirname } from "path";
+import { join as pathJoin } from "path";
+import { existsAsync } from "../tools/fs.existsAsync";
+import * as fsPr from "fs/promises";
+
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
+
+    const uiModuleMetas = await getUiModuleMetas({ buildContext });
+
+    await installUiModulesPeerDependencies({
+        buildContext,
+        uiModuleMetas
+    });
+
+    const { ejectedFilesRelativePaths } = await readManagedGitignoreFile({
+        buildContext
+    });
+
+    await writeManagedGitignoreFile({
+        buildContext,
+        ejectedFilesRelativePaths,
+        uiModuleMetas
+    });
+
+    await Promise.all(
+        uiModuleMetas
+            .map(uiModuleMeta =>
+                Promise.all(
+                    uiModuleMeta.files.map(
+                        async ({ fileRelativePath, copyableFilePath, hash }) => {
+                            if (ejectedFilesRelativePaths.includes(fileRelativePath)) {
+                                return;
+                            }
+
+                            const destFilePath = pathJoin(
+                                buildContext.themeSrcDirPath,
+                                fileRelativePath
+                            );
+
+                            skip_condition: {
+                                if (!(await existsAsync(destFilePath))) {
+                                    break skip_condition;
+                                }
+
+                                const destFileHash = computeHash(
+                                    await fsPr.readFile(destFilePath)
+                                );
+
+                                if (destFileHash !== hash) {
+                                    break skip_condition;
+                                }
+
+                                return;
+                            }
+
+                            {
+                                const dirName = pathDirname(copyableFilePath);
+
+                                if (!(await existsAsync(dirName))) {
+                                    await fsPr.mkdir(dirName, { recursive: true });
+                                }
+                            }
+
+                            await fsPr.copyFile(copyableFilePath, destFilePath);
+                        }
+                    )
+                )
+            )
+            .flat()
+    );
+}

src/bin/postinstall/uiModuleMeta.ts

@@ -0,0 +1,303 @@
+import { assert, type Equals } from "tsafe/assert";
+import { id } from "tsafe/id";
+import { z } from "zod";
+import { join as pathJoin, dirname as pathDirname } from "path";
+import * as fsPr from "fs/promises";
+import type { BuildContext } from "../shared/buildContext";
+import { is } from "tsafe/is";
+import { existsAsync } from "../tools/fs.existsAsync";
+import { listInstalledModules } from "../tools/listInstalledModules";
+import { crawlAsync } from "../tools/crawlAsync";
+import { getIsPrettierAvailable, getPrettier } from "../tools/runPrettier";
+import { readThisNpmPackageVersion } from "../tools/readThisNpmPackageVersion";
+import {
+    getUiModuleFileSourceCodeReadyToBeCopied,
+    type BuildContextLike as BuildContextLike_getUiModuleFileSourceCodeReadyToBeCopied
+} from "./getUiModuleFileSourceCodeReadyToBeCopied";
+import * as crypto from "crypto";
+import { KEYCLOAK_THEME } from "../shared/constants";
+
+export type UiModuleMeta = {
+    moduleName: string;
+    version: string;
+    files: {
+        fileRelativePath: string;
+        hash: string;
+        copyableFilePath: string;
+    }[];
+    peerDependencies: Record<string, string>;
+};
+
+const zUiModuleMeta = (() => {
+    type ExpectedType = UiModuleMeta;
+
+    const zTargetType = z.object({
+        moduleName: z.string(),
+        version: z.string(),
+        files: z.array(
+            z.object({
+                fileRelativePath: z.string(),
+                hash: z.string(),
+                copyableFilePath: z.string()
+            })
+        ),
+        peerDependencies: z.record(z.string())
+    });
+
+    type InferredType = z.infer<typeof zTargetType>;
+
+    assert<Equals<InferredType, ExpectedType>>();
+
+    return id<z.ZodType<ExpectedType>>(zTargetType);
+})();
+
+type ParsedCacheFile = {
+    keycloakifyVersion: string;
+    prettierConfigHash: string | null;
+    thisFilePath: string;
+    uiModuleMetas: UiModuleMeta[];
+};
+
+const zParsedCacheFile = (() => {
+    type ExpectedType = ParsedCacheFile;
+
+    const zTargetType = z.object({
+        keycloakifyVersion: z.string(),
+        prettierConfigHash: z.union([z.string(), z.null()]),
+        thisFilePath: z.string(),
+        uiModuleMetas: z.array(zUiModuleMeta)
+    });
+
+    type InferredType = z.infer<typeof zTargetType>;
+
+    assert<Equals<InferredType, ExpectedType>>();
+
+    return id<z.ZodType<ExpectedType>>(zTargetType);
+})();
+
+const CACHE_FILE_RELATIVE_PATH = pathJoin("ui-modules", "cache.json");
+
+export type BuildContextLike =
+    BuildContextLike_getUiModuleFileSourceCodeReadyToBeCopied & {
+        cacheDirPath: string;
+        packageJsonFilePath: string;
+        projectDirPath: string;
+    };
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export async function getUiModuleMetas(params: {
+    buildContext: BuildContextLike;
+}): Promise<UiModuleMeta[]> {
+    const { buildContext } = params;
+
+    const cacheFilePath = pathJoin(buildContext.cacheDirPath, CACHE_FILE_RELATIVE_PATH);
+
+    const keycloakifyVersion = readThisNpmPackageVersion();
+
+    const prettierConfigHash = await (async () => {
+        if (!(await getIsPrettierAvailable())) {
+            return null;
+        }
+
+        const { configHash } = await getPrettier();
+
+        return configHash;
+    })();
+
+    const installedUiModules = await (async () => {
+        const installedModulesWithKeycloakifyInTheName = await listInstalledModules({
+            packageJsonFilePath: buildContext.packageJsonFilePath,
+            projectDirPath: buildContext.packageJsonFilePath,
+            filter: ({ moduleName }) =>
+                moduleName.includes("keycloakify") && moduleName !== "keycloakify"
+        });
+
+        return Promise.all(
+            installedModulesWithKeycloakifyInTheName.filter(async ({ dirPath }) =>
+                existsAsync(pathJoin(dirPath, KEYCLOAK_THEME))
+            )
+        );
+    })();
+
+    const cacheContent = await (async () => {
+        if (!(await existsAsync(cacheFilePath))) {
+            return undefined;
+        }
+
+        return await fsPr.readFile(cacheFilePath);
+    })();
+
+    const uiModuleMetas_cacheUpToDate: UiModuleMeta[] = await (async () => {
+        const parsedCacheFile: ParsedCacheFile | undefined = await (async () => {
+            if (cacheContent === undefined) {
+                return undefined;
+            }
+
+            const cacheContentStr = cacheContent.toString("utf8");
+
+            let parsedCacheFile: unknown;
+
+            try {
+                parsedCacheFile = JSON.parse(cacheContentStr);
+            } catch {
+                return undefined;
+            }
+
+            try {
+                zParsedCacheFile.parse(parsedCacheFile);
+            } catch {
+                return undefined;
+            }
+
+            assert(is<ParsedCacheFile>(parsedCacheFile));
+
+            return parsedCacheFile;
+        })();
+
+        if (parsedCacheFile === undefined) {
+            return [];
+        }
+
+        if (parsedCacheFile.keycloakifyVersion !== keycloakifyVersion) {
+            return [];
+        }
+
+        if (parsedCacheFile.prettierConfigHash !== prettierConfigHash) {
+            return [];
+        }
+
+        if (parsedCacheFile.thisFilePath !== cacheFilePath) {
+            return [];
+        }
+
+        const uiModuleMetas_cacheUpToDate = parsedCacheFile.uiModuleMetas.filter(
+            uiModuleMeta => {
+                const correspondingInstalledUiModule = installedUiModules.find(
+                    installedUiModule =>
+                        installedUiModule.moduleName === uiModuleMeta.moduleName
+                );
+
+                if (correspondingInstalledUiModule === undefined) {
+                    return false;
+                }
+
+                return correspondingInstalledUiModule.version === uiModuleMeta.version;
+            }
+        );
+
+        return uiModuleMetas_cacheUpToDate;
+    })();
+
+    const uiModuleMetas = await Promise.all(
+        installedUiModules.map(
+            async ({
+                moduleName,
+                version,
+                peerDependencies,
+                dirPath
+            }): Promise<UiModuleMeta> => {
+                use_cache: {
+                    const uiModuleMeta_cache = uiModuleMetas_cacheUpToDate.find(
+                        uiModuleMeta => uiModuleMeta.moduleName === moduleName
+                    );
+
+                    if (uiModuleMeta_cache === undefined) {
+                        break use_cache;
+                    }
+
+                    return uiModuleMeta_cache;
+                }
+
+                const files: UiModuleMeta["files"] = [];
+
+                {
+                    const srcDirPath = pathJoin(dirPath, KEYCLOAK_THEME);
+
+                    await crawlAsync({
+                        dirPath: srcDirPath,
+                        returnedPathsType: "relative to dirPath",
+                        onFileFound: async fileRelativePath => {
+                            const sourceCode =
+                                await getUiModuleFileSourceCodeReadyToBeCopied({
+                                    buildContext,
+                                    fileRelativePath,
+                                    isForEjection: false,
+                                    uiModuleDirPath: dirPath,
+                                    uiModuleName: moduleName,
+                                    uiModuleVersion: version
+                                });
+
+                            const hash = computeHash(sourceCode);
+
+                            const copyableFilePath = pathJoin(
+                                pathDirname(cacheFilePath),
+                                KEYCLOAK_THEME,
+                                fileRelativePath
+                            );
+
+                            {
+                                const dirPath = pathDirname(copyableFilePath);
+
+                                if (!(await existsAsync(dirPath))) {
+                                    await fsPr.mkdir(dirPath, { recursive: true });
+                                }
+                            }
+
+                            fsPr.writeFile(copyableFilePath, sourceCode);
+
+                            files.push({
+                                fileRelativePath,
+                                hash,
+                                copyableFilePath
+                            });
+                        }
+                    });
+                }
+
+                return id<UiModuleMeta>({
+                    moduleName,
+                    version,
+                    files,
+                    peerDependencies
+                });
+            }
+        )
+    );
+
+    update_cache: {
+        const parsedCacheFile = id<ParsedCacheFile>({
+            keycloakifyVersion,
+            prettierConfigHash,
+            thisFilePath: cacheFilePath,
+            uiModuleMetas
+        });
+
+        const cacheContent_new = Buffer.from(
+            JSON.stringify(parsedCacheFile, null, 2),
+            "utf8"
+        );
+
+        if (cacheContent !== undefined && cacheContent_new.equals(cacheContent)) {
+            break update_cache;
+        }
+
+        create_dir: {
+            const dirPath = pathDirname(cacheFilePath);
+
+            if (await existsAsync(dirPath)) {
+                break create_dir;
+            }
+
+            await fsPr.mkdir(dirPath, { recursive: true });
+        }
+
+        await fsPr.writeFile(cacheFilePath, cacheContent_new);
+    }
+
+    return uiModuleMetas;
+}
+
+export function computeHash(data: Buffer) {
+    return crypto.createHash("sha256").update(data).digest("hex");
+}

src/bin/shared/KeycloakVersionRange.ts

@@ -3,7 +3,7 @@ export type KeycloakVersionRange =
     | KeycloakVersionRange.WithoutAccountV1Theme;
 
 export namespace KeycloakVersionRange {
-    export type WithoutAccountV1Theme = "21-and-below" | "22-and-above";
+    export type WithoutAccountV1Theme = "22-to-25" | "all-other-versions";
 
-    export type WithAccountV1Theme = "21-and-below" | "23" | "24" | "25-and-above";
+    export type WithAccountV1Theme = "21-and-below" | "23" | "24" | "25" | "26-and-above";
 }

src/bin/shared/buildContext.ts

@@ -7,7 +7,6 @@ import {
     dirname as pathDirname
 } from "path";
 import { getAbsoluteAndInOsFormatPath } from "../tools/getAbsoluteAndInOsFormatPath";
-import type { CliCommandOptions } from "../main";
 import { z } from "zod";
 import * as fs from "fs";
 import { assert, type Equals } from "tsafe/assert";
@@ -19,12 +18,12 @@ import {
 import type { KeycloakVersionRange } from "./KeycloakVersionRange";
 import { exclude } from "tsafe";
 import { crawl } from "../tools/crawl";
-import { THEME_TYPES } from "./constants";
+import { THEME_TYPES, KEYCLOAK_THEME, type ThemeType } from "./constants";
 import { objectEntries } from "tsafe/objectEntries";
-import { type ThemeType } from "./constants";
 import { id } from "tsafe/id";
 import chalk from "chalk";
-import { getProxyFetchOptions, type ProxyFetchOptions } from "../tools/fetchProxyOptions";
+import { getProxyFetchOptions, type FetchOptionsLike } from "../tools/fetchProxyOptions";
+import { is } from "tsafe/is";
 
 export type BuildContext = {
     themeVersion: string;
@@ -42,7 +41,7 @@ export type BuildContext = {
      * In this case the urlPathname will be "/my-app/" */
     urlPathname: string | undefined;
     assetsDirPath: string;
-    fetchOptions: ProxyFetchOptions;
+    fetchOptions: FetchOptionsLike;
     kcContextExclusionsFtlCode: string | undefined;
     environmentVariables: { name: string; default: string }[];
     themeSrcDirPath: string;
@@ -52,6 +51,7 @@ export type BuildContext = {
         account:
             | { isImplemented: false }
             | { isImplemented: true; type: "Single-Page" | "Multi-Page" };
+        admin: { isImplemented: boolean };
     };
     packageJsonFilePath: string;
     bundler: "vite" | "webpack";
@@ -128,14 +128,12 @@ export type ResolvedViteConfig = {
 };
 
 export function getBuildContext(params: {
-    cliCommandOptions: CliCommandOptions;
+    projectDirPath: string | undefined;
 }): BuildContext {
-    const { cliCommandOptions } = params;
-
     const projectDirPath =
-        cliCommandOptions.projectDirPath !== undefined
+        params.projectDirPath !== undefined
             ? getAbsoluteAndInOsFormatPath({
-                  pathIsh: cliCommandOptions.projectDirPath,
+                  pathIsh: params.projectDirPath,
                   cwd: process.cwd()
               })
             : process.cwd();
@@ -148,7 +146,10 @@ export function getBuildContext(params: {
             returnedPathsType: "relative to dirPath"
         })
             .map(fileRelativePath => {
-                for (const themeSrcDirBasename of ["keycloak-theme", "keycloak_theme"]) {
+                for (const themeSrcDirBasename of [
+                    KEYCLOAK_THEME,
+                    KEYCLOAK_THEME.replace(/-/g, "_")
+                ]) {
                     const split = fileRelativePath.split(themeSrcDirBasename);
                     if (split.length === 2) {
                         return pathJoin(srcDirPath, split[0] + themeSrcDirBasename);
@@ -174,7 +175,7 @@ export function getBuildContext(params: {
                 [
                     `Can't locate your Keycloak theme source directory in .${pathSep}${pathRelative(process.cwd(), srcDirPath)}`,
                     `Make sure to either use the Keycloakify CLI in the root of your Keycloakify project or use the --project CLI option`,
-                    `If you are collocating your Keycloak theme with your app you must have a directory named 'keycloak-theme' or 'keycloak_theme' in your 'src' directory`
+                    `If you are collocating your Keycloak theme with your app you must have a directory named '${KEYCLOAK_THEME}' or '${KEYCLOAK_THEME.replace(/-/g, "_")}' in your 'src' directory`
                 ].join("\n")
             )
         );
@@ -240,8 +241,7 @@ export function getBuildContext(params: {
 
             if (
                 parsedPackageJson.dependencies?.keycloakify === undefined &&
-                parsedPackageJson.devDependencies?.keycloakify === undefined &&
-                parsedPackageJson.name !== "keycloakify" // NOTE: For local storybook build
+                parsedPackageJson.devDependencies?.keycloakify === undefined
             ) {
                 break success;
             }
@@ -277,7 +277,8 @@ export function getBuildContext(params: {
                         "21-and-below": z.union([z.boolean(), z.string()]),
                         "23": z.union([z.boolean(), z.string()]),
                         "24": z.union([z.boolean(), z.string()]),
-                        "25-and-above": z.union([z.boolean(), z.string()])
+                        "25": z.union([z.boolean(), z.string()]),
+                        "26-and-above": z.union([z.boolean(), z.string()])
                     })
                     .optional()
             });
@@ -298,8 +299,8 @@ export function getBuildContext(params: {
                 ]),
                 keycloakVersionTargets: z
                     .object({
-                        "21-and-below": z.union([z.boolean(), z.string()]),
-                        "22-and-above": z.union([z.boolean(), z.string()])
+                        "22-to-25": z.union([z.boolean(), z.string()]),
+                        "all-other-versions": z.union([z.boolean(), z.string()])
                     })
                     .optional()
             });
@@ -450,7 +451,10 @@ export function getBuildContext(params: {
                 isImplemented: true,
                 type: buildOptions.accountThemeImplementation
             };
-        })()
+        })(),
+        admin: {
+            isImplemented: fs.existsSync(pathJoin(themeSrcDirPath, "admin"))
+        }
     };
 
     if (
@@ -470,26 +474,53 @@ export function getBuildContext(params: {
     }
 
     const themeNames = ((): [string, ...string[]] => {
-        if (buildOptions.themeName === undefined) {
-            return parsedPackageJson.name === undefined
-                ? ["keycloakify"]
-                : [
-                      parsedPackageJson.name
-                          .replace(/^@(.*)/, "$1")
-                          .split("/")
-                          .join("-")
-                  ];
+        const themeNames = ((): [string, ...string[]] => {
+            if (buildOptions.themeName === undefined) {
+                return parsedPackageJson.name === undefined
+                    ? ["keycloakify"]
+                    : [
+                          parsedPackageJson.name
+                              .replace(/^@(.*)/, "$1")
+                              .split("/")
+                              .join("-")
+                      ];
+            }
+
+            if (typeof buildOptions.themeName === "string") {
+                return [buildOptions.themeName];
+            }
+
+            const [mainThemeName, ...themeVariantNames] = buildOptions.themeName;
+
+            assert(mainThemeName !== undefined);
+
+            return [mainThemeName, ...themeVariantNames];
+        })();
+
+        for (const themeName of themeNames) {
+            if (!/^[a-zA-Z0-9_-]+$/.test(themeName)) {
+                console.error(
+                    chalk.red(
+                        [
+                            `Invalid theme name: ${themeName}`,
+                            `Theme names should only contain letters, numbers, and "_" or "-"`
+                        ].join(" ")
+                    )
+                );
+                process.exit(-1);
+            }
         }
 
-        if (typeof buildOptions.themeName === "string") {
-            return [buildOptions.themeName];
+        return themeNames;
+    })();
+
+    const relativePathsCwd = (() => {
+        switch (bundler) {
+            case "vite":
+                return projectDirPath;
+            case "webpack":
+                return pathDirname(packageJsonFilePath);
         }
-
-        const [mainThemeName, ...themeVariantNames] = buildOptions.themeName;
-
-        assert(mainThemeName !== undefined);
-
-        return [mainThemeName, ...themeVariantNames];
     })();
 
     const projectBuildDirPath = (() => {
@@ -503,7 +534,7 @@ export function getBuildContext(params: {
             if (parsedPackageJson.keycloakify.projectBuildDirPath !== undefined) {
                 return getAbsoluteAndInOsFormatPath({
                     pathIsh: parsedPackageJson.keycloakify.projectBuildDirPath,
-                    cwd: projectDirPath
+                    cwd: relativePathsCwd
                 });
             }
 
@@ -547,7 +578,7 @@ export function getBuildContext(params: {
             if (buildOptions.keycloakifyBuildDirPath !== undefined) {
                 return getAbsoluteAndInOsFormatPath({
                     pathIsh: buildOptions.keycloakifyBuildDirPath,
-                    cwd: projectDirPath
+                    cwd: relativePathsCwd
                 });
             }
 
@@ -576,7 +607,7 @@ export function getBuildContext(params: {
                 if (parsedPackageJson.keycloakify.publicDirPath !== undefined) {
                     return getAbsoluteAndInOsFormatPath({
                         pathIsh: parsedPackageJson.keycloakify.publicDirPath,
-                        cwd: projectDirPath
+                        cwd: relativePathsCwd
                     });
                 }
 
@@ -648,7 +679,7 @@ export function getBuildContext(params: {
                         pathIsh:
                             parsedPackageJson.keycloakify
                                 .staticDirPathInProjectBuildDirPath,
-                        cwd: projectBuildDirPath
+                        cwd: relativePathsCwd
                     });
                 }
 
@@ -749,7 +780,11 @@ export function getBuildContext(params: {
                                 return "24" as const;
                             }
 
-                            return "25-and-above" as const;
+                            if (buildForKeycloakMajorVersionNumber === 25) {
+                                return "25" as const;
+                            }
+
+                            return "26-and-above" as const;
                         })();
 
                         assert<
@@ -762,11 +797,14 @@ export function getBuildContext(params: {
                         return keycloakVersionRange;
                     } else {
                         const keycloakVersionRange = (() => {
-                            if (buildForKeycloakMajorVersionNumber <= 21) {
-                                return "21-and-below" as const;
+                            if (
+                                buildForKeycloakMajorVersionNumber <= 21 ||
+                                buildForKeycloakMajorVersionNumber >= 26
+                            ) {
+                                return "all-other-versions" as const;
                             }
 
-                            return "22-and-above" as const;
+                            return "22-to-25" as const;
                         })();
 
                         assert<
@@ -784,6 +822,12 @@ export function getBuildContext(params: {
                     use_custom_jar_basename: {
                         const { keycloakVersionTargets } = buildOptions;
 
+                        assert(
+                            is<Record<KeycloakVersionRange, string | boolean>>(
+                                keycloakVersionTargets
+                            )
+                        );
+
                         if (keycloakVersionTargets === undefined) {
                             break use_custom_jar_basename;
                         }
@@ -828,7 +872,8 @@ export function getBuildContext(params: {
                         "21-and-below",
                         "23",
                         "24",
-                        "25-and-above"
+                        "25",
+                        "26-and-above"
                     ] as const) {
                         assert<
                             Equals<
@@ -844,8 +889,8 @@ export function getBuildContext(params: {
                     }
                 } else {
                     for (const keycloakVersionRange of [
-                        "21-and-below",
-                        "22-and-above"
+                        "22-to-25",
+                        "all-other-versions"
                     ] as const) {
                         assert<
                             Equals<
@@ -871,7 +916,17 @@ export function getBuildContext(params: {
             const jarTargets: BuildContext["jarTargets"] = [];
 
             for (const [keycloakVersionRange, jarNameOrBoolean] of objectEntries(
-                buildOptions.keycloakVersionTargets
+                (() => {
+                    const { keycloakVersionTargets } = buildOptions;
+
+                    assert(
+                        is<Record<KeycloakVersionRange, string | boolean>>(
+                            keycloakVersionTargets
+                        )
+                    );
+
+                    return keycloakVersionTargets;
+                })()
             )) {
                 if (jarNameOrBoolean === false) {
                     continue;
@@ -952,7 +1007,7 @@ export function getBuildContext(params: {
                         type: "path",
                         path: getAbsoluteAndInOsFormatPath({
                             pathIsh: urlOrPath,
-                            cwd: projectDirPath
+                            cwd: relativePathsCwd
                         })
                     };
                 }
@@ -962,7 +1017,7 @@ export function getBuildContext(params: {
                     ? undefined
                     : getAbsoluteAndInOsFormatPath({
                           pathIsh: buildOptions.startKeycloakOptions.realmJsonFilePath,
-                          cwd: projectDirPath
+                          cwd: relativePathsCwd
                       }),
             port: buildOptions.startKeycloakOptions?.port
         }

src/bin/shared/constants.ts

@@ -4,7 +4,7 @@ export const WELL_KNOWN_DIRECTORY_BASE_NAME = {
     DIST: "dist"
 } as const;
 
-export const THEME_TYPES = ["login", "account"] as const;
+export const THEME_TYPES = ["login", "account", "admin"] as const;
 
 export type ThemeType = (typeof THEME_TYPES)[number];
 
@@ -71,3 +71,10 @@ export type AccountThemePageId = (typeof ACCOUNT_THEME_PAGE_IDS)[number];
 export const CONTAINER_NAME = "keycloak-keycloakify";
 
 export const FALLBACK_LANGUAGE_TAG = "en";
+
+export const CUSTOM_HANDLER_ENV_NAMES = {
+    COMMAND_NAME: "KEYCLOAKIFY_COMMAND_NAME",
+    BUILD_CONTEXT: "KEYCLOAKIFY_BUILD_CONTEXT"
+};
+
+export const KEYCLOAK_THEME = "keycloak-theme";

src/bin/shared/copyKeycloakResourcesToPublic.ts

@@ -1,95 +0,0 @@
-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 = {
-    publicDirPath: string;
-};
-
-assert<BuildContext extends BuildContextLike ? true : false>();
-
-export function copyKeycloakResourcesToPublic(params: {
-    buildContext: BuildContextLike;
-}) {
-    const { buildContext } = params;
-
-    const destDirPath = pathJoin(
-        buildContext.publicDirPath,
-        WELL_KNOWN_DIRECTORY_BASE_NAME.KEYCLOAKIFY_DEV_RESOURCES
-    );
-
-    const keycloakifyBuildinfoFilePath = pathJoin(destDirPath, "keycloakify.buildinfo");
-
-    const keycloakifyBuildinfoRaw = JSON.stringify(
-        {
-            keycloakifyVersion: readThisNpmPackageVersion()
-        },
-        null,
-        2
-    );
-
-    skip_if_already_done: {
-        if (!fs.existsSync(keycloakifyBuildinfoFilePath)) {
-            break skip_if_already_done;
-        }
-
-        const keycloakifyBuildinfoRaw_previousRun = fs
-            .readFileSync(keycloakifyBuildinfoFilePath)
-            .toString("utf8");
-
-        if (keycloakifyBuildinfoRaw_previousRun !== keycloakifyBuildinfoRaw) {
-            break skip_if_already_done;
-        }
-
-        return;
-    }
-
-    rmSync(destDirPath, { force: true, recursive: true });
-
-    // 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"));
-
-    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 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")
-        )
-    );
-
-    fs.writeFileSync(
-        keycloakifyBuildinfoFilePath,
-        Buffer.from(keycloakifyBuildinfoRaw, "utf8")
-    );
-}

src/bin/shared/customHandler.ts

@@ -0,0 +1,42 @@
+import { assert } from "tsafe/assert";
+import type { BuildContext } from "./buildContext";
+import { CUSTOM_HANDLER_ENV_NAMES } from "./constants";
+
+export const BIN_NAME = "_keycloakify-custom-handler";
+
+export const NOT_IMPLEMENTED_EXIT_CODE = 78;
+
+export type CommandName =
+    | "update-kc-gen"
+    | "eject-page"
+    | "add-story"
+    | "initialize-account-theme"
+    | "initialize-admin-theme"
+    | "initialize-email-theme"
+    | "copy-keycloak-resources-to-public";
+
+export type ApiVersion = "v1";
+
+export function readParams(params: { apiVersion: ApiVersion }) {
+    const { apiVersion } = params;
+
+    assert(apiVersion === "v1");
+
+    const commandName = (() => {
+        const envValue = process.env[CUSTOM_HANDLER_ENV_NAMES.COMMAND_NAME];
+
+        assert(envValue !== undefined);
+
+        return envValue as CommandName;
+    })();
+
+    const buildContext = (() => {
+        const envValue = process.env[CUSTOM_HANDLER_ENV_NAMES.BUILD_CONTEXT];
+
+        assert(envValue !== undefined);
+
+        return JSON.parse(envValue) as BuildContext;
+    })();
+
+    return { commandName, buildContext };
+}

src/bin/shared/customHandler_delegate.ts

@@ -0,0 +1,48 @@
+import { assert, type Equals } from "tsafe/assert";
+import type { BuildContext } from "./buildContext";
+import { CUSTOM_HANDLER_ENV_NAMES } from "./constants";
+import {
+    NOT_IMPLEMENTED_EXIT_CODE,
+    type CommandName,
+    BIN_NAME,
+    ApiVersion
+} from "./customHandler";
+import * as child_process from "child_process";
+import { getNodeModulesBinDirPath } from "../tools/nodeModulesBinDirPath";
+import * as fs from "fs";
+
+assert<Equals<ApiVersion, "v1">>();
+
+export function maybeDelegateCommandToCustomHandler(params: {
+    commandName: CommandName;
+    buildContext: BuildContext;
+}): { hasBeenHandled: boolean } {
+    const { commandName, buildContext } = params;
+
+    const nodeModulesBinDirPath = getNodeModulesBinDirPath();
+
+    if (!fs.readdirSync(nodeModulesBinDirPath).includes(BIN_NAME)) {
+        return { hasBeenHandled: false };
+    }
+
+    try {
+        child_process.execSync(`npx ${BIN_NAME}`, {
+            stdio: "inherit",
+            env: {
+                ...process.env,
+                [CUSTOM_HANDLER_ENV_NAMES.COMMAND_NAME]: commandName,
+                [CUSTOM_HANDLER_ENV_NAMES.BUILD_CONTEXT]: JSON.stringify(buildContext)
+            }
+        });
+    } catch (error: any) {
+        const status = error.status;
+
+        if (status === NOT_IMPLEMENTED_EXIT_CODE) {
+            return { hasBeenHandled: false };
+        }
+
+        process.exit(status);
+    }
+
+    return { hasBeenHandled: true };
+}

src/bin/shared/exitIfUncommittedChanges.ts

@@ -0,0 +1,36 @@
+import child_process from "child_process";
+import chalk from "chalk";
+
+export function exitIfUncommittedChanges(params: { projectDirPath: string }) {
+    const { projectDirPath } = params;
+
+    let hasUncommittedChanges: boolean | undefined = undefined;
+
+    try {
+        hasUncommittedChanges =
+            child_process
+                .execSync(`git status --porcelain`, {
+                    cwd: projectDirPath
+                })
+                .toString()
+                .trim() !== "";
+    } catch {
+        // Probably not a git repository
+        return;
+    }
+
+    if (!hasUncommittedChanges) {
+        return;
+    }
+    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);
+}

src/bin/shared/generateKcGenTs.ts

@@ -1,175 +0,0 @@
-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>();
-
-export async function generateKcGenTs(params: {
-    buildContext: BuildContextLike;
-}): Promise<void> {
-    const { buildContext } = params;
-
-    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 */`,
-            ``,
-            `/* eslint-disable */`,
-            ``,
-            `// @ts-nocheck`,
-            ``,
-            `// noinspection JSUnusedGlobalSymbols`,
-            ``,
-            `// 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(", ")}];`,
-            ``,
-            `export type KcEnvName = ${buildContext.environmentVariables.length === 0 ? "never" : buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(" | ")};`,
-            ``,
-            `export const kcEnvNames: KcEnvName[] = [${buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(", ")}];`,
-            ``,
-            `export const kcEnvDefaults: Record<KcEnvName, string> = ${JSON.stringify(
-                Object.fromEntries(
-                    buildContext.environmentVariables.map(
-                        ({ name, default: defaultValue }) => [name, defaultValue]
-                    )
-                ),
-                null,
-                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 */`,
-            ``
-        ]
-            .filter(item => typeof item === "string")
-            .join("\n"),
-        "utf8"
-    );
-
-    if (currentContent !== undefined && currentContent.equals(newContent)) {
-        return;
-    }
-
-    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/start-keycloak/start-keycloak.ts

@@ -1,6 +1,5 @@
-import { getBuildContext } from "../shared/buildContext";
+import type { BuildContext } from "../shared/buildContext";
 import { exclude } from "tsafe/exclude";
-import type { CliCommandOptions as CliCommandOptions_common } from "../main";
 import { promptKeycloakVersion } from "../shared/promptKeycloakVersion";
 import { CONTAINER_NAME } from "../shared/constants";
 import { SemVer } from "../tools/SemVer";
@@ -29,13 +28,14 @@ import { existsAsync } from "../tools/fs.existsAsync";
 import { rm } from "../tools/fs.rm";
 import { downloadAndExtractArchive } from "../tools/downloadAndExtractArchive";
 
-export type CliCommandOptions = CliCommandOptions_common & {
-    port: number | undefined;
-    keycloakVersion: string | undefined;
-    realmJsonFilePath: string | undefined;
-};
-
-export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+export async function command(params: {
+    buildContext: BuildContext;
+    cliCommandOptions: {
+        port: number | undefined;
+        keycloakVersion: string | undefined;
+        realmJsonFilePath: string | undefined;
+    };
+}) {
     exit_if_docker_not_installed: {
         let commandOutput: string | undefined = undefined;
 
@@ -88,9 +88,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         process.exit(1);
     }
 
-    const { cliCommandOptions } = params;
-
-    const buildContext = getBuildContext({ cliCommandOptions });
+    const { cliCommandOptions, buildContext } = params;
 
     const { dockerImageTag } = await (async () => {
         if (cliCommandOptions.keycloakVersion !== undefined) {
@@ -398,12 +396,12 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
         ...(realmJsonFilePath === undefined
             ? []
             : [
-                  `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), realmJsonFilePath)}":/opt/keycloak/data/import/myrealm-realm.json`
+                  `-v${SPACE_PLACEHOLDER}"${realmJsonFilePath}":/opt/keycloak/data/import/myrealm-realm.json`
               ]),
-        `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), jarFilePath_cacheDir)}":/opt/keycloak/providers/keycloak-theme.jar`,
+        `-v${SPACE_PLACEHOLDER}"${jarFilePath_cacheDir}":/opt/keycloak/providers/keycloak-theme.jar`,
         ...extensionJarFilePaths.map(
             jarFilePath =>
-                `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), jarFilePath)}":/opt/keycloak/providers/${pathBasename(jarFilePath)}`
+                `-v${SPACE_PLACEHOLDER}"${jarFilePath}":/opt/keycloak/providers/${pathBasename(jarFilePath)}`
         ),
         ...(keycloakMajorVersionNumber <= 20
             ? [`-e${SPACE_PLACEHOLDER}JAVA_OPTS=-Dkeycloak.profile=preview`]
@@ -426,7 +424,7 @@ export async function command(params: { cliCommandOptions: CliCommandOptions })
             }))
             .map(
                 ({ localDirPath, containerDirPath }) =>
-                    `-v${SPACE_PLACEHOLDER}".${pathSep}${pathRelative(process.cwd(), localDirPath)}":${containerDirPath}:rw`
+                    `-v${SPACE_PLACEHOLDER}"${localDirPath}":${containerDirPath}:rw`
             ),
         ...buildContext.environmentVariables
             .map(({ name }) => ({ name, envValue: process.env[name] }))

src/bin/tools/crawlAsync.ts

@@ -0,0 +1,51 @@
+import * as fsPr from "fs/promises";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { assert, type Equals } from "tsafe/assert";
+
+/** List all files in a given directory return paths relative to the dir_path */
+export async function crawlAsync(params: {
+    dirPath: string;
+    returnedPathsType: "absolute" | "relative to dirPath";
+    onFileFound: (filePath: string) => void;
+}) {
+    const { dirPath, returnedPathsType, onFileFound } = params;
+
+    await crawlAsyncRec({
+        dirPath,
+        onFileFound: ({ filePath }) => {
+            switch (returnedPathsType) {
+                case "absolute":
+                    onFileFound(filePath);
+                    return;
+                case "relative to dirPath":
+                    onFileFound(pathRelative(dirPath, filePath));
+                    return;
+            }
+            assert<Equals<typeof returnedPathsType, never>>();
+        }
+    });
+}
+
+async function crawlAsyncRec(params: {
+    dirPath: string;
+    onFileFound: (params: { filePath: string }) => void;
+}) {
+    const { dirPath, onFileFound } = params;
+
+    await Promise.all(
+        (await fsPr.readdir(dirPath)).map(async basename => {
+            const fileOrDirPath = pathJoin(dirPath, basename);
+
+            const isDirectory = await fsPr
+                .lstat(fileOrDirPath)
+                .then(stat => stat.isDirectory());
+
+            if (isDirectory) {
+                await crawlAsyncRec({ dirPath: fileOrDirPath, onFileFound });
+                return;
+            }
+
+            onFileFound({ filePath: fileOrDirPath });
+        })
+    );
+}

src/bin/tools/fetchProxyOptions.ts

@@ -1,16 +1,18 @@
-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 type FetchOptionsLike = {
+    proxy: string | undefined;
+    noProxy: string | string[];
+    strictSSL: boolean;
+    cert: string | string[] | undefined;
+    ca: string[] | undefined;
+};
 
 export function getProxyFetchOptions(params: {
     npmConfigGetCwd: string;
-}): ProxyFetchOptions {
+}): FetchOptionsLike {
     const { npmConfigGetCwd } = params;
 
     const cfg = (() => {

src/bin/tools/getInstalledModuleDirPath.ts

@@ -0,0 +1,51 @@
+import { join as pathJoin } from "path";
+import { existsAsync } from "./fs.existsAsync";
+import * as child_process from "child_process";
+import { assert } from "tsafe/assert";
+
+export async function getInstalledModuleDirPath(params: {
+    moduleName: string;
+    packageJsonDirPath: string;
+    projectDirPath: string;
+}) {
+    const { moduleName, packageJsonDirPath, projectDirPath } = params;
+
+    common_case: {
+        const dirPath = pathJoin(
+            ...[packageJsonDirPath, "node_modules", ...moduleName.split("/")]
+        );
+
+        if (!(await existsAsync(dirPath))) {
+            break common_case;
+        }
+
+        return dirPath;
+    }
+
+    node_modules_at_root_case: {
+        if (projectDirPath === packageJsonDirPath) {
+            break node_modules_at_root_case;
+        }
+
+        const dirPath = pathJoin(
+            ...[projectDirPath, "node_modules", ...moduleName.split("/")]
+        );
+
+        if (!(await existsAsync(dirPath))) {
+            break node_modules_at_root_case;
+        }
+
+        return dirPath;
+    }
+
+    const dirPath = child_process
+        .execSync(`npm list ${moduleName}`, {
+            cwd: packageJsonDirPath
+        })
+        .toString("utf8")
+        .trim();
+
+    assert(dirPath !== "");
+
+    return dirPath;
+}

src/bin/tools/listInstalledModules.ts

@@ -0,0 +1,131 @@
+import { assert, type Equals } from "tsafe/assert";
+import { id } from "tsafe/id";
+import { z } from "zod";
+import { join as pathJoin, dirname as pathDirname } from "path";
+import * as fsPr from "fs/promises";
+import { is } from "tsafe/is";
+import { getInstalledModuleDirPath } from "../tools/getInstalledModuleDirPath";
+import { exclude } from "tsafe/exclude";
+
+export async function listInstalledModules(params: {
+    packageJsonFilePath: string;
+    projectDirPath: string;
+    filter: (params: { moduleName: string }) => boolean;
+}): Promise<
+    {
+        moduleName: string;
+        version: string;
+        dirPath: string;
+        peerDependencies: Record<string, string>;
+    }[]
+> {
+    const { packageJsonFilePath, projectDirPath, filter } = params;
+
+    const parsedPackageJson = await readPackageJsonDependencies({
+        packageJsonFilePath
+    });
+
+    const uiModuleNames = (
+        [parsedPackageJson.dependencies, parsedPackageJson.devDependencies] as const
+    )
+        .filter(exclude(undefined))
+        .map(obj => Object.keys(obj))
+        .flat()
+        .filter(moduleName => filter({ moduleName }));
+
+    const result = await Promise.all(
+        uiModuleNames.map(async moduleName => {
+            const dirPath = await getInstalledModuleDirPath({
+                moduleName,
+                packageJsonDirPath: pathDirname(packageJsonFilePath),
+                projectDirPath
+            });
+
+            const { version, peerDependencies } =
+                await readPackageJsonVersionAndPeerDependencies({
+                    packageJsonFilePath: pathJoin(dirPath, "package.json")
+                });
+
+            return { moduleName, version, peerDependencies, dirPath } as const;
+        })
+    );
+
+    return result;
+}
+
+const { readPackageJsonDependencies } = (() => {
+    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);
+    })();
+
+    async function readPackageJsonDependencies(params: { packageJsonFilePath: string }) {
+        const { packageJsonFilePath } = params;
+
+        const parsedPackageJson = JSON.parse(
+            (await fsPr.readFile(packageJsonFilePath)).toString("utf8")
+        );
+
+        zParsedPackageJson.parse(parsedPackageJson);
+
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return parsedPackageJson;
+    }
+
+    return { readPackageJsonDependencies };
+})();
+
+const { readPackageJsonVersionAndPeerDependencies } = (() => {
+    type ParsedPackageJson = {
+        version: string;
+        peerDependencies?: Record<string, string>;
+    };
+
+    const zParsedPackageJson = (() => {
+        type TargetType = ParsedPackageJson;
+
+        const zTargetType = z.object({
+            version: z.string(),
+            peerDependencies: z.record(z.string()).optional()
+        });
+
+        assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+        return id<z.ZodType<TargetType>>(zTargetType);
+    })();
+
+    async function readPackageJsonVersionAndPeerDependencies(params: {
+        packageJsonFilePath: string;
+    }): Promise<{ version: string; peerDependencies: Record<string, string> }> {
+        const { packageJsonFilePath } = params;
+
+        const parsedPackageJson = JSON.parse(
+            (await fsPr.readFile(packageJsonFilePath)).toString("utf8")
+        );
+
+        zParsedPackageJson.parse(parsedPackageJson);
+
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return {
+            version: parsedPackageJson.version,
+            peerDependencies: parsedPackageJson.peerDependencies ?? {}
+        };
+    }
+
+    return { readPackageJsonVersionAndPeerDependencies };
+})();

src/bin/tools/nodeModulesBinDirPath.ts

@@ -0,0 +1,38 @@
+import { sep as pathSep } from "path";
+
+let cache: string | undefined = undefined;
+
+export function getNodeModulesBinDirPath() {
+    if (cache !== undefined) {
+        return cache;
+    }
+
+    const binPath = process.argv[1];
+
+    const segments: string[] = [".bin"];
+
+    let foundNodeModules = false;
+
+    for (const segment of binPath.split(pathSep).reverse()) {
+        skip_segment: {
+            if (foundNodeModules) {
+                break skip_segment;
+            }
+
+            if (segment === "node_modules") {
+                foundNodeModules = true;
+                break skip_segment;
+            }
+
+            continue;
+        }
+
+        segments.unshift(segment);
+    }
+
+    const nodeModulesBinDirPath = segments.join(pathSep);
+
+    cache = nodeModulesBinDirPath;
+
+    return nodeModulesBinDirPath;
+}

src/bin/tools/npmInstall.ts

@@ -1,7 +1,15 @@
 import * as fs from "fs";
-import { join as pathJoin } from "path";
+import { join as pathJoin, dirname as pathDirname } from "path";
 import * as child_process from "child_process";
 import chalk from "chalk";
+import { z } from "zod";
+import { assert, type Equals } from "tsafe/assert";
+import { id } from "tsafe/id";
+import { is } from "tsafe/is";
+import { objectKeys } from "tsafe/objectKeys";
+import { getAbsoluteAndInOsFormatPath } from "./getAbsoluteAndInOsFormatPath";
+import { exclude } from "tsafe/exclude";
+import { rmSync } from "./fs.rmSync";
 
 export function npmInstall(params: { packageJsonDirPath: string }) {
     const { packageJsonDirPath } = params;
@@ -23,6 +31,10 @@ export function npmInstall(params: { packageJsonDirPath: string }) {
             {
                 binName: "bun",
                 lockFileBasename: "bun.lockdb"
+            },
+            {
+                binName: "deno",
+                lockFileBasename: "deno.lock"
             }
         ] as const;
 
@@ -37,27 +49,411 @@ export function npmInstall(params: { packageJsonDirPath: string }) {
             }
         }
 
-        return undefined;
+        throw new Error(
+            "No lock file found, cannot tell which package manager to use for installing dependencies."
+        );
     })();
 
-    install_dependencies: {
-        if (packageManagerBinName === undefined) {
-            break install_dependencies;
+    console.log(`Installing the new dependencies...`);
+
+    install_without_breaking_links: {
+        if (packageManagerBinName !== "yarn") {
+            break install_without_breaking_links;
         }
 
-        console.log(`Installing the new dependencies...`);
+        const garronejLinkInfos = getGarronejLinkInfos({ packageJsonDirPath });
 
-        try {
-            child_process.execSync(`${packageManagerBinName} install`, {
-                cwd: packageJsonDirPath,
-                stdio: "inherit"
-            });
-        } catch {
-            console.log(
-                chalk.yellow(
-                    `\`${packageManagerBinName} install\` failed, continuing anyway...`
-                )
-            );
+        if (garronejLinkInfos === undefined) {
+            break install_without_breaking_links;
         }
+
+        console.log(chalk.green("Installing in a way that won't break the links..."));
+
+        installWithoutBreakingLinks({
+            packageJsonDirPath,
+            garronejLinkInfos
+        });
+
+        return;
+    }
+
+    try {
+        child_process.execSync(`${packageManagerBinName} install`, {
+            cwd: packageJsonDirPath,
+            stdio: "inherit"
+        });
+    } catch {
+        console.log(
+            chalk.yellow(
+                `\`${packageManagerBinName} install\` failed, continuing anyway...`
+            )
+        );
+    }
+}
+
+function getGarronejLinkInfos(params: {
+    packageJsonDirPath: string;
+}): { linkedModuleNames: string[]; yarnHomeDirPath: string } | undefined {
+    const { packageJsonDirPath } = params;
+
+    const nodeModuleDirPath = pathJoin(packageJsonDirPath, "node_modules");
+
+    if (!fs.existsSync(nodeModuleDirPath)) {
+        return undefined;
+    }
+
+    const linkedModuleNames: string[] = [];
+
+    let yarnHomeDirPath: string | undefined = undefined;
+
+    const getIsLinkedByGarronejScript = (path: string) => {
+        let realPath: string;
+
+        try {
+            realPath = fs.readlinkSync(path);
+        } catch {
+            return false;
+        }
+
+        const doesIncludeYarnHome = realPath.includes(".yarn_home");
+
+        if (!doesIncludeYarnHome) {
+            return false;
+        }
+
+        set_yarnHomeDirPath: {
+            if (yarnHomeDirPath !== undefined) {
+                break set_yarnHomeDirPath;
+            }
+
+            const [firstElement] = getAbsoluteAndInOsFormatPath({
+                pathIsh: realPath,
+                cwd: pathDirname(path)
+            }).split(".yarn_home");
+
+            yarnHomeDirPath = pathJoin(firstElement, ".yarn_home");
+        }
+
+        return true;
+    };
+
+    for (const basename of fs.readdirSync(nodeModuleDirPath)) {
+        const path = pathJoin(nodeModuleDirPath, basename);
+
+        if (fs.lstatSync(path).isSymbolicLink()) {
+            if (basename.startsWith("@")) {
+                return undefined;
+            }
+
+            if (!getIsLinkedByGarronejScript(path)) {
+                return undefined;
+            }
+
+            linkedModuleNames.push(basename);
+            continue;
+        }
+
+        if (!fs.lstatSync(path).isDirectory()) {
+            continue;
+        }
+
+        if (basename.startsWith("@")) {
+            for (const subBasename of fs.readdirSync(path)) {
+                const subPath = pathJoin(path, subBasename);
+
+                if (!fs.lstatSync(subPath).isSymbolicLink()) {
+                    continue;
+                }
+
+                if (!getIsLinkedByGarronejScript(subPath)) {
+                    return undefined;
+                }
+
+                linkedModuleNames.push(`${basename}/${subBasename}`);
+            }
+        }
+    }
+
+    if (yarnHomeDirPath === undefined) {
+        return undefined;
+    }
+
+    return { linkedModuleNames, yarnHomeDirPath };
+}
+
+function installWithoutBreakingLinks(params: {
+    packageJsonDirPath: string;
+    garronejLinkInfos: Exclude<ReturnType<typeof getGarronejLinkInfos>, undefined>;
+}) {
+    const {
+        packageJsonDirPath,
+        garronejLinkInfos: { linkedModuleNames, yarnHomeDirPath }
+    } = params;
+
+    const parsedPackageJson = (() => {
+        const packageJsonFilePath = pathJoin(packageJsonDirPath, "package.json");
+
+        type ParsedPackageJson = {
+            scripts?: Record<string, string>;
+        };
+
+        const zParsedPackageJson = (() => {
+            type TargetType = ParsedPackageJson;
+
+            const zTargetType = z.object({
+                scripts: z.record(z.string()).optional()
+            });
+
+            type InferredType = z.infer<typeof zTargetType>;
+
+            assert<Equals<TargetType, InferredType>>;
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+        })();
+
+        const parsedPackageJson = JSON.parse(
+            fs.readFileSync(packageJsonFilePath).toString("utf8")
+        ) as unknown;
+
+        zParsedPackageJson.parse(parsedPackageJson);
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return parsedPackageJson;
+    })();
+
+    const isImplementedScriptByName = {
+        postinstall: false,
+        prepare: false
+    };
+
+    delete_postinstall_script: {
+        if (parsedPackageJson.scripts === undefined) {
+            break delete_postinstall_script;
+        }
+
+        for (const scriptName of objectKeys(isImplementedScriptByName)) {
+            if (parsedPackageJson.scripts[scriptName] === undefined) {
+                continue;
+            }
+
+            isImplementedScriptByName[scriptName] = true;
+
+            delete parsedPackageJson.scripts[scriptName];
+        }
+    }
+
+    const tmpProjectDirPath = pathJoin(yarnHomeDirPath, "tmpProject");
+
+    if (fs.existsSync(tmpProjectDirPath)) {
+        rmSync(tmpProjectDirPath, { recursive: true });
+    }
+
+    fs.mkdirSync(tmpProjectDirPath, { recursive: true });
+
+    fs.writeFileSync(
+        pathJoin(tmpProjectDirPath, "package.json"),
+        JSON.stringify(parsedPackageJson, undefined, 4)
+    );
+
+    const YARN_LOCK = "yarn.lock";
+
+    fs.copyFileSync(
+        pathJoin(packageJsonDirPath, YARN_LOCK),
+        pathJoin(tmpProjectDirPath, YARN_LOCK)
+    );
+
+    child_process.execSync(`yarn install`, {
+        cwd: tmpProjectDirPath,
+        stdio: "inherit"
+    });
+
+    // NOTE: Moving the modules from the tmp project to the actual project
+    // without messing up the links.
+    {
+        const { getAreSameVersions } = (() => {
+            type ParsedPackageJson = {
+                version: string;
+            };
+
+            const zParsedPackageJson = (() => {
+                type TargetType = ParsedPackageJson;
+
+                const zTargetType = z.object({
+                    version: z.string()
+                });
+
+                type InferredType = z.infer<typeof zTargetType>;
+
+                assert<Equals<TargetType, InferredType>>;
+
+                return id<z.ZodType<TargetType>>(zTargetType);
+            })();
+
+            function readVersion(params: { moduleDirPath: string }): string {
+                const { moduleDirPath } = params;
+
+                const packageJsonFilePath = pathJoin(moduleDirPath, "package.json");
+
+                const packageJson = JSON.parse(
+                    fs.readFileSync(packageJsonFilePath).toString("utf8")
+                );
+
+                zParsedPackageJson.parse(packageJson);
+                assert(is<ParsedPackageJson>(packageJson));
+
+                return packageJson.version;
+            }
+
+            function getAreSameVersions(params: {
+                moduleDirPath_a: string;
+                moduleDirPath_b: string;
+            }): boolean {
+                const { moduleDirPath_a, moduleDirPath_b } = params;
+
+                return (
+                    readVersion({ moduleDirPath: moduleDirPath_a }) ===
+                    readVersion({ moduleDirPath: moduleDirPath_b })
+                );
+            }
+
+            return { getAreSameVersions };
+        })();
+
+        const nodeModulesDirPath_tmpProject = pathJoin(tmpProjectDirPath, "node_modules");
+        const nodeModulesDirPath = pathJoin(packageJsonDirPath, "node_modules");
+
+        const modulePaths = fs
+            .readdirSync(nodeModulesDirPath_tmpProject)
+            .map(basename => {
+                if (basename.startsWith(".")) {
+                    return undefined;
+                }
+
+                const path = pathJoin(nodeModulesDirPath_tmpProject, basename);
+
+                if (basename.startsWith("@")) {
+                    return fs
+                        .readdirSync(path)
+                        .map(subBasename => {
+                            if (subBasename.startsWith(".")) {
+                                return undefined;
+                            }
+
+                            const subPath = pathJoin(path, subBasename);
+
+                            if (!fs.lstatSync(subPath).isDirectory()) {
+                                return undefined;
+                            }
+
+                            return {
+                                moduleName: `${basename}/${subBasename}`,
+                                moduleDirPath_tmpProject: subPath,
+                                moduleDirPath: pathJoin(
+                                    nodeModulesDirPath,
+                                    basename,
+                                    subBasename
+                                )
+                            };
+                        })
+                        .filter(exclude(undefined));
+                }
+
+                if (!fs.lstatSync(path).isDirectory()) {
+                    return undefined;
+                }
+
+                return [
+                    {
+                        moduleName: basename,
+                        moduleDirPath_tmpProject: path,
+                        moduleDirPath: pathJoin(nodeModulesDirPath, basename)
+                    }
+                ];
+            })
+            .filter(exclude(undefined))
+            .flat();
+
+        for (const {
+            moduleName,
+            moduleDirPath,
+            moduleDirPath_tmpProject
+        } of modulePaths) {
+            if (linkedModuleNames.includes(moduleName)) {
+                continue;
+            }
+
+            let doesTargetModuleExist = false;
+
+            skip_condition: {
+                if (!fs.existsSync(moduleDirPath)) {
+                    break skip_condition;
+                }
+
+                doesTargetModuleExist = true;
+
+                const areSameVersions = getAreSameVersions({
+                    moduleDirPath_a: moduleDirPath,
+                    moduleDirPath_b: moduleDirPath_tmpProject
+                });
+
+                if (!areSameVersions) {
+                    break skip_condition;
+                }
+
+                continue;
+            }
+
+            if (doesTargetModuleExist) {
+                rmSync(moduleDirPath, { recursive: true });
+            }
+
+            {
+                const dirPath = pathDirname(moduleDirPath);
+
+                if (!fs.existsSync(dirPath)) {
+                    fs.mkdirSync(dirPath, { recursive: true });
+                }
+            }
+
+            fs.renameSync(moduleDirPath_tmpProject, moduleDirPath);
+        }
+
+        move_bin: {
+            const binDirPath_tmpProject = pathJoin(nodeModulesDirPath_tmpProject, ".bin");
+            const binDirPath = pathJoin(nodeModulesDirPath, ".bin");
+
+            if (!fs.existsSync(binDirPath_tmpProject)) {
+                break move_bin;
+            }
+
+            for (const basename of fs.readdirSync(binDirPath_tmpProject)) {
+                const path_tmpProject = pathJoin(binDirPath_tmpProject, basename);
+                const path = pathJoin(binDirPath, basename);
+
+                if (fs.existsSync(path)) {
+                    continue;
+                }
+
+                fs.renameSync(path_tmpProject, path);
+            }
+        }
+    }
+
+    fs.cpSync(
+        pathJoin(tmpProjectDirPath, YARN_LOCK),
+        pathJoin(packageJsonDirPath, YARN_LOCK)
+    );
+
+    rmSync(tmpProjectDirPath, { recursive: true });
+
+    for (const scriptName of objectKeys(isImplementedScriptByName)) {
+        if (!isImplementedScriptByName[scriptName]) {
+            continue;
+        }
+
+        child_process.execSync(`yarn run ${scriptName}`, {
+            cwd: packageJsonDirPath,
+            stdio: "inherit"
+        });
     }
 }

src/bin/tools/readThisNpmPackageVersion.ts

@@ -3,7 +3,13 @@ import { assert } from "tsafe/assert";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
 
+let cache: string | undefined = undefined;
+
 export function readThisNpmPackageVersion(): string {
+    if (cache !== undefined) {
+        return cache;
+    }
+
     const version = JSON.parse(
         fs
             .readFileSync(pathJoin(getThisCodebaseRootDirPath(), "package.json"))
@@ -12,5 +18,7 @@ export function readThisNpmPackageVersion(): string {
 
     assert(typeof version === "string");
 
+    cache = version;
+
     return version;
 }

src/bin/tools/runFormat.ts

@@ -0,0 +1,76 @@
+import * as fs from "fs";
+import { dirname as pathDirname } from "path";
+import { assert, Equals } from "tsafe/assert";
+import chalk from "chalk";
+import { id } from "tsafe/id";
+import { z } from "zod";
+import { is } from "tsafe/is";
+import * as child_process from "child_process";
+
+export function runFormat(params: { packageJsonFilePath: string }) {
+    const { packageJsonFilePath } = params;
+
+    const parsedPackageJson = (() => {
+        type ParsedPackageJson = {
+            scripts?: Record<string, string>;
+        };
+
+        const zParsedPackageJson = (() => {
+            type TargetType = ParsedPackageJson;
+
+            const zTargetType = z.object({
+                scripts: z.record(z.string()).optional()
+            });
+
+            assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+        })();
+
+        const parsedPackageJson = JSON.parse(
+            fs.readFileSync(packageJsonFilePath).toString("utf8")
+        );
+
+        zParsedPackageJson.parse(parsedPackageJson);
+
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return parsedPackageJson;
+    })();
+
+    const { scripts } = parsedPackageJson;
+
+    if (scripts === undefined) {
+        return;
+    }
+
+    const scriptKeys = Object.keys(scripts);
+    const scriptNames = scriptKeys.filter(scriptKey =>
+        scriptKey.trim().match(/^(lint|format)/)
+    );
+
+    for (const scriptName of scriptNames) {
+        if (!(scriptName in scripts)) {
+            continue;
+        }
+
+        const command = `npm run ${scriptName}`;
+
+        console.log(chalk.grey(`$ ${command}`));
+
+        try {
+            child_process.execSync(`npm run ${scriptName}`, {
+                stdio: "inherit",
+                cwd: pathDirname(packageJsonFilePath)
+            });
+        } catch {
+            console.log(
+                chalk.yellow(
+                    `\`${command}\` failed, it does not matter, please format your code manually, continuing...`
+                )
+            );
+        }
+
+        return;
+    }
+}

src/bin/tools/runPrettier.ts

@@ -0,0 +1,106 @@
+import { getNodeModulesBinDirPath } from "./nodeModulesBinDirPath";
+import { join as pathJoin } from "path";
+import * as fsPr from "fs/promises";
+import { id } from "tsafe/id";
+import { assert } from "tsafe/assert";
+import chalk from "chalk";
+import * as crypto from "crypto";
+
+getIsPrettierAvailable.cache = id<boolean | undefined>(undefined);
+
+export async function getIsPrettierAvailable(): Promise<boolean> {
+    if (getIsPrettierAvailable.cache !== undefined) {
+        return getIsPrettierAvailable.cache;
+    }
+
+    const nodeModulesBinDirPath = getNodeModulesBinDirPath();
+
+    const prettierBinPath = pathJoin(nodeModulesBinDirPath, "prettier");
+
+    const stats = await fsPr.stat(prettierBinPath).catch(() => undefined);
+
+    const isPrettierAvailable = stats?.isFile() ?? false;
+
+    getIsPrettierAvailable.cache = isPrettierAvailable;
+
+    return isPrettierAvailable;
+}
+
+type PrettierAndConfigHash = {
+    prettier: typeof import("prettier");
+    configHash: string;
+};
+
+getPrettier.cache = id<PrettierAndConfigHash | undefined>(undefined);
+
+export async function getPrettier(): Promise<PrettierAndConfigHash> {
+    assert(getIsPrettierAvailable());
+
+    if (getPrettier.cache !== undefined) {
+        return getPrettier.cache;
+    }
+
+    const prettier = await import("prettier");
+
+    const configHash = await (async () => {
+        const configFilePath = await prettier.resolveConfigFile(
+            pathJoin(getNodeModulesBinDirPath(), "..")
+        );
+
+        if (configFilePath === null) {
+            return "";
+        }
+
+        const data = await fsPr.readFile(configFilePath);
+
+        return crypto.createHash("sha256").update(data).digest("hex");
+    })();
+
+    const prettierAndConfig: PrettierAndConfigHash = {
+        prettier,
+        configHash
+    };
+
+    getPrettier.cache = prettierAndConfig;
+
+    return prettierAndConfig;
+}
+
+export async function runPrettier(params: {
+    sourceCode: string;
+    filePath: string;
+}): Promise<string> {
+    const { sourceCode, filePath } = params;
+
+    let formattedSourceCode: string;
+
+    try {
+        const { prettier } = await getPrettier();
+
+        const { ignored, inferredParser } = await prettier.getFileInfo(filePath, {
+            resolveConfig: true
+        });
+
+        if (ignored) {
+            return sourceCode;
+        }
+
+        const config = await prettier.resolveConfig(filePath);
+
+        formattedSourceCode = await prettier.format(sourceCode, {
+            ...config,
+            filePath,
+            parser: inferredParser ?? undefined
+        });
+    } catch (error) {
+        console.log(
+            chalk.red(
+                `You probably need to upgrade the version of prettier in your project`
+            )
+        );
+
+        throw error;
+    }
+
+    return formattedSourceCode;
+}

src/bin/update-kc-gen.ts

@@ -1,13 +1,146 @@
-import type { CliCommandOptions } from "./main";
-import { getBuildContext } from "./shared/buildContext";
-import { generateKcGenTs } from "./shared/generateKcGenTs";
+import type { BuildContext } from "./shared/buildContext";
+import * as fs from "fs/promises";
+import { join as pathJoin } from "path";
+import { existsAsync } from "./tools/fs.existsAsync";
+import { maybeDelegateCommandToCustomHandler } from "./shared/customHandler_delegate";
+import * as crypto from "crypto";
+import { getIsPrettierAvailable, runPrettier } from "./tools/runPrettier";
 
-export async function command(params: { cliCommandOptions: CliCommandOptions }) {
-    const { cliCommandOptions } = params;
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
 
-    const buildContext = getBuildContext({
-        cliCommandOptions
+    const { hasBeenHandled } = maybeDelegateCommandToCustomHandler({
+        commandName: "update-kc-gen",
+        buildContext
     });
 
-    await generateKcGenTs({ buildContext });
+    if (hasBeenHandled) {
+        return;
+    }
+
+    const filePath = pathJoin(buildContext.themeSrcDirPath, "kc.gen.tsx");
+
+    const hasLoginTheme = buildContext.implementedThemeTypes.login.isImplemented;
+    const hasAccountTheme = buildContext.implementedThemeTypes.account.isImplemented;
+    const hasAdminTheme = buildContext.implementedThemeTypes.admin.isImplemented;
+
+    let newContent = [
+        ``,
+        `/* eslint-disable */`,
+        ``,
+        `// @ts-nocheck`,
+        ``,
+        `// noinspection JSUnusedGlobalSymbols`,
+        ``,
+        `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(", ")}];`,
+        ``,
+        `export type KcEnvName = ${buildContext.environmentVariables.length === 0 ? "never" : buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(" | ")};`,
+        ``,
+        `export const kcEnvNames: KcEnvName[] = [${buildContext.environmentVariables.map(({ name }) => `"${name}"`).join(", ")}];`,
+        ``,
+        `export const kcEnvDefaults: Record<KcEnvName, string> = ${JSON.stringify(
+            Object.fromEntries(
+                buildContext.environmentVariables.map(
+                    ({ name, default: defaultValue }) => [name, defaultValue]
+                )
+            ),
+            null,
+            2
+        )};`,
+        ``,
+        `type KcContext =`,
+        hasLoginTheme && `    | import("./login/KcContext").KcContext`,
+        hasAccountTheme && `    | import("./account/KcContext").KcContext`,
+        hasAdminTheme && `    | import("./admin/KcContext").KcContext`,
+        `    ;`,
+        ``,
+        `declare global {`,
+        `    interface Window {`,
+        `        kcContext?: KcContext;`,
+        `    }`,
+        `}`,
+        ``,
+        hasLoginTheme &&
+            `export const KcLoginPage = lazy(() => import("./login/KcPage"));`,
+        hasAccountTheme &&
+            `export const KcAccountPage = lazy(() => import("./account/KcPage"));`,
+        hasAdminTheme &&
+            `export const KcAdminPage = lazy(() => import("./admin/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} />;`,
+        hasAdminTheme &&
+            `                    case "admin": return <KcAdminPage kcContext={kcContext} />;`,
+        `                }`,
+        `            })()}`,
+        `        </Suspense>`,
+        `    );`,
+        `}`,
+        ``
+    ]
+        .filter(item => typeof item === "string")
+        .join("\n");
+
+    const hash = crypto.createHash("sha256").update(newContent).digest("hex");
+
+    skip_if_no_changes: {
+        if (!(await existsAsync(filePath))) {
+            break skip_if_no_changes;
+        }
+
+        const currentContent = (await fs.readFile(filePath)).toString("utf8");
+
+        if (!currentContent.includes(hash)) {
+            break skip_if_no_changes;
+        }
+
+        return;
+    }
+
+    newContent = [
+        `// This file is auto-generated by the \`update-kc-gen\` command. Do not edit it manually.`,
+        `// Hash: ${hash}`,
+        ``,
+        newContent
+    ].join("\n");
+
+    format: {
+        if (!(await getIsPrettierAvailable())) {
+            break format;
+        }
+
+        newContent = await runPrettier({
+            filePath,
+            sourceCode: newContent
+        });
+    }
+
+    await fs.writeFile(filePath, Buffer.from(newContent, "utf8"));
+
+    delete_legacy_file: {
+        const legacyFilePath = filePath.replace(/tsx$/, "ts");
+
+        if (!(await existsAsync(legacyFilePath))) {
+            break delete_legacy_file;
+        }
+
+        await fs.unlink(legacyFilePath);
+    }
 }

src/login/KcContext/KcContext.ts

@@ -2,7 +2,7 @@ import type { ThemeType, LoginThemePageId } from "keycloakify/bin/shared/constan
 import type { ValueOf } from "keycloakify/tools/ValueOf";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { ClassKey } from "keycloakify/login/TemplateProps";
+import type { ClassKey } from "keycloakify/login/lib/kcClsx";
 
 export type ExtendKcContext<
     KcContextExtension extends { properties?: Record<string, string | undefined> },
@@ -94,6 +94,7 @@ export declare namespace KcContext {
                 languageTag: string;
             }[];
             currentLanguageTag: string;
+            rtl?: boolean;
         };
         auth?: {
             showUsername?: boolean;
@@ -101,7 +102,7 @@ export declare namespace KcContext {
             showTryAnotherWayLink?: boolean;
             attemptedUsername?: string;
         };
-        scripts: string[];
+        scripts?: string[];
         message?: {
             type: "success" | "warning" | "error" | "info";
             summary: string;

src/login/Template.useInitialize.ts

@@ -10,7 +10,7 @@ export type KcContextLike = {
         resourcesPath: string;
         ssoLoginInOtherTabsUrl: string;
     };
-    scripts: string[];
+    scripts?: string[];
 };
 
 assert<keyof KcContextLike extends keyof KcContext ? true : false>();
@@ -45,10 +45,12 @@ export function useInitialize(params: {
                 type: "module",
                 src: `${url.resourcesPath}/js/menu-button-links.js`
             },
-            ...scripts.map(src => ({
-                type: "text/javascript" as const,
-                src
-            })),
+            ...(scripts === undefined
+                ? []
+                : scripts.map(src => ({
+                      type: "text/javascript" as const,
+                      src
+                  }))),
             {
                 type: "module",
                 textContent: `

src/login/TemplateProps.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { ClassKey } from "keycloakify/login/lib/kcClsx";
 
 export type TemplateProps<KcContext, I18n> = {
     kcContext: KcContext;
@@ -18,128 +19,4 @@ export type TemplateProps<KcContext, I18n> = {
     bodyClassName?: string;
 };
 
-export type ClassKey =
-    | "kcBodyClass"
-    | "kcHeaderWrapperClass"
-    | "kcLocaleWrapperClass"
-    | "kcInfoAreaWrapperClass"
-    | "kcFormButtonsWrapperClass"
-    | "kcFormOptionsWrapperClass"
-    | "kcCheckboxInputClass"
-    | "kcLocaleDropDownClass"
-    | "kcLocaleListItemClass"
-    | "kcContentWrapperClass"
-    | "kcLogoIdP-facebook"
-    | "kcAuthenticatorOTPClass"
-    | "kcLogoIdP-bitbucket"
-    | "kcAuthenticatorWebAuthnClass"
-    | "kcWebAuthnDefaultIcon"
-    | "kcLogoIdP-stackoverflow"
-    | "kcSelectAuthListItemClass"
-    | "kcLogoIdP-microsoft"
-    | "kcLoginOTPListItemHeaderClass"
-    | "kcLocaleItemClass"
-    | "kcLoginOTPListItemIconBodyClass"
-    | "kcInputHelperTextAfterClass"
-    | "kcFormClass"
-    | "kcSelectAuthListClass"
-    | "kcInputClassRadioCheckboxLabelDisabled"
-    | "kcSelectAuthListItemIconClass"
-    | "kcRecoveryCodesWarning"
-    | "kcFormSettingClass"
-    | "kcWebAuthnBLE"
-    | "kcInputWrapperClass"
-    | "kcSelectAuthListItemArrowIconClass"
-    | "kcFeedbackAreaClass"
-    | "kcFormPasswordVisibilityButtonClass"
-    | "kcLogoIdP-google"
-    | "kcCheckLabelClass"
-    | "kcSelectAuthListItemFillClass"
-    | "kcAuthenticatorDefaultClass"
-    | "kcLogoIdP-gitlab"
-    | "kcFormAreaClass"
-    | "kcFormButtonsClass"
-    | "kcInputClassRadioLabel"
-    | "kcAuthenticatorWebAuthnPasswordlessClass"
-    | "kcSelectAuthListItemHeadingClass"
-    | "kcInfoAreaClass"
-    | "kcLogoLink"
-    | "kcContainerClass"
-    | "kcSelectAuthListItemTitle"
-    | "kcHtmlClass"
-    | "kcLoginOTPListItemTitleClass"
-    | "kcLogoIdP-openshift-v4"
-    | "kcWebAuthnUnknownIcon"
-    | "kcFormSocialAccountNameClass"
-    | "kcLogoIdP-openshift-v3"
-    | "kcLoginOTPListInputClass"
-    | "kcWebAuthnUSB"
-    | "kcInputClassRadio"
-    | "kcWebAuthnKeyIcon"
-    | "kcFeedbackInfoIcon"
-    | "kcCommonLogoIdP"
-    | "kcRecoveryCodesActions"
-    | "kcFormGroupHeader"
-    | "kcFormSocialAccountSectionClass"
-    | "kcLogoIdP-instagram"
-    | "kcAlertClass"
-    | "kcHeaderClass"
-    | "kcLabelWrapperClass"
-    | "kcFormPasswordVisibilityIconShow"
-    | "kcFormSocialAccountLinkClass"
-    | "kcLocaleMainClass"
-    | "kcInputGroup"
-    | "kcTextareaClass"
-    | "kcButtonBlockClass"
-    | "kcButtonClass"
-    | "kcWebAuthnNFC"
-    | "kcLocaleClass"
-    | "kcInputClassCheckboxInput"
-    | "kcFeedbackErrorIcon"
-    | "kcInputLargeClass"
-    | "kcInputErrorMessageClass"
-    | "kcRecoveryCodesList"
-    | "kcFormSocialAccountListClass"
-    | "kcAlertTitleClass"
-    | "kcAuthenticatorPasswordClass"
-    | "kcCheckInputClass"
-    | "kcLogoIdP-linkedin"
-    | "kcLogoIdP-twitter"
-    | "kcFeedbackWarningIcon"
-    | "kcResetFlowIcon"
-    | "kcSelectAuthListItemIconPropertyClass"
-    | "kcFeedbackSuccessIcon"
-    | "kcLoginOTPListClass"
-    | "kcSrOnlyClass"
-    | "kcFormSocialAccountListGridClass"
-    | "kcButtonDefaultClass"
-    | "kcFormGroupErrorClass"
-    | "kcSelectAuthListItemDescriptionClass"
-    | "kcSelectAuthListItemBodyClass"
-    | "kcWebAuthnInternal"
-    | "kcSelectAuthListItemArrowClass"
-    | "kcCheckClass"
-    | "kcContentClass"
-    | "kcLogoClass"
-    | "kcLoginOTPListItemIconClass"
-    | "kcLoginClass"
-    | "kcSignUpClass"
-    | "kcButtonLargeClass"
-    | "kcFormCardClass"
-    | "kcLocaleListClass"
-    | "kcInputClass"
-    | "kcFormGroupClass"
-    | "kcLogoIdP-paypal"
-    | "kcInputClassCheckbox"
-    | "kcRecoveryCodesConfirmation"
-    | "kcFormPasswordVisibilityIconHide"
-    | "kcInputClassRadioInput"
-    | "kcFormSocialAccountListButtonClass"
-    | "kcInputClassCheckboxLabel"
-    | "kcFormOptionsClass"
-    | "kcFormHeaderClass"
-    | "kcFormSocialAccountGridItem"
-    | "kcButtonPrimaryClass"
-    | "kcInputHelperTextBeforeClass"
-    | "kcLogoIdP-github"
-    | "kcLabelClass";
+export type { ClassKey };

src/login/UserProfileFormFields.tsx

@@ -434,9 +434,7 @@ function AddRemoveButtonsMultiValuedAttribute(props: {
 }
 
 function InputTagSelects(props: InputFieldByTypeProps) {
-    const { attribute, dispatchFormAction, kcClsx, valueOrValues } = props;
-
-    const { advancedMsg } = props.i18n;
+    const { attribute, dispatchFormAction, kcClsx, i18n, valueOrValues } = props;
 
     const { classDiv, classInput, classLabel, inputType } = (() => {
         const { inputType } = attribute.annotations;
@@ -533,7 +531,7 @@ function InputTagSelects(props: InputFieldByTypeProps) {
                         htmlFor={`${attribute.name}-${option}`}
                         className={`${classLabel}${attribute.readOnly ? ` ${kcClsx("kcInputClassRadioCheckboxLabelDisabled")}` : ""}`}
                     >
-                        {advancedMsg(option)}
+                        {inputLabel(i18n, attribute, option)}
                     </label>
                 </div>
             ))}
@@ -580,8 +578,6 @@ function TextareaTag(props: InputFieldByTypeProps) {
 function SelectTag(props: InputFieldByTypeProps) {
     const { attribute, dispatchFormAction, kcClsx, displayableErrors, i18n, valueOrValues } = props;
 
-    const { advancedMsgStr } = i18n;
-
     const isMultiple = attribute.annotations.inputType === "multiselect";
 
     return (
@@ -645,22 +641,26 @@ function SelectTag(props: InputFieldByTypeProps) {
 
                 return options.map(option => (
                     <option key={option} value={option}>
-                        {(() => {
-                            if (attribute.annotations.inputOptionLabels !== undefined) {
-                                const { inputOptionLabels } = attribute.annotations;
-
-                                return advancedMsgStr(inputOptionLabels[option] ?? option);
-                            }
-
-                            if (attribute.annotations.inputOptionLabelsI18nPrefix !== undefined) {
-                                return advancedMsgStr(`${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}`);
-                            }
-
-                            return option;
-                        })()}
+                        {inputLabel(i18n, attribute, option)}
                     </option>
                 ));
             })()}
         </select>
     );
 }
+
+function inputLabel(i18n: I18n, attribute: Attribute, option: string) {
+    const { advancedMsg } = i18n;
+
+    if (attribute.annotations.inputOptionLabels !== undefined) {
+        const { inputOptionLabels } = attribute.annotations;
+
+        return advancedMsg(inputOptionLabels[option] ?? option);
+    }
+
+    if (attribute.annotations.inputOptionLabelsI18nPrefix !== undefined) {
+        return advancedMsg(`${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}`);
+    }
+
+    return option;
+}

src/login/i18n/noJsx/getI18n.tsx

@@ -16,9 +16,13 @@ import type { GenericI18n_noJsx } from "./GenericI18n_noJsx";
 
 export type KcContextLike = {
     themeName: string;
+    realm: {
+        internationalizationEnabled: boolean;
+    };
     locale?: {
         currentLanguageTag: string;
         supported: { languageTag: string; url: string; label: string }[];
+        rtl?: boolean;
     };
     "x-keycloakify": {
         messages: Record<string, string>;
@@ -90,11 +94,56 @@ export function createGetI18n<
             return cachedResult;
         }
 
+        const kcContextLocale = params.kcContext.realm.internationalizationEnabled ? params.kcContext.locale : undefined;
+
         {
-            const currentLanguageTag = kcContext.locale?.currentLanguageTag ?? FALLBACK_LANGUAGE_TAG;
+            const currentLanguageTag = kcContextLocale?.currentLanguageTag ?? FALLBACK_LANGUAGE_TAG;
             const html = document.querySelector("html");
             assert(html !== null);
             html.lang = currentLanguageTag;
+
+            const isRtl = (() => {
+                const { rtl } = kcContextLocale ?? {};
+
+                if (rtl !== undefined) {
+                    return rtl;
+                }
+
+                return [
+                    /* spell-checker: disable */
+                    // Common RTL languages
+                    "ar", // Arabic
+                    "fa", // Persian (Farsi)
+                    "he", // Hebrew
+                    "ur", // Urdu
+                    "ps", // Pashto
+                    "syr", // Syriac
+                    "dv", // Divehi (Maldivian)
+                    "ku", // Kurdish (Sorani)
+                    "ug", // Uighur
+                    "az", // Azerbaijani (Arabic script)
+                    "sd", // Sindhi
+
+                    // Less common RTL languages
+                    "yi", // Yiddish
+                    "ha", // Hausa (when written in Arabic script)
+                    "ks", // Kashmiri (written in the Perso-Arabic script)
+                    "bal", // Balochi (when written in Arabic script)
+                    "khw", // Khowar (Chitrali)
+                    "brh", // Brahui (when written in Arabic script)
+                    "tmh", // Tamashek (some dialects use Arabic script)
+                    "bgn", // Western Balochi
+                    "arc", // Aramaic
+                    "sam", // Samaritan Aramaic
+                    "prd", // Parsi-Dari (a dialect of Persian)
+                    "huz", // Hazaragi (a dialect of Persian)
+                    "gbz", // Zaza (written in Arabic script in some areas)
+                    "urj" // Urdu in Romanized script (not always RTL, but to account for edge cases)
+                    /* spell-checker: enable */
+                ].includes(currentLanguageTag);
+            })();
+
+            html.dir = isRtl ? "rtl" : "ltr";
         }
 
         const getLanguageLabel = (languageTag: LanguageTag) => {
@@ -110,11 +159,11 @@ export function createGetI18n<
             }
 
             from_server: {
-                if (kcContext.locale === undefined) {
+                if (kcContextLocale === undefined) {
                     break from_server;
                 }
 
-                const supportedEntry = kcContext.locale.supported.find(entry => entry.languageTag === languageTag);
+                const supportedEntry = kcContextLocale.supported.find(entry => entry.languageTag === languageTag);
 
                 if (supportedEntry === undefined) {
                     break from_server;
@@ -136,7 +185,7 @@ export function createGetI18n<
         };
 
         const currentLanguage: I18n["currentLanguage"] = (() => {
-            const languageTag = id<string>(kcContext.locale?.currentLanguageTag ?? FALLBACK_LANGUAGE_TAG) as LanguageTag;
+            const languageTag = id<string>(kcContextLocale?.currentLanguageTag ?? FALLBACK_LANGUAGE_TAG) as LanguageTag;
 
             return {
                 languageTag,
@@ -147,8 +196,8 @@ export function createGetI18n<
         const enabledLanguages: I18n["enabledLanguages"] = (() => {
             const enabledLanguages: I18n["enabledLanguages"] = [];
 
-            if (kcContext.locale !== undefined) {
-                for (const entry of kcContext.locale.supported ?? []) {
+            if (kcContextLocale !== undefined) {
+                for (const entry of kcContextLocale.supported ?? []) {
                     const languageTag = id<string>(entry.languageTag) as LanguageTag;
 
                     enabledLanguages.push({

src/login/i18n/withJsx/useI18n.tsx

@@ -92,7 +92,8 @@ export function createUseI18n<
 
         const styleElement = document.createElement("style");
         styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
-        (styleElement.textContent = `[data-kc-msg] { display: inline-block; }`), document.head.prepend(styleElement);
+        styleElement.textContent = `[data-kc-msg] { display: inline-block; }`;
+        document.head.prepend(styleElement);
     }
 
     const { getI18n } = createGetI18n({ extraLanguageTranslations, messagesByLanguageTag_themeDefined });

src/login/lib/getUserProfileApi/index.ts

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

src/login/lib/getUserProfileApi/kcNumberUnFormat.ts

@@ -0,0 +1,109 @@
+import { assert } from "keycloakify/tools/assert";
+let cleanup: (() => void) | undefined;
+const handledElements = new WeakSet<HTMLElement>();
+const KC_NUMBER_UNFORMAT = "kcNumberUnFormat";
+const SELECTOR = `input[data-${KC_NUMBER_UNFORMAT}]`;
+
+export function unFormatNumberOnSubmit() {
+    cleanup?.();
+
+    const handleElement = (element: HTMLInputElement) => {
+        if (handledElements.has(element)) {
+            return;
+        }
+
+        const form = element.closest("form");
+
+        if (form === null) {
+            return;
+        }
+
+        form.addEventListener("submit", () => {
+            const rawFormat = element.getAttribute(`data-${KC_NUMBER_UNFORMAT}`);
+            if (rawFormat) {
+                element.value = formatNumber(element.value, rawFormat);
+            }
+        });
+
+        handledElements.add(element);
+    };
+
+    document.querySelectorAll(SELECTOR).forEach(element => {
+        assert(element instanceof HTMLInputElement);
+        handleElement(element);
+    });
+
+    const observer = new MutationObserver(mutationsList => {
+        for (const mutation of mutationsList) {
+            if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+                mutation.addedNodes.forEach(node => {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const element = (node as HTMLElement).querySelector(SELECTOR);
+                        if (element !== null) {
+                            assert(element instanceof HTMLInputElement);
+                            handleElement(element);
+                        }
+                    }
+                });
+            }
+        }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    cleanup = () => observer.disconnect();
+}
+
+// NOTE: Keycloak code
+const formatNumber = (input: string, format: string) => {
+    if (!input) {
+        return "";
+    }
+
+    // array holding the patterns for the number of expected digits in each part
+    const digitPattern = format.match(/{\d+}/g);
+
+    if (!digitPattern) {
+        return "";
+    }
+
+    // calculate the maximum size of the given pattern based on the sum of the expected digits
+    const maxSize = digitPattern.reduce(
+        (total, p) => total + parseInt(p.replace("{", "").replace("}", "")),
+        0
+    );
+
+    // keep only digits
+    let rawValue = input.replace(/\D+/g, "");
+
+    // make sure the value is a number
+    //@ts-expect-error
+    if (parseInt(rawValue) != rawValue) {
+        return "";
+    }
+
+    // make sure the number of digits does not exceed the maximum size
+    if (rawValue.length > maxSize) {
+        rawValue = rawValue.substring(0, maxSize);
+    }
+
+    // build the regex based based on the expected digits in each part
+    const formatter = digitPattern.reduce((result, p) => result + `(\\d${p})`, "^");
+
+    // if the current digits match the pattern we have each group of digits in an array
+    let digits = new RegExp(formatter).exec(rawValue);
+
+    // no match, return the raw value without any format
+    if (!digits) {
+        return input;
+    }
+
+    let result = format;
+
+    // finally format the current digits accordingly to the given format
+    for (let i = 0; i < digitPattern.length; i++) {
+        result = result.replace(digitPattern[i], digits[i + 1]);
+    }
+
+    return result;
+};

src/login/lib/kcClsx.ts

@@ -1,5 +1,130 @@
 import { createGetKcClsx } from "keycloakify/lib/getKcClsx";
-import type { ClassKey } from "keycloakify/login/TemplateProps";
+
+export type ClassKey =
+    | "kcBodyClass"
+    | "kcHeaderWrapperClass"
+    | "kcLocaleWrapperClass"
+    | "kcInfoAreaWrapperClass"
+    | "kcFormButtonsWrapperClass"
+    | "kcFormOptionsWrapperClass"
+    | "kcCheckboxInputClass"
+    | "kcLocaleDropDownClass"
+    | "kcLocaleListItemClass"
+    | "kcContentWrapperClass"
+    | "kcLogoIdP-facebook"
+    | "kcAuthenticatorOTPClass"
+    | "kcLogoIdP-bitbucket"
+    | "kcAuthenticatorWebAuthnClass"
+    | "kcWebAuthnDefaultIcon"
+    | "kcLogoIdP-stackoverflow"
+    | "kcSelectAuthListItemClass"
+    | "kcLogoIdP-microsoft"
+    | "kcLoginOTPListItemHeaderClass"
+    | "kcLocaleItemClass"
+    | "kcLoginOTPListItemIconBodyClass"
+    | "kcInputHelperTextAfterClass"
+    | "kcFormClass"
+    | "kcSelectAuthListClass"
+    | "kcInputClassRadioCheckboxLabelDisabled"
+    | "kcSelectAuthListItemIconClass"
+    | "kcRecoveryCodesWarning"
+    | "kcFormSettingClass"
+    | "kcWebAuthnBLE"
+    | "kcInputWrapperClass"
+    | "kcSelectAuthListItemArrowIconClass"
+    | "kcFeedbackAreaClass"
+    | "kcFormPasswordVisibilityButtonClass"
+    | "kcLogoIdP-google"
+    | "kcCheckLabelClass"
+    | "kcSelectAuthListItemFillClass"
+    | "kcAuthenticatorDefaultClass"
+    | "kcLogoIdP-gitlab"
+    | "kcFormAreaClass"
+    | "kcFormButtonsClass"
+    | "kcInputClassRadioLabel"
+    | "kcAuthenticatorWebAuthnPasswordlessClass"
+    | "kcSelectAuthListItemHeadingClass"
+    | "kcInfoAreaClass"
+    | "kcLogoLink"
+    | "kcContainerClass"
+    | "kcSelectAuthListItemTitle"
+    | "kcHtmlClass"
+    | "kcLoginOTPListItemTitleClass"
+    | "kcLogoIdP-openshift-v4"
+    | "kcWebAuthnUnknownIcon"
+    | "kcFormSocialAccountNameClass"
+    | "kcLogoIdP-openshift-v3"
+    | "kcLoginOTPListInputClass"
+    | "kcWebAuthnUSB"
+    | "kcInputClassRadio"
+    | "kcWebAuthnKeyIcon"
+    | "kcFeedbackInfoIcon"
+    | "kcCommonLogoIdP"
+    | "kcRecoveryCodesActions"
+    | "kcFormGroupHeader"
+    | "kcFormSocialAccountSectionClass"
+    | "kcLogoIdP-instagram"
+    | "kcAlertClass"
+    | "kcHeaderClass"
+    | "kcLabelWrapperClass"
+    | "kcFormPasswordVisibilityIconShow"
+    | "kcFormSocialAccountLinkClass"
+    | "kcLocaleMainClass"
+    | "kcInputGroup"
+    | "kcTextareaClass"
+    | "kcButtonBlockClass"
+    | "kcButtonClass"
+    | "kcWebAuthnNFC"
+    | "kcLocaleClass"
+    | "kcInputClassCheckboxInput"
+    | "kcFeedbackErrorIcon"
+    | "kcInputLargeClass"
+    | "kcInputErrorMessageClass"
+    | "kcRecoveryCodesList"
+    | "kcFormSocialAccountListClass"
+    | "kcAlertTitleClass"
+    | "kcAuthenticatorPasswordClass"
+    | "kcCheckInputClass"
+    | "kcLogoIdP-linkedin"
+    | "kcLogoIdP-twitter"
+    | "kcFeedbackWarningIcon"
+    | "kcResetFlowIcon"
+    | "kcSelectAuthListItemIconPropertyClass"
+    | "kcFeedbackSuccessIcon"
+    | "kcLoginOTPListClass"
+    | "kcSrOnlyClass"
+    | "kcFormSocialAccountListGridClass"
+    | "kcButtonDefaultClass"
+    | "kcFormGroupErrorClass"
+    | "kcSelectAuthListItemDescriptionClass"
+    | "kcSelectAuthListItemBodyClass"
+    | "kcWebAuthnInternal"
+    | "kcSelectAuthListItemArrowClass"
+    | "kcCheckClass"
+    | "kcContentClass"
+    | "kcLogoClass"
+    | "kcLoginOTPListItemIconClass"
+    | "kcLoginClass"
+    | "kcSignUpClass"
+    | "kcButtonLargeClass"
+    | "kcFormCardClass"
+    | "kcLocaleListClass"
+    | "kcInputClass"
+    | "kcFormGroupClass"
+    | "kcLogoIdP-paypal"
+    | "kcInputClassCheckbox"
+    | "kcRecoveryCodesConfirmation"
+    | "kcFormPasswordVisibilityIconHide"
+    | "kcInputClassRadioInput"
+    | "kcFormSocialAccountListButtonClass"
+    | "kcInputClassCheckboxLabel"
+    | "kcFormOptionsClass"
+    | "kcFormHeaderClass"
+    | "kcFormSocialAccountGridItem"
+    | "kcButtonPrimaryClass"
+    | "kcInputHelperTextBeforeClass"
+    | "kcLogoIdP-github"
+    | "kcLabelClass";
 
 export const { getKcClsx } = createGetKcClsx<ClassKey>({
     defaultClasses: {
@@ -138,6 +263,4 @@ export const { getKcClsx } = createGetKcClsx<ClassKey>({
     }
 });
 
-export type { ClassKey };
-
 export type KcClsx = ReturnType<typeof getKcClsx>["kcClsx"];

src/login/pages/Code.tsx

@@ -2,6 +2,7 @@ import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
 
 export default function Code(props: PageProps<Extract<KcContext, { pageId: "code.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -30,7 +31,14 @@ export default function Code(props: PageProps<Extract<KcContext, { pageId: "code
                         <input id="code" className={kcClsx("kcTextareaClass")} defaultValue={code.code} />
                     </>
                 ) : (
-                    <p id="error">{code.error}</p>
+                    code.error && (
+                        <p
+                            id="error"
+                            dangerouslySetInnerHTML={{
+                                __html: kcSanitize(code.error)
+                            }}
+                        />
+                    )
                 )}
             </div>
         </Template>

src/login/pages/LoginPasskeysConditionalAuthenticate.useScript.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { assert } from "keycloakify/tools/assert";
 import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
 
 type KcContextLike = {
     url: {
@@ -67,6 +68,12 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
             return;
         }
 
-        insertScriptTags();
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: authButtonId
+            });
+
+            insertScriptTags();
+        })();
     }, [isFetchingTranslations]);
 }

src/login/pages/LoginRecoveryAuthnCodeConfig.tsx

@@ -70,9 +70,9 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
                     type="checkbox"
                     id="kcRecoveryCodesConfirmationCheck"
                     name="kcRecoveryCodesConfirmationCheck"
-                    onChange={function () {
-                        //@ts-expect-error: This is code from the original theme, we trust it.
-                        document.getElementById("saveRecoveryAuthnCodesBtn").disabled = !this.checked;
+                    onChange={event => {
+                        //@ts-expect-error: This is inherited from the original code
+                        document.getElementById("saveRecoveryAuthnCodesBtn").disabled = !event.target.checked;
                     }}
                 />
                 <label htmlFor="kcRecoveryCodesConfirmationCheck">{msg("recovery-codes-confirmation-message")}</label>

src/login/pages/LoginRecoveryAuthnCodeConfig.useScript.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
 
 type I18nLike = {
     msgStr: (key: "recovery-codes-download-file-header" | "recovery-codes-download-file-description" | "recovery-codes-download-file-date") => string;
@@ -137,6 +138,12 @@ export function useScript(params: { olRecoveryCodesListId: string; i18n: I18nLik
             return;
         }
 
-        insertScriptTags();
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: olRecoveryCodesListId
+            });
+
+            insertScriptTags();
+        })();
     }, [isFetchingTranslations]);
 }

src/login/pages/WebauthnAuthenticate.useScript.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { assert } from "keycloakify/tools/assert";
 import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
 
 type KcContextLike = {
     url: {
@@ -59,6 +60,12 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
             return;
         }
 
-        insertScriptTags();
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: authButtonId
+            });
+
+            insertScriptTags();
+        })();
     }, [isFetchingTranslations]);
 }

src/login/pages/WebauthnRegister.useScript.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { assert } from "keycloakify/tools/assert";
 import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
 
 type KcContextLike = {
     url: {
@@ -88,6 +89,12 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
             return;
         }
 
-        insertScriptTags();
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: authButtonId
+            });
+
+            insertScriptTags();
+        })();
     }, [isFetchingTranslations]);
 }

src/tools/waitForElementMountedOnDom.ts

@@ -0,0 +1,30 @@
+export async function waitForElementMountedOnDom(params: {
+    elementId: string;
+}): Promise<void> {
+    const { elementId } = params;
+
+    const getElement = () => document.getElementById(elementId);
+
+    const element = getElement();
+
+    if (element === null) {
+        let prElementPresentInTheDom_resolve: () => void;
+        const prElementPresentInTheDom = new Promise<void>(
+            resolve => (prElementPresentInTheDom_resolve = resolve)
+        );
+
+        // Observe the dom for the element to be added
+        const observer = new MutationObserver(() => {
+            const element = getElement();
+            if (element === null) {
+                return;
+            }
+            observer.disconnect();
+            prElementPresentInTheDom_resolve();
+        });
+
+        observer.observe(document.body, { childList: true, subtree: true });
+
+        await prElementPresentInTheDom;
+    }
+}

src/vite-plugin/vite-plugin.ts

@@ -6,7 +6,7 @@ import {
 } from "../bin/shared/constants";
 import { id } from "tsafe/id";
 import { rm } from "../bin/tools/fs.rm";
-import { copyKeycloakResourcesToPublic } from "../bin/shared/copyKeycloakResourcesToPublic";
+import { command as copyKeycloakResourcesToPublicCommand } from "../bin/copy-keycloak-resources-to-public";
 import { assert } from "tsafe/assert";
 import {
     getBuildContext,
@@ -15,7 +15,8 @@ import {
     type ResolvedViteConfig
 } from "../bin/shared/buildContext";
 import MagicString from "magic-string";
-import { generateKcGenTs } from "../bin/shared/generateKcGenTs";
+import { command as updateKcGenCommand } from "../bin/update-kc-gen";
+import { replaceAll } from "../bin/tools/String.prototype.replaceAll";
 
 export namespace keycloakify {
     export type Params = BuildOptions & {
@@ -122,15 +123,16 @@ export function keycloakify(params: keycloakify.Params) {
             }
 
             const buildContext = getBuildContext({
-                cliCommandOptions: {
-                    projectDirPath
-                }
+                projectDirPath
             });
 
-            copyKeycloakResourcesToPublic({ buildContext }),
-                await generateKcGenTs({ buildContext });
+            await copyKeycloakResourcesToPublicCommand({ buildContext });
+
+            await updateKcGenCommand({ buildContext });
         },
         transform: (code, id) => {
+            id = replaceAll(id, "/", pathSep);
+
             assert(command !== undefined);
             assert(shouldGenerateSourcemap !== undefined);
 
@@ -166,7 +168,7 @@ export function keycloakify(params: keycloakify.Params) {
                 [
                     `(`,
                     `(window.kcContext === undefined || import.meta.env.MODE === "development")?`,
-                    `"${urlPathname ?? "/"}":`,
+                    `import.meta.env.BASE_URL:`,
                     `(window.kcContext["x-keycloakify"].resourcesPath + "/${WELL_KNOWN_DIRECTORY_BASE_NAME.DIST}/")`,
                     `)`
                 ].join("")

stories/account/pages/Account.stories.tsx

@@ -16,3 +16,105 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * UsernameNotEditable:
+ * - Purpose: Test the scenario where the username field is not editable.
+ * - Scenario: The component renders, but the username field is disabled.
+ * - Key Aspect: Ensures that the `editUsernameAllowed` condition is respected and the username field is read-only.
+ */
+export const UsernameNotEditable: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                account: {
+                    username: "john_doe",
+                    email: "john.doe@gmail.com",
+                    firstName: "John",
+                    lastName: "Doe"
+                },
+                realm: {
+                    registrationEmailAsUsername: false,
+                    editUsernameAllowed: false
+                },
+                referrer: {
+                    url: "/home"
+                },
+                url: {
+                    accountUrl: "/account"
+                },
+                messagesPerField: {
+                    printIfExists: () => ""
+                },
+                stateChecker: "state-checker"
+            }}
+        />
+    )
+};
+
+/**
+ * WithValidationErrors:
+ * - Purpose: Test the form when there are validation errors.
+ * - Scenario: The component renders with error messages for invalid input in the fields.
+ * - Key Aspect: Ensures that error messages are properly displayed and the user can correct their inputs.
+ */
+export const WithValidationErrors: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                account: {
+                    username: "john_doe",
+                    email: "",
+                    firstName: "",
+                    lastName: "Doe"
+                },
+                realm: {
+                    registrationEmailAsUsername: false,
+                    editUsernameAllowed: true
+                },
+                referrer: {
+                    url: "/home"
+                },
+                url: {
+                    accountUrl: "/account"
+                },
+                messagesPerField: {
+                    printIfExists: field => (field === "email" || field === "firstName" ? "has-error" : "")
+                },
+                stateChecker: "state-checker"
+            }}
+        />
+    )
+};
+/**
+ * EmailAsUsername:
+ * - Purpose: Test the form where email is used as the username.
+ * - Scenario: The component renders without a separate username field, and the email field is treated as the username.
+ * - Key Aspect: Ensures the form functions correctly when `registrationEmailAsUsername` is enabled.
+ */
+export const EmailAsUsername: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                account: {
+                    email: "john.doe@gmail.com",
+                    firstName: "John",
+                    lastName: "Doe"
+                },
+                realm: {
+                    registrationEmailAsUsername: true
+                },
+                referrer: {
+                    url: "/home"
+                },
+                url: {
+                    accountUrl: "/account"
+                },
+                messagesPerField: {
+                    printIfExists: () => ""
+                },
+                stateChecker: "state-checker"
+            }}
+        />
+    )
+};

stories/account/pages/Applications.stories.tsx

@@ -78,3 +78,151 @@ export const Default: Story = {
         />
     )
 };
+
+// No Available Roles or Grants Scenario
+export const NoAvailableRolesOrGrants: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "applications.ftl",
+                applications: {
+                    applications: [
+                        {
+                            realmRolesAvailable: [],
+                            resourceRolesAvailable: {},
+                            additionalGrants: [],
+                            clientScopesGranted: [],
+                            effectiveUrl: "#",
+                            client: {
+                                clientId: "application1",
+                                name: "Application 1",
+                                consentRequired: true
+                            }
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+
+// Consent Not Required Scenario
+export const ConsentNotRequired: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "applications.ftl",
+                applications: {
+                    applications: [
+                        {
+                            realmRolesAvailable: [],
+                            resourceRolesAvailable: {},
+                            additionalGrants: [],
+                            clientScopesGranted: [],
+                            effectiveUrl: "#",
+                            client: {
+                                clientId: "application1",
+                                name: "Application 1",
+                                consentRequired: false // No consent required
+                            }
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+
+// No Roles Available but Consent Required Scenario
+export const NoRolesButConsentRequired: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "applications.ftl",
+                applications: {
+                    applications: [
+                        {
+                            realmRolesAvailable: [],
+                            resourceRolesAvailable: {},
+                            additionalGrants: [],
+                            clientScopesGranted: ["scope1", "scope2"], // Consent required but no roles
+                            effectiveUrl: "#",
+                            client: {
+                                clientId: "application1",
+                                name: "Application 1",
+                                consentRequired: true
+                            }
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+
+// Only Resource Roles Available Scenario
+export const OnlyResourceRolesAvailable: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "applications.ftl",
+                applications: {
+                    applications: [
+                        {
+                            realmRolesAvailable: [], // No realm roles
+                            resourceRolesAvailable: {
+                                resource1: [
+                                    {
+                                        roleName: "Resource Role Name 1",
+                                        roleDescription: "Resource role 1 description",
+                                        clientName: "Client Name 1",
+                                        clientId: "client1"
+                                    }
+                                ]
+                            },
+                            additionalGrants: [],
+                            clientScopesGranted: [],
+                            effectiveUrl: "#",
+                            client: {
+                                clientId: "application1",
+                                name: "Application 1",
+                                consentRequired: true
+                            }
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+
+// No Additional Grants Scenario
+export const NoAdditionalGrants: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "applications.ftl",
+                applications: {
+                    applications: [
+                        {
+                            realmRolesAvailable: [
+                                {
+                                    name: "Realm Role Name 1"
+                                }
+                            ],
+                            resourceRolesAvailable: {},
+                            additionalGrants: [], // No additional grants
+                            clientScopesGranted: [],
+                            effectiveUrl: "#",
+                            client: {
+                                clientId: "application1",
+                                name: "Application 1",
+                                consentRequired: true
+                            }
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};

stories/account/pages/FederatedIdentity.stories.tsx

@@ -36,3 +36,61 @@ export const NotConnected: Story = {
         />
     )
 };
+
+/**
+ * RemoveLinkNotPossible:
+ * - Federated identities are connected, but the user cannot remove them due to restrictions.
+ */
+export const RemoveLinkNotPossible: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "federatedIdentity.ftl",
+                federatedIdentity: {
+                    identities: [
+                        {
+                            providerId: "google",
+                            displayName: "Google",
+                            userName: "john.doe@gmail.com",
+                            connected: true
+                        }
+                    ],
+                    removeLinkPossible: false
+                },
+                stateChecker: "1234",
+                url: {
+                    socialUrl: "/social"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * AddLinkForUnconnectedIdentity:
+ * - The user has an identity that is not connected and can add it.
+ */
+export const AddLinkForUnconnectedIdentity: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "federatedIdentity.ftl",
+                federatedIdentity: {
+                    identities: [
+                        {
+                            providerId: "github",
+                            displayName: "GitHub",
+                            userName: "",
+                            connected: false
+                        }
+                    ],
+                    removeLinkPossible: true
+                },
+                stateChecker: "1234",
+                url: {
+                    socialUrl: "/social"
+                }
+            }}
+        />
+    )
+};

stories/account/pages/Log.stories.tsx

@@ -355,3 +355,107 @@ export const Default: Story = {
         />
     )
 };
+export const LogsMissingDetails: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "log.ftl",
+                log: {
+                    events: [
+                        {
+                            date: "2024-04-26T12:29:08Z",
+                            ipAddress: "127.0.0.1",
+                            client: "",
+                            details: [],
+                            event: "login"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+export const SingleLogEntry: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "log.ftl",
+                log: {
+                    events: [
+                        {
+                            date: "2024-04-26T12:29:08Z",
+                            ipAddress: "127.0.0.1",
+                            client: "keycloakify-frontend",
+                            details: [
+                                { key: "auth_method", value: "openid-connect" },
+                                { key: "username", value: "john.doe" }
+                            ],
+                            event: "login"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+export const LogsWithLongDetails: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "log.ftl",
+                log: {
+                    events: [
+                        {
+                            date: "2024-04-26T12:29:08Z",
+                            ipAddress: "127.0.0.1",
+                            client: "keycloakify-frontend",
+                            details: [
+                                { key: "auth_method", value: "openid-connect" },
+                                { key: "username", value: "john.doe" },
+                                { key: "session_duration", value: "2 hours 30 minutes 45 seconds" },
+                                { key: "location", value: "Windsor, Ontario, Canada" },
+                                { key: "user_agent", value: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" }
+                            ],
+                            event: "login"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+export const EmptyClientField: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "log.ftl",
+                log: {
+                    events: [
+                        {
+                            date: "2024-04-26T12:29:08Z",
+                            ipAddress: "127.0.0.1",
+                            client: "", // Empty client field
+                            details: [
+                                { key: "auth_method", value: "openid-connect" },
+                                { key: "username", value: "john.doe" }
+                            ],
+                            event: "login"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+export const NoLogsAvailable: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                pageId: "log.ftl",
+                log: {
+                    events: [] // No log events
+                }
+            }}
+        />
+    )
+};

stories/account/pages/Password.stories.tsx

@@ -26,3 +26,79 @@ export const WithMessage: Story = {
         />
     )
 };
+/**
+ * FirstTimePasswordSetup:
+ * - Purpose: Tests the page when no password is set (e.g., first login).
+ * - Scenario: This renders the form without the current password field.
+ * - Key Aspect: Ensures the page only displays fields for setting a new password.
+ */
+export const FirstTimePasswordSetup: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                account: {
+                    username: "john_doe"
+                },
+                password: {
+                    passwordSet: false
+                },
+                url: {
+                    passwordUrl: "/password"
+                },
+                stateChecker: "state-checker"
+            }}
+        />
+    )
+};
+
+/**
+ * IncorrectCurrentPassword:
+ * - Purpose: Simulates validation error when the current password is incorrect.
+ * - Scenario: This renders the page with an error message indicating the current password is incorrect.
+ * - Key Aspect: Validates that an error message is correctly displayed for the current password input.
+ */
+export const IncorrectCurrentPassword: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: { type: "error", summary: "Incorrect current password." },
+                account: {
+                    username: "john_doe"
+                },
+                password: {
+                    passwordSet: true
+                },
+                url: {
+                    passwordUrl: "/password"
+                },
+                stateChecker: "state-checker"
+            }}
+        />
+    )
+};
+
+/**
+ * SubmissionSuccessWithRedirect:
+ * - Purpose: Simulates a successful form submission with a redirect or success message.
+ * - Scenario: After successfully changing the password, a success message and redirect behavior are triggered.
+ * - Key Aspect: Verifies the handling of successful submissions.
+ */
+export const SubmissionSuccessWithRedirect: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: { type: "success", summary: "Password successfully changed." },
+                account: {
+                    username: "john_doe"
+                },
+                password: {
+                    passwordSet: true
+                },
+                url: {
+                    passwordUrl: "/password"
+                },
+                stateChecker: "state-checker"
+            }}
+        />
+    )
+};

stories/account/pages/Sessions.stories.tsx

@@ -57,3 +57,97 @@ export const WithError: Story = {
         />
     )
 };
+/**
+ * No active sessions scenario:
+ * - Simulates the scenario where no sessions are active for the user.
+ */
+export const NoActiveSessions: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                sessions: {
+                    sessions: []
+                },
+                stateChecker: "randomStateCheckerValue"
+            }}
+        />
+    )
+};
+
+/**
+ * Single session scenario:
+ * - Displays only one active session with session details.
+ */
+export const SingleSession: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                sessions: {
+                    sessions: [
+                        {
+                            expires: "2024-04-26T18:14:19Z",
+                            clients: ["account"],
+                            ipAddress: "172.20.0.1",
+                            started: "2024-04-26T08:14:19Z",
+                            lastAccess: "2024-04-26T08:30:54Z",
+                            id: "single-session-id"
+                        }
+                    ]
+                },
+                stateChecker: "anotherStateChecker"
+            }}
+        />
+    )
+};
+
+/**
+ * Multiple clients per session scenario:
+ * - Displays sessions where each session has multiple associated clients.
+ */
+export const MultipleClientsSession: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                sessions: {
+                    sessions: [
+                        {
+                            expires: "2024-04-26T18:14:19Z",
+                            clients: ["account", "admin-console", "another-client"],
+                            ipAddress: "172.20.0.1",
+                            started: "2024-04-26T08:14:19Z",
+                            lastAccess: "2024-04-26T08:30:54Z",
+                            id: "multiple-clients-session"
+                        }
+                    ]
+                },
+                stateChecker: "multiClientsStateChecker"
+            }}
+        />
+    )
+};
+
+/**
+ * Session without client details scenario:
+ * - Simulates a session where no client information is provided.
+ */
+export const SessionWithoutClients: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                sessions: {
+                    sessions: [
+                        {
+                            expires: "2024-04-26T18:14:19Z",
+                            clients: [], // No clients information
+                            ipAddress: "172.20.0.1",
+                            started: "2024-04-26T08:14:19Z",
+                            lastAccess: "2024-04-26T08:30:54Z",
+                            id: "no-clients-session"
+                        }
+                    ]
+                },
+                stateChecker: "noClientsStateChecker"
+            }}
+        />
+    )
+};

stories/account/pages/Totp.stories.tsx

@@ -180,3 +180,64 @@ export const MoreThanOneTotpProviders: Story = {
         />
     )
 };
+
+// TOTP Enabled but No Existing OTP Credentials
+export const TotpEnabledNoOtpCredentials: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                totp: {
+                    enabled: true,
+                    totpSecretEncoded: "HE4W MSTC OBKU CY2M",
+                    otpCredentials: [] // No OTP Credentials
+                },
+                stateChecker: "stateChecker123",
+                url: {
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
+                }
+            }}
+        />
+    )
+};
+
+// Manual Mode TOTP without Scanning
+export const ManualModeTotp: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                mode: "manual", // Manual mode
+                totp: {
+                    enabled: false,
+                    totpSecretEncoded: "HE4W MSTC OBKU CY2M",
+                    otpCredentials: []
+                },
+                stateChecker: "stateChecker123",
+                url: {
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
+                }
+            }}
+        />
+    )
+};
+
+// Multiple OTP Devices Scenario
+export const MultipleOtpDevices: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                totp: {
+                    enabled: true,
+                    totpSecretEncoded: "G55E MZKC JFUD",
+                    otpCredentials: [
+                        { id: "1", userLabel: "Phone 1" },
+                        { id: "2", userLabel: "Tablet" }
+                    ]
+                },
+                stateChecker: "stateChecker123",
+                url: {
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
+                }
+            }}
+        />
+    )
+};

stories/login/pages/Code.stories.tsx

@@ -16,3 +16,42 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+export const WithErrorCode: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                code: {
+                    success: false,
+                    error: "Failed to generate code"
+                }
+            }}
+        />
+    )
+};
+export const WithFrenchLanguage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                locale: {
+                    currentLanguageTag: "fr"
+                },
+                code: {
+                    success: true,
+                    code: "XYZ789"
+                }
+            }}
+        />
+    )
+};
+export const WithHtmlErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                code: {
+                    success: false,
+                    error: "Something went wrong. <a href='https://example.com'>Try again</a>"
+                }
+            }}
+        />
+    )
+};

stories/login/pages/DeleteAccountConfirm.stories.tsx

@@ -16,3 +16,33 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+export const WithAIAFlow: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                triggered_from_aia: true,
+                url: { loginAction: "/login-action" }
+            }}
+        />
+    )
+};
+export const WithoutAIAFlow: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                triggered_from_aia: false,
+                url: { loginAction: "/login-action" }
+            }}
+        />
+    )
+};
+export const WithCustomButtonStyle: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                triggered_from_aia: true,
+                url: { loginAction: "/login-action" }
+            }}
+        />
+    )
+};

stories/login/pages/DeleteCredential.stories.tsx

@@ -16,3 +16,13 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+export const WithCustomCredentialLabel: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                credentialLabel: "Test Credential",
+                url: { loginAction: "/login-action" }
+            }}
+        />
+    )
+};

stories/login/pages/Error.stories.tsx

@@ -26,3 +26,38 @@ export const WithAnotherMessage: Story = {
         />
     )
 };
+
+export const WithHtmlErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: {
+                    summary: "<strong>Error:</strong> Something went wrong. <a href='https://example.com'>Go back</a>"
+                }
+            }}
+        />
+    )
+};
+export const FrenchError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                locale: { currentLanguageTag: "fr" },
+                message: { summary: "Une erreur s'est produite" }
+            }}
+        />
+    )
+};
+export const WithSkipLink: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: { summary: "An error occurred" },
+                skipLink: true,
+                client: {
+                    baseUrl: "https://example.com"
+                }
+            }}
+        />
+    )
+};

stories/login/pages/FrontchannelLogout.stories.tsx

@@ -16,3 +16,14 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+export const WithoutRedirectUrl: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                logout: {
+                    clients: []
+                }
+            }}
+        />
+    )
+};

stories/login/pages/IdpReviewUserProfile.stories.tsx

@@ -16,3 +16,47 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+export const WithFormValidationErrors: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                messagesPerField: {
+                    existsError: (fieldName: string) => ["email", "firstName"].includes(fieldName),
+                    get: (fieldName: string) => {
+                        if (fieldName === "email") return "Invalid email format.";
+                        if (fieldName === "firstName") return "First name is required.";
+                    }
+                }
+            }}
+        />
+    )
+};
+export const WithReadOnlyFields: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                profile: {
+                    attributesByName: {
+                        email: { value: "jane.doe@example.com", readOnly: true },
+                        firstName: { value: "Jane", readOnly: false }
+                    }
+                }
+            }}
+        />
+    )
+};
+export const WithPrefilledFormFields: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                profile: {
+                    attributesByName: {
+                        firstName: { value: "Jane" },
+                        lastName: { value: "Doe" },
+                        email: { value: "jane.doe@example.com" }
+                    }
+                }
+            }}
+        />
+    )
+};

stories/login/pages/Info.stories.tsx

@@ -55,3 +55,42 @@ export const WithRequiredActions: Story = {
         />
     )
 };
+export const WithPageRedirect: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: { summary: "You will be redirected shortly." },
+                pageRedirectUri: "https://example.com"
+            }}
+        />
+    )
+};
+export const WithoutClientBaseUrl: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: { summary: "No client base URL defined." },
+                client: { baseUrl: undefined }
+            }}
+        />
+    )
+};
+export const WithMessageHeader: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                messageHeader: "Important Notice",
+                message: { summary: "This is an important message." }
+            }}
+        />
+    )
+};
+export const WithAdvancedMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                message: { summary: "Please take note of this <strong>important</strong> information." }
+            }}
+        />
+    )
+};

stories/login/pages/Login.stories.tsx

@@ -231,3 +231,131 @@ export const WithErrorMessage: Story = {
         />
     )
 };
+
+export const WithOneSocialProvider: Story = {
+    render: args => (
+        <KcPageStory
+            {...args}
+            kcContext={{
+                social: {
+                    displayInfo: true,
+                    providers: [
+                        {
+                            loginUrl: "google",
+                            alias: "google",
+                            providerId: "google",
+                            displayName: "Google",
+                            iconClasses: "fa fa-google"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+
+export const WithTwoSocialProviders: Story = {
+    render: args => (
+        <KcPageStory
+            {...args}
+            kcContext={{
+                social: {
+                    displayInfo: true,
+                    providers: [
+                        {
+                            loginUrl: "google",
+                            alias: "google",
+                            providerId: "google",
+                            displayName: "Google",
+                            iconClasses: "fa fa-google"
+                        },
+                        {
+                            loginUrl: "microsoft",
+                            alias: "microsoft",
+                            providerId: "microsoft",
+                            displayName: "Microsoft",
+                            iconClasses: "fa fa-windows"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+export const WithNoSocialProviders: Story = {
+    render: args => (
+        <KcPageStory
+            {...args}
+            kcContext={{
+                social: {
+                    displayInfo: true,
+                    providers: []
+                }
+            }}
+        />
+    )
+};
+export const WithMoreThanTwoSocialProviders: Story = {
+    render: args => (
+        <KcPageStory
+            {...args}
+            kcContext={{
+                social: {
+                    displayInfo: true,
+                    providers: [
+                        {
+                            loginUrl: "google",
+                            alias: "google",
+                            providerId: "google",
+                            displayName: "Google",
+                            iconClasses: "fa fa-google"
+                        },
+                        {
+                            loginUrl: "microsoft",
+                            alias: "microsoft",
+                            providerId: "microsoft",
+                            displayName: "Microsoft",
+                            iconClasses: "fa fa-windows"
+                        },
+                        {
+                            loginUrl: "facebook",
+                            alias: "facebook",
+                            providerId: "facebook",
+                            displayName: "Facebook",
+                            iconClasses: "fa fa-facebook"
+                        },
+                        {
+                            loginUrl: "twitter",
+                            alias: "twitter",
+                            providerId: "twitter",
+                            displayName: "Twitter",
+                            iconClasses: "fa fa-twitter"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
+export const WithSocialProvidersAndWithoutRememberMe: Story = {
+    render: args => (
+        <KcPageStory
+            {...args}
+            kcContext={{
+                social: {
+                    displayInfo: true,
+                    providers: [
+                        {
+                            loginUrl: "google",
+                            alias: "google",
+                            providerId: "google",
+                            displayName: "Google",
+                            iconClasses: "fa fa-google"
+                        }
+                    ]
+                },
+                realm: { rememberMe: false }
+            }}
+        />
+    )
+};

stories/login/pages/LoginConfigTotp.stories.tsx

@@ -41,3 +41,24 @@ export const WithError: Story = {
         />
     )
 };
+export const WithAppInitiatedAction: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                isAppInitiatedAction: true
+            }}
+        />
+    )
+};
+
+export const WithPreFilledUserLabel: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                totp: {
+                    otpCredentials: [{ userLabel: "MyDevice" }]
+                }
+            }}
+        />
+    )
+};

stories/login/pages/LoginIdpLinkConfirm.stories.tsx

@@ -2,6 +2,14 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { createKcPageStory } from "../KcPageStory";
 
+// Mock kcContext to avoid the TS2304 error
+const mockKcContext = {
+    url: {
+        loginAction: "/login-action"
+    },
+    idpAlias: "mockIdpAlias"
+};
+
 const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-confirm.ftl" });
 
 const meta = {
@@ -13,6 +21,35 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/**
+ * Default:
+ * - Purpose: Tests standard behavior with mock data.
+ * - Scenario: The component renders with a mocked identity provider alias (`mockIdpAlias`) and a login action URL (`/login-action`).
+ * - Key Aspect: Ensures the default behavior of the component with standard values for kcContext.
+ */
 export const Default: Story = {
-    render: () => <KcPageStory />
+    render: () => <KcPageStory kcContext={mockKcContext} />
+};
+
+/**
+ * WithFormSubmissionError:
+ * - Purpose: Tests how the component handles form submission errors.
+ * - Scenario: Simulates a form submission error by setting the login action URL to `/error` and displays an error message.
+ * - Key Aspect: Verifies that the component can display error messages during form submission failure, ensuring proper error handling.
+ */
+export const WithFormSubmissionError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                ...mockKcContext,
+                url: {
+                    loginAction: "/error"
+                },
+                message: {
+                    type: "error",
+                    summary: "An error occurred during form submission."
+                }
+            }}
+        />
+    )
 };

stories/login/pages/LoginIdpLinkEmail.stories.tsx

@@ -2,6 +2,20 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { createKcPageStory } from "../KcPageStory";
 
+// Mock kcContext to avoid TS2304 error and to simulate the real environment
+const mockKcContext = {
+    url: {
+        loginAction: "/login-action"
+    },
+    idpAlias: "mockIdpAlias",
+    brokerContext: {
+        username: "mockUser"
+    },
+    realm: {
+        displayName: "MockRealm"
+    }
+};
+
 const { KcPageStory } = createKcPageStory({ pageId: "login-idp-link-email.ftl" });
 
 const meta = {
@@ -13,6 +27,81 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/**
+ * Default:
+ * - Purpose: Tests the default behavior with mock data.
+ * - Scenario: The component renders with a mocked identity provider alias (`mockIdpAlias`), a default broker username (`mockUser`), and a default realm name (`MockRealm`).
+ * - Key Aspect: Ensures the default behavior of the component with typical kcContext values.
+ */
 export const Default: Story = {
-    render: () => <KcPageStory />
+    render: () => <KcPageStory kcContext={mockKcContext} />
+};
+
+/**
+ * WithIdpAlias:
+ * - Purpose: Tests behavior when the idpAlias is set to "Google".
+ * - Scenario: Simulates the component being used with a Google identity provider, showing the username "john.doe" and realm "MyRealm".
+ * - Key Aspect: Ensures the correct identity provider alias ("Google") and broker context (user info) are displayed in the email linking instructions.
+ */
+export const WithIdpAlias: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                ...mockKcContext,
+                idpAlias: "Google",
+                brokerContext: {
+                    username: "john.doe"
+                },
+                realm: {
+                    displayName: "MyRealm"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithCustomRealmDisplayName:
+ * - Purpose: Tests behavior when the realm display name is customized.
+ * - Scenario: Simulates the component with a Facebook identity provider, a broker username "jane.doe", and a custom realm name "CustomRealm".
+ * - Key Aspect: Ensures that custom realm display names are rendered correctly alongside the idpAlias and broker context.
+ */
+export const WithCustomRealmDisplayName: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                ...mockKcContext,
+                idpAlias: "Facebook",
+                brokerContext: {
+                    username: "jane.doe"
+                },
+                realm: {
+                    displayName: "CUSTOM REALM DISPLAY NAME"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithFormSubmissionError:
+ * - Purpose: Tests how the component handles form submission errors.
+ * - Scenario: Simulates a form submission error by setting the login action URL to `/error` and displays an error message.
+ * - Key Aspect: Verifies that the component can display error messages during form submission failure, ensuring proper error handling.
+ */
+export const WithFormSubmissionError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                ...mockKcContext,
+                url: {
+                    loginAction: "/error"
+                },
+                message: {
+                    type: "error",
+                    summary: "An error occurred during form submission."
+                }
+            }}
+        />
+    )
 };

stories/login/pages/LoginOauth2DeviceVerifyUserCode.stories.tsx

@@ -16,3 +16,47 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithErrorMessage:
+ * - Purpose: Tests when there is an error with the OAuth2 device user code entry.
+ * - Scenario: The component renders with an error message displayed to the user.
+ * - Key Aspect: Ensures the error message is properly shown when the user enters an invalid code.
+ */
+export const WithErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
+                },
+                message: {
+                    summary: "The user code you entered is invalid. Please try again.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithEmptyInputField:
+ * - Purpose: Tests when the user code field is left empty.
+ * - Scenario: The component renders the form, and the user tries to submit without entering any code.
+ * - Key Aspect: Ensures the form displays validation errors when the field is left empty.
+ */
+export const WithEmptyInputField: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    oauth2DeviceVerificationAction: "/mock-oauth2-device-verification"
+                },
+                message: {
+                    summary: "User code cannot be empty. Please enter a valid code.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};

stories/login/pages/LoginOauthGrant.stories.tsx

@@ -2,6 +2,25 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { createKcPageStory } from "../KcPageStory";
 
+// Mock kcContext to simulate real environment
+const mockKcContext = {
+    url: {
+        oauthAction: "/oauth-action"
+    },
+    oauth: {
+        clientScopesRequested: [{ consentScreenText: "Scope1", dynamicScopeParameter: "dynamicScope1" }, { consentScreenText: "Scope2" }],
+        code: "mockCode"
+    },
+    client: {
+        attributes: {
+            policyUri: "https://twitter.com/en/tos",
+            tosUri: "https://twitter.com/en/privacy"
+        },
+        name: "Twitter",
+        clientId: "twitter-client-id"
+    }
+};
+
 const { KcPageStory } = createKcPageStory({ pageId: "login-oauth-grant.ftl" });
 
 const meta = {
@@ -13,6 +32,55 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/**
+ * Default:
+ * - Purpose: Tests the default behavior with meaningful logo (Twitter).
+ * - Scenario: The component renders with Twitter as the client, displaying its logo, policy, and terms of service links.
+ * - Key Aspect: Ensures the component works with a realistic `logoUri` and client name.
+ */
 export const Default: Story = {
-    render: () => <KcPageStory />
+    render: () => <KcPageStory kcContext={mockKcContext} />
+};
+
+/**
+ * WithoutScopes:
+ * - Purpose: Tests the component when no OAuth scopes are requested.
+ * - Scenario: The component renders with no scopes listed under the consent screen.
+ * - Key Aspect: Ensures the component renders correctly when there are no requested scopes.
+ */
+export const WithoutScopes: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                ...mockKcContext,
+                oauth: {
+                    ...mockKcContext.oauth,
+                    clientScopesRequested: []
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithFormSubmissionError:
+ * - Purpose: Tests how the component handles form submission errors.
+ * - Scenario: The `oauthAction` URL is set to an error route and an error message is displayed.
+ * - Key Aspect: Ensures that the component can display error messages when form submission fails.
+ */
+export const WithFormSubmissionError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                ...mockKcContext,
+                url: {
+                    oauthAction: "/error"
+                },
+                message: {
+                    type: "error",
+                    summary: "An error occurred during form submission."
+                }
+            }}
+        />
+    )
 };

stories/login/pages/LoginOtp.stories.tsx

@@ -16,3 +16,113 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * MultipleOtpCredentials:
+ * - Purpose: Tests the behavior when the user has multiple OTP credentials to choose from.
+ * - Scenario: Simulates the scenario where the user is presented with multiple OTP credentials and must select one to proceed.
+ * - Key Aspect: Ensures that multiple OTP credentials are listed and selectable, and the correct credential is selected by default.
+ */
+export const MultipleOtpCredentials: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                otpLogin: {
+                    userOtpCredentials: [
+                        { id: "credential1", userLabel: "Device 1" },
+                        { id: "credential2", userLabel: "Device 2" },
+                        { id: "credential2", userLabel: "Device 3" },
+                        { id: "credential2", userLabel: "Device 4" },
+                        { id: "credential2", userLabel: "Device 5" },
+                        { id: "credential2", userLabel: "Device 6" }
+                    ],
+                    selectedCredentialId: "credential1"
+                },
+                url: {
+                    loginAction: "/login-action"
+                },
+                messagesPerField: {
+                    existsError: () => false
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithOtpError:
+ * - Purpose: Tests the behavior when an error occurs with the OTP field (e.g., invalid OTP code).
+ * - Scenario: Simulates an invalid OTP code scenario where an error message is displayed.
+ * - Key Aspect: Ensures that the OTP input displays error messages correctly and the error is visible.
+ */
+export const WithOtpError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                otpLogin: {
+                    userOtpCredentials: []
+                },
+                url: {
+                    loginAction: "/login-action"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "totp",
+                    get: () => "Invalid OTP code"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * NoOtpCredentials:
+ * - Purpose: Tests the behavior when no OTP credentials are provided for the user.
+ * - Scenario: Simulates the scenario where the user is not presented with any OTP credentials, and only the OTP input is displayed.
+ * - Key Aspect: Ensures that the component handles cases where there are no user OTP credentials, and the user is only prompted for the OTP code.
+ */
+export const NoOtpCredentials: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                otpLogin: {
+                    userOtpCredentials: []
+                },
+                url: {
+                    loginAction: "/login-action"
+                },
+                messagesPerField: {
+                    existsError: () => false
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithErrorAndMultipleOtpCredentials:
+ * - Purpose: Tests behavior when there is both an error in the OTP field and multiple OTP credentials.
+ * - Scenario: Simulates the case where the user has multiple OTP credentials and encounters an error with the OTP input.
+ * - Key Aspect: Ensures that the component can handle both multiple OTP credentials and display an error message simultaneously.
+ */
+export const WithErrorAndMultipleOtpCredentials: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                otpLogin: {
+                    userOtpCredentials: [
+                        { id: "credential1", userLabel: "Device 1" },
+                        { id: "credential2", userLabel: "Device 2" }
+                    ],
+                    selectedCredentialId: "credential1"
+                },
+                url: {
+                    loginAction: "/login-action"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "totp",
+                    get: () => "Invalid OTP code"
+                }
+            }}
+        />
+    )
+};

stories/login/pages/LoginPageExpired.stories.tsx

@@ -16,3 +16,26 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithErrorMessage:
+ * - Purpose: Tests behavior when an error message is displayed along with the page expiration message.
+ * - Scenario: Simulates a case where the session expired due to an error, and an error message is displayed alongside the expiration message.
+ * - Key Aspect: Ensures that error messages are displayed correctly in addition to the page expiration notice.
+ */
+export const WithErrorMessage: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginRestartFlowUrl: "/mock-restart-flow",
+                    loginAction: "/mock-continue-login"
+                },
+                message: {
+                    type: "error",
+                    summary: "An error occurred while processing your session."
+                }
+            }}
+        />
+    )
+};

stories/login/pages/LoginPassword.stories.tsx

@@ -16,3 +16,54 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithPasswordError:
+ * - Purpose: Tests the behavior when an error occurs in the password field (e.g., incorrect password).
+ * - Scenario: Simulates a scenario where an invalid password is entered, and an error message is displayed.
+ * - Key Aspect: Ensures that the password input field displays error messages correctly.
+ */
+export const WithPasswordError: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: {
+                    resetPasswordAllowed: true
+                },
+                url: {
+                    loginAction: "/mock-login",
+                    loginResetCredentialsUrl: "/mock-reset-password"
+                },
+                messagesPerField: {
+                    existsError: (field: string) => field === "password",
+                    get: () => "Invalid password"
+                }
+            }}
+        />
+    )
+};
+
+/**
+ * WithoutResetPasswordOption:
+ * - Purpose: Tests the behavior when the reset password option is disabled.
+ * - Scenario: Simulates a scenario where the `resetPasswordAllowed` is set to `false`, and the "Forgot Password" link is not rendered.
+ * - Key Aspect: Ensures that the component handles cases where resetting the password is not allowed.
+ */
+export const WithoutResetPasswordOption: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                realm: {
+                    resetPasswordAllowed: false
+                },
+                url: {
+                    loginAction: "/mock-login",
+                    loginResetCredentialsUrl: "/mock-reset-password"
+                },
+                messagesPerField: {
+                    existsError: () => false
+                }
+            }}
+        />
+    )
+};

stories/login/pages/LoginRecoveryAuthnCodeConfig.stories.tsx

@@ -16,3 +16,25 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     render: () => <KcPageStory />
 };
+
+/**
+ * WithErrorDuringCodeGeneration:
+ * - Purpose: Tests when an error occurs while generating recovery authentication codes.
+ * - Scenario: The component renders an error message to inform the user of the failure during code generation.
+ * - Key Aspect: Ensures that error messages are properly displayed when recovery code generation fails.
+ */
+export const WithErrorDuringCodeGeneration: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                url: {
+                    loginAction: "/mock-login-action"
+                },
+                message: {
+                    summary: "An error occurred during recovery code generation. Please try again.",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};