Bump version

fix typing of algToKeyUriAlg + totp interface + cleanup build dir

.all-contributorsrc

@@ -131,6 +131,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "thosil",
+      "name": "Thomas Silvestre",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1140574?v=4",
+      "profile": "https://www.gravitysoftware.be",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/ci.yaml

@@ -44,7 +44,7 @@ jobs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: '16'
+        node-version: '18'
     - uses: bahmutov/npm-install@v1
     - run: yarn build-storybook -o ./build_storybook
     - run: git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${{github.repository}}.git

.gitignore

@@ -53,5 +53,9 @@ jspm_packages
 
 # VS Code devcontainers
 .devcontainer
+/.yarn
+/.yarnrc.yml
 
 /stories/assets/fonts/
+/build_storybook/
+/storybook-static/

.prettierignore

@@ -8,8 +8,8 @@ node_modules/
 /.vscode/
 /src/login/i18n/baseMessages/
 /src/account/i18n/baseMessages/
-# Test Build Directories
 /dist_test
 /sample_react_project/
 /sample_custom_react_project/
-/keycloakify_starter_test/
+/keycloakify_starter_test/
+/.storybook/static/keycloak-resources/

.storybook/Containers.js

@@ -3,8 +3,9 @@ import React from "react";
 import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
 import { useDarkMode } from "storybook-dark-mode";
 import { darkTheme, lightTheme } from "./customTheme";
+import "./static/fonts/WorkSans/font.css";
 
