agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: usernameEditDisabled renamed to usernameHidden

Browse Source 
- update KcContext definition for login.ftl
- update the username field rendering conditions in Login.tsx

Closes #397
This commit is contained in:
Pierre Rebeu 2023-08-14 15:53:05 +02:00
parent 5156b2e0cc
commit 4acf5d0931
No known key found for this signature in database
GPG Key ID: 99E3FF6E20947E77
4 changed files with 34 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/login/kcContext/KcContext.ts
View File

@ -145,7 +145,7 @@ export declare namespace KcContext {
rememberMe?: string; rememberMe?: string;
password?: string; password?: string;
}; };
usernameEditDisabled: boolean; usernameHidden?: boolean;
social: { social: {
displayInfo: boolean; displayInfo: boolean;
providers?: { providers?: {

2
src/login/kcContext/kcContextMocks.ts
View File

@ -264,7 +264,7 @@ export const kcContextMocks = [
"social": { "social": {
"displayInfo": true "displayInfo": true
}, },
"usernameEditDisabled": false, "usernameHidden": false,
"login": {}, "login": {},
"registrationDisabled": false "registrationDisabled": false
}), }),

65
src/login/pages/Login.tsx
View File

@ -14,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;
@ -66,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")}>
@ -116,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

2
stories/login/pages/Login.stories.tsx
View File

@ -75,7 +75,7 @@ export const WithImmutablePresetUsername = () => (
<PageStory <PageStory
kcContext={{ kcContext={{
login: { username: "max.mustermann@mail.com" }, login: { username: "max.mustermann@mail.com" },
usernameEditDisabled: true usernameHidden: true
}} }}
/> />
); );