Release candidate

Improve incremental build time
Release candidate
2024-07-13 09:27:10 +02:00 · 2024-07-13 09:26:48 +02:00 · 2024-07-13 09:07:36 +02:00 · 2024-07-13 09:07:11 +02:00 · 2024-07-13 08:00:16 +02:00 · 2024-07-11 18:23:08 +02:00
35 changed files with 707 additions and 556 deletions
--- a/.gitignore
+++ b/.gitignore
@ -48,8 +48,8 @@ jspm_packages

 .idea

-/src/login/i18n/baseMessages/
-/src/account/i18n/baseMessages/
+/src/login/i18n/messages_defaultSet/
+/src/account/i18n/messages_defaultSet/

 # VS Code devcontainers
 .devcontainer
--- a/.prettierignore
+++ b/.prettierignore
@ -6,8 +6,8 @@ node_modules/
 /src/tools/types/
 /build_keycloak/
 /.vscode/
-/src/login/i18n/baseMessages/
-/src/account/i18n/baseMessages/
+/src/login/i18n/messages_defaultSet/
+/src/account/i18n/messages_defaultSet/
 /dist_test
 /sample_react_project/
 /sample_custom_react_project/
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "keycloakify",
-    "version": "10.0.0-rc.103",
+    "version": "10.0.0-rc.110",
    "description": "Create Keycloak themes using React",
    "repository": {
        "type": "git",
--- a/scripts/build.ts
+++ b/scripts/build.ts
@ -1,6 +1,6 @@
 import * as child_process from "child_process";
 import * as fs from "fs";
-import { join, relative } from "path";
+import { join } from "path";
 import { assert } from "tsafe/assert";
 import { transformCodebase } from "../src/bin/tools/transformCodebase";
 import chalk from "chalk";
--- a/scripts/generate-i18n-messages.ts
+++ b/scripts/generate-i18n-messages.ts
@ -12,6 +12,7 @@ import { crawl } from "../src/bin/tools/crawl";
 import { downloadKeycloakDefaultTheme } from "../src/bin/shared/downloadKeycloakDefaultTheme";
 import { getThisCodebaseRootDirPath } from "../src/bin/tools/getThisCodebaseRootDirPath";
 import { deepAssign } from "../src/tools/deepAssign";
+import { getProxyFetchOptions } from "../src/bin/tools/fetchProxyOptions";

 // NOTE: To run without argument when we want to generate src/i18n/generated_kcMessages files,
 // update the version array for generating for newer version.
@ -33,7 +34,9 @@ async function main() {
                ".cache",
                "keycloakify"
            ),
-            npmWorkspaceRootDirPath: thisCodebaseRootDirPath
+            fetchOptions: getProxyFetchOptions({
+                npmConfigGetCwd: thisCodebaseRootDirPath
+            })
        }
    });

@ -107,12 +110,12 @@ async function main() {
            source: keycloakifyExtraMessages
        });

