Bump version

Use the new syntax for importing as type
Update prettier config
2023-02-26 16:41:47 +01:00 · 2023-02-26 16:37:06 +01:00 · 2023-02-26 15:39:03 +01:00 · 2023-02-26 15:37:52 +01:00 · 2023-02-26 15:36:52 +01:00 · 2023-02-26 15:36:35 +01:00
55 changed files with 1410 additions and 1680 deletions
--- a/.prettierignore
+++ b/.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/
--- a/README.md
+++ b/README.md
@ -27,15 +27,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/keycloak-starter">Starter project</a>
    </p>
-    <p align="center"> ---- </p>
-
 </p>

 <p align="center">
@ -49,9 +43,18 @@

 # Changelog highlights

-## 6.11.0
+## 6.12

-   <del>You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, [see PR](https://github.com/InseeFrLab/keycloakify/pull/239)</del>.
+Massive improvement in the developer experience:
+
+-   There is now only one starter repo: https://github.com/codegouvfr/keycloakify-starter
+-   A lot of comments have been added in the code of the starter to make it easier to get started.
+-   The doc has been updated: https://docs.keycloakify.dev
+-   A lot of improvements in the type system.
+
+## 6.11.4
+
+-   You no longer need to have Maven installed to build the theme. Thanks to @lordvlad, [see PR](https://github.com/InseeFrLab/keycloakify/pull/239).
 -   Feature new build options: [`bundler`](https://docs.keycloakify.dev/build-options#keycloakify.bundler), [`groupId`](https://docs.keycloakify.dev/build-options#keycloakify.groupid), [`artifactId`](https://docs.keycloakify.dev/build-options#keycloakify.artifactid), [`version`](https://docs.keycloakify.dev/build-options#version).  
    Theses options can be user to customize the output name of the .jar. You can use environnement variables to overrides the values read in the package.json. Thanks to @lordvlad.

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "keycloakify",
-    "version": "6.11.1",
+    "version": "6.12.0",
    "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",
        "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"
    }
 }
--- a/renovate.json
+++ b/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",
--- a/src/bin/keycloakify/BuildOptions.ts
+++ b/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;
@ -139,7 +139,7 @@ export function readBuildOptions(params: {
                    `${symToStr({ KEYCLOAKIFY_BUNDLER })} should be one of ${bundlers.join(", ")}`
                );

-                return KEYCLOAKIFY_BUNDLER ?? bundler ?? "mvn";
+                return KEYCLOAKIFY_BUNDLER ?? bundler ?? "keycloakify";
            })(),
            "artifactId": process.env.KEYCLOAKIFY_ARTIFACT_ID ?? artifactId ?? `${themeName}-keycloak-theme`,
            "groupId": (() => {
--- a/src/bin/keycloakify/generateFtl/generateFtl.ts
+++ b/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;
--- a/src/bin/keycloakify/index.ts
+++ b/src/bin/keycloakify/index.ts
@ -4,5 +4,5 @@ export * from "./keycloakify";
 import { main } from "./keycloakify";

 if (require.main === module) {
-    main();
+    main().catch(e => console.error(e));
 }
--- a/src/bin/keycloakify/keycloakify.ts
+++ b/src/bin/keycloakify/keycloakify.ts
@ -60,10 +60,10 @@ export async function main() {
        case "keycloakify":
            logger.log("🫶 Let keycloakify do its thang");
            await jar({
-                "rootPath": keycloakThemeBuildingDirPath,
+                "rootPath": pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources"),
                "version": buildOptions.version,
                "groupId": buildOptions.groupId,
-                "artifactId": buildOptions.artifactId || `${buildOptions.themeName}-keycloak-theme`,
+                "artifactId": buildOptions.artifactId,
                "targetPath": jarFilePath
            });
            break;
--- a/src/bin/link_in_test_app.ts
+++ b/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"
-    })
-);
--- a/src/bin/tools/grant-exec-perms.ts
+++ b/src/bin/tools/grant-exec-perms.ts
@ -3,10 +3,10 @@ import { join as pathJoin } from "path";
 import { constants } from "fs";
 import { chmod, stat } from "fs/promises";

