keycloakify 6.11.8 → 6.12.0

package/src/lib/i18n/index.tsx

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

package/src/lib/index.ts

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

package/src/lib/{components → pages}/Error.tsx

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

package/src/lib/{components → pages}/IdpReviewUserProfile.tsx

@@ -1,21 +1,12 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useState } from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
 import { UserProfileFormFields } from "./shared/UserProfileCommons";
+import type { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+import type { I18nBase } from "../i18n";
 
-export type IdpReviewUserProfileProps = KcProps & {
-    kcContext: KcContextBase.IdpReviewUserProfile;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function IdpReviewUserProfile(props: PageProps<KcContextBase.IdpReviewUserProfile, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { msg, msgStr } = i18n;
 
@@ -53,6 +44,4 @@ const IdpReviewUserProfile = memo((props: IdpReviewUserProfileProps) => {
             }
         />
     );
-});
-
-export default IdpReviewUserProfile;
+}

package/src/lib/{components → pages}/Info.tsx

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

package/src/lib/{components → pages}/Login.tsx

@@ -1,22 +1,12 @@
-import React, { useState, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useState, type FormEventHandler } from "react";
 import { clsx } from "../tools/clsx";
-import { useConstCallback } from "powerhooks/useConstCallback";
-import type { FormEventHandler } from "react";
-import type { I18n } from "../i18n";
+import { useConstCallback } from "../tools/useConstCallback";
+import type { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+import type { I18nBase } from "../i18n";
 
-export type LoginProps = KcProps & {
-    kcContext: KcContextBase.Login;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const Login = memo((props: LoginProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function Login(props: PageProps<KcContextBase.Login, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
 
@@ -199,6 +189,4 @@ const Login = memo((props: LoginProps) => {
             }
         />
     );
-});
-
-export default Login;
+}

package/src/lib/{components → pages}/LoginConfigTotp.tsx

@@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+import type { I18nBase } from "../i18n";
 
-export type LoginConfigTotpProps = KcProps & {
-    kcContext: KcContextBase.LoginConfigTotp;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginConfigTotp(props: PageProps<KcContextBase.LoginConfigTotp, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
 
@@ -188,6 +179,4 @@ const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
             }
         />
     );
-});
-
-export default LoginConfigTotp;
+}

package/src/lib/{components → pages}/LoginIdpLinkConfirm.tsx

@@ -1,20 +1,11 @@
-import React, { memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React from "react";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+import type { I18nBase } from "../i18n";
 
-export type LoginIdpLinkConfirmProps = KcProps & {
-    kcContext: KcContextBase.LoginIdpLinkConfirm;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginIdpLinkConfirm(props: PageProps<KcContextBase.LoginIdpLinkConfirm, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { url, idpAlias } = kcContext;
 
@@ -60,6 +51,4 @@ const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
             }
         />
     );
-});
-
-export default LoginIdpLinkConfirm;
+}

package/src/lib/{components → pages}/LoginIdpLinkEmail.tsx

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

package/src/lib/{components → pages}/LoginOtp.tsx

@@ -1,22 +1,13 @@
-import React, { useEffect, memo } from "react";
-import DefaultTemplate from "./Template";
-import type { TemplateProps } from "./Template";
-import type { KcProps } from "./KcProps";
-import type { KcContextBase } from "../getKcContext/KcContextBase";
+import React, { useEffect } from "react";
 import { headInsert } from "../tools/headInsert";
 import { pathJoin } from "../../bin/tools/pathJoin";
 import { clsx } from "../tools/clsx";
-import type { I18n } from "../i18n";
+import type { KcContextBase } from "../getKcContext";
+import type { PageProps } from "../KcProps";
+import type { I18nBase } from "../i18n";
 
-export type LoginOtpProps = KcProps & {
-    kcContext: KcContextBase.LoginOtp;
-    i18n: I18n;
-    doFetchDefaultThemeResources?: boolean;
-    Template?: (props: TemplateProps) => JSX.Element | null;
-};
-
-const LoginOtp = memo((props: LoginOtpProps) => {
-    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
+export default function LoginOtp(props: PageProps<KcContextBase.LoginOtp, I18nBase>) {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template, ...kcProps } = props;
 
     const { otpLogin, url } = kcContext;
 
@@ -96,7 +87,7 @@ const LoginOtp = memo((props: LoginOtpProps) => {
             }
         />
     );
-});
+}
 
 declare const $: any;
 
@@ -121,5 +112,3 @@ function evaluateInlineScript() {
         }
     });
 }
-
-export default LoginOtp;

package/src/lib/{components → pages}/LoginPageExpired.tsx

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