aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rwxr-xr-xpackage.json2
-rw-r--r--src/keycloak-theme/login/pages/Login.stories.tsx8
-rw-r--r--src/keycloak-theme/login/pages/Login.tsx68
-rw-r--r--yarn.lock8
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: '[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
}
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"