-async () => {
-    var { bin } = await import(pathJoin(getProjectRoot(), "package.json"));
+(async () => {
+    const { bin } = await import(pathJoin(getProjectRoot(), "package.json"));

-    var promises = Object.values<string>(bin).map(async scriptPath => {
+    const promises = Object.values<string>(bin).map(async scriptPath => {
        const fullPath = pathJoin(getProjectRoot(), scriptPath);
        const oldMode = (await stat(fullPath)).mode;
        const newMode = oldMode | constants.S_IXUSR | constants.S_IXGRP | constants.S_IXOTH;
@ -14,4 +14,4 @@ async () => {
    });

    await Promise.all(promises);
-};
+})();
--- a/src/bin/tools/jar.ts
+++ b/src/bin/tools/jar.ts
@ -1,11 +1,11 @@
 import { Readable, Transform } from "stream";
-import { pipeline } from "stream/promises";
-import { relative, sep } from "path";
+import { dirname, relative, sep } from "path";
 import { createWriteStream } from "fs";

 import walk from "./walk";
 import type { ZipSource } from "./zip";
 import zip from "./zip";
+import { mkdir } from "fs/promises";

 /** Trim leading whitespace from every line */
 const trimIndent = (s: string) => s.replace(/(\n)\s+/g, "$1");
@ -57,9 +57,9 @@ export default async function jar({ groupId, artifactId, version, rootPath, targ
    const pathToRecord = () =>
        new Transform({
            objectMode: true,
-            transform: function (path, _, cb) {
-                const filename = relative(rootPath, path).split(sep).join("/");
-                this.push({ filename, path });
+            transform: function (fsPath, _, cb) {
+                const path = relative(rootPath, fsPath).split(sep).join("/");
+                this.push({ path, fsPath });
                cb();
            },
            final: function () {
@ -69,19 +69,21 @@ export default async function jar({ groupId, artifactId, version, rootPath, targ
            }
        });

-    /**
-     * Create an async pipeline, wait until everything is fully processed
-     */
-    await pipeline(
+    await mkdir(dirname(targetPath), { recursive: true });
+
+    // Create an async pipeline, wait until everything is fully processed
+    await new Promise<void>((resolve, reject) => {
        // walk all files in `rootPath` recursively
-        Readable.from(walk(rootPath)),
-        // transform every path into a ZipSource object
-        pathToRecord(),
-        // let the zip lib convert all ZipSource objects into a byte stream
-        zip(),
-        // write that byte stream to targetPath
-        createWriteStream(targetPath, { encoding: "binary" })
-    );
+        Readable.from(walk(rootPath))
+            // transform every path into a ZipSource object
+            .pipe(pathToRecord())
+            // let the zip lib convert all ZipSource objects into a byte stream
+            .pipe(zip())
+            // write that byte stream to targetPath
+            .pipe(createWriteStream(targetPath, { encoding: "binary" }))
+            .on("finish", () => resolve())
+            .on("error", e => reject(e));
+    });
 }

 /**
--- a/src/bin/tools/zip.ts
+++ b/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";

@ -216,7 +217,7 @@ export default function zip() {
    const writeRecord = async (source: ZipSource) => {
        if ("fsPath" in source) await writeFromPath(source.path, source.fsPath);
        else if ("data" in source) await writeFromBuffer(source.path, source.data);
-        else throw new Error("Illegal argument " + typeof source + "  " + source);
+        else throw new Error("Illegal argument " + typeof source + "  " + JSON.stringify(source));
    };

    /**
--- a/src/lib/components/KcApp.tsx
+++ b/src/lib/components/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;
+}
--- a/src/lib/components/KcProps.ts
+++ b/src/lib/components/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 */
--- a/src/lib/components/Template.tsx
+++ b/src/lib/components/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,
@ -44,10 +25,6 @@ const Template = memo((props: TemplateProps) => {

    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);
@ -126,13 +103,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 +204,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 +231,4 @@ const Template = memo((props: TemplateProps) => {
            </div>
        </div>
    );
-});
-
-export default Template;
+}
--- a/src/lib/components/shared/UserProfileCommons.tsx
+++ b/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>
-                    );
-                })}
-            </>
-        );
-    }
-);
--- a/src/lib/getKcContext/KcContextBase.ts
+++ b/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;

--- a/src/lib/getKcContext/kcContextMocks/kcContextMocks.ts
+++ b/src/lib/getKcContext/kcContextMocks/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": [
--- a/src/lib/getKcContext/kcContextMocks/index.ts
+++ b/src/lib/getKcContext/kcContextMocks/index.ts
@ -1 +0,0 @@
-export * from "./kcContextMocks";
--- a/src/lib/i18n/i18n.tsx
+++ b/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 */
+    }
+};
--- a/src/lib/i18n/index.tsx
+++ b/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";
--- a/src/lib/index.ts
+++ b/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;
--- a/src/lib/components/Error.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.Error, 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;
+}
--- a/src/lib/components/IdpReviewUserProfile.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.IdpReviewUserProfile, 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;
+}
--- a/src/lib/components/Info.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.Info, 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;
+}
--- a/src/lib/components/Login.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.Login, 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;
+}
--- a/src/lib/components/LoginConfigTotp.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginConfigTotp, 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;
+}
--- a/src/lib/components/LoginIdpLinkConfirm.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginIdpLinkConfirm, 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;
+}
--- a/src/lib/components/LoginIdpLinkEmail.tsx
+++ b/src/lib/components/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<KcContextBase.LoginIdpLinkEmail, 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;
+}
--- a/src/lib/components/LoginOtp.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginOtp, 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;
--- a/src/lib/components/LoginPageExpired.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginPageExpired, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url } = kcContext;

