keycloakify 6.7.2 → 6.8.0

package/src/lib/components/LoginConfigTotp.tsx

@@ -1,192 +1,195 @@
 import React, { memo } from "react";
-import Template from "./Template";
+import DefaultTemplate from "./Template";
+import type { TemplateProps } 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,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.LoginConfigTotp; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
+export type LoginConfigTotpProps = KcProps & {
+    kcContext: KcContextBase.LoginConfigTotp;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { cx } = useCssAndCx();
+const LoginConfigTotp = memo((props: LoginConfigTotpProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        const { msg, msgStr } = i18n;
+    const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
 
-        const algToKeyUriAlg: Record<KcContextBase.LoginConfigTotp["totp"]["policy"]["algorithm"], string> = {
-            HmacSHA1: "SHA1",
-            HmacSHA256: "SHA256",
-            HmacSHA512: "SHA512"
-        };
+    const { cx } = useCssAndCx();
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                headerNode={msg("loginTotpTitle")}
-                formNode={
-                    <>
-                        <ol id="kc-totp-settings">
-                            <li>
-                                <p>{msg("loginTotpStep1")}</p>
+    const { msg, msgStr } = i18n;
 
-                                <ul id="kc-totp-supported-apps">
-                                    {totp.policy.supportedApplications.map(app => (
-                                        <li>{app}</li>
-                                    ))}
-                                </ul>
-                            </li>
+    const algToKeyUriAlg: Record<KcContextBase.LoginConfigTotp["totp"]["policy"]["algorithm"], string> = {
+        "HmacSHA1": "SHA1",
+        "HmacSHA256": "SHA256",
+        "HmacSHA512": "SHA512"
+    };
 
-                            {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>
-                                </>
-                            ) : (
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            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("loginTotpStep2")}</p>
-                                    <img id="kc-totp-secret-qr-code" src={`data:image/png;base64, ${totp.totpSecretQrCode}`} alt="Figure: Barcode" />
-                                    <br />
+                                    <p>{msg("loginTotpManualStep2")}</p>
                                     <p>
-                                        <a href={totp.manualUrl} id="mode-manual">
-                                            {msg("loginTotpUnableToScan")}
+                                        <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("loginTotpStep3")}</p>
-                                <p>{msg("loginTotpStep3DeviceName")}</p>
+                                <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>
-                        </ol>
+                        )}
+                        <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")}
-                                    />
+                    <form action={url.loginAction} className={cx(kcProps.kcFormClass)} id="kc-totp-settings-form" method="post">
+                        <div className={cx(kcProps.kcFormGroupClass)}>
+                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                                <label htmlFor="totp" className={cx(kcProps.kcLabelClass)}>
+                                    {msg("authenticatorCode")}
+                                </label>{" "}
+                                <span className="required">*</span>
+                            </div>
+                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                                <input
+                                    type="text"
+                                    id="totp"
+                                    name="totp"
+                                    autoComplete="off"
+                                    className={cx(kcProps.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} />}
+                                {messagesPerField.existsError("totp") && (
+                                    <span id="input-error-otp-code" className={cx(kcProps.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 className={cx(kcProps.kcFormGroupClass)}>
+                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                                <label htmlFor="userLabel" className={cx(kcProps.kcLabelClass)}>
+                                    {msg("loginTotpDeviceName")}
+                                </label>{" "}
+                                {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
+                            </div>
+                            <div className={cx(kcProps.kcInputWrapperClass)}>
+                                <input
+                                    type="text"
+                                    id="userLabel"
+                                    name="userLabel"
+                                    autoComplete="off"
+                                    className={cx(kcProps.kcInputClass)}
+                                    aria-invalid={messagesPerField.existsError("userLabel")}
+                                />
+                                {messagesPerField.existsError("userLabel") && (
+                                    <span id="input-error-otp-label" className={cx(kcProps.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>
-                                </>
-                            ) : (
+                        {isAppInitiatedAction ? (
+                            <>
                                 <input
                                     type="submit"
-                                    className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
+                                    className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
                                     id="saveTOTPBtn"
                                     value={msgStr("doSubmit")}
                                 />
-                            )}
-                        </form>
-                    </>
-                }
-            />
-        );
-    }
-);
+                                <button
+                                    type="submit"
+                                    className={cx(
+                                        kcProps.kcButtonClass,
+                                        kcProps.kcButtonDefaultClass,
+                                        kcProps.kcButtonLargeClass,
+                                        kcProps.kcButtonLargeClass
+                                    )}
+                                    id="cancelTOTPBtn"
+                                    name="cancel-aia"
+                                    value="true"
+                                >
+                                    ${msg("doCancel")}
+                                </button>
+                            </>
+                        ) : (
+                            <input
+                                type="submit"
+                                className={cx(kcProps.kcButtonClass, kcProps.kcButtonPrimaryClass, kcProps.kcButtonLargeClass)}
+                                id="saveTOTPBtn"
+                                value={msgStr("doSubmit")}
+                            />
+                        )}
+                    </form>
+                </>
+            }
+        />
+    );
+});
 
 export default LoginConfigTotp;

