agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start refactor of UserProfilesFormFields

Browse Source
This commit is contained in:
Joseph Garrone
2024-04-22 06:36:41 +02:00
parent 96a6e81235
commit ab5269ddaf
1 changed files with 91 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/login/pages/shared/UserProfileFormFields.tsx
View File

@ -1,12 +1,13 @@
import { useEffect, Fragment } from "react"; import { useEffect, Fragment } from "react";
import type { ClassKey } from "keycloakify/login/TemplateProps"; import type { ClassKey } from "keycloakify/login/TemplateProps";
import { clsx } from "keycloakify/tools/clsx"; import { clsx } from "keycloakify/tools/clsx";
import { useFormValidation } from "keycloakify/login/lib/useFormValidation"; import { useProfileAttributeForm, type KcContextLike } from "keycloakify/login/lib/useProfileAttributeForm";
import type { Attribute } from "keycloakify/login/kcContext/KcContext"; import type { Attribute, LegacyAttribute } from "keycloakify/login/kcContext/KcContext";
import type { I18n } from "../../i18n"; import type { I18n } from "../../i18n";
import { assert } from "tsafe/assert";
export type UserProfileFormFieldsProps = { export type UserProfileFormFieldsProps = {
kcContext: Parameters<typeof useFormValidation>[0]["kcContext"]; kcContext: KcContextLike;
i18n: I18n; i18n: I18n;
getClassName: (classKey: ClassKey) => string; getClassName: (classKey: ClassKey) => string;
onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void; onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
@ -23,23 +24,23 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
formValidationState: { fieldStateByAttributeName, isFormSubmittable }, formValidationState: { fieldStateByAttributeName, isFormSubmittable },
formValidationDispatch, formValidationDispatch,
attributesWithPassword attributesWithPassword
} = useFormValidation({ } = useProfileAttributeForm({
kcContext, kcContext,
i18n i18n
// NOTE: Uncomment the following line if you don't want for force the user to enter the password twice.
//"requirePasswordConfirmation": false
}); });
useEffect(() => { useEffect(() => {
onIsFormSubmittableValueChange(isFormSubmittable); onIsFormSubmittableValueChange(isFormSubmittable);
}, [isFormSubmittable]); }, [isFormSubmittable]);
let currentGroup = ""; let currentGroupName = "";
return ( return (
<> <>
{attributesWithPassword.map((attribute, i) => { {attributesWithPassword.map((attribute, i) => {
const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute; const { displayableErrors, value } = fieldStateByAttributeName[attribute.name];
const { value, displayableErrors } = fieldStateByAttributeName[attribute.name];
const formGroupClassName = clsx( const formGroupClassName = clsx(
getClassName("kcFormGroupClass"), getClassName("kcFormGroupClass"),
@ -48,11 +49,21 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
return ( return (
<Fragment key={i}> <Fragment key={i}>
{group !== currentGroup && (currentGroup = group) !== "" && ( {(() => {
keycloak_prior_to_24: {
if (attribute.html5DataAnnotations !== undefined) {
break keycloak_prior_to_24;
}
const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute as any as LegacyAttribute;
return (
group !== currentGroupName &&
(currentGroupName = group) !== "" && (
<div className={formGroupClassName}> <div className={formGroupClassName}>
<div className={getClassName("kcContentWrapperClass")}> <div className={getClassName("kcContentWrapperClass")}>
<label id={`header-${group}`} className={getClassName("kcFormGroupHeader")}> <label id={`header-${group}`} className={getClassName("kcFormGroupHeader")}>
{advancedMsg(groupDisplayHeader) || currentGroup} {advancedMsg(groupDisplayHeader) || currentGroupName}
</label> </label>
</div> </div>
{groupDisplayDescription !== "" && ( {groupDisplayDescription !== "" && (
@ -63,7 +74,63 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
</div> </div>
)} )}
</div> </div>
)
);
}
if (attribute.group?.name !== currentGroupName) {
currentGroupName = attribute.group?.name ?? "";
if (currentGroupName !== "") {
assert(attribute.group !== undefined);
return (
<div
className={getClassName("kcFormGroupClass")}
{...Object.fromEntries(
Object.entries(attribute.group.html5DataAnnotations).map(([key, value]) => [`data-${key}`, value])
)} )}
>
{(() => {
const groupDisplayHeader = attribute.group.displayHeader ?? "";
const groupHeaderText =
groupDisplayHeader !== "" ? advancedMsg(groupDisplayHeader) : attribute.group.name;
return (
<div className={getClassName("kcContentWrapperClass")}>
<label id={`header-${attribute.group.name}`} className={getClassName("kcFormGroupHeader")}>
{groupHeaderText}
</label>
</div>
);
})()}
{(() => {
const groupDisplayDescription = attribute.group.displayDescription ?? "";
if (groupDisplayDescription !== "") {
const groupDescriptionText = advancedMsg(groupDisplayDescription);
return (
<div className={getClassName("kcLabelWrapperClass")}>
<label
id={`description-${attribute.group.name}`}
className={getClassName("kcLabelClass")}
>
{groupDescriptionText}
</label>
</div>
);
}
return null;
})()}
</div>
);
}
}
return null;
})()}
{BeforeField && <BeforeField attribute={attribute} />} {BeforeField && <BeforeField attribute={attribute} />}