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

Extract form group label into a separate component

Browse Source
This commit is contained in:
Joseph Garrone 2024-04-27 19:31:28 +02:00
parent 4909928d3a
commit 319927e1dc
1 changed files with 101 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useEffect, Fragment } from "react"; import { useEffect, useState, 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 { import {
@ -51,7 +51,7 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
onIsFormSubmittableValueChange(isFormSubmittable); onIsFormSubmittableValueChange(isFormSubmittable);
}, [isFormSubmittable]); }, [isFormSubmittable]);
let currentGroupName = ""; const groupNameRef = { "current": "" };
return ( return (
<> <>
@ -63,90 +63,14 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
return ( return (
<Fragment key={`${attribute.name}-${index}`}> <Fragment key={`${attribute.name}-${index}`}>
{(() => { <GroupLabel
keycloak_prior_to_24: { attribute={attribute}
if (attribute.html5DataAnnotations !== undefined) { getClassName={getClassName}
break keycloak_prior_to_24; i18n={i18n}
} groupNameRef={groupNameRef}
formGroupClassName={formGroupClassName}
const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute as any as LegacyAttribute; />
{BeforeField !== undefined && (
return (
group !== currentGroupName &&
(currentGroupName = group) !== "" && (
<div className={formGroupClassName}>
<div className={getClassName("kcContentWrapperClass")}>
<label id={`header-${group}`} className={getClassName("kcFormGroupHeader")}>
{advancedMsg(groupDisplayHeader) || currentGroupName}
</label>
</div>
{groupDisplayDescription !== "" && (
<div className={getClassName("kcLabelWrapperClass")}>
<label id={`description-${group}`} className={getClassName("kcLabelClass")}>
{advancedMsg(groupDisplayDescription)}
</label>
</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 <BeforeField
attribute={attribute} attribute={attribute}
index={index} index={index}
@ -223,7 +147,7 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
</div> </div>
)} )}
{AfterField && ( {AfterField !== undefined && (
<AfterField <AfterField
attribute={attribute} attribute={attribute}
index={index} index={index}
@ -324,6 +248,96 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
); );
} }
function GroupLabel(props: {
attribute: Attribute;
getClassName: UserProfileFormFieldsProps["getClassName"];
i18n: I18n;
groupNameRef: {
current: string;
};
formGroupClassName: string;
}) {
const { attribute, getClassName, i18n, groupNameRef, formGroupClassName } = props;
const { advancedMsg } = i18n;
keycloak_prior_to_24: {
if (attribute.html5DataAnnotations !== undefined) {
break keycloak_prior_to_24;
}
const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute as any as LegacyAttribute;
return (
<>
{group !== groupNameRef.current && (groupNameRef.current = group) !== "" && (
<div className={formGroupClassName}>
<div className={getClassName("kcContentWrapperClass")}>
<label id={`header-${group}`} className={getClassName("kcFormGroupHeader")}>
{advancedMsg(groupDisplayHeader) || groupNameRef.current}
</label>
</div>
{groupDisplayDescription !== "" && (
<div className={getClassName("kcLabelWrapperClass")}>
<label id={`description-${group}`} className={getClassName("kcLabelClass")}>
{advancedMsg(groupDisplayDescription)}
</label>
</div>
)}
</div>
)}
</>
);
}
if (attribute.group?.name !== groupNameRef.current) {
groupNameRef.current = attribute.group?.name ?? "";
if (groupNameRef.current !== "") {
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;
}
function AddRemoveButtonsMultiValuedAttribute(props: { function AddRemoveButtonsMultiValuedAttribute(props: {
formFieldStates: FormFieldState[]; formFieldStates: FormFieldState[];
attribute: Attribute; attribute: Attribute;