diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/keycloak-theme/login/pages/Login.stories.tsx | 8 | ||||
| -rw-r--r-- | src/keycloak-theme/login/pages/Login.tsx | 68 |
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 } |