Update update-email.ftl page
This commit is contained in:
Joseph Garrone
parent
ef3c190747
commit
0d36ddd6d3
@ -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({
|
||||
|
||||
@ -175,11 +175,7 @@ export declare namespace KcContext {
|
||||
|
||||
export type Register = Common & {
|
||||
pageId: "register.ftl" | "register-user-profile.ftl";
|
||||
profile: {
|
||||
attributes: Attribute[];
|
||||
attributesByName: Record<string, Attribute>;
|
||||
html5DataAnnotations?: Record<string, string>;
|
||||
};
|
||||
profile: UserProfile;
|
||||
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: {
|
||||
attributes: Attribute[];
|
||||
attributesByName: Record<string, Attribute>;
|
||||
profile: UserProfile;
|
||||
};
|
||||
};
|
||||
|
||||
/*
|
||||
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: {
|
||||
context: "IDP_REVIEW";
|
||||
attributes: Attribute[];
|
||||
attributesByName: Record<string, Attribute>;
|
||||
};
|
||||
profile: UserProfile;
|
||||
};
|
||||
|
||||
export type UpdateEmail = Common & {
|
||||
pageId: "update-email.ftl";
|
||||
email: {
|
||||
value?: string;
|
||||
};
|
||||
profile: UserProfile;
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
@ -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");
|
||||
}
|
||||
|
||||
|
||||
@ -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,47 +21,48 @@ 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")}>
|
||||
<form id="kc-update-email-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
|
||||
<div
|
||||
className={clsx(getClassName("kcFormGroupClass"), messagesPerField.printIfExists("email", getClassName("kcFormGroupErrorClass")))}
|
||||
<Template
|
||||
{...{ kcContext, i18n, doUseDefaultCss, classes }}
|
||||
displayMessage={messagesPerField.exists("global")}
|
||||
displayRequiredFields={true}
|
||||
headerNode={msg("updateEmailTitle")}
|
||||
>
|
||||
<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")}
|
||||
<form id="kc-update-email-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
|
||||
<UserProfileFormFields
|
||||
{...{
|
||||
kcContext,
|
||||
i18n,
|
||||
getClassName,
|
||||
messagesPerField
|
||||
}}
|
||||
onIsFormSubmittableValueChange={setIsFormSubmittable}
|
||||
/>
|
||||
</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}
|
||||
className={clsx(
|
||||
getClassName("kcButtonClass"),
|
||||
getClassName("kcButtonPrimaryClass"),
|
||||
isAppInitiatedAction && getClassName("kcButtonBlockClass"),
|
||||
getClassName("kcButtonLargeClass")
|
||||
)}
|
||||
type="submit"
|
||||
defaultValue={msgStr("doSubmit")}
|
||||
value={msgStr("doSubmit")}
|
||||
/>
|
||||
{isAppInitiatedAction && (
|
||||
<button
|
||||
className={clsx(
|
||||
getClassName("kcButtonClass"),
|
||||
@ -67,18 +75,6 @@ export default function UpdateEmail(props: PageProps<Extract<KcContext, { pageId
|
||||
>
|
||||
{msg("doCancel")}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<input
|
||||
className={clsx(
|
||||
getClassName("kcButtonClass"),
|
||||
getClassName("kcButtonPrimaryClass"),
|
||||
getClassName("kcButtonBlockClass"),
|
||||
getClassName("kcButtonLargeClass")
|
||||
)}
|
||||
type="submit"
|
||||
defaultValue={msgStr("doSubmit")}
|
||||
/>
|
||||
)}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user