From 4acf5d09317ffbe29f845470663204eaf321af38 Mon Sep 17 00:00:00 2001
From: Pierre Rebeu <pierre.rebeu@infopro-digital.com>
Date: Mon, 14 Aug 2023 15:53:05 +0200
Subject: [PATCH] fix: usernameEditDisabled renamed to usernameHidden

- update KcContext definition for login.ftl
- update the username field rendering conditions in Login.tsx

Closes #397
---
 src/login/kcContext/KcContext.ts      |  2 +-
 src/login/kcContext/kcContextMocks.ts |  2 +-
 src/login/pages/Login.tsx             | 65 +++++++++++++--------------
 stories/login/pages/Login.stories.tsx |  2 +-
 4 files changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/login/kcContext/KcContext.ts b/src/login/kcContext/KcContext.ts
index 8324feb2..b7164e58 100644
--- a/src/login/kcContext/KcContext.ts
+++ b/src/login/kcContext/KcContext.ts
@@ -145,7 +145,7 @@ export declare namespace KcContext {
             rememberMe?: string;
             password?: string;
         };
-        usernameEditDisabled: boolean;
+        usernameHidden?: boolean;
         social: {
             displayInfo: boolean;
             providers?: {
diff --git a/src/login/kcContext/kcContextMocks.ts b/src/login/kcContext/kcContextMocks.ts
index a6be790d..19434ca0 100644
--- a/src/login/kcContext/kcContextMocks.ts
+++ b/src/login/kcContext/kcContextMocks.ts
@@ -264,7 +264,7 @@ export const kcContextMocks = [
         "social": {
             "displayInfo": true
         },
-        "usernameEditDisabled": false,
+        "usernameHidden": false,
         "login": {},
         "registrationDisabled": false
     }),
diff --git a/src/login/pages/Login.tsx b/src/login/pages/Login.tsx
index f85049c3..a1590062 100644
--- a/src/login/pages/Login.tsx
+++ b/src/login/pages/Login.tsx
@@ -14,7 +14,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
         classes
     });
 
-    const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext;
+    const { social, realm, url, usernameHidden, login, auth, registrationDisabled } = kcContext;
 
     const { msg, msgStr } = i18n;
 
@@ -66,40 +66,37 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                     {realm.password && (
                         <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
                             <div className={getClassName("kcFormGroupClass")}>
-                                {(() => {
-                                    const label = !realm.loginWithEmailAllowed
-                                        ? "username"
-                                        : realm.registrationEmailAsUsername
-                                        ? "email"
-                                        : "usernameOrEmail";
+                                {!usernameHidden &&
+                                    (() => {
+                                        const label = !realm.loginWithEmailAllowed
+                                            ? "username"
+                                            : realm.registrationEmailAsUsername
+                                                ? "email"
+                                                : "usernameOrEmail";
 
-                                    const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
+                                        const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
 
-                                    return (
-                                        <>
-                                            <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
-                                                {msg(label)}
-                                            </label>
-                                            <input
-                                                tabIndex={1}
-                                                id={autoCompleteHelper}
-                                                className={getClassName("kcInputClass")}
-                                                //NOTE: This is used by Google Chrome auto fill so we use it to tell
-                                                //the browser how to pre fill the form but before submit we put it back
-                                                //to username because it is what keycloak expects.
-                                                name={autoCompleteHelper}
-                                                defaultValue={login.username ?? ""}
-                                                type="text"
-                                                {...(usernameEditDisabled
-                                                    ? { "disabled": true }
-                                                    : {
-                                                          "autoFocus": true,
-                                                          "autoComplete": "off"
-                                                      })}
-                                            />
-                                        </>
-                                    );
-                                })()}
+                                        return (
+                                            <>
+                                                <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
+                                                    {msg(label)}
+                                                </label>
+                                                <input
+                                                    tabIndex={1}
+                                                    id={autoCompleteHelper}
+                                                    className={getClassName("kcInputClass")}
+                                                    //NOTE: This is used by Google Chrome auto fill so we use it to tell
+                                                    //the browser how to pre fill the form but before submit we put it back
+                                                    //to username because it is what keycloak expects.
+                                                    name={autoCompleteHelper}
+                                                    defaultValue={login.username ?? ""}
+                                                    type="text"
+                                                    autoFocus={true}
+                                                    autoComplete="off"
+                                                />
+                                            </>
+                                        );
+                                    })()}
                             </div>
                             <div className={getClassName("kcFormGroupClass")}>
                                 <label htmlFor="password" className={getClassName("kcLabelClass")}>
@@ -116,7 +113,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                             </div>
                             <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
                                 <div id="kc-form-options">
-                                    {realm.rememberMe && !usernameEditDisabled && (
+                                    {realm.rememberMe && !usernameHidden && (
                                         <div className="checkbox">
                                             <label>
                                                 <input
diff --git a/stories/login/pages/Login.stories.tsx b/stories/login/pages/Login.stories.tsx
index 9f3d55b6..c6ed4ee0 100644
--- a/stories/login/pages/Login.stories.tsx
+++ b/stories/login/pages/Login.stories.tsx
@@ -75,7 +75,7 @@ export const WithImmutablePresetUsername = () => (
     <PageStory
         kcContext={{
             login: { username: "max.mustermann@mail.com" },
-            usernameEditDisabled: true
+            usernameHidden: true
         }}
     />
 );