Bump version

Mvn begone addendum

.prettierignore

@@ -6,4 +6,5 @@ node_modules/
 /src/test/apps/
 /src/tools/types/
 /sample_react_project
-/build_keycloak/
+/build_keycloak/
+/src/lib/i18n/generated_messages/

README.md

@@ -8,9 +8,6 @@
     <a href="https://github.com/garronej/keycloakify/actions">
       <img src="https://github.com/garronej/keycloakify/workflows/ci/badge.svg?branch=main">
     </a>
-    <a href="https://bundlephobia.com/package/keycloakify">
-      <img src="https://img.shields.io/bundlephobia/minzip/keycloakify">
-    </a>
     <a href="https://www.npmjs.com/package/keycloakify">
       <img src="https://img.shields.io/npm/dm/keycloakify">
     </a>
@@ -27,15 +24,9 @@
         <a href="https://www.keycloakify.dev">Home</a>
         -
         <a href="https://docs.keycloakify.dev">Documentation</a>
-    </p>
-    <p align="center"> ---- Project starter / Demo setup ---- </p>
-    <p align="center">
-        <a href="https://github.com/garronej/keycloakify-starter">CSS Level customization</a>
         -
-        <a href="https://github.com/garronej/keycloakify-advanced-starter">Component Level customization</a>
+        <a href="https://github.com/codegouvfr/keycloakify-starter">Starter project</a>
     </p>
-    <p align="center"> ---- </p>
-
 </p>
 
 <p align="center">
@@ -49,6 +40,29 @@
 
 # Changelog highlights
 
