keycloakify 6.0.0-beta.0 → 6.0.0-beta.12

package/src/lib/components/KcApp.tsx

@@ -1,51 +1,83 @@
-import { memo } from "react";
+import React, { lazy, memo, Suspense } from "react";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { KcProps } from "./KcProps";
-import { Login } from "./Login";
-import { Register } from "./Register";
-import { RegisterUserProfile } from "./RegisterUserProfile";
-import { Info } from "./Info";
-import { Error } from "./Error";
-import { LoginResetPassword } from "./LoginResetPassword";
-import { LoginVerifyEmail } from "./LoginVerifyEmail";
-import { Terms } from "./Terms";
-import { LoginOtp } from "./LoginOtp";
-import { LoginUpdatePassword } from "./LoginUpdatePassword";
-import { LoginUpdateProfile } from "./LoginUpdateProfile";
-import { LoginIdpLinkConfirm } from "./LoginIdpLinkConfirm";
-import { LoginPageExpired } from "./LoginPageExpired";
-import { LoginIdpLinkEmail } from "./LoginIdpLinkEmail";
+import { __unsafe_useI18n as useI18n } from "../i18n";
 import type { I18n } from "../i18n";
 
-export const KcApp = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase; useI18n: () => I18n } & KcProps) => {
-    switch (kcContext.pageId) {
-        case "login.ftl":
-            return <Login {...{ kcContext, useI18n, ...props }} />;
-        case "register.ftl":
-            return <Register {...{ kcContext, useI18n, ...props }} />;
-        case "register-user-profile.ftl":
-            return <RegisterUserProfile {...{ kcContext, useI18n, ...props }} />;
-        case "info.ftl":
-            return <Info {...{ kcContext, useI18n, ...props }} />;
-        case "error.ftl":
-            return <Error {...{ kcContext, useI18n, ...props }} />;
-        case "login-reset-password.ftl":
-            return <LoginResetPassword {...{ kcContext, useI18n, ...props }} />;
-        case "login-verify-email.ftl":
-            return <LoginVerifyEmail {...{ kcContext, useI18n, ...props }} />;
-        case "terms.ftl":
-            return <Terms {...{ kcContext, useI18n, ...props }} />;
-        case "login-otp.ftl":
-            return <LoginOtp {...{ kcContext, useI18n, ...props }} />;
-        case "login-update-password.ftl":
-            return <LoginUpdatePassword {...{ kcContext, useI18n, ...props }} />;
-        case "login-update-profile.ftl":
-            return <LoginUpdateProfile {...{ kcContext, useI18n, ...props }} />;
-        case "login-idp-link-confirm.ftl":
-            return <LoginIdpLinkConfirm {...{ kcContext, useI18n, ...props }} />;
-        case "login-idp-link-email.ftl":
-            return <LoginIdpLinkEmail {...{ kcContext, useI18n, ...props }} />;
-        case "login-page-expired.ftl":
-            return <LoginPageExpired {...{ kcContext, useI18n, ...props }} />;
+const Login = lazy(() => import("./Login"));
+const Register = lazy(() => import("./Register"));
+const RegisterUserProfile = lazy(() => import("./RegisterUserProfile"));
+const Info = lazy(() => import("./Info"));
+const Error = lazy(() => import("./Error"));
+const LoginResetPassword = lazy(() => import("./LoginResetPassword"));
+const LoginVerifyEmail = lazy(() => import("./LoginVerifyEmail"));
+const Terms = lazy(() => import("./Terms"));
+const LoginOtp = lazy(() => import("./LoginOtp"));
+const LoginUpdatePassword = lazy(() => import("./LoginUpdatePassword"));
+const LoginUpdateProfile = lazy(() => import("./LoginUpdateProfile"));
+const LoginIdpLinkConfirm = lazy(() => import("./LoginIdpLinkConfirm"));
+const LoginPageExpired = lazy(() => import("./LoginPageExpired"));
+const LoginIdpLinkEmail = lazy(() => import("./LoginIdpLinkEmail"));
+const LoginConfigTotp = lazy(() => import("./LoginConfigTotp"));
+const LogoutConfirm = lazy(() => import("./LogoutConfirm"));
+
+const KcApp = memo(({ kcContext, i18n: userProvidedI18n, ...kcProps }: { kcContext: KcContextBase; i18n?: I18n } & KcProps) => {
+    const i18n = (function useClosure() {
+        const i18n = useI18n({
+            kcContext,
+            "extraMessages": {},
+            "doSkip": userProvidedI18n !== undefined
+        });
+
+        return userProvidedI18n ?? i18n;
+    })();
+
+    if (i18n === null) {
+        return null;
     }
+
+    const props = { i18n, ...kcProps };
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    case "login.ftl":
+                        return <Login {...{ kcContext, ...props }} />;
+                    case "register.ftl":
+                        return <Register {...{ kcContext, ...props }} />;
+                    case "register-user-profile.ftl":
+                        return <RegisterUserProfile {...{ kcContext, ...props }} />;
+                    case "info.ftl":
+                        return <Info {...{ kcContext, ...props }} />;
+                    case "error.ftl":
+                        return <Error {...{ kcContext, ...props }} />;
+                    case "login-reset-password.ftl":
+                        return <LoginResetPassword {...{ kcContext, ...props }} />;
+                    case "login-verify-email.ftl":
+                        return <LoginVerifyEmail {...{ kcContext, ...props }} />;
+                    case "terms.ftl":
+                        return <Terms {...{ kcContext, ...props }} />;
+                    case "login-otp.ftl":
+                        return <LoginOtp {...{ kcContext, ...props }} />;
+                    case "login-update-password.ftl":
+                        return <LoginUpdatePassword {...{ kcContext, ...props }} />;
+                    case "login-update-profile.ftl":
+                        return <LoginUpdateProfile {...{ kcContext, ...props }} />;
+                    case "login-idp-link-confirm.ftl":
+                        return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
+                    case "login-idp-link-email.ftl":
+                        return <LoginIdpLinkEmail {...{ kcContext, ...props }} />;
+                    case "login-page-expired.ftl":
+                        return <LoginPageExpired {...{ kcContext, ...props }} />;
+                    case "login-config-totp.ftl":
+                        return <LoginConfigTotp {...{ kcContext, ...props }} />;
+                    case "logout-confirm.ftl":
+                        return <LogoutConfirm {...{ kcContext, ...props }} />;
+                }
+            })()}
+        </Suspense>
+    );
 });
