keycloakify 6.3.5 → 6.4.0

package/src/lib/components/LoginOtp.tsx

@@ -7,84 +7,95 @@ import { pathJoin } from "../../bin/tools/pathJoin";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginOtp = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginOtp; i18n: I18n } & KcProps) => {
-    const { otpLogin, url } = kcContext;
+const LoginOtp = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginOtp; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
+        const { otpLogin, url } = kcContext;
 
-    const { cx } = useCssAndCx();
+        const { cx } = useCssAndCx();
 
-    const { msg, msgStr } = i18n;
+        const { msg, msgStr } = i18n;
 
-    useEffect(() => {
-        let isCleanedUp = false;
+        useEffect(() => {
+            let isCleanedUp = false;
 
-        headInsert({
-            "type": "javascript",
-            "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
-        }).then(() => {
-            if (isCleanedUp) return;
+            headInsert({
+                "type": "javascript",
+                "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
+            }).then(() => {
+                if (isCleanedUp) return;
 
-            evaluateInlineScript();
-        });
+                evaluateInlineScript();
+            });
 
-        return () => {
-            isCleanedUp = true;
-        };
-    }, []);
+            return () => {
+                isCleanedUp = true;
+            };
+        }, []);
 
-    return (
-        <Template
-            {...{ kcContext, i18n, ...props }}
-            doFetchDefaultThemeResources={true}
-            headerNode={msg("doLogIn")}
-            formNode={
-                <form id="kc-otp-login-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
-                    {otpLogin.userOtpCredentials.length > 1 && (
-                        <div className={cx(props.kcFormGroupClass)}>
-                            <div className={cx(props.kcInputWrapperClass)}>
-                                {otpLogin.userOtpCredentials.map(otpCredential => (
-                                    <div key={otpCredential.id} className={cx(props.kcSelectOTPListClass)}>
-                                        <input type="hidden" value="${otpCredential.id}" />
-                                        <div className={cx(props.kcSelectOTPListItemClass)}>
-                                            <span className={cx(props.kcAuthenticatorOtpCircleClass)} />
-                                            <h2 className={cx(props.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
+        return (
+            <Template
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
+                headerNode={msg("doLogIn")}
+                formNode={
+                    <form id="kc-otp-login-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                        {otpLogin.userOtpCredentials.length > 1 && (
+                            <div className={cx(props.kcFormGroupClass)}>
+                                <div className={cx(props.kcInputWrapperClass)}>
+                                    {otpLogin.userOtpCredentials.map(otpCredential => (
+                                        <div key={otpCredential.id} className={cx(props.kcSelectOTPListClass)}>
+                                            <input type="hidden" value="${otpCredential.id}" />
+                                            <div className={cx(props.kcSelectOTPListItemClass)}>
+                                                <span className={cx(props.kcAuthenticatorOtpCircleClass)} />
+                                                <h2 className={cx(props.kcSelectOTPItemHeadingClass)}>{otpCredential.userLabel}</h2>
+                                            </div>
                                         </div>
-                                    </div>
-                                ))}
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                        <div className={cx(props.kcFormGroupClass)}>
+                            <div className={cx(props.kcLabelWrapperClass)}>
+                                <label htmlFor="otp" className={cx(props.kcLabelClass)}>
+                                    {msg("loginOtpOneTime")}
+                                </label>
                             </div>
-                        </div>
-                    )}
-                    <div className={cx(props.kcFormGroupClass)}>
-                        <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="otp" className={cx(props.kcLabelClass)}>
-                                {msg("loginOtpOneTime")}
-                            </label>
-                        </div>
 
-                        <div className={cx(props.kcInputWrapperClass)}>
-                            <input id="otp" name="otp" autoComplete="off" type="text" className={cx(props.kcInputClass)} autoFocus />
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <input id="otp" name="otp" autoComplete="off" type="text" className={cx(props.kcInputClass)} autoFocus />
+                            </div>
                         </div>
-                    </div>
 
-                    <div className={cx(props.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                            <div className={cx(props.kcFormOptionsWrapperClass)} />
-                        </div>
+                        <div className={cx(props.kcFormGroupClass)}>
+                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                                <div className={cx(props.kcFormOptionsWrapperClass)} />
+                            </div>
 
-                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
-                            <input
-                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
-                                name="login"
-                                id="kc-login"
-                                type="submit"
-                                value={msgStr("doLogIn")}
-                            />
+                            <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                                <input
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass
+                                    )}
+                                    name="login"
+                                    id="kc-login"
+                                    type="submit"
+                                    value={msgStr("doLogIn")}
+                                />
+                            </div>
                         </div>
-                    </div>
-                </form>
-            }
-        />
-    );
-});
+                    </form>
+                }
+            />
+        );
+    }
+);
 
 declare const $: any;
 

package/src/lib/components/LoginPageExpired.tsx

@@ -4,35 +4,41 @@ import type { KcProps } from "./KcProps";
 import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { I18n } from "../i18n";
 
-const LoginPageExpired = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginPageExpired; i18n: I18n } & KcProps) => {
-    const { url } = kcContext;
+const LoginPageExpired = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginPageExpired; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
+        const { url } = kcContext;
 
-    const { msg } = i18n;
+        const { msg } = i18n;
 
-    return (
-        <Template
-            {...{ kcContext, i18n, ...props }}
-            doFetchDefaultThemeResources={true}
-            displayMessage={false}
-            headerNode={msg("pageExpiredTitle")}
-            formNode={
-                <>
-                    <p id="instruction1" className="instruction">
-                        {msg("pageExpiredMsg1")}
-                        <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
-                            {msg("doClickHere")}
-                        </a>{" "}
-                        .<br />
-                        {msg("pageExpiredMsg2")}{" "}
-                        <a id="loginContinueLink" href={url.loginAction}>
-                            {msg("doClickHere")}
-                        </a>{" "}
-                        .
-                    </p>
-                </>
-            }
-        />
-    );
-});
+        return (
+            <Template
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
+                displayMessage={false}
+                headerNode={msg("pageExpiredTitle")}
+                formNode={
+                    <>
+                        <p id="instruction1" className="instruction">
+                            {msg("pageExpiredMsg1")}
+                            <a id="loginRestartLink" href={url.loginRestartFlowUrl}>
+                                {msg("doClickHere")}
+                            </a>{" "}
+                            .<br />
+                            {msg("pageExpiredMsg2")}{" "}
+                            <a id="loginContinueLink" href={url.loginAction}>
+                                {msg("doClickHere")}
+                            </a>{" "}
+                            .
+                        </p>
+                    </>
+                }
+            />
+        );
+    }
+);
 
 export default LoginPageExpired;

