feat: add update-email.ftl page

src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -35,7 +35,8 @@ export const loginThemePageIds = [
     "login-config-totp.ftl",
     "logout-confirm.ftl",
     "update-user-profile.ftl",
-    "idp-review-user-profile.ftl"
+    "idp-review-user-profile.ftl",
+    "update-email.ftl"
 ] as const;
 
 export const accountThemePageIds = ["password.ftl", "account.ftl"] as const;

src/login/Fallback.tsx

@@ -25,6 +25,7 @@ const LoginConfigTotp = lazy(() => import("keycloakify/login/pages/LoginConfigTo
 const LogoutConfirm = lazy(() => import("keycloakify/login/pages/LogoutConfirm"));
 const UpdateUserProfile = lazy(() => import("keycloakify/login/pages/UpdateUserProfile"));
 const IdpReviewUserProfile = lazy(() => import("keycloakify/login/pages/IdpReviewUserProfile"));
+const UpdateEmail = lazy(() => import("keycloakify/login/pages/UpdateEmail"));
 
 export default function Fallback(props: PageProps<KcContext, I18n>) {
     const { kcContext, ...rest } = props;
@@ -75,6 +76,8 @@ export default function Fallback(props: PageProps<KcContext, I18n>) {
                         return <UpdateUserProfile kcContext={kcContext} {...rest} />;
                     case "idp-review-user-profile.ftl":
                         return <IdpReviewUserProfile kcContext={kcContext} {...rest} />;
+                    case "update-email.ftl":
+                        return <UpdateEmail kcContext={kcContext} {...rest} />;
                 }
                 assert<Equals<typeof kcContext, never>>(false);
             })()}

src/login/kcContext/KcContext.ts

@@ -30,7 +30,8 @@ export type KcContext =
     | KcContext.LoginConfigTotp
     | KcContext.LogoutConfirm
     | KcContext.UpdateUserProfile
-    | KcContext.IdpReviewUserProfile;
+    | KcContext.IdpReviewUserProfile
+    | KcContext.UpdateEmail;
 
 export declare namespace KcContext {
     export type Common = {
@@ -381,6 +382,13 @@ export declare namespace KcContext {
             attributesByName: Record<string, Attribute>;
         };
     };
+
+    export type UpdateEmail = Common & {
+        pageId: "update-email.ftl";
+        email: {
+            value?: string;
+        };
+    };
 }
 
 export type Attribute = {

src/login/kcContext/kcContextMocks.ts

@@ -491,5 +491,12 @@ export const kcContextMocks: KcContext[] = [
             attributes,
             attributesByName
         }
+    }),
+    id<KcContext.UpdateEmail>({
+        ...kcContextCommonMock,
+        "pageId": "update-email.ftl",
+        "email": {
+            value: "email@example.com"
+        }
     })
 ];

src/login/pages/UpdateEmail.tsx

@@ -0,0 +1,88 @@
+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 "../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;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        classes
+    });
+
+    const { msg, msgStr } = i18n;
+
+    const { url, messagesPerField, isAppInitiatedAction, email } = kcContext;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} 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>
+
+                <div className={getClassName("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                        <div className={getClassName("kcFormOptionsWrapperClass")}></div>
+                    </div>
+                    <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
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                type="submit"
+                                defaultValue={msgStr("doSubmit")}
+                            />
+                        )}
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}