+
+export default KcApp;

package/src/lib/components/KcProps.ts

@@ -37,7 +37,7 @@ export const defaultKcTemplateProps = {
     "stylesCommon": [
         "node_modules/patternfly/dist/css/patternfly.min.css",
         "node_modules/patternfly/dist/css/patternfly-additions.min.css",
-        "lib/zocial/zocial.css",
+        "lib/zocial/zocial.css"
     ],
     "styles": ["css/login.css"],
     "scripts": [],
@@ -60,7 +60,7 @@ export const defaultKcTemplateProps = {
     "kcFormGroupClass": ["form-group"],
     "kcLabelWrapperClass": ["col-xs-12", "col-sm-12", "col-md-12", "col-lg-12"],
     "kcSignUpClass": ["login-pf-signup"],
-    "kcInfoAreaWrapperClass": [],
+    "kcInfoAreaWrapperClass": []
 } as const;
 
 assert<typeof defaultKcTemplateProps extends KcTemplateProps ? true : false>();
@@ -192,7 +192,7 @@ export const defaultKcProps = {
     "kcSelectOTPListItemClass": ["card-pf-body", "card-pf-top-element"],
     "kcAuthenticatorOtpCircleClass": ["fa", "fa-mobile", "card-pf-icon-circle"],
     "kcSelectOTPItemHeadingClass": ["card-pf-title", "text-center"],
-    "kcFormOptionsWrapperClass": [],
+    "kcFormOptionsWrapperClass": []
 } as const;
 
 assert<typeof defaultKcProps extends KcProps ? true : false>();

package/src/lib/components/Login.tsx

@@ -1,16 +1,16 @@
-import { useState, memo } from "react";
-import { Template } from "./Template";
+import React, { useState, memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
-import { useCssAndCx } from "tss-react";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import type { FormEventHandler } from "react";
+import type { I18n } from "../i18n";
 
-export const Login = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.Login; useI18n: () => I18n } & KcProps) => {
+const Login = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.Login; i18n: I18n } & KcProps) => {
     const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
 
-    const { msg, msgStr } = useI18n();
+    const { msg, msgStr } = i18n;
 
     const { cx } = useCssAndCx();
 
@@ -32,7 +32,7 @@ export const Login = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
 
     return (
         <Template
-            {...{ kcContext, useI18n, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             displayInfo={social.displayInfo}
             displayWide={realm.password && social.providers !== undefined}
@@ -74,7 +74,7 @@ export const Login = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
                                                         ? { "disabled": true }
                                                         : {
                                                               "autoFocus": true,
-                                                              "autoComplete": "off",
+                                                              "autoComplete": "off"
                                                           })}
                                                 />
                                             </>
@@ -106,7 +106,7 @@ export const Login = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
                                                         type="checkbox"
                                                         {...(login.rememberMe
                                                             ? {
-                                                                  "checked": true,
+                                                                  "checked": true
                                                               }
                                                             : {})}
                                                     />
@@ -132,7 +132,7 @@ export const Login = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
                                         name="credentialId"
                                         {...(auth?.selectedCredential !== undefined
                                             ? {
-                                                  "value": auth.selectedCredential,
+                                                  "value": auth.selectedCredential
                                               }
                                             : {})}
                                     />
@@ -142,7 +142,7 @@ export const Login = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
                                             props.kcButtonClass,
                                             props.kcButtonPrimaryClass,
                                             props.kcButtonBlockClass,
-                                            props.kcButtonLargeClass,
+                                            props.kcButtonLargeClass
                                         )}
                                         name="login"
                                         id="kc-login"