package/src/lib/components/LoginResetPassword.tsx

@@ -5,64 +5,75 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginResetPassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginResetPassword; i18n: I18n } & KcProps) => {
-    const { url, realm, auth } = kcContext;
+const LoginResetPassword = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginResetPassword; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
+        const { url, realm, auth } = kcContext;
 
-    const { msg, msgStr } = i18n;
+        const { msg, msgStr } = i18n;
 
-    const { cx } = useCssAndCx();
+        const { cx } = useCssAndCx();
 
-    return (
-        <Template
-            {...{ kcContext, i18n, ...props }}
-            doFetchDefaultThemeResources={true}
-            displayMessage={false}
-            headerNode={msg("emailForgotTitle")}
-            formNode={
-                <form id="kc-reset-password-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
-                    <div className={cx(props.kcFormGroupClass)}>
-                        <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="username" className={cx(props.kcLabelClass)}>
-                                {!realm.loginWithEmailAllowed
-                                    ? msg("username")
-                                    : !realm.registrationEmailAsUsername
-                                    ? msg("usernameOrEmail")
-                                    : msg("email")}
-                            </label>
-                        </div>
-                        <div className={cx(props.kcInputWrapperClass)}>
-                            <input
-                                type="text"
-                                id="username"
-                                name="username"
-                                className={cx(props.kcInputClass)}
-                                autoFocus
-                                defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
-                            />
-                        </div>
-                    </div>
-                    <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
-                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                            <div className={cx(props.kcFormOptionsWrapperClass)}>
-                                <span>
-                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
-                                </span>
+        return (
+            <Template
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
+                displayMessage={false}
+                headerNode={msg("emailForgotTitle")}
+                formNode={
+                    <form id="kc-reset-password-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                        <div className={cx(props.kcFormGroupClass)}>
+                            <div className={cx(props.kcLabelWrapperClass)}>
+                                <label htmlFor="username" className={cx(props.kcLabelClass)}>
+                                    {!realm.loginWithEmailAllowed
+                                        ? msg("username")
+                                        : !realm.registrationEmailAsUsername
+                                        ? msg("usernameOrEmail")
+                                        : msg("email")}
+                                </label>
+                            </div>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <input
+                                    type="text"
+                                    id="username"
+                                    name="username"
+                                    className={cx(props.kcInputClass)}
+                                    autoFocus
+                                    defaultValue={auth !== undefined && auth.showUsername ? auth.attemptedUsername : undefined}
+                                />
                             </div>
                         </div>
+                        <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
+                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                                <div className={cx(props.kcFormOptionsWrapperClass)}>
+                                    <span>
+                                        <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                    </span>
+                                </div>
+                            </div>
 
-                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
-                            <input
-                                className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
-                                type="submit"
-                                value={msgStr("doSubmit")}
-                            />
+                            <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                                <input
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass
+                                    )}
+                                    type="submit"
+                                    value={msgStr("doSubmit")}
+                                />
+                            </div>
                         </div>
-                    </div>
-                </form>
-            }
-            infoNode={msg("emailInstruction")}
-        />
-    );
-});
+                    </form>
+                }
+                infoNode={msg("emailInstruction")}
+            />
+        );
+    }
+);
 
 export default LoginResetPassword;

