Update update-email.ftl page

src/login/UserProfileFormFields.tsx

@@ -338,7 +338,6 @@ function InputTag(props: InputFiledByTypeProps & { fieldIndex: number | undefine
                 max={attribute.annotations.inputTypeMax}
                 min={attribute.annotations.inputTypeMin}
                 step={attribute.annotations.inputTypeStep}
-                // NOTE: The `?? {}` is for backward compatibility with Keycloak prior to 24
                 {...Object.fromEntries(Object.entries(attribute.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]))}
                 onChange={event =>
                     formValidationDispatch({

src/login/kcContext/KcContext.ts

@@ -175,11 +175,7 @@ export declare namespace KcContext {
 
     export type Register = Common & {
         pageId: "register.ftl" | "register-user-profile.ftl";
-        profile: {
+        profile: UserProfile;
-            attributes: Attribute[];
-            attributesByName: Record<string, Attribute>;
-            html5DataAnnotations?: Record<string, string>;
-        };
         url: {
             registrationAction: string;
         };
@@ -423,39 +419,17 @@ export declare namespace KcContext {
 
     export type LoginUpdateProfile = Common & {
         pageId: "login-update-profile.ftl" | "update-user-profile.ftl";
-        profile: {
+        profile: UserProfile;
-            attributes: Attribute[];
-            attributesByName: Record<string, Attribute>;
-        };
     };
 
-    /*
-    export type LoginUpdateProfile = Common & {
-        pageId: "login-update-profile.ftl";
-        user: {
-            editUsernameAllowed: boolean;
-            username?: string;
-            email?: string;
-            firstName?: string;
-            lastName?: string;
-        };
-    };
-    */
-
     export type IdpReviewUserProfile = Common & {
         pageId: "idp-review-user-profile.ftl";
-        profile: {
+        profile: UserProfile;
-            context: "IDP_REVIEW";
-            attributes: Attribute[];
-            attributesByName: Record<string, Attribute>;
-        };
     };
 
     export type UpdateEmail = Common & {
         pageId: "update-email.ftl";
-        email: {
+        profile: UserProfile;
-            value?: string;
-        };
     };
 
     export type SelectAuthenticator = Common & {
@@ -497,6 +471,12 @@ export declare namespace KcContext {
     };
 }
 
+export type UserProfile = {
+    attributes: Attribute[];
+    attributesByName: Record<string, Attribute>;
+    html5DataAnnotations?: Record<string, string>;
+};
+
 export type Attribute = {
     name: string;
     displayName?: string;

src/login/lib/useUserProfileForm.tsx

@@ -151,7 +151,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                                     "name": name,
                                     "displayName": id<`\${${MessageKey}}`>(`\${${name}}`),
                                     "required": true,
-                                    "value": (kcContext as any).register.formData[name] ?? "",
+                                    "value": (kcContext.register as any).formData[name] ?? "",
                                     "html5DataAnnotations": {},
                                     "readOnly": false,
                                     "validators": {},
@@ -173,7 +173,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     if ("user" in kcContext && kcContext.user instanceof Object) {
                         //NOTE: Handle legacy login-update-profile.ftl
                         return (["username", "email", "firstName", "lastName"] as const)
-                            .filter(name => (name !== "username" ? true : (kcContext as any).user.editUsernameAllowed))
+                            .filter(name => (name !== "username" ? true : (kcContext.user as any).editUsernameAllowed))
                             .map(name =>
                                 id<Attribute>({
                                     "name": name,
@@ -198,6 +198,23 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                             );
                     }
 
+                    if ("email" in kcContext && kcContext.email instanceof Object) {
+                        //NOTE: Handle legacy update-email.ftl
+                        return [
+                            id<Attribute>({
+                                "name": "email",
+                                "displayName": id<`\${${MessageKey}}`>(`\${email}`),
+                                "required": true,
+                                "value": (kcContext.email as any).value ?? "",
+                                "html5DataAnnotations": {},
+                                "readOnly": false,
+                                "validators": {},
+                                "annotations": {},
+                                "autocomplete": "email"
+                            })
+                        ];
+                    }
+
                     assert(false, "Unable to mock user profile from the current kcContext");
                 }
 

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>) {
+type UpdateEmailProps = PageProps<Extract<KcContext, { pageId: "update-email.ftl" }>, I18n> & {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+    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
+                <UserProfileFormFields
-                    className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
+                    {...{
-                >
+                        kcContext,
-                    <div className={getClassName("kcLabelWrapperClass")}>
+                        i18n,
-                        <label htmlFor="email" className={getClassName("kcLabelClass")}>
+                        getClassName,
-                            {msg("email")}
+                        messagesPerField
-                        </label>
+                    }}
-                    </div>
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
-                    <div className={getClassName("kcInputWrapperClass")}>
+                />
-                        <input
-                            type="text"
-                            id="email"
-                            name="email"
-                            defaultValue={email.value ?? ""}
-                            className={getClassName("kcInputClass")}
-                            aria-invalid={messagesPerField.existsError("email")}
-                        />
-                    </div>
-                </div>
 
                 <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
-                            <>
+                            disabled={!isFormSubmittable}
-                                <input
+                            className={clsx(
-                                    className={clsx(
+                                getClassName("kcButtonClass"),
-                                        getClassName("kcButtonClass"),
+                                getClassName("kcButtonPrimaryClass"),
-                                        getClassName("kcButtonPrimaryClass"),
+                                isAppInitiatedAction && getClassName("kcButtonBlockClass"),
-                                        getClassName("kcButtonLargeClass")
+                                getClassName("kcButtonLargeClass")
-                                    )}
+                            )}
-                                    type="submit"
+                            type="submit"
-                                    defaultValue={msgStr("doSubmit")}
+                            value={msgStr("doSubmit")}
-                                />
+                        />
-                                <button
+                        {isAppInitiatedAction && (
-                                    className={clsx(
+                            <button
-                                        getClassName("kcButtonClass"),
-                                        getClassName("kcButtonDefaultClass"),
-                                        getClassName("kcButtonLargeClass")
-                                    )}
-                                    type="submit"
-                                    name="cancel-aia"
-                                    value="true"
-                                >
-                                    {msg("doCancel")}
-                                </button>
-                            </>
-                        ) : (
-                            <input
                                 className={clsx(
                                     getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonDefaultClass"),
-                                    getClassName("kcButtonBlockClass"),
                                     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>
+    );
+}