@@ -159,7 +159,7 @@ export const Login = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
                             <ul
                                 className={cx(
                                     props.kcFormSocialAccountListClass,
-                                    social.providers.length > 4 && props.kcFormSocialAccountDoubleListClass,
+                                    social.providers.length > 4 && props.kcFormSocialAccountDoubleListClass
                                 )}
                             >
                                 {social.providers.map(p => (
@@ -191,3 +191,5 @@ export const Login = memo(({ kcContext, useI18n, ...props }: { kcContext: KcCont
         />
     );
 });
+
+export default Login;

package/src/lib/components/LoginConfigTotp.tsx

@@ -0,0 +1,186 @@
+import React, { memo } from "react";
+import Template from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
+
+const LoginConfigTotp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginConfigTotp; i18n: I18n } & KcProps) => {
+    const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
+
+    const { cx } = useCssAndCx();
+
+    const { msg, msgStr } = i18n;
+
+    const algToKeyUriAlg: Record<KcContextBase.LoginConfigTotp["totp"]["policy"]["algorithm"], string> = {
+        HmacSHA1: "SHA1",
+        HmacSHA256: "SHA256",
+        HmacSHA512: "SHA512"
+    };
+
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("loginTotpTitle")}
+            formNode={
+                <>
+                    <ol id="kc-totp-settings">
+                        <li>
+                            <p>{msg("loginTotpStep1")}</p>
+
+                            <ul id="kc-totp-supported-apps">
+                                {totp.policy.supportedApplications.map(app => (
+                                    <li>{app}</li>
+                                ))}
+                            </ul>
+                        </li>
+
+                        {mode && mode == "manual" ? (
+                            <>
+                                <li>
+                                    <p>{msg("loginTotpManualStep2")}</p>
+                                    <p>
+                                        <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+                                    </p>
+                                    <p>
+                                        <a href={totp.qrUrl} id="mode-barcode">
+                                            {msg("loginTotpScanBarcode")}
+                                        </a>
+                                    </p>
+                                </li>
+                                <li>
+                                    <p>{msg("loginTotpManualStep3")}</p>
+                                    <p>
+                                        <ul>
+                                            <li id="kc-totp-type">
+                                                {msg("loginTotpType")}: {msg(`loginTotp.${totp.policy.type}`)}
+                                            </li>
+                                            <li id="kc-totp-algorithm">
+                                                {msg("loginTotpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                            </li>
+                                            <li id="kc-totp-digits">
+                                                {msg("loginTotpDigits")}: {totp.policy.digits}
+                                            </li>
+                                            {totp.policy.type === "totp" ? (
+                                                <li id="kc-totp-period">
+                                                    {msg("loginTotpInterval")}: {totp.policy.period}
+                                                </li>
+                                            ) : (
+                                                <li id="kc-totp-counter">
+                                                    {msg("loginTotpCounter")}: {totp.policy.initialCounter}
+                                                </li>
+                                            )}
+                                        </ul>
+                                    </p>
+                                </li>
+                            </>
+                        ) : (
+                            <li>
+                                <p>{msg("loginTotpStep2")}</p>
+                                <img id="kc-totp-secret-qr-code" src={`data:image/png;base64, ${totp.totpSecretQrCode}`} alt="Figure: Barcode" />
+                                <br />
+                                <p>
+                                    <a href={totp.manualUrl} id="mode-manual">
+                                        {msg("loginTotpUnableToScan")}
+                                    </a>
+                                </p>
+                            </li>
+                        )}
+                        <li>
+                            <p>{msg("loginTotpStep3")}</p>
+                            <p>{msg("loginTotpStep3DeviceName")}</p>
+                        </li>
+                    </ol>
+
+                    <form action={url.loginAction} className={cx(props.kcFormClass)} id="kc-totp-settings-form" method="post">
+                        <div className={cx(props.kcFormGroupClass)}>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <label htmlFor="totp" className={cx(props.kcLabelClass)}>
+                                    {msg("authenticatorCode")}
+                                </label>{" "}
+                                <span className="required">*</span>
+                            </div>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <input
+                                    type="text"
+                                    id="totp"
+                                    name="totp"
+                                    autoComplete="off"
+                                    className={cx(props.kcInputClass)}
+                                    aria-invalid={messagesPerField.existsError("totp")}
+                                />
+
+                                {messagesPerField.existsError("totp") && (
+                                    <span id="input-error-otp-code" className={cx(props.kcInputErrorMessageClass)} aria-live="polite">
+                                        {messagesPerField.get("totp")}
+                                    </span>
+                                )}
+                            </div>
+                            <input type="hidden" id="totpSecret" name="totpSecret" value={totp.totpSecret} />
+                            {mode && <input type="hidden" id="mode" value={mode} />}
+                        </div>
+
+                        <div className={cx(props.kcFormGroupClass)}>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <label htmlFor="userLabel" className={cx(props.kcLabelClass)}>
+                                    {msg("loginTotpDeviceName")}
+                                </label>{" "}
+                                {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
+                            </div>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <input
+                                    type="text"
+                                    id="userLabel"
+                                    name="userLabel"
+                                    autoComplete="off"
+                                    className={cx(props.kcInputClass)}
+                                    aria-invalid={messagesPerField.existsError("userLabel")}
+                                />
+                                {messagesPerField.existsError("userLabel") && (
+                                    <span id="input-error-otp-label" className={cx(props.kcInputErrorMessageClass)} aria-live="polite">
+                                        {messagesPerField.get("userLabel")}
+                                    </span>
+                                )}
+                            </div>
+                        </div>
+
+                        {isAppInitiatedAction ? (
+                            <>
+                                <input
+                                    type="submit"
+                                    className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
+                                    id="saveTOTPBtn"
+                                    value={msgStr("doSubmit")}
+                                />
+                                <button
+                                    type="submit"
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonDefaultClass,
+                                        props.kcButtonLargeClass,
+                                        props.kcButtonLargeClass
+                                    )}
+                                    id="cancelTOTPBtn"
+                                    name="cancel-aia"
+                                    value="true"
+                                >
+                                    ${msg("doCancel")}
+                                </button>
+                            </>
+                        ) : (
+                            <input
+                                type="submit"
+                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
+                                id="saveTOTPBtn"
+                                value={msgStr("doSubmit")}
+                            />
+                        )}
+                    </form>
+                </>
+            }
+        />
+    );
+});
+
+export default LoginConfigTotp;