@ -42,6 +33,4 @@ const LoginPageExpired = memo((props: LoginPageExpired) => {
            }
        />
    );
-});
-
-export default LoginPageExpired;
+}
--- a/src/lib/components/LoginPassword.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginPassword, 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;
+}
--- a/src/lib/components/LoginResetPassword.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginResetPassword, 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;
+}
--- a/src/lib/components/LoginUpdatePassword.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginUpdatePassword, 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;
+}
--- a/src/lib/components/LoginUpdateProfile.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginUpdateProfile, 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;
+}
--- a/src/lib/components/LoginUsername.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginUsername, 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;
+}
--- a/src/lib/components/LoginVerifyEmail.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LoginVerifyEmail, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { msg } = i18n;

@ -38,6 +29,4 @@ const LoginVerifyEmail = memo((props: LoginVerifyEmailProps) => {
            }
        />
    );
-});
-
-export default LoginVerifyEmail;
+}
--- a/src/lib/components/LogoutConfirm.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.LogoutConfirm, 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;
+}
--- a/src/lib/components/Register.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.Register, 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;
+}
--- a/src/lib/components/RegisterUserProfile.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.RegisterUserProfile, 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;
+}
--- a/src/lib/components/Terms.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.Terms, 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)
+        );
+    }, []);
+}
--- a/src/lib/components/UpdateUserProfile.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.UpdateUserProfile, 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;
+}
--- a/src/lib/components/WebauthnAuthenticate.tsx
+++ b/src/lib/components/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 { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+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<KcContextBase.WebauthnAuthenticate, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;

    const { url } = kcContext;

@ -198,6 +190,4 @@ const WebauthnAuthenticate = memo((props: WebauthnAuthenticateProps) => {
            }
        />
    );
-});
-
-export default WebauthnAuthenticate;
+}
--- a/src/lib/pages/shared/UserProfileCommons.tsx
+++ b/src/lib/pages/shared/UserProfileCommons.tsx
@ -0,0 +1,178 @@
+import React, { 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 "../../tools/useCallbackFactory";
+import { useFormValidationSlice } from "../../useFormValidationSlice";
+import type { I18nBase } from "../../i18n";
+import type { Param0 } from "tsafe/Param0";
+
+export type UserProfileFormFieldsProps = {
+    kcContext: Param0<typeof useFormValidationSlice>["kcContext"];
+    i18n: I18nBase;
+} & KcProps &
+    Partial<Record<"BeforeField" | "AfterField", ReactComponent<{ attribute: Attribute }>>> & {
+        onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    };
+
+export function UserProfileFormFields({
+    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>
+                );
+            })}
+        </>
+    );
+}
--- a/src/lib/tools/SetOptional.ts
+++ b/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]>>;
--- a/src/lib/tools/clsx.ts
+++ b/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;
 };
--- a/src/lib/tools/deepAssign.ts
+++ b/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,
--- a/src/lib/tools/memoize.ts
+++ b/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;
+}
--- a/src/lib/tools/useCallbackFactory.ts
+++ b/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];
+}
--- a/src/lib/tools/useConst.ts
+++ b/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;
+}
--- a/src/lib/tools/useConstCallback.ts
+++ b/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;
+}
--- a/src/lib/useFormValidationSlice.tsx
+++ b/src/lib/useFormValidationSlice.tsx
@ -1,8 +1,8 @@
 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";

@ -14,7 +14,7 @@ export function useGetErrors(params: {
            attributes: { name: string; value?: string; validators: Validators }[];
        };
    };
