Update keycloakify

2 files changed, 38 insertions, 38 deletions

diff --git a/src/keycloak-theme/login/pages/Login.stories.tsx b/src/keycloak-theme/login/pages/Login.stories.tsx
index fd1a295..66c474b 100644
--- a/src/keycloak-theme/login/pages/Login.stories.tsx
+++ b/src/keycloak-theme/login/pages/Login.stories.tsx
@@ -63,8 +63,12 @@ export const WithPresetUsername: ComponentStory<typeof PageStory> = () => (
 export const WithImmutablePresetUsername: ComponentStory<typeof PageStory> = () => (
     <PageStory
         kcContext={{
-            login: { username: '[email protected]' },
-            usernameEditDisabled: true
+            auth: {
+                attemptedUsername: "[email protected]",
+                showUsername: true
+            },
+            usernameHidden: true,
+            message: { type: "info", summary: "Please re-authenticate to continue" }
         }}
     />
 );
diff --git a/src/keycloak-theme/login/pages/Login.tsx b/src/keycloak-theme/login/pages/Login.tsx
index 4d2de20..1de3f27 100644
--- a/src/keycloak-theme/login/pages/Login.tsx
+++ b/src/keycloak-theme/login/pages/Login.tsx
@@ -1,4 +1,3 @@
-// ejected using 'npx eject-keycloak-page'
 import { useState, type FormEventHandler } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import { useConstCallback } from "keycloakify/tools/useConstCallback";
@@ -15,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;
 
@@ -67,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")}>
@@ -117,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
@@ -125,7 +121,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                                                     id="rememberMe"
                                                     name="rememberMe"
                                                     type="checkbox"
-                                                    {...(login.rememberMe
+                                                    {...(login.rememberMe === "on"
                                                         ? {
                                                               "checked": true
                                                           }