package/src/lib/components/LoginUpdatePassword.tsx

@@ -5,115 +5,121 @@ import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { useCssAndCx } from "../tools/useCssAndCx";
 import type { I18n } from "../i18n";
 
-const LoginUpdatePassword = memo(({ kcContext, i18n, ...props }: { kcContext: KcContextBase.LoginUpdatePassword; i18n: I18n } & KcProps) => {
-    const { cx } = useCssAndCx();
+const LoginUpdatePassword = memo(
+    ({
+        kcContext,
+        i18n,
+        doFetchDefaultThemeResources = true,
+        ...props
+    }: { kcContext: KcContextBase.LoginUpdatePassword; i18n: I18n; doFetchDefaultThemeResources?: boolean } & KcProps) => {
+        const { cx } = useCssAndCx();
 
-    const { msg, msgStr } = i18n;
+        const { msg, msgStr } = i18n;
 
-    const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
+        const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
 
-    return (
-        <Template
-            {...{ kcContext, i18n, ...props }}
-            doFetchDefaultThemeResources={true}
-            headerNode={msg("updatePasswordTitle")}
-            formNode={
-                <form id="kc-passwd-update-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
-                    <input
-                        type="text"
-                        id="username"
-                        name="username"
-                        value={username}
-                        readOnly={true}
-                        autoComplete="username"
-                        style={{ display: "none" }}
-                    />
-                    <input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
+        return (
+            <Template
+                {...{ kcContext, i18n, doFetchDefaultThemeResources, ...props }}
+                headerNode={msg("updatePasswordTitle")}
+                formNode={
+                    <form id="kc-passwd-update-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                        <input
+                            type="text"
+                            id="username"
+                            name="username"
+                            value={username}
+                            readOnly={true}
+                            autoComplete="username"
+                            style={{ display: "none" }}
+                        />
+                        <input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
 
-                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password", props.kcFormGroupErrorClass))}>
-                        <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="password-new" className={cx(props.kcLabelClass)}>
-                                {msg("passwordNew")}
-                            </label>
-                        </div>
-                        <div className={cx(props.kcInputWrapperClass)}>
-                            <input
-                                type="password"
-                                id="password-new"
-                                name="password-new"
-                                autoFocus
-                                autoComplete="new-password"
-                                className={cx(props.kcInputClass)}
-                            />
+                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password", props.kcFormGroupErrorClass))}>
+                            <div className={cx(props.kcLabelWrapperClass)}>
+                                <label htmlFor="password-new" className={cx(props.kcLabelClass)}>
+                                    {msg("passwordNew")}
+                                </label>
+                            </div>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <input
+                                    type="password"
+                                    id="password-new"
+                                    name="password-new"
+                                    autoFocus
+                                    autoComplete="new-password"
+                                    className={cx(props.kcInputClass)}
+                                />
+                            </div>
                         </div>
-                    </div>
 
-                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass))}>
-                        <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
-                                {msg("passwordConfirm")}
-                            </label>
-                        </div>
-                        <div className={cx(props.kcInputWrapperClass)}>
-                            <input
-                                type="password"
-                                id="password-confirm"
-                                name="password-confirm"
-                                autoComplete="new-password"
-                                className={cx(props.kcInputClass)}
-                            />
+                        <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass))}>
+                            <div className={cx(props.kcLabelWrapperClass)}>
+                                <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
+                                    {msg("passwordConfirm")}
+                                </label>
+                            </div>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                <input
+                                    type="password"
+                                    id="password-confirm"
+                                    name="password-confirm"
+                                    autoComplete="new-password"
+                                    className={cx(props.kcInputClass)}
+                                />
+                            </div>
                         </div>
-                    </div>
 
-                    <div className={cx(props.kcFormGroupClass)}>
-                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
-                            <div className={cx(props.kcFormOptionsWrapperClass)}>
-                                {isAppInitiatedAction && (
-                                    <div className="checkbox">
-                                        <label>
-                                            <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked />
-                                            {msgStr("logoutOtherSessions")}
-                                        </label>
-                                    </div>
-                                )}
+                        <div className={cx(props.kcFormGroupClass)}>
+                            <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                                <div className={cx(props.kcFormOptionsWrapperClass)}>
+                                    {isAppInitiatedAction && (
+                                        <div className="checkbox">
+                                            <label>
+                                                <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked />
+                                                {msgStr("logoutOtherSessions")}
+                                            </label>
+                                        </div>
+                                    )}
+                                </div>
                             </div>
-                        </div>
 
-                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
-                            {isAppInitiatedAction ? (
-                                <>
+                            <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                                {isAppInitiatedAction ? (
+                                    <>
+                                        <input
+                                            className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
+                                            type="submit"
+                                            defaultValue={msgStr("doSubmit")}
+                                        />
+                                        <button
+                                            className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
+                                            type="submit"
+                                            name="cancel-aia"
+                                            value="true"
+                                        >
+                                            {msg("doCancel")}
+                                        </button>
+                                    </>
+                                ) : (
                                     <input
-                                        className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
+                                        className={cx(
+                                            props.kcButtonClass,
+                                            props.kcButtonPrimaryClass,
+                                            props.kcButtonBlockClass,
+                                            props.kcButtonLargeClass
+                                        )}
                                         type="submit"
                                         defaultValue={msgStr("doSubmit")}
                                     />
-                                    <button
-                                        className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
-                                        type="submit"
-                                        name="cancel-aia"
-                                        value="true"
-                                    >
-                                        {msg("doCancel")}
-                                    </button>
-                                </>
-                            ) : (
-                                <input
-                                    className={cx(
-                                        props.kcButtonClass,
-                                        props.kcButtonPrimaryClass,
-                                        props.kcButtonBlockClass,
-                                        props.kcButtonLargeClass
-                                    )}
-                                    type="submit"
-                                    defaultValue={msgStr("doSubmit")}
-                                />
-                            )}
+                                )}
+                            </div>
                         </div>
-                    </div>
-                </form>
-            }
-        />
-    );
-});
+                    </form>
+                }
+            />
+        );
+    }
+);
 
 export default LoginUpdatePassword;