Merge branch 'main' of https://github.com/InseeFrLab/keycloakify

.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,15 @@
 
 # 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).

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "6.11.4",
+    "version": "6.12.7",
     "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"
     ],
@@ -61,7 +64,7 @@
         "@babel/core": "^7.0.0",
         "@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",
@@ -70,24 +73,21 @@
         "properties-parser": "^0.3.1",
         "react": "18.1.0",
         "rimraf": "^3.0.2",
-        "@emotion/react": "^11.10.4",
-        "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.13",
-        "memoizee": "^0.4.15",
+        "evt": "^2.4.15",
         "minimal-polyfills": "^2.2.2",
         "minimist": "^1.2.6",
         "path-browserify": "^1.0.1",
-        "powerhooks": "^0.22.1",
         "react-markdown": "^5.0.3",
         "rfc4648": "^1.5.2",
-        "scripting-tools": "^0.19.13",
-        "tsafe": "^1.4.2",
-        "tss-react": "4.4.1-rc.0",
+        "tsafe": "^1.4.3",
         "zod": "^3.17.10"
     }
 }

renovate.json

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

src/bin/keycloakify/BuildOptions.ts

@@ -7,7 +7,7 @@ import { typeGuard } from "tsafe/typeGuard";
 import { symToStr } from "tsafe/symToStr";
 
 const bundlers = ["mvn", "keycloakify", "none"] as const;
-type Bundler = typeof bundlers[number];
+type Bundler = (typeof bundlers)[number];
 type ParsedPackageJson = {
     name: string;
     version: string;
@@ -38,7 +38,7 @@ const zParsedPackageJson = z.object({
         .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;

src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -174,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/link_in_test_app.ts

@@ -1,128 +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\//, ""),
-                    "bin": Object.fromEntries(Object.entries<string>(packageJsonParsed["bin"]).map(([k, v]) => [k, v.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");
-
-fs.rmSync(yarnHomeDirPath, { "recursive": true, "force": true });
-fs.mkdirSync(yarnHomeDirPath);
-
-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/zip.ts

@@ -1,6 +1,7 @@
 import { Transform, TransformOptions } from "stream";
 import { createReadStream } from "fs";
 import { stat } from "fs/promises";
+import { Blob } from "buffer";
 
 import { deflateBuffer, deflateStream } from "./deflate";
 

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 { clsx } from "../tools/clsx";
-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,76 +20,27 @@ const Template = memo((props: TemplateProps) => {
         infoNode = null,
         kcContext,
         i18n,
-        doFetchDefaultThemeResources
+        doFetchDefaultThemeResources,
+        stylesCommon,
+        styles,
+        scripts,
+        kcHtmlClass
     } = props;
 
     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 = clsx(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;
     }
 
@@ -126,13 +58,15 @@ const Template = memo((props: TemplateProps) => {
                         <div id="kc-locale">
                             <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>
@@ -225,7 +159,15 @@ const Template = memo((props: TemplateProps) => {
                                 <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>
@@ -244,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,173 +0,0 @@
-import React, { memo, useEffect, Fragment } from "react";
-import type { KcProps } from "../KcProps";
-import type { Attribute } from "../../getKcContext/KcContextBase";
-import { clsx } from "../../tools/clsx";
-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 { 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 = 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={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={clsx(props.kcInputClass)}
-                                                aria-invalid={displayableErrors.length !== 0}
-                                                disabled={attribute.readOnly}
-                                                autoComplete={attribute.autocomplete}
-                                                onBlur={onBlurFactory(attribute.name)}
-                                            />
-                                        );
-                                    })()}
-                                    {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>
-                    );
-                })}
-            </>
-        );
-    }
-);

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,21 +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 React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
 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;
+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;
 
@@ -53,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,22 +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 React, { useState, type FormEventHandler } from "react";
 import { clsx } from "../tools/clsx";
-import { useConstCallback } from "powerhooks/useConstCallback";
-import type { FormEventHandler } from "react";
-import type { I18n } from "../i18n";
+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;
 
@@ -199,6 +189,4 @@ const Login = memo((props: LoginProps) => {
             }
         />
     );
-});
-
-export default Login;
+}

src/lib/pages/LoginConfigTotp.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 type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+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;
 
@@ -188,6 +179,4 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
             }
         />
     );
-});
-
-export default LoginConfigTotp;
+}

src/lib/pages/LoginIdpLinkConfirm.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 type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+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;
 
@@ -60,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,22 +1,13 @@
-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 { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+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;
 
@@ -96,7 +87,7 @@ const LoginOtp = memo((props: LoginOtpProps) => {
             }
         />
     );
-});
+}
 
 declare const $: any;
 
@@ -121,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,22 +1,13 @@
-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 React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import { useConstCallback } from "powerhooks/useConstCallback";
+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;
 
@@ -92,6 +83,4 @@ const LoginPassword = memo((props: LoginPasswordProps) => {
             }
         />
     );
-});
-
-export default LoginPassword;
+}

src/lib/pages/LoginResetPassword.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 type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+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;
 
@@ -75,6 +66,4 @@ const LoginResetPassword = memo((props: LoginResetPasswordProps) => {
             infoNode={msg("emailInstruction")}
         />
     );
-});
-
-export default LoginResetPassword;
+}

src/lib/pages/LoginUpdatePassword.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 type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+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;
+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;
 
@@ -123,6 +114,4 @@ const LoginUpdatePassword = memo((props: LoginUpdatePasswordProps) => {
             }
         />
     );
-});
-
-export default LoginUpdatePassword;
+}

src/lib/pages/LoginUpdateProfile.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 type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+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;
+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;
 
