Update keycloakify

package.json

@@ -29,7 +29,7 @@
         "evt": "^2.4.15",
         "jwt-decode": "^3.1.2",
         "keycloak-js": "^21.0.1",
-        "keycloakify": "^7.15.3",
+        "keycloakify": "^7.15.9",
         "powerhooks": "^0.26.8",
         "react": "18.1.0",
         "react-dom": "18.1.0",

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: 'max.mustermann@mail.com' },
+            auth: {
-            usernameEditDisabled: true
+                attemptedUsername: "max.mustermann@mail.com",
+                showUsername: true
+            },
+            usernameHidden: true,
+            message: { type: "info", summary: "Please re-authenticate to continue" }
         }}
     />
 );

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,7 +66,8 @@ 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")}>
-                                {(() => {
+                                {!usernameHidden &&
+                                    (() => {
                                         const label = !realm.loginWithEmailAllowed
                                             ? "username"
                                             : realm.registrationEmailAsUsername
@@ -91,12 +91,8 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                                                     name={autoCompleteHelper}
                                                     defaultValue={login.username ?? ""}
                                                     type="text"
-                                                {...(usernameEditDisabled
+                                                    autoFocus={true}
-                                                    ? { "disabled": true }
+                                                    autoComplete="off"
-                                                    : {
-                                                          "autoFocus": true,
-                                                          "autoComplete": "off"
-                                                      })}
                                                 />
                                             </>
                                         );
@@ -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
                                                           }