diff options
| -rwxr-xr-x | package.json | 2 | ||||
| -rw-r--r-- | src/keycloak-theme/login/pages/Login.stories.tsx | 8 | ||||
| -rw-r--r-- | src/keycloak-theme/login/pages/Login.tsx | 68 | ||||
| -rw-r--r-- | 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: '[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 } @@ -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" |