-    i18n: I18n;
+    i18n: I18nBase;
 }) {
    const { kcContext, i18n } = params;

@ -319,7 +319,7 @@ export function useFormValidationSlice(params: {
    };
    /** NOTE: Try to avoid passing a new ref every render for better performances. */
    passwordValidators?: Validators;
-    i18n: I18n;
+    i18n: I18nBase;
 }) {
    const {
        kcContext,
--- a/src/scripts/generate-i18n-messages.ts
+++ b/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.
--- a/src/scripts/link-in-app.ts
+++ b/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 {};
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
garronej	09f716440a	Bump version	2023-02-26 16:41:47 +01:00
garronej	2251c84171	Use the new syntax for importing as type	2023-02-26 16:37:06 +01:00
garronej	5cfe78dcd1	Update prettier config	2023-02-26 15:39:03 +01:00
garronej	6a48325132	Be more relax on the type safety to avoir headache	2023-02-26 15:37:52 +01:00
garronej	294be0a79a	see prev commit	2023-02-26 15:36:52 +01:00
garronej	c94b264b44	Don't need a dir for a single file	2023-02-26 15:36:35 +01:00
garronej	7220c4e3e3	Fix deepAssign	2023-02-26 15:35:57 +01:00
garronej	5aadeba2ec	fix clsx	2023-02-26 15:35:30 +01:00
garronej	0f47a5b6ba	Small Template refactor	2023-02-25 20:11:55 +01:00
garronej	36f32d28f2	Stop auto updating powerhooks	2023-02-25 19:21:55 +01:00
garronej	6d69ccf229	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify	2023-02-25 19:21:17 +01:00
garronej	37073b42be	Avoir introducing breaking changes for CSS only setup	2023-02-25 19:19:46 +01:00
garronej	837501c948	Refactor	2023-02-25 18:26:39 +01:00
garronej	b300966fa8	Refactor and get rid of unessesary dependencies	2023-02-25 18:11:23 +01:00
renovate[bot]	730eb06c84	fix(deps): update dependency powerhooks to ^0.26.2	2023-02-14 12:08:41 +00:00
renovate[bot]	aca8d3f4b7	fix(deps): update dependency powerhooks to ^0.26.1	2023-02-08 16:38:28 +00:00
garronej	b5b3af4659	Bump version	2023-02-07 01:32:36 +01:00
garronej	6cd231426d	Import Blob from node builtins	2023-02-07 01:32:20 +01:00
garronej	0c7cd1cd75	Bump version	2023-02-07 01:21:17 +01:00
garronej	2425704ead	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify	2023-02-07 01:20:33 +01:00
garronej	4e22159206	Bump version	2023-02-07 01:20:26 +01:00
garronej	52cf1ba02c	Fix tsafe related warnings	2023-02-07 01:20:12 +01:00
renovate[bot]	516e84182f	fix(deps): update dependency powerhooks to ^0.26.0	2023-02-05 15:10:42 +00:00
garronej	a3a9853e18	bump version	2023-02-05 14:58:53 +01:00
garronej	08e26600fd	Use keycloakify as bundler by default	2023-02-05 14:58:38 +01:00
Joseph Garrone	7793c2c6ba	Update package.json	2023-02-05 14:41:32 +01:00
Joseph Garrone	9e826d16dd	Merge pull request #241 from lordvlad/mvn-begone Mvn begone addendum	2023-02-05 14:41:13 +01:00
Waldemar Reusch	80618bbd9c	Merge branch 'main' into mvn-begone	2023-02-05 13:36:52 +01:00
Waldemar Reusch	38ad47ea75	use hand-crafted promise, pipeline does not resolve properly	2023-02-05 13:32:24 +01:00
Waldemar Reusch	45ed359bef	fix keycloak theme source path for internal bundler	2023-02-05 13:31:34 +01:00
Waldemar Reusch	fcc26c3e7a	now that main is a promise, we shuold catch errors	2023-02-05 13:31:03 +01:00
Waldemar Reusch	d4ff6b1f40	fix: bundler fix missing directory	2023-02-05 12:59:05 +01:00
Waldemar Reusch	557de34eea	fix: bundler fix missing change	2023-02-05 12:56:01 +01:00
Waldemar Reusch	e034dc4d90	Merge branch 'mvn-begone' of github.com:lordvlad/keycloakify into mvn-begone * 'mvn-begone' of github.com:lordvlad/keycloakify: fix(deps): update garronej_modules_update Update README.md Rollback via update Bump version keycloak test script: use env to launch bash fix(deps): update dependency powerhooks to ^0.22.0 Update dependency powerhooks to ^0.21.0 Relase candidate fmt Update README.md Bump version Update src/bin/tools/downloadAndUnzip.ts Bump version #232 Bump version keycloak test script: use env to launch bash fix(deps): update dependency powerhooks to ^0.22.0 Update dependency powerhooks to ^0.21.0	2023-02-05 12:35:15 +01:00
Waldemar Reusch	cfbd1e5e4b	fix(bundler): fix type mismatch introduced in last-minute 'fixes'	2023-02-05 12:34:48 +01:00
garronej	0df661819f	Bump version	2023-02-04 20:51:06 +01:00
garronej	1a9f6d10d4	Actually run the top level await	2023-02-04 20:50:53 +01:00
				`@ -0,0 +1 @@`
				`export type SetOptional<T extends Record<string, unknown>, K extends keyof T> = Omit<T, K> & Partial<Record<K, T[K]>>;`