package/src/lib/components/LoginIdpLinkConfirm.tsx

@@ -1,54 +1,67 @@
 import React, { memo } from "react";
-import Template from "./Template";
+import DefaultTemplate from "./Template";
+import type { TemplateProps } from "./Template";
 import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginIdpLinkConfirm = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.LoginIdpLinkConfirm; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { url, idpAlias } = kcContext;
+export type LoginIdpLinkConfirmProps = KcProps & {
+    kcContext: KcContextBase.LoginIdpLinkConfirm;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { msg } = i18n;
+const LoginIdpLinkConfirm = memo((props: LoginIdpLinkConfirmProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        const { cx } = useCssAndCx();
+    const { url, idpAlias } = kcContext;
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                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>
-                }
-            />
-        );
-    }
-);
+    const { msg } = i18n;
+
+    const { cx } = useCssAndCx();
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            headerNode={msg("confirmLinkIdpTitle")}
+            formNode={
+                <form id="kc-register-form" action={url.loginAction} method="post">
+                    <div className={cx(kcProps.kcFormGroupClass)}>
+                        <button
+                            type="submit"
+                            className={cx(
+                                kcProps.kcButtonClass,
+                                kcProps.kcButtonDefaultClass,
+                                kcProps.kcButtonBlockClass,
+                                kcProps.kcButtonLargeClass
+                            )}
+                            name="submitAction"
+                            id="updateProfile"
+                            value="updateProfile"
+                        >
+                            {msg("confirmLinkIdpReviewProfile")}
+                        </button>
+                        <button
+                            type="submit"
+                            className={cx(
+                                kcProps.kcButtonClass,
+                                kcProps.kcButtonDefaultClass,
+                                kcProps.kcButtonBlockClass,
+                                kcProps.kcButtonLargeClass
+                            )}
+                            name="submitAction"
+                            id="linkAccount"
+                            value="linkAccount"
+                        >
+                            {msg("confirmLinkIdpContinue", idpAlias)}
+                        </button>
+                    </div>
+                </form>
+            }
+        />
+    );
+});
 
 export default LoginIdpLinkConfirm;

package/src/lib/components/LoginIdpLinkEmail.tsx

@@ -1,40 +1,43 @@
 import React, { memo } from "react";
-import Template from "./Template";
+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";
 
-const LoginIdpLinkEmail = memo(
-    ({
-        kcContext,
-        i18n,
-        doFetchDefaultThemeResources = true,
-        ...props
-    }: { kcContext: KcContextBase.LoginIdpLinkEmail; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
-        const { url, realm, brokerContext, idpAlias } = kcContext;
+export type LoginIdpLinkEmailProps = KcProps & {
+    kcContext: KcContextBase.LoginIdpLinkEmail;
+    i18n: I18n;
+    doFetchDefaultThemeResources?: boolean;
+    Template?: (props: TemplateProps) => JSX.Element | null;
+};
 
-        const { msg } = i18n;
+const LoginIdpLinkEmail = memo((props: LoginIdpLinkEmailProps) => {
+    const { kcContext, i18n, doFetchDefaultThemeResources = true, Template = DefaultTemplate, ...kcProps } = props;
 
-        return (
-            <Template
-                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
-                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>
-                    </>
-                }
-            />
-        );
-    }
-);
+    const { url, realm, brokerContext, idpAlias } = kcContext;
+
+    const { msg } = i18n;
+
+    return (
+        <Template
+            {...{ kcContext, i18n, doFetchDefaultThemeResources, ...kcProps }}
+            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;