From aab1b7d4908aad5a0525205914ccbfb193e23beb Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Sun, 5 May 2024 20:58:27 +0200
Subject: [PATCH] Almost done with UserProfileFormField.tsx

---
 src/login/kcContext/KcContext.ts                 | 7 +++++++
 src/login/pages/shared/UserProfileFormFields.tsx | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/login/kcContext/KcContext.ts b/src/login/kcContext/KcContext.ts
index 22fcd7dc..6d03545a 100644
--- a/src/login/kcContext/KcContext.ts
+++ b/src/login/kcContext/KcContext.ts
@@ -548,6 +548,13 @@ export type Attribute = {
         inputTypeRows?: `${number}`;
         inputTypeMaxlength?: `${number}`;
         inputHelperTextBefore?: string;
+        inputHelperTextAfter?: string;
+        inputTypePlaceholder?: string;
+        inputTypePattern?: string;
+        inputTypeMinlength?: `${number}`;
+        inputTypeMax?: string;
+        inputTypeMin?: string;
+        inputTypeStep?: string;
     };
     multivalued?: boolean;
     autocomplete?:
diff --git a/src/login/pages/shared/UserProfileFormFields.tsx b/src/login/pages/shared/UserProfileFormFields.tsx
index 121b49ab..1d311999 100644
--- a/src/login/pages/shared/UserProfileFormFields.tsx
+++ b/src/login/pages/shared/UserProfileFormFields.tsx
@@ -405,7 +405,8 @@ function InputTag(props: PropsOfInputFiledByType & { fieldIndex: number | undefi
                 max={attribute.annotations.inputTypeMax}
                 min={attribute.annotations.inputTypeMin}
                 step={attribute.annotations.inputTypeStep}
-                //{...Object.fromEntries(Object.entries(props.attribute.html5DataAnnotations).map(([key, value]) => [`data-${key}`, value])}
+                // 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({
                         "action": "update",