pub-solar/keycloak-theme-react
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Update keycloakify

Browse source
This commit is contained in:
garronej 2023-08-15 20:24:23 +02:00
parent 9efcda0c3b
commit 256918df26
4 changed files with 43 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -29,7 +29,7 @@
"evt": "^2.4.15", "evt": "^2.4.15",
"jwt-decode": "^3.1.2", "jwt-decode": "^3.1.2",
"keycloak-js": "^21.0.1", "keycloak-js": "^21.0.1",
"keycloakify": "^7.15.3", "keycloakify": "^7.15.9",
"powerhooks": "^0.26.8", "powerhooks": "^0.26.8",
"react": "18.1.0", "react": "18.1.0",
"react-dom": "18.1.0", "react-dom": "18.1.0",

8
src/keycloak-theme/login/pages/Login.stories.tsx
View file

@ -63,8 +63,12 @@ export const WithPresetUsername: ComponentStory<typeof PageStory> = () => (
export const WithImmutablePresetUsername: ComponentStory<typeof PageStory> = () => ( export const WithImmutablePresetUsername: ComponentStory<typeof PageStory> = () => (
<PageStory <PageStory
kcContext={{ kcContext={{
login: { username: 'max.mustermann@mail.com' }, auth: {
usernameEditDisabled: true attemptedUsername: "max.mustermann@mail.com",
showUsername: true
},
usernameHidden: true,
message: { type: "info", summary: "Please re-authenticate to continue" }
}} }}
/> />
); );

68
src/keycloak-theme/login/pages/Login.tsx
View file

@ -1,4 +1,3 @@
// ejected using 'npx eject-keycloak-page'
import { useState, type FormEventHandler } from "react"; import { useState, type FormEventHandler } from "react";
import { clsx } from "keycloakify/tools/clsx"; import { clsx } from "keycloakify/tools/clsx";
import { useConstCallback } from "keycloakify/tools/useConstCallback"; import { useConstCallback } from "keycloakify/tools/useConstCallback";
@ -15,7 +14,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
classes classes
}); });
const { social, realm, url, usernameEditDisabled, login, auth, registrationDisabled } = kcContext; const { social, realm, url, usernameHidden, login, auth, registrationDisabled } = kcContext;
const { msg, msgStr } = i18n; const { msg, msgStr } = i18n;
@ -67,40 +66,37 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
{realm.password && ( {realm.password && (
<form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post"> <form id="kc-form-login" onSubmit={onSubmit} action={url.loginAction} method="post">
<div className={getClassName("kcFormGroupClass")}> <div className={getClassName("kcFormGroupClass")}>
{(() => { {!usernameHidden &&
const label = !realm.loginWithEmailAllowed (() => {
? "username" const label = !realm.loginWithEmailAllowed
: realm.registrationEmailAsUsername ? "username"
? "email" : realm.registrationEmailAsUsername
: "usernameOrEmail"; ? "email"
: "usernameOrEmail";
const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label; const autoCompleteHelper: typeof label = label === "usernameOrEmail" ? "username" : label;
return ( return (
<> <>
<label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}> <label htmlFor={autoCompleteHelper} className={getClassName("kcLabelClass")}>
{msg(label)} {msg(label)}
</label> </label>
<input <input
tabIndex={1} tabIndex={1}
id={autoCompleteHelper} id={autoCompleteHelper}
className={getClassName("kcInputClass")} className={getClassName("kcInputClass")}
//NOTE: This is used by Google Chrome auto fill so we use it to tell //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 //the browser how to pre fill the form but before submit we put it back
//to username because it is what keycloak expects. //to username because it is what keycloak expects.
name={autoCompleteHelper} name={autoCompleteHelper}
defaultValue={login.username ?? ""} defaultValue={login.username ?? ""}
type="text" type="text"
{...(usernameEditDisabled autoFocus={true}
? { "disabled": true } autoComplete="off"
: { />
"autoFocus": true, </>
"autoComplete": "off" );
})} })()}
/>
</>
);
})()}
</div> </div>
<div className={getClassName("kcFormGroupClass")}> <div className={getClassName("kcFormGroupClass")}>
<label htmlFor="password" className={getClassName("kcLabelClass")}> <label htmlFor="password" className={getClassName("kcLabelClass")}>
@ -117,7 +113,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
</div> </div>
<div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}> <div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
<div id="kc-form-options"> <div id="kc-form-options">
{realm.rememberMe && !usernameEditDisabled && ( {realm.rememberMe && !usernameHidden && (
<div className="checkbox"> <div className="checkbox">
<label> <label>
<input <input
@ -125,7 +121,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
id="rememberMe" id="rememberMe"
name="rememberMe" name="rememberMe"
type="checkbox" type="checkbox"
{...(login.rememberMe {...(login.rememberMe === "on"
? { ? {
"checked": true "checked": true
} }

8
yarn.lock
View file

@ -9768,10 +9768,10 @@ keycloak-js@^21.0.1:
base64-js "^1.5.1" base64-js "^1.5.1"
js-sha256 "^0.9.0" js-sha256 "^0.9.0"
keycloakify@^7.15.3: keycloakify@^7.15.9:
version "7.15.3" version "7.15.9"
resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.15.3.tgz#c597aea5fa153949a60e84de4dfbfa703e7958e3" resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-7.15.9.tgz#c41d06f57338a540edfe1b09884c357b51ba53f6"
integrity sha512-feO408LDucIjtMt6yRLTFvyAp1RDay6ndq5LZ1UhiN1R27q/CXsJZa6CHEnKVpUN/40tmIWyfCFwUXnCprI2EA== integrity sha512-GANwtnKtEaer4EfZ1FkihfQK437Qk+aAA/8C1nQWh2JVNn28qkofk2cDl4wJCHr5u+7SxFXyA9H0FbR5qhMHnQ==
dependencies: dependencies:
"@babel/generator" "^7.22.9" "@babel/generator" "^7.22.9"
"@babel/parser" "^7.22.7" "@babel/parser" "^7.22.7"