Update keycloakify
This commit is contained in:
garronej
parent
9efcda0c3b
commit
256918df26
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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" }
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue