keycloakify 10.0.0-rc.36 → 10.0.0-rc.38

package/src/login/i18n/i18n.tsx

@@ -1,7 +1,7 @@
 import "keycloakify/tools/Object.fromEntries";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { assert } from "tsafe/assert";
-import fallbackMessages from "./baseMessages/en";
+import messages_fallbackLanguage from "./baseMessages/en";
 import { getMessages } from "./baseMessages";
 import type { KcContext } from "../KcContext";
 import { Reflect } from "tsafe/Reflect";
@@ -18,7 +18,7 @@ export type KcContextLike = {
 
 assert<KcContext extends KcContextLike ? true : false>();
 
-export type MessageKey = keyof typeof fallbackMessages;
+export type MessageKey = keyof typeof messages_fallbackLanguage;
 
 export type GenericI18n<MessageKey extends string> = {
     /**
@@ -80,183 +80,262 @@ export type GenericI18n<MessageKey extends string> = {
      * See advancedMsg() but instead of returning a JSX.Element it returns a string.
      */
     advancedMsgStr: (key: string, ...args: (string | undefined)[]) => string;
+
+    /**
+     * Initially the messages are in english (fallback language).
+     * The translations in the current language are being fetched dynamically.
+     * This property is true while the translations are being fetched.
+     */
+    isFetchingTranslations: boolean;
 };
 
-export type I18n = GenericI18n<MessageKey>;
+function createGetI18n<ExtraMessageKey extends string = never>(extraMessages: { [languageTag: string]: { [key in ExtraMessageKey]: string } }) {
+    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
+
+    type Result = { i18n: I18n; prI18n_currentLanguage: Promise<I18n> | undefined };
+
+    const cachedResultByKcContext = new WeakMap<KcContextLike, Result>();
+
+    function getI18n(params: { kcContext: KcContextLike }): Result {
+        const { kcContext } = params;
+
+        use_cache: {
+            const cachedResult = cachedResultByKcContext.get(kcContext);
+
+            if (cachedResult === undefined) {
+                break use_cache;
+            }
+
+            return cachedResult;
+        }
+
+        const partialI18n: Pick<I18n, "currentLanguageTag" | "getChangeLocalUrl" | "labelBySupportedLanguageTag"> = {
+            currentLanguageTag: kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag,
+            getChangeLocalUrl: 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`);
+
+                return targetSupportedLocale.url;
+            },
+            labelBySupportedLanguageTag: Object.fromEntries((kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label]))
+        };
+
+        const { createI18nTranslationFunctions } = createI18nTranslationFunctionsFactory<MessageKey, ExtraMessageKey>({
+            messages_fallbackLanguage,
+            extraMessages_fallbackLanguage: extraMessages[fallbackLanguageTag],
+            extraMessages: extraMessages[partialI18n.currentLanguageTag],
+            __localizationRealmOverridesUserProfile: kcContext.__localizationRealmOverridesUserProfile
+        });
+
+        const isCurrentLanguageFallbackLanguage = partialI18n.currentLanguageTag !== fallbackLanguageTag;
+
+        const result: Result = {
+            i18n: {
+                ...partialI18n,
+                ...createI18nTranslationFunctions({ messages: undefined }),
+                isFetchingTranslations: !isCurrentLanguageFallbackLanguage
+            },
+            prI18n_currentLanguage: isCurrentLanguageFallbackLanguage
+                ? undefined
+                : (async () => {
+                      const messages = await getMessages(partialI18n.currentLanguageTag);
+
+                      const i18n_currentLanguage: I18n = {
+                          ...partialI18n,
+                          ...createI18nTranslationFunctions({ messages }),
+                          isFetchingTranslations: false
+                      };
+
+                      // NOTE: This promise.resolve is just because without it we TypeScript
+                      // gives a Variable 'result' is used before being assigned. error
+                      await Promise.resolve().then(() => {
+                          result.i18n = i18n_currentLanguage;
+                          result.prI18n_currentLanguage = undefined;
+                      });
+
+                      return i18n_currentLanguage;
+                  })()
+        };
+
+        cachedResultByKcContext.set(kcContext, result);
+
+        return result;
+    }
+
+    return { getI18n };
+}
 
 export function createUseI18n<ExtraMessageKey extends string = never>(extraMessages: {
     [languageTag: string]: { [key in ExtraMessageKey]: string };
 }) {
-    function useI18n(params: { kcContext: KcContextLike }): GenericI18n<MessageKey | ExtraMessageKey> | null {
+    type I18n = GenericI18n<MessageKey | ExtraMessageKey>;
+
+    const { getI18n } = createGetI18n(extraMessages);
+
+    function useI18n(params: { kcContext: KcContextLike }): I18n {
         const { kcContext } = params;
 
-        const [i18n, setI18n] = useState<GenericI18n<ExtraMessageKey | MessageKey> | undefined>(undefined);
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
 
-        const refHasStartedFetching = useRef(false);
+        const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(i18n);
 
         useEffect(() => {
-            if (refHasStartedFetching.current) {
-                return;
-            }
+            let isActive = true;
 
-            refHasStartedFetching.current = true;
-
-            (async () => {
-                const { currentLanguageTag = fallbackLanguageTag } = kcContext.locale ?? {};
-
-                setI18n({
-                    ...createI18nTranslationFunctions({
-                        fallbackMessages: {
-                            ...fallbackMessages,
-                            ...(extraMessages[fallbackLanguageTag] ?? {})
-                        } as any,
-                        messages: {
-                            ...(await getMessages(currentLanguageTag)),
-                            ...(extraMessages[currentLanguageTag] ?? {})
-                        } as any,
-                        __localizationRealmOverridesUserProfile: kcContext.__localizationRealmOverridesUserProfile
-                    }),
-                    currentLanguageTag,
-                    getChangeLocalUrl: 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`);
-
-                        return targetSupportedLocale.url;
-                    },
-                    labelBySupportedLanguageTag: Object.fromEntries(
-                        (kcContext.locale?.supported ?? []).map(({ languageTag, label }) => [languageTag, label])
-                    )
-                });
-            })();
+            prI18n_currentLanguage?.then(i18n => {
+                if (!isActive) {
+                    return;
+                }
+
+                setI18n_toReturn(i18n);
+            });
+
+            return () => {
+                isActive = false;
+            };
         }, []);
 
-        return i18n ?? null;
+        return i18n_toReturn;
     }
 
-    return {
-        useI18n,
-        ofTypeI18n: Reflect<GenericI18n<MessageKey | ExtraMessageKey>>()
-    };
+    return { useI18n, ofTypeI18n: Reflect<I18n>() };
 }
 
-function createI18nTranslationFunctions<MessageKey extends string>(params: {
-    fallbackMessages: Record<MessageKey, string>;
-    messages: Record<MessageKey, string>;
+function createI18nTranslationFunctionsFactory<MessageKey extends string, ExtraMessageKey extends string>(params: {
+    messages_fallbackLanguage: Record<MessageKey, string>;
+    extraMessages_fallbackLanguage: Record<ExtraMessageKey, string> | undefined;
+    extraMessages: Partial<Record<ExtraMessageKey, string>> | undefined;
     __localizationRealmOverridesUserProfile: Record<string, string> | undefined;
-}): Pick<GenericI18n<MessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
-    const { fallbackMessages, messages, __localizationRealmOverridesUserProfile } = params;
-
-    function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
-        const { key, args, doRenderAsHtml } = props;
+}) {
+    const { __localizationRealmOverridesUserProfile, extraMessages } = params;
 
-        const messageOrUndefined: string | undefined = (messages as any)[key] ?? (fallbackMessages as any)[key];
+    const messages_fallbackLanguage = {
+        ...params.messages_fallbackLanguage,
+        ...params.extraMessages_fallbackLanguage
+    };
 
-        if (messageOrUndefined === undefined) {
-            return undefined;
-        }
+    function createI18nTranslationFunctions(params: {
+        messages: Partial<Record<MessageKey, string>> | undefined;
+    }): Pick<GenericI18n<MessageKey | ExtraMessageKey>, "msg" | "msgStr" | "advancedMsg" | "advancedMsgStr"> {
+        const messages = {
+            ...params.messages,
+            ...extraMessages
+        };
 
-        const message = messageOrUndefined;
+        function resolveMsg(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): string | JSX.Element | undefined {
+            const { key, args, doRenderAsHtml } = props;
 
-        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];
+            const messageOrUndefined: string | undefined = (messages as any)[key] ?? (messages_fallbackLanguage as any)[key];
 
-            if (startIndex === undefined) {
-                // No {0} in message (no arguments expected)
-                return message;
+            if (messageOrUndefined === undefined) {
+                return undefined;
             }
 
-            let messageWithArgsInjected = message;
+            const message = messageOrUndefined;
 
-            args.forEach((arg, i) => {
-                if (arg === undefined) {
-                    return;
+            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;
                 }
 
-                messageWithArgsInjected = messageWithArgsInjected.replace(
-                    new RegExp(`\\{${i + startIndex}\\}`, "g"),
-                    arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
-                );
-            });
+                let messageWithArgsInjected = message;
 
-            return messageWithArgsInjected;
-        })();
-
-        return doRenderAsHtml ? (
-            <span
-                // NOTE: The message is trusted. The arguments are not but are escaped.
-                dangerouslySetInnerHTML={{
-                    __html: messageWithArgsInjectedIfAny
-                }}
-            />
-        ) : (
-            messageWithArgsInjectedIfAny
-        );
-    }
+                args.forEach((arg, i) => {
+                    if (arg === undefined) {
+                        return;
+                    }
 
-    function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
-        const { key, args, doRenderAsHtml } = props;
+                    messageWithArgsInjected = messageWithArgsInjected.replace(
+                        new RegExp(`\\{${i + startIndex}\\}`, "g"),
+                        arg.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+                    );
+                });
 
-        if (__localizationRealmOverridesUserProfile !== undefined && key in __localizationRealmOverridesUserProfile) {
-            const resolvedMessage = __localizationRealmOverridesUserProfile[key];
+                return messageWithArgsInjected;
+            })();
 
             return doRenderAsHtml ? (
                 <span
                     // NOTE: The message is trusted. The arguments are not but are escaped.
                     dangerouslySetInnerHTML={{
-                        __html: resolvedMessage
+                        __html: messageWithArgsInjectedIfAny
                     }}
                 />
             ) : (
-                resolvedMessage
+                messageWithArgsInjectedIfAny
             );
         }
 
-        if (!/\$\{[^}]+\}/.test(key)) {
-            const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
+        function resolveMsgAdvanced(props: { key: string; args: (string | undefined)[]; doRenderAsHtml: boolean }): JSX.Element | string {
+            const { key, args, doRenderAsHtml } = props;
+
+            if (__localizationRealmOverridesUserProfile !== undefined && key in __localizationRealmOverridesUserProfile) {
+                const resolvedMessage = __localizationRealmOverridesUserProfile[key];
+
+                return doRenderAsHtml ? (
+                    <span
+                        // NOTE: The message is trusted. The arguments are not but are escaped.
+                        dangerouslySetInnerHTML={{
+                            __html: resolvedMessage
+                        }}
+                    />
+                ) : (
+                    resolvedMessage
+                );
+            }
+
+            if (!/\$\{[^}]+\}/.test(key)) {
+                const resolvedMessage = resolveMsg({ key, args, doRenderAsHtml });
 
-            if (resolvedMessage === undefined) {
-                return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
+                if (resolvedMessage === undefined) {
+                    return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: key }} /> : key;
+                }
+
+                return resolvedMessage;
             }
 
-            return resolvedMessage;
-        }
+            let isFirstMatch = true;
 
-        let isFirstMatch = true;
+            const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
+                const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
 
-        const resolvedComplexMessage = key.replace(/\$\{([^}]+)\}/g, (...[, key_i]) => {
-            const replaceBy = resolveMsg({ key: key_i, args: isFirstMatch ? args : [], doRenderAsHtml: false }) ?? key_i;
+                isFirstMatch = false;
 
-            isFirstMatch = false;
+                return replaceBy;
+            });
 
-            return replaceBy;
-        });
+            return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
+        }
 
-        return doRenderAsHtml ? <span dangerouslySetInnerHTML={{ __html: resolvedComplexMessage }} /> : resolvedComplexMessage;
+        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
+        };
     }
 
-    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
-    };
+    return { createI18nTranslationFunctions };
 }

package/src/login/i18n/index.ts

@@ -1,2 +1,10 @@
-export type { I18n, MessageKey } from "./i18n";
-export { createUseI18n, fallbackLanguageTag } from "./i18n";
+export type { MessageKey, KcContextLike } from "./i18n";
+import { createUseI18n } from "./i18n";
+export { createUseI18n };
+export { fallbackLanguageTag } from "./i18n";
+
+const { useI18n, ofTypeI18n } = createUseI18n({});
+
+export type I18n = typeof ofTypeI18n;
+
+export { useI18n };

package/src/login/index.ts

@@ -1,4 +1,4 @@
 export type { ExtendKcContext, Attribute } from "keycloakify/login/KcContext";
-export type { PageProps } from "keycloakify/login/pages/PageProps";
+export type { ClassKey } from "keycloakify/login/TemplateProps";
 export { useDownloadTerms } from "keycloakify/login/lib/useDownloadTerms";
 export { createUseI18n } from "keycloakify/login/i18n";

package/src/login/lib/{useGetClassName.ts → kcClsx.ts}

@@ -1,7 +1,7 @@
-import { createUseClassName } from "keycloakify/lib/useGetClassName";
+import { createGetKcClsx } from "keycloakify/lib/getKcClsx";
 import type { ClassKey } from "keycloakify/login/TemplateProps";
 
-export const { useGetClassName } = createUseClassName<ClassKey>({
+export const { getKcClsx } = createGetKcClsx<ClassKey>({
     defaultClasses: {
         kcHtmlClass: "login-pf",
         kcBodyClass: undefined,
@@ -137,3 +137,7 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
         kcLabelClass: "pf-c-form__label pf-c-form__label-text"
     }
 });
+
+export type { ClassKey };
+
+export type KcClsx = ReturnType<typeof getKcClsx>["kcClsx"];

package/src/login/lib/useUserProfileForm.tsx

@@ -7,9 +7,11 @@ import { useConstCallback } from "keycloakify/tools/useConstCallback";
 import { emailRegexp } from "keycloakify/tools/emailRegExp";
 import { formatNumber } from "keycloakify/tools/formatNumber";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
-import type { KcContext, PasswordPolicies, Attribute, Validators } from "keycloakify/login/KcContext";
+import type { PasswordPolicies, Attribute, Validators } from "keycloakify/login/KcContext";
+import type { KcContext } from "../KcContext";
 import type { MessageKey } from "keycloakify/login/i18n";
-import type { I18n } from "../i18n";
+import { KcContextLike as KcContextLike_i18n } from "keycloakify/login/i18n";
+import { useI18n } from "../i18n";
 
 export type FormFieldError = {
     errorMessage: JSX.Element;
@@ -64,23 +66,23 @@ export type FormAction =
           fieldIndex: number | undefined;
       };
 
-export type KcContextLike = {
-    messagesPerField: Pick<KcContext.Common["messagesPerField"], "existsError" | "get">;
-    profile: {
-        attributesByName: Record<string, Attribute>;
-        html5DataAnnotations?: Record<string, string>;
-    };
-    passwordRequired?: boolean;
-    realm: { registrationEmailAsUsername: boolean };
-    passwordPolicies?: PasswordPolicies;
-    url: {
-        resourcesPath: string;
+export type KcContextLike = KcContextLike_i18n &
+    KcContextLike_useGetErrors & {
+        profile: {
+            attributesByName: Record<string, Attribute>;
+            html5DataAnnotations?: Record<string, string>;
+        };
+        passwordRequired?: boolean;
+        realm: { registrationEmailAsUsername: boolean };
+        url: {
+            resourcesPath: string;
+        };
     };
-};
+
+assert<Extract<KcContext.Register, { pageId: "register.ftl" }> extends KcContextLike ? true : false>();
 
 export type ParamsOfUseUserProfileForm = {
     kcContext: KcContextLike;
-    i18n: I18n;
     doMakeUserConfirmPassword: boolean;
 };
 
@@ -103,7 +105,7 @@ namespace internal {
 }
 
 export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTypeOfUseUserProfileForm {
-    const { kcContext, i18n, doMakeUserConfirmPassword } = params;
+    const { kcContext, doMakeUserConfirmPassword } = params;
 
     const { insertScriptTags } = useInsertScriptTags({
         componentOrHookName: "useUserProfileForm",
@@ -120,8 +122,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
     }, []);
 
     const { getErrors } = useGetErrors({
-        kcContext,
-        i18n
+        kcContext
     });
 
     const initialState = useMemo((): internal.State => {
@@ -515,12 +516,19 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
     };
 }
 
-function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField" | "passwordPolicies">; i18n: I18n }) {
-    const { kcContext, i18n } = params;
+type KcContextLike_useGetErrors = KcContextLike_i18n & {
+    messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
+    passwordPolicies?: PasswordPolicies;
+};
+
+assert<KcContextLike extends KcContextLike_useGetErrors ? true : false>();
+
+function useGetErrors(params: { kcContext: KcContextLike_useGetErrors }) {
+    const { kcContext } = params;
 
     const { messagesPerField, passwordPolicies } = kcContext;
 
-    const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
+    const { msg, msgStr, advancedMsg, advancedMsgStr } = useI18n({ kcContext });
 
     const getErrors = useConstCallback(
         (params: {

package/src/login/pages/Code.tsx

@@ -1,30 +1,32 @@
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function Code(props: PageProps<Extract<KcContext, { pageId: "code.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function Code(props: PageProps<Extract<KcContext, { pageId: "code.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { code } = kcContext;
 
-    const { msg } = i18n;
+    const { msg } = useI18n({ kcContext });
 
     return (
         <Template
-            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            kcContext={kcContext}
+            doUseDefaultCss={doUseDefaultCss}
+            classes={classes}
             headerNode={code.success ? msg("codeSuccessTitle") : msg("codeErrorTitle", code.error)}
         >
             <div id="kc-code">
                 {code.success ? (
                     <>
                         <p>{msg("copyCodeInstruction")}</p>
-                        <input id="code" className={getClassName("kcTextareaClass")} defaultValue={code.code} />
+                        <input id="code" className={kcClsx("kcTextareaClass")} defaultValue={code.code} />
                     </>
                 ) : (
                     <p id="error">{code.error}</p>

package/src/login/pages/DeleteAccountConfirm.tsx

@@ -1,23 +1,22 @@
-import { clsx } from "keycloakify/tools/clsx";
-import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
+import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
-import type { I18n } from "../i18n";
+import { useI18n } from "../i18n";
 
-export default function DeleteAccountConfirm(props: PageProps<Extract<KcContext, { pageId: "delete-account-confirm.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+export default function DeleteAccountConfirm(props: PageProps<Extract<KcContext, { pageId: "delete-account-confirm.ftl" }>>) {
+    const { kcContext, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { url, triggered_from_aia } = kcContext;
 
-    const { msg, msgStr } = i18n;
+    const { msg, msgStr } = useI18n({ kcContext });
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("deleteAccountConfirm")}>
+        <Template kcContext={kcContext} doUseDefaultCss={doUseDefaultCss} classes={classes} headerNode={msg("deleteAccountConfirm")}>
             <form action={url.loginAction} className="form-vertical" method="post">
                 <div className="alert alert-warning" style={{ marginTop: "0", marginBottom: "30px" }}>
                     <span className="pficon pficon-warning-triangle-o"></span>
@@ -37,13 +36,13 @@ export default function DeleteAccountConfirm(props: PageProps<Extract<KcContext,
                 <p className="delete-account-text">{msg("finalDeletionConfirmation")}</p>
                 <div id="kc-form-buttons">
                     <input
-                        className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonLargeClass"))}
+                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                         type="submit"
                         value={msgStr("doConfirmDelete")}
                     />
                     {triggered_from_aia && (
                         <button
-                            className={clsx(getClassName("kcButtonClass"), getClassName("kcButtonDefaultClass"), getClassName("kcButtonLargeClass"))}
+                            className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                             style={{ marginLeft: "calc(100% - 220px)" }}
                             type="submit"
                             name="cancel-aia"