-export const DocsContainer = ({ children, context }) => {
+export function DocsContainer({ children, context }) {
     const isStorybookUiDark = useDarkMode();
 
     const theme = isStorybookUiDark ? darkTheme : lightTheme;
@@ -15,7 +16,7 @@ export const DocsContainer = ({ children, context }) => {
         <>
             <style>{`
                 body {
-                    padding: 0 !important,
+                    padding: 0 !important;
                     background-color: ${backgroundColor};
                 }
 
@@ -57,4 +58,19 @@ export const DocsContainer = ({ children, context }) => {
             </BaseContainer>
         </>
     );
-};
+}
+
+export function CanvasContainer({ children }) {
+
+    return (
+        <>
+            <style>{`
+                body {
+                    padding: 0 !important;
+                }
+            `}</style>
+            {children}
+        </>
+    );
+
+}

.storybook/main.js

@@ -1,8 +1,6 @@
 module.exports = {
     "stories": [
-        "../stories/*.stories.mdx",
-        "../stories/*.stories.@(ts|tsx)",
-        "../stories/**/*.stories.@(ts|tsx)"
+        "../stories/**/*.stories.@(ts|tsx|mdx)"
     ],
     "addons": [
         "@storybook/addon-links",

.storybook/manager.js

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

.storybook/preview.js

@@ -1,5 +1,5 @@
 import { darkTheme, lightTheme } from "./customTheme";
-import { DocsContainer } from "./DocsContainer";
+import { DocsContainer, CanvasContainer } from "./Containers";
 
 export const parameters = {
     "actions": { "argTypesRegex": "^on[A-Z].*" },
@@ -17,6 +17,12 @@ export const parameters = {
     "docs": {
         "container": DocsContainer
     },
+    "controls": {
+        "disable": true,
+    },
+    "actions": {
+        "disable": true
+    },
     "viewport": {
         "viewports": {
             "1440p": {
@@ -68,7 +74,7 @@ export const parameters = {
                     "height": "844px",
                 },
             },
-            "iphone5se":{
+            "iphone5se": {
                 "name": "Iphone 5/SE",
                 "styles": {
                     "width": "320px",
@@ -97,16 +103,20 @@ export const parameters = {
     },
 };
 
+export const decorators = [
+    (Story) => (
+        <CanvasContainer>
+            <Story />
+        </CanvasContainer>
+    ),
+];
+
 const { getHardCodedWeight } = (() => {
 
     const orderedPagesPrefix = [
         "Introduction",
-        //"components/Header",
-        //"components/Footer",
-        "components/Alert",
-        "components/Tabs",
-        "components/Stepper",
-        "components/Button",
+        "login/login.ftl",
+        "login/error.ftl",
     ];
 
     function getHardCodedWeight(kind) {

README.md

@@ -20,6 +20,9 @@
     <a href="https://github.com/thomasdarimont/awesome-keycloak">
         <img src="https://awesome.re/mentioned-badge.svg"/>
     </a>
+    <a href="https://discord.gg/rBzsYtUn">
+        <img src="https://img.shields.io/discord/1097708346976505977"/>
+    </a>
     <p align="center">
         <a href="https://www.keycloakify.dev">Home</a>
         -
@@ -51,7 +54,7 @@ Their dedicated support helps us continue the development and maintenance of thi
       <img src="https://user-images.githubusercontent.com/6702424/232165752-17134e68-4a55-4d6e-8672-e9132ecac5d5.svg" alt="Cloud IAM Logo" width="200"/>
     </a>
     <br/>
-    <i>Use promo code <code>keycloakify</code>  </i>
+    <i>Use promo code <code>keycloakify5</code>  </i>
     <br/>
     <i>5% of your annual subscription will be donated to us, and you'll get 5% off too.</i>
 </p>
@@ -83,7 +86,10 @@ 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/lazToum"><img src="https://avatars.githubusercontent.com/u/4764837?v=4?s=100" width="100px;" alt="Lazaros Toumanidis"/><br /><sub><b>Lazaros Toumanidis</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=lazToum" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/marcmrf"><img src="https://avatars.githubusercontent.com/u/9928519?v=4?s=100" width="100px;" alt="Marc"/><br /><sub><b>Marc</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=marcmrf" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://kasir-barati.github.io"><img src="https://avatars.githubusercontent.com/u/73785723?v=4?s=100" width="100px;" alt="Kasir Barati"/><br /><sub><b>Kasir Barati</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=kasir-barati" title="Documentation">📖</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/asashay"><img src="https://avatars.githubusercontent.com/u/10714670?v=4?s=100" width="100px;" alt="Alex Oliynyk"/><br /><sub><b>Alex Oliynyk</b></sub></a><br /> <a href="https://github.com/keycloakify/keycloakify/commits?author=asashay" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/asashay"><img src="https://avatars.githubusercontent.com/u/10714670?v=4?s=100" width="100px;" alt="Alex Oliynyk"/><br /><sub><b>Alex Oliynyk</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=asashay" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.gravitysoftware.be"><img src="https://avatars.githubusercontent.com/u/1140574?v=4?s=100" width="100px;" alt="Thomas Silvestre"/><br /><sub><b>Thomas Silvestre</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=thosil" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
@@ -93,7 +99,17 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-## Changelog highlights
+# Changelog highlights
+
+## 7.9
+
+-   Separate script for copying the default theme static assets to the public directory.  
+    Theses assets are only needed for testing your theme locally in Storybook or with a `mockPageId`.  
+    You are now expected to have a `"prepare": "copy-keycloak-resources-to-public",` in your package.json scripts.  
+    This script will create `public/keycloak-assets` when you run `yarn install` (If you are using another package manager
+    like `pnpm` makes sure that `"prepare"` is actually ran.)  
+    [See the updated starter](https://github.com/keycloakify/keycloakify-starter/blob/94532fcf10bf8b19e0873be8575fd28a8958a806/package.json#L11).  
+    `public/keycloak-assets` shouldn't be tracked by GIT and is automatically ignored.
 
 ## 7.7
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "7.7.1",
+    "version": "7.9.2",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -9,9 +9,9 @@
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "scripts": {
-        "prepare": "yarn generate-i18n-messages && yarn copy-fonts",
-        "build": "rimraf dist/ && tsc -p src/bin && tsc -p src/tsconfig.json && tsc-alias -p src/tsconfig.json && yarn grant-exec-perms && yarn copy-files dist/",
-        "build:watch": "tsc -p src/tsconfig.json && (concurrently \"tsc -p src/tsconfig.json -w\" \"tsc-alias -p src/tsconfig.json\")",
+        "prepare": "yarn generate-i18n-messages",
+        "build": "rimraf dist/ && tsc -p src/bin && tsc -p src && tsc-alias -p src/tsconfig.json && yarn grant-exec-perms && yarn copy-files dist/",
+        "watch-in-starter": "yarn build && yarn link-in-starter && (concurrently \"tsc -p src -w\" \"tsc-alias -p src/tsconfig.json\" \"tsc -p src/bin -w\")",
         "generate:json-schema": "ts-node scripts/generate-json-schema.ts",
         "grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
         "copy-files": "copyfiles -u 1 src/**/*.ftl",
@@ -24,16 +24,16 @@
         "generate-i18n-messages": "ts-node --skipProject scripts/generate-i18n-messages.ts",
         "link-in-app": "ts-node --skipProject scripts/link-in-app.ts",
         "link-in-starter": "yarn link-in-app keycloakify-starter",
-        "tsc-watch": "tsc -p src/bin -w & tsc -p src/lib -w",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook",
-        "copy-fonts": "copyfiles -u 2 .storybook/static/fonts/**/* stories/assets"
+        "copy-keycloak-resources-to-storybook-static": "PUBLIC_DIR_PATH=.storybook/static node dist/bin/copy-keycloak-resources-to-public.js",
+        "storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && start-storybook -p 6006",
+        "build-storybook": "yarn build && yarn copy-keycloak-resources-to-storybook-static && build-storybook"
     },
     "bin": {
-        "keycloakify": "dist/bin/keycloakify/index.js",
-        "initialize-email-theme": "dist/bin/initialize-email-theme.js",
+        "copy-keycloak-resources-to-public": "dist/bin/copy-keycloak-resources-to-public.js",
         "download-builtin-keycloak-theme": "dist/bin/download-builtin-keycloak-theme.js",
-        "eject-keycloak-page": "dist/bin/eject-keycloak-page.js"
+        "eject-keycloak-page": "dist/bin/eject-keycloak-page.js",
+        "initialize-email-theme": "dist/bin/initialize-email-theme.js",
+        "keycloakify": "dist/bin/keycloakify/index.js"
     },
     "lint-staged": {
         "*.{ts,tsx,json,md}": [
@@ -69,6 +69,7 @@
     },
     "devDependencies": {
         "@babel/core": "^7.0.0",
+        "@emotion/react": "^11.10.6",
         "@storybook/addon-a11y": "^6.5.16",
         "@storybook/addon-actions": "^6.5.13",
         "@storybook/addon-essentials": "^6.5.13",
@@ -84,11 +85,12 @@
         "@types/react": "^18.0.35",
         "@types/react-dom": "^18.0.11",
         "@types/yauzl": "^2.10.0",
-        "concurrently": "^7.6.0",
+        "concurrently": "^8.0.1",
         "copyfiles": "^2.4.1",
         "eslint-plugin-storybook": "^0.6.7",
         "husky": "^4.3.8",
         "lint-staged": "^11.0.0",
+        "powerhooks": "^0.26.7",
         "prettier": "^2.3.0",
         "properties-parser": "^0.3.1",
         "react": "^18.2.0",
@@ -98,7 +100,8 @@
         "storybook-dark-mode": "^1.1.2",
         "ts-node": "^10.9.1",
         "tsc-alias": "^1.8.3",
-        "typescript": "^5.0.4",
+        "tss-react": "^4.8.2",
+        "typescript": "^4.9.1-beta",
         "vitest": "^0.29.8",
         "zod-to-json-schema": "^3.20.4"
     },

scripts/generate-i18n-messages.ts

@@ -4,7 +4,6 @@ import { join as pathJoin, relative as pathRelative, dirname as pathDirname, sep
 import { crawl } from "../src/bin/tools/crawl";
 import { downloadBuiltinKeycloakTheme } from "../src/bin/download-builtin-keycloak-theme";
 import { getProjectRoot } from "../src/bin/tools/getProjectRoot";
-import { getCliOptions } from "../src/bin/tools/cliOptions";
 import { getLogger } from "../src/bin/tools/logger";
 
 // NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
@@ -13,7 +12,8 @@ import { getLogger } from "../src/bin/tools/logger";
 //@ts-ignore
 const propertiesParser = require("properties-parser");
 
-const { isSilent } = getCliOptions(process.argv.slice(2));
+const isSilent = true;
+
 const logger = getLogger({ isSilent });
 
 async function main() {

src/account/kcContext/KcContext.ts

@@ -26,6 +26,7 @@ export declare namespace KcContext {
             resourceUrl: string;
             resourcesCommonPath: string;
             resourcesPath: string;
+            referrerURI?: string;
             getLogoutUrl: () => string;
         };
         features: {
@@ -71,7 +72,6 @@ export declare namespace KcContext {
     export type Account = Common & {
         pageId: "account.ftl";
         url: {
-            referrerURI: string;
             accountUrl: string;
         };
         realm: {

src/account/kcContext/createGetKcContext.ts

@@ -4,7 +4,7 @@ import type { ExtendKcContext } from "./getKcContextFromWindow";
 import { getKcContextFromWindow } from "./getKcContextFromWindow";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { pathBasename } from "keycloakify/tools/pathBasename";
-import { mockTestingResourcesCommonPath } from "keycloakify/bin/mockTestingResourcesPath";
+import { resourcesCommonDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { symToStr } from "tsafe/symToStr";
 import { kcContextMocks, kcContextCommonMock } from "keycloakify/account/kcContext/kcContextMocks";
 import { id } from "tsafe/id";
@@ -30,13 +30,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
         if (mockPageId !== undefined && realKcContext === undefined) {
             //TODO maybe trow if no mock fo custom page
 
-            console.log(
-                [
-                    `%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`,
-                    `If assets are missing make sure you have built your Keycloak theme at least once.`
-                ].join(" "),
-                "background: red; color: yellow; font-size: medium"
-            );
+            console.log(`%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`, "background: red; color: yellow; font-size: medium");
 
             const kcContextDefaultMock = kcContextMocks.find(({ pageId }) => pageId === mockPageId);
 
@@ -100,7 +94,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
         {
             const { url } = realKcContext;
 
-            url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(mockTestingResourcesCommonPath));
+            url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(resourcesCommonDirPathRelativeToPublicDir));
         }
 
         return { "kcContext": realKcContext as any };

src/account/kcContext/kcContextMocks.ts

@@ -1,5 +1,5 @@
 import "minimal-polyfills/Object.fromEntries";
-import { mockTestingResourcesCommonPath, mockTestingResourcesPath } from "keycloakify/bin/mockTestingResourcesPath";
+import { resourcesCommonDirPathRelativeToPublicDir, resourcesDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { id } from "tsafe/id";
 import type { KcContext } from "./KcContext";
@@ -9,8 +9,8 @@ const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
 export const kcContextCommonMock: KcContext.Common = {
     "keycloakifyVersion": "0.0.0",
     "url": {
-        "resourcesPath": pathJoin(PUBLIC_URL, mockTestingResourcesPath),
-        "resourcesCommonPath": pathJoin(PUBLIC_URL, mockTestingResourcesCommonPath),
+        "resourcesPath": pathJoin(PUBLIC_URL, resourcesDirPathRelativeToPublicDir),
+        "resourcesCommonPath": pathJoin(PUBLIC_URL, resourcesCommonDirPathRelativeToPublicDir),
         "resourceUrl": "#",
         "accountUrl": "#",
         "applicationsUrl": "#",

src/account/pages/Account.tsx

@@ -4,7 +4,7 @@ import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
-export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
+export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({
@@ -99,7 +99,7 @@ export default function LogoutConfirm(props: PageProps<Extract<KcContext, { page
                 <div className="form-group">
                     <div id="kc-form-buttons" className="col-md-offset-2 col-md-10 submit">
                         <div>
-                            {url.referrerURI !== undefined && <a href={url.referrerURI}>${msg("backToApplication")}</a>}
+                            {url.referrerURI !== undefined && <a href={url.referrerURI}>{msg("backToApplication")}</a>}
                             <button
                                 type="submit"
                                 className={clsx(

src/account/pages/Password.tsx

@@ -4,7 +4,7 @@ import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
-export default function LogoutConfirm(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
+export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
     const { getClassName } = useGetClassName({

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

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+import { downloadKeycloakStaticResources } from "./keycloakify/generateTheme/downloadKeycloakStaticResources";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { basenameOfKeycloakDirInPublicDir } from "./mockTestingResourcesPath";
+import { readBuildOptions } from "./keycloakify/BuildOptions";
+import { themeTypes } from "./keycloakify/generateFtl";
+import * as fs from "fs";
+
+(async () => {
+    const projectDirPath = process.cwd();
+
+    const buildOptions = readBuildOptions({
+        "processArgv": process.argv.slice(2),
+        "projectDirPath": process.cwd()
+    });
+
+    const keycloakDirInPublicDir = pathJoin(process.env["PUBLIC_DIR_PATH"] || pathJoin(projectDirPath, "public"), basenameOfKeycloakDirInPublicDir);
+
+    if (fs.existsSync(keycloakDirInPublicDir)) {
+        console.log(`${pathRelative(projectDirPath, keycloakDirInPublicDir)} already exists.`);
+        return;
+    }
+
+    for (const themeType of themeTypes) {
+        await downloadKeycloakStaticResources({
+            "isSilent": false,
+            "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
+            "themeType": themeType,
+            "themeDirPath": keycloakDirInPublicDir
+        });
+    }
+
+    fs.writeFileSync(
+        pathJoin(keycloakDirInPublicDir, "README.txt"),
+        Buffer.from(
+            // prettier-ignore
+            [
+                "This is just a test folder that helps develop",
+                "the login and register page without having to run a Keycloak container"
+            ].join(" ")
+        )
+    );
+
+    fs.writeFileSync(pathJoin(keycloakDirInPublicDir, ".gitignore"), Buffer.from("*", "utf8"));
+
+    console.log(`${pathRelative(projectDirPath, keycloakDirInPublicDir)} directory created.`);
+})();

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

@@ -2,7 +2,6 @@
 import { join as pathJoin } from "path";
 import { downloadAndUnzip } from "./tools/downloadAndUnzip";
 import { promptKeycloakVersion } from "./promptKeycloakVersion";
-import { getCliOptions } from "./tools/cliOptions";
 import { getLogger } from "./tools/logger";
 import { readBuildOptions } from "./keycloakify/BuildOptions";
 
@@ -21,28 +20,22 @@ export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: st
 }
 
 async function main() {
-    const { isSilent } = getCliOptions(process.argv.slice(2));
-    const logger = getLogger({ isSilent });
+    const buildOptions = readBuildOptions({
+        "projectDirPath": process.cwd(),
+        "processArgv": process.argv.slice(2)
+    });
+
+    const logger = getLogger({ "isSilent": buildOptions.isSilent });
     const { keycloakVersion } = await promptKeycloakVersion();
 
-    const destDirPath = pathJoin(
-        readBuildOptions({
-            "isSilent": true,
-            "isExternalAssetsCliParamProvided": false,
-            "projectDirPath": process.cwd()
-        }).keycloakifyBuildDirPath,
-        "src",
-        "main",
-        "resources",
-        "theme"
-    );
+    const destDirPath = pathJoin(buildOptions.keycloakifyBuildDirPath, "src", "main", "resources", "theme");
 
     logger.log(`Downloading builtins theme of Keycloak ${keycloakVersion} here ${destDirPath}`);
 
     await downloadBuiltinKeycloakTheme({
         keycloakVersion,
         destDirPath,
-        isSilent
+        "isSilent": buildOptions.isSilent
     });
 }
 

src/bin/initialize-email-theme.ts

@@ -4,13 +4,17 @@ import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme"
 import { join as pathJoin, relative as pathRelative } from "path";
 import { transformCodebase } from "./tools/transformCodebase";
 import { promptKeycloakVersion } from "./promptKeycloakVersion";
+import { readBuildOptions } from "./keycloakify/BuildOptions";
 import * as fs from "fs";
-import { getCliOptions } from "./tools/cliOptions";
 import { getLogger } from "./tools/logger";
 import { getEmailThemeSrcDirPath } from "./getSrcDirPath";
 
 export async function main() {
-    const { isSilent } = getCliOptions(process.argv.slice(2));
+    const { isSilent } = readBuildOptions({
+        "projectDirPath": process.cwd(),
+        "processArgv": process.argv.slice(2)
+    });
+
     const logger = getLogger({ isSilent });
 
     const { emailThemeSrcDirPath } = getEmailThemeSrcDirPath({

src/bin/keycloakify/BuildOptions.ts

@@ -6,6 +6,7 @@ import { symToStr } from "tsafe/symToStr";
 import { bundlers, getParsedPackageJson, type Bundler } from "./parsedPackageJson";
 import * as fs from "fs";
 import { join as pathJoin, sep as pathSep } from "path";
+import parseArgv from "minimist";
 
 /** Consolidated build option gathered form CLI arguments and config in package.json */
 export type BuildOptions = BuildOptions.Standalone | BuildOptions.ExternalAssets;
@@ -53,8 +54,17 @@ export namespace BuildOptions {
     }
 }
 
-export function readBuildOptions(params: { projectDirPath: string; isExternalAssetsCliParamProvided: boolean; isSilent: boolean }): BuildOptions {
-    const { projectDirPath, isExternalAssetsCliParamProvided, isSilent } = params;
+export function readBuildOptions(params: { projectDirPath: string; processArgv: string[] }): BuildOptions {
+    const { projectDirPath, processArgv } = params;
+
+    const { isExternalAssetsCliParamProvided, isSilentCliParamProvided } = (() => {
+        const argv = parseArgv(processArgv);
+
+        return {
+            "isSilentCliParamProvided": typeof argv["silent"] === "boolean" ? argv["silent"] : false,
+            "isExternalAssetsCliParamProvided": typeof argv["external-assets"] === "boolean" ? argv["external-assets"] : false
+        };
+    })();
 
     const parsedPackageJson = getParsedPackageJson({ projectDirPath });
 
@@ -143,7 +153,7 @@ export function readBuildOptions(params: { projectDirPath: string; isExternalAss
             "extraLoginPages": [...(extraPages ?? []), ...(extraLoginPages ?? [])],
             extraAccountPages,
             extraThemeProperties,
-            isSilent,
+            "isSilent": isSilentCliParamProvided,
             "keycloakVersionDefaultAssets": keycloakVersionDefaultAssets ?? "11.0.3",
             "reactAppBuildDirPath": (() => {
                 let { reactAppBuildDirPath = undefined } = parsedPackageJson.keycloakify ?? {};

src/bin/keycloakify/generateTheme/downloadKeycloakStaticResources.ts

@@ -0,0 +1,47 @@
+import { transformCodebase } from "../../tools/transformCodebase";
+import * as fs from "fs";
+import { join as pathJoin, relative as pathRelative } from "path";
+import type { ThemeType } from "../generateFtl";
+import { downloadBuiltinKeycloakTheme } from "../../download-builtin-keycloak-theme";
+import {
+    resourcesCommonDirPathRelativeToPublicDir,
+    resourcesDirPathRelativeToPublicDir,
+    basenameOfKeycloakDirInPublicDir
+} from "../../mockTestingResourcesPath";
+import * as crypto from "crypto";
+
+export async function downloadKeycloakStaticResources(
+    // prettier-ignore
+    params: {
+        themeType: ThemeType;
+        themeDirPath: string;
+        isSilent: boolean;
+        keycloakVersion: string;
+    }
+) {
+    const { themeType, isSilent, themeDirPath, keycloakVersion } = params;
+
+    const tmpDirPath = pathJoin(
+        themeDirPath,
+        "..",
+        `tmp_suLeKsxId_${crypto.createHash("sha256").update(`${themeType}-${keycloakVersion}`).digest("hex").slice(0, 8)}`
+    );
+
+    await downloadBuiltinKeycloakTheme({
+        keycloakVersion,
+        "destDirPath": tmpDirPath,
+        isSilent
+    });
+
+    transformCodebase({
+        "srcDirPath": pathJoin(tmpDirPath, "keycloak", themeType, "resources"),
+        "destDirPath": pathJoin(themeDirPath, pathRelative(basenameOfKeycloakDirInPublicDir, resourcesDirPathRelativeToPublicDir))
+    });
+
+    transformCodebase({
+        "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
+        "destDirPath": pathJoin(themeDirPath, pathRelative(basenameOfKeycloakDirInPublicDir, resourcesCommonDirPathRelativeToPublicDir))
+    });
+
+    fs.rmSync(tmpDirPath, { "recursive": true, "force": true });
+}

src/bin/keycloakify/generateTheme/generateTheme.ts

@@ -1,14 +1,14 @@
-import { transformCodebase } from "../tools/transformCodebase";
+import { transformCodebase } from "../../tools/transformCodebase";
 import * as fs from "fs";
-import { join as pathJoin, basename as pathBasename } from "path";
-import { replaceImportsFromStaticInJsCode } from "./replacers/replaceImportsFromStaticInJsCode";
-import { replaceImportsInCssCode } from "./replacers/replaceImportsInCssCode";
-import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds, themeTypes, type ThemeType } from "./generateFtl";
-import { downloadBuiltinKeycloakTheme } from "../download-builtin-keycloak-theme";
-import { mockTestingResourcesCommonPath, mockTestingResourcesPath, mockTestingSubDirOfPublicDirBasename } from "../mockTestingResourcesPath";
-import { isInside } from "../tools/isInside";
-import type { BuildOptions } from "./BuildOptions";
+import { join as pathJoin } from "path";
+import { replaceImportsFromStaticInJsCode } from "../replacers/replaceImportsFromStaticInJsCode";
+import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
+import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds, themeTypes, type ThemeType } from "../generateFtl";
+import { basenameOfKeycloakDirInPublicDir } from "../../mockTestingResourcesPath";
+import { isInside } from "../../tools/isInside";
+import type { BuildOptions } from "../BuildOptions";
 import { assert } from "tsafe/assert";
+import { downloadKeycloakStaticResources } from "./downloadKeycloakStaticResources";
 
 export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
 
@@ -21,6 +21,7 @@ export namespace BuildOptionsLike {
         isSilent: boolean;
         customUserAttributes: string[];
         themeVersion: string;
+        keycloakVersionDefaultAssets: string;
     };
 
     export type Standalone = Common & {
@@ -49,15 +50,14 @@ export namespace BuildOptionsLike {
 
 assert<BuildOptions extends BuildOptionsLike ? true : false>();
 
-export async function generateKeycloakThemeResources(params: {
+export async function generateTheme(params: {
     reactAppBuildDirPath: string;
     keycloakThemeBuildingDirPath: string;
     emailThemeSrcDirPath: string | undefined;
-    keycloakVersion: string;
     buildOptions: BuildOptionsLike;
     keycloakifyVersion: string;
 }): Promise<{ doBundlesEmailTemplate: boolean }> {
-    const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, emailThemeSrcDirPath, keycloakVersion, buildOptions, keycloakifyVersion } = params;
+    const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, emailThemeSrcDirPath, buildOptions, keycloakifyVersion } = params;
 
     const getThemeDirPath = (themeType: ThemeType | "email") =>
         pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", buildOptions.themeName, themeType);
@@ -84,7 +84,7 @@ export async function generateKeycloakThemeResources(params: {
                     if (
                         buildOptions.isStandalone &&
                         isInside({
-                            "dirPath": pathJoin(reactAppBuildDirPath, mockTestingSubDirOfPublicDirBasename),
+                            "dirPath": pathJoin(reactAppBuildDirPath, basenameOfKeycloakDirInPublicDir),
                             filePath
                         })
                     ) {
@@ -172,49 +172,47 @@ export async function generateKeycloakThemeResources(params: {
             fs.writeFileSync(pathJoin(themeDirPath, pageId), Buffer.from(ftlCode, "utf8"));
         });
 
-        {
-            const tmpDirPath = pathJoin(themeDirPath, "..", "tmp_xxKdLpdIdLd");
+        //TODO: Remove this block we left it for now only for backward compatibility
+        // we now have a separate script for this
+        copy_keycloak_resources_to_public: {
+            const keycloakDirInPublicDir = pathJoin(reactAppBuildDirPath, "..", "public", basenameOfKeycloakDirInPublicDir);
 
-            await downloadBuiltinKeycloakTheme({
-                keycloakVersion,
-                "destDirPath": tmpDirPath,
-                isSilent: buildOptions.isSilent
+            if (fs.existsSync(keycloakDirInPublicDir)) {
+                break copy_keycloak_resources_to_public;
+            }
+
+            await downloadKeycloakStaticResources({
+                "isSilent": buildOptions.isSilent,
+                "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
+                "themeDirPath": keycloakDirInPublicDir,
+                themeType
             });
 
-            const themeResourcesDirPath = pathJoin(themeDirPath, "resources");
-
-            transformCodebase({
-                "srcDirPath": pathJoin(tmpDirPath, "keycloak", themeType, "resources"),
-                "destDirPath": themeResourcesDirPath
-            });
-
-            const reactAppPublicDirPath = pathJoin(reactAppBuildDirPath, "..", "public");
-
-            transformCodebase({
-                "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
-                "destDirPath": pathJoin(themeResourcesDirPath, pathBasename(mockTestingResourcesCommonPath))
-            });
-
-            transformCodebase({
-                "srcDirPath": themeResourcesDirPath,
-                "destDirPath": pathJoin(reactAppPublicDirPath, mockTestingResourcesPath)
-            });
-
-            const keycloakResourcesWithinPublicDirPath = pathJoin(reactAppPublicDirPath, mockTestingSubDirOfPublicDirBasename);
+            if (themeType !== themeTypes[0]) {
+                break copy_keycloak_resources_to_public;
+            }
 
             fs.writeFileSync(
-                pathJoin(keycloakResourcesWithinPublicDirPath, "README.txt"),
+                pathJoin(keycloakDirInPublicDir, "README.txt"),
                 Buffer.from(
-                    ["This is just a test folder that helps develop", "the login and register page without having to run a Keycloak container"].join(
-                        " "
-                    )
+                    // prettier-ignore
+                    [
+                        "This is just a test folder that helps develop",
+                        "the login and register page without having to run a Keycloak container"
+                    ].join(" ")
                 )
             );
 
-            fs.writeFileSync(pathJoin(keycloakResourcesWithinPublicDirPath, ".gitignore"), Buffer.from("*", "utf8"));
-            fs.rmSync(tmpDirPath, { recursive: true, force: true });
+            fs.writeFileSync(pathJoin(keycloakDirInPublicDir, ".gitignore"), Buffer.from("*", "utf8"));
         }
 
+        await downloadKeycloakStaticResources({
+            "isSilent": buildOptions.isSilent,
+            "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
+            themeDirPath,
+            themeType
+        });
+
         fs.writeFileSync(
             pathJoin(themeDirPath, "theme.properties"),
             Buffer.from(["parent=keycloak", ...(buildOptions.extraThemeProperties ?? [])].join("\n\n"), "utf8")

src/bin/keycloakify/generateTheme/index.ts

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

src/bin/keycloakify/keycloakify.ts

@@ -1,4 +1,4 @@
-import { generateKeycloakThemeResources } from "./generateKeycloakThemeResources";
+import { generateTheme } from "./generateTheme";
 import { generateJavaStackFiles } from "./generateJavaStackFiles";
 import { join as pathJoin, relative as pathRelative, basename as pathBasename, sep as pathSep } from "path";
 import * as child_process from "child_process";
@@ -6,7 +6,6 @@ import { generateStartKeycloakTestingContainer } from "./generateStartKeycloakTe
 import * as fs from "fs";
 import { readBuildOptions } from "./BuildOptions";
 import { getLogger } from "../tools/logger";
-import { getCliOptions } from "../tools/cliOptions";
 import jar from "../tools/jar";
 import { assert } from "tsafe/assert";
 import { Equals } from "tsafe";
@@ -14,19 +13,17 @@ import { getEmailThemeSrcDirPath } from "../getSrcDirPath";
 import { getProjectRoot } from "../tools/getProjectRoot";
 
 export async function main() {
-    const { isSilent, hasExternalAssets } = getCliOptions(process.argv.slice(2));
-    const logger = getLogger({ isSilent });
-    logger.log("🔏 Building the keycloak theme...⌚");
-
     const projectDirPath = process.cwd();
 
     const buildOptions = readBuildOptions({
         projectDirPath,
-        "isExternalAssetsCliParamProvided": hasExternalAssets,
-        "isSilent": isSilent
+        "processArgv": process.argv.slice(2)
     });
 
-    const { doBundlesEmailTemplate } = await generateKeycloakThemeResources({
+    const logger = getLogger({ "isSilent": buildOptions.isSilent });
+    logger.log("🔏 Building the keycloak theme...⌚");
+
+    const { doBundlesEmailTemplate } = await generateTheme({
         keycloakThemeBuildingDirPath: buildOptions.keycloakifyBuildDirPath,
         "emailThemeSrcDirPath": (() => {
             const { emailThemeSrcDirPath } = getEmailThemeSrcDirPath({ projectDirPath });
@@ -39,7 +36,6 @@ export async function main() {
         })(),
         "reactAppBuildDirPath": buildOptions.reactAppBuildDirPath,
         buildOptions,
-        "keycloakVersion": buildOptions.keycloakVersionDefaultAssets,
         "keycloakifyVersion": (() => {
             const version = JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["version"];
 

src/bin/mockTestingResourcesPath.ts

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

src/bin/tools/cliOptions.ts

@@ -1,15 +0,0 @@
-import parseArgv from "minimist";
-
-export type CliOptions = {
-    isSilent: boolean;
-    hasExternalAssets: boolean;
-};
-
-export const getCliOptions = (processArgv: string[]): CliOptions => {
-    const argv = parseArgv(processArgv);
-
-    return {
-        isSilent: typeof argv["silent"] === "boolean" ? argv["silent"] : false,
-        hasExternalAssets: typeof argv["external-assets"] === "boolean" ? argv["external-assets"] : false
-    };
-};

src/lib/usePrepareTemplate.ts

@@ -15,7 +15,7 @@ export function usePrepareTemplate(params: {
     htmlClassName: string | undefined;
     bodyClassName: string | undefined;
 }) {
-    const { doFetchDefaultThemeResources, stylesCommon, styles, url, scripts, htmlClassName, bodyClassName } = params;
+    const { doFetchDefaultThemeResources, stylesCommon = [], styles = [], url, scripts = [], htmlClassName, bodyClassName } = params;
 
     const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
 
@@ -26,36 +26,49 @@ export function usePrepareTemplate(params: {
 
         let isUnmounted = false;
 
-        Promise.all(
+        const removeArray: (() => void)[] = [];
+
+        (async () => {
+            const prLoadedArray: Promise<void>[] = [];
+
             [
-                ...(stylesCommon ?? []).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
-                ...(styles ?? []).map(relativePath => pathJoin(url.resourcesPath, relativePath))
+                ...stylesCommon.map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
+                ...styles.map(relativePath => pathJoin(url.resourcesPath, relativePath))
             ]
                 .reverse()
-                .map(href =>
-                    headInsert({
+                .forEach(href => {
+                    const { prLoaded, remove } = headInsert({
                         "type": "css",
-                        href,
-                        "position": "prepend"
-                    })
-                )
-        ).then(() => {
+                        "position": "prepend",
+                        href
+                    });
+
+                    removeArray.push(remove);
+
+                    prLoadedArray.push(prLoaded);
+                });
+
+            await Promise.all(prLoadedArray);
+
             if (isUnmounted) {
                 return;
             }
 
             setReady();
-        });
+        })();
 
-        (scripts ?? []).forEach(relativePath =>
-            headInsert({
+        scripts.forEach(relativePath => {
+            const { remove } = headInsert({
                 "type": "javascript",
                 "src": pathJoin(url.resourcesPath, relativePath)
-            })
-        );
+            });
+
+            removeArray.push(remove);
+        });
 
         return () => {
             isUnmounted = true;
+            removeArray.forEach(remove => remove());
         };
     }, []);
 

src/login/kcContext/KcContext.ts

@@ -333,7 +333,6 @@ export declare namespace KcContext {
             totpSecretEncoded: string;
             qrUrl: string;
             policy: {
-                supportedApplications: string[];
                 algorithm: "HmacSHA1" | "HmacSHA256" | "HmacSHA512";
                 digits: number;
                 lookAheadWindow: number;
@@ -347,6 +346,7 @@ export declare namespace KcContext {
                       initialCounter: number;
                   }
             );
+            supportedApplications: string[];
             totpSecretQrCode: string;
             manualUrl: string;
             totpSecret: string;

src/login/kcContext/createGetKcContext.ts

@@ -9,7 +9,7 @@ import type { ExtendKcContext } from "./getKcContextFromWindow";
 import { getKcContextFromWindow } from "./getKcContextFromWindow";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { pathBasename } from "keycloakify/tools/pathBasename";
-import { mockTestingResourcesCommonPath } from "keycloakify/bin/mockTestingResourcesPath";
+import { resourcesCommonDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { symToStr } from "tsafe/symToStr";
 import { loginThemePageIds } from "keycloakify/bin/keycloakify/generateFtl/pageId";
 
@@ -33,13 +33,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
         if (mockPageId !== undefined && realKcContext === undefined) {
             //TODO maybe trow if no mock fo custom page
 
-            console.log(
-                [
-                    `%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`,
-                    `If assets are missing make sure you have built your Keycloak theme at least once.`
-                ].join(" "),
-                "background: red; color: yellow; font-size: medium"
-            );
+            console.log(`%cKeycloakify: ${symToStr({ mockPageId })} set to ${mockPageId}.`, "background: red; color: yellow; font-size: medium");
 
             const kcContextDefaultMock = kcContextMocks.find(({ pageId }) => pageId === mockPageId);
 
@@ -158,7 +152,7 @@ export function createGetKcContext<KcContextExtension extends { pageId: string }
         {
             const { url } = realKcContext;
 
-            url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(mockTestingResourcesCommonPath));
+            url.resourcesCommonPath = pathJoin(url.resourcesPath, pathBasename(resourcesCommonDirPathRelativeToPublicDir));
         }
 
         return { "kcContext": realKcContext as any };

src/login/kcContext/kcContextMocks.ts

@@ -1,6 +1,6 @@
 import "minimal-polyfills/Object.fromEntries";
 import type { KcContext, Attribute } from "./KcContext";
-import { mockTestingResourcesCommonPath, mockTestingResourcesPath } from "keycloakify/bin/mockTestingResourcesPath";
+import { resourcesCommonDirPathRelativeToPublicDir, resourcesDirPathRelativeToPublicDir } from "keycloakify/bin/mockTestingResourcesPath";
 import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { id } from "tsafe/id";
 
@@ -104,8 +104,8 @@ export const kcContextCommonMock: KcContext.Common = {
     "keycloakifyVersion": "0.0.0",
     "url": {
         "loginAction": "#",
-        "resourcesPath": pathJoin(PUBLIC_URL, mockTestingResourcesPath),
-        "resourcesCommonPath": pathJoin(PUBLIC_URL, mockTestingResourcesCommonPath),
+        "resourcesPath": pathJoin(PUBLIC_URL, resourcesDirPathRelativeToPublicDir),
+        "resourcesCommonPath": pathJoin(PUBLIC_URL, resourcesCommonDirPathRelativeToPublicDir),
         "loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg",
         "loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg"
     },
@@ -453,8 +453,8 @@ export const kcContextMocks: KcContext[] = [
             manualUrl: "#",
             totpSecret: "G4nsI8lQagRMUchH8jEG",
             otpCredentials: [],
+            supportedApplications: ["FreeOTP", "Google Authenticator"],
             policy: {
-                supportedApplications: ["FreeOTP", "Google Authenticator"],
                 algorithm: "HmacSHA1",
                 digits: 6,
                 lookAheadWindow: 1,

src/login/pages/LoginConfigTotp.tsx

@@ -3,6 +3,7 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
+import { MessageKey } from "keycloakify/login/i18n/i18n";
 
 export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pageId: "login-config-totp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -16,7 +17,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
 
     const { msg, msgStr } = i18n;
 
-    const algToKeyUriAlg: Record<KcContext.LoginConfigTotp["totp"]["policy"]["algorithm"], string> = {
+    const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
         "HmacSHA1": "SHA1",
         "HmacSHA256": "SHA256",
         "HmacSHA512": "SHA512"
@@ -30,8 +31,8 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                         <p>{msg("loginTotpStep1")}</p>
 
                         <ul id="kc-totp-supported-apps">
-                            {totp.policy.supportedApplications.map(app => (
-                                <li>{app}</li>
+                            {totp.supportedApplications.map(app => (
+                                <li>{msgStr(app as MessageKey, app)}</li>
                             ))}
                         </ul>
                     </li>
@@ -169,7 +170,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
                                 name="cancel-aia"
                                 value="true"
                             >
-                                ${msg("doCancel")}
+                                {msg("doCancel")}
                             </button>
                         </>
                     ) : (

src/login/pages/LoginOtp.tsx

@@ -22,17 +22,24 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
     useEffect(() => {
         let isCleanedUp = false;
 
-        headInsert({
+        const { prLoaded, remove } = headInsert({
             "type": "javascript",
             "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
-        }).then(() => {
-            if (isCleanedUp) return;
+        });
+
+        (async () => {
+            await prLoaded;
+
+            if (isCleanedUp) {
+                return;
+            }
 
             evaluateInlineScript();
-        });
+        })();
 
         return () => {
             isCleanedUp = true;
+            remove();
         };
     }, []);
 

src/tools/headInsert.ts

@@ -12,7 +12,7 @@ export function headInsert(
               type: "javascript";
               src: string;
           }
-) {
+): { remove: () => void; prLoaded: Promise<void> } {
     const htmlElement = document.createElement(
         (() => {
             switch (params.type) {
@@ -66,5 +66,8 @@ export function headInsert(
         })()
     ](htmlElement);
 
-    return dLoaded.pr;
+    return {
+        "prLoaded": dLoaded.pr,
+        "remove": () => htmlElement.remove()
+    };
 }

stories/account/KcApp.tsx

@@ -0,0 +1,27 @@
+import React, { lazy, Suspense } from "react";
+import Fallback from "../../dist/account";
+import type { KcContext } from "./kcContext";
+import { useI18n } from "./i18n";
+
+const DefaultTemplate = lazy(() => import("../../dist/account/Template"));
+
+export default function KcApp(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    const i18n = useI18n({ kcContext });
+
+    if (i18n === null) {
+        return null;
+    }
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    default:
+                        return <Fallback {...{ kcContext, i18n }} Template={DefaultTemplate} doUseDefaultCss={true} />;
+                }
+            })()}
+        </Suspense>
+    );
+}

stories/account/createPageStory.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { getKcContext, type KcContext } from "./kcContext";
+import KcApp from "./KcApp";
+import type { DeepPartial } from "../../dist/tools/DeepPartial";
+
+export function createPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+    const { pageId } = params;
+
+    function PageStory(params: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+        const { kcContext } = getKcContext({
+            mockPageId: pageId,
+            storyPartialKcContext: params.kcContext
+        });
+
+        return <KcApp kcContext={kcContext} />;
+    }
+
+    return { PageStory };
+}

stories/account/i18n.ts

@@ -0,0 +1,5 @@
+import { createUseI18n } from "../../dist/account";
+
+export const { useI18n } = createUseI18n({});
+
+export type I18n = NonNullable<ReturnType<typeof useI18n>>;

stories/account/kcContext.ts

@@ -0,0 +1,7 @@
+import { createGetKcContext } from "../../dist/account";
+
+export const { getKcContext } = createGetKcContext();
+
+const { kcContext } = getKcContext();
+
+export type KcContext = NonNullable<typeof kcContext>;

stories/account/pages/Account.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const pageId = "account.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    title: `account/${pageId}`,
+    component: PageStory,
+    parameters: {
+        viewMode: "story",
+        previewTabs: {
+            "storybook/docs/panel": {
+                hidden: true
+            }
+        }
+    }
+};
+
+export default meta;
+
+export const Default = () => <PageStory />;

stories/account/pages/Pasword.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const pageId = "password.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    title: `account/${pageId}`,
+    component: PageStory,
+    parameters: {
+        viewMode: "story",
+        previewTabs: {
+            "storybook/docs/panel": {
+                hidden: true
+            }
+        }
+    }
+};
+
+export default meta;
+
+export const Default = () => <PageStory />;
+export const WithNoMessage = () => (
+    <PageStory
+        kcContext={{
+            message: undefined
+        }}
+    />
+);

stories/intro/KeycloakifyRotatingLogo.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { memo, useState } from "react";
+import { useConstCallback } from "powerhooks";
+import { keyframes } from "tss-react";
+import keycloakifyLogoHeroMovingPngUrl from "./keycloakify-logo-hero-moving.png";
+import keycloakifyLogoHeroStillPngUrl from "./keycloakify-logo-hero-still.png";
+import { makeStyles } from "./tss";
+
+export type Props = {
+    style?: React.CSSProperties;
+    id?: string;
+    onLoad?: () => void;
+};
+
+export const KeycloakifyRotatingLogo = memo((props: Props) => {
+    const { id, style, onLoad: onLoadProp } = props;
+
+    const [isImageLoaded, setIsImageLoaded] = useState(false);
+
+    const onLoad = useConstCallback(() => {
+        setIsImageLoaded(true);
+        onLoadProp?.();
+    });
+
+    const { classes } = useStyles({
+        isImageLoaded
+    });
+    return (
+        <div id={id} className={classes.root} style={style}>
+            <img className={classes.rotatingImg} onLoad={onLoad} src={keycloakifyLogoHeroMovingPngUrl} alt={"Rotating react logo"} />
+            <img className={classes.stillImg} src={keycloakifyLogoHeroStillPngUrl} alt={"keyhole"} />
+        </div>
+    );
+});
+
+const useStyles = makeStyles<{ isImageLoaded: boolean }>({
+    "name": { KeycloakifyRotatingLogo }
+})((_theme, { isImageLoaded }) => ({
+    "root": {
+        "position": "relative"
+    },
+    "rotatingImg": {
+        "animation": `${keyframes({
+            "from": {
+                "transform": "rotate(0deg)"
+            },
+            "to": {
+                "transform": "rotate(360deg)"
+            }
+        })} infinite 20s linear`,
+        "width": isImageLoaded ? "100%" : undefined,
+        "height": isImageLoaded ? "auto" : undefined
+    },
+    "stillImg": {
+        "position": "absolute",
+        "top": "0",
+        "left": "0",
+        "width": isImageLoaded ? "100%" : undefined,
+        "height": isImageLoaded ? "auto" : undefined
+    }
+}));

stories/intro/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+    const _default: string;
+    export default _default;
+}

stories/intro/intro.stories.mdx

@@ -1,6 +1,5 @@
 import { Meta } from "@storybook/addon-docs";
-import { useDarkMode } from "storybook-dark-mode";
-import "./assets/fonts/WorkSans/font.css";
+import { KeycloakifyRotatingLogo } from "./KeycloakifyRotatingLogo";
 
 <Meta
     title="Introduction" 
@@ -16,13 +15,15 @@ import "./assets/fonts/WorkSans/font.css";
 />
 
 <div style={{ "margin": "0 auto", "maxWidth": "700px", "textAlign": "center" }}>
-<img src="preview.png" />
+<div style={{ "display": "flex", "justifyContent": "center" }}>
+<KeycloakifyRotatingLogo style={{ "width": 400 }} />
+</div>
 <h1><a href="#">Keycloakify </a> Storybook</h1>
 
 <p>
 This website showcases all the Keycloak user-facing pages that can be customized using Keycloakify.
 The storybook serves as a comprehensive reference to help you determine which pages you would like to personalize.
-Keep in mind that customizing the <code>Template</code> component alone will already cover 90% of your customization needs.
+Keep in mind that customizing the <a href="https://github.com/keycloakify/keycloakify-starter/blob/main/src/keycloak-theme/login/Template.tsx"><code>Template</code></a> component alone will already cover 90% of your customization needs.
 </p>
 
 <p>
@@ -31,4 +32,4 @@ Simply refer to <a href="https://docs.keycloakify.dev/limitations#i-have-establi
 </p>
 
 
-</div>
+</div>

stories/intro/tss.ts

@@ -0,0 +1,5 @@
+import { createMakeAndWithStyles } from "tss-react";
+
+export const { makeStyles, useStyles } = createMakeAndWithStyles({
+    "useTheme": () => ({})
+});

stories/login/KcApp.tsx

@@ -0,0 +1,27 @@
+import React, { lazy, Suspense } from "react";
+import Fallback from "../../dist/login";
+import type { KcContext } from "./kcContext";
+import { useI18n } from "./i18n";
+
+const DefaultTemplate = lazy(() => import("../../dist/login/Template"));
+
+export default function KcApp(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    const i18n = useI18n({ kcContext });
+
+    if (i18n === null) {
+        return null;
+    }
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    default:
+                        return <Fallback {...{ kcContext, i18n }} Template={DefaultTemplate} doUseDefaultCss={true} />;
+                }
+            })()}
+        </Suspense>
+    );
+}

stories/login/createPageStory.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { getKcContext, type KcContext } from "./kcContext";
+import KcApp from "./KcApp";
+import type { DeepPartial } from "../../dist/tools/DeepPartial";
+
+export function createPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+    const { pageId } = params;
+
+    function PageStory(params: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+        const { kcContext } = getKcContext({
+            mockPageId: pageId,
+            storyPartialKcContext: params.kcContext
+        });
+
+        return <KcApp kcContext={kcContext} />;
+    }
+
+    return { PageStory };
+}

stories/login/i18n.ts

@@ -0,0 +1,5 @@
+import { createUseI18n } from "../../dist/login";
+
+export const { useI18n } = createUseI18n({});
+
+export type I18n = NonNullable<ReturnType<typeof useI18n>>;

stories/login/kcContext.ts

@@ -0,0 +1,7 @@
+import { createGetKcContext } from "../../dist/login";
+
+export const { getKcContext } = createGetKcContext();
+
+const { kcContext } = getKcContext();
+
+export type KcContext = NonNullable<typeof kcContext>;

stories/login/pages/Error.stories.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const pageId = "error.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    title: `login/${pageId}`,
+    component: PageStory,
+    parameters: {
+        viewMode: "story",
+        previewTabs: {
+            "storybook/docs/panel": {
+                hidden: true
+            }
+        }
+    }
+};
+
+export default meta;
+
+export const Default = () => <PageStory />;
+
+export const WithAnotherMessage = () => (
+    <PageStory
+        kcContext={{
+            message: { summary: "With another error message" }
+        }}
+    />
+);

stories/login/pages/Login.stories.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const pageId = "login.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    title: `login/${pageId}`,
+    component: PageStory,
+    parameters: {
+        viewMode: "story",
+        previewTabs: {
+            "storybook/docs/panel": {
+                "hidden": true
+            }
+        }
+    }
+};
+
+export default meta;
+
+export const Default = () => <PageStory />;
+
+export const WithoutPasswordField = () => (
+    <PageStory
+        kcContext={{
+            realm: { password: false }
+        }}
+    />
+);
+
+export const WithoutRegistration = () => (
+    <PageStory
+        kcContext={{
+            realm: { registrationAllowed: false }
+        }}
+    />
+);
+
+export const WithoutRememberMe = () => (
+    <PageStory
+        kcContext={{
+            realm: { rememberMe: false }
+        }}
+    />
+);
+
+export const WithoutPasswordReset = () => (
+    <PageStory
+        kcContext={{
+            realm: { resetPasswordAllowed: false }
+        }}
+    />
+);
+
+export const WithEmailAsUsername = () => (
+    <PageStory
+        kcContext={{
+            realm: { loginWithEmailAllowed: false }
+        }}
+    />
+);
+
+export const WithPresetUsername = () => (
+    <PageStory
+        kcContext={{
+            login: { username: "max.mustermann@mail.com" }
+        }}
+    />
+);
+
+export const WithImmutablePresetUsername = () => (
+    <PageStory
+        kcContext={{
+            login: { username: "max.mustermann@mail.com" },
+            usernameEditDisabled: true
+        }}
+    />
+);
+
+export const WithSocialProviders = () => (
+    <PageStory
+        kcContext={{
+            social: {
+                displayInfo: true,
+                providers: [
+                    { loginUrl: "google", alias: "google", providerId: "google", displayName: "Google" },
+                    { loginUrl: "microsoft", alias: "microsoft", providerId: "microsoft", displayName: "Microsoft" },
+                    { loginUrl: "facebook", alias: "facebook", providerId: "facebook", displayName: "Facebook" },
+                    { loginUrl: "instagram", alias: "instagram", providerId: "instagram", displayName: "Instagram" },
+                    { loginUrl: "twitter", alias: "twitter", providerId: "twitter", displayName: "Twitter" },
+                    { loginUrl: "linkedin", alias: "linkedin", providerId: "linkedin", displayName: "LinkedIn" },
+                    { loginUrl: "stackoverflow", alias: "stackoverflow", providerId: "stackoverflow", displayName: "Stackoverflow" },
+                    { loginUrl: "github", alias: "github", providerId: "github", displayName: "Github" },
+                    { loginUrl: "gitlab", alias: "gitlab", providerId: "gitlab", displayName: "Gitlab" },
+                    { loginUrl: "bitbucket", alias: "bitbucket", providerId: "bitbucket", displayName: "Bitbucket" },
+                    { loginUrl: "paypal", alias: "paypal", providerId: "paypal", displayName: "PayPal" },
+                    { loginUrl: "openshift", alias: "openshift", providerId: "openshift", displayName: "OpenShift" }
+                ]
+            }
+        }}
+    />
+);

test/bin/setupSampleReactProject.spec.ts

@@ -53,8 +53,7 @@ describe("Sample Project", () => {
 
             const destDirPath = pathJoin(
                 readBuildOptions({
-                    "isExternalAssetsCliParamProvided": false,
-                    "isSilent": true,
+                    "processArgv": ["--silent"],
                     "projectDirPath": process.cwd()
                 }).keycloakifyBuildDirPath,
                 "src",
@@ -62,7 +61,7 @@ describe("Sample Project", () => {
                 "resources",
                 "theme"
             );
-            await downloadBuiltinKeycloakTheme({ destDirPath, keycloakVersion: "11.0.3", isSilent: false });
+            await downloadBuiltinKeycloakTheme({ destDirPath, keycloakVersion: "11.0.3", "isSilent": false });
         },
         { timeout: 90000 }
     );
@@ -80,8 +79,7 @@ describe("Sample Project", () => {
 
             const destDirPath = pathJoin(
                 readBuildOptions({
-                    "isExternalAssetsCliParamProvided": false,
-                    "isSilent": true,
+                    "processArgv": ["--silent"],
                     "projectDirPath": process.cwd()
                 }).keycloakifyBuildDirPath,
                 "src",
@@ -89,7 +87,7 @@ describe("Sample Project", () => {
                 "resources",
                 "theme"
             );
-            await downloadBuiltinKeycloakTheme({ destDirPath, keycloakVersion: "11.0.3", isSilent: false });
+            await downloadBuiltinKeycloakTheme({ destDirPath, "keycloakVersion": "11.0.3", "isSilent": false });
         },
         { timeout: 90000 }
     );