-        const baseMessagesDirPath = pathJoin(
+        const messagesDirPath = pathJoin(
            thisCodebaseRootDirPath,
            "src",
            themeType,
            "i18n",
-            "baseMessages"
+            "messages_defaultSet"
        );

        const generatedFileHeader = [
@ -124,7 +127,7 @@ async function main() {
        ].join("\n");

        languages.forEach(language => {
-            const filePath = pathJoin(baseMessagesDirPath, `${language}.ts`);
+            const filePath = pathJoin(messagesDirPath, `${language}.ts`);

            fs.mkdirSync(pathDirname(filePath), { recursive: true });

@ -152,14 +155,14 @@ async function main() {
        });

        fs.writeFileSync(
-            pathJoin(baseMessagesDirPath, "index.ts"),
+            pathJoin(messagesDirPath, "index.ts"),
            Buffer.from(
                [
                    generatedFileHeader,
                    `import * as en from "./en";`,
                    "",
-                    "export async function getMessages(currentLanguageTag: string) {",
-                    "    const { default: messages } = await (() => {",
+                    "export async function fetchMessages_defaultSet(currentLanguageTag: string) {",
+                    "    const { default: messages_defaultSet } = await (() => {",
                    "        switch (currentLanguageTag) {",
                    `            case "en": return en;`,
                    ...languages
@ -171,7 +174,7 @@ async function main() {
                    '            default: return { "default": {} };',
                    "        }",
                    "    })();",
-                    "    return messages;",
+                    "    return messages_defaultSet;",
                    "}"
                ].join("\n"),
                "utf8"
--- a/src/account/KcContext/KcContext.ts
+++ b/src/account/KcContext/KcContext.ts
@ -118,7 +118,10 @@ export declare namespace KcContext {
            lastName?: string;
            username?: string;
        };
-        properties: Record<string, string | undefined>;
+        properties: {};
+        "x-keycloakify": {
+            messages: Record<string, string>;
+        };
    };

    export type Password = Common & {
--- a/src/account/KcContext/kcContextMocks.ts
+++ b/src/account/KcContext/kcContextMocks.ts
@ -82,7 +82,10 @@ export const kcContextCommonMock: KcContext.Common = {
        email: "john.doe@code.gouv.fr",
        username: "doe_j"
    },
-    properties: {}
+    properties: {},
+    "x-keycloakify": {
+        messages: {}
+    }
 };

 export const kcContextMocks: KcContext[] = [
--- a/src/account/i18n/GenericI18n.tsx
+++ b/src/account/i18n/GenericI18n.tsx
@ -0,0 +1,6 @@
+import type { GenericI18n_noJsx } from "./i18n";
+
+export type GenericI18n<MessageKey extends string> = GenericI18n_noJsx<MessageKey> & {
+    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
+};
--- a/src/account/i18n/i18n.tsx
+++ b/src/account/i18n/i18n.tsx
@ -1,22 +1,24 @@
 import "keycloakify/tools/Object.fromEntries";
 import { assert } from "tsafe/assert";
-import messages_fallbackLanguage from "./baseMessages/en";
-import { getMessages } from "./baseMessages";
+import messages_defaultSet_fallbackLanguage from "./messages_defaultSet/en";
+import { fetchMessages_defaultSet } from "./messages_defaultSet";
 import type { KcContext } from "../KcContext";
 import { fallbackLanguageTag } from "keycloakify/bin/shared/constants";
+import { id } from "tsafe/id";

 export type KcContextLike = {
    locale?: {
        currentLanguageTag: string;
        supported: { languageTag: string; url: string; label: string }[];
    };
+    "x-keycloakify": {
+        messages: Record<string, string>;
+    };
 };

 assert<KcContext extends KcContextLike ? true : false>();

-export type MessageKey = keyof typeof messages_fallbackLanguage;
-
-export type GenericI18n<MessageKey extends string> = {
+export type GenericI18n_noJsx<MessageKey extends string> = {
    /**
     * e.g: "en", "fr", "zh-CN"
     *
@ -36,16 +38,21 @@ export type GenericI18n<MessageKey extends string> = {
     * */
    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.
+     * Examples assuming currentLanguageTag === "en"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "impersonateTitleHtml": "<strong>{0}</strong> Impersonate User",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * msgStr("access-denied") === "Access denied"
+     * msgStr("not-a-message-key") Throws an error
     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
+     * msgStr("${bar}", "<strong>c</strong>") === "Bar &lt;strong&gt;XXX&lt;/strong&gt;"
+     *  The html in the arg is partially escaped for security reasons, it might come from an untrusted source, it's not safe to render it as html.
     */
    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
    /**
@ -56,24 +63,11 @@ export type GenericI18n<MessageKey extends string> = {
     * {
     *   en: {
     *     "access-denied": "Access denied",
-     *     "foo": "Foo {0} {1}",
-     *     "bar": "Bar {0}"
     *   }
     * }
     *
-     * 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("${bar}", "<strong>c</strong>")
-     *    === <span>{msgStr("bar", "<strong>XXX</strong>")}<span>
-     *    === <span>Bar &lt;strong&gt;XXX&lt;/strong&gt;</span> (The html in the arg is partially escaped for security reasons, it might be untrusted)
-     * advancedMsg("${foo} xx ${bar}", "a", "b", "c")
-     *    === <span>{msgStr("foo", "a", "b")} xx {msgStr("bar")}<span>
-     *    === <span>Foo a b xx Bar {0}</span> (The substitution are only applied in the first message)
-     */
-    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
-    /**
-     * See advancedMsg() but instead of returning a JSX.Element it returns a string.
+     * advancedMsgStr("${access-denied}") === advancedMsgStr("access-denied") === msgStr("access-denied") === "Access denied"
+     * advancedMsgStr("${not-a-message-key}") === advancedMsgStr("not-a-message-key") === "not-a-message-key"
     */
    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;

@ -85,10 +79,12 @@ export type GenericI18n<MessageKey extends string> = {
    isFetchingTranslations: boolean;
 };

-export function createGetI18n<ExtraMessageKey extends string = never>(messageBundle: {
-    [languageTag: string]: { [key in ExtraMessageKey]: string };
+export type MessageKey_defaultSet = keyof typeof messages_defaultSet_fallbackLanguage;
+
+export function createGetI18n<MessageKey_themeDefined extends string = never>(messagesByLanguageTag_themeDefined: {
+    [languageTag: string]: { [key in MessageKey_themeDefined]: string };
 }) {
-    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
+    type I18n = GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined>;

    type Result = { i18n: I18n; prI18n_currentLanguage: Promise<I18n> | undefined };

@ -123,10 +119,18 @@ export function createGetI18n<ExtraMessageKey extends string = never>(messageBun
            labelBySupportedLanguageTag: Object.fromEntries((kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label]))
        };

-        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey, ExtraMessageKey>({
-            messages_fallbackLanguage,
-            messageBundle_fallbackLanguage: messageBundle[fallbackLanguageTag],
-            messageBundle_currentLanguage: messageBundle[partialI18n.currentLanguageTag]
+        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey_themeDefined>({
+            messages_themeDefined:
+                messagesByLanguageTag_themeDefined[partialI18n.currentLanguageTag] ??
+                messagesByLanguageTag_themeDefined[fallbackLanguageTag] ??
+                (() => {
+                    const firstLanguageTag = Object.keys(messagesByLanguageTag_themeDefined)[0];
+                    if (firstLanguageTag === undefined) {
+                        return undefined;
+                    }
+                    return messagesByLanguageTag_themeDefined[firstLanguageTag];
+                })(),
+            messages_fromKcServer: kcContext["x-keycloakify"].messages
        });

        const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag === fallbackLanguageTag;
@ -135,18 +139,18 @@ export function createGetI18n<ExtraMessageKey extends string = never>(messageBun
            i18n: {
                ...partialI18n,
                ...createI18nTranslationFunctions({
-                    messages_currentLanguage: isCurrentLanguageFallbackLanguage ? messages_fallbackLanguage : undefined
+                    messages_defaultSet_currentLanguage: isCurrentLanguageFallbackLanguage ? messages_defaultSet_fallbackLanguage : undefined
                }),
                isFetchingTranslations: !isCurrentLanguageFallbackLanguage
            },
            prI18n_currentLanguage: isCurrentLanguageFallbackLanguage
                ? undefined
                : (async () => {
-                      const messages_currentLanguage = await getMessages(partialI18n.currentLanguageTag);
+                      const messages_defaultSet_currentLanguage = await fetchMessages_defaultSet(partialI18n.currentLanguageTag);

                      const i18n_currentLanguage: I18n = {
                          ...partialI18n,
-                          ...createI18nTranslationFunctions({ messages_currentLanguage }),
+                          ...createI18nTranslationFunctions({ messages_defaultSet_currentLanguage }),
                          isFetchingTranslations: false
                      };

@ -169,118 +173,76 @@ export function createGetI18n<ExtraMessageKey extends string = never>(messageBun
    return { getI18n };
 }

-function createI18nTranslationFunctionsFactory<MessageKey extends string, ExtraMessageKey extends string>(params: {
-    messages_fallbackLanguage: Record<MessageKey, string>;
-    messageBundle_fallbackLanguage: Record<ExtraMessageKey, string> | undefined;
-    messageBundle_currentLanguage: Partial<Record<ExtraMessageKey, string>> | undefined;
+function createI18nTranslationFunctionsFactory<MessageKey_themeDefined extends string>(params: {
+    messages_themeDefined: Record<MessageKey_themeDefined, string> | undefined;
+    messages_fromKcServer: Record<string, string>;
 }) {
-    const { messageBundle_currentLanguage } = params;
-
-    const messages_fallbackLanguage = {
-        ...params.messages_fallbackLanguage,
-        ...params.messageBundle_fallbackLanguage
-    };
+    const { messages_themeDefined, messages_fromKcServer } = params;

    function createI18nTranslationFunctions(params: {
-        messages_currentLanguage: Partial<Record<MessageKey, string>> | undefined;
-    }): Pick<GenericI18n<MessageKey | ExtraMessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
-        const messages_currentLanguage = {
-            ...params.messages_currentLanguage,
-            ...messageBundle_currentLanguage
-        };
+        messages_defaultSet_currentLanguage: Partial<Record<MessageKey_defaultSet, string>> | undefined;
+    }): Pick<GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined>, "msgStr" | "advancedMsgStr"> {
+        const { messages_defaultSet_currentLanguage } = params;

-        function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
-            const { key, args, doRenderAsHtml } = props;
+        function resolveMsg(props: { key: string; args: (string | undefined)[] }): string | undefined {
+            const { key, args } = props;

-            const messageOrUndefined: string | undefined = (messages_currentLanguage as any)[key] ?? (messages_fallbackLanguage as any)[key];
+            const message =
+                id<Record<string, string | undefined>>(messages_fromKcServer)[key] ??
+                id<Record<string, string | undefined> | undefined>(messages_themeDefined)?.[key] ??
+                id<Record<string, string | undefined> | undefined>(messages_defaultSet_currentLanguage)?.[key] ??
+                id<Record<string, string | undefined>>(messages_defaultSet_fallbackLanguage)[key];

-            if (messageOrUndefined === undefined) {
+            if (message === undefined) {
                return undefined;
            }

-            const message = messageOrUndefined;
+            const startIndex = message
+                .match(/{[0-9]+}/g)
+                ?.map(g => g.match(/{([0-9]+)}/)![1])
+                .map(indexStr => parseInt(indexStr))
+                .sort((a, b) => a - b)[0];

-            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.replace(/</g, "&lt;").replace(/>/g, "&gt;")
-                    );
-                });
-
-                return messageWithArgsInjected;
-            })();
-
-            return doRenderAsHtml ? (
-                <span
-                    // NOTE: The message is trusted. The arguments are not but are escaped.
-                    dangerouslySetInnerHTML={{
-                        __html: messageWithArgsInjectedIfAny
-                    }}
-                />
-            ) : (
-                messageWithArgsInjectedIfAny
-            );
-        }
-
-        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
-            const { key, args, doRenderAsHtml } = props;
-
-            if (!/\$\{[^}]+\}/.test(key)) {
-                const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
-
-                if (resolvedMessage === undefined) {
-                    return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
-                }
-
-                return resolvedMessage;
+            if (startIndex === undefined) {
+                // No {0} in message (no arguments expected)
+                return message;
            }

-            let isFirstMatch = true;
+            let messageWithArgsInjected = message;

-            const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
-                const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
+            args.forEach((arg, i) => {
+                if (arg === undefined) {
+                    return;
+                }

-                isFirstMatch = false;
-
-                return replaceBy;
+                messageWithArgsInjected = messageWithArgsInjected.replace(
+                    new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                );
            });

-            return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
+            return messageWithArgsInjected;
+        }
+
+        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[] }): string {
+            const { key, args } = props;
+
+            const match = key.match(/^\$\{(.+)\}$/);
+
+            if (match === null) {
+                return key;
+            }
+
+            return resolveMsg({ key: match[1], args }) ?? key;
        }

        return {
-            msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
-            msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
-            advancedMsg: (key, ...args) =>
-                resolveMsgAdvanced({
-                    key,
-                    args,
-                    doRenderAsHtml: true
-                }) as JSX.Element,
-            advancedMsgStr: (key, ...args) =>
-                resolveMsgAdvanced({
-                    key,
-                    args,
-                    doRenderAsHtml: false
-                }) as string
+            msgStr: (key, ...args) => {
+                const resolvedMessage = resolveMsg({ key, args });
+                assert(resolvedMessage !== undefined, `Message with key "${key}" not found`);
+                return resolvedMessage;
+            },
+            advancedMsgStr: (key, ...args) => resolveMsgAdvanced({ key, args })
        };
    }

--- a/src/account/i18n/index.ts
+++ b/src/account/i18n/index.ts
@ -1,4 +1,5 @@
-import type { GenericI18n, MessageKey, KcContextLike } from "./i18n";
-export type { MessageKey, KcContextLike };
-export type I18n = GenericI18n<MessageKey>;
+import type { GenericI18n } from "./GenericI18n";
+import type { MessageKey_defaultSet, KcContextLike } from "./i18n";
+export type { MessageKey_defaultSet, KcContextLike };
+export type I18n = GenericI18n<MessageKey_defaultSet>;
 export { createUseI18n } from "./useI18n";
--- a/src/account/i18n/useI18n.ts
+++ b/src/account/i18n/useI18n.ts
@ -1,44 +0,0 @@
-import { useEffect, useState } from "react";
-import {
-    createGetI18n,
-    type GenericI18n,
-    type MessageKey,
-    type KcContextLike
-} from "./i18n";
-import { Reflect } from "tsafe/Reflect";
-
-export function createUseI18n<ExtraMessageKey extends string = never>(messageBundle: {
-    [languageTag: string]: { [key in ExtraMessageKey]: string };
-}) {
-    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
-
-    const { getI18n } = createGetI18n(messageBundle);
-
-    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
-        const { kcContext } = params;
-
-        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
-
-        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(i18n);
-
-        useEffect(() => {
-            let isActive = true;
-
-            prI18n_currentLanguage?.then(i18n => {
-                if (!isActive) {
-                    return;
-                }
-
-                setI18n_toReturn(i18n);
-            });
-
-            return () => {
-                isActive = false;
-            };
-        }, []);
-
-        return { i18n: i18n_toReturn };
-    }
-
-    return { useI18n, ofTypeI18n: Reflect<I18n>() };
-}
--- a/src/account/i18n/useI18n.tsx
+++ b/src/account/i18n/useI18n.tsx
@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { createGetI18n, type GenericI18n_noJsx, type KcContextLike, type MessageKey_defaultSet } from "./i18n";
+import { GenericI18n } from "./GenericI18n";
+import { Reflect } from "tsafe/Reflect";
+
+export function createUseI18n<MessageKey_themeDefined extends string = never>(messageBundle: {
+    [languageTag: string]: { [key in MessageKey_themeDefined]: string };
+}) {
+    type MessageKey = MessageKey_defaultSet | MessageKey_themeDefined;
+
+    type I18n = GenericI18n<MessageKey>;
+
+    const { withJsx } = (() => {
+        const cache = new WeakMap<GenericI18n_noJsx<MessageKey>, GenericI18n<MessageKey>>();
+
+        function renderHtmlString(htmlString: string): JSX.Element {
+            return (
+                <div
+                    style={{ display: "inline-block" }}
+                    dangerouslySetInnerHTML={{
+                        __html: htmlString
+                    }}
+                />
+            );
+        }
+
+        function withJsx(i18n_noJsx: GenericI18n_noJsx<MessageKey>): I18n {
+            use_cache: {
+                const i18n = cache.get(i18n_noJsx);
+
+                if (i18n === undefined) {
+                    break use_cache;
+                }
+
+                return i18n;
+            }
+
+            const i18n: I18n = {
+                ...i18n_noJsx,
+                msg: (...args) => renderHtmlString(i18n_noJsx.msgStr(...args)),
+                advancedMsg: (...args) => renderHtmlString(i18n_noJsx.advancedMsgStr(...args))
+            };
+
+            cache.set(i18n_noJsx, i18n);
+
+            return i18n;
+        }
+
+        return { withJsx };
+    })();
+
+    const { getI18n } = createGetI18n(messageBundle);
+
+    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
+        const { kcContext } = params;
+
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+
+        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(withJsx(i18n));
+
+        useEffect(() => {
+            let isActive = true;
+
+            prI18n_currentLanguage?.then(i18n => {
+                if (!isActive) {
+                    return;
+                }
+
+                setI18n_toReturn(withJsx(i18n));
+            });
+
+            return () => {
+                isActive = false;
+            };
+        }, []);
+
+        return { i18n: i18n_toReturn };
+    }
+
+    return { useI18n, ofTypeI18n: Reflect<I18n>() };
+}
--- a/src/bin/keycloakify/buildJars/buildJar.ts
+++ b/src/bin/keycloakify/buildJars/buildJar.ts
@ -45,20 +45,21 @@ export async function buildJar(params: {
        buildContext
    } = params;

-    const keycloakifyBuildTmpDirPath = pathJoin(
+    const keycloakifyBuildCacheDirPath = pathJoin(
        buildContext.cacheDirPath,
+        "maven",
        jarFileBasename.replace(".jar", "")
    );

-    rmSync(keycloakifyBuildTmpDirPath, { recursive: true, force: true });
-
    const tmpResourcesDirPath = pathJoin(
-        keycloakifyBuildTmpDirPath,
+        keycloakifyBuildCacheDirPath,
        "src",
        "main",
        "resources"
    );

+    rmSync(tmpResourcesDirPath, { recursive: true, force: true });
+
    transformCodebase({
        srcDirPath: resourcesDirPath,
        destDirPath: tmpResourcesDirPath,
@ -155,10 +156,7 @@ export async function buildJar(params: {
        (["register.ftl", "login-update-profile.ftl"] as const).forEach(pageId =>
            buildContext.themeNames.map(themeName => {
                const ftlFilePath = pathJoin(
-                    keycloakifyBuildTmpDirPath,
-                    "src",
-                    "main",
-                    "resources",
+                    tmpResourcesDirPath,
                    "theme",
                    themeName,
                    "login",
@ -200,15 +198,15 @@ export async function buildJar(params: {
        });

        await fs.writeFile(
-            pathJoin(keycloakifyBuildTmpDirPath, "pom.xml"),
+            pathJoin(keycloakifyBuildCacheDirPath, "pom.xml"),
            Buffer.from(pomFileCode, "utf8")
        );
    }

    await new Promise<void>((resolve, reject) =>
        child_process.exec(
-            `mvn clean install -Dmaven.repo.local=${pathJoin(keycloakifyBuildTmpDirPath, ".m2")}`,
-            { cwd: keycloakifyBuildTmpDirPath },
+            `mvn install -Dmaven.repo.local="${pathJoin(keycloakifyBuildCacheDirPath, ".m2")}"`,
+            { cwd: keycloakifyBuildCacheDirPath },
            error => {
                if (error !== null) {
                    console.error(
@ -233,12 +231,10 @@ export async function buildJar(params: {

    await fs.rename(
        pathJoin(
-            keycloakifyBuildTmpDirPath,
+            keycloakifyBuildCacheDirPath,
            "target",
            `${buildContext.artifactId}-${buildContext.themeVersion}.jar`
        ),
        pathJoin(buildContext.keycloakifyBuildDirPath, jarFileBasename)
    );
-
-    rmSync(keycloakifyBuildTmpDirPath, { recursive: true });
 }
--- a/src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl
+++ b/src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl
@ -1,6 +1,24 @@
 <#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
 <#assign themeType="KEYCLOAKIFY_THEME_TYPE_dExKd3xEdr">
+<#assign xKeycloakifyMessages = {}>
+<#assign debugMessage="">
+
 const kcContext = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
+
+<@addNonAutomaticallyGatherableMessagesToXKeycloakifyMessages />
+
+console.log(`${debugMessage}`);
+
+kcContext["x-keycloakify"] = {};
+
+{
+  var messages = {};
+  <#list xKeycloakifyMessages as key, resolvedMsg>
+    messages["${key}"] = decodeHtmlEntities("${resolvedMsg?js_string}");
+  </#list>
+  kcContext["x-keycloakify"].messages = messages;
+}
+
 if( kcContext.messagesPerField ){
    var existsError_singleFieldName = kcContext.messagesPerField.existsError;
    kcContext.messagesPerField.existsError = function (){
@ -34,38 +52,15 @@ kcContext.pageId = "${pageId}";
 if( kcContext.url && kcContext.url.resourcesPath ){
    kcContext.url.resourcesCommonPath = kcContext.url.resourcesPath + "/" + "RESOURCES_COMMON_cLsLsMrtDkpVv";
 }
-kcContext["x-keycloakify"] = {};
-<#if profile?? && profile.attributes??>
-    kcContext["x-keycloakify"].realmMessageBundleUserProfile = {
-        <#list profile.attributes as attribute>
-            <#if attribute.annotations?? && attribute.displayName??>
-                "${attribute.displayName}": decodeHtmlEntities("${advancedMsg(attribute.displayName)?js_string}"),
-            </#if>
-            <#if attribute.annotations.inputHelperTextBefore??>
-                "${attribute.annotations.inputHelperTextBefore}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextBefore)?js_string}"),
-            </#if>
-            <#if attribute.annotations.inputHelperTextAfter??>
-                "${attribute.annotations.inputHelperTextAfter}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputHelperTextAfter)?js_string}"),
-            </#if>
-            <#if attribute.annotations.inputTypePlaceholder??>
-                "${attribute.annotations.inputTypePlaceholder}": decodeHtmlEntities("${advancedMsg(attribute.annotations.inputTypePlaceholder)?js_string}"),
-            </#if>
-            <!-- Loop through the options that are in attribute.validators.options.options -->
-            <#if (
-                attribute.annotations.inputOptionLabelsI18nPrefix?? &&
-                attribute.validators?? &&
-                attribute.validators.options??
-            )>
-                <#list attribute.validators.options.options as option>
-                    "${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}": decodeHtmlEntities("${msg(attribute.annotations.inputOptionLabelsI18nPrefix + "." + option)?js_string}"),
-                </#list>
-            </#if>
-        </#list>
-    };
-</#if>
-<#if pageId == "terms.ftl" || termsAcceptanceRequired?? && termsAcceptanceRequired>
-    kcContext["x-keycloakify"].realmMessageBundleTermsText= decodeHtmlEntities("${msg("termsText")?js_string}");
-</#if>
+if( kcContext.resourceUrl && !kcContext.url ){
+    Object.defineProperty(kcContext, "url", {
+        value: {
+            resourcesPath: kcContext.resourceUrl
+        },
+        enumerable: false
+    });
+}
+
 attributes_to_attributesByName: {
    if( !kcContext.profile ){
        break attributes_to_attributesByName;
@ -73,7 +68,7 @@ attributes_to_attributesByName: {
    if( !kcContext.profile.attributes ){
        break attributes_to_attributesByName;
    }
-    var attributes =  kcContext.profile.attributes;
+    var attributes = kcContext.profile.attributes;
    delete kcContext.profile.attributes;
    kcContext.profile.attributesByName = {};
    attributes.forEach(function(attribute){
@ -428,6 +423,14 @@ function decodeHtmlEntities(htmlStr){

            </#if>

+            <#if themeType == "account" && are_same_path(path, ["realm", "isInternationalizationEnabled"])>
+                <#attempt>
+                    <#return realm.isInternationalizationEnabled()?c>
+                <#recover>
+                    <#return "ABORT: Couldn't evaluate realm.isInternationalizationEnabled()">
+                </#attempt>
+            </#if>
+
            <#return "ABORT: It's a method">
        </#if>

@ -508,6 +511,17 @@ function decodeHtmlEntities(htmlStr){
            <#return object?c>
        </#if>

+        <#local isString = "">
+        <#attempt>
+            <#local isString = object?is_string>
+        <#recover>
+            <#return "ABORT: Can't test if it's a string">
+        </#attempt>
+
+        <#if isString>
+            <@addToXKeycloakifyMessagesIfMessageKey str=object />
+        </#if>
+
        <#attempt>
            <#return '"' + object?js_string + '"'>;
        <#recover>
@ -558,4 +572,73 @@ function decodeHtmlEntities(htmlStr){

 <#function are_same_path path searchedPath>
    <#return path?size == searchedPath?size && is_subpath(path, searchedPath)>
-</#function>
+</#function>
+
+<#macro addToXKeycloakifyMessagesIfMessageKey str>
+    <#if !msg?? || !msg?is_method>
+        <#return>
+    </#if>
+    <#if (str?length > 200)>
+        <#return>
+    </#if>
+    <#local key=removeBrackets(str)>
+    <#if key?length==0>
+        <#return>
+    </#if>
+    <#if !(key?matches(r"^[a-zA-Z0-9-_.]*$"))>
+        <#return>
+    </#if>
+    <#local resolvedMsg=msg(key)>
+    <#if resolvedMsg==key>
+        <#return>
+    </#if>
+    <#assign xKeycloakifyMessages = xKeycloakifyMessages + { "${key}": resolvedMsg }>
+</#macro>
+
+<#function removeBrackets str>
+  <#if str?starts_with("${") && str?ends_with("}")>
+    <#return str[2..(str?length-2)]>
+  <#else>
+    <#return str>
+  </#if>
+</#function>
+
+<#macro addNonAutomaticallyGatherableMessagesToXKeycloakifyMessages>
+    <#if profile?? && profile?is_hash && profile.attributes?? && profile.attributes?is_enumerable>
+        <#list profile.attributes as attribute>
+            <#if !(
+                attribute.annotations?? && attribute.annotations?is_hash &&
+                attribute.annotations.inputOptionLabelsI18nPrefix?? && attribute.annotations.inputOptionLabelsI18nPrefix?is_string
+            )>
+                <#continue>
+            </#if>
+            <#local prefix=attribute.annotations.inputOptionLabelsI18nPrefix>
+            <#if !(
+                attribute.validators?? && attribute.validators?is_hash &&
+                attribute.validators.options?? && attribute.validators.options?is_hash &&
+                attribute.validators.options.options?? && attribute.validators.options.options?is_enumerable
+            )>
+                <#continue>
+            </#if>
+            <#list attribute.validators.options.options as option>
+                <#if !option?is_string>
+                    <#continue>
+                </#if>
+                <@addToXKeycloakifyMessagesIfMessageKey str="${prefix}.${option}" />
+            </#list>
+        </#list>
+    </#if>
+    <#if pageId == "terms.ftl" || termsAcceptanceRequired?? && termsAcceptanceRequired>
+        <@addToXKeycloakifyMessagesIfMessageKey str="termsText" />
+    </#if>
+    <#if requiredActions?? && requiredActions?is_enumerable>
+        <#list requiredActions as requiredAction>
+            <#if !requiredAction?is_string>
+                <#continue>
+            </#if>
+            <@addToXKeycloakifyMessagesIfMessageKey str="requiredAction.${requiredAction}" />
+        </#list>
+    </#if>
+</#macro>
+
+
--- a/src/bin/keycloakify/generateResources/generateMessageProperties.ts
+++ b/src/bin/keycloakify/generateResources/generateMessageProperties.ts
@ -22,7 +22,7 @@ export function generateMessageProperties(params: {
        "src",
        themeType,
        "i18n",
-        "baseMessages"
+        "messages_defaultSet"
    );

    const baseMessageBundle: { [languageTag: string]: Record<string, string> } =
--- a/src/bin/keycloakify/generateResources/generateResourcesForMainTheme.ts
+++ b/src/bin/keycloakify/generateResources/generateResourcesForMainTheme.ts
@ -4,7 +4,8 @@ import {
    join as pathJoin,
    resolve as pathResolve,
    relative as pathRelative,
-    dirname as pathDirname
+    dirname as pathDirname,
+    basename as pathBasename
 } from "path";
 import { replaceImportsInJsCode } from "../replacers/replaceImportsInJsCode";
 import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
@ -42,6 +43,7 @@ import {
 } from "../../shared/metaInfKeycloakThemes";
 import { objectEntries } from "tsafe/objectEntries";
 import { escapeStringForPropertiesFile } from "../../tools/escapeStringForPropertiesFile";
+import { downloadAndExtractArchive } from "../../tools/downloadAndExtractArchive";

 export type BuildContextLike = BuildContextLike_kcContextExclusionsFtlCode &
    BuildContextLike_downloadKeycloakStaticResources &
@ -302,6 +304,39 @@ export async function generateResourcesForMainTheme(params: {
        });
    }

+    bring_in_account_v3_i18n_messages: {
+        if (!buildContext.doUseAccountV3) {
+            break bring_in_account_v3_i18n_messages;
+        }
+
+        const { extractedDirPath } = await downloadAndExtractArchive({
+            url: "https://repo1.maven.org/maven2/org/keycloak/keycloak-account-ui/25.0.1/keycloak-account-ui-25.0.1.jar",
+            cacheDirPath: buildContext.cacheDirPath,
+            fetchOptions: buildContext.fetchOptions,
+            uniqueIdOfOnArchiveFile: "bring_in_account_v3_i18n_messages",
+            onArchiveFile: async ({ fileRelativePath, writeFile }) => {
+                if (
+                    !fileRelativePath.startsWith(
+                        pathJoin("theme", "keycloak.v3", "account", "messages")
+                    )
+                ) {
+                    return;
+                }
+                await writeFile({
+                    fileRelativePath: pathBasename(fileRelativePath)
+                });
+            }
+        });
+
+        transformCodebase({
+            srcDirPath: extractedDirPath,
+            destDirPath: pathJoin(
+                getThemeTypeDirPath({ themeType: "account" }),
+                "messages"
+            )
+        });
+    }
+
    {
        const metaInfKeycloakThemes: MetaInfKeycloakTheme = { themes: [] };

--- a/src/bin/shared/buildContext.ts
+++ b/src/bin/shared/buildContext.ts
@ -575,7 +575,7 @@ export function getBuildContext(params: {
                try {
                    child_process.execSync("npm config get", {
                        cwd: dirPath,
-                        stdio: "ignore"
+                        stdio: "pipe"
                    });
                } catch (error) {
                    if (String(error).includes("ENOWORKSPACES")) {
--- a/src/bin/shared/downloadKeycloakDefaultTheme.ts
+++ b/src/bin/shared/downloadKeycloakDefaultTheme.ts
@ -17,14 +17,14 @@ export async function downloadKeycloakDefaultTheme(params: {
 }): Promise<{ defaultThemeDirPath: string }> {
    const { keycloakVersion, buildContext } = params;

-    let kcNodeModulesKeepFilePaths: string[] | undefined = undefined;
-    let kcNodeModulesKeepFilePaths_lastAccountV1: string[] | undefined = undefined;
+    let kcNodeModulesKeepFilePaths: Set<string> | undefined = undefined;
+    let kcNodeModulesKeepFilePaths_lastAccountV1: Set<string> | undefined = undefined;

    const { extractedDirPath } = await downloadAndExtractArchive({
        url: `https://repo1.maven.org/maven2/org/keycloak/keycloak-themes/${keycloakVersion}/keycloak-themes-${keycloakVersion}.jar`,
        cacheDirPath: buildContext.cacheDirPath,
        fetchOptions: buildContext.fetchOptions,
-        uniqueIdOfOnOnArchiveFile: "downloadKeycloakDefaultTheme",
+        uniqueIdOfOnArchiveFile: "downloadKeycloakDefaultTheme",
        onArchiveFile: async params => {
            const fileRelativePath = pathRelative("theme", params.fileRelativePath);

@ -72,16 +72,19 @@ export async function downloadKeycloakDefaultTheme(params: {
                }

                skip_node_modules: {
-                    if (
-                        !fileRelativePath.startsWith(
-                            pathJoin("keycloak", "common", "resources", "node_modules")
-                        )
-                    ) {
+                    const nodeModulesRelativeDirPath = pathJoin(
+                        "keycloak",
+                        "common",
+                        "resources",
+                        "node_modules"
+                    );
+
+                    if (!fileRelativePath.startsWith(nodeModulesRelativeDirPath)) {
                        break skip_node_modules;
                    }

                    if (kcNodeModulesKeepFilePaths_lastAccountV1 === undefined) {
-                        kcNodeModulesKeepFilePaths_lastAccountV1 = [
+                        kcNodeModulesKeepFilePaths_lastAccountV1 = new Set([
                            pathJoin("patternfly", "dist", "css", "patternfly.min.css"),
                            pathJoin(
                                "patternfly",
@ -125,13 +128,19 @@ export async function downloadKeycloakDefaultTheme(params: {
                                "fonts",
                                "PatternFlyIcons-webfont.woff"
                            )
-                        ];
+                        ]);
                    }

-                    for (const keepPath of kcNodeModulesKeepFilePaths_lastAccountV1) {
-                        if (fileRelativePath.endsWith(keepPath)) {
-                            break skip_node_modules;
-                        }
+                    const fileRelativeToNodeModulesPath = fileRelativePath.substring(
+                        nodeModulesRelativeDirPath.length + 1
+                    );
+
+                    if (
+                        kcNodeModulesKeepFilePaths_lastAccountV1.has(
+                            fileRelativeToNodeModulesPath
+                        )
+                    ) {
+                        break skip_node_modules;
                    }

                    return;
@ -165,16 +174,19 @@ export async function downloadKeycloakDefaultTheme(params: {
                }

                skip_node_modules: {
-                    if (
-                        !fileRelativePath.startsWith(
-                            pathJoin("keycloak", "common", "resources", "node_modules")
-                        )
-                    ) {
+                    const nodeModulesRelativeDirPath = pathJoin(
+                        "keycloak",
+                        "common",
+                        "resources",
+                        "node_modules"
+                    );
+
+                    if (!fileRelativePath.startsWith(nodeModulesRelativeDirPath)) {
                        break skip_node_modules;
                    }

                    if (kcNodeModulesKeepFilePaths === undefined) {
-                        kcNodeModulesKeepFilePaths = [
+                        kcNodeModulesKeepFilePaths = new Set([
                            pathJoin("@patternfly", "patternfly", "patternfly.min.css"),
                            pathJoin("patternfly", "dist", "css", "patternfly.min.css"),
                            pathJoin(
@ -231,15 +243,23 @@ export async function downloadKeycloakDefaultTheme(params: {
                                "fonts",
                                "PatternFlyIcons-webfont.woff"
                            ),
+                            pathJoin(
+                                "patternfly",
+                                "dist",
+                                "fonts",
+                                "OpenSans-Semibold-webfont.woff2"
+                            ),
                            pathJoin("patternfly", "dist", "img", "bg-login.jpg"),
                            pathJoin("jquery", "dist", "jquery.min.js")
-                        ];
+                        ]);
                    }

-                    for (const keepPath of kcNodeModulesKeepFilePaths) {
-                        if (fileRelativePath.endsWith(keepPath)) {
-                            break skip_node_modules;
-                        }
+                    const fileRelativeToNodeModulesPath = fileRelativePath.substring(
+                        nodeModulesRelativeDirPath.length + 1
+                    );
+
+                    if (kcNodeModulesKeepFilePaths.has(fileRelativeToNodeModulesPath)) {
+                        break skip_node_modules;
                    }

                    return;
--- a/src/bin/tools/downloadAndExtractArchive.ts
+++ b/src/bin/tools/downloadAndExtractArchive.ts
@ -10,7 +10,7 @@ import { rm } from "./fs.rm";

 export async function downloadAndExtractArchive(params: {
    url: string;
-    uniqueIdOfOnOnArchiveFile: string;
+    uniqueIdOfOnArchiveFile: string;
    onArchiveFile: (params: {
        fileRelativePath: string;
        readFile: () => Promise<Buffer>;
@ -22,7 +22,7 @@ export async function downloadAndExtractArchive(params: {
    cacheDirPath: string;
    fetchOptions: FetchOptions | undefined;
 }): Promise<{ extractedDirPath: string }> {
-    const { url, uniqueIdOfOnOnArchiveFile, onArchiveFile, cacheDirPath, fetchOptions } =
+    const { url, uniqueIdOfOnArchiveFile, onArchiveFile, cacheDirPath, fetchOptions } =
        params;

    const archiveFileBasename = url.split("?")[0].split("/").reverse()[0];
@ -63,7 +63,7 @@ export async function downloadAndExtractArchive(params: {
        });
    }

-    const extractDirBasename = `${archiveFileBasename.split(".")[0]}_${uniqueIdOfOnOnArchiveFile}_${crypto
+    const extractDirBasename = `${archiveFileBasename.split(".")[0]}_${uniqueIdOfOnArchiveFile}_${crypto
        .createHash("sha256")
        .update(onArchiveFile.toString())
        .digest("hex")
--- a/src/login/KcContext/KcContext.ts
+++ b/src/login/KcContext/KcContext.ts
@ -1,9 +1,8 @@
 import type { ThemeType, LoginThemePageId } from "keycloakify/bin/shared/constants";
-import type { ExtractAfterStartingWith } from "keycloakify/tools/ExtractAfterStartingWith";
 import type { ValueOf } from "keycloakify/tools/ValueOf";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { MessageKey } from "../i18n/i18n";
+import type { ClassKey } from "keycloakify/login/TemplateProps";

 export type ExtendKcContext<
    KcContextExtension extends { properties?: Record<string, string | undefined> },
@ -155,8 +154,7 @@ export declare namespace KcContext {
        };
        properties: {};
        "x-keycloakify": {
-            realmMessageBundleUserProfile: Record<string, string> | undefined;
-            realmMessageBundleTermsText: string | undefined;
+            messages: Record<string, string>;
        };
    };

@ -221,7 +219,7 @@ export declare namespace KcContext {
    export type Info = Common & {
        pageId: "info.ftl";
        messageHeader?: string;
-        requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKey>[];
+        requiredActions?: string[];
        skipLink: boolean;
        pageRedirectUri?: string;
        actionUri?: string;
@ -384,7 +382,7 @@ export declare namespace KcContext {
            credentialId: string;
            transports: {
                iconClass: string;
-                displayNameProperties?: MessageKey[];
+                displayNameProperties?: string[];
            };
            label: string;
            createdAt: string;
@ -501,26 +499,9 @@ export declare namespace KcContext {
    export namespace SelectAuthenticator {
        export type AuthenticationSelection = {
            authExecId: string;
-            displayName:
-                | "otp-display-name"
-                | "password-display-name"
-                | "auth-username-form-display-name"
-                | "auth-username-password-form-display-name"
-                | "webauthn-display-name"
-                | "webauthn-passwordless-display-name";
-            helpText:
-                | "otp-help-text"
-                | "password-help-text"
-                | "auth-username-form-help-text"
-                | "auth-username-password-form-help-text"
-                | "webauthn-help-text"
-                | "webauthn-passwordless-help-text";
-            iconCssClass?:
-                | "kcAuthenticatorDefaultClass"
-                | "kcAuthenticatorPasswordClass"
-                | "kcAuthenticatorOTPClass"
-                | "kcAuthenticatorWebAuthnClass"
-                | "kcAuthenticatorWebAuthnPasswordlessClass";
+            displayName: string;
+            helpText: string;
+            iconCssClass?: ClassKey;
        };
    }

@ -610,6 +591,7 @@ export type Attribute = {
    value?: string;
    values?: string[];
    group?: {
+        annotations: Record<string, string>;
        html5DataAnnotations: Record<string, string>;
        displayHeader?: string;
        name: string;
--- a/src/login/KcContext/kcContextMocks.ts
+++ b/src/login/KcContext/kcContextMocks.ts
@ -162,8 +162,7 @@ export const kcContextCommonMock: KcContext.Common = {
    isAppInitiatedAction: false,
    properties: {},
    "x-keycloakify": {
-        realmMessageBundleUserProfile: undefined,
-        realmMessageBundleTermsText: undefined
+        messages: {}
    }
 };

--- a/src/login/i18n/GenericI18n.tsx
+++ b/src/login/i18n/GenericI18n.tsx
@ -0,0 +1,6 @@
+import type { GenericI18n_noJsx } from "./i18n";
+
+export type GenericI18n<MessageKey extends string> = GenericI18n_noJsx<MessageKey> & {
+    msg: (key: MessageKey, ...args: (string | undefined)[]) => JSX.Element;
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
+};
--- a/src/login/i18n/i18n.tsx
+++ b/src/login/i18n/i18n.tsx
@ -1,9 +1,10 @@
 import "keycloakify/tools/Object.fromEntries";
 import { assert } from "tsafe/assert";
-import messages_fallbackLanguage from "./baseMessages/en";
-import { getMessages } from "./baseMessages";
+import messages_defaultSet_fallbackLanguage from "./messages_defaultSet/en";
+import { fetchMessages_defaultSet } from "./messages_defaultSet";
 import type { KcContext } from "../KcContext";
 import { fallbackLanguageTag } from "keycloakify/bin/shared/constants";
+import { id } from "tsafe/id";

 export type KcContextLike = {
    locale?: {
@ -11,16 +12,13 @@ export type KcContextLike = {
        supported: { languageTag: string; url: string; label: string }[];
    };
    "x-keycloakify": {
-        realmMessageBundleUserProfile: Record<string, string> | undefined;
-        realmMessageBundleTermsText: string | undefined;
+        messages: Record<string, string>;
    };
 };

 assert<KcContext extends KcContextLike ? true : false>();

-export type MessageKey = keyof typeof messages_fallbackLanguage;
-
-export type GenericI18n<MessageKey extends string> = {
+export type GenericI18n_noJsx<MessageKey extends string> = {
    /**
     * e.g: "en", "fr", "zh-CN"
     *
@ -40,16 +38,21 @@ export type GenericI18n<MessageKey extends string> = {
     * */
    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.
+     * Examples assuming currentLanguageTag === "en"
+     * {
+     *   en: {
+     *     "access-denied": "Access denied",
+     *     "impersonateTitleHtml": "<strong>{0}</strong> Impersonate User",
+     *     "bar": "Bar {0}"
+     *   }
+     * }
+     *
+     * msgStr("access-denied") === "Access denied"
+     * msgStr("not-a-message-key") Throws an error
     * msgStr("impersonateTitleHtml", "Foo") === "<strong>Foo</strong> Impersonate User"
+     * msgStr("${bar}", "<strong>c</strong>") === "Bar &lt;strong&gt;XXX&lt;/strong&gt;"
+     *  The html in the arg is partially escaped for security reasons, it might come from an untrusted source, it's not safe to render it as html.
     */
    msgStr: (key: MessageKey, ...args: (string | undefined)[]) => string;
    /**
@ -60,24 +63,11 @@ export type GenericI18n<MessageKey extends string> = {
     * {
     *   en: {
     *     "access-denied": "Access denied",
-     *     "foo": "Foo {0} {1}",
-     *     "bar": "Bar {0}"
     *   }
     * }
     *
-     * 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("${bar}", "<strong>c</strong>")
-     *    === <span>{msgStr("bar", "<strong>XXX</strong>")}<span>
-     *    === <span>Bar &lt;strong&gt;XXX&lt;/strong&gt;</span> (The html in the arg is partially escaped for security reasons, it might be untrusted)
-     * advancedMsg("${foo} xx ${bar}", "a", "b", "c")
-     *    === <span>{msgStr("foo", "a", "b")} xx {msgStr("bar")}<span>
-     *    === <span>Foo a b xx Bar {0}</span> (The substitution are only applied in the first message)
-     */
-    advancedMsg: (key: string, ...args: (string | undefined)[]) => JSX.Element;
-    /**
-     * See advancedMsg() but instead of returning a JSX.Element it returns a string.
+     * advancedMsgStr("${access-denied}") === advancedMsgStr("access-denied") === msgStr("access-denied") === "Access denied"
+     * advancedMsgStr("${not-a-message-key}") === advancedMsgStr("not-a-message-key") === "not-a-message-key"
     */
    advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;

@ -89,10 +79,12 @@ export type GenericI18n<MessageKey extends string> = {
    isFetchingTranslations: boolean;
 };

-export function createGetI18n<ExtraMessageKey extends string = never>(messageBundle: {
-    [languageTag: string]: { [key in ExtraMessageKey]: string };
+export type MessageKey_defaultSet = keyof typeof messages_defaultSet_fallbackLanguage;
+
+export function createGetI18n<MessageKey_themeDefined extends string = never>(messagesByLanguageTag_themeDefined: {
+    [languageTag: string]: { [key in MessageKey_themeDefined]: string };
 }) {
-    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
+    type I18n = GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined>;

    type Result = { i18n: I18n; prI18n_currentLanguage: Promise<I18n> | undefined };

@ -127,12 +119,18 @@ export function createGetI18n<ExtraMessageKey extends string = never>(messageBun
            labelBySupportedLanguageTag: Object.fromEntries((kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label]))
        };

-        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey, ExtraMessageKey>({
-            messages_fallbackLanguage,
-            messageBundle_fallbackLanguage: messageBundle[fallbackLanguageTag],
-            messageBundle_currentLanguage: messageBundle[partialI18n.currentLanguageTag],
-            realmMessageBundleUserProfile: kcContext["x-keycloakify"].realmMessageBundleUserProfile,
-            realmMessageBundleTermsText: kcContext["x-keycloakify"].realmMessageBundleTermsText
+        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey_themeDefined>({
+            messages_themeDefined:
+                messagesByLanguageTag_themeDefined[partialI18n.currentLanguageTag] ??
+                messagesByLanguageTag_themeDefined[fallbackLanguageTag] ??
+                (() => {
+                    const firstLanguageTag = Object.keys(messagesByLanguageTag_themeDefined)[0];
+                    if (firstLanguageTag === undefined) {
+                        return undefined;
+                    }
+                    return messagesByLanguageTag_themeDefined[firstLanguageTag];
+                })(),
+            messages_fromKcServer: kcContext["x-keycloakify"].messages
        });

        const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag === fallbackLanguageTag;
@ -141,18 +139,18 @@ export function createGetI18n<ExtraMessageKey extends string = never>(messageBun
            i18n: {
                ...partialI18n,
                ...createI18nTranslationFunctions({
-                    messages_currentLanguage: isCurrentLanguageFallbackLanguage ? messages_fallbackLanguage : undefined
+                    messages_defaultSet_currentLanguage: isCurrentLanguageFallbackLanguage ? messages_defaultSet_fallbackLanguage : undefined
                }),
                isFetchingTranslations: !isCurrentLanguageFallbackLanguage
            },
            prI18n_currentLanguage: isCurrentLanguageFallbackLanguage
                ? undefined
                : (async () => {
-                      const messages_currentLanguage = await getMessages(partialI18n.currentLanguageTag);
+                      const messages_defaultSet_currentLanguage = await fetchMessages_defaultSet(partialI18n.currentLanguageTag);

                      const i18n_currentLanguage: I18n = {
                          ...partialI18n,
-                          ...createI18nTranslationFunctions({ messages_currentLanguage }),
+                          ...createI18nTranslationFunctions({ messages_defaultSet_currentLanguage }),
                          isFetchingTranslations: false
                      };

@ -175,151 +173,72 @@ export function createGetI18n<ExtraMessageKey extends string = never>(messageBun
    return { getI18n };
 }

-function createI18nTranslationFunctionsFactory<MessageKey extends string, ExtraMessageKey extends string>(params: {
-    messages_fallbackLanguage: Record<MessageKey, string>;
-    messageBundle_fallbackLanguage: Record<ExtraMessageKey, string> | undefined;
-    messageBundle_currentLanguage: Partial<Record<ExtraMessageKey, string>> | undefined;
-    realmMessageBundleUserProfile: Record<string, string> | undefined;
-    realmMessageBundleTermsText: string | undefined;
+function createI18nTranslationFunctionsFactory<MessageKey_themeDefined extends string>(params: {
+    messages_themeDefined: Record<MessageKey_themeDefined, string> | undefined;
+    messages_fromKcServer: Record<string, string>;
 }) {
-    const { messageBundle_currentLanguage, realmMessageBundleUserProfile, realmMessageBundleTermsText } = params;
-
-    const messages_fallbackLanguage = {
-        ...params.messages_fallbackLanguage,
-        ...params.messageBundle_fallbackLanguage
-    };
+    const { messages_themeDefined, messages_fromKcServer } = params;

    function createI18nTranslationFunctions(params: {
-        messages_currentLanguage: Partial<Record<MessageKey, string>> | undefined;
-    }): Pick<GenericI18n<MessageKey | ExtraMessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
-        const messages_currentLanguage = {
-            ...params.messages_currentLanguage,
-            ...messageBundle_currentLanguage
-        };
+        messages_defaultSet_currentLanguage: Partial<Record<MessageKey_defaultSet, string>> | undefined;
+    }): Pick<GenericI18n_noJsx<MessageKey_defaultSet | MessageKey_themeDefined>, "msgStr" | "advancedMsgStr"> {
+        const { messages_defaultSet_currentLanguage } = params;

-        function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
-            const { key, args, doRenderAsHtml } = props;
+        function resolveMsg(props: { key: string; args: (string | undefined)[] }): string | undefined {
+            const { key, args } = props;

-            const messageOrUndefined: string | undefined = (() => {
-                const messageOrUndefined = (messages_currentLanguage as any)[key] ?? (messages_fallbackLanguage as any)[key];
+            const message =
+                id<Record<string, string | undefined>>(messages_fromKcServer)[key] ??
+                id<Record<string, string | undefined> | undefined>(messages_themeDefined)?.[key] ??
+                id<Record<string, string | undefined> | undefined>(messages_defaultSet_currentLanguage)?.[key] ??
+                id<Record<string, string | undefined>>(messages_defaultSet_fallbackLanguage)[key];

-                if (key === "termsText" && realmMessageBundleTermsText !== undefined) {
-                    return realmMessageBundleTermsText;
-                }
-
-                return messageOrUndefined;
-            })();
-
-            if (messageOrUndefined === undefined) {
+            if (message === undefined) {
                return undefined;
            }

-            const message = messageOrUndefined;
+            const startIndex = message
+                .match(/{[0-9]+}/g)
+                ?.map(g => g.match(/{([0-9]+)}/)![1])
+                .map(indexStr => parseInt(indexStr))
+                .sort((a, b) => a - b)[0];

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

-                if (startIndex === undefined) {
-                    // No {0} in message (no arguments expected)
-                    return message;
+            let messageWithArgsInjected = message;
+
+            args.forEach((arg, i) => {
+                if (arg === undefined) {
+                    return;
                }

-                let messageWithArgsInjected = message;
-
-                args.forEach((arg, i) => {
-                    if (arg === undefined) {
-                        return;
-                    }
-
-                    messageWithArgsInjected = messageWithArgsInjected.replace(
-                        new RegExp(`\\{${i + startIndex}\\}`, "g"),
-                        arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
-                    );
-                });
-
-                return messageWithArgsInjected;
-            })();
-
-            return doRenderAsHtml ? (
-                <span
-                    // NOTE: The message is trusted. The arguments are not but are escaped.
-                    dangerouslySetInnerHTML={{
-                        __html: messageWithArgsInjectedIfAny
-                    }}
-                />
-            ) : (
-                messageWithArgsInjectedIfAny
-            );
-        }
-
-        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
-            const { key, args, doRenderAsHtml } = props;
-
-            user_profile: {
-                if (realmMessageBundleUserProfile === undefined) {
-                    break user_profile;
-                }
-
-                const resolvedMessage = realmMessageBundleUserProfile[key] ?? realmMessageBundleUserProfile["${" + key + "}"];
-
-                if (resolvedMessage === undefined) {
-                    break user_profile;
-                }
-
-                return doRenderAsHtml ? (
-                    <span
-                        // NOTE: The message is trusted. The arguments are not but are escaped.
-                        dangerouslySetInnerHTML={{
-                            __html: resolvedMessage
-                        }}
-                    />
-                ) : (
-                    resolvedMessage
+                messageWithArgsInjected = messageWithArgsInjected.replace(
+                    new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
                );
-            }
-
-            if (!/\$\{[^}]+\}/.test(key)) {
-                const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
-
-                if (resolvedMessage === undefined) {
-                    return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
-                }
-
-                return resolvedMessage;
-            }
-
-            let isFirstMatch = true;
-
-            const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
-                const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
-
-                isFirstMatch = false;
-
-                return replaceBy;
            });

-            return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
+            return messageWithArgsInjected;
+        }
+
+        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[] }): string {
+            const { key, args } = props;
+
+            const match = key.match(/^\$\{(.+)\}$/);
+
+            return resolveMsg({ key: match !== null ? match[1] : key, args }) ?? key;
        }

        return {
-            msgStr: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: false }) as string,
-            msg: (key, ...args) => resolveMsg({ key, args, doRenderAsHtml: true }) as JSX.Element,
-            advancedMsg: (key, ...args) =>
-                resolveMsgAdvanced({
-                    key,
-                    args,
-                    doRenderAsHtml: true
-                }) as JSX.Element,
-            advancedMsgStr: (key, ...args) =>
-                resolveMsgAdvanced({
-                    key,
-                    args,
-                    doRenderAsHtml: false
-                }) as string
+            msgStr: (key, ...args) => {
+                const resolvedMessage = resolveMsg({ key, args });
+                assert(resolvedMessage !== undefined, `Message with key "${key}" not found`);
+                return resolvedMessage;
+            },
+            advancedMsgStr: (key, ...args) => resolveMsgAdvanced({ key, args })
        };
    }

--- a/src/login/i18n/index.ts
+++ b/src/login/i18n/index.ts
@ -1,4 +1,5 @@
-import type { GenericI18n, MessageKey, KcContextLike } from "./i18n";
-export type { MessageKey, KcContextLike };
-export type I18n = GenericI18n<MessageKey>;
+import type { GenericI18n } from "./GenericI18n";
+import type { MessageKey_defaultSet, KcContextLike } from "./i18n";
+export type { MessageKey_defaultSet, KcContextLike };
+export type I18n = GenericI18n<MessageKey_defaultSet>;
 export { createUseI18n } from "./useI18n";
--- a/src/login/i18n/useI18n.ts
+++ b/src/login/i18n/useI18n.ts
@ -1,44 +0,0 @@
-import { useEffect, useState } from "react";
-import {
-    createGetI18n,
-    type GenericI18n,
-    type MessageKey,
-    type KcContextLike
-} from "./i18n";
-import { Reflect } from "tsafe/Reflect";
-
-export function createUseI18n<ExtraMessageKey extends string = never>(messageBundle: {
-    [languageTag: string]: { [key in ExtraMessageKey]: string };
-}) {
-    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
-
-    const { getI18n } = createGetI18n(messageBundle);
-
-    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
-        const { kcContext } = params;
-
-        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
-
-        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(i18n);
-
-        useEffect(() => {
-            let isActive = true;
-
-            prI18n_currentLanguage?.then(i18n => {
-                if (!isActive) {
-                    return;
-                }
-
-                setI18n_toReturn(i18n);
-            });
-
-            return () => {
-                isActive = false;
-            };
-        }, []);
-
-        return { i18n: i18n_toReturn };
-    }
-
-    return { useI18n, ofTypeI18n: Reflect<I18n>() };
-}
--- a/src/login/i18n/useI18n.tsx
+++ b/src/login/i18n/useI18n.tsx
@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import { createGetI18n, type GenericI18n_noJsx, type KcContextLike, type MessageKey_defaultSet } from "./i18n";
+import { GenericI18n } from "./GenericI18n";
+import { Reflect } from "tsafe/Reflect";
+
+export function createUseI18n<MessageKey_themeDefined extends string = never>(messageBundle: {
+    [languageTag: string]: { [key in MessageKey_themeDefined]: string };
+}) {
+    type MessageKey = MessageKey_defaultSet | MessageKey_themeDefined;
+
+    type I18n = GenericI18n<MessageKey>;
+
+    const { withJsx } = (() => {
+        const cache = new WeakMap<GenericI18n_noJsx<MessageKey>, GenericI18n<MessageKey>>();
+
+        function renderHtmlString(htmlString: string): JSX.Element {
+            return (
+                <div
+                    style={{ display: "inline-block" }}
+                    dangerouslySetInnerHTML={{
+                        __html: htmlString
+                    }}
+                />
+            );
+            /*
+            return (
+                <span
+                    dangerouslySetInnerHTML={{
+                        "__html": htmlString
+                    }}
+                />
+            );
+            */
+        }
+
+        function withJsx(i18n_noJsx: GenericI18n_noJsx<MessageKey>): I18n {
+            use_cache: {
+                const i18n = cache.get(i18n_noJsx);
+
+                if (i18n === undefined) {
+                    break use_cache;
+                }
+
+                return i18n;
+            }
+
+            const i18n: I18n = {
+                ...i18n_noJsx,
+                msg: (...args) => renderHtmlString(i18n_noJsx.msgStr(...args)),
+                advancedMsg: (...args) => renderHtmlString(i18n_noJsx.advancedMsgStr(...args))
+            };
+
+            cache.set(i18n_noJsx, i18n);
+
+            return i18n;
+        }
+
+        return { withJsx };
+    })();
+
+    const { getI18n } = createGetI18n(messageBundle);
+
+    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
+        const { kcContext } = params;
+
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+
+        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(withJsx(i18n));
+
+        useEffect(() => {
+            let isActive = true;
+
+            prI18n_currentLanguage?.then(i18n => {
+                if (!isActive) {
+                    return;
+                }
+
+                setI18n_toReturn(withJsx(i18n));
+            });
+
+            return () => {
+                isActive = false;
+            };
+        }, []);
+
+        return { i18n: i18n_toReturn };
+    }
+
+    return { useI18n, ofTypeI18n: Reflect<I18n>() };
+}
--- a/src/login/lib/useUserProfileForm.tsx
+++ b/src/login/lib/useUserProfileForm.tsx
@ -9,7 +9,7 @@ import { formatNumber } from "keycloakify/tools/formatNumber";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import type { PasswordPolicies, Attribute, Validators } from "keycloakify/login/KcContext";
 import type { KcContext } from "../KcContext";
-import type { MessageKey } from "keycloakify/login/i18n";
+import type { MessageKey_defaultSet } from "keycloakify/login/i18n";
 import { KcContextLike as KcContextLike_i18n } from "keycloakify/login/i18n";
 import type { I18n } from "../i18n";

@ -148,7 +148,7 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                        .map(name =>
                            id<Attribute>({
                                name: name,
-                                displayName: id<`\${${MessageKey}}`>(`\${${name}}`),
+                                displayName: id<`\${${MessageKey_defaultSet}}`>(`\${${name}}`),
                                required: true,
                                value: (kcContext.register as any).formData[name] ?? "",
                                html5DataAnnotations: {},
@ -176,7 +176,7 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                        .map(name =>
                            id<Attribute>({
                                name: name,
-                                displayName: id<`\${${MessageKey}}`>(`\${${name}}`),
+                                displayName: id<`\${${MessageKey_defaultSet}}`>(`\${${name}}`),
                                required: true,
                                value: (kcContext as any).user[name] ?? "",
                                html5DataAnnotations: {},
@ -202,7 +202,7 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                    return [
                        id<Attribute>({
                            name: "email",
-                            displayName: id<`\${${MessageKey}}`>(`\${email}`),
+                            displayName: id<`\${${MessageKey_defaultSet}}`>(`\${email}`),
                            required: true,
                            value: (kcContext.email as any).value ?? "",
                            html5DataAnnotations: {},
@ -227,7 +227,7 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                    break patch_legacy_group;
                }

-                const { group, groupDisplayHeader, groupDisplayDescription /*, groupAnnotations*/ } = attribute as Attribute & {
+                const { group, groupDisplayHeader, groupDisplayDescription, groupAnnotations } = attribute as Attribute & {
                    group: string;
                    groupDisplayHeader?: string;
                    groupDisplayDescription?: string;
@ -250,6 +250,7 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                    name: group,
                    displayHeader: groupDisplayHeader,
                    displayDescription: groupDisplayDescription,
+                    annotations: groupAnnotations,
                    html5DataAnnotations: {}
                };
            }
@ -292,7 +293,7 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                    0,
                    {
                        name: "password",
-                        displayName: id<`\${${MessageKey}}`>("${password}"),
+                        displayName: id<`\${${MessageKey_defaultSet}}`>("${password}"),
                        required: true,
                        readOnly: false,
                        validators: {},
@ -302,7 +303,7 @@ export function useUserProfileForm(params: UseUserProfileFormParams): ReturnType
                    },
                    {
                        name: "password-confirm",
-                        displayName: id<`\${${MessageKey}}`>("${passwordConfirm}"),
+                        displayName: id<`\${${MessageKey_defaultSet}}`>("${passwordConfirm}"),
                        required: true,
                        readOnly: false,
                        validators: {},
@ -1133,7 +1134,7 @@ function useGetErrors(params: { kcContext: KcContextLike_useGetErrors; i18n: I18
                    break validator_x;
                }

-                const msgArgs = [errorMessageKey ?? id<MessageKey>("shouldMatchPattern"), pattern] as const;
+                const msgArgs = [errorMessageKey ?? id<MessageKey_defaultSet>("shouldMatchPattern"), pattern] as const;

                errors.push({
                    errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{advancedMsg(...msgArgs)}</Fragment>,
@ -1172,7 +1173,7 @@ function useGetErrors(params: { kcContext: KcContextLike_useGetErrors; i18n: I18
                    break validator_x;
                }

-                const msgArgs = [id<MessageKey>("invalidEmailMessage")] as const;
+                const msgArgs = [id<MessageKey_defaultSet>("invalidEmailMessage")] as const;

                errors.push({
                    errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
@ -1264,11 +1265,11 @@ function useGetErrors(params: { kcContext: KcContextLike_useGetErrors; i18n: I18
                    break validator_x;
                }

-                const msgArgs = [id<MessageKey>("notAValidOption")] as const;
+                const msgArgs = [id<MessageKey_defaultSet>("notAValidOption")] as const;

                errors.push({
-                    errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{advancedMsg(...msgArgs)}</Fragment>,
-                    errorMessageStr: advancedMsgStr(...msgArgs),
+                    errorMessage: <Fragment key={`${attributeName}-${errors.length}`}>{msg(...msgArgs)}</Fragment>,
+                    errorMessageStr: msgStr(...msgArgs),
                    fieldIndex: undefined,
                    source: {
                        type: "validator",
--- a/src/login/pages/Info.tsx
+++ b/src/login/pages/Info.tsx
@ -5,7 +5,7 @@ import type { I18n } from "../i18n";
 export default function Info(props: PageProps<Extract<KcContext, { pageId: "info.ftl" }>, I18n>) {
    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;

-    const { msgStr, msg } = i18n;
+    const { advancedMsgStr, msg } = i18n;

    const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;

@ -34,7 +34,7 @@ export default function Info(props: PageProps<Extract<KcContext, { pageId: "info
                            if (requiredActions) {
                                html += "<b>";

-                                html += requiredActions.map(requiredAction => msgStr(`requiredAction.${requiredAction}` as const)).join(",");
+                                html += requiredActions.map(requiredAction => advancedMsgStr(`requiredAction.${requiredAction}`)).join(", ");

                                html += "</b>";
                            }
--- a/src/login/pages/SelectAuthenticator.tsx
+++ b/src/login/pages/SelectAuthenticator.tsx
@ -8,7 +8,7 @@ export default function SelectAuthenticator(props: PageProps<Extract<KcContext,
    const { url, auth } = kcContext;

    const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
-    const { msg } = i18n;
+    const { msg, advancedMsg } = i18n;

    return (
        <Template
@ -30,11 +30,11 @@ export default function SelectAuthenticator(props: PageProps<Extract<KcContext,
                            value={authenticationSelection.authExecId}
                        >
                            <div className={kcClsx("kcSelectAuthListItemIconClass")}>
-                                <i className={kcClsx(authenticationSelection.iconCssClass, "kcSelectAuthListItemIconPropertyClass")} />
+                                <i className={kcClsx("kcSelectAuthListItemIconPropertyClass", authenticationSelection.iconCssClass)} />
                            </div>
                            <div className={kcClsx("kcSelectAuthListItemBodyClass")}>
-                                <div className={kcClsx("kcSelectAuthListItemHeadingClass")}>{msg(authenticationSelection.displayName)}</div>
-                                <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>{msg(authenticationSelection.helpText)}</div>
+                                <div className={kcClsx("kcSelectAuthListItemHeadingClass")}>{advancedMsg(authenticationSelection.displayName)}</div>
+                                <div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>{advancedMsg(authenticationSelection.helpText)}</div>
                            </div>
                            <div className={kcClsx("kcSelectAuthListItemFillClass")} />
                            <div className={kcClsx("kcSelectAuthListItemArrowClass")}>
--- a/src/login/pages/WebauthnAuthenticate.tsx
+++ b/src/login/pages/WebauthnAuthenticate.tsx
@ -204,13 +204,13 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
                                                            className={kcClsx("kcSelectAuthListItemDescriptionClass")}
                                                        >
                                                            {authenticator.transports.displayNameProperties
-                                                                .map((nameProperty, i, arr) => ({
-                                                                    nameProperty,
+                                                                .map((displayNameProperty, i, arr) => ({
+                                                                    displayNameProperty,
                                                                    hasNext: i !== arr.length - 1
                                                                }))
-                                                                .map(({ nameProperty, hasNext }) => (
-                                                                    <Fragment key={nameProperty}>
-                                                                        <span>{msg(nameProperty)}</span>
+                                                                .map(({ displayNameProperty, hasNext }) => (
+                                                                    <Fragment key={displayNameProperty}>
+                                                                        {advancedMsg(displayNameProperty)}
                                                                        {hasNext && <span>, </span>}
                                                                    </Fragment>
                                                                ))}
--- a/src/tools/ExtractAfterStartingWith.ts
+++ b/src/tools/ExtractAfterStartingWith.ts
@ -1,4 +0,0 @@
-export type ExtractAfterStartingWith<
-    Prefix extends string,
-    StrEnum
-> = StrEnum extends `${Prefix}${infer U}` ? U : never;
--- a/stories/login/pages/Info.stories.tsx
+++ b/stories/login/pages/Info.stories.tsx
@ -43,9 +43,14 @@ export const WithRequiredActions: Story = {
        <KcPageStory
            kcContext={{
                message: {
-                    summary: "Server message"
+                    summary: "Required actions: "
                },
-                requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL"]
+                requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL", "CUSTOM_ACTION"],
+                "x-keycloakify": {
+                    messages: {
+                        "requiredAction.CUSTOM_ACTION": "Custom action"
+                    }
+                }
            }}
        />
    )
--- a/stories/login/pages/Register.stories.tsx
+++ b/stories/login/pages/Register.stories.tsx
@ -69,9 +69,9 @@ export const WithRestrictedToMITStudents: Story = {
                    }
                },
                "x-keycloakify": {
-                    realmMessageBundleUserProfile: {
-                        "${profile.attributes.email.inputHelperTextBefore}": "Please use your MIT or Berkeley email.",
-                        "${profile.attributes.email.pattern.error}":
+                    messages: {
+                        "profile.attributes.email.inputHelperTextBefore": "Please use your MIT or Berkeley email.",
+                        "profile.attributes.email.pattern.error":
                            "This is not an MIT (<strong>@mit.edu</strong>) nor a Berkeley (<strong>@berkeley.edu</strong>) email."
                    }
                }
@ -103,11 +103,11 @@ export const WithFavoritePet: Story = {
                    }
                },
                "x-keycloakify": {
-                    realmMessageBundleUserProfile: {
-                        "${profile.attributes.favoritePet}": "Favorite Pet",
-                        "${profile.attributes.favoritePet.options.cat}": "Fluffy Cat",
-                        "${profile.attributes.favoritePet.options.dog}": "Loyal Dog",
-                        "${profile.attributes.favoritePet.options.fish}": "Peaceful Fish"
+                    messages: {
+                        "profile.attributes.favoritePet": "Favorite Pet",
+                        "profile.attributes.favoritePet.options.cat": "Fluffy Cat",
+                        "profile.attributes.favoritePet.options.dog": "Loyal Dog",
+                        "profile.attributes.favoritePet.options.fish": "Peaceful Fish"
                    }
                }
            }}
@ -177,7 +177,9 @@ export const WithTermsAcceptance: Story = {
            kcContext={{
                termsAcceptanceRequired: true,
                "x-keycloakify": {
-                    realmMessageBundleTermsText: "<a href='https://example.com/terms'>Service Terms of Use</a>"
+                    messages: {
+                        termsText: "<a href='https://example.com/terms'>Service Terms of Use</a>"
+                    }
                }
            }}
        />
--- a/stories/login/pages/SelectAuthenticator.stories.tsx
+++ b/stories/login/pages/SelectAuthenticator.stories.tsx
@ -41,3 +41,44 @@ export const WithDifferentAuthenticationMethods: Story = {
        />
    )
 };
+
+export const WithRealmTranslations: Story = {
+    render: () => (
+        <KcPageStory
+            kcContext={{
+                auth: {
+                    authenticationSelections: [
+                        {
+                            authExecId: "f0c22855-eda7-4092-8565-0c22f77d2ffb",
+                            displayName: "home-idp-discovery-display-name",
+                            helpText: "home-idp-discovery-help-text",
+                            iconCssClass: "kcAuthenticatorDefaultClass"
+                        },
+                        {
+                            authExecId: "20456f5a-8b2b-45f3-98e0-551dcb27e3e1",
+                            displayName: "identity-provider-redirctor-display-name",
+                            helpText: "identity-provider-redirctor-help-text",
+                            iconCssClass: "kcAuthenticatorDefaultClass"
+                        },
+                        {
+                            authExecId: "eb435db9-474e-473a-8da7-c184fa510b96",
+                            displayName: "auth-username-password-form-display-name",
+                            helpText: "auth-username-password-help-text",
+                            iconCssClass: "kcAuthenticatorDefaultClass"
+                        }
+                    ]
+                },
+                "x-keycloakify": {
+                    messages: {
+                        "home-idp-discovery-display-name": "Home identity provider",
+                        "home-idp-discovery-help-text":
+                            "Sign in via your home identity provider which will be automatically determined based on your provided email address.",
+                        "identity-provider-redirctor-display-name": "Identity Provider Redirector",
+                        "identity-provider-redirctor-help-text": "Sign in via your identity provider.",
+                        "auth-username-password-help-text": "Sign in via your username and password."
+                    }
+                }
+            }}
+        />
+    )
+};
--- a/stories/login/pages/Terms.stories.tsx
+++ b/stories/login/pages/Terms.stories.tsx
@ -18,7 +18,9 @@ export const Default: Story = {
        <KcPageStory
            kcContext={{
                "x-keycloakify": {
-                    realmMessageBundleTermsText: "<p>My terms in <strong>English</strong></p>"
+                    messages: {
+                        termsText: "<p>My terms in <strong>English</strong></p>"
+                    }
                }
            }}
        />
@ -34,7 +36,9 @@ export const French: Story = {
                },
                "x-keycloakify": {
                    // cSpell: disable
-                    realmMessageBundleTermsText: "<p>Mes terme en <strong>Français</strong></p>"
+                    messages: {
+                        termsText: "<p>Mes terme en <strong>Français</strong></p>"
+                    }
                    // cSpell: enable
                }
            }}
Author	SHA1	Message	Date
Joseph Garrone	4900200c06	Release candidate	2024-07-13 09:27:10 +02:00
Joseph Garrone	6d82a74db4	Improve incremental build time	2024-07-13 09:26:48 +02:00
Joseph Garrone	2d7f21b021	Release candidate	2024-07-13 09:07:36 +02:00
Joseph Garrone	4292c0c642	Rework i18n	2024-07-13 09:07:11 +02:00
Joseph Garrone	9dca515a42	Add group annotations to Attribute	2024-07-13 08:00:16 +02:00
Joseph Garrone	b577cd9829	Update storybook story SelectAuthenticator.stories.ts	2024-07-11 18:23:08 +02:00
Joseph Garrone	704682cbbe	Release candidate	2024-07-11 17:58:41 +02:00
Joseph Garrone	858f0d77c0	#585	2024-07-11 17:58:26 +02:00
Joseph Garrone	31ef6063f2	Add missing font and optimize keycloak theme resources extraction	2024-07-11 17:49:58 +02:00
Joseph Garrone	f3bd81c55b	Release candidate	2024-07-10 22:18:46 +02:00
Joseph Garrone	24bb4902c2	Includes in the kcContext missing realm defined translations #582	2024-07-10 22:18:24 +02:00
Joseph Garrone	ca7821cfad	Remove unused import	2024-07-10 01:26:55 +02:00
Joseph Garrone	a73b25580e	Release candidate	2024-07-09 15:00:21 +02:00
Joseph Garrone	82e179730e	Fix error related to npm config get	2024-07-09 14:59:59 +02:00
Joseph Garrone	b5d5002061	Mock kcContext.url.resourcePath for account v3	2024-07-09 14:04:25 +02:00
Joseph Garrone	2ab2c9e05e	Release candidate	2024-07-08 15:21:23 +02:00
Joseph Garrone	b1e9ba3ac6	Fix buil when paths with spaces	2024-07-08 15:21:03 +02:00
Joseph Garrone	5822ed0185	Relase candidate	2024-07-08 14:54:37 +02:00
Joseph Garrone	17b295788d	Generate i18n messages for account v3	2024-07-08 14:54:09 +02:00
Joseph Garrone	6cd5b958c7	Fix typo	2024-07-08 00:21:40 +02:00
Joseph Garrone	df92cc5f73	Fix	2024-07-08 00:21:31 +02:00