Extract field errors into a separate component

src/login/pages/shared/UserProfileFormFields.tsx

@@ -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
+                                    <FieldErrors
-                                        id={`input-error-${attribute.name}${index === 0 ? "" : `-${index + 1}`}`}
+                                        attribute={attribute}
-                                        className={getClassName("kcInputErrorMessageClass")}
+                                        index={index}
-                                        style={{
+                                        getClassName={getClassName}
-                                            "position": displayableErrors.length === 1 ? "absolute" : undefined
+                                        displayableErrors={displayableErrors}
-                                        }}
+                                    />
-                                        aria-live="polite"
-                                    >
-                                        {displayableErrors.map(({ errorMessage }, i, arr) => (
-                                            <>
-                                                <span key={i}>{errorMessage}</span>
-                                                {arr.length - 1 !== i && <br />}
-                                            </>
-                                        ))}
-                                    </span>
                                 )}
                                 {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;