From 0cfe240590d02140c7862a939895a4df906beb7b Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Fri, 5 Mar 2021 00:03:21 +0100
Subject: [PATCH] Fix non editable username

---
 .../build-keycloak-theme/generateFtl/index.ts | 21 ++++++++++++-------
 src/lib/components/Login.tsx                  | 11 ++++++++--
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/bin/build-keycloak-theme/generateFtl/index.ts b/src/bin/build-keycloak-theme/generateFtl/index.ts
index c6d4854c..4c6e7890 100644
--- a/src/bin/build-keycloak-theme/generateFtl/index.ts
+++ b/src/bin/build-keycloak-theme/generateFtl/index.ts
@@ -128,14 +128,21 @@ export function generateFtlFilesCodeFactory(
                 '            "value": function callee(target, source) {',
                 '                Object.keys(source).forEach(function (key) {',
                 '                    var value = source[key];',
-                '                    if (value instanceof Object) {',
-                '                        if (!(target[key] instanceof Object)) {',
-                '                            target[key] = {};',
-                '                        }',
-                '                        callee(target[key], value);',
-                '                    } else {',
-                '                        target[key] = value;',
+                '                    if( target[key] === undefined ){',
+                '                            target[key]= value;',
+                '                            return;',
                 '                    }',
+                '                    if( value instanceof Object ){',
+                '                            if( value instanceof Array ){',
+                '                                value.forEach(function (entry){',
+                '                                        target[key].push(entry);',
+                '                                });',
+                '                                return;',
+                '                            }',
+                '                            callee(target[key], value);',
+                '                            return;',
+                '                    }',
+                '                    target[key]= value;',
                 '                });',
                 '                return target;',
                 '            }',
diff --git a/src/lib/components/Login.tsx b/src/lib/components/Login.tsx
index 77ac9d68..bf0a114e 100644
--- a/src/lib/components/Login.tsx
+++ b/src/lib/components/Login.tsx
@@ -44,6 +44,12 @@ export const Login = memo((props: LoginProps) => {
         (setIsLoginButtonDisabled(true), true)
     );
 
+    const [ usernameInputValue, setUsernameInputValue ] = useState(login.username ?? '');
+
+    const onUsernameChange = useConstCallback(
+        (event: React.ChangeEvent<HTMLInputElement>)=> 
+            setUsernameInputValue(event.target.value)
+    );
 
     return (
         <Template
@@ -82,9 +88,10 @@ export const Login = memo((props: LoginProps) => {
                                             id="username"
                                             className={cx(kcProperties.kcInputClass)}
                                             name="username"
-                                            value={login.username ?? ''}
+                                            value={usernameInputValue}
                                             type="text"
-                                            {...(usernameEditDisabled ? { "disabled": true } : { "autofocus": true, "autocomplete": "off" })}
+                                            onChange={onUsernameChange}
+                                            {...(usernameEditDisabled ? { "disabled": true } : { "autoFocus": true, "autocomplete": "off" })}
                                         />
                                     </div>
                                     <div className={cx(kcProperties.kcFormGroupClass)}>