@@ -130,6 +121,4 @@ const LoginUpdateProfile = memo((props: LoginUpdateProfile) => {
             }
         />
     );
-});
-
-export default LoginUpdateProfile;
+}

src/lib/pages/LoginUsername.tsx

@@ -1,22 +1,13 @@
-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 React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import { useConstCallback } from "powerhooks/useConstCallback";
+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;
 
@@ -164,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,20 +1,11 @@
-import React, { memo } from "react";
+import React from "react";
 import { clsx } from "../tools/clsx";
-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 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;
 
@@ -64,6 +55,4 @@ const LogoutConfirm = memo((props: LogoutConfirmProps) => {
             }
         />
     );
-});
-
-export default LogoutConfirm;
+}

src/lib/pages/Register.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 type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+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;
 
@@ -167,6 +158,4 @@ const Register = memo((props: RegisterProps) => {
             }
         />
     );
-});
-
-export default Register;
+}

src/lib/pages/RegisterUserProfile.tsx

@@ -1,21 +1,12 @@
-import React, { 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 React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
 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;
 
@@ -66,6 +57,4 @@ const RegisterUserProfile = memo((props: RegisterUserProfileProps) => {
             }
         />
     );
-});
-
-export default RegisterUserProfile;
+}

src/lib/pages/Terms.tsx

@@ -1,70 +1,20 @@
-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 { 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 const evtTermMarkdown = Evt.create<string | undefined>(undefined);
-
-export type KcContextLike = {
-    pageId: KcContextBase["pageId"];
-    locale?: {
-        currentLanguageTag: string;
-    };
-};
-
-assert<Extends<KcContextBase, KcContextLike>>();
-
-/** Allow to avoid bundling the terms and download it on demand*/
-export function useDownloadTerms(params: {
-    kcContext: KcContextLike;
-    downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
-}) {
-    const { kcContext } = params;
-
-    const { downloadTermMarkdownMemoized } = (function useClosure() {
-        const { downloadTermMarkdown } = params;
-
-        const downloadTermMarkdownConst = useConstCallback(downloadTermMarkdown);
-
-        const downloadTermMarkdownMemoized = useConst(() =>
-            memoize((currentLanguageTag: string) => downloadTermMarkdownConst({ currentLanguageTag }), { "promise": true })
-        );
-
-        return { downloadTermMarkdownMemoized };
-    })();
-
-    useEffect(() => {
-        if (kcContext.pageId !== "terms.ftl") {
-            return;
-        }
-
-        downloadTermMarkdownMemoized(kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag).then(
-            thermMarkdown => (evtTermMarkdown.state = thermMarkdown)
-        );
-    }, []);
-}
-
-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;
+export default function Terms(props: PageProps<Extract<KcContextBase, { pageId: "terms.ftl" }>, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { msg, msgStr } = i18n;
 
@@ -111,6 +61,45 @@ const Terms = memo((props: TermsProps) => {
             }
         />
     );
-});
+}
 
-export default Terms;
+export const evtTermMarkdown = Evt.create<string | undefined>(undefined);
+
+export type KcContextLike = {
+    pageId: KcContextBase["pageId"];
+    locale?: {
+        currentLanguageTag: string;
+    };
+};
+
+assert<Extends<KcContextBase, KcContextLike>>();
+
+/** Allow to avoid bundling the terms and download it on demand*/
+export function useDownloadTerms(params: {
+    kcContext: KcContextLike;
+    downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
+}) {
+    const { kcContext } = params;
+
+    const { downloadTermMarkdownMemoized } = (function useClosure() {
+        const { downloadTermMarkdown } = params;
+
+        const downloadTermMarkdownConst = useConstCallback(downloadTermMarkdown);
+
+        const downloadTermMarkdownMemoized = useConst(() =>
+            memoize((currentLanguageTag: string) => downloadTermMarkdownConst({ currentLanguageTag }))
+        );
+
+        return { downloadTermMarkdownMemoized };
+    })();
+
+    useEffect(() => {
+        if (kcContext.pageId !== "terms.ftl") {
+            return;
+        }
+
+        downloadTermMarkdownMemoized(kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag).then(
+            thermMarkdown => (evtTermMarkdown.state = thermMarkdown)
+        );
+    }, []);
+}

src/lib/pages/UpdateUserProfile.tsx

@@ -1,21 +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 React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
 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;
+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;
 
@@ -73,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 React, { useRef, useState } from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n, MessageKeyBase } from "../i18n";
+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;
 
@@ -198,6 +190,4 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
             }
         />
     );
-});
-
-export default WebauthnAuthenticate;
+}

src/lib/pages/shared/UserProfileCommons.tsx

@@ -0,0 +1,650 @@
+import "../../tools/Array.prototype.every";
+import React, { useEffect, useMemo, useReducer, Fragment } from "react";
+import type { KcProps } from "../../KcProps";
+import type { KcContextBase, Validators, Attribute } from "../../getKcContext";
+import { clsx } from "../../tools/clsx";
+import { useConstCallback } from "../../tools/useConstCallback";
+import { emailRegexp } from "../../tools/emailRegExp";
+import type { I18nBase, 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

@@ -1,7 +1,44 @@
-import { classnames } from "tss-react/tools/classnames";
-import type { Cx } from "tss-react";
+import { assert } from "tsafe/assert";
+import { typeGuard } from "tsafe/typeGuard";
 
-/** Drop in replacement for https://www.npmjs.com/package/clsx */
-export const clsx: Cx = (...args) => {
-    return classnames(args);
+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/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,11 +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 { 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.

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 {};