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

Extract field errors into a separate component

Browse Source
This commit is contained in:
Joseph Garrone 2024-04-27 19:35:42 +02:00
parent 319927e1dc
commit 9c6e3da304
1 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,7 +80,6 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
i18n={i18n}
/>
)}
<div
className={formGroupClassName}
style={{
@ -121,21 +120,12 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
/>
)}
{displayableErrors.length !== 0 && (
<span
id={`input-error-${attribute.name}${index === 0 ? "" : `-${index + 1}`}`}
className={getClassName("kcInputErrorMessageClass")}
style={{
"position": displayableErrors.length === 1 ? "absolute" : undefined
}}
aria-live="polite"
>
{displayableErrors.map(({ errorMessage }, i, arr) => (
<>
<span key={i}>{errorMessage}</span>
{arr.length - 1 !== i && <br />}
</>
))}
</span>
<FieldErrors
attribute={attribute}
index={index}
getClassName={getClassName}
displayableErrors={displayableErrors}
/>
)}
{attribute.annotations.inputHelperTextAfter !== undefined && index === 0 && (
<div
@ -338,6 +328,33 @@ function GroupLabel(props: {
return null;
}
function FieldErrors(props: {
attribute: Attribute;
index: number;
getClassName: UserProfileFormFieldsProps["getClassName"];
displayableErrors: FormFieldError[];
}) {
const { attribute, index, getClassName, displayableErrors } = props;
return (
<span
id={`input-error-${attribute.name}${index === 0 ? "" : `-${index + 1}`}`}
className={getClassName("kcInputErrorMessageClass")}
style={{
"position": displayableErrors.length === 1 ? "absolute" : undefined
}}
aria-live="polite"
>
{displayableErrors.map(({ errorMessage }, i, arr) => (
<>
<span key={i}>{errorMessage}</span>
{arr.length - 1 !== i && <br />}
</>
))}
</span>
);
}
function AddRemoveButtonsMultiValuedAttribute(props: {
formFieldStates: FormFieldState[];
attribute: Attribute;