From 256918df264300c575f3773ef6ffd59858b85825 Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone@data.gouv.fr>
Date: Tue, 15 Aug 2023 20:24:23 +0200
Subject: [PATCH] Update keycloakify

---
 package.json                                  |  2 +-
 .../login/pages/Login.stories.tsx             |  8 ++-
 src/keycloak-theme/login/pages/Login.tsx      | 68 +++++++++----------
 yarn.lock                                     |  8 +--
 4 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index 1b423ac..be2a35b 100755
--- a/package.json
+++ b/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",
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: 'max.mustermann@mail.com' },
-            usernameEditDisabled: true
+            auth: {
+                attemptedUsername: "max.mustermann@mail.com",
+                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
                                                           }
diff --git a/yarn.lock b/yarn.lock
index 7548624..9042a06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9768,10 +9768,10 @@ keycloak-js@^21.0.1:
     base64-js "^1.5.1"
     js-sha256 "^0.9.0"
 
-keycloakify@^7.15.3:
-  version "7.15.3"
-  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.15.3.tgz#c597aea5fa153949a60e84de4dfbfa703e7958e3"
-  integrity sha512-feO408LDucIjtMt6yRLTFvyAp1RDay6ndq5LZ1UhiN1R27q/CXsJZa6CHEnKVpUN/40tmIWyfCFwUXnCprI2EA==
+keycloakify@^7.15.9:
+  version "7.15.9"
+  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.15.9.tgz#c41d06f57338a540edfe1b09884c357b51ba53f6"
+  integrity sha512-GANwtnKtEaer4EfZ1FkihfQK437Qk+aAA/8C1nQWh2JVNn28qkofk2cDl4wJCHr5u+7SxFXyA9H0FbR5qhMHnQ==
   dependencies:
     "@babel/generator" "^7.22.9"
     "@babel/parser" "^7.22.7"