keycloakify 9.6.7 → 10.0.0-rc.1

package/src/login/pages/SelectAuthenticator.tsx

@@ -1,9 +1,8 @@
+import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "keycloakify/login/kcContext";
 import type { I18n } from "keycloakify/login/i18n";
-import { MouseEvent, useRef } from "react";
-import { useConstCallback } from "keycloakify/tools/useConstCallback";
 
 export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -12,60 +11,38 @@ export default function SelectAuthenticator(props: PageProps<Extract<KcContext,
     const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
     const { msg } = i18n;
 
-    const selectCredentialsForm = useRef<HTMLFormElement>(null);
-    const authExecIdInput = useRef<HTMLInputElement>(null);
-
-    const submitForm = useConstCallback(() => {
-        selectCredentialsForm.current?.submit();
-    });
-
-    const onSelectedAuthenticator = useConstCallback((event: MouseEvent<HTMLDivElement>) => {
-        const divElement = event.currentTarget;
-        const authExecId = divElement.dataset.authExecId;
-
-        if (!authExecIdInput.current || !authExecId) {
-            return;
-        }
-
-        authExecIdInput.current.value = authExecId;
-        submitForm();
-    });
-
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginChooseAuthenticator")}>
-            <form
-                id="kc-select-credential-form"
-                className={getClassName("kcFormClass")}
-                ref={selectCredentialsForm}
-                action={url.loginAction}
-                method="post"
-            >
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayInfo={false} headerNode={msg("loginChooseAuthenticator")}>
+            <form id="kc-select-credential-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
                 <div className={getClassName("kcSelectAuthListClass")}>
-                    {auth.authenticationSelections.map((authenticationSelection, index) => (
-                        <div key={index} className={getClassName("kcSelectAuthListItemClass")}>
-                            <div
-                                style={{ cursor: "pointer" }}
-                                onClick={onSelectedAuthenticator}
-                                data-auth-exec-id={authenticationSelection.authExecId}
-                                className={getClassName("kcSelectAuthListItemInfoClass")}
-                            >
-                                <div className={getClassName("kcSelectAuthListItemLeftClass")}>
-                                    <span className={getClassName(authenticationSelection.iconCssClass ?? "kcAuthenticatorDefaultClass")}></span>
-                                </div>
-                                <div className={getClassName("kcSelectAuthListItemBodyClass")}>
-                                    <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
-                                        <div className={getClassName("kcSelectAuthListItemHeadingClass")}>
-                                            {msg(authenticationSelection.displayName)}
-                                        </div>
-                                        <div className={getClassName("kcSelectAuthListItemHelpTextClass")}>
-                                            {msg(authenticationSelection.helpText)}
-                                        </div>
-                                    </div>
-                                </div>
+                    {auth.authenticationSelections.map((authenticationSelection, i) => (
+                        <button
+                            key={i}
+                            className={getClassName("kcSelectAuthListItemClass")}
+                            type="submit"
+                            name="authenticationExecution"
+                            value={authenticationSelection.authExecId}
+                        >
+                            <div className={getClassName("kcSelectAuthListItemIconClass")}>
+                                <i
+                                    className={clsx(
+                                        // @ts-expect-error: iconCssClass is a string and not a class key
+                                        // however getClassName gracefully handles this case at runtime
+                                        getClassName(authenticationSelection.iconCssClass),
+                                        getClassName("kcSelectAuthListItemIconPropertyClass")
+                                    )}
+                                />
+                            </div>
+                            <div className={getClassName("kcSelectAuthListItemBodyClass")}>
+                                <div className={getClassName("kcSelectAuthListItemHeadingClass")}>{msg(authenticationSelection.displayName)}</div>
+                                <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>{msg(authenticationSelection.helpText)}</div>
+                            </div>
+                            <div className={getClassName("kcSelectAuthListItemFillClass")} />
+                            <div className={getClassName("kcSelectAuthListItemArrowClass")}>
+                                <i className={getClassName("kcSelectAuthListItemArrowIconClass")} />
                             </div>
-                        </div>
+                        </button>
                     ))}
-                    <input type="hidden" id="authexec-hidden-input" name="authenticationExecution" ref={authExecIdInput} />
                 </div>
             </form>
         </Template>

package/src/login/pages/Terms.tsx

@@ -1,9 +1,8 @@
 import { clsx } from "keycloakify/tools/clsx";
-import { useRerenderOnStateChange } from "evt/hooks";
 import { Markdown } from "keycloakify/tools/Markdown";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import { evtTermMarkdown } from "keycloakify/login/lib/useDownloadTerms";
+import { useTermsMarkdown } from "keycloakify/login/lib/useDownloadTerms";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
@@ -17,20 +16,18 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
 
     const { msg, msgStr } = i18n;
 
-    useRerenderOnStateChange(evtTermMarkdown);
-
     const { url } = kcContext;
 
-    const termMarkdown = evtTermMarkdown.state;
+    const { termsMarkdown } = useTermsMarkdown();
 
-    if (termMarkdown === undefined) {
+    if (termsMarkdown === undefined) {
         return null;
     }
 
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayMessage={false} headerNode={msg("termsTitle")}>
             <div id="kc-terms-text">
-                <Markdown>{termMarkdown}</Markdown>
+                <Markdown>{termsMarkdown}</Markdown>
             </div>
             <form className="form-actions" action={url.loginAction} method="POST">
                 <input

package/src/login/pages/UpdateEmail.tsx

@@ -1,11 +1,18 @@
+import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
+import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
+import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFields";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
-export default function UpdateEmail(props: PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>, I18n> & {
+    UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
+};
+
+export default function UpdateEmail(props: UpdateEmailProps) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields } = props;
 
     const { getClassName } = useGetClassName({
         doUseDefaultCss,
@@ -14,71 +21,60 @@ export default function UpdateEmail(props: PageProps<Extract<KcContext, { pageId
 
     const { msg, msgStr } = i18n;
 
-    const { url, messagesPerField, isAppInitiatedAction, email } = kcContext;
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+
+    const { url, messagesPerField, isAppInitiatedAction } = kcContext;
 
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("updateEmailTitle")}>
+        <Template
+            {...{ kcContext, i18n, doUseDefaultCss, classes }}
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields={true}
+            headerNode={msg("updateEmailTitle")}
+        >
             <form id="kc-update-email-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                <div
-                    className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
-                >
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="email" className={getClassName("kcLabelClass")}>
-                            {msg("email")}
-                        </label>
-                    </div>
-                    <div className={getClassName("kcInputWrapperClass")}>
-                        <input
-                            type="text"
-                            id="email"
-                            name="email"
-                            defaultValue={email.value ?? ""}
-                            className={getClassName("kcInputClass")}
-                            aria-invalid={messagesPerField.existsError("email")}
-                        />
-                    </div>
-                </div>
+                <UserProfileFormFields
+                    {...{
+                        kcContext,
+                        i18n,
+                        getClassName,
+                        messagesPerField
+                    }}
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                />
 
                 <div className={getClassName("kcFormGroupClass")}>
                     <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                        <div className={getClassName("kcFormOptionsWrapperClass")} />
                     </div>
+
+                    <LogoutOtherSessions {...{ getClassName, i18n }} />
+
                     <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                        {isAppInitiatedAction ? (
-                            <>
-                                <input
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
-                                    type="submit"
-                                    defaultValue={msgStr("doSubmit")}
-                                />
-                                <button
-                                    className={clsx(
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonDefaultClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
-                                    type="submit"
-                                    name="cancel-aia"
-                                    value="true"
-                                >
-                                    {msg("doCancel")}
-                                </button>
-                            </>
-                        ) : (
-                            <input
+                        <input
+                            disabled={!isFormSubmittable}
+                            className={clsx(
+                                getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
+                                isAppInitiatedAction && getClassName("kcButtonBlockClass"),
+                                getClassName("kcButtonLargeClass")
+                            )}
+                            type="submit"
+                            value={msgStr("doSubmit")}
+                        />
+                        {isAppInitiatedAction && (
+                            <button
                                 className={clsx(
                                     getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonDefaultClass"),
                                     getClassName("kcButtonLargeClass")
                                 )}
                                 type="submit"
-                                defaultValue={msgStr("doSubmit")}
-                            />
+                                name="cancel-aia"
+                                value="true"
+                            >
+                                {msg("doCancel")}
+                            </button>
                         )}
                     </div>
                 </div>
@@ -86,3 +82,22 @@ export default function UpdateEmail(props: PageProps<Extract<KcContext, { pageId
         </Template>
     );
 }
+
+function LogoutOtherSessions(props: { getClassName: ReturnType<typeof useGetClassName>["getClassName"]; i18n: I18n }) {
+    const { getClassName, i18n } = props;
+
+    const { msg } = i18n;
+
+    return (
+        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+            <div className={getClassName("kcFormOptionsWrapperClass")}>
+                <div className="checkbox">
+                    <label>
+                        <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" defaultChecked={true} />
+                        {msg("logoutOtherSessions")}
+                    </label>
+                </div>
+            </div>
+        </div>
+    );
+}