+## 6.12
+
+Massive improvement in the developer experience:
+
+-   There is now only one starter repo: https://github.com/codegouvfr/keycloakify-starter
+-   A lot of comments have been added in the code of the starter to make it easier to get started.
+-   The doc has been updated: https://docs.keycloakify.dev
+-   A lot of improvements in the type system.
+
+## 6.11.4
+
+-   You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, [see PR](https://github.com/InseeFrLab/keycloakify/pull/239).
+-   Feature new build options: [`bundler`](https://docs.keycloakify.dev/build-options#keycloakify.bundler), [`groupId`](https://docs.keycloakify.dev/build-options#keycloakify.groupid), [`artifactId`](https://docs.keycloakify.dev/build-options#keycloakify.artifactid), [`version`](https://docs.keycloakify.dev/build-options#version).  
+    Theses options can be user to customize the output name of the .jar. You can use environnement variables to overrides the values read in the package.json. Thanks to @lordvlad.
+
+## 6.10.0
+
+-   Widows compat (thanks to @lordvlad, [see PR](https://github.com/InseeFrLab/keycloakify/pull/226)). WSL is no longer required 🎉
+
+## 6.8.4
+
+-   `@emotion/react` is no longer a peer dependency of Keycloakify.
+
 ## 6.8.0
 
 -   It is now possible to pass a custom `<Template />` component as a prop to `<KcApp />` and every

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "6.8.2",
+    "version": "6.12.8",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -15,11 +15,13 @@
         "copy-files": "copyfiles -u 1 src/**/*.ftl",
         "pretest": "yarn build:test",
         "test": "node dist_test/test/bin && node dist_test/test/lib",
-        "generate-messages": "node dist/bin/generate-i18n-messages.js",
-        "link_in_test_app": "node dist/bin/link_in_test_app.js",
         "_format": "prettier '**/*.{ts,tsx,json,md}'",
         "format": "yarn _format --write",
-        "format:check": "yarn _format --list-different"
+        "format:check": "yarn _format --list-different",
+        "generate-messages": "ts-node --skipProject src/scripts/generate-i18n-messages.ts",
+        "link-in-app": "ts-node --skipProject src/scripts/link-in-app.ts",
+        "link-in-starter": "yarn link-in-app keycloakify-advanced-starter",
+        "tsc-watch": "tsc -p src/bin -w & tsc -p src/lib -w "
     },
     "bin": {
         "keycloakify": "dist/bin/keycloakify/index.js",
@@ -40,6 +42,7 @@
     "license": "MIT",
     "files": [
         "src/",
+        "!src/scripts",
         "dist/",
         "!dist/tsconfig.tsbuildinfo"
     ],
@@ -55,15 +58,13 @@
     ],
     "homepage": "https://github.com/garronej/keycloakify",
     "peerDependencies": {
-        "@emotion/react": "^11.4.1",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
     },
     "devDependencies": {
         "@babel/core": "^7.0.0",
-        "@emotion/react": "^11.4.1",
         "@types/memoizee": "^0.4.7",
         "@types/minimist": "^1.2.2",
-        "@types/node": "^17.0.25",
+        "@types/node": "^18.14.1",
         "@types/react": "18.0.9",
         "copyfiles": "^2.4.1",
         "husky": "^4.3.8",
@@ -72,23 +73,21 @@
         "properties-parser": "^0.3.1",
         "react": "18.1.0",
         "rimraf": "^3.0.2",
-        "typescript": "^4.2.3"
+        "typescript": "^4.9.5",
+        "ts-node": "^10.9.1",
+        "scripting-tools": "^0.19.13"
     },
     "dependencies": {
         "@octokit/rest": "^18.12.0",
         "cheerio": "^1.0.0-rc.5",
         "cli-select": "^1.1.2",
-        "evt": "^2.4.6",
-        "memoizee": "^0.4.15",
+        "evt": "^2.4.15",
         "minimal-polyfills": "^2.2.2",
         "minimist": "^1.2.6",
         "path-browserify": "^1.0.1",
-        "powerhooks": "^0.20.23",
         "react-markdown": "^5.0.3",
         "rfc4648": "^1.5.2",
-        "scripting-tools": "^0.19.13",
-        "tsafe": "^1.1.3",
-        "tss-react": "^4.3.4",
+        "tsafe": "^1.4.3",
         "zod": "^3.17.10"
     }
 }

renovate.json

@@ -13,11 +13,11 @@
     "packageRules": [
         {
             "packagePatterns": ["*"],
-            "excludePackagePatterns": ["tss-react", "powerhooks", "tsafe", "evt"],
+            "excludePackagePatterns": ["tsafe", "evt"],
             "enabled": false
         },
         {
-            "packagePatterns": ["tss-react", "powerhooks", "tsafe", "evt"],
+            "packagePatterns": ["tsafe", "evt"],
             "matchUpdateTypes": ["minor", "patch"],
             "automerge": true,
             "automergeType": "branch",

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

@@ -7,11 +7,11 @@ import { promptKeycloakVersion } from "./promptKeycloakVersion";
 import { getCliOptions } from "./tools/cliOptions";
 import { getLogger } from "./tools/logger";
 
-export function downloadBuiltinKeycloakTheme(params: { keycloakVersion: string; destDirPath: string; isSilent: boolean }) {
+export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: string; destDirPath: string; isSilent: boolean }) {
     const { keycloakVersion, destDirPath, isSilent } = params;
 
     for (const ext of ["", "-community"]) {
-        downloadAndUnzip({
+        await downloadAndUnzip({
             "destDirPath": destDirPath,
             "url": `https://github.com/keycloak/keycloak/archive/refs/tags/${keycloakVersion}.zip`,
             "pathOfDirToExtractInArchive": `keycloak-${keycloakVersion}/themes/src/main/resources${ext}/theme`,
@@ -31,7 +31,7 @@ if (require.main === module) {
 
         logger.log(`Downloading builtins theme of Keycloak ${keycloakVersion} here ${destDirPath}`);
 
-        downloadBuiltinKeycloakTheme({
+        await downloadBuiltinKeycloakTheme({
             keycloakVersion,
             destDirPath,
             isSilent

src/bin/keycloakify/BuildOptions.ts

@@ -3,7 +3,11 @@ import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import { id } from "tsafe/id";
 import { parse as urlParse } from "url";
+import { typeGuard } from "tsafe/typeGuard";
+import { symToStr } from "tsafe/symToStr";
 
+const bundlers = ["mvn", "keycloakify", "none"] as const;
+type Bundler = (typeof bundlers)[number];
 type ParsedPackageJson = {
     name: string;
     version: string;
@@ -12,6 +16,9 @@ type ParsedPackageJson = {
         extraPages?: string[];
         extraThemeProperties?: string[];
         areAppAndKeycloakServerSharingSameDomain?: boolean;
+        artifactId?: string;
+        groupId?: string;
+        bundler?: Bundler;
     };
 };
 
@@ -23,12 +30,15 @@ const zParsedPackageJson = z.object({
         .object({
             "extraPages": z.array(z.string()).optional(),
             "extraThemeProperties": z.array(z.string()).optional(),
-            "areAppAndKeycloakServerSharingSameDomain": z.boolean().optional()
+            "areAppAndKeycloakServerSharingSameDomain": z.boolean().optional(),
+            "artifactId": z.string().optional(),
+            "groupId": z.string().optional(),
+            "bundler": z.enum(bundlers).optional()
         })
         .optional()
 });
 
-assert<Equals<ReturnType<typeof zParsedPackageJson["parse"]>, ParsedPackageJson>>();
+assert<Equals<ReturnType<(typeof zParsedPackageJson)["parse"]>, ParsedPackageJson>>();
 
 /** Consolidated build option gathered form CLI arguments and config in package.json */
 export type BuildOptions = BuildOptions.Standalone | BuildOptions.ExternalAssets;
@@ -40,8 +50,9 @@ export namespace BuildOptions {
         themeName: string;
         extraPages?: string[];
         extraThemeProperties?: string[];
-        //NOTE: Only for the pom.xml file, questionable utility...
         groupId: string;
+        artifactId: string;
+        bundler: Bundler;
     };
 
     export type Standalone = Common & {
@@ -108,7 +119,7 @@ export function readBuildOptions(params: {
     const common: BuildOptions.Common = (() => {
         const { name, keycloakify = {}, version, homepage } = parsedPackageJson;
 
-        const { extraPages, extraThemeProperties } = keycloakify ?? {};
+        const { extraPages, extraThemeProperties, groupId, artifactId, bundler } = keycloakify ?? {};
 
         const themeName = name
             .replace(/^@(.*)/, "$1")
@@ -117,10 +128,26 @@ export function readBuildOptions(params: {
 
         return {
             themeName,
+            "bundler": (() => {
+                const { KEYCLOAKIFY_BUNDLER } = process.env;
+
+                assert(
+                    typeGuard<Bundler | undefined>(
+                        KEYCLOAKIFY_BUNDLER,
+                        [undefined, ...id<readonly string[]>(bundlers)].includes(KEYCLOAKIFY_BUNDLER)
+                    ),
+                    `${symToStr({ KEYCLOAKIFY_BUNDLER })} should be one of ${bundlers.join(", ")}`
+                );
+
+                return KEYCLOAKIFY_BUNDLER ?? bundler ?? "keycloakify";
+            })(),
+            "artifactId": process.env.KEYCLOAKIFY_ARTIFACT_ID ?? artifactId ?? `${themeName}-keycloak-theme`,
             "groupId": (() => {
                 const fallbackGroupId = `${themeName}.keycloak`;
 
                 return (
+                    process.env.KEYCLOAKIFY_GROUP_ID ??
+                    groupId ??
                     (!homepage
                         ? fallbackGroupId
                         : urlParse(homepage)
@@ -130,7 +157,7 @@ export function readBuildOptions(params: {
                               .join(".") ?? fallbackGroupId) + ".keycloak"
                 );
             })(),
-            "version": version,
+            "version": process.env.KEYCLOAKIFY_VERSION ?? version,
             extraPages,
             extraThemeProperties,
             isSilent

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -36,7 +36,11 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
                 <#list fieldNames as fieldName>
                     if(fieldName === "${fieldName}" ){
                         <#attempt>
-                            return "${messagesPerField.printIfExists(fieldName,'1')}" ? x : undefined;
+                            <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+                                return <#if messagesPerField.existsError('username', 'password')>x<#else>undefined</#if>;
+                            <#else>
+                                return <#if messagesPerField.existsError('${fieldName}')>x<#else>undefined</#if>;
+                            </#if>
                         <#recover>
                         </#attempt>
                     }
@@ -51,7 +55,11 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
                 <#list fieldNames as fieldName>
                     if(fieldName === "${fieldName}" ){
                         <#attempt>
-                            return <#if messagesPerField.existsError('${fieldName}')>true<#else>false</#if>;
+                            <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+                                return <#if messagesPerField.existsError('username', 'password')>true<#else>false</#if>;
+                            <#else>
+                                return <#if messagesPerField.existsError('${fieldName}')>true<#else>false</#if>;
+                            </#if>
                         <#recover>
                         </#attempt>
                     }
@@ -66,8 +74,14 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
                 <#list fieldNames as fieldName>
                     if(fieldName === "${fieldName}" ){
                         <#attempt>
-                            <#if messagesPerField.existsError('${fieldName}')>
-                                return "${messagesPerField.get('${fieldName}')?no_esc}";
+                            <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+                                <#if messagesPerField.existsError('username', 'password')>
+                                    return 'Invalid username or password.';
+                                </#if>
+                            <#else>
+                                <#if messagesPerField.existsError('${fieldName}')>
+                                    return "${messagesPerField.get('${fieldName}')?no_esc}";
+                                </#if>
                             </#if>
                         <#recover>
                         </#attempt>
@@ -83,7 +97,11 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
                 <#list fieldNames as fieldName>
                     if(fieldName === "${fieldName}" ){
                         <#attempt>
-                            return <#if messagesPerField.exists('${fieldName}')>true<#else>false</#if>;
+                            <#if '${fieldName}' == 'username' || '${fieldName}' == 'password'>
+                                return <#if messagesPerField.exists('username') ||  messagesPerField.exists('password')>true<#else>false</#if>;
+                            <#else>
+                                return <#if messagesPerField.exists('${fieldName}')>true<#else>false</#if>;
+                            </#if>
                         <#recover>
                         </#attempt>
                     }
@@ -156,6 +174,10 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
                     ) ||  (
                         ["masterAdminClient", "delegateForUpdate", "defaultRole"]?seq_contains(key) &&
                         are_same_path(path, ["realm"])
+                    ) || (
+                        "error.ftl" == pageId &&
+                        are_same_path(path, ["realm"]) &&
+                        !["name", "displayName", "displayNameHtml", "internationalizationEnabled", "registrationEmailAsUsername" ]?seq_contains(key)
                     )
                 >
                     <#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -68,7 +68,7 @@ export namespace BuildOptionsLike {
     assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
 }
 
-export type PageId = typeof pageIds[number];
+export type PageId = (typeof pageIds)[number];
 
 export function generateFtlFilesCodeFactory(params: {
     indexHtmlCode: string;

src/bin/keycloakify/generateJavaStackFiles.ts

@@ -7,6 +7,8 @@ import type { BuildOptions } from "./BuildOptions";
 export type BuildOptionsLike = {
     themeName: string;
     groupId: string;
+    artifactId?: string;
+    version: string;
 };
 
 {
@@ -16,7 +18,6 @@ export type BuildOptionsLike = {
 }
 
 export function generateJavaStackFiles(params: {
-    version: string;
     keycloakThemeBuildingDirPath: string;
     doBundlesEmailTemplate: boolean;
     buildOptions: BuildOptionsLike;
@@ -24,8 +25,7 @@ export function generateJavaStackFiles(params: {
     jarFilePath: string;
 } {
     const {
-        version,
-        buildOptions: { groupId, themeName },
+        buildOptions: { groupId, themeName, version, artifactId },
         keycloakThemeBuildingDirPath,
         doBundlesEmailTemplate
     } = params;
@@ -34,8 +34,6 @@ export function generateJavaStackFiles(params: {
         const { pomFileCode } = (function generatePomFileCode(): {
             pomFileCode: string;
         } {
-            const artefactId = `${themeName}-keycloak-theme`;
-
             const pomFileCode = [
                 `<?xml version="1.0"?>`,
                 `<project xmlns="http://maven.apache.org/POM/4.0.0"`,
@@ -43,9 +41,9 @@ export function generateJavaStackFiles(params: {
                 `	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">`,
                 `	<modelVersion>4.0.0</modelVersion>`,
                 `	<groupId>${groupId}</groupId>`,
-                `	<artifactId>${artefactId}</artifactId>`,
+                `	<artifactId>${artifactId}</artifactId>`,
                 `	<version>${version}</version>`,
-                `	<name>${artefactId}</name>`,
+                `	<name>${artifactId}</name>`,
                 `	<description />`,
                 `</project>`
             ].join("\n");
@@ -84,6 +82,6 @@ export function generateJavaStackFiles(params: {
     }
 
     return {
-        "jarFilePath": pathJoin(keycloakThemeBuildingDirPath, "target", `${themeName}-${version}.jar`)
+        "jarFilePath": pathJoin(keycloakThemeBuildingDirPath, "target", `${artifactId}-${version}.jar`)
     };
 }

src/bin/keycloakify/generateKeycloakThemeResources.ts

@@ -5,7 +5,6 @@ import { replaceImportsFromStaticInJsCode } from "./replacers/replaceImportsFrom
 import { replaceImportsInCssCode } from "./replacers/replaceImportsInCssCode";
 import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
 import { downloadBuiltinKeycloakTheme } from "../download-builtin-keycloak-theme";
-import * as child_process from "child_process";
 import { mockTestingResourcesCommonPath, mockTestingResourcesPath, mockTestingSubDirOfPublicDirBasename } from "../mockTestingResourcesPath";
 import { isInside } from "../tools/isInside";
 import type { BuildOptions } from "./BuildOptions";
@@ -53,13 +52,13 @@ export namespace BuildOptionsLike {
     assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
 }
 
-export function generateKeycloakThemeResources(params: {
+export async function generateKeycloakThemeResources(params: {
     reactAppBuildDirPath: string;
     keycloakThemeBuildingDirPath: string;
     keycloakThemeEmailDirPath: string;
     keycloakVersion: string;
     buildOptions: BuildOptionsLike;
-}): { doBundlesEmailTemplate: boolean } {
+}): Promise<{ doBundlesEmailTemplate: boolean }> {
     const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, keycloakThemeEmailDirPath, keycloakVersion, buildOptions } = params;
 
     const logger = getLogger({ isSilent: buildOptions.isSilent });
@@ -155,7 +154,7 @@ export function generateKeycloakThemeResources(params: {
     {
         const tmpDirPath = pathJoin(themeDirPath, "..", "tmp_xxKdLpdIdLd");
 
-        downloadBuiltinKeycloakTheme({
+        await downloadBuiltinKeycloakTheme({
             keycloakVersion,
             "destDirPath": tmpDirPath,
             isSilent: buildOptions.isSilent
@@ -190,8 +189,7 @@ export function generateKeycloakThemeResources(params: {
         );
 
         fs.writeFileSync(pathJoin(keycloakResourcesWithinPublicDirPath, ".gitignore"), Buffer.from("*", "utf8"));
-
-        child_process.execSync(`rm -r ${tmpDirPath}`);
+        fs.rmSync(tmpDirPath, { recursive: true, force: true });
     }
 
     fs.writeFileSync(

src/bin/keycloakify/generateStartKeycloakTestingContainer.ts

@@ -34,7 +34,7 @@ export function generateStartKeycloakTestingContainer(params: {
         pathJoin(keycloakThemeBuildingDirPath, generateStartKeycloakTestingContainer.basename),
         Buffer.from(
             [
-                "#!/bin/bash",
+                "#!/usr/bin/env bash",
                 "",
                 `docker rm ${containerName} || true`,
                 "",

src/bin/keycloakify/index.ts

@@ -4,5 +4,5 @@ export * from "./keycloakify";
 import { main } from "./keycloakify";
 
 if (require.main === module) {
-    main();
+    main().catch(e => console.error(e));
 }

src/bin/keycloakify/keycloakify.ts

@@ -7,13 +7,16 @@ 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 type { Equals } from "tsafe";
 
 const reactProjectDirPath = process.cwd();
 
 export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
 export const keycloakThemeEmailDirPath = pathJoin(keycloakThemeBuildingDirPath, "..", "keycloak_email");
 
-export function main() {
+export async function main() {
     const { isSilent, hasExternalAssets } = getCliOptions(process.argv.slice(2));
     const logger = getLogger({ isSilent });
     logger.log("🔏 Building the keycloak theme...⌚");
@@ -33,7 +36,7 @@ export function main() {
         "isSilent": isSilent
     });
 
-    const { doBundlesEmailTemplate } = generateKeycloakThemeResources({
+    const { doBundlesEmailTemplate } = await generateKeycloakThemeResources({
         keycloakThemeBuildingDirPath,
         keycloakThemeEmailDirPath,
         "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
@@ -45,18 +48,35 @@ export function main() {
     });
 
     const { jarFilePath } = generateJavaStackFiles({
-        "version": buildOptions.version,
         keycloakThemeBuildingDirPath,
         doBundlesEmailTemplate,
         buildOptions
     });
 
-    child_process.execSync("mvn package", {
-        "cwd": keycloakThemeBuildingDirPath
-    });
+    switch (buildOptions.bundler) {
+        case "none":
+            logger.log("😱 Skipping bundling step, there will be no jar");
+            break;
+        case "keycloakify":
+            logger.log("🫶 Let keycloakify do its thang");
+            await jar({
+                "rootPath": pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources"),
+                "version": buildOptions.version,
+                "groupId": buildOptions.groupId,
+                "artifactId": buildOptions.artifactId,
+                "targetPath": jarFilePath
+            });
+            break;
+        case "mvn":
+            logger.log("🫙 Run maven to deliver a jar");
+            child_process.execSync("mvn package", { "cwd": keycloakThemeBuildingDirPath });
+            break;
+        default:
+            assert<Equals<typeof buildOptions.bundler, never>>(false);
+    }
 
-    //We want, however, to test in a container running the latest Keycloak version
-    const containerKeycloakVersion = "19.0.1";
+    // We want, however, to test in a container running the latest Keycloak version
+    const containerKeycloakVersion = "20.0.1";
 
     generateStartKeycloakTestingContainer({
         keycloakThemeBuildingDirPath,

src/bin/link_in_test_app.ts

@@ -1,126 +0,0 @@
-import { execSync } from "child_process";
-import { join as pathJoin, relative as pathRelative } from "path";
-import { exclude } from "tsafe/exclude";
-import * as fs from "fs";
-
-const keycloakifyDirPath = pathJoin(__dirname, "..", "..");
-
-fs.writeFileSync(
-    pathJoin(keycloakifyDirPath, "dist", "package.json"),
-    Buffer.from(
-        JSON.stringify(
-            (() => {
-                const packageJsonParsed = JSON.parse(fs.readFileSync(pathJoin(keycloakifyDirPath, "package.json")).toString("utf8"));
-
-                return {
-                    ...packageJsonParsed,
-                    "main": packageJsonParsed["main"].replace(/^dist\//, ""),
-                    "types": packageJsonParsed["types"].replace(/^dist\//, "")
-                };
-            })(),
-            null,
-            2
-        ),
-        "utf8"
-    )
-);
-
-const commonThirdPartyDeps = (() => {
-    const namespaceModuleNames = ["@emotion"];
-    const standaloneModuleNames = ["react", "@types/react", "powerhooks", "tss-react", "evt"];
-
-    return [
-        ...namespaceModuleNames
-            .map(namespaceModuleName =>
-                fs
-                    .readdirSync(pathJoin(keycloakifyDirPath, "node_modules", namespaceModuleName))
-                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
-            )
-            .reduce((prev, curr) => [...prev, ...curr], []),
-        ...standaloneModuleNames
-    ];
-})();
-
-const yarnHomeDirPath = pathJoin(keycloakifyDirPath, ".yarn_home");
-
-execSync(["rm -rf", "mkdir"].map(cmd => `${cmd} ${yarnHomeDirPath}`).join(" && "));
-
-const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
-    const { targetModuleName, cwd } = params;
-
-    const cmd = ["yarn", "link", ...(targetModuleName !== undefined ? [targetModuleName] : [])].join(" ");
-
-    console.log(`$ cd ${pathRelative(keycloakifyDirPath, cwd) || "."} && ${cmd}`);
-
-    execSync(cmd, {
-        cwd,
-        "env": {
-            ...process.env,
-            "HOME": yarnHomeDirPath
-        }
-    });
-};
-
-const testAppPaths = (() => {
-    const arg = process.argv[2];
-
-    const testAppNames = arg !== undefined ? [arg] : ["keycloakify-starter", "keycloakify-advanced-starter"];
-
-    return testAppNames
-        .map(testAppName => {
-            const testAppPath = pathJoin(keycloakifyDirPath, "..", testAppName);
-
-            if (fs.existsSync(testAppPath)) {
-                return testAppPath;
-            }
-
-            console.warn(`Skipping ${testAppName} since it cant be found here: ${testAppPath}`);
-
-            return undefined;
-        })
-        .filter(exclude(undefined));
-})();
-
-if (testAppPaths.length === 0) {
-    console.error("No test app to link into!");
-    process.exit(-1);
-}
-
-testAppPaths.forEach(testAppPath => execSync("yarn install", { "cwd": testAppPath }));
-
-console.log("=== Linking common dependencies ===");
-
-const total = commonThirdPartyDeps.length;
-let current = 0;
-
-commonThirdPartyDeps.forEach(commonThirdPartyDep => {
-    current++;
-
-    console.log(`${current}/${total} ${commonThirdPartyDep}`);
-
-    const localInstallPath = pathJoin(
-        ...[keycloakifyDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])]
-    );
-
-    execYarnLink({ "cwd": localInstallPath });
-});
-
-commonThirdPartyDeps.forEach(commonThirdPartyDep =>
-    testAppPaths.forEach(testAppPath =>
-        execYarnLink({
-            "cwd": testAppPath,
-            "targetModuleName": commonThirdPartyDep
-        })
-    )
-);
-
-console.log("=== Linking in house dependencies ===");
-
-execYarnLink({ "cwd": pathJoin(keycloakifyDirPath, "dist") });
-
-testAppPaths.forEach(testAppPath =>
-    execYarnLink({
-        "cwd": testAppPath,
-        "targetModuleName": "keycloakify"
-    })
-);

src/bin/tools/crc32.ts

@@ -0,0 +1,54 @@
+import { Readable } from "stream";
+
+const crc32tab = [
+    0x00000000, 0x77073096, 0xee0e612c, 0x990951ba, 0x076dc419, 0x706af48f, 0xe963a535, 0x9e6495a3, 0x0edb8832, 0x79dcb8a4, 0xe0d5e91e, 0x97d2d988,
+    0x09b64c2b, 0x7eb17cbd, 0xe7b82d07, 0x90bf1d91, 0x1db71064, 0x6ab020f2, 0xf3b97148, 0x84be41de, 0x1adad47d, 0x6ddde4eb, 0xf4d4b551, 0x83d385c7,
+    0x136c9856, 0x646ba8c0, 0xfd62f97a, 0x8a65c9ec, 0x14015c4f, 0x63066cd9, 0xfa0f3d63, 0x8d080df5, 0x3b6e20c8, 0x4c69105e, 0xd56041e4, 0xa2677172,
+    0x3c03e4d1, 0x4b04d447, 0xd20d85fd, 0xa50ab56b, 0x35b5a8fa, 0x42b2986c, 0xdbbbc9d6, 0xacbcf940, 0x32d86ce3, 0x45df5c75, 0xdcd60dcf, 0xabd13d59,
+    0x26d930ac, 0x51de003a, 0xc8d75180, 0xbfd06116, 0x21b4f4b5, 0x56b3c423, 0xcfba9599, 0xb8bda50f, 0x2802b89e, 0x5f058808, 0xc60cd9b2, 0xb10be924,
+    0x2f6f7c87, 0x58684c11, 0xc1611dab, 0xb6662d3d, 0x76dc4190, 0x01db7106, 0x98d220bc, 0xefd5102a, 0x71b18589, 0x06b6b51f, 0x9fbfe4a5, 0xe8b8d433,
+    0x7807c9a2, 0x0f00f934, 0x9609a88e, 0xe10e9818, 0x7f6a0dbb, 0x086d3d2d, 0x91646c97, 0xe6635c01, 0x6b6b51f4, 0x1c6c6162, 0x856530d8, 0xf262004e,
+    0x6c0695ed, 0x1b01a57b, 0x8208f4c1, 0xf50fc457, 0x65b0d9c6, 0x12b7e950, 0x8bbeb8ea, 0xfcb9887c, 0x62dd1ddf, 0x15da2d49, 0x8cd37cf3, 0xfbd44c65,
+    0x4db26158, 0x3ab551ce, 0xa3bc0074, 0xd4bb30e2, 0x4adfa541, 0x3dd895d7, 0xa4d1c46d, 0xd3d6f4fb, 0x4369e96a, 0x346ed9fc, 0xad678846, 0xda60b8d0,
+    0x44042d73, 0x33031de5, 0xaa0a4c5f, 0xdd0d7cc9, 0x5005713c, 0x270241aa, 0xbe0b1010, 0xc90c2086, 0x5768b525, 0x206f85b3, 0xb966d409, 0xce61e49f,
+    0x5edef90e, 0x29d9c998, 0xb0d09822, 0xc7d7a8b4, 0x59b33d17, 0x2eb40d81, 0xb7bd5c3b, 0xc0ba6cad, 0xedb88320, 0x9abfb3b6, 0x03b6e20c, 0x74b1d29a,
+    0xead54739, 0x9dd277af, 0x04db2615, 0x73dc1683, 0xe3630b12, 0x94643b84, 0x0d6d6a3e, 0x7a6a5aa8, 0xe40ecf0b, 0x9309ff9d, 0x0a00ae27, 0x7d079eb1,
+    0xf00f9344, 0x8708a3d2, 0x1e01f268, 0x6906c2fe, 0xf762575d, 0x806567cb, 0x196c3671, 0x6e6b06e7, 0xfed41b76, 0x89d32be0, 0x10da7a5a, 0x67dd4acc,
+    0xf9b9df6f, 0x8ebeeff9, 0x17b7be43, 0x60b08ed5, 0xd6d6a3e8, 0xa1d1937e, 0x38d8c2c4, 0x4fdff252, 0xd1bb67f1, 0xa6bc5767, 0x3fb506dd, 0x48b2364b,
+    0xd80d2bda, 0xaf0a1b4c, 0x36034af6, 0x41047a60, 0xdf60efc3, 0xa867df55, 0x316e8eef, 0x4669be79, 0xcb61b38c, 0xbc66831a, 0x256fd2a0, 0x5268e236,
+    0xcc0c7795, 0xbb0b4703, 0x220216b9, 0x5505262f, 0xc5ba3bbe, 0xb2bd0b28, 0x2bb45a92, 0x5cb36a04, 0xc2d7ffa7, 0xb5d0cf31, 0x2cd99e8b, 0x5bdeae1d,
+    0x9b64c2b0, 0xec63f226, 0x756aa39c, 0x026d930a, 0x9c0906a9, 0xeb0e363f, 0x72076785, 0x05005713, 0x95bf4a82, 0xe2b87a14, 0x7bb12bae, 0x0cb61b38,
+    0x92d28e9b, 0xe5d5be0d, 0x7cdcefb7, 0x0bdbdf21, 0x86d3d2d4, 0xf1d4e242, 0x68ddb3f8, 0x1fda836e, 0x81be16cd, 0xf6b9265b, 0x6fb077e1, 0x18b74777,
+    0x88085ae6, 0xff0f6a70, 0x66063bca, 0x11010b5c, 0x8f659eff, 0xf862ae69, 0x616bffd3, 0x166ccf45, 0xa00ae278, 0xd70dd2ee, 0x4e048354, 0x3903b3c2,
+    0xa7672661, 0xd06016f7, 0x4969474d, 0x3e6e77db, 0xaed16a4a, 0xd9d65adc, 0x40df0b66, 0x37d83bf0, 0xa9bcae53, 0xdebb9ec5, 0x47b2cf7f, 0x30b5ffe9,
+    0xbdbdf21c, 0xcabac28a, 0x53b39330, 0x24b4a3a6, 0xbad03605, 0xcdd70693, 0x54de5729, 0x23d967bf, 0xb3667a2e, 0xc4614ab8, 0x5d681b02, 0x2a6f2b94,
+    0xb40bbe37, 0xc30c8ea1, 0x5a05df1b, 0x2d02ef8d
+];
+
+/**
+ *
+ * @param input either a byte stream, a string or a buffer, you want to have the checksum for
+ * @returns a promise for a checksum (uint32)
+ */
+export function crc32(input: Readable | String | Buffer): Promise<number> {
+    if (typeof input === "string") {
+        let crc = ~0;
+        for (let i = 0; i < input.length; i++) crc = (crc >>> 8) ^ crc32tab[(crc ^ input.charCodeAt(i)) & 0xff];
+        return Promise.resolve((crc ^ -1) >>> 0);
+    } else if (input instanceof Buffer) {
+        let crc = ~0;
+        for (let i = 0; i < input.length; i++) crc = (crc >>> 8) ^ crc32tab[(crc ^ input[i]) & 0xff];
+        return Promise.resolve((crc ^ -1) >>> 0);
+    } else if (input instanceof Readable) {
+        return new Promise<number>((resolve, reject) => {
+            let crc = ~0;
+            input.on("end", () => resolve((crc ^ -1) >>> 0));
+            input.on("error", e => reject(e));
+            input.on("data", (chunk: Buffer) => {
+                for (let i = 0; i < chunk.length; i++) crc = (crc >>> 8) ^ crc32tab[(crc ^ chunk[i]) & 0xff];
+            });
+        });
+    } else {
+        throw new Error("Unsupported input " + typeof input);
+    }
+}

src/bin/tools/deflate.ts

@@ -0,0 +1,61 @@
+import { PassThrough, Readable, TransformCallback, Writable } from "stream";
+import { pipeline } from "stream/promises";
+import { deflateRaw as deflateRawCb, createDeflateRaw } from "zlib";
+import { promisify } from "util";
+
+import { crc32 } from "./crc32";
+import tee from "./tee";
+
+const deflateRaw = promisify(deflateRawCb);
+
+/**
+ * A stream transformer that records the number of bytes
+ * passed in its `size` property.
+ */
+class ByteCounter extends PassThrough {
+    size: number = 0;
+    _transform(chunk: any, encoding: BufferEncoding, callback: TransformCallback) {
+        if ("length" in chunk) this.size += chunk.length;
+        super._transform(chunk, encoding, callback);
+    }
+}
+
+/**
+ * @param data buffer containing the data to be compressed
+ * @returns a buffer containing the compressed/deflated data and the crc32 checksum
+ *  of the source data
+ */
+export async function deflateBuffer(data: Buffer) {
+    const [deflated, checksum] = await Promise.all([deflateRaw(data), crc32(data)]);
+    return { deflated, crc32: checksum };
+}
+
+/**
+ * @param input a byte stream, containing data to be compressed
+ * @param sink a method that will accept chunks of compressed data; We don't pass
+ *   a writable here, since we don't want the writablestream to be closed after
+ *   a single file
+ * @returns a promise, which will resolve with the crc32 checksum and the
+ * compressed size
+ */
+export async function deflateStream(input: Readable, sink: (chunk: Buffer) => void) {
+    const deflateWriter = new Writable({
+        write(chunk, _, callback) {
+            sink(chunk);
+            callback();
+        }
+    });
+
+    // tee the input stream, so we can compress and calc crc32 in parallel
+    const [rs1, rs2] = tee(input);
+    const byteCounter = new ByteCounter();
+    const [_, crc] = await Promise.all([
+        // pipe input into zip compressor, count the bytes
+        // returned and pass compressed data to the sink
+        pipeline(rs1, createDeflateRaw(), byteCounter, deflateWriter),
+        // calc checksum
+        crc32(rs2)
+    ]);
+
+    return { crc32: crc, compressedSize: byteCounter.size };
+}

src/bin/tools/downloadAndUnzip.ts

@@ -1,81 +1,289 @@
-import { basename as pathBasename, join as pathJoin } from "path";
-import { execSync } from "child_process";
-import * as fs from "fs";
+import { dirname as pathDirname, basename as pathBasename, join as pathJoin } from "path";
+import { createReadStream, createWriteStream, unlinkSync } from "fs";
+import { stat, mkdir, unlink, readFile, writeFile } from "fs/promises";
 import { transformCodebase } from "./transformCodebase";
-import { rm, rm_rf } from "./rm";
-import * as crypto from "crypto";
+import { createHash } from "crypto";
+import http from "http";
+import https from "https";
+import { createInflateRaw } from "zlib";
 
-/** assert url ends with .zip */
-export function downloadAndUnzip(params: {
+import type { Readable } from "stream";
+
+function hash(s: string) {
+    return createHash("sha256").update(s).digest("hex");
+}
+
+async function maybeReadFile(path: string) {
+    try {
+        return await readFile(path, "utf-8");
+    } catch (error) {
+        if ((error as Error & { code: string }).code === "ENOENT") return undefined;
+        throw error;
+    }
+}
+
+async function maybeStat(path: string) {
+    try {
+        return await stat(path);
+    } catch (error) {
+        if ((error as Error & { code: string }).code === "ENOENT") return undefined;
+        throw error;
+    }
+}
+
+/**
+ * Download a file from `url` to `dir`. Will try to avoid downloading existing
+ * files by using an `{hash(url)}.etag` file. If this file exists, we add an
+ * etag headear, so server can tell us if file changed and we should re-download
+ * or if our file is up-to-date.
+ *
+ * Warning, this method assumes that the target filename can be extracted from
+ * url, content-disposition headers are ignored.
+ *
+ * If the target directory does not exist, it will be created.
+ *
+ * If the target file exists and is out of date, it will be overwritten.
+ * If the target file exists and there is no etag file, the target file will
+ * be overwritten.
+ *
+ * @param url download url
+ * @param dir target directory
+ * @returns promise for the full path of the downloaded file
+ */
+async function download(url: string, dir: string): Promise<string> {
+    await mkdir(dir, { recursive: true });
+    const filename = pathBasename(url);
+    const filepath = pathJoin(dir, filename);
+    // If downloaded file exists already and has an `.etag` companion file,
+    // read the etag from that file. This will avoid re-downloading the file
+    // if it is up to date.
+    const exists = await maybeStat(filepath);
+    const etagFilepath = pathJoin(dir, "_" + hash(url).substring(0, 15) + ".etag");
+    const etag = !exists ? undefined : await maybeReadFile(etagFilepath);
+
+    return new Promise((resolve, reject) => {
+        // use inner method to allow following redirects
+        function request(url1: URL) {
+            const headers: Record<string, string> = {};
+            if (etag) headers["If-None-Match"] = etag;
+            (url1.protocol === "https:" ? https : http).get(url1, { headers }, response => {
+                if (response.statusCode === 301 || response.statusCode === 302) {
+                    // follow redirects
+                    request(new URL(response.headers.location!!));
+                } else if (response.statusCode === 304) {
+                    // up-to-date, resolve now
+                    resolve(filepath);
+                } else if (response.statusCode !== 200) {
+                    reject(new Error(`Request to ${url1} returned status ${response.statusCode}.`));
+                } else {
+                    const fp = createWriteStream(filepath, { autoClose: true });
+                    fp.on("err", e => {
+                        fp.close();
+                        unlinkSync(filepath);
+                        reject(e);
+                    });
+                    fp.on("finish", async () => {
+                        // when targetfile has been written, write etag file so that
+                        // next time around we don't need to re-download
+                        const responseEtag = response.headers.etag;
+                        if (responseEtag) await writeFile(etagFilepath, responseEtag, "utf-8");
+                        resolve(filepath);
+                    });
+                    response.pipe(fp);
+                }
+            });
+        }
+        request(new URL(url));
+    });
+}
+
+/**
+ * @typedef
+ * @type MultiError = Error & { cause: Error[] }
+ */
+
+/**
+ * Extract the archive `zipFile` into the directory `dir`. If `archiveDir` is given,
+ * only that directory will be extracted, stripping the given path components.
+ *
+ * If dir does not exist, it will be created.
+ *
+ * If any archive file exists, it will be overwritten.
+ *
+ * Will unzip using all available nodejs worker threads.
+ *
+ * Will try to clean up extracted files on failure.
+ *
+ * If unpacking fails, will either throw an regular error, or
+ * possibly an `MultiError`, which contains a `cause` field with
+ * a number of root cause errors.
+ *
+ * Warning this method is not optimized for continuous reading of the zip
+ * archive, but is a trade-off between simplicity and allowing extraction
+ * of a single directory from the archive.
+ *
+ * @param zipFile the file to unzip
+ * @param dir the target directory
+ * @param archiveDir if given, unpack only files from this archive directory
+ * @throws {MultiError} error
+ * @returns Promise for a list of full file paths pointing to actually extracted files
+ */
+async function unzip(zipFile: string, dir: string, archiveDir?: string): Promise<string[]> {
+    await mkdir(dir, { recursive: true });
+    const promises: Promise<string>[] = [];
+
+    // Iterate over all files in the zip, skip files which are not in archiveDir,
+    // if given.
+    for await (const record of iterateZipArchive(zipFile)) {
+        const { path: recordPath, createReadStream: createRecordReadStream } = record;
+        const filePath = pathJoin(dir, recordPath);
+        const parent = pathDirname(filePath);
+        if (archiveDir && !recordPath.startsWith(archiveDir)) continue;
+        promises.push(
+            new Promise<string>(async (resolve, reject) => {
+                await mkdir(parent, { recursive: true });
+                // Pull the file out of the archive, write it to the target directory
+                const input = createRecordReadStream();
+                const output = createWriteStream(filePath);
+                output.on("error", e => reject(Object.assign(e, { filePath })));
+                output.on("finish", () => resolve(filePath));
+                input.pipe(output);
+            })
+        );
+    }
+
+    // Wait until _all_ files are either extracted or failed
+    const results = await Promise.allSettled(promises);
+    const success = results.filter(r => r.status === "fulfilled").map(r => (r as PromiseFulfilledResult<string>).value);
+    const failure = results.filter(r => r.status === "rejected").map(r => (r as PromiseRejectedResult).reason);
+
+    // If any extraction failed, try to clean up, then throw a MultiError,
+    // which has a `cause` field, containing a list of root cause errors.
+    if (failure.length) {
+        await Promise.all(success.map(path => unlink(path)));
+        await Promise.all(failure.map(e => e && e.path && unlink(e.path as string)));
+        const e = new Error("Failed to extract: " + failure.map(e => e.message).join(";"));
+        (e as any).cause = failure;
+        throw e;
+    }
+
+    return success;
+}
+
+/**
+ *
+ * @param file file to read
+ * @param start first byte to read
+ * @param end last byte to read
+ * @returns Promise of a buffer of read bytes
+ */
+async function readFileChunk(file: string, start: number, end: number): Promise<Buffer> {
+    const chunks: Buffer[] = [];
+    return new Promise((resolve, reject) => {
+        const stream = createReadStream(file, { start, end });
+        stream.on("error", e => reject(e));
+        stream.on("end", () => resolve(Buffer.concat(chunks)));
+        stream.on("data", chunk => chunks.push(chunk as Buffer));
+    });
+}
+
+type ZipRecord = {
+    path: string;
+    createReadStream: () => Readable;
+    compressionMethod: "deflate" | undefined;
+};
+
+type ZipRecordGenerator = AsyncGenerator<ZipRecord, void, unknown>;
+
+/**
+ * Iterate over all records of a zipfile, and yield a ZipRecord.
+ * Use `record.createReadStream()` to actually read the file.
+ *
+ * Warning this method will only work with single-disk zip files.
+ * Warning this method may fail if the zip archive has an crazy amount
+ * of files and the central directory is not fully contained within the
+ * last 65k bytes of the zip file.
+ *
+ * @param zipFile
+ * @returns AsyncGenerator which will yield ZipRecords
+ */
+async function* iterateZipArchive(zipFile: string): ZipRecordGenerator {
+    // Need to know zip file size before we can do anything  else
+    const { size } = await stat(zipFile);
+    const chunkSize = 65_535 + 22 + 1; // max comment size + end header size + wiggle
+    // Read last ~65k bytes. Zip files have an comment up to 65_535 bytes at the very end,
+    // before that comes the zip central directory end header.
+    let chunk = await readFileChunk(zipFile, size - chunkSize, size);
+    const unread = size - chunk.length;
+    let i = chunk.length - 4;
+    let found = false;
+    // Find central directory end header, reading backwards from the end
+    while (!found && i-- > 0) if (chunk[i] === 0x50 && chunk.readUInt32LE(i) === 0x06054b50) found = true;
+    if (!found) throw new Error("Not a zip file");
+    // This method will fail on a multi-disk zip, so bail early.
+    if (chunk.readUInt16LE(i + 4) !== 0) throw new Error("Multi-disk zip not supported");
+    let nFiles = chunk.readUint16LE(i + 10);
+    // Get the position of the central directory
+    const directorySize = chunk.readUint32LE(i + 12);
+    const directoryOffset = chunk.readUint32LE(i + 16);
+    if (directoryOffset === 0xffff_ffff) throw new Error("zip64 not supported");
+    if (directoryOffset > size) throw new Error(`Central directory offset ${directoryOffset} is outside file`);
+    i = directoryOffset - unread;
+    // If i < 0, it means that the central directory is not contained within `chunk`
+    if (i < 0) {
+        chunk = await readFileChunk(zipFile, directoryOffset, directoryOffset + directorySize);
+        i = 0;
+    }
+    // Now iterate the central directory records, yield an `ZipRecord` for every entry
+    while (nFiles-- > 0) {
+        // Check for marker bytes
+        if (chunk.readUInt32LE(i) !== 0x02014b50) throw new Error("No central directory record at position " + (unread + i));
+        const compressionMethod = ({ 8: "deflate" } as const)[chunk.readUint16LE(i + 10)];
+        const compressedFileSize = chunk.readUint32LE(i + 20);
+        const filenameLength = chunk.readUint16LE(i + 28);
+        const extraLength = chunk.readUint16LE(i + 30);
+        const commentLength = chunk.readUint16LE(i + 32);
+        // Start of the actual content byte stream is after the 'local' record header,
+        // which is  30 bytes long plus filename and extra field
+        const start = chunk.readUint32LE(i + 42) + 30 + filenameLength + extraLength;
+        const end = start + compressedFileSize;
+        const filename = chunk.slice(i + 46, i + 46 + filenameLength).toString("utf-8");
+        const createRecordReadStream = () => {
+            const input = createReadStream(zipFile, { start, end });
+            if (compressionMethod === "deflate") {
+                const inflate = createInflateRaw();
+                input.pipe(inflate);
+                return inflate;
+            }
+            return input;
+        };
+        if (end > start) yield { path: filename, createReadStream: createRecordReadStream, compressionMethod };
+        // advance pointer to next central directory entry
+        i += 46 + filenameLength + extraLength + commentLength;
+    }
+}
+
+export async function downloadAndUnzip({
+    url,
+    destDirPath,
+    pathOfDirToExtractInArchive,
+    cacheDirPath
+}: {
     isSilent: boolean;
     url: string;
     destDirPath: string;
     pathOfDirToExtractInArchive?: string;
     cacheDirPath: string;
 }) {
-    const { url, destDirPath, pathOfDirToExtractInArchive, cacheDirPath } = params;
+    const downloadHash = hash(JSON.stringify({ url, pathOfDirToExtractInArchive })).substring(0, 15);
+    const extractDirPath = pathJoin(cacheDirPath, `_${downloadHash}`);
 
-    const extractDirPath = pathJoin(
-        cacheDirPath,
-        `_${crypto.createHash("sha256").update(JSON.stringify({ url, pathOfDirToExtractInArchive })).digest("hex").substring(0, 15)}`
-    );
+    const zipFilepath = await download(url, cacheDirPath);
+    const zipMtime = (await stat(zipFilepath)).mtimeMs;
+    const unzipMtime = (await maybeStat(extractDirPath))?.mtimeMs;
 
-    fs.mkdirSync(cacheDirPath, { "recursive": true });
+    if (!unzipMtime || zipMtime > unzipMtime) await unzip(zipFilepath, extractDirPath, pathOfDirToExtractInArchive);
 
-    const { readIsSuccessByExtractDirPath, writeIsSuccessByExtractDirPath } = (() => {
-        const filePath = pathJoin(cacheDirPath, "isSuccessByExtractDirPath.json");
-
-        type IsSuccessByExtractDirPath = Record<string, boolean | undefined>;
-
-        function readIsSuccessByExtractDirPath(): IsSuccessByExtractDirPath {
-            if (!fs.existsSync(filePath)) {
-                return {};
-            }
-
-            return JSON.parse(fs.readFileSync(filePath).toString("utf8"));
-        }
-
-        function writeIsSuccessByExtractDirPath(isSuccessByExtractDirPath: IsSuccessByExtractDirPath): void {
-            fs.writeFileSync(filePath, Buffer.from(JSON.stringify(isSuccessByExtractDirPath, null, 2), "utf8"));
-        }
-
-        return { readIsSuccessByExtractDirPath, writeIsSuccessByExtractDirPath };
-    })();
-
-    downloadAndUnzip: {
-        const isSuccessByExtractDirPath = readIsSuccessByExtractDirPath();
-
-        if (isSuccessByExtractDirPath[extractDirPath]) {
-            break downloadAndUnzip;
-        }
-
-        writeIsSuccessByExtractDirPath({
-            ...isSuccessByExtractDirPath,
-            [extractDirPath]: false
-        });
-
-        rm_rf(extractDirPath);
-
-        fs.mkdirSync(extractDirPath);
-
-        const zipFileBasename = pathBasename(url);
-
-        execSync(`curl -L ${url} -o ${zipFileBasename} ${params.isSilent ? "-s" : ""}`, { "cwd": extractDirPath });
-
-        execSync(`unzip -o ${zipFileBasename}${pathOfDirToExtractInArchive === undefined ? "" : ` "${pathOfDirToExtractInArchive}/**/*"`}`, {
-            "cwd": extractDirPath
-        });
-
-        rm(zipFileBasename, { "cwd": extractDirPath });
-
-        writeIsSuccessByExtractDirPath({
-            ...isSuccessByExtractDirPath,
-            [extractDirPath]: true
-        });
-    }
-
-    transformCodebase({
-        "srcDirPath": pathOfDirToExtractInArchive === undefined ? extractDirPath : pathJoin(extractDirPath, pathOfDirToExtractInArchive),
-        destDirPath
-    });
+    const srcDirPath = pathOfDirToExtractInArchive === undefined ? extractDirPath : pathJoin(extractDirPath, pathOfDirToExtractInArchive);
+    transformCodebase({ srcDirPath, destDirPath });
 }

src/bin/tools/grant-exec-perms.ts

@@ -1,10 +1,17 @@
 import { getProjectRoot } from "./getProjectRoot";
 import { join as pathJoin } from "path";
-import * as child_process from "child_process";
-import * as fs from "fs";
+import { constants } from "fs";
+import { chmod, stat } from "fs/promises";
 
-Object.entries<string>(JSON.parse(fs.readFileSync(pathJoin(getProjectRoot(), "package.json")).toString("utf8"))["bin"]).forEach(([, scriptPath]) =>
-    child_process.execSync(`chmod +x ${scriptPath}`, {
-        "cwd": getProjectRoot()
-    })
-);
+(async () => {
+    const { bin } = await import(pathJoin(getProjectRoot(), "package.json"));
+
+    const promises = Object.values<string>(bin).map(async scriptPath => {
+        const fullPath = pathJoin(getProjectRoot(), scriptPath);
+        const oldMode = (await stat(fullPath)).mode;
+        const newMode = oldMode | constants.S_IXUSR | constants.S_IXGRP | constants.S_IXOTH;
+        await chmod(fullPath, newMode);
+    });
+
+    await Promise.all(promises);
+})();

src/bin/tools/jar.ts

@@ -0,0 +1,102 @@
+import { Readable, Transform } from "stream";
+import { dirname, relative, sep } from "path";
+import { createWriteStream } from "fs";
+
+import walk from "./walk";
+import type { ZipSource } from "./zip";
+import zip from "./zip";
+import { mkdir } from "fs/promises";
+
+/** Trim leading whitespace from every line */
+const trimIndent = (s: string) => s.replace(/(\n)\s+/g, "$1");
+
+type JarArgs = {
+    rootPath: string;
+    targetPath: string;
+    groupId: string;
+    artifactId: string;
+    version: string;
+};
+
+/**
+ * Create a jar archive, using the resources found at `rootPath` (a directory) and write the
+ * archive to `targetPath` (a file). Use `groupId`, `artifactId` and `version` to define
+ * the contents of the pom.properties file which is going to be added to the archive.
+ */
+export default async function jar({ groupId, artifactId, version, rootPath, targetPath }: JarArgs) {
+    const manifest: ZipSource = {
+        path: "META-INF/MANIFEST.MF",
+        data: Buffer.from(
+            trimIndent(
+                `Manifest-Version: 1.0
+                 Archiver-Version: Plexus Archiver
+                 Created-By: Keycloakify
+                 Built-By: unknown
+                 Build-Jdk: 19.0.0`
+            )
+        )
+    };
+
+    const pomProps: ZipSource = {
+        path: `META-INF/maven/${groupId}/${artifactId}/pom.properties`,
+        data: Buffer.from(
+            trimIndent(
+                `# Generated by keycloakify
+                 # ${new Date()}
+                 artifactId=${artifactId}
+                 groupId=${groupId}
+                 version=${version}`
+            )
+        )
+    };
+
+    /**
+     * Convert every path entry to a ZipSource record, and when all records are
+     * processed, append records for MANIFEST.mf and pom.properties
+     */
+    const pathToRecord = () =>
+        new Transform({
+            objectMode: true,
+            transform: function (fsPath, _, cb) {
+                const path = relative(rootPath, fsPath).split(sep).join("/");
+                this.push({ path, fsPath });
+                cb();
+            },
+            final: function () {
+                this.push(manifest);
+                this.push(pomProps);
+                this.push(null);
+            }
+        });
+
+    await mkdir(dirname(targetPath), { recursive: true });
+
+    // Create an async pipeline, wait until everything is fully processed
+    await new Promise<void>((resolve, reject) => {
+        // walk all files in `rootPath` recursively
+        Readable.from(walk(rootPath))
+            // transform every path into a ZipSource object
+            .pipe(pathToRecord())
+            // let the zip lib convert all ZipSource objects into a byte stream
+            .pipe(zip())
+            // write that byte stream to targetPath
+            .pipe(createWriteStream(targetPath, { encoding: "binary" }))
+            .on("finish", () => resolve())
+            .on("error", e => reject(e));
+    });
+}
+
+/**
+ * Standalone usage, call e.g. `ts-node jar.ts dirWithSources some-jar.jar`
+ */
+if (require.main === module) {
+    const main = () =>
+        jar({
+            rootPath: process.argv[2],
+            targetPath: process.argv[3],
+            artifactId: process.env.ARTIFACT_ID ?? "artifact",
+            groupId: process.env.GROUP_ID ?? "group",
+            version: process.env.VERSION ?? "1.0.0"
+        });
+    main().catch(e => console.error(e));
+}

src/bin/tools/rm.ts

@@ -1,31 +0,0 @@
-import { execSync } from "child_process";
-
-function rmInternal(params: { pathToRemove: string; args: string | undefined; cwd: string | undefined }) {
-    const { pathToRemove, args, cwd } = params;
-
-    execSync(`rm ${args ? `-${args} ` : ""}${pathToRemove.replace(/ /g, "\\ ")}`, cwd !== undefined ? { cwd } : undefined);
-}
-
-export function rm(pathToRemove: string, options?: { cwd: string }) {
-    rmInternal({
-        pathToRemove,
-        "args": undefined,
-        "cwd": options?.cwd
-    });
-}
-
-export function rm_r(pathToRemove: string, options?: { cwd: string }) {
-    rmInternal({
-        pathToRemove,
-        "args": "r",
-        "cwd": options?.cwd
-    });
-}
-
-export function rm_rf(pathToRemove: string, options?: { cwd: string }) {
-    rmInternal({
-        pathToRemove,
-        "args": "rf",
-        "cwd": options?.cwd
-    });
-}

src/bin/tools/tee.ts

@@ -0,0 +1,37 @@
+import { PassThrough, Readable } from "stream";
+
+export default function tee(input: Readable) {
+    const a = new PassThrough();
+    const b = new PassThrough();
+
+    let aFull = false;
+    let bFull = false;
+
+    a.on("drain", () => {
+        aFull = false;
+        if (!aFull && !bFull) input.resume();
+    });
+    b.on("drain", () => {
+        bFull = false;
+        if (!aFull && !bFull) input.resume();
+    });
+
+    input.on("error", e => {
+        a.emit("error", e);
+        b.emit("error", e);
+    });
+
+    input.on("data", chunk => {
+        aFull = !a.write(chunk);
+        bFull = !b.write(chunk);
+
+        if (aFull || bFull) input.pause();
+    });
+
+    input.on("end", () => {
+        a.end();
+        b.end();
+    });
+
+    return [a, b] as const;
+}

src/bin/tools/walk.ts

@@ -0,0 +1,19 @@
+import { readdir } from "fs/promises";
+import { resolve } from "path";
+
+/**
+ * Asynchronously and recursively walk a directory tree, yielding every file and directory
+ * found
+ *
+ * @param root the starting directory
+ * @returns AsyncGenerator
+ */
+export default async function* walk(root: string): AsyncGenerator<string, void, void> {
+    for (const entry of await readdir(root, { withFileTypes: true })) {
+        const absolutePath = resolve(root, entry.name);
+        if (entry.isDirectory()) {
+            yield absolutePath;
+            yield* walk(absolutePath);
+        } else yield absolutePath;
+    }
+}

src/bin/tools/zip.ts

@@ -0,0 +1,246 @@
+import { Transform, TransformOptions } from "stream";
+import { createReadStream } from "fs";
+import { stat } from "fs/promises";
+import { Blob } from "buffer";
+
+import { deflateBuffer, deflateStream } from "./deflate";
+
+/**
+ * Zip source
+ * @property filename the name of the entry in the archie
+ * @property path of the source file, if the source is an actual file
+ * @property data the actual data buffer, if the source is constructed in-memory
+ */
+export type ZipSource = { path: string } & ({ fsPath: string } | { data: Buffer });
+
+export type ZipRecord = {
+    path: string;
+    compression: "deflate" | undefined;
+    uncompressedSize: number;
+    compressedSize?: number;
+    crc32?: number;
+    offset?: number;
+};
+
+/**
+ * @returns the actual byte size of an string
+ */
+function utf8size(s: string) {
+    return new Blob([s]).size;
+}
+
+/**
+ * @param record
+ * @returns a buffer representing a Zip local header
+ * @link https://en.wikipedia.org/wiki/ZIP_(file_format)#Local_file_header
+ */
+function localHeader(record: ZipRecord) {
+    const { path, compression, uncompressedSize } = record;
+    const filenameSize = utf8size(path);
+    const buf = Buffer.alloc(30 + filenameSize);
+
+    buf.writeUInt32LE(0x04_03_4b_50, 0); // local header signature
+    buf.writeUInt16LE(10, 4); // min version
+    // we write 0x08 because crc and compressed size are unknown at
+    buf.writeUInt16LE(0x08, 6); // general purpose bit flag
+    buf.writeUInt16LE(compression ? ({ "deflate": 8 } as const)[compression] : 0, 8);
+    buf.writeUInt16LE(0, 10); // modified time
+    buf.writeUInt16LE(0, 12); // modified date
+    buf.writeUInt32LE(0, 14); // crc unknown
+    buf.writeUInt32LE(0, 18); // compressed size unknown
+    buf.writeUInt32LE(uncompressedSize, 22);
+    buf.writeUInt16LE(filenameSize, 26);
+    buf.writeUInt16LE(0, 28); // extra field length
+    buf.write(path, 30, "utf-8");
+
+    return buf;
+}
+
+/**
+ * @param record
+ * @returns a buffer representing a Zip central header
+ * @link https://en.wikipedia.org/wiki/ZIP_(file_format)#Central_directory_file_header
+ */
+function centralHeader(record: ZipRecord) {
+    const { path, compression, crc32, compressedSize, uncompressedSize, offset } = record;
+    const filenameSize = utf8size(path);
+    const buf = Buffer.alloc(46 + filenameSize);
+    const isFile = !path.endsWith("/");
+
+    if (typeof offset === "undefined") throw new Error("Illegal argument");
+
+    // we don't want to deal with possibly messed up file or directory
+    // permissions, so we ignore the original permissions
+    const externalAttr = isFile ? 0x81a40000 : 0x41ed0000;
+
+    buf.writeUInt32LE(0x0201_4b50, 0); // central header signature
+    buf.writeUInt16LE(10, 4); // version
+    buf.writeUInt16LE(10, 6); // min version
+    buf.writeUInt16LE(0, 8); // general purpose bit flag
+    buf.writeUInt16LE(compression ? ({ "deflate": 8 } as const)[compression] : 0, 10);
+    buf.writeUInt16LE(0, 12); // modified time
+    buf.writeUInt16LE(0, 14); // modified date
+    buf.writeUInt32LE(crc32 || 0, 16);
+    buf.writeUInt32LE(compressedSize || 0, 20);
+    buf.writeUInt32LE(uncompressedSize, 24);
+    buf.writeUInt16LE(filenameSize, 28);
+    buf.writeUInt16LE(0, 30); // extra field length
+    buf.writeUInt16LE(0, 32); // comment field length
+    buf.writeUInt16LE(0, 34); // disk number
+    buf.writeUInt16LE(0, 36); // internal
+    buf.writeUInt32LE(externalAttr, 38); // external
+    buf.writeUInt32LE(offset, 42); // offset where file starts
+    buf.write(path, 46, "utf-8");
+
+    return buf;
+}
+
+/**
+ * @returns a buffer representing an Zip End-Of-Central-Directory block
+ * @link https://en.wikipedia.org/wiki/ZIP_(file_format)#End_of_central_directory_record_(EOCD)
+ */
+function eocd({ offset, cdSize, nRecords }: { offset: number; cdSize: number; nRecords: number }) {
+    const buf = Buffer.alloc(22);
+    buf.writeUint32LE(0x06054b50, 0); // eocd signature
+    buf.writeUInt16LE(0, 4); // disc number
+    buf.writeUint16LE(0, 6); // disc where central directory starts
+    buf.writeUint16LE(nRecords, 8); // records on this disc
+    buf.writeUInt16LE(nRecords, 10); // records total
+    buf.writeUInt32LE(cdSize, 12); // byte size of cd
+    buf.writeUInt32LE(offset, 16); // cd offset
+    buf.writeUint16LE(0, 20); // comment length
+
+    return buf;
+}
+
+/**
+ * @returns a stream Transform, which reads a stream of ZipRecords and
+ * writes a bytestream
+ */
+export default function zip() {
+    /**
+     * This is called when the input stream of ZipSource items is finished.
+     * Will write central directory and end-of-central-direcotry blocks.
+     */
+    const final = () => {
+        // write central directory
+        let cdSize = 0;
+        for (const record of records) {
+            const head = centralHeader(record);
+            zipTransform.push(head);
+            cdSize += head.length;
+        }
+
+        // write end-of-central-directory
+        zipTransform.push(eocd({ offset, cdSize, nRecords: records.length }));
+        // signal stream end
+        zipTransform.push(null);
+    };
+
+    /**
+     * Write a directory entry to the archive
+     * @param path
+     */
+    const writeDir = async (path: string) => {
+        const record: ZipRecord = {
+            path: path + "/",
+            offset,
+            compression: undefined,
+            uncompressedSize: 0
+        };
+        const head = localHeader(record);
+        zipTransform.push(head);
+        records.push(record);
+        offset += head.length;
+    };
+
+    /**
+     * Write a file entry to the archive
+     * @param archivePath path of the file in archive
+     * @param fsPath path to file on filesystem
+     * @param size of the actual, uncompressed, file
+     */
+    const writeFile = async (archivePath: string, fsPath: string, size: number) => {
+        const record: ZipRecord = {
+            path: archivePath,
+            offset,
+            compression: "deflate",
+            uncompressedSize: size
+        };
+        const head = localHeader(record);
+        zipTransform.push(head);
+
+        const { crc32, compressedSize } = await deflateStream(createReadStream(fsPath), chunk => zipTransform.push(chunk));
+
+        record.crc32 = crc32;
+        record.compressedSize = compressedSize;
+        records.push(record);
+        offset += head.length + compressedSize;
+    };
+
+    /**
+     * Write archive record based on filesystem file or directory
+     * @param archivePath path of item in archive
+     * @param fsPath path to item on filesystem
+     */
+    const writeFromPath = async (archivePath: string, fsPath: string) => {
+        const fileStats = await stat(fsPath);
+        fileStats.isDirectory() ? await writeDir(archivePath) /**/ : await writeFile(archivePath, fsPath, fileStats.size) /**/;
+    };
+
+    /**
+     * Write archive record based on data in a buffer
+     * @param path
+     * @param data
+     */
+    const writeFromBuffer = async (path: string, data: Buffer) => {
+        const { deflated, crc32 } = await deflateBuffer(data);
+        const record: ZipRecord = {
+            path,
+            compression: "deflate",
+            crc32,
+            uncompressedSize: data.length,
+            compressedSize: deflated.length,
+            offset
+        };
+        const head = localHeader(record);
+        zipTransform.push(head);
+        zipTransform.push(deflated);
+        records.push(record);
+        offset += head.length + deflated.length;
+    };
+
+    /**
+     * Write an archive record
+     * @param source
+     */
+    const writeRecord = async (source: ZipSource) => {
+        if ("fsPath" in source) await writeFromPath(source.path, source.fsPath);
+        else if ("data" in source) await writeFromBuffer(source.path, source.data);
+        else throw new Error("Illegal argument " + typeof source + "  " + JSON.stringify(source));
+    };
+
+    /**
+     * The actual stream transform function
+     * @param source
+     * @param _ encoding, ignored
+     * @param cb
+     */
+    const transform: TransformOptions["transform"] = async (source: ZipSource, _, cb) => {
+        await writeRecord(source);
+        cb();
+    };
+
+    /** offset and records keep local state during processing */
+    let offset = 0;
+    const records: ZipRecord[] = [];
+
+    const zipTransform = new Transform({
+        readableObjectMode: false,
+        writableObjectMode: true,
+        transform,
+        final
+    });
+
+    return zipTransform;
+}

src/lib/KcApp.tsx

@@ -1,41 +1,34 @@
-import React, { lazy, memo, Suspense } from "react";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { KcProps } from "./KcProps";
-import { __unsafe_useI18n as useI18n } from "../i18n";
-import type { I18n } from "../i18n";
+import React, { lazy, Suspense } from "react";
+import { __unsafe_useI18n as useI18n } from "./i18n";
 import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
+import type { KcContextBase } from "./getKcContext/KcContextBase";
+import type { PageProps } from "./KcProps";
+import type { I18nBase } from "./i18n";
+import type { SetOptional } from "./tools/SetOptional";
 
-const Login = lazy(() => import("./Login"));
-const Register = lazy(() => import("./Register"));
-const RegisterUserProfile = lazy(() => import("./RegisterUserProfile"));
-const Info = lazy(() => import("./Info"));
-const Error = lazy(() => import("./Error"));
-const LoginResetPassword = lazy(() => import("./LoginResetPassword"));
-const LoginVerifyEmail = lazy(() => import("./LoginVerifyEmail"));
-const Terms = lazy(() => import("./Terms"));
-const LoginOtp = lazy(() => import("./LoginOtp"));
-const LoginPassword = lazy(() => import("./LoginPassword"));
-const LoginUsername = lazy(() => import("./LoginUsername"));
-const WebauthnAuthenticate = lazy(() => import("./WebauthnAuthenticate"));
-const LoginUpdatePassword = lazy(() => import("./LoginUpdatePassword"));
-const LoginUpdateProfile = lazy(() => import("./LoginUpdateProfile"));
-const LoginIdpLinkConfirm = lazy(() => import("./LoginIdpLinkConfirm"));
-const LoginPageExpired = lazy(() => import("./LoginPageExpired"));
-const LoginIdpLinkEmail = lazy(() => import("./LoginIdpLinkEmail"));
-const LoginConfigTotp = lazy(() => import("./LoginConfigTotp"));
-const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
-const UpdateUserProfile = lazy(() => import("./UpdateUserProfile"));
-const IdpReviewUserProfile = lazy(() => import("./IdpReviewUserProfile"));
+const Login = lazy(() => import("./pages/Login"));
+const Register = lazy(() => import("./pages/Register"));
+const RegisterUserProfile = lazy(() => import("./pages/RegisterUserProfile"));
+const Info = lazy(() => import("./pages/Info"));
+const Error = lazy(() => import("./pages/Error"));
+const LoginResetPassword = lazy(() => import("./pages/LoginResetPassword"));
+const LoginVerifyEmail = lazy(() => import("./pages/LoginVerifyEmail"));
+const Terms = lazy(() => import("./pages/Terms"));
+const LoginOtp = lazy(() => import("./pages/LoginOtp"));
+const LoginPassword = lazy(() => import("./pages/LoginPassword"));
+const LoginUsername = lazy(() => import("./pages/LoginUsername"));
+const WebauthnAuthenticate = lazy(() => import("./pages/WebauthnAuthenticate"));
+const LoginUpdatePassword = lazy(() => import("./pages/LoginUpdatePassword"));
+const LoginUpdateProfile = lazy(() => import("./pages/LoginUpdateProfile"));
+const LoginIdpLinkConfirm = lazy(() => import("./pages/LoginIdpLinkConfirm"));
+const LoginPageExpired = lazy(() => import("./pages/LoginPageExpired"));
+const LoginIdpLinkEmail = lazy(() => import("./pages/LoginIdpLinkEmail"));
+const LoginConfigTotp = lazy(() => import("./pages/LoginConfigTotp"));
+const LogoutConfirm = lazy(() => import("./pages/LogoutConfirm"));
+const UpdateUserProfile = lazy(() => import("./pages/UpdateUserProfile"));
+const IdpReviewUserProfile = lazy(() => import("./pages/IdpReviewUserProfile"));
 
-export type KcAppProps = KcProps & {
-    kcContext: KcContextBase;
-    i18n?: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template: (props: TemplateProps) => JSX.Element | null;
-};
-
-const KcApp = memo((props_: KcAppProps) => {
+export default function KcApp(props_: SetOptional<PageProps<KcContextBase, I18nBase>, "Template">) {
     const { kcContext, i18n: userProvidedI18n, Template = DefaultTemplate, ...kcProps } = props_;
 
     const i18n = (function useClosure() {
@@ -104,6 +97,4 @@ const KcApp = memo((props_: KcAppProps) => {
             })()}
         </Suspense>
     );
-});
-
-export default KcApp;
+}

src/lib/KcProps.ts

@@ -1,5 +1,8 @@
-import { allPropertiesValuesToUndefined } from "../tools/allPropertiesValuesToUndefined";
+import { allPropertiesValuesToUndefined } from "./tools/allPropertiesValuesToUndefined";
 import { assert } from "tsafe/assert";
+import type { KcContextBase } from "./getKcContext";
+import type { ReactNode } from "react";
+import { I18nBase } from "./i18n";
 
 /** Class names can be provided as an array or separated by whitespace */
 export type KcPropsGeneric<CssClasses extends string> = {
@@ -205,6 +208,29 @@ export const defaultKcProps = {
     "kcFormOptionsWrapperClass": []
 } as const;
 
+export type TemplateProps<KcContext extends KcContextBase.Common, I18n extends I18nBase> = {
+    kcContext: KcContext;
+    i18n: I18n;
+    doFetchDefaultThemeResources: boolean;
+} & {
+    displayInfo?: boolean;
+    displayMessage?: boolean;
+    displayRequiredFields?: boolean;
+    displayWide?: boolean;
+    showAnotherWayIfPresent?: boolean;
+    headerNode: ReactNode;
+    showUsernameNode?: ReactNode;
+    formNode: ReactNode;
+    infoNode?: ReactNode;
+} & KcTemplateProps;
+
+export type PageProps<KcContext, I18n extends I18nBase> = {
+    kcContext: KcContext;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template: (props: TemplateProps<any, any>) => JSX.Element | null;
+} & KcProps;
+
 assert<typeof defaultKcProps extends KcProps ? true : false>();
 
 /** Tu use if you don't want any default */

src/lib/Template.tsx

@@ -1,32 +1,13 @@
-import React, { useReducer, useEffect, memo } from "react";
-import type { ReactNode } from "react";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { assert } from "../tools/assert";
-import { useCallbackFactory } from "powerhooks/useCallbackFactory";
-import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../../bin/tools/pathJoin";
-import { useConstCallback } from "powerhooks/useConstCallback";
-import type { KcTemplateProps } from "./KcProps";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React, { useReducer, useEffect } from "react";
+import { assert } from "./tools/assert";
+import { headInsert } from "./tools/headInsert";
+import { pathJoin } from "../bin/tools/pathJoin";
+import { clsx } from "./tools/clsx";
+import type { TemplateProps } from "./KcProps";
+import type { KcContextBase } from "./getKcContext/KcContextBase";
+import type { I18nBase } from "./i18n";
 
-export type TemplateProps = {
-    displayInfo?: boolean;
-    displayMessage?: boolean;
-    displayRequiredFields?: boolean;
-    displayWide?: boolean;
-    showAnotherWayIfPresent?: boolean;
-    headerNode: ReactNode;
-    showUsernameNode?: ReactNode;
-    formNode: ReactNode;
-    infoNode?: ReactNode;
-    /** If you write your own page you probably want
-     * to avoid pulling the default theme assets.
-     */
-    doFetchDefaultThemeResources: boolean;
-} & { kcContext: KcContextBase; i18n: I18n } & KcTemplateProps;
-
-const Template = memo((props: TemplateProps) => {
+export default function Template(props: TemplateProps<KcContextBase.Common, I18nBase>) {
     const {
         displayInfo = false,
         displayMessage = true,
@@ -39,102 +20,53 @@ const Template = memo((props: TemplateProps) => {
         infoNode = null,
         kcContext,
         i18n,
-        doFetchDefaultThemeResources
+        doFetchDefaultThemeResources,
+        stylesCommon,
+        styles,
+        scripts,
+        kcHtmlClass
     } = props;
 
-    const { cx } = useCssAndCx();
-
     const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
-    const onChangeLanguageClickFactory = useCallbackFactory(([kcLanguageTag]: [string]) => changeLocale(kcLanguageTag));
-
-    const onTryAnotherWayClick = useConstCallback(() => (document.forms["kc-select-try-another-way-form" as never].submit(), false));
-
     const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
 
-    const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false);
+    const { isReady } = usePrepareTemplate({
+        doFetchDefaultThemeResources,
+        stylesCommon,
+        styles,
+        scripts,
+        url,
+        kcHtmlClass
+    });
 
-    useEffect(() => {
-        if (!doFetchDefaultThemeResources) {
-            setExtraCssLoaded();
-            return;
-        }
-
-        let isUnmounted = false;
-        const cleanups: (() => void)[] = [];
-
-        const toArr = (x: string | readonly string[] | undefined) => (typeof x === "string" ? x.split(" ") : x ?? []);
-
-        Promise.all(
-            [
-                ...toArr(props.stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
-                ...toArr(props.styles).map(relativePath => pathJoin(url.resourcesPath, relativePath))
-            ]
-                .reverse()
-                .map(href =>
-                    headInsert({
-                        "type": "css",
-                        href,
-                        "position": "prepend"
-                    })
-                )
-        ).then(() => {
-            if (isUnmounted) {
-                return;
-            }
-
-            setExtraCssLoaded();
-        });
-
-        toArr(props.scripts).forEach(relativePath =>
-            headInsert({
-                "type": "javascript",
-                "src": pathJoin(url.resourcesPath, relativePath)
-            })
-        );
-
-        if (props.kcHtmlClass !== undefined) {
-            const htmlClassList = document.getElementsByTagName("html")[0].classList;
-
-            const tokens = cx(props.kcHtmlClass).split(" ");
-
-            htmlClassList.add(...tokens);
-
-            cleanups.push(() => htmlClassList.remove(...tokens));
-        }
-
-        return () => {
-            isUnmounted = true;
-
-            cleanups.forEach(f => f());
-        };
-    }, [props.kcHtmlClass]);
-
-    if (!isExtraCssLoaded) {
+    if (!isReady) {
         return null;
     }
 
     return (
-        <div className={cx(props.kcLoginClass)}>
-            <div id="kc-header" className={cx(props.kcHeaderClass)}>
-                <div id="kc-header-wrapper" className={cx(props.kcHeaderWrapperClass)}>
+        <div className={clsx(props.kcLoginClass)}>
+            <div id="kc-header" className={clsx(props.kcHeaderClass)}>
+                <div id="kc-header-wrapper" className={clsx(props.kcHeaderWrapperClass)}>
                     {msg("loginTitleHtml", realm.displayNameHtml)}
                 </div>
             </div>
 
-            <div className={cx(props.kcFormCardClass, displayWide && props.kcFormCardAccountClass)}>
-                <header className={cx(props.kcFormHeaderClass)}>
+            <div className={clsx(props.kcFormCardClass, displayWide && props.kcFormCardAccountClass)}>
+                <header className={clsx(props.kcFormHeaderClass)}>
                     {realm.internationalizationEnabled && (assert(locale !== undefined), true) && locale.supported.length > 1 && (
                         <div id="kc-locale">
-                            <div id="kc-locale-wrapper" className={cx(props.kcLocaleWrapperClass)}>
+                            <div id="kc-locale-wrapper" className={clsx(props.kcLocaleWrapperClass)}>
                                 <div className="kc-dropdown" id="kc-locale-dropdown">
+                                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                                     <a href="#" id="kc-current-locale-link">
                                         {labelBySupportedLanguageTag[currentLanguageTag]}
                                     </a>
                                     <ul>
                                         {locale.supported.map(({ languageTag }) => (
                                             <li key={languageTag} className="kc-dropdown-item">
-                                                <a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
+                                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                                <a href="#" onClick={() => changeLocale(languageTag)}>
                                                     {labelBySupportedLanguageTag[languageTag]}
                                                 </a>
                                             </li>
@@ -146,8 +78,8 @@ const Template = memo((props: TemplateProps) => {
                     )}
                     {!(auth !== undefined && auth.showUsername && !auth.showResetCredentials) ? (
                         displayRequiredFields ? (
-                            <div className={cx(props.kcContentWrapperClass)}>
-                                <div className={cx(props.kcLabelWrapperClass, "subtitle")}>
+                            <div className={clsx(props.kcContentWrapperClass)}>
+                                <div className={clsx(props.kcLabelWrapperClass, "subtitle")}>
                                     <span className="subtitle">
                                         <span className="required">*</span>
                                         {msg("requiredFields")}
@@ -161,20 +93,20 @@ const Template = memo((props: TemplateProps) => {
                             <h1 id="kc-page-title">{headerNode}</h1>
                         )
                     ) : displayRequiredFields ? (
-                        <div className={cx(props.kcContentWrapperClass)}>
-                            <div className={cx(props.kcLabelWrapperClass, "subtitle")}>
+                        <div className={clsx(props.kcContentWrapperClass)}>
+                            <div className={clsx(props.kcLabelWrapperClass, "subtitle")}>
                                 <span className="subtitle">
                                     <span className="required">*</span> {msg("requiredFields")}
                                 </span>
                             </div>
                             <div className="col-md-10">
                                 {showUsernameNode}
-                                <div className={cx(props.kcFormGroupClass)}>
+                                <div className={clsx(props.kcFormGroupClass)}>
                                     <div id="kc-username">
                                         <label id="kc-attempted-username">{auth?.attemptedUsername}</label>
                                         <a id="reset-login" href={url.loginRestartFlowUrl}>
                                             <div className="kc-login-tooltip">
-                                                <i className={cx(props.kcResetFlowIcon)}></i>
+                                                <i className={clsx(props.kcResetFlowIcon)}></i>
                                                 <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
                                             </div>
                                         </a>
@@ -185,12 +117,12 @@ const Template = memo((props: TemplateProps) => {
                     ) : (
                         <>
                             {showUsernameNode}
-                            <div className={cx(props.kcFormGroupClass)}>
+                            <div className={clsx(props.kcFormGroupClass)}>
                                 <div id="kc-username">
                                     <label id="kc-attempted-username">{auth?.attemptedUsername}</label>
                                     <a id="reset-login" href={url.loginRestartFlowUrl}>
                                         <div className="kc-login-tooltip">
-                                            <i className={cx(props.kcResetFlowIcon)}></i>
+                                            <i className={clsx(props.kcResetFlowIcon)}></i>
                                             <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
                                         </div>
                                     </a>
@@ -203,11 +135,11 @@ const Template = memo((props: TemplateProps) => {
                     <div id="kc-content-wrapper">
                         {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
                         {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
-                            <div className={cx("alert", `alert-${message.type}`)}>
-                                {message.type === "success" && <span className={cx(props.kcFeedbackSuccessIcon)}></span>}
-                                {message.type === "warning" && <span className={cx(props.kcFeedbackWarningIcon)}></span>}
-                                {message.type === "error" && <span className={cx(props.kcFeedbackErrorIcon)}></span>}
-                                {message.type === "info" && <span className={cx(props.kcFeedbackInfoIcon)}></span>}
+                            <div className={clsx("alert", `alert-${message.type}`)}>
+                                {message.type === "success" && <span className={clsx(props.kcFeedbackSuccessIcon)}></span>}
+                                {message.type === "warning" && <span className={clsx(props.kcFeedbackWarningIcon)}></span>}
+                                {message.type === "error" && <span className={clsx(props.kcFeedbackErrorIcon)}></span>}
+                                {message.type === "info" && <span className={clsx(props.kcFeedbackInfoIcon)}></span>}
                                 <span
                                     className="kc-feedback-text"
                                     dangerouslySetInnerHTML={{
@@ -222,12 +154,20 @@ const Template = memo((props: TemplateProps) => {
                                 id="kc-select-try-another-way-form"
                                 action={url.loginAction}
                                 method="post"
-                                className={cx(displayWide && props.kcContentWrapperClass)}
+                                className={clsx(displayWide && props.kcContentWrapperClass)}
                             >
-                                <div className={cx(displayWide && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass])}>
-                                    <div className={cx(props.kcFormGroupClass)}>
+                                <div className={clsx(displayWide && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass])}>
+                                    <div className={clsx(props.kcFormGroupClass)}>
                                         <input type="hidden" name="tryAnotherWay" value="on" />
-                                        <a href="#" id="try-another-way" onClick={onTryAnotherWayClick}>
+                                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                                        <a
+                                            href="#"
+                                            id="try-another-way"
+                                            onClick={() => {
+                                                document.forms["kc-select-try-another-way-form" as never].submit();
+                                                return false;
+                                            }}
+                                        >
                                             {msg("doTryAnotherWay")}
                                         </a>
                                     </div>
@@ -235,8 +175,8 @@ const Template = memo((props: TemplateProps) => {
                             </form>
                         )}
                         {displayInfo && (
-                            <div id="kc-info" className={cx(props.kcSignUpClass)}>
-                                <div id="kc-info-wrapper" className={cx(props.kcInfoAreaWrapperClass)}>
+                            <div id="kc-info" className={clsx(props.kcSignUpClass)}>
+                                <div id="kc-info-wrapper" className={clsx(props.kcInfoAreaWrapperClass)}>
                                     {infoNode}
                                 </div>
                             </div>
@@ -246,6 +186,80 @@ const Template = memo((props: TemplateProps) => {
             </div>
         </div>
     );
-});
+}
 
-export default Template;
+export function usePrepareTemplate(params: {
+    doFetchDefaultThemeResources: boolean;
+    stylesCommon: string | readonly string[] | undefined;
+    styles: string | readonly string[] | undefined;
+    scripts: string | readonly string[] | undefined;
+    url: {
+        resourcesCommonPath: string;
+        resourcesPath: string;
+    };
+    kcHtmlClass: string | readonly string[] | undefined;
+}) {
+    const { doFetchDefaultThemeResources, stylesCommon, styles, url, scripts, kcHtmlClass } = params;
+
+    const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
+
+    useEffect(() => {
+        if (!doFetchDefaultThemeResources) {
+            return;
+        }
+
+        let isUnmounted = false;
+
+        const toArr = (x: string | readonly string[] | undefined) => (typeof x === "string" ? x.split(" ") : x ?? []);
+
+        Promise.all(
+            [
+                ...toArr(stylesCommon).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
+                ...toArr(styles).map(relativePath => pathJoin(url.resourcesPath, relativePath))
+            ]
+                .reverse()
+                .map(href =>
+                    headInsert({
+                        "type": "css",
+                        href,
+                        "position": "prepend"
+                    })
+                )
+        ).then(() => {
+            if (isUnmounted) {
+                return;
+            }
+
+            setReady();
+        });
+
+        toArr(scripts).forEach(relativePath =>
+            headInsert({
+                "type": "javascript",
+                "src": pathJoin(url.resourcesPath, relativePath)
+            })
+        );
+
+        return () => {
+            isUnmounted = true;
+        };
+    }, [kcHtmlClass]);
+
+    useEffect(() => {
+        if (kcHtmlClass === undefined) {
+            return;
+        }
+
+        const htmlClassList = document.getElementsByTagName("html")[0].classList;
+
+        const tokens = clsx(kcHtmlClass).split(" ");
+
+        htmlClassList.add(...tokens);
+
+        return () => {
+            htmlClassList.remove(...tokens);
+        };
+    }, [kcHtmlClass]);
+
+    return { isReady };
+}

src/lib/components/shared/UserProfileCommons.tsx

@@ -1,170 +0,0 @@
-import React, { memo, useEffect, Fragment } from "react";
-import type { KcProps } from "../KcProps";
-import type { Attribute } from "../../getKcContext/KcContextBase";
-import { useCssAndCx } from "../../tools/useCssAndCx";
-import type { ReactComponent } from "../../tools/ReactComponent";
-import { useCallbackFactory } from "powerhooks/useCallbackFactory";
-import { useFormValidationSlice } from "../../useFormValidationSlice";
-import type { I18n } from "../../i18n";
-import type { Param0 } from "tsafe/Param0";
-
-export type UserProfileFormFieldsProps = {
-    kcContext: Param0<typeof useFormValidationSlice>["kcContext"];
-    i18n: I18n;
-} & KcProps &
-    Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
-        onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
-    };
-
-export const UserProfileFormFields = memo(
-    ({ kcContext, onIsFormSubmittableValueChange, i18n, BeforeField, AfterField, ...props }: UserProfileFormFieldsProps) => {
-        const { cx, css } = useCssAndCx();
-
-        const { advancedMsg } = i18n;
-
-        const {
-            formValidationState: { fieldStateByAttributeName, isFormSubmittable },
-            formValidationReducer,
-            attributesWithPassword
-        } = useFormValidationSlice({
-            kcContext,
-            i18n
-        });
-
-        useEffect(() => {
-            onIsFormSubmittableValueChange(isFormSubmittable);
-        }, [isFormSubmittable]);
-
-        const onChangeFactory = useCallbackFactory(
-            (
-                [name]: [string],
-                [
-                    {
-                        target: { value }
-                    }
-                ]: [React.ChangeEvent<HTMLInputElement | HTMLSelectElement>]
-            ) =>
-                formValidationReducer({
-                    "action": "update value",
-                    name,
-                    "newValue": value
-                })
-        );
-
-        const onBlurFactory = useCallbackFactory(([name]: [string]) =>
-            formValidationReducer({
-                "action": "focus lost",
-                name
-            })
-        );
-
-        let currentGroup = "";
-
-        return (
-            <>
-                {attributesWithPassword.map((attribute, i) => {
-                    const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
-
-                    const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
-
-                    const formGroupClassName = cx(props.kcFormGroupClass, displayableErrors.length !== 0 && props.kcFormGroupErrorClass);
-
-                    return (
-                        <Fragment key={i}>
-                            {group !== currentGroup && (currentGroup = group) !== "" && (
-                                <div className={formGroupClassName}>
-                                    <div className={cx(props.kcContentWrapperClass)}>
-                                        <label id={`header-${group}`} className={cx(props.kcFormGroupHeader)}>
-                                            {advancedMsg(groupDisplayHeader) || currentGroup}
-                                        </label>
-                                    </div>
-                                    {groupDisplayDescription !== "" && (
-                                        <div className={cx(props.kcLabelWrapperClass)}>
-                                            <label id={`description-${group}`} className={`${cx(props.kcLabelClass)}`}>
-                                                {advancedMsg(groupDisplayDescription)}
-                                            </label>
-                                        </div>
-                                    )}
-                                </div>
-                            )}
-
-                            {BeforeField && <BeforeField attribute={attribute} />}
-
-                            <div className={formGroupClassName}>
-                                <div className={cx(props.kcLabelWrapperClass)}>
-                                    <label htmlFor={attribute.name} className={cx(props.kcLabelClass)}>
-                                        {advancedMsg(attribute.displayName ?? "")}
-                                    </label>
-                                    {attribute.required && <>*</>}
-                                </div>
-                                <div className={cx(props.kcInputWrapperClass)}>
-                                    {(() => {
-                                        const { options } = attribute.validators;
-
-                                        if (options !== undefined) {
-                                            return (
-                                                <select
-                                                    id={attribute.name}
-                                                    name={attribute.name}
-                                                    onChange={onChangeFactory(attribute.name)}
-                                                    onBlur={onBlurFactory(attribute.name)}
-                                                    value={value}
-                                                >
-                                                    {options.options.map(option => (
-                                                        <option key={option} value={option}>
-                                                            {option}
-                                                        </option>
-                                                    ))}
-                                                </select>
-                                            );
-                                        }
-
-                                        return (
-                                            <input
-                                                type={(() => {
-                                                    switch (attribute.name) {
-                                                        case "password-confirm":
-                                                        case "password":
-                                                            return "password";
-                                                        default:
-                                                            return "text";
-                                                    }
-                                                })()}
-                                                id={attribute.name}
-                                                name={attribute.name}
-                                                value={value}
-                                                onChange={onChangeFactory(attribute.name)}
-                                                className={cx(props.kcInputClass)}
-                                                aria-invalid={displayableErrors.length !== 0}
-                                                disabled={attribute.readOnly}
-                                                autoComplete={attribute.autocomplete}
-                                                onBlur={onBlurFactory(attribute.name)}
-                                            />
-                                        );
-                                    })()}
-                                    {displayableErrors.length !== 0 && (
-                                        <span
-                                            id={`input-error-${attribute.name}`}
-                                            className={cx(
-                                                props.kcInputErrorMessageClass,
-                                                css({
-                                                    "position": displayableErrors.length === 1 ? "absolute" : undefined,
-                                                    "& > span": { "display": "block" }
-                                                })
-                                            )}
-                                            aria-live="polite"
-                                        >
-                                            {displayableErrors.map(({ errorMessage }) => errorMessage)}
-                                        </span>
-                                    )}
-                                </div>
-                            </div>
-
-                            {AfterField && <AfterField attribute={attribute} />}
-                        </Fragment>
-                    );
-                })}
-            </>
-        );
-    }
-);

src/lib/getKcContext/KcContextBase.ts

@@ -2,7 +2,7 @@ import type { PageId } from "../../bin/keycloakify/generateFtl";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
 import type { MessageKeyBase } from "../i18n";
-import type { KcTemplateClassKey } from "../components/KcProps";
+import type { KcTemplateClassKey } from "../KcProps";
 
 type ExtractAfterStartingWith<Prefix extends string, StrEnum> = StrEnum extends `${Prefix}${infer U}` ? U : never;
 

src/lib/getKcContext/kcContextMocks.ts

@@ -1,9 +1,9 @@
 import "minimal-polyfills/Object.fromEntries";
-import type { KcContextBase, Attribute } from "../KcContextBase";
+import type { KcContextBase, Attribute } from "./KcContextBase";
 //NOTE: Aside because we want to be able to import them from node
-import { mockTestingResourcesCommonPath, mockTestingResourcesPath } from "../../../bin/mockTestingResourcesPath";
+import { mockTestingResourcesCommonPath, mockTestingResourcesPath } from "../../bin/mockTestingResourcesPath";
 import { id } from "tsafe/id";
-import { pathJoin } from "../../../bin/tools/pathJoin";
+import { pathJoin } from "../../bin/tools/pathJoin";
 
 const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
 
@@ -117,10 +117,13 @@ export const kcContextCommonMock: KcContextBase.Common = {
         "registrationEmailAsUsername": false
     },
     "messagesPerField": {
-        "printIfExists": (...[, x]) => x,
-        "existsError": () => true,
+        "printIfExists": () => {
+            console.log("coucou");
+            return undefined;
+        },
+        "existsError": () => false,
         "get": key => `Fake error for ${key}`,
-        "exists": () => true
+        "exists": () => false
     },
     "locale": {
         "supported": [

src/lib/getKcContext/kcContextMocks/index.ts

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

src/lib/i18n/i18n.tsx

@@ -0,0 +1,292 @@
+import "minimal-polyfills/Object.fromEntries";
+//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
+import React, { useEffect, useState, useRef } from "react";
+import type baseMessages from "./generated_messages/18.0.1/login/en";
+import { assert } from "tsafe/assert";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { Markdown } from "../tools/Markdown";
+
+export const fallbackLanguageTag = "en";
+
+export type KcContextLike = {
+    locale?: {
+        currentLanguageTag: string;
+        supported: { languageTag: string; url: string; label: string }[];
+    };
+};
+
+assert<KcContextBase extends KcContextLike ? true : false>();
+
+export type MessageKeyBase = keyof typeof baseMessages | keyof (typeof keycloakifyExtraMessages)[typeof fallbackLanguageTag];
+
+export type I18n<MessageKey extends string> = {
+    /**
+     * e.g: "en", "fr", "zh-CN"
+     *
+     * The current language
+     */
+    currentLanguageTag: string;
+    /**
+     * To call when the user switch language.
+     * This will cause the page to be reloaded,
+     * on next load currentLanguageTag === newLanguageTag
+     */
+    changeLocale: (newLanguageTag: string) => never;
+    /**
+     * e.g. "en" => "English", "fr" => "Français", ...
+     *
+     * Used to render a select that enable user to switch language.
+     * ex: https://user-images.githubusercontent.com/6702424/186044799-38801eec-4e89-483b-81dd-8e9233e8c0eb.png
+     * */
+    labelBySupportedLanguageTag: Record<string, string>;
+    /**
+     * Examples assuming currentLanguageTag === "en"
+     *
+     * msg("access-denied") === <span>Access denied</span>
+     * msg("impersonateTitleHtml", "Foo") === <span><strong>Foo</strong> Impersonate User</span>
+     */
+    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
+    /**
+     * It's the same thing as msg() but instead of returning a JSX.Element it returns a string.
+     * It can be more convenient to manipulate strings but if there are HTML tags it wont render.
+     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
+     */
+    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
+    /**
+     * Examples assuming currentLanguageTag === "en"
+     * advancedMsg("${access-denied} foo bar") === <span>${msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
+     * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
+     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
+     */
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
+    /**
+     * Examples assuming currentLanguageTag === "en"
+     * advancedMsg("${access-denied} foo bar") === msg("access-denied") + " foo bar" === "Access denied foo bar"
+     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
+     */
+    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
+};
+
+export type I18nBase = I18n<MessageKeyBase>;
+
+export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params: {
+    kcContext: KcContextLike;
+    extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
+    doSkip: boolean;
+}): I18n<MessageKeyBase | ExtraMessageKey> | null {
+    const { kcContext, extraMessages, doSkip } = params;
+
+    const [i18n, setI18n] = useState<I18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
+
+    const refHasStartedFetching = useRef(false);
+
+    useEffect(() => {
+        if (doSkip || refHasStartedFetching.current) {
+            return;
+        }
+
+        refHasStartedFetching.current = true;
+
+        (async () => {
+            const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
+
+            const [fallbackMessages, messages] = await Promise.all([
+                import("./generated_messages/18.0.1/login/en"),
+                (() => {
+                    switch (currentLanguageTag) {
+                        case "ca":
+                            return import("./generated_messages/18.0.1/login/ca");
+                        case "cs":
+                            return import("./generated_messages/18.0.1/login/cs");
+                        case "da":
+                            return import("./generated_messages/18.0.1/login/da");
+                        case "de":
+                            return import("./generated_messages/18.0.1/login/de");
+                        case "en":
+                            return import("./generated_messages/18.0.1/login/en");
+                        case "es":
+                            return import("./generated_messages/18.0.1/login/es");
+                        case "fi":
+                            return import("./generated_messages/18.0.1/login/fi");
+                        case "fr":
+                            return import("./generated_messages/18.0.1/login/fr");
+                        case "hu":
+                            return import("./generated_messages/18.0.1/login/hu");
+                        case "it":
+                            return import("./generated_messages/18.0.1/login/it");
+                        case "ja":
+                            return import("./generated_messages/18.0.1/login/ja");
+                        case "lt":
+                            return import("./generated_messages/18.0.1/login/lt");
+                        case "lv":
+                            return import("./generated_messages/18.0.1/login/lv");
+                        case "nl":
+                            return import("./generated_messages/18.0.1/login/nl");
+                        case "no":
+                            return import("./generated_messages/18.0.1/login/no");
+                        case "pl":
+                            return import("./generated_messages/18.0.1/login/pl");
+                        case "pt-BR":
+                            return import("./generated_messages/18.0.1/login/pt-BR");
+                        case "ru":
+                            return import("./generated_messages/18.0.1/login/ru");
+                        case "sk":
+                            return import("./generated_messages/18.0.1/login/sk");
+                        case "sv":
+                            return import("./generated_messages/18.0.1/login/sv");
+                        case "tr":
+                            return import("./generated_messages/18.0.1/login/tr");
+                        case "zh-CN":
+                            return import("./generated_messages/18.0.1/login/zh-CN");
+                        default:
+                            return { "default": {} };
+                    }
+                })()
+            ]).then(modules => modules.map(module => module.default));
+
+            setI18n({
+                ...createI18nTranslationFunctions({
+                    "fallbackMessages": {
+                        ...fallbackMessages,
+                        ...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
+                        ...(extraMessages[fallbackLanguageTag] ?? {})
+                    } as any,
+                    "messages": {
+                        ...messages,
+                        ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
+                        ...(extraMessages[currentLanguageTag] ?? {})
+                    } as any
+                }),
+                currentLanguageTag,
+                "changeLocale": newLanguageTag => {
+                    const { locale } = kcContext;
+
+                    assert(locale !== undefined, "Internationalization not enabled");
+
+                    const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
+
+                    assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
+
+                    window.location.href = targetSupportedLocale.url;
+
+                    assert(false, "never");
+                },
+                "labelBySupportedLanguageTag": Object.fromEntries(
+                    (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
+                )
+            });
+        })();
+    }, []);
+
+    return i18n ?? null;
+}
+
+const useI18n_private = __unsafe_useI18n;
+
+export function useI18n<ExtraMessageKey extends string = never>(params: {
+    kcContext: KcContextLike;
+    extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
+}): I18n<MessageKeyBase | ExtraMessageKey> | null {
+    return useI18n_private({
+        ...params,
+        "doSkip": false
+    });
+}
+
+function createI18nTranslationFunctions<MessageKey extends string>(params: {
+    fallbackMessages: Record<MessageKey, string>;
+    messages: Record<MessageKey, string>;
+}): Pick<I18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
+    const { fallbackMessages, messages } = params;
+
+    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {
+        const { key, args, doRenderMarkdown } = props;
+
+        const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
+
+        if (messageOrUndefined === undefined) {
+            return undefined;
+        }
+
+        const message = messageOrUndefined;
+
+        const messageWithArgsInjectedIfAny = (() => {
+            const startIndex = message
+                .match(/{[0-9]+}/g)
+                ?.map(g => g.match(/{([0-9]+)}/)![1])
+                .map(indexStr => parseInt(indexStr))
+                .sort((a, b) => a - b)[0];
+
+            if (startIndex === undefined) {
+                // No {0} in message (no arguments expected)
+                return message;
+            }
+
+            let messageWithArgsInjected = message;
+
+            args.forEach((arg, i) => {
+                if (arg === undefined) {
+                    return;
+                }
+
+                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
+            });
+
+            return messageWithArgsInjected;
+        })();
+
+        return doRenderMarkdown ? (
+            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
+                {messageWithArgsInjectedIfAny}
+            </Markdown>
+        ) : (
+            messageWithArgsInjectedIfAny
+        );
+    }
+
+    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
+        const { key, args, doRenderMarkdown } = props;
+
+        const match = key.match(/^\$\{([^{]+)\}$/);
+
+        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
+
+        const out = resolveMsg({
+            "key": keyUnwrappedFromCurlyBraces,
+            args,
+            doRenderMarkdown
+        });
+
+        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
+    }
+
+    return {
+        "msgStr": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": false }) as string,
+        "msg": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": true }) as JSX.Element,
+        "advancedMsg": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": true }) as JSX.Element,
+        "advancedMsgStr": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": false }) as string
+    };
+}
+
+const keycloakifyExtraMessages = {
+    "en": {
+        "shouldBeEqual": "{0} should be equal to {1}",
+        "shouldBeDifferent": "{0} should be different to {1}",
+        "shouldMatchPattern": "Pattern should match: `/{0}/`",
+        "mustBeAnInteger": "Must be an integer",
+        "notAValidOption": "Not a valid option"
+    },
+    "fr": {
+        /* spell-checker: disable */
+        "shouldBeEqual": "{0} doit être égal à {1}",
+        "shouldBeDifferent": "{0} doit être différent de {1}",
+        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
+        "mustBeAnInteger": "Doit être un nombre entier",
+        "notAValidOption": "N'est pas une option valide",
+
+        "logoutConfirmTitle": "Déconnexion",
+        "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
+        "doLogout": "Se déconnecter"
+        /* spell-checker: enable */
+    }
+};

src/lib/i18n/index.tsx

@@ -1,290 +1 @@
-import "minimal-polyfills/Object.fromEntries";
-//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
-import React, { useEffect, useState, useRef } from "react";
-import type baseMessages from "./generated_messages/18.0.1/login/en";
-import { assert } from "tsafe/assert";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { Markdown } from "../tools/Markdown";
-
-export const fallbackLanguageTag = "en";
-
-export type KcContextLike = {
-    locale?: {
-        currentLanguageTag: string;
-        supported: { languageTag: string; url: string; label: string }[];
-    };
-};
-
-assert<KcContextBase extends KcContextLike ? true : false>();
-
-export type MessageKeyBase = keyof typeof baseMessages | keyof typeof keycloakifyExtraMessages[typeof fallbackLanguageTag];
-
-export type I18n<MessageKey extends string = MessageKeyBase> = {
-    /**
-     * e.g: "en", "fr", "zh-CN"
-     *
-     * The current language
-     */
-    currentLanguageTag: string;
-    /**
-     * To call when the user switch language.
-     * This will cause the page to be reloaded,
-     * on next load currentLanguageTag === newLanguageTag
-     */
-    changeLocale: (newLanguageTag: string) => never;
-    /**
-     * e.g. "en" => "English", "fr" => "Français", ...
-     *
-     * Used to render a select that enable user to switch language.
-     * ex: https://user-images.githubusercontent.com/6702424/186044799-38801eec-4e89-483b-81dd-8e9233e8c0eb.png
-     * */
-    labelBySupportedLanguageTag: Record<string, string>;
-    /**
-     * Examples assuming currentLanguageTag === "en"
-     *
-     * msg("access-denied") === <span>Access denied</span>
-     * msg("impersonateTitleHtml", "Foo") === <span><strong>Foo</strong> Impersonate User</span>
-     */
-    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
-    /**
-     * It's the same thing as msg() but instead of returning a JSX.Element it returns a string.
-     * It can be more convenient to manipulate strings but if there are HTML tags it wont render.
-     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
-     */
-    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
-    /**
-     * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === <span>${msgStr("access-denied")} foo bar<span> === <span>Access denied foo bar</span>
-     * advancedMsg("${access-denied}") === advancedMsg("access-denied") === msg("access-denied") === <span>Access denied</span>
-     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === <span>not-a-message-key</span>
-     */
-    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
-    /**
-     * Examples assuming currentLanguageTag === "en"
-     * advancedMsg("${access-denied} foo bar") === msg("access-denied") + " foo bar" === "Access denied foo bar"
-     * advancedMsg("${not-a-message-key}") === advancedMsg(not-a-message-key") === "not-a-message-key"
-     */
-    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
-};
-
-export function __unsafe_useI18n<ExtraMessageKey extends string = never>(params: {
-    kcContext: KcContextLike;
-    extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
-    doSkip: boolean;
-}): I18n<MessageKeyBase | ExtraMessageKey> | null {
-    const { kcContext, extraMessages, doSkip } = params;
-
-    const [i18n, setI18n] = useState<I18n<ExtraMessageKey | MessageKeyBase> | undefined>(undefined);
-
-    const refHasStartedFetching = useRef(false);
-
-    useEffect(() => {
-        if (doSkip || refHasStartedFetching.current) {
-            return;
-        }
-
-        refHasStartedFetching.current = true;
-
-        (async () => {
-            const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
-
-            const [fallbackMessages, messages] = await Promise.all([
-                import("./generated_messages/18.0.1/login/en"),
-                (() => {
-                    switch (currentLanguageTag) {
-                        case "ca":
-                            return import("./generated_messages/18.0.1/login/ca");
-                        case "cs":
-                            return import("./generated_messages/18.0.1/login/cs");
-                        case "da":
-                            return import("./generated_messages/18.0.1/login/da");
-                        case "de":
-                            return import("./generated_messages/18.0.1/login/de");
-                        case "en":
-                            return import("./generated_messages/18.0.1/login/en");
-                        case "es":
-                            return import("./generated_messages/18.0.1/login/es");
-                        case "fi":
-                            return import("./generated_messages/18.0.1/login/fi");
-                        case "fr":
-                            return import("./generated_messages/18.0.1/login/fr");
-                        case "hu":
-                            return import("./generated_messages/18.0.1/login/hu");
-                        case "it":
-                            return import("./generated_messages/18.0.1/login/it");
-                        case "ja":
-                            return import("./generated_messages/18.0.1/login/ja");
-                        case "lt":
-                            return import("./generated_messages/18.0.1/login/lt");
-                        case "lv":
-                            return import("./generated_messages/18.0.1/login/lv");
-                        case "nl":
-                            return import("./generated_messages/18.0.1/login/nl");
-                        case "no":
-                            return import("./generated_messages/18.0.1/login/no");
-                        case "pl":
-                            return import("./generated_messages/18.0.1/login/pl");
-                        case "pt-BR":
-                            return import("./generated_messages/18.0.1/login/pt-BR");
-                        case "ru":
-                            return import("./generated_messages/18.0.1/login/ru");
-                        case "sk":
-                            return import("./generated_messages/18.0.1/login/sk");
-                        case "sv":
-                            return import("./generated_messages/18.0.1/login/sv");
-                        case "tr":
-                            return import("./generated_messages/18.0.1/login/tr");
-                        case "zh-CN":
-                            return import("./generated_messages/18.0.1/login/zh-CN");
-                        default:
-                            return { "default": {} };
-                    }
-                })()
-            ]).then(modules => modules.map(module => module.default));
-
-            setI18n({
-                ...createI18nTranslationFunctions({
-                    "fallbackMessages": {
-                        ...fallbackMessages,
-                        ...(keycloakifyExtraMessages[fallbackLanguageTag] ?? {}),
-                        ...(extraMessages[fallbackLanguageTag] ?? {})
-                    } as any,
-                    "messages": {
-                        ...messages,
-                        ...((keycloakifyExtraMessages as any)[currentLanguageTag] ?? {}),
-                        ...(extraMessages[currentLanguageTag] ?? {})
-                    } as any
-                }),
-                currentLanguageTag,
-                "changeLocale": newLanguageTag => {
-                    const { locale } = kcContext;
-
-                    assert(locale !== undefined, "Internationalization not enabled");
-
-                    const targetSupportedLocale = locale.supported.find(({ languageTag }) => languageTag === newLanguageTag);
-
-                    assert(targetSupportedLocale !== undefined, `${newLanguageTag} need to be enabled in Keycloak admin`);
-
-                    window.location.href = targetSupportedLocale.url;
-
-                    assert(false, "never");
-                },
-                "labelBySupportedLanguageTag": Object.fromEntries(
-                    (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
-                )
-            });
-        })();
-    }, []);
-
-    return i18n ?? null;
-}
-
-const useI18n_private = __unsafe_useI18n;
-
-export function useI18n<ExtraMessageKey extends string = never>(params: {
-    kcContext: KcContextLike;
-    extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } };
-}): I18n<MessageKeyBase | ExtraMessageKey> | null {
-    return useI18n_private({
-        ...params,
-        "doSkip": false
-    });
-}
-
-function createI18nTranslationFunctions<MessageKey extends string>(params: {
-    fallbackMessages: Record<MessageKey, string>;
-    messages: Record<MessageKey, string>;
-}): Pick<I18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
-    const { fallbackMessages, messages } = params;
-
-    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): string | JSX.Element | undefined {
-        const { key, args, doRenderMarkdown } = props;
-
-        const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
-
-        if (messageOrUndefined === undefined) {
-            return undefined;
-        }
-
-        const message = messageOrUndefined;
-
-        const messageWithArgsInjectedIfAny = (() => {
-            const startIndex = message
-                .match(/{[0-9]+}/g)
-                ?.map(g => g.match(/{([0-9]+)}/)![1])
-                .map(indexStr => parseInt(indexStr))
-                .sort((a, b) => a - b)[0];
-
-            if (startIndex === undefined) {
-                // No {0} in message (no arguments expected)
-                return message;
-            }
-
-            let messageWithArgsInjected = message;
-
-            args.forEach((arg, i) => {
-                if (arg === undefined) {
-                    return;
-                }
-
-                messageWithArgsInjected = messageWithArgsInjected.replace(new RegExp(`\\{${i + startIndex}\\}`, "g"), arg);
-            });
-
-            return messageWithArgsInjected;
-        })();
-
-        return doRenderMarkdown ? (
-            <Markdown allowDangerousHtml renderers={{ "paragraph": "span" }}>
-                {messageWithArgsInjectedIfAny}
-            </Markdown>
-        ) : (
-            messageWithArgsInjectedIfAny
-        );
-    }
-
-    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderMarkdown: boolean }): JSX.Element | string {
-        const { key, args, doRenderMarkdown } = props;
-
-        const match = key.match(/^\$\{([^{]+)\}$/);
-
-        const keyUnwrappedFromCurlyBraces = match === null ? key : match[1];
-
-        const out = resolveMsg({
-            "key": keyUnwrappedFromCurlyBraces,
-            args,
-            doRenderMarkdown
-        });
-
-        return (out !== undefined ? out : doRenderMarkdown ? <span>{keyUnwrappedFromCurlyBraces}</span> : keyUnwrappedFromCurlyBraces) as any;
-    }
-
-    return {
-        "msgStr": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": false }) as string,
-        "msg": (key, ...args) => resolveMsg({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsg": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": true }) as JSX.Element,
-        "advancedMsgStr": (key, ...args) => resolveMsgAdvanced({ key, args, "doRenderMarkdown": false }) as string
-    };
-}
-
-const keycloakifyExtraMessages = {
-    "en": {
-        "shouldBeEqual": "{0} should be equal to {1}",
-        "shouldBeDifferent": "{0} should be different to {1}",
-        "shouldMatchPattern": "Pattern should match: `/{0}/`",
-        "mustBeAnInteger": "Must be an integer",
-        "notAValidOption": "Not a valid option"
-    },
-    "fr": {
-        /* spell-checker: disable */
-        "shouldBeEqual": "{0} doit être égal à {1}",
-        "shouldBeDifferent": "{0} doit être différent de {1}",
-        "shouldMatchPattern": "Dois respecter le schéma: `/{0}/`",
-        "mustBeAnInteger": "Doit être un nombre entier",
-        "notAValidOption": "N'est pas une option valide",
-
-        "logoutConfirmTitle": "Déconnexion",
-        "logoutConfirmHeader": "Êtes-vous sûr(e) de vouloir vous déconnecter ?",
-        "doLogout": "Se déconnecter"
-        /* spell-checker: enable */
-    }
-};
+export * from "./i18n";

src/lib/index.ts

@@ -2,12 +2,12 @@ export * from "./getKcContext";
 
 export * from "./i18n";
 
-export { useDownloadTerms } from "./components/Terms";
+export { useDownloadTerms } from "./pages/Terms";
 
-export * from "./components/KcProps";
+export * from "./KcProps";
 export * from "./keycloakJsAdapter";
 export * from "./useFormValidationSlice";
 
-import KcApp from "./components/KcApp";
+import KcApp from "./KcApp";
 
 export default KcApp;

src/lib/pages/Error.tsx

@@ -1,19 +1,10 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import React from "react";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type ErrorProps = KcProps & {
-    kcContext: KcContextBase.Error;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Error = memo((props: ErrorProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Error(props: PageProps<Extract<KcContextBase, { pageId: "error.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { message, client } = kcContext;
 
@@ -38,6 +29,4 @@ const Error = memo((props: ErrorProps) => {
             }
         />
     );
-});
-
-export default Error;
+}

src/lib/pages/IdpReviewUserProfile.tsx

@@ -1,23 +1,12 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React, { useState } from "react";
+import { clsx } from "../tools/clsx";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type IdpReviewUserProfileProps = KcProps & {
-    kcContext: KcContextBase.IdpReviewUserProfile;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
-
-    const { cx } = useCssAndCx();
+export default function IdpReviewUserProfile(props: PageProps<Extract<KcContextBase, { pageId: "idp-review-user-profile.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { msg, msgStr } = i18n;
 
@@ -30,16 +19,16 @@ const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
             {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
             headerNode={msg("loginIdpReviewProfileTitle")}
             formNode={
-                <form id="kc-idp-review-profile-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
+                <form id="kc-idp-review-profile-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
                     <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
 
-                    <div className={cx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
-                            <div className={cx(kcProps.kcFormOptionsWrapperClass)} />
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)} />
                         </div>
-                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
                             <input
-                                className={cx(
+                                className={clsx(
                                     kcProps.kcButtonClass,
                                     kcProps.kcButtonPrimaryClass,
                                     kcProps.kcButtonBlockClass,
@@ -55,6 +44,4 @@ const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
             }
         />
     );
-});
-
-export default IdpReviewUserProfile;
+}

src/lib/pages/Info.tsx

@@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
+import React from "react";
 import { assert } from "../tools/assert";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type InfoProps = KcProps & {
-    kcContext: KcContextBase.Info;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Info = memo((props: InfoProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Info(props: PageProps<Extract<KcContextBase, { pageId: "info.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { msgStr, msg } = i18n;
 
@@ -55,6 +46,4 @@ const Info = memo((props: InfoProps) => {
             }
         />
     );
-});
-
-export default Info;
+}

src/lib/pages/Login.tsx

@@ -1,29 +1,17 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import { useConstCallback } from "powerhooks/useConstCallback";
-import type { FormEventHandler } from "react";
-import type { I18n } from "../i18n";
+import React, { useState, type FormEventHandler } from "react";
+import { clsx } from "../tools/clsx";
+import { useConstCallback } from "../tools/useConstCallback";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginProps = KcProps & {
-    kcContext: KcContextBase.Login;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Login = memo((props: LoginProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Login(props: PageProps<Extract<KcContextBase, { pageId: "login.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
 
     const { msg, msgStr } = i18n;
 
-    const { cx } = useCssAndCx();
-
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
     const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
@@ -47,16 +35,16 @@ const Login = memo((props: LoginProps) => {
             displayWide={realm.password && social.providers !== undefined}
             headerNode={msg("doLogIn")}
             formNode={
-                <div id="kc-form" className={cx(realm.password && social.providers !== undefined && kcProps.kcContentWrapperClass)}>
+                <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && kcProps.kcContentWrapperClass)}>
                     <div
                         id="kc-form-wrapper"
-                        className={cx(
+                        className={clsx(
                             realm.password && social.providers && [kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass]
                         )}
                     >
                         {realm.password && (
                             <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                                <div className={cx(kcProps.kcFormGroupClass)}>
+                                <div className={clsx(kcProps.kcFormGroupClass)}>
                                     {(() => {
                                         const label = !realm.loginWithEmailAllowed
                                             ? "username"
@@ -68,13 +56,13 @@ const Login = memo((props: LoginProps) => {
 
                                         return (
                                             <>
-                                                <label htmlFor={autoCompleteHelper} className={cx(kcProps.kcLabelClass)}>
+                                                <label htmlFor={autoCompleteHelper} className={clsx(kcProps.kcLabelClass)}>
                                                     {msg(label)}
                                                 </label>
                                                 <input
                                                     tabIndex={1}
                                                     id={autoCompleteHelper}
-                                                    className={cx(kcProps.kcInputClass)}
+                                                    className={clsx(kcProps.kcInputClass)}
                                                     //NOTE: This is used by Google Chrome auto fill so we use it to tell
                                                     //the browser how to pre fill the form but before submit we put it back
                                                     //to username because it is what keycloak expects.
@@ -92,20 +80,20 @@ const Login = memo((props: LoginProps) => {
                                         );
                                     })()}
                                 </div>
-                                <div className={cx(kcProps.kcFormGroupClass)}>
-                                    <label htmlFor="password" className={cx(kcProps.kcLabelClass)}>
+                                <div className={clsx(kcProps.kcFormGroupClass)}>
+                                    <label htmlFor="password" className={clsx(kcProps.kcLabelClass)}>
                                         {msg("password")}
                                     </label>
                                     <input
                                         tabIndex={2}
                                         id="password"
-                                        className={cx(kcProps.kcInputClass)}
+                                        className={clsx(kcProps.kcInputClass)}
                                         name="password"
                                         type="password"
                                         autoComplete="off"
                                     />
                                 </div>
-                                <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
+                                <div className={clsx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
                                     <div id="kc-form-options">
                                         {realm.rememberMe && !usernameEditDisabled && (
                                             <div className="checkbox">
@@ -126,7 +114,7 @@ const Login = memo((props: LoginProps) => {
                                             </div>
                                         )}
                                     </div>
-                                    <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
+                                    <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
                                         {realm.resetPasswordAllowed && (
                                             <span>
                                                 <a tabIndex={5} href={url.loginResetCredentialsUrl}>
@@ -136,7 +124,7 @@ const Login = memo((props: LoginProps) => {
                                         )}
                                     </div>
                                 </div>
-                                <div id="kc-form-buttons" className={cx(kcProps.kcFormGroupClass)}>
+                                <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
                                     <input
                                         type="hidden"
                                         id="id-hidden-input"
@@ -149,7 +137,7 @@ const Login = memo((props: LoginProps) => {
                                     />
                                     <input
                                         tabIndex={4}
-                                        className={cx(
+                                        className={clsx(
                                             kcProps.kcButtonClass,
                                             kcProps.kcButtonPrimaryClass,
                                             kcProps.kcButtonBlockClass,
@@ -166,16 +154,16 @@ const Login = memo((props: LoginProps) => {
                         )}
                     </div>
                     {realm.password && social.providers !== undefined && (
-                        <div id="kc-social-providers" className={cx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
+                        <div id="kc-social-providers" className={clsx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
                             <ul
-                                className={cx(
+                                className={clsx(
                                     kcProps.kcFormSocialAccountListClass,
                                     social.providers.length > 4 && kcProps.kcFormSocialAccountDoubleListClass
                                 )}
                             >
                                 {social.providers.map(p => (
-                                    <li key={p.providerId} className={cx(kcProps.kcFormSocialAccountListLinkClass)}>
-                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={cx("zocial", p.providerId)}>
+                                    <li key={p.providerId} className={clsx(kcProps.kcFormSocialAccountListLinkClass)}>
+                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
                                             <span>{p.displayName}</span>
                                         </a>
                                     </li>
@@ -201,6 +189,4 @@ const Login = memo((props: LoginProps) => {
             }
         />
     );
-});
-
-export default Login;
+}

src/lib/pages/LoginConfigTotp.tsx

@@ -1,25 +1,14 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React from "react";
+import { clsx } from "../tools/clsx";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginConfigTotpProps = KcProps & {
-    kcContext: KcContextBase.LoginConfigTotp;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginConfigTotp(props: PageProps<Extract<KcContextBase, { pageId: "login-config-totp.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
 
-    const { cx } = useCssAndCx();
-
     const { msg, msgStr } = i18n;
 
     const algToKeyUriAlg: Record<KcContextBase.LoginConfigTotp["totp"]["policy"]["algorithm"], string> = {
@@ -102,26 +91,26 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
                         </li>
                     </ol>
 
-                    <form action={url.loginAction} className={cx(kcProps.kcFormClass)} id="kc-totp-settings-form" method="post">
-                        <div className={cx(kcProps.kcFormGroupClass)}>
-                            <div className={cx(kcProps.kcInputWrapperClass)}>
-                                <label htmlFor="totp" className={cx(kcProps.kcLabelClass)}>
+                    <form action={url.loginAction} className={clsx(kcProps.kcFormClass)} id="kc-totp-settings-form" method="post">
+                        <div className={clsx(kcProps.kcFormGroupClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
+                                <label htmlFor="totp" className={clsx(kcProps.kcLabelClass)}>
                                     {msg("authenticatorCode")}
                                 </label>{" "}
                                 <span className="required">*</span>
                             </div>
-                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
                                 <input
                                     type="text"
                                     id="totp"
                                     name="totp"
                                     autoComplete="off"
-                                    className={cx(kcProps.kcInputClass)}
+                                    className={clsx(kcProps.kcInputClass)}
                                     aria-invalid={messagesPerField.existsError("totp")}
                                 />
 
                                 {messagesPerField.existsError("totp") && (
-                                    <span id="input-error-otp-code" className={cx(kcProps.kcInputErrorMessageClass)} aria-live="polite">
+                                    <span id="input-error-otp-code" className={clsx(kcProps.kcInputErrorMessageClass)} aria-live="polite">
                                         {messagesPerField.get("totp")}
                                     </span>
                                 )}
@@ -130,24 +119,24 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
                             {mode && <input type="hidden" id="mode" value={mode} />}
                         </div>
 
-                        <div className={cx(kcProps.kcFormGroupClass)}>
-                            <div className={cx(kcProps.kcInputWrapperClass)}>
-                                <label htmlFor="userLabel" className={cx(kcProps.kcLabelClass)}>
+                        <div className={clsx(kcProps.kcFormGroupClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
+                                <label htmlFor="userLabel" className={clsx(kcProps.kcLabelClass)}>
                                     {msg("loginTotpDeviceName")}
                                 </label>{" "}
                                 {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
                             </div>
-                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
                                 <input
                                     type="text"
                                     id="userLabel"
                                     name="userLabel"
                                     autoComplete="off"
-                                    className={cx(kcProps.kcInputClass)}
+                                    className={clsx(kcProps.kcInputClass)}
                                     aria-invalid={messagesPerField.existsError("userLabel")}
                                 />
                                 {messagesPerField.existsError("userLabel") && (
-                                    <span id="input-error-otp-label" className={cx(kcProps.kcInputErrorMessageClass)} aria-live="polite">
+                                    <span id="input-error-otp-label" className={clsx(kcProps.kcInputErrorMessageClass)} aria-live="polite">
                                         {messagesPerField.get("userLabel")}
                                     </span>
                                 )}
@@ -158,13 +147,13 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
                             <>
                                 <input
                                     type="submit"
-                                    className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
+                                    className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
                                     id="saveTOTPBtn"
                                     value={msgStr("doSubmit")}
                                 />
                                 <button
                                     type="submit"
-                                    className={cx(
+                                    className={clsx(
                                         kcProps.kcButtonClass,
                                         kcProps.kcButtonDefaultClass,
                                         kcProps.kcButtonLargeClass,
@@ -180,7 +169,7 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
                         ) : (
                             <input
                                 type="submit"
-                                className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
+                                className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
                                 id="saveTOTPBtn"
                                 value={msgStr("doSubmit")}
                             />
@@ -190,6 +179,4 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
             }
         />
     );
-});
-
-export default LoginConfigTotp;
+}

src/lib/pages/LoginIdpLinkConfirm.tsx

@@ -1,37 +1,26 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React from "react";
+import { clsx } from "../tools/clsx";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginIdpLinkConfirmProps = KcProps & {
-    kcContext: KcContextBase.LoginIdpLinkConfirm;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginIdpLinkConfirm(props: PageProps<Extract<KcContextBase, { pageId: "login-idp-link-confirm.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url, idpAlias } = kcContext;
 
     const { msg } = i18n;
 
-    const { cx } = useCssAndCx();
-
     return (
         <Template
             {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
             headerNode={msg("confirmLinkIdpTitle")}
             formNode={
                 <form id="kc-register-form" action={url.loginAction} method="post">
-                    <div className={cx(kcProps.kcFormGroupClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
                         <button
                             type="submit"
-                            className={cx(
+                            className={clsx(
                                 kcProps.kcButtonClass,
                                 kcProps.kcButtonDefaultClass,
                                 kcProps.kcButtonBlockClass,
@@ -45,7 +34,7 @@ const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
                         </button>
                         <button
                             type="submit"
-                            className={cx(
+                            className={clsx(
                                 kcProps.kcButtonClass,
                                 kcProps.kcButtonDefaultClass,
                                 kcProps.kcButtonBlockClass,
@@ -62,6 +51,4 @@ const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
             }
         />
     );
-});
-
-export default LoginIdpLinkConfirm;
+}

src/lib/pages/LoginIdpLinkEmail.tsx

@@ -1,19 +1,10 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import React from "react";
+import type { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+import type { I18nBase } from "../i18n";
 
-export type LoginIdpLinkEmailProps = KcProps & {
-    kcContext: KcContextBase.LoginIdpLinkEmail;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginIdpLinkEmail = memo((props: LoginIdpLinkEmailProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginIdpLinkEmail(props: PageProps<Extract<KcContextBase, { pageId: "login-idp-link-email.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url, realm, brokerContext, idpAlias } = kcContext;
 
@@ -38,6 +29,4 @@ const LoginIdpLinkEmail = memo((props: LoginIdpLinkEmailProps) => {
             }
         />
     );
-});
-
-export default LoginIdpLinkEmail;
+}

src/lib/pages/LoginOtp.tsx

@@ -1,27 +1,16 @@
-import React, { useEffect, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useEffect } from "react";
 import { headInsert } from "../tools/headInsert";
 import { pathJoin } from "../../bin/tools/pathJoin";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import { clsx } from "../tools/clsx";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginOtpProps = KcProps & {
-    kcContext: KcContextBase.LoginOtp;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginOtp = memo((props: LoginOtpProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginOtp(props: PageProps<Extract<KcContextBase, { pageId: "login-otp.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { otpLogin, url } = kcContext;
 
-    const { cx } = useCssAndCx();
-
     const { msg, msgStr } = i18n;
 
     useEffect(() => {
@@ -46,42 +35,42 @@ const LoginOtp = memo((props: LoginOtpProps) => {
             {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
             headerNode={msg("doLogIn")}
             formNode={
-                <form id="kc-otp-login-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
+                <form id="kc-otp-login-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
                     {otpLogin.userOtpCredentials.length > 1 && (
-                        <div className={cx(kcProps.kcFormGroupClass)}>
-                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                        <div className={clsx(kcProps.kcFormGroupClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
                                 {otpLogin.userOtpCredentials.map(otpCredential => (
-                                    <div key={otpCredential.id} className={cx(kcProps.kcSelectOTPListClass)}>
+                                    <div key={otpCredential.id} className={clsx(kcProps.kcSelectOTPListClass)}>
                                         <input type="hidden" value="${otpCredential.id}" />
-                                        <div className={cx(kcProps.kcSelectOTPListItemClass)}>
-                                            <span className={cx(kcProps.kcAuthenticatorOtpCircleClass)} />
-                                            <h2 className={cx(kcProps.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
+                                        <div className={clsx(kcProps.kcSelectOTPListItemClass)}>
+                                            <span className={clsx(kcProps.kcAuthenticatorOtpCircleClass)} />
+                                            <h2 className={clsx(kcProps.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
                                         </div>
                                     </div>
                                 ))}
                             </div>
                         </div>
                     )}
-                    <div className={cx(kcProps.kcFormGroupClass)}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="otp" className={cx(kcProps.kcLabelClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="otp" className={clsx(kcProps.kcLabelClass)}>
                                 {msg("loginOtpOneTime")}
                             </label>
                         </div>
 
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
-                            <input id="otp" name="otp" autoComplete="off" type="text" className={cx(kcProps.kcInputClass)} autoFocus />
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
+                            <input id="otp" name="otp" autoComplete="off" type="text" className={clsx(kcProps.kcInputClass)} autoFocus />
                         </div>
                     </div>
 
-                    <div className={cx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
-                            <div className={cx(kcProps.kcFormOptionsWrapperClass)} />
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)} />
                         </div>
 
-                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
                             <input
-                                className={cx(
+                                className={clsx(
                                     kcProps.kcButtonClass,
                                     kcProps.kcButtonPrimaryClass,
                                     kcProps.kcButtonBlockClass,
@@ -98,7 +87,7 @@ const LoginOtp = memo((props: LoginOtpProps) => {
             }
         />
     );
-});
+}
 
 declare const $: any;
 
@@ -123,5 +112,3 @@ function evaluateInlineScript() {
         }
     });
 }
-
-export default LoginOtp;

src/lib/pages/LoginPageExpired.tsx

@@ -1,19 +1,10 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import React from "react";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginPageExpired = KcProps & {
-    kcContext: KcContextBase.LoginPageExpired;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginPageExpired = memo((props: LoginPageExpired) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginPageExpired(props: PageProps<Extract<KcContextBase, { pageId: "login-page-expired.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url } = kcContext;
 
@@ -42,6 +33,4 @@ const LoginPageExpired = memo((props: LoginPageExpired) => {
             }
         />
     );
-});
-
-export default LoginPageExpired;
+}

src/lib/pages/LoginPassword.tsx

@@ -1,29 +1,18 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import React, { useState } from "react";
+import { clsx } from "../tools/clsx";
+import { useConstCallback } from "../tools/useConstCallback";
 import type { FormEventHandler } from "react";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginPasswordProps = KcProps & {
-    kcContext: KcContextBase.LoginPassword;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginPassword = memo((props: LoginPasswordProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginPassword(props: PageProps<Extract<KcContextBase, { "pageId": "login-password.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { realm, url, login } = kcContext;
 
     const { msg, msgStr } = i18n;
 
-    const { cx } = useCssAndCx();
-
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
     const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
@@ -44,15 +33,15 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
                 <div id="kc-form">
                     <div id="kc-form-wrapper">
                         <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                            <div className={cx(kcProps.kcFormGroupClass)}>
+                            <div className={clsx(kcProps.kcFormGroupClass)}>
                                 <hr />
-                                <label htmlFor="password" className={cx(kcProps.kcLabelClass)}>
+                                <label htmlFor="password" className={clsx(kcProps.kcLabelClass)}>
                                     {msg("password")}
                                 </label>
                                 <input
                                     tabIndex={2}
                                     id="password"
-                                    className={cx(kcProps.kcInputClass)}
+                                    className={clsx(kcProps.kcInputClass)}
                                     name="password"
                                     type="password"
                                     autoFocus={true}
@@ -60,9 +49,9 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
                                     defaultValue={login.password ?? ""}
                                 />
                             </div>
-                            <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
+                            <div className={clsx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
                                 <div id="kc-form-options" />
-                                <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
+                                <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
                                     {realm.resetPasswordAllowed && (
                                         <span>
                                             <a tabIndex={5} href={url.loginResetCredentialsUrl}>
@@ -72,10 +61,10 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
                                     )}
                                 </div>
                             </div>
-                            <div id="kc-form-buttons" className={cx(kcProps.kcFormGroupClass)}>
+                            <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
                                 <input
                                     tabIndex={4}
-                                    className={cx(
+                                    className={clsx(
                                         kcProps.kcButtonClass,
                                         kcProps.kcButtonPrimaryClass,
                                         kcProps.kcButtonBlockClass,
@@ -94,6 +83,4 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
             }
         />
     );
-});
-
-export default LoginPassword;
+}

src/lib/pages/LoginResetPassword.tsx

@@ -1,37 +1,26 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React from "react";
+import { clsx } from "../tools/clsx";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginResetPasswordProps = KcProps & {
-    kcContext: KcContextBase.LoginResetPassword;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginResetPassword = memo((props: LoginResetPasswordProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginResetPassword(props: PageProps<Extract<KcContextBase, { pageId: "login-reset-password.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url, realm, auth } = kcContext;
 
     const { msg, msgStr } = i18n;
 
-    const { cx } = useCssAndCx();
-
     return (
         <Template
             {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
             displayMessage={false}
             headerNode={msg("emailForgotTitle")}
             formNode={
-                <form id="kc-reset-password-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
-                    <div className={cx(kcProps.kcFormGroupClass)}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="username" className={cx(kcProps.kcLabelClass)}>
+                <form id="kc-reset-password-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="username" className={clsx(kcProps.kcLabelClass)}>
                                 {!realm.loginWithEmailAllowed
                                     ? msg("username")
                                     : !realm.registrationEmailAsUsername
@@ -39,29 +28,29 @@ const LoginResetPassword = memo((props: LoginResetPasswordProps) => {
                                     : msg("email")}
                             </label>
                         </div>
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
                             <input
                                 type="text"
                                 id="username"
                                 name="username"
-                                className={cx(kcProps.kcInputClass)}
+                                className={clsx(kcProps.kcInputClass)}
                                 autoFocus
                                 defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
                             />
                         </div>
                     </div>
-                    <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
-                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
-                            <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
                                 <span>
                                     <a href={url.loginUrl}>{msg("backToLogin")}</a>
                                 </span>
                             </div>
                         </div>
 
-                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
                             <input
-                                className={cx(
+                                className={clsx(
                                     kcProps.kcButtonClass,
                                     kcProps.kcButtonPrimaryClass,
                                     kcProps.kcButtonBlockClass,
@@ -77,6 +66,4 @@ const LoginResetPassword = memo((props: LoginResetPasswordProps) => {
             infoNode={msg("emailInstruction")}
         />
     );
-});
-
-export default LoginResetPassword;
+}

src/lib/pages/LoginUpdatePassword.tsx

@@ -1,22 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React from "react";
+import { clsx } from "../tools/clsx";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginUpdatePasswordProps = KcProps & {
-    kcContext: KcContextBase.LoginUpdatePassword;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
-
-    const { cx } = useCssAndCx();
+export default function LoginUpdatePassword(props: PageProps<Extract<KcContextBase, { pageId: "login-update-password.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { msg, msgStr } = i18n;
 
@@ -27,7 +16,7 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
             {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
             headerNode={msg("updatePasswordTitle")}
             formNode={
-                <form id="kc-passwd-update-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
+                <form id="kc-passwd-update-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
                     <input
                         type="text"
                         id="username"
@@ -39,44 +28,46 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
                     />
                     <input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
 
-                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password", kcProps.kcFormGroupErrorClass))}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="password-new" className={cx(kcProps.kcLabelClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password", kcProps.kcFormGroupErrorClass))}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="password-new" className={clsx(kcProps.kcLabelClass)}>
                                 {msg("passwordNew")}
                             </label>
                         </div>
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
                             <input
                                 type="password"
                                 id="password-new"
                                 name="password-new"
                                 autoFocus
                                 autoComplete="new-password"
-                                className={cx(kcProps.kcInputClass)}
+                                className={clsx(kcProps.kcInputClass)}
                             />
                         </div>
                     </div>
 
-                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", kcProps.kcFormGroupErrorClass))}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="password-confirm" className={cx(kcProps.kcLabelClass)}>
+                    <div
+                        className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", kcProps.kcFormGroupErrorClass))}
+                    >
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="password-confirm" className={clsx(kcProps.kcLabelClass)}>
                                 {msg("passwordConfirm")}
                             </label>
                         </div>
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
                             <input
                                 type="password"
                                 id="password-confirm"
                                 name="password-confirm"
                                 autoComplete="new-password"
-                                className={cx(kcProps.kcInputClass)}
+                                className={clsx(kcProps.kcInputClass)}
                             />
                         </div>
                     </div>
 
-                    <div className={cx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
-                            <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
                                 {isAppInitiatedAction && (
                                     <div className="checkbox">
                                         <label>
@@ -88,16 +79,16 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
                             </div>
                         </div>
 
-                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
                             {isAppInitiatedAction ? (
                                 <>
                                     <input
-                                        className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
+                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
                                         type="submit"
                                         defaultValue={msgStr("doSubmit")}
                                     />
                                     <button
-                                        className={cx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
+                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
                                         type="submit"
                                         name="cancel-aia"
                                         value="true"
@@ -107,7 +98,7 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
                                 </>
                             ) : (
                                 <input
-                                    className={cx(
+                                    className={clsx(
                                         kcProps.kcButtonClass,
                                         kcProps.kcButtonPrimaryClass,
                                         kcProps.kcButtonBlockClass,
@@ -123,6 +114,4 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
             }
         />
     );
-});
-
-export default LoginUpdatePassword;
+}

src/lib/pages/LoginUpdateProfile.tsx

@@ -1,22 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React from "react";
+import { clsx } from "../tools/clsx";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginUpdateProfile = KcProps & {
-    kcContext: KcContextBase.LoginUpdateProfile;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
-
-    const { cx } = useCssAndCx();
+export default function LoginUpdateProfile(props: PageProps<Extract<KcContextBase, { pageId: "login-update-profile.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { msg, msgStr } = i18n;
 
@@ -27,86 +16,86 @@ const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
             {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
             headerNode={msg("loginProfileTitle")}
             formNode={
-                <form id="kc-update-profile-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
+                <form id="kc-update-profile-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
                     {user.editUsernameAllowed && (
-                        <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("username", kcProps.kcFormGroupErrorClass))}>
-                            <div className={cx(kcProps.kcLabelWrapperClass)}>
-                                <label htmlFor="username" className={cx(kcProps.kcLabelClass)}>
+                        <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("username", kcProps.kcFormGroupErrorClass))}>
+                            <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                                <label htmlFor="username" className={clsx(kcProps.kcLabelClass)}>
                                     {msg("username")}
                                 </label>
                             </div>
-                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
                                 <input
                                     type="text"
                                     id="username"
                                     name="username"
                                     defaultValue={user.username ?? ""}
-                                    className={cx(kcProps.kcInputClass)}
+                                    className={clsx(kcProps.kcInputClass)}
                                 />
                             </div>
                         </div>
                     )}
 
-                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("email", kcProps.kcFormGroupErrorClass))}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="email" className={cx(kcProps.kcLabelClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("email", kcProps.kcFormGroupErrorClass))}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="email" className={clsx(kcProps.kcLabelClass)}>
                                 {msg("email")}
                             </label>
                         </div>
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
-                            <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={cx(kcProps.kcInputClass)} />
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
+                            <input type="text" id="email" name="email" defaultValue={user.email ?? ""} className={clsx(kcProps.kcInputClass)} />
                         </div>
                     </div>
 
-                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("firstName", kcProps.kcFormGroupErrorClass))}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="firstName" className={cx(kcProps.kcLabelClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("firstName", kcProps.kcFormGroupErrorClass))}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="firstName" className={clsx(kcProps.kcLabelClass)}>
                                 {msg("firstName")}
                             </label>
                         </div>
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
                             <input
                                 type="text"
                                 id="firstName"
                                 name="firstName"
                                 defaultValue={user.firstName ?? ""}
-                                className={cx(kcProps.kcInputClass)}
+                                className={clsx(kcProps.kcInputClass)}
                             />
                         </div>
                     </div>
 
-                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("lastName", kcProps.kcFormGroupErrorClass))}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="lastName" className={cx(kcProps.kcLabelClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("lastName", kcProps.kcFormGroupErrorClass))}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="lastName" className={clsx(kcProps.kcLabelClass)}>
                                 {msg("lastName")}
                             </label>
                         </div>
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
                             <input
                                 type="text"
                                 id="lastName"
                                 name="lastName"
                                 defaultValue={user.lastName ?? ""}
-                                className={cx(kcProps.kcInputClass)}
+                                className={clsx(kcProps.kcInputClass)}
                             />
                         </div>
                     </div>
 
-                    <div className={cx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
-                            <div className={cx(kcProps.kcFormOptionsWrapperClass)} />
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)} />
                         </div>
 
-                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
                             {isAppInitiatedAction ? (
                                 <>
                                     <input
-                                        className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
+                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
                                         type="submit"
                                         defaultValue={msgStr("doSubmit")}
                                     />
                                     <button
-                                        className={cx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
+                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
                                         type="submit"
                                         name="cancel-aia"
                                         value="true"
@@ -116,7 +105,7 @@ const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
                                 </>
                             ) : (
                                 <input
-                                    className={cx(
+                                    className={clsx(
                                         kcProps.kcButtonClass,
                                         kcProps.kcButtonPrimaryClass,
                                         kcProps.kcButtonBlockClass,
@@ -132,6 +121,4 @@ const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
             }
         />
     );
-});
-
-export default LoginUpdateProfile;
+}

src/lib/pages/LoginUsername.tsx

@@ -1,29 +1,18 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import React, { useState } from "react";
+import { clsx } from "../tools/clsx";
+import { useConstCallback } from "../tools/useConstCallback";
 import type { FormEventHandler } from "react";
-import type { I18n } from "../i18n";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginUsernameProps = KcProps & {
-    kcContext: KcContextBase.LoginUsername;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginUsername = memo((props: LoginUsernameProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginUsername(props: PageProps<Extract<KcContextBase, { pageId: "login-username.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { social, realm, url, usernameHidden, login, registrationDisabled } = kcContext;
 
     const { msg, msgStr } = i18n;
 
-    const { cx } = useCssAndCx();
-
     const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
 
     const onSubmit = useConstCallback<FormEventHandler<HTMLFormElement>>(e => {
@@ -47,16 +36,16 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
             displayWide={realm.password && social.providers !== undefined}
             headerNode={msg("doLogIn")}
             formNode={
-                <div id="kc-form" className={cx(realm.password && social.providers !== undefined && kcProps.kcContentWrapperClass)}>
+                <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && kcProps.kcContentWrapperClass)}>
                     <div
                         id="kc-form-wrapper"
-                        className={cx(
+                        className={clsx(
                             realm.password && social.providers && [kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass]
                         )}
                     >
                         {realm.password && (
                             <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
-                                <div className={cx(kcProps.kcFormGroupClass)}>
+                                <div className={clsx(kcProps.kcFormGroupClass)}>
                                     {!usernameHidden &&
                                         (() => {
                                             const label = !realm.loginWithEmailAllowed
@@ -69,13 +58,13 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
 
                                             return (
                                                 <>
-                                                    <label htmlFor={autoCompleteHelper} className={cx(kcProps.kcLabelClass)}>
+                                                    <label htmlFor={autoCompleteHelper} className={clsx(kcProps.kcLabelClass)}>
                                                         {msg(label)}
                                                     </label>
                                                     <input
                                                         tabIndex={1}
                                                         id={autoCompleteHelper}
-                                                        className={cx(kcProps.kcInputClass)}
+                                                        className={clsx(kcProps.kcInputClass)}
                                                         //NOTE: This is used by Google Chrome auto fill so we use it to tell
                                                         //the browser how to pre fill the form but before submit we put it back
                                                         //to username because it is what keycloak expects.
@@ -89,7 +78,7 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
                                             );
                                         })()}
                                 </div>
-                                <div className={cx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
+                                <div className={clsx(kcProps.kcFormGroupClass, kcProps.kcFormSettingClass)}>
                                     <div id="kc-form-options">
                                         {realm.rememberMe && !usernameHidden && (
                                             <div className="checkbox">
@@ -111,10 +100,10 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
                                         )}
                                     </div>
                                 </div>
-                                <div id="kc-form-buttons" className={cx(kcProps.kcFormGroupClass)}>
+                                <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
                                     <input
                                         tabIndex={4}
-                                        className={cx(
+                                        className={clsx(
                                             kcProps.kcButtonClass,
                                             kcProps.kcButtonPrimaryClass,
                                             kcProps.kcButtonBlockClass,
@@ -131,16 +120,16 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
                         )}
                     </div>
                     {realm.password && social.providers !== undefined && (
-                        <div id="kc-social-providers" className={cx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
+                        <div id="kc-social-providers" className={clsx(kcProps.kcFormSocialAccountContentClass, kcProps.kcFormSocialAccountClass)}>
                             <ul
-                                className={cx(
+                                className={clsx(
                                     kcProps.kcFormSocialAccountListClass,
                                     social.providers.length > 4 && kcProps.kcFormSocialAccountDoubleListClass
                                 )}
                             >
                                 {social.providers.map(p => (
-                                    <li key={p.providerId} className={cx(kcProps.kcFormSocialAccountListLinkClass)}>
-                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={cx("zocial", p.providerId)}>
+                                    <li key={p.providerId} className={clsx(kcProps.kcFormSocialAccountListLinkClass)}>
+                                        <a href={p.loginUrl} id={`zocial-${p.alias}`} className={clsx("zocial", p.providerId)}>
                                             <span>{p.displayName}</span>
                                         </a>
                                     </li>
@@ -166,6 +155,4 @@ const LoginUsername = memo((props: LoginUsernameProps) => {
             }
         />
     );
-});
-
-export default LoginUsername;
+}

src/lib/pages/LoginVerifyEmail.tsx

@@ -1,19 +1,10 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import React from "react";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LoginVerifyEmailProps = KcProps & {
-    kcContext: KcContextBase.LoginVerifyEmail;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginVerifyEmail = memo((props: LoginVerifyEmailProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginVerifyEmail(props: PageProps<Extract<KcContextBase, { pageId: "login-verify-email.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { msg } = i18n;
 
@@ -38,6 +29,4 @@ const LoginVerifyEmail = memo((props: LoginVerifyEmailProps) => {
             }
         />
     );
-});
-
-export default LoginVerifyEmail;
+}

src/lib/pages/LogoutConfirm.tsx

@@ -1,25 +1,14 @@
-import React, { memo } from "react";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
+import React from "react";
+import { clsx } from "../tools/clsx";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type LogoutConfirmProps = KcProps & {
-    kcContext: KcContextBase.LogoutConfirm;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LogoutConfirm = memo((props: LogoutConfirmProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LogoutConfirm(props: PageProps<Extract<KcContextBase, { pageId: "logout-confirm.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url, client, logoutConfirm } = kcContext;
 
-    const { cx } = useCssAndCx();
-
     const { msg, msgStr } = i18n;
 
     return (
@@ -33,14 +22,14 @@ const LogoutConfirm = memo((props: LogoutConfirmProps) => {
                         <p className="instruction">{msg("logoutConfirmHeader")}</p>
                         <form className="form-actions" action={url.logoutConfirmAction} method="POST">
                             <input type="hidden" name="session_code" value={logoutConfirm.code} />
-                            <div className={cx(kcProps.kcFormGroupClass)}>
+                            <div className={clsx(kcProps.kcFormGroupClass)}>
                                 <div id="kc-form-options">
-                                    <div className={cx(kcProps.kcFormOptionsWrapperClass)}></div>
+                                    <div className={clsx(kcProps.kcFormOptionsWrapperClass)}></div>
                                 </div>
-                                <div id="kc-form-buttons" className={cx(kcProps.kcFormGroupClass)}>
+                                <div id="kc-form-buttons" className={clsx(kcProps.kcFormGroupClass)}>
                                     <input
                                         tabIndex={4}
-                                        className={cx(
+                                        className={clsx(
                                             kcProps.kcButtonClass,
                                             kcProps.kcButtonPrimaryClass,
                                             kcProps.kcButtonBlockClass,
@@ -66,6 +55,4 @@ const LogoutConfirm = memo((props: LogoutConfirmProps) => {
             }
         />
     );
-});
-
-export default LogoutConfirm;
+}

src/lib/pages/Register.tsx

@@ -1,78 +1,67 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React from "react";
+import { clsx } from "../tools/clsx";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type RegisterProps = KcProps & {
-    kcContext: KcContextBase.Register;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Register = memo((props: RegisterProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Register(props: PageProps<Extract<KcContextBase, { pageId: "register.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url, messagesPerField, register, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
     const { msg, msgStr } = i18n;
 
-    const { cx } = useCssAndCx();
-
     return (
         <Template
             {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
             headerNode={msg("registerTitle")}
             formNode={
-                <form id="kc-register-form" className={cx(kcProps.kcFormClass)} action={url.registrationAction} method="post">
-                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("firstName", kcProps.kcFormGroupErrorClass))}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="firstName" className={cx(kcProps.kcLabelClass)}>
+                <form id="kc-register-form" className={clsx(kcProps.kcFormClass)} action={url.registrationAction} method="post">
+                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("firstName", kcProps.kcFormGroupErrorClass))}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="firstName" className={clsx(kcProps.kcLabelClass)}>
                                 {msg("firstName")}
                             </label>
                         </div>
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
                             <input
                                 type="text"
                                 id="firstName"
-                                className={cx(kcProps.kcInputClass)}
+                                className={clsx(kcProps.kcInputClass)}
                                 name="firstName"
                                 defaultValue={register.formData.firstName ?? ""}
                             />
                         </div>
                     </div>
 
-                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("lastName", kcProps.kcFormGroupErrorClass))}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="lastName" className={cx(kcProps.kcLabelClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("lastName", kcProps.kcFormGroupErrorClass))}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="lastName" className={clsx(kcProps.kcLabelClass)}>
                                 {msg("lastName")}
                             </label>
                         </div>
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
                             <input
                                 type="text"
                                 id="lastName"
-                                className={cx(kcProps.kcInputClass)}
+                                className={clsx(kcProps.kcInputClass)}
                                 name="lastName"
                                 defaultValue={register.formData.lastName ?? ""}
                             />
                         </div>
                     </div>
 
-                    <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("email", kcProps.kcFormGroupErrorClass))}>
-                        <div className={cx(kcProps.kcLabelWrapperClass)}>
-                            <label htmlFor="email" className={cx(kcProps.kcLabelClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("email", kcProps.kcFormGroupErrorClass))}>
+                        <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                            <label htmlFor="email" className={clsx(kcProps.kcLabelClass)}>
                                 {msg("email")}
                             </label>
                         </div>
-                        <div className={cx(kcProps.kcInputWrapperClass)}>
+                        <div className={clsx(kcProps.kcInputWrapperClass)}>
                             <input
                                 type="text"
                                 id="email"
-                                className={cx(kcProps.kcInputClass)}
+                                className={clsx(kcProps.kcInputClass)}
                                 name="email"
                                 defaultValue={register.formData.email ?? ""}
                                 autoComplete="email"
@@ -80,17 +69,17 @@ const Register = memo((props: RegisterProps) => {
                         </div>
                     </div>
                     {!realm.registrationEmailAsUsername && (
-                        <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("username", kcProps.kcFormGroupErrorClass))}>
-                            <div className={cx(kcProps.kcLabelWrapperClass)}>
-                                <label htmlFor="username" className={cx(kcProps.kcLabelClass)}>
+                        <div className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("username", kcProps.kcFormGroupErrorClass))}>
+                            <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                                <label htmlFor="username" className={clsx(kcProps.kcLabelClass)}>
                                     {msg("username")}
                                 </label>
                             </div>
-                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
                                 <input
                                     type="text"
                                     id="username"
-                                    className={cx(kcProps.kcInputClass)}
+                                    className={clsx(kcProps.kcInputClass)}
                                     name="username"
                                     defaultValue={register.formData.username ?? ""}
                                     autoComplete="username"
@@ -100,17 +89,19 @@ const Register = memo((props: RegisterProps) => {
                     )}
                     {passwordRequired && (
                         <>
-                            <div className={cx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password", kcProps.kcFormGroupErrorClass))}>
-                                <div className={cx(kcProps.kcLabelWrapperClass)}>
-                                    <label htmlFor="password" className={cx(kcProps.kcLabelClass)}>
+                            <div
+                                className={clsx(kcProps.kcFormGroupClass, messagesPerField.printIfExists("password", kcProps.kcFormGroupErrorClass))}
+                            >
+                                <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                                    <label htmlFor="password" className={clsx(kcProps.kcLabelClass)}>
                                         {msg("password")}
                                     </label>
                                 </div>
-                                <div className={cx(kcProps.kcInputWrapperClass)}>
+                                <div className={clsx(kcProps.kcInputWrapperClass)}>
                                     <input
                                         type="password"
                                         id="password"
-                                        className={cx(kcProps.kcInputClass)}
+                                        className={clsx(kcProps.kcInputClass)}
                                         name="password"
                                         autoComplete="new-password"
                                     />
@@ -118,41 +109,41 @@ const Register = memo((props: RegisterProps) => {
                             </div>
 
                             <div
-                                className={cx(
+                                className={clsx(
                                     kcProps.kcFormGroupClass,
                                     messagesPerField.printIfExists("password-confirm", kcProps.kcFormGroupErrorClass)
                                 )}
                             >
-                                <div className={cx(kcProps.kcLabelWrapperClass)}>
-                                    <label htmlFor="password-confirm" className={cx(kcProps.kcLabelClass)}>
+                                <div className={clsx(kcProps.kcLabelWrapperClass)}>
+                                    <label htmlFor="password-confirm" className={clsx(kcProps.kcLabelClass)}>
                                         {msg("passwordConfirm")}
                                     </label>
                                 </div>
-                                <div className={cx(kcProps.kcInputWrapperClass)}>
-                                    <input type="password" id="password-confirm" className={cx(kcProps.kcInputClass)} name="password-confirm" />
+                                <div className={clsx(kcProps.kcInputWrapperClass)}>
+                                    <input type="password" id="password-confirm" className={clsx(kcProps.kcInputClass)} name="password-confirm" />
                                 </div>
                             </div>
                         </>
                     )}
                     {recaptchaRequired && (
                         <div className="form-group">
-                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
                                 <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div>
                             </div>
                         </div>
                     )}
-                    <div className={cx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
-                            <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
                                 <span>
                                     <a href={url.loginUrl}>{msg("backToLogin")}</a>
                                 </span>
                             </div>
                         </div>
 
-                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
                             <input
-                                className={cx(
+                                className={clsx(
                                     kcProps.kcButtonClass,
                                     kcProps.kcButtonPrimaryClass,
                                     kcProps.kcButtonBlockClass,
@@ -167,6 +158,4 @@ const Register = memo((props: RegisterProps) => {
             }
         />
     );
-});
-
-export default Register;
+}

src/lib/pages/RegisterUserProfile.tsx

@@ -1,36 +1,17 @@
-import React, { useMemo, memo, useState } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React, { useState } from "react";
+import { clsx } from "../tools/clsx";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type RegisterUserProfileProps = KcProps & {
-    kcContext: KcContextBase.RegisterUserProfile;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const RegisterUserProfile = memo((props: RegisterUserProfileProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps_ } = props;
+export default function RegisterUserProfile(props: PageProps<Extract<KcContextBase, { pageId: "register-user-profile.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
 
     const { msg, msgStr } = i18n;
 
-    const { cx, css } = useCssAndCx();
-
-    const kcProps = useMemo(
-        () => ({
-            ...kcProps_,
-            "kcFormGroupClass": cx(kcProps_.kcFormGroupClass, css({ "marginBottom": 20 }))
-        }),
-        [cx, css]
-    );
-
     const [isFomSubmittable, setIsFomSubmittable] = useState(false);
 
     return (
@@ -40,27 +21,27 @@ const RegisterUserProfile = memo((props: RegisterUserProfileProps) => {
             displayRequiredFields={true}
             headerNode={msg("registerTitle")}
             formNode={
-                <form id="kc-register-form" className={cx(kcProps.kcFormClass)} action={url.registrationAction} method="post">
+                <form id="kc-register-form" className={clsx(kcProps.kcFormClass)} action={url.registrationAction} method="post">
                     <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
                     {recaptchaRequired && (
                         <div className="form-group">
-                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                            <div className={clsx(kcProps.kcInputWrapperClass)}>
                                 <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
                             </div>
                         </div>
                     )}
-                    <div className={cx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
-                            <div className={cx(kcProps.kcFormOptionsWrapperClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass)} style={{ "marginBottom": 30 }}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)}>
                                 <span>
                                     <a href={url.loginUrl}>{msg("backToLogin")}</a>
                                 </span>
                             </div>
                         </div>
 
-                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
                             <input
-                                className={cx(
+                                className={clsx(
                                     kcProps.kcButtonClass,
                                     kcProps.kcButtonPrimaryClass,
                                     kcProps.kcButtonBlockClass,
@@ -76,6 +57,4 @@ const RegisterUserProfile = memo((props: RegisterUserProfileProps) => {
             }
         />
     );
-});
-
-export default RegisterUserProfile;
+}

src/lib/pages/Terms.tsx

@@ -1,19 +1,67 @@
-import React, { useEffect, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
+import React, { useEffect } from "react";
+import { memoize } from "../tools/memoize";
+import { clsx } from "../tools/clsx";
 import { Evt } from "evt";
 import { useRerenderOnStateChange } from "evt/hooks";
 import { assert } from "tsafe/assert";
 import { fallbackLanguageTag } from "../i18n";
-import type { I18n } from "../i18n";
-import memoize from "memoizee";
-import { useConst } from "powerhooks/useConst";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import { useConst } from "../tools/useConst";
+import { useConstCallback } from "../tools/useConstCallback";
 import { Markdown } from "../tools/Markdown";
 import type { Extends } from "tsafe";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
+
+export default function Terms(props: PageProps<Extract<KcContextBase, { pageId: "terms.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
+
+    const { msg, msgStr } = i18n;
+
+    useRerenderOnStateChange(evtTermMarkdown);
+
+    const { url } = kcContext;
+
+    if (evtTermMarkdown.state === undefined) {
+        return null;
+    }
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            displayMessage={false}
+            headerNode={msg("termsTitle")}
+            formNode={
+                <>
+                    <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
+                    <form className="form-actions" action={url.loginAction} method="POST">
+                        <input
+                            className={clsx(
+                                kcProps.kcButtonClass,
+                                kcProps.kcButtonClass,
+                                kcProps.kcButtonClass,
+                                kcProps.kcButtonPrimaryClass,
+                                kcProps.kcButtonLargeClass
+                            )}
+                            name="accept"
+                            id="kc-accept"
+                            type="submit"
+                            value={msgStr("doAccept")}
+                        />
+                        <input
+                            className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
+                            name="cancel"
+                            id="kc-decline"
+                            type="submit"
+                            value={msgStr("doDecline")}
+                        />
+                    </form>
+                    <div className="clearfix" />
+                </>
+            }
+        />
+    );
+}
 
 export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
 
@@ -39,7 +87,7 @@ export function useDownloadTerms(params: {
         const downloadTermMarkdownConst = useConstCallback(downloadTermMarkdown);
 
         const downloadTermMarkdownMemoized = useConst(() =>
-            memoize((currentLanguageTag: string) => downloadTermMarkdownConst({ currentLanguageTag }), { "promise": true })
+            memoize((currentLanguageTag: string) => downloadTermMarkdownConst({ currentLanguageTag }))
         );
 
         return { downloadTermMarkdownMemoized };
@@ -55,64 +103,3 @@ export function useDownloadTerms(params: {
         );
     }, []);
 }
-
-export type TermsProps = KcProps & {
-    kcContext: KcContextBase.Terms;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Terms = memo((props: TermsProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
-
-    const { msg, msgStr } = i18n;
-
-    useRerenderOnStateChange(evtTermMarkdown);
-
-    const { cx } = useCssAndCx();
-
-    const { url } = kcContext;
-
-    if (evtTermMarkdown.state === undefined) {
-        return null;
-    }
-
-    return (
-        <Template
-            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
-            displayMessage={false}
-            headerNode={msg("termsTitle")}
-            formNode={
-                <>
-                    <div id="kc-terms-text">{evtTermMarkdown.state && <Markdown>{evtTermMarkdown.state}</Markdown>}</div>
-                    <form className="form-actions" action={url.loginAction} method="POST">
-                        <input
-                            className={cx(
-                                kcProps.kcButtonClass,
-                                kcProps.kcButtonClass,
-                                kcProps.kcButtonClass,
-                                kcProps.kcButtonPrimaryClass,
-                                kcProps.kcButtonLargeClass
-                            )}
-                            name="accept"
-                            id="kc-accept"
-                            type="submit"
-                            value={msgStr("doAccept")}
-                        />
-                        <input
-                            className={cx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
-                            name="cancel"
-                            id="kc-decline"
-                            type="submit"
-                            value={msgStr("doDecline")}
-                        />
-                    </form>
-                    <div className="clearfix" />
-                </>
-            }
-        />
-    );
-});
-
-export default Terms;

src/lib/pages/UpdateUserProfile.tsx

@@ -1,23 +1,12 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n } from "../i18n";
+import React, { useState } from "react";
+import { clsx } from "../tools/clsx";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type UpdateUserProfileProps = KcProps & {
-    kcContext: KcContextBase.UpdateUserProfile;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const UpdateUserProfile = memo((props: UpdateUserProfileProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
-
-    const { cx } = useCssAndCx();
+export default function UpdateUserProfile(props: PageProps<Extract<KcContextBase, { pageId: "update-user-profile.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { msg, msgStr } = i18n;
 
@@ -30,24 +19,24 @@ const UpdateUserProfile = memo((props: UpdateUserProfileProps) => {
             {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
             headerNode={msg("loginProfileTitle")}
             formNode={
-                <form id="kc-update-profile-form" className={cx(kcProps.kcFormClass)} action={url.loginAction} method="post">
+                <form id="kc-update-profile-form" className={clsx(kcProps.kcFormClass)} action={url.loginAction} method="post">
                     <UserProfileFormFields kcContext={kcContext} onIsFormSubmittableValueChange={setIsFomSubmittable} i18n={i18n} {...kcProps} />
 
-                    <div className={cx(kcProps.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(kcProps.kcFormOptionsClass)}>
-                            <div className={cx(kcProps.kcFormOptionsWrapperClass)}></div>
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={clsx(kcProps.kcFormOptionsClass)}>
+                            <div className={clsx(kcProps.kcFormOptionsWrapperClass)}></div>
                         </div>
 
-                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
                             {isAppInitiatedAction ? (
                                 <>
                                     <input
-                                        className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
+                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
                                         type="submit"
                                         value={msgStr("doSubmit")}
                                     />
                                     <button
-                                        className={cx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
+                                        className={clsx(kcProps.kcButtonClass, kcProps.kcButtonDefaultClass, kcProps.kcButtonLargeClass)}
                                         type="submit"
                                         name="cancel-aia"
                                         value="true"
@@ -58,7 +47,7 @@ const UpdateUserProfile = memo((props: UpdateUserProfileProps) => {
                                 </>
                             ) : (
                                 <input
-                                    className={cx(
+                                    className={clsx(
                                         kcProps.kcButtonClass,
                                         kcProps.kcButtonPrimaryClass,
                                         kcProps.kcButtonBlockClass,
@@ -75,6 +64,4 @@ const UpdateUserProfile = memo((props: UpdateUserProfileProps) => {
             }
         />
     );
-});
-
-export default UpdateUserProfile;
+}

src/lib/pages/WebauthnAuthenticate.tsx

@@ -1,22 +1,14 @@
-import React, { useRef, useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
-import { useCssAndCx } from "../tools/useCssAndCx";
-import type { I18n, MessageKeyBase } from "../i18n";
+import React, { useRef, useState } from "react";
+import { clsx } from "../tools/clsx";
+import type { MessageKeyBase } from "../i18n";
 import { base64url } from "rfc4648";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import { useConstCallback } from "../tools/useConstCallback";
+import type { PageProps } from "../KcProps";
+import type { KcContextBase } from "../getKcContext";
+import type { I18nBase } from "../i18n";
 
-export type WebauthnAuthenticateProps = KcProps & {
-    kcContext: KcContextBase.WebauthnAuthenticate;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function WebauthnAuthenticate(props: PageProps<Extract<KcContextBase, { pageId: "webauthn-authenticate.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url } = kcContext;
 
@@ -26,8 +18,6 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
     const createTimeout = Number(kcContext.createTimeout);
     const isUserIdentified = kcContext.isUserIdentified == "true";
 
-    const { cx } = useCssAndCx();
-
     const webAuthnAuthenticate = useConstCallback(async () => {
         if (!isUserIdentified) {
             return;
@@ -102,7 +92,7 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
             {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
             headerNode={msg("webauthn-login-title")}
             formNode={
-                <div id="kc-form-webauthn" className={cx(kcProps.kcFormClass)}>
+                <div id="kc-form-webauthn" className={clsx(kcProps.kcFormClass)}>
                     <form id="webauth" action={url.loginAction} ref={webAuthForm} method="post">
                         <input type="hidden" id="clientDataJSON" name="clientDataJSON" value={clientDataJSON} />
                         <input type="hidden" id="authenticatorData" name="authenticatorData" value={authenticatorData} />
@@ -111,10 +101,10 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
                         <input type="hidden" id="userHandle" name="userHandle" value={userHandle} />
                         <input type="hidden" id="error" name="error" value={error} />
                     </form>
-                    <div className={cx(kcProps.kcFormGroupClass)}>
+                    <div className={clsx(kcProps.kcFormGroupClass)}>
                         {authenticators &&
                             (() => (
-                                <form id="authn_select" className={cx(kcProps.kcFormClass)}>
+                                <form id="authn_select" className={clsx(kcProps.kcFormClass)}>
                                     {authenticators.authenticators.map(authenticator => (
                                         <input
                                             type="hidden"
@@ -130,23 +120,23 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
                             (() => (
                                 <>
                                     {authenticators.authenticators.length > 1 && (
-                                        <p className={cx(kcProps.kcSelectAuthListItemTitle)}>{msg("webauthn-available-authenticators")}</p>
+                                        <p className={clsx(kcProps.kcSelectAuthListItemTitle)}>{msg("webauthn-available-authenticators")}</p>
                                     )}
-                                    <div className={cx(kcProps.kcFormClass)}>
+                                    <div className={clsx(kcProps.kcFormClass)}>
                                         {authenticators.authenticators.map(authenticator => (
-                                            <div id="kc-webauthn-authenticator" className={cx(kcProps.kcSelectAuthListItemClass)}>
-                                                <div className={cx(kcProps.kcSelectAuthListItemIconClass)}>
+                                            <div id="kc-webauthn-authenticator" className={clsx(kcProps.kcSelectAuthListItemClass)}>
+                                                <div className={clsx(kcProps.kcSelectAuthListItemIconClass)}>
                                                     <i
-                                                        className={cx(
+                                                        className={clsx(
                                                             kcProps[authenticator.transports.iconClass] ?? kcProps.kcWebAuthnDefaultIcon,
                                                             kcProps.kcSelectAuthListItemIconPropertyClass
                                                         )}
                                                     />
                                                 </div>
-                                                <div className={cx(kcProps.kcSelectAuthListItemBodyClass)}>
+                                                <div className={clsx(kcProps.kcSelectAuthListItemBodyClass)}>
                                                     <div
                                                         id="kc-webauthn-authenticator-label"
-                                                        className={cx(kcProps.kcSelectAuthListItemHeadingClass)}
+                                                        className={clsx(kcProps.kcSelectAuthListItemHeadingClass)}
                                                     >
                                                         {authenticator.label}
                                                     </div>
@@ -154,7 +144,7 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
                                                     {authenticator.transports && authenticator.transports.displayNameProperties.length && (
                                                         <div
                                                             id="kc-webauthn-authenticator-transport"
-                                                            className={cx(kcProps.kcSelectAuthListItemDescriptionClass)}
+                                                            className={clsx(kcProps.kcSelectAuthListItemDescriptionClass)}
                                                         >
                                                             {authenticator.transports.displayNameProperties.map(
                                                                 (transport: MessageKeyBase, index: number) => (
@@ -169,25 +159,25 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
                                                         </div>
                                                     )}
 
-                                                    <div className={cx(kcProps.kcSelectAuthListItemDescriptionClass)}>
+                                                    <div className={clsx(kcProps.kcSelectAuthListItemDescriptionClass)}>
                                                         <span id="kc-webauthn-authenticator-created-label">{msg("webauthn-createdAt-label")}</span>
                                                         <span id="kc-webauthn-authenticator-created">{authenticator.createdAt}</span>
                                                     </div>
                                                 </div>
-                                                <div className={cx(kcProps.kcSelectAuthListItemFillClass)} />
+                                                <div className={clsx(kcProps.kcSelectAuthListItemFillClass)} />
                                             </div>
                                         ))}
                                     </div>
                                 </>
                             ))()}
-                        <div id="kc-form-buttons" className={cx(kcProps.kcFormButtonsClass)}>
+                        <div id="kc-form-buttons" className={clsx(kcProps.kcFormButtonsClass)}>
                             <input
                                 id="authenticateWebAuthnButton"
                                 type="button"
                                 onClick={webAuthnAuthenticate}
                                 autoFocus={true}
                                 value={msgStr("webauthn-doAuthenticate")}
-                                className={cx(
+                                className={clsx(
                                     kcProps.kcButtonClass,
                                     kcProps.kcButtonPrimaryClass,
                                     kcProps.kcButtonBlockClass,
@@ -200,6 +190,4 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
             }
         />
     );
-});
-
-export default WebauthnAuthenticate;
+}

src/lib/pages/shared/UserProfileCommons.tsx

@@ -0,0 +1,659 @@
+import React, { useEffect, Fragment } from "react";
+import type { KcProps } from "../../KcProps";
+import { clsx } from "../../tools/clsx";
+import type { I18nBase } from "../../i18n";
+import type { Attribute } from "../../getKcContext";
+
+// If you are copy pasting this code in your theme project
+// you can delete all the following import and replace them by
+// import { useFormValidation } from "keycloakify/lib/pages/shared/UserProfileCommons";
+// you can also delete the useFormValidation hooks and useGetErrors hooks, they shouldn't need
+// to be modified.
+import "../../tools/Array.prototype.every";
+import { useMemo, useReducer } from "react";
+import type { KcContextBase, Validators } from "../../getKcContext";
+import { useConstCallback } from "../../tools/useConstCallback";
+import { emailRegexp } from "../../tools/emailRegExp";
+import type { MessageKeyBase } from "../../i18n";
+import { id } from "tsafe/id";
+
+export type UserProfileFormFieldsProps = {
+    kcContext: Parameters<typeof useFormValidation>[0]["kcContext"];
+    i18n: I18nBase;
+} & KcProps &
+    Partial<Record<"BeforeField" | "AfterField", (props: { attribute: Attribute }) => JSX.Element | null>> & {
+        onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    };
+
+export function UserProfileFormFields({
+    kcContext,
+    onIsFormSubmittableValueChange,
+    i18n,
+    BeforeField,
+    AfterField,
+    ...props
+}: UserProfileFormFieldsProps) {
+    const { advancedMsg } = i18n;
+
+    const {
+        formValidationState: { fieldStateByAttributeName, isFormSubmittable },
+        formValidationDispatch,
+        attributesWithPassword
+    } = useFormValidation({
+        kcContext,
+        i18n
+    });
+
+    useEffect(() => {
+        onIsFormSubmittableValueChange(isFormSubmittable);
+    }, [isFormSubmittable]);
+
+    let currentGroup = "";
+
+    return (
+        <>
+            {attributesWithPassword.map((attribute, i) => {
+                const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
+
+                const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
+
+                const formGroupClassName = clsx(props.kcFormGroupClass, displayableErrors.length !== 0 && props.kcFormGroupErrorClass);
+
+                return (
+                    <Fragment key={i}>
+                        {group !== currentGroup && (currentGroup = group) !== "" && (
+                            <div className={formGroupClassName}>
+                                <div className={clsx(props.kcContentWrapperClass)}>
+                                    <label id={`header-${group}`} className={clsx(props.kcFormGroupHeader)}>
+                                        {advancedMsg(groupDisplayHeader) || currentGroup}
+                                    </label>
+                                </div>
+                                {groupDisplayDescription !== "" && (
+                                    <div className={clsx(props.kcLabelWrapperClass)}>
+                                        <label id={`description-${group}`} className={`${clsx(props.kcLabelClass)}`}>
+                                            {advancedMsg(groupDisplayDescription)}
+                                        </label>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                        {BeforeField && <BeforeField attribute={attribute} />}
+
+                        <div className={formGroupClassName}>
+                            <div className={clsx(props.kcLabelWrapperClass)}>
+                                <label htmlFor={attribute.name} className={clsx(props.kcLabelClass)}>
+                                    {advancedMsg(attribute.displayName ?? "")}
+                                </label>
+                                {attribute.required && <>*</>}
+                            </div>
+                            <div className={clsx(props.kcInputWrapperClass)}>
+                                {(() => {
+                                    const { options } = attribute.validators;
+
+                                    if (options !== undefined) {
+                                        return (
+                                            <select
+                                                id={attribute.name}
+                                                name={attribute.name}
+                                                onChange={event =>
+                                                    formValidationDispatch({
+                                                        "action": "update value",
+                                                        "name": attribute.name,
+                                                        "newValue": event.target.value
+                                                    })
+                                                }
+                                                onBlur={() =>
+                                                    formValidationDispatch({
+                                                        "action": "focus lost",
+                                                        "name": attribute.name
+                                                    })
+                                                }
+                                                value={value}
+                                            >
+                                                {options.options.map(option => (
+                                                    <option key={option} value={option}>
+                                                        {option}
+                                                    </option>
+                                                ))}
+                                            </select>
+                                        );
+                                    }
+
+                                    return (
+                                        <input
+                                            type={(() => {
+                                                switch (attribute.name) {
+                                                    case "password-confirm":
+                                                    case "password":
+                                                        return "password";
+                                                    default:
+                                                        return "text";
+                                                }
+                                            })()}
+                                            id={attribute.name}
+                                            name={attribute.name}
+                                            value={value}
+                                            onChange={event =>
+                                                formValidationDispatch({
+                                                    "action": "update value",
+                                                    "name": attribute.name,
+                                                    "newValue": event.target.value
+                                                })
+                                            }
+                                            onBlur={() =>
+                                                formValidationDispatch({
+                                                    "action": "focus lost",
+                                                    "name": attribute.name
+                                                })
+                                            }
+                                            className={clsx(props.kcInputClass)}
+                                            aria-invalid={displayableErrors.length !== 0}
+                                            disabled={attribute.readOnly}
+                                            autoComplete={attribute.autocomplete}
+                                        />
+                                    );
+                                })()}
+                                {displayableErrors.length !== 0 &&
+                                    (() => {
+                                        const divId = `input-error-${attribute.name}`;
+
+                                        return (
+                                            <>
+                                                <style>{`#${divId} > span: { display: block; }`}</style>
+                                                <span
+                                                    id={divId}
+                                                    className={clsx(props.kcInputErrorMessageClass)}
+                                                    style={{
+                                                        "position": displayableErrors.length === 1 ? "absolute" : undefined
+                                                    }}
+                                                    aria-live="polite"
+                                                >
+                                                    {displayableErrors.map(({ errorMessage }) => errorMessage)}
+                                                </span>
+                                            </>
+                                        );
+                                    })()}
+                            </div>
+                        </div>
+                        {AfterField && <AfterField attribute={attribute} />}
+                    </Fragment>
+                );
+            })}
+        </>
+    );
+}
+
+/**
+ * NOTE: The attributesWithPassword returned is actually augmented with
+ * artificial password related attributes only if kcContext.passwordRequired === true
+ */
+export function useFormValidation(params: {
+    kcContext: {
+        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
+        profile: {
+            attributes: Attribute[];
+        };
+        passwordRequired?: boolean;
+        realm: { registrationEmailAsUsername: boolean };
+    };
+    /** NOTE: Try to avoid passing a new ref every render for better performances. */
+    passwordValidators?: Validators;
+    i18n: I18nBase;
+}) {
+    const {
+        kcContext,
+        passwordValidators = {
+            "length": {
+                "ignore.empty.value": true,
+                "min": "4"
+            }
+        },
+        i18n
+    } = params;
+
+    const attributesWithPassword = useMemo(
+        () =>
+            !kcContext.passwordRequired
+                ? kcContext.profile.attributes
+                : (() => {
+                      const name = kcContext.realm.registrationEmailAsUsername ? "email" : "username";
+
+                      return kcContext.profile.attributes.reduce<Attribute[]>(
+                          (prev, curr) => [
+                              ...prev,
+                              ...(curr.name !== name
+                                  ? [curr]
+                                  : [
+                                        curr,
+                                        id<Attribute>({
+                                            "name": "password",
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${password}"),
+                                            "required": true,
+                                            "readOnly": false,
+                                            "validators": passwordValidators,
+                                            "annotations": {},
+                                            "groupAnnotations": {},
+                                            "autocomplete": "new-password"
+                                        }),
+                                        id<Attribute>({
+                                            "name": "password-confirm",
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${passwordConfirm}"),
+                                            "required": true,
+                                            "readOnly": false,
+                                            "validators": {
+                                                "_compareToOther": {
+                                                    "name": "password",
+                                                    "ignore.empty.value": true,
+                                                    "shouldBe": "equal",
+                                                    "error-message": id<`\${${MessageKeyBase}}`>("${invalidPasswordConfirmMessage}")
+                                                }
+                                            },
+                                            "annotations": {},
+                                            "groupAnnotations": {},
+                                            "autocomplete": "new-password"
+                                        })
+                                    ])
+                          ],
+                          []
+                      );
+                  })(),
+        [kcContext, passwordValidators]
+    );
+
+    const { getErrors } = useGetErrors({
+        "kcContext": {
+            "messagesPerField": kcContext.messagesPerField,
+            "profile": {
+                "attributes": attributesWithPassword
+            }
+        },
+        i18n
+    });
+
+    const initialInternalState = useMemo(
+        () =>
+            Object.fromEntries(
+                attributesWithPassword
+                    .map(attribute => ({
+                        attribute,
+                        "errors": getErrors({
+                            "name": attribute.name,
+                            "fieldValueByAttributeName": Object.fromEntries(
+                                attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }])
+                            )
+                        })
+                    }))
+                    .map(({ attribute, errors }) => [
+                        attribute.name,
+                        {
+                            "value": attribute.value ?? "",
+                            errors,
+                            "doDisplayPotentialErrorMessages": errors.length !== 0
+                        }
+                    ])
+            ),
+        [attributesWithPassword]
+    );
+
+    type InternalState = typeof initialInternalState;
+
+    const [formValidationInternalState, formValidationDispatch] = useReducer(
+        (
+            state: InternalState,
+            params:
+                | {
+                      action: "update value";
+                      name: string;
+                      newValue: string;
+                  }
+                | {
+                      action: "focus lost";
+                      name: string;
+                  }
+        ): InternalState => ({
+            ...state,
+            [params.name]: {
+                ...state[params.name],
+                ...(() => {
+                    switch (params.action) {
+                        case "focus lost":
+                            return { "doDisplayPotentialErrorMessages": true };
+                        case "update value":
+                            return {
+                                "value": params.newValue,
+                                "errors": getErrors({
+                                    "name": params.name,
+                                    "fieldValueByAttributeName": {
+                                        ...state,
+                                        [params.name]: { "value": params.newValue }
+                                    }
+                                })
+                            };
+                    }
+                })()
+            }
+        }),
+        initialInternalState
+    );
+
+    const formValidationState = useMemo(
+        () => ({
+            "fieldStateByAttributeName": Object.fromEntries(
+                Object.entries(formValidationInternalState).map(([name, { value, errors, doDisplayPotentialErrorMessages }]) => [
+                    name,
+                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] }
+                ])
+            ),
+            "isFormSubmittable": Object.entries(formValidationInternalState).every(
+                ([name, { value, errors }]) =>
+                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required)
+            )
+        }),
+        [formValidationInternalState, attributesWithPassword]
+    );
+
+    return {
+        formValidationState,
+        formValidationDispatch,
+        attributesWithPassword
+    };
+}
+
+/** Expect to be used in a component wrapped within a <I18nProvider> */
+function useGetErrors(params: {
+    kcContext: {
+        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
+        profile: {
+            attributes: { name: string; value?: string; validators: Validators }[];
+        };
+    };
+    i18n: I18nBase;
+}) {
+    const { kcContext, i18n } = params;
+
+    const {
+        messagesPerField,
+        profile: { attributes }
+    } = kcContext;
+
+    const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
+
+    const getErrors = useConstCallback((params: { name: string; fieldValueByAttributeName: Record<string, { value: string }> }) => {
+        const { name, fieldValueByAttributeName } = params;
+
+        const { value } = fieldValueByAttributeName[name];
+
+        const { value: defaultValue, validators } = attributes.find(attribute => attribute.name === name)!;
+
+        block: {
+            if (defaultValue !== value) {
+                break block;
+            }
+
+            let doesErrorExist: boolean;
+
+            try {
+                doesErrorExist = messagesPerField.existsError(name);
+            } catch {
+                break block;
+            }
+
+            if (!doesErrorExist) {
+                break block;
+            }
+
+            const errorMessageStr = messagesPerField.get(name);
+
+            return [
+                {
+                    "validatorName": undefined,
+                    errorMessageStr,
+                    "errorMessage": <span key={0}>{errorMessageStr}</span>
+                }
+            ];
+        }
+
+        const errors: {
+            errorMessage: JSX.Element;
+            errorMessageStr: string;
+            validatorName: keyof Validators | undefined;
+        }[] = [];
+
+        scope: {
+            const validatorName = "length";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, max, min } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            if (max !== undefined && value.length > parseInt(max)) {
+                const msgArgs = ["error-invalid-length-too-long", max] as const;
+
+                errors.push({
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs),
+                    validatorName
+                });
+            }
+
+            if (min !== undefined && value.length < parseInt(min)) {
+                const msgArgs = ["error-invalid-length-too-short", min] as const;
+
+                errors.push({
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs),
+                    validatorName
+                });
+            }
+        }
+
+        scope: {
+            const validatorName = "_compareToOther";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, name: otherName, shouldBe, "error-message": errorMessageKey } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            const { value: otherValue } = fieldValueByAttributeName[otherName];
+
+            const isValid = (() => {
+                switch (shouldBe) {
+                    case "different":
+                        return otherValue !== value;
+                    case "equal":
+                        return otherValue === value;
+                }
+            })();
+
+            if (isValid) {
+                break scope;
+            }
+
+            const msgArg = [
+                errorMessageKey ??
+                    id<MessageKeyBase>(
+                        (() => {
+                            switch (shouldBe) {
+                                case "equal":
+                                    return "shouldBeEqual";
+                                case "different":
+                                    return "shouldBeDifferent";
+                            }
+                        })()
+                    ),
+                otherName,
+                name,
+                shouldBe
+            ] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArg)}</Fragment>,
+                "errorMessageStr": advancedMsgStr(...msgArg)
+            });
+        }
+
+        scope: {
+            const validatorName = "pattern";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, pattern, "error-message": errorMessageKey } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            if (new RegExp(pattern).test(value)) {
+                break scope;
+            }
+
+            const msgArgs = [errorMessageKey ?? id<MessageKeyBase>("shouldMatchPattern"), pattern] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArgs)}</Fragment>,
+                "errorMessageStr": advancedMsgStr(...msgArgs)
+            });
+        }
+
+        scope: {
+            if ([...errors].reverse()[0]?.validatorName === "pattern") {
+                break scope;
+            }
+
+            const validatorName = "email";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            if (emailRegexp.test(value)) {
+                break scope;
+            }
+
+            const msgArgs = [id<MessageKeyBase>("invalidEmailMessage")] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                "errorMessageStr": msgStr(...msgArgs)
+            });
+        }
+
+        scope: {
+            const validatorName = "integer";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            const { "ignore.empty.value": ignoreEmptyValue = false, max, min } = validator;
+
+            if (ignoreEmptyValue && value === "") {
+                break scope;
+            }
+
+            const intValue = parseInt(value);
+
+            if (isNaN(intValue)) {
+                const msgArgs = ["mustBeAnInteger"] as const;
+
+                errors.push({
+                    validatorName,
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs)
+                });
+
+                break scope;
+            }
+
+            if (max !== undefined && intValue > parseInt(max)) {
+                const msgArgs = ["error-number-out-of-range-too-big", max] as const;
+
+                errors.push({
+                    validatorName,
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs)
+                });
+
+                break scope;
+            }
+
+            if (min !== undefined && intValue < parseInt(min)) {
+                const msgArgs = ["error-number-out-of-range-too-small", min] as const;
+
+                errors.push({
+                    validatorName,
+                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
+                    "errorMessageStr": msgStr(...msgArgs)
+                });
+
+                break scope;
+            }
+        }
+
+        scope: {
+            const validatorName = "options";
+
+            const validator = validators[validatorName];
+
+            if (validator === undefined) {
+                break scope;
+            }
+
+            if (value === "") {
+                break scope;
+            }
+
+            if (validator.options.indexOf(value) >= 0) {
+                break scope;
+            }
+
+            const msgArgs = [id<MessageKeyBase>("notAValidOption")] as const;
+
+            errors.push({
+                validatorName,
+                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArgs)}</Fragment>,
+                "errorMessageStr": advancedMsgStr(...msgArgs)
+            });
+        }
+
+        //TODO: Implement missing validators.
+
+        return errors;
+    });
+
+    return { getErrors };
+}

src/lib/tools/ReactComponent.ts

@@ -1,4 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-import type { FC, ComponentClass } from "react";
-
-export type ReactComponent<Props extends Record<string, unknown> = {}> = ((props: Props) => ReturnType<FC>) | ComponentClass<Props>;

src/lib/tools/SetOptional.ts

@@ -0,0 +1 @@
+export type SetOptional<T extends Record<string, unknown>, K extends keyof T> = Omit<T, K> & Partial<Record<K, T[K]>>;

src/lib/tools/clsx.ts

@@ -0,0 +1,44 @@
+import { assert } from "tsafe/assert";
+import { typeGuard } from "tsafe/typeGuard";
+
+export type CxArg = undefined | null | string | boolean | Partial<Record<string, boolean | null | undefined>> | readonly CxArg[];
+
+export const clsx = (...args: CxArg[]): string => {
+    const len = args.length;
+    let i = 0;
+    let cls = "";
+    for (; i < len; i++) {
+        const arg = args[i];
+        if (arg == null) continue;
+
+        let toAdd;
+        switch (typeof arg) {
+            case "boolean":
+                break;
+            case "object": {
+                if (Array.isArray(arg)) {
+                    toAdd = clsx(...arg);
+                } else {
+                    assert(!typeGuard<{ length: number }>(arg, false));
+
+                    toAdd = "";
+                    for (const k in arg) {
+                        if (arg[k as string] && k) {
+                            toAdd && (toAdd += " ");
+                            toAdd += k;
+                        }
+                    }
+                }
+                break;
+            }
+            default: {
+                toAdd = arg;
+            }
+        }
+        if (toAdd) {
+            cls && (cls += " ");
+            cls += toAdd;
+        }
+    }
+    return cls;
+};

src/lib/tools/deepAssign.ts

@@ -11,7 +11,7 @@ export function deepAssign(params: { target: Record<string, unknown>; source: Re
     Object.keys(source).forEach(key => {
         var dereferencedSource = source[key];
 
-        if (target[key] === undefined || !(dereferencedSource instanceof Object)) {
+        if (target[key] === undefined || dereferencedSource instanceof Function || !(dereferencedSource instanceof Object)) {
             Object.defineProperty(target, key, {
                 "enumerable": true,
                 "writable": true,

src/lib/tools/memoize.ts

@@ -0,0 +1,55 @@
+type SimpleType = number | string | boolean | null | undefined;
+type FuncWithSimpleParams<T extends SimpleType[], R> = (...args: T) => R;
+
+export function memoize<T extends SimpleType[], R>(
+    fn: FuncWithSimpleParams<T, R>,
+    options?: {
+        argsLength?: number;
+        max?: number;
+    }
+): FuncWithSimpleParams<T, R> {
+    const cache = new Map<string, ReturnType<FuncWithSimpleParams<T, R>>>();
+
+    const { argsLength = fn.length, max = Infinity } = options ?? {};
+
+    return ((...args: Parameters<FuncWithSimpleParams<T, R>>) => {
+        const key = JSON.stringify(
+            args
+                .slice(0, argsLength)
+                .map(v => {
+                    if (v === null) {
+                        return "null";
+                    }
+                    if (v === undefined) {
+                        return "undefined";
+                    }
+                    switch (typeof v) {
+                        case "number":
+                            return `number-${v}`;
+                        case "string":
+                            return `string-${v}`;
+                        case "boolean":
+                            return `boolean-${v ? "true" : "false"}`;
+                    }
+                })
+                .join("-sIs9sAslOdeWlEdIos3-")
+        );
+
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+
+        if (max === cache.size) {
+            for (const key of cache.keys()) {
+                cache.delete(key);
+                break;
+            }
+        }
+
+        const value = fn(...args);
+
+        cache.set(key, value);
+
+        return value;
+    }) as any;
+}

src/lib/tools/useCallbackFactory.ts

@@ -0,0 +1,45 @@
+import { useRef, useState } from "react";
+import { id } from "tsafe/id";
+import { memoize } from "./memoize";
+
+export type CallbackFactory<FactoryArgs extends unknown[], Args extends unknown[], R> = (...factoryArgs: FactoryArgs) => (...args: Args) => R;
+
+/**
+ * https://docs.powerhooks.dev/api-reference/usecallbackfactory
+ *
+ *  const callbackFactory= useCallbackFactory(
+ *      ([key]: [string], [params]: [{ foo: number; }]) => {
+ *          ...
+ *      },
+ *      []
+ *  );
+ *
+ * WARNING: Factory args should not be of variable length.
+ *
+ */
+export function useCallbackFactory<FactoryArgs extends (string | number | boolean)[], Args extends unknown[], R = void>(
+    callback: (...callbackArgs: [FactoryArgs, Args]) => R
+): CallbackFactory<FactoryArgs, Args, R> {
+    type Out = CallbackFactory<FactoryArgs, Args, R>;
+
+    const callbackRef = useRef<typeof callback>(callback);
+
+    callbackRef.current = callback;
+
+    const memoizedRef = useRef<Out | undefined>(undefined);
+
+    return useState(() =>
+        id<Out>((...factoryArgs) => {
+            if (memoizedRef.current === undefined) {
+                memoizedRef.current = memoize(
+                    (...factoryArgs: FactoryArgs) =>
+                        (...args: Args) =>
+                            callbackRef.current(factoryArgs, args),
+                    { "argsLength": factoryArgs.length }
+                );
+            }
+
+            return memoizedRef.current(...factoryArgs);
+        })
+    )[0];
+}

src/lib/tools/useConst.ts

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+/**
+ * Compute a value on first render and never again,
+ * Equivalent of const [x] = useState(()=> ...)
+ */
+export function useConst<T>(getValue: () => T): T {
+    const [value] = useState(getValue);
+    return value;
+}

src/lib/tools/useConstCallback.ts

@@ -0,0 +1,15 @@
+import { useRef, useState } from "react";
+import { Parameters } from "tsafe/Parameters";
+
+/** https://stackoverflow.com/questions/65890278/why-cant-usecallback-always-return-the-same-ref */
+export function useConstCallback<T extends ((...args: any[]) => unknown) | undefined | null>(callback: NonNullable<T>): T {
+    const callbackRef = useRef<typeof callback>(null as any);
+
+    callbackRef.current = callback;
+
+    return useState(
+        () =>
+            (...args: Parameters<T>) =>
+                callbackRef.current(...args)
+    )[0] as T;
+}

src/lib/tools/useCssAndCx.ts

@@ -1,11 +1,12 @@
-import { createMakeStyles } from "tss-react";
-
-const { useStyles } = createMakeStyles({
-    "useTheme": () => ({})
-});
+import { clsx as cx } from "./clsx";
 
+/**
+ * @deprecated: Use clsx instead.
+ * import { clsx } from "keycloakify/lib/tools/clsx";
+ * You can use clsx as cx.
+ * If you where using the css() function you can import
+ * it from @emotion/css: https://emotion.sh/docs/@emotion/css
+ */
 export function useCssAndCx() {
-    const { css, cx } = useStyles();
-
-    return { css, cx };
+    return { cx };
 }

src/lib/useFormValidationSlice.tsx

@@ -1,11 +1,185 @@
 import "./tools/Array.prototype.every";
 import React, { useMemo, useReducer, Fragment } from "react";
 import type { KcContextBase, Validators, Attribute } from "./getKcContext/KcContextBase";
-import type { I18n, MessageKeyBase } from "./i18n";
-import { useConstCallback } from "powerhooks/useConstCallback";
+import type { I18nBase, MessageKeyBase } from "./i18n";
+import { useConstCallback } from "./tools/useConstCallback";
 import { id } from "tsafe/id";
 import { emailRegexp } from "./tools/emailRegExp";
 
+/** @deprecated: Will be removed in the next major. Use this instead:
+ *  import { useFormValidation } from "keycloakify/lib/pages/shares/UserProfileCommons";
+ *
+ *  The API is the same only the returned value formValidationReducer have been renamed formValidationDispatch
+ *  (a it should have been named from the beginning 😬)
+ */
+export function useFormValidationSlice(params: {
+    kcContext: {
+        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
+        profile: {
+            attributes: Attribute[];
+        };
+        passwordRequired?: boolean;
+        realm: { registrationEmailAsUsername: boolean };
+    };
+    /** NOTE: Try to avoid passing a new ref every render for better performances. */
+    passwordValidators?: Validators;
+    i18n: I18nBase;
+}) {
+    const {
+        kcContext,
+        passwordValidators = {
+            "length": {
+                "ignore.empty.value": true,
+                "min": "4"
+            }
+        },
+        i18n
+    } = params;
+
+    const attributesWithPassword = useMemo(
+        () =>
+            !kcContext.passwordRequired
+                ? kcContext.profile.attributes
+                : (() => {
+                      const name = kcContext.realm.registrationEmailAsUsername ? "email" : "username";
+
+                      return kcContext.profile.attributes.reduce<Attribute[]>(
+                          (prev, curr) => [
+                              ...prev,
+                              ...(curr.name !== name
+                                  ? [curr]
+                                  : [
+                                        curr,
+                                        id<Attribute>({
+                                            "name": "password",
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${password}"),
+                                            "required": true,
+                                            "readOnly": false,
+                                            "validators": passwordValidators,
+                                            "annotations": {},
+                                            "groupAnnotations": {},
+                                            "autocomplete": "new-password"
+                                        }),
+                                        id<Attribute>({
+                                            "name": "password-confirm",
+                                            "displayName": id<`\${${MessageKeyBase}}`>("${passwordConfirm}"),
+                                            "required": true,
+                                            "readOnly": false,
+                                            "validators": {
+                                                "_compareToOther": {
+                                                    "name": "password",
+                                                    "ignore.empty.value": true,
+                                                    "shouldBe": "equal",
+                                                    "error-message": id<`\${${MessageKeyBase}}`>("${invalidPasswordConfirmMessage}")
+                                                }
+                                            },
+                                            "annotations": {},
+                                            "groupAnnotations": {},
+                                            "autocomplete": "new-password"
+                                        })
+                                    ])
+                          ],
+                          []
+                      );
+                  })(),
+        [kcContext, passwordValidators]
+    );
+
+    const { getErrors } = useGetErrors({
+        "kcContext": {
+            "messagesPerField": kcContext.messagesPerField,
+            "profile": {
+                "attributes": attributesWithPassword
+            }
+        },
+        i18n
+    });
+
+    const initialInternalState = useMemo(
+        () =>
+            Object.fromEntries(
+                attributesWithPassword
+                    .map(attribute => ({
+                        attribute,
+                        "errors": getErrors({
+                            "name": attribute.name,
+                            "fieldValueByAttributeName": Object.fromEntries(
+                                attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }])
+                            )
+                        })
+                    }))
+                    .map(({ attribute, errors }) => [
+                        attribute.name,
+                        {
+                            "value": attribute.value ?? "",
+                            errors,
+                            "doDisplayPotentialErrorMessages": errors.length !== 0
+                        }
+                    ])
+            ),
+        [attributesWithPassword]
+    );
+
+    type InternalState = typeof initialInternalState;
+
+    const [formValidationInternalState, formValidationReducer] = useReducer(
+        (
+            state: InternalState,
+            params:
+                | {
+                      action: "update value";
+                      name: string;
+                      newValue: string;
+                  }
+                | {
+                      action: "focus lost";
+                      name: string;
+                  }
+        ): InternalState => ({
+            ...state,
+            [params.name]: {
+                ...state[params.name],
+                ...(() => {
+                    switch (params.action) {
+                        case "focus lost":
+                            return { "doDisplayPotentialErrorMessages": true };
+                        case "update value":
+                            return {
+                                "value": params.newValue,
+                                "errors": getErrors({
+                                    "name": params.name,
+                                    "fieldValueByAttributeName": {
+                                        ...state,
+                                        [params.name]: { "value": params.newValue }
+                                    }
+                                })
+                            };
+                    }
+                })()
+            }
+        }),
+        initialInternalState
+    );
+
+    const formValidationState = useMemo(
+        () => ({
+            "fieldStateByAttributeName": Object.fromEntries(
+                Object.entries(formValidationInternalState).map(([name, { value, errors, doDisplayPotentialErrorMessages }]) => [
+                    name,
+                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] }
+                ])
+            ),
+            "isFormSubmittable": Object.entries(formValidationInternalState).every(
+                ([name, { value, errors }]) =>
+                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required)
+            )
+        }),
+        [formValidationInternalState, attributesWithPassword]
+    );
+
+    return { formValidationState, formValidationReducer, attributesWithPassword };
+}
+
 /** Expect to be used in a component wrapped within a <I18nProvider> */
 export function useGetErrors(params: {
     kcContext: {
@@ -14,7 +188,7 @@ export function useGetErrors(params: {
             attributes: { name: string; value?: string; validators: Validators }[];
         };
     };
-    i18n: I18n;
+    i18n: I18nBase;
 }) {
     const { kcContext, i18n } = params;
 
@@ -303,175 +477,3 @@ export function useGetErrors(params: {
 
     return { getErrors };
 }
-
-/**
- * NOTE: The attributesWithPassword returned is actually augmented with
- * artificial password related attributes only if kcContext.passwordRequired === true
- */
-export function useFormValidationSlice(params: {
-    kcContext: {
-        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
-        profile: {
-            attributes: Attribute[];
-        };
-        passwordRequired?: boolean;
-        realm: { registrationEmailAsUsername: boolean };
-    };
-    /** NOTE: Try to avoid passing a new ref every render for better performances. */
-    passwordValidators?: Validators;
-    i18n: I18n;
-}) {
-    const {
-        kcContext,
-        passwordValidators = {
-            "length": {
-                "ignore.empty.value": true,
-                "min": "4"
-            }
-        },
-        i18n
-    } = params;
-
-    const attributesWithPassword = useMemo(
-        () =>
-            !kcContext.passwordRequired
-                ? kcContext.profile.attributes
-                : (() => {
-                      const name = kcContext.realm.registrationEmailAsUsername ? "email" : "username";
-
-                      return kcContext.profile.attributes.reduce<Attribute[]>(
-                          (prev, curr) => [
-                              ...prev,
-                              ...(curr.name !== name
-                                  ? [curr]
-                                  : [
-                                        curr,
-                                        id<Attribute>({
-                                            "name": "password",
-                                            "displayName": id<`\${${MessageKeyBase}}`>("${password}"),
-                                            "required": true,
-                                            "readOnly": false,
-                                            "validators": passwordValidators,
-                                            "annotations": {},
-                                            "groupAnnotations": {},
-                                            "autocomplete": "new-password"
-                                        }),
-                                        id<Attribute>({
-                                            "name": "password-confirm",
-                                            "displayName": id<`\${${MessageKeyBase}}`>("${passwordConfirm}"),
-                                            "required": true,
-                                            "readOnly": false,
-                                            "validators": {
-                                                "_compareToOther": {
-                                                    "name": "password",
-                                                    "ignore.empty.value": true,
-                                                    "shouldBe": "equal",
-                                                    "error-message": id<`\${${MessageKeyBase}}`>("${invalidPasswordConfirmMessage}")
-                                                }
-                                            },
-                                            "annotations": {},
-                                            "groupAnnotations": {},
-                                            "autocomplete": "new-password"
-                                        })
-                                    ])
-                          ],
-                          []
-                      );
-                  })(),
-        [kcContext, passwordValidators]
-    );
-
-    const { getErrors } = useGetErrors({
-        "kcContext": {
-            "messagesPerField": kcContext.messagesPerField,
-            "profile": {
-                "attributes": attributesWithPassword
-            }
-        },
-        i18n
-    });
-
-    const initialInternalState = useMemo(
-        () =>
-            Object.fromEntries(
-                attributesWithPassword
-                    .map(attribute => ({
-                        attribute,
-                        "errors": getErrors({
-                            "name": attribute.name,
-                            "fieldValueByAttributeName": Object.fromEntries(
-                                attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }])
-                            )
-                        })
-                    }))
-                    .map(({ attribute, errors }) => [
-                        attribute.name,
-                        {
-                            "value": attribute.value ?? "",
-                            errors,
-                            "doDisplayPotentialErrorMessages": errors.length !== 0
-                        }
-                    ])
-            ),
-        [attributesWithPassword]
-    );
-
-    type InternalState = typeof initialInternalState;
-
-    const [formValidationInternalState, formValidationReducer] = useReducer(
-        (
-            state: InternalState,
-            params:
-                | {
-                      action: "update value";
-                      name: string;
-                      newValue: string;
-                  }
-                | {
-                      action: "focus lost";
-                      name: string;
-                  }
-        ): InternalState => ({
-            ...state,
-            [params.name]: {
-                ...state[params.name],
-                ...(() => {
-                    switch (params.action) {
-                        case "focus lost":
-                            return { "doDisplayPotentialErrorMessages": true };
-                        case "update value":
-                            return {
-                                "value": params.newValue,
-                                "errors": getErrors({
-                                    "name": params.name,
-                                    "fieldValueByAttributeName": {
-                                        ...state,
-                                        [params.name]: { "value": params.newValue }
-                                    }
-                                })
-                            };
-                    }
-                })()
-            }
-        }),
-        initialInternalState
-    );
-
-    const formValidationState = useMemo(
-        () => ({
-            "fieldStateByAttributeName": Object.fromEntries(
-                Object.entries(formValidationInternalState).map(([name, { value, errors, doDisplayPotentialErrorMessages }]) => [
-                    name,
-                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] }
-                ])
-            ),
-            "isFormSubmittable": Object.entries(formValidationInternalState).every(
-                ([name, { value, errors }]) =>
-                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required)
-            )
-        }),
-        [formValidationInternalState, attributesWithPassword]
-    );
-
-    return { formValidationState, formValidationReducer, attributesWithPassword };
-}

src/scripts/generate-i18n-messages.ts

@@ -1,12 +1,11 @@
 import "minimal-polyfills/Object.fromEntries";
 import * as fs from "fs";
 import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
-import { crawl } from "./tools/crawl";
-import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
-import { getProjectRoot } from "./tools/getProjectRoot";
-import { rm_rf, rm_r } from "./tools/rm";
-import { getCliOptions } from "./tools/cliOptions";
-import { getLogger } from "./tools/logger";
+import { crawl } from "../bin/tools/crawl";
+import { downloadBuiltinKeycloakTheme } from "../bin/download-builtin-keycloak-theme";
+import { getProjectRoot } from "../bin/tools/getProjectRoot";
+import { getCliOptions } from "../bin/tools/cliOptions";
+import { getLogger } from "../bin/tools/logger";
 
 //NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
 // update the version array for generating for newer version.
@@ -22,7 +21,7 @@ for (const keycloakVersion of ["11.0.3", "15.0.2", "18.0.1"]) {
 
     const tmpDirPath = pathJoin(getProjectRoot(), "tmp_xImOef9dOd44");
 
-    rm_rf(tmpDirPath);
+    fs.rmSync(tmpDirPath, { "recursive": true, "force": true });
 
     downloadBuiltinKeycloakTheme({
         keycloakVersion,
@@ -54,7 +53,7 @@ for (const keycloakVersion of ["11.0.3", "15.0.2", "18.0.1"]) {
         });
     }
 
-    rm_r(tmpDirPath);
+    fs.rmSync(tmpDirPath, { recursive: true, force: true });
 
     Object.keys(record).forEach(pageType => {
         const recordForPageType = record[pageType];

src/scripts/link-in-app.ts

@@ -0,0 +1,140 @@
+import { execSync } from "child_process";
+import { join as pathJoin, relative as pathRelative } from "path";
+import * as fs from "fs";
+
+const singletonDependencies: string[] = ["react", "@types/react"];
+
+const rootDirPath = pathJoin(__dirname, "..", "..");
+
+//NOTE: This is only required because of: https://github.com/garronej/ts-ci/blob/c0e207b9677523d4ec97fe672ddd72ccbb3c1cc4/README.md?plain=1#L54-L58
+fs.writeFileSync(
+    pathJoin(rootDirPath, "dist", "package.json"),
+    Buffer.from(
+        JSON.stringify(
+            (() => {
+                const packageJsonParsed = JSON.parse(fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8"));
+
+                return {
+                    ...packageJsonParsed,
+                    "main": packageJsonParsed["main"]?.replace(/^dist\//, ""),
+                    "types": packageJsonParsed["types"]?.replace(/^dist\//, ""),
+                    "module": packageJsonParsed["module"]?.replace(/^dist\//, ""),
+                    "exports": !("exports" in packageJsonParsed)
+                        ? undefined
+                        : Object.fromEntries(
+                              Object.entries(packageJsonParsed["exports"]).map(([key, value]) => [
+                                  key,
+                                  (value as string).replace(/^\.\/dist\//, "./")
+                              ])
+                          )
+                };
+            })(),
+            null,
+            2
+        ),
+        "utf8"
+    )
+);
+
+const commonThirdPartyDeps = (() => {
+    // For example [ "@emotion" ] it's more convenient than
+    // having to list every sub emotion packages (@emotion/css @emotion/utils ...)
+    // in singletonDependencies
+    const namespaceSingletonDependencies: string[] = [];
+
+    return [
+        ...namespaceSingletonDependencies
+            .map(namespaceModuleName =>
+                fs
+                    .readdirSync(pathJoin(rootDirPath, "node_modules", namespaceModuleName))
+                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
+            )
+            .reduce((prev, curr) => [...prev, ...curr], []),
+        ...singletonDependencies
+    ];
+})();
+
+const yarnGlobalDirPath = pathJoin(rootDirPath, ".yarn_home");
+
+fs.rmSync(yarnGlobalDirPath, { "recursive": true, "force": true });
+fs.mkdirSync(yarnGlobalDirPath);
+
+const execYarnLink = (params: { targetModuleName?: string; cwd: string }) => {
+    const { targetModuleName, cwd } = params;
+
+    const cmd = ["yarn", "link", ...(targetModuleName !== undefined ? [targetModuleName] : ["--no-bin-links"])].join(" ");
+
+    console.log(`$ cd ${pathRelative(rootDirPath, cwd) || "."} && ${cmd}`);
+
+    execSync(cmd, {
+        cwd,
+        "env": {
+            ...process.env,
+            "HOME": yarnGlobalDirPath
+        }
+    });
+};
+
+const testAppPaths = (() => {
+    const [, , ...testAppNames] = process.argv;
+
+    return testAppNames
+        .map(testAppName => {
+            const testAppPath = pathJoin(rootDirPath, "..", testAppName);
+
+            if (fs.existsSync(testAppPath)) {
+                return testAppPath;
+            }
+
+            console.warn(`Skipping ${testAppName} since it cant be found here: ${testAppPath}`);
+
+            return undefined;
+        })
+        .filter((path): path is string => path !== undefined);
+})();
+
+if (testAppPaths.length === 0) {
+    console.error("No test app to link into!");
+    process.exit(-1);
+}
+
+testAppPaths.forEach(testAppPath => execSync("yarn install", { "cwd": testAppPath }));
+
+console.log("=== Linking common dependencies ===");
+
+const total = commonThirdPartyDeps.length;
+let current = 0;
+
+commonThirdPartyDeps.forEach(commonThirdPartyDep => {
+    current++;
+
+    console.log(`${current}/${total} ${commonThirdPartyDep}`);
+
+    const localInstallPath = pathJoin(
+        ...[rootDirPath, "node_modules", ...(commonThirdPartyDep.startsWith("@") ? commonThirdPartyDep.split("/") : [commonThirdPartyDep])]
+    );
+
+    execYarnLink({ "cwd": localInstallPath });
+});
+
+commonThirdPartyDeps.forEach(commonThirdPartyDep =>
+    testAppPaths.forEach(testAppPath =>
+        execYarnLink({
+            "cwd": testAppPath,
+            "targetModuleName": commonThirdPartyDep
+        })
+    )
+);
+
+console.log("=== Linking in house dependencies ===");
+
+execYarnLink({ "cwd": pathJoin(rootDirPath, "dist") });
+
+testAppPaths.forEach(testAppPath =>
+    execYarnLink({
+        "cwd": testAppPath,
+        "targetModuleName": JSON.parse(fs.readFileSync(pathJoin(rootDirPath, "package.json")).toString("utf8"))["name"]
+    })
+);
+
+export {};