package/src/lib/components/LoginIdpLinkConfirm.tsx

@@ -1,48 +1,48 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
-import { useCssAndCx } from "tss-react";
 
-export const LoginIdpLinkConfirm = memo(
-    ({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm; useI18n: () => I18n } & KcProps) => {
-        const { url, idpAlias } = kcContext;
+const LoginIdpLinkConfirm = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm; i18n: I18n } & KcProps) => {
+    const { url, idpAlias } = kcContext;
 
-        const { msg } = useI18n();
+    const { msg } = i18n;
 
-        const { cx } = useCssAndCx();
+    const { cx } = useCssAndCx();
 
-        return (
-            <Template
-                {...{ kcContext, useI18n, ...props }}
-                doFetchDefaultThemeResources={true}
-                headerNode={msg("confirmLinkIdpTitle")}
-                formNode={
-                    <form id="kc-register-form" action={url.loginAction} method="post">
-                        <div className={cx(props.kcFormGroupClass)}>
-                            <button
-                                type="submit"
-                                className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
-                                name="submitAction"
-                                id="updateProfile"
-                                value="updateProfile"
-                            >
-                                {msg("confirmLinkIdpReviewProfile")}
-                            </button>
-                            <button
-                                type="submit"
-                                className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
-                                name="submitAction"
-                                id="linkAccount"
-                                value="linkAccount"
-                            >
-                                {msg("confirmLinkIdpContinue", idpAlias)}
-                            </button>
-                        </div>
-                    </form>
-                }
-            />
-        );
-    },
-);
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("confirmLinkIdpTitle")}
+            formNode={
+                <form id="kc-register-form" action={url.loginAction} method="post">
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <button
+                            type="submit"
+                            className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                            name="submitAction"
+                            id="updateProfile"
+                            value="updateProfile"
+                        >
+                            {msg("confirmLinkIdpReviewProfile")}
+                        </button>
+                        <button
+                            type="submit"
+                            className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+                            name="submitAction"
+                            id="linkAccount"
+                            value="linkAccount"
+                        >
+                            {msg("confirmLinkIdpContinue", idpAlias)}
+                        </button>
+                    </div>
+                </form>
+            }
+        />
+    );
+});
+
+export default LoginIdpLinkConfirm;

package/src/lib/components/LoginIdpLinkEmail.tsx

@@ -1,34 +1,34 @@
-import { memo } from "react";
-import { Template } from "./Template";
+import React, { memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-export const LoginIdpLinkEmail = memo(
-    ({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.LoginIdpLinkEmail; useI18n: () => I18n } & KcProps) => {
-        const { url, realm, brokerContext, idpAlias } = kcContext;
+const LoginIdpLinkEmail = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginIdpLinkEmail; i18n: I18n } & KcProps) => {
+    const { url, realm, brokerContext, idpAlias } = kcContext;
 
-        const { msg } = useI18n();
+    const { msg } = i18n;
 
-        return (
-            <Template
-                {...{ kcContext, useI18n, ...props }}
-                doFetchDefaultThemeResources={true}
-                headerNode={msg("emailLinkIdpTitle", idpAlias)}
-                formNode={
-                    <>
-                        <p id="instruction1" className="instruction">
-                            {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
-                        </p>
-                        <p id="instruction2" className="instruction">
-                            {msg("emailLinkIdp2")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp3")}
-                        </p>
-                        <p id="instruction3" className="instruction">
-                            {msg("emailLinkIdp4")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp5")}
-                        </p>
-                    </>
-                }
-            />
-        );
-    },
-);
+    return (
+        <Template
+            {...{ kcContext, i18n, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("emailLinkIdpTitle", idpAlias)}
+            formNode={
+                <>
+                    <p id="instruction1" className="instruction">
+                        {msg("emailLinkIdp1", idpAlias, brokerContext.username, realm.displayName)}
+                    </p>
+                    <p id="instruction2" className="instruction">
+                        {msg("emailLinkIdp2")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp3")}
+                    </p>
+                    <p id="instruction3" className="instruction">
+                        {msg("emailLinkIdp4")} <a href={url.loginAction}>{msg("doClickHere")}</a> {msg("emailLinkIdp5")}
+                    </p>
+                </>
+            }
+        />
+    );
+});
+
+export default LoginIdpLinkEmail;

package/src/lib/components/LoginOtp.tsx

@@ -1,25 +1,25 @@
-import { useEffect, memo } from "react";
-import { Template } from "./Template";
+import React, { useEffect, memo } from "react";
+import Template from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
-import type { I18n } from "../i18n";
 import { headInsert } from "../tools/headInsert";
-import { pathJoin } from "../tools/pathJoin";
-import { useCssAndCx } from "tss-react";
+import { pathJoin } from "../../bin/tools/pathJoin";
+import { useCssAndCx } from "../tools/useCssAndCx";
+import type { I18n } from "../i18n";
 
-export const LoginOtp = memo(({ kcContext, useI18n, ...props }: { kcContext: KcContextBase.LoginOtp; useI18n: () => I18n } & KcProps) => {
+const LoginOtp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginOtp; i18n: I18n } & KcProps) => {
     const { otpLogin, url } = kcContext;
 
     const { cx } = useCssAndCx();
 
-    const { msg, msgStr } = useI18n();
+    const { msg, msgStr } = i18n;
 
     useEffect(() => {
         let isCleanedUp = false;
 
         headInsert({
             "type": "javascript",
-            "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js"),
+            "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
         }).then(() => {
             if (isCleanedUp) return;
 
@@ -33,7 +33,7 @@ export const LoginOtp = memo(({ kcContext, useI18n, ...props }: { kcContext: KcC
 
     return (
         <Template
-            {...{ kcContext, useI18n, ...props }}
+            {...{ kcContext, i18n, ...props }}
             doFetchDefaultThemeResources={true}
             headerNode={msg("doLogIn")}
             formNode={
@@ -109,3 +109,5 @@ function evaluateInlineScript() {
         }
     });
 }
+
+export default LoginOtp;