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

Login page overhaul

Browse Source
This commit is contained in:
Joseph Garrone 2024-05-07 20:46:02 +02:00
parent 03e728fe04
commit b1bec4a343
3 changed files with 109 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/login/UserProfileFormFields.tsx
View File

@ -254,7 +254,7 @@ function InputFiledByType(props: InputFiledByTypeProps) {
if (attribute.name === "password" || attribute.name === "password-confirm") { if (attribute.name === "password" || attribute.name === "password-confirm") {
return ( return (
<PasswordWrapper getClassName={props.getClassName} i18n={props.i18n} attributeName={attribute.name}> <PasswordWrapper getClassName={props.getClassName} i18n={props.i18n} passwordInputId={attribute.name}>
{inputNode} {inputNode}
</PasswordWrapper> </PasswordWrapper>
); );
@ -265,20 +265,15 @@ function InputFiledByType(props: InputFiledByTypeProps) {
} }
} }
function PasswordWrapper(props: { function PasswordWrapper(props: { getClassName: (classKey: ClassKey) => string; i18n: I18n; passwordInputId: string; children: JSX.Element }) {
getClassName: UserProfileFormFieldsProps["getClassName"]; const { getClassName, i18n, passwordInputId, children } = props;
i18n: I18n;
attributeName: "password" | "password-confirm";
children: JSX.Element;
}) {
const { getClassName, i18n, attributeName, children } = props;
const { msgStr } = i18n; const { msgStr } = i18n;
const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer((isPasswordRevealed: boolean) => !isPasswordRevealed, false); const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer((isPasswordRevealed: boolean) => !isPasswordRevealed, false);
useEffect(() => { useEffect(() => {
const passwordInputElement = document.getElementById(attributeName); const passwordInputElement = document.getElementById(passwordInputId);
assert(passwordInputElement instanceof HTMLInputElement); assert(passwordInputElement instanceof HTMLInputElement);
@ -292,7 +287,7 @@ function PasswordWrapper(props: {
type="button" type="button"
className={getClassName("kcFormPasswordVisibilityButtonClass")} className={getClassName("kcFormPasswordVisibilityButtonClass")}
aria-label={msgStr(isPasswordRevealed ? "hidePassword" : "showPassword")} aria-label={msgStr(isPasswordRevealed ? "hidePassword" : "showPassword")}
aria-controls={attributeName} aria-controls={passwordInputId}
onClick={toggleIsPasswordRevealed} onClick={toggleIsPasswordRevealed}
> >
<i <i

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

@ -157,7 +157,7 @@ export declare namespace KcContext {
registrationDisabled: boolean; registrationDisabled: boolean;
login: { login: {
username?: string; username?: string;
rememberMe?: string; rememberMe?: string; // "on" | undefined
password?: string; password?: string;
}; };
usernameHidden?: boolean; usernameHidden?: boolean;

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

@ -1,9 +1,11 @@
import { useState } from "react"; import { useState, useEffect, useReducer } from "react";
import { assert } from "tsafe/assert";
import { clsx } from "keycloakify/tools/clsx"; import { clsx } from "keycloakify/tools/clsx";
import type { PageProps } from "keycloakify/login/pages/PageProps"; import type { PageProps } from "keycloakify/login/pages/PageProps";
import { useGetClassName } from "keycloakify/login/lib/useGetClassName"; import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
import type { KcContext } from "../kcContext"; import type { KcContext } from "../kcContext";
import type { I18n } from "../i18n"; import type { I18n } from "../i18n";
import type { ClassKey } from "keycloakify/login/TemplateProps";
export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) { export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@ -26,6 +28,8 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled} displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
headerNode={msg("loginAccountTitle")} headerNode={msg("loginAccountTitle")}
infoNode={ infoNode={
<>
{realm.password && realm.registrationAllowed && !registrationDisabled && (
<div id="kc-registration-container"> <div id="kc-registration-container">
<div id="kc-registration"> <div id="kc-registration">
<span> <span>
@ -36,47 +40,47 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
</span> </span>
</div> </div>
</div> </div>
)}
</>
} }
socialProvidersNode={ socialProvidersNode={
realm.password && <>
social.providers && ( {realm.password && social.providers?.length && (
<div id="kc-social-providers" className={getClassName("kcFormSocialAccountSectionClass")}> <div id="kc-social-providers" className={getClassName("kcFormSocialAccountSectionClass")}>
<hr /> <hr />
<h2>{msg("identity-provider-login-label")}</h2> <h2>{msg("identity-provider-login-label")}</h2>
<ul <ul
className={clsx( className={clsx(
getClassName("kcFormSocialAccountListClass"), getClassName("kcFormSocialAccountListClass"),
social.providers.length > 3 && getClassName("kcFormSocialAccountListGridClass") social.providers.length > 3 && getClassName("kcFormSocialAccountListGridClass")
)} )}
> >
{social.providers.map(p => ( {social.providers.map((...[p, , providers]) => (
<li key={p.alias}> <li key={p.alias}>
<a <a
id={`social-${p.alias}`} id={`social-${p.alias}`}
className={clsx( className={clsx(
getClassName("kcFormSocialAccountListButtonClass"), getClassName("kcFormSocialAccountListButtonClass"),
social.providers!.length > 3 && getClassName("kcFormSocialAccountGridItem") providers.length > 3 && getClassName("kcFormSocialAccountGridItem")
)} )}
type="button" type="button"
href={p.loginUrl} href={p.loginUrl}
> >
{p.iconClasses ? ( {p.iconClasses && (
<> <i className={clsx(getClassName("kcCommonLogoIdP"), p.iconClasses)} aria-hidden="true"></i>
<i className={clsx(getClassName("kcCommonLogoIdP"), p.iconClasses)} aria-hidden={true}></i> )}
<span className={clsx(getClassName("kcFormSocialAccountNameClass"), "kc-social-icon-text")}> <span
className={clsx(getClassName("kcFormSocialAccountNameClass"), p.iconClasses && "kc-social-icon-text")}
>
{p.displayName} {p.displayName}
</span> </span>
</>
) : (
<span className={getClassName("kcFormSocialAccountNameClass")}>{p.displayName}</span>
)}
</a> </a>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
) )}
</>
} }
> >
<div id="kc-form"> <div id="kc-form">
@ -86,7 +90,6 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
id="kc-form-login" id="kc-form-login"
onSubmit={() => { onSubmit={() => {
setIsLoginButtonDisabled(true); setIsLoginButtonDisabled(true);
return true; return true;
}} }}
action={url.loginAction} action={url.loginAction}
@ -101,7 +104,6 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
? msg("usernameOrEmail") ? msg("usernameOrEmail")
: msg("email")} : msg("email")}
</label> </label>
<input <input
tabIndex={2} tabIndex={2}
id="username" id="username"
@ -111,9 +113,8 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
type="text" type="text"
autoFocus autoFocus
autoComplete="username" autoComplete="username"
aria-invalid={messagesPerField.existsError("username", "password") ? true : undefined} aria-invalid={messagesPerField.existsError("username", "password")}
/> />
{messagesPerField.existsError("username", "password") && ( {messagesPerField.existsError("username", "password") && (
<span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite"> <span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
{messagesPerField.getFirstError("username", "password")} {messagesPerField.getFirstError("username", "password")}
@ -126,8 +127,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
<label htmlFor="password" className={getClassName("kcLabelClass")}> <label htmlFor="password" className={getClassName("kcLabelClass")}>
{msg("password")} {msg("password")}
</label> </label>
<PasswordWrapper getClassName={getClassName} i18n={i18n} passwordInputId="password">
<div className={getClassName("kcInputGroup")}>
<input <input
tabIndex={3} tabIndex={3}
id="password" id="password"
@ -135,40 +135,28 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
name="password" name="password"
type="password" type="password"
autoComplete="current-password" autoComplete="current-password"
aria-invalid={messagesPerField.existsError("username", "password") ? "true" : undefined} aria-invalid={messagesPerField.existsError("username", "password")}
/> />
<button </PasswordWrapper>
className={getClassName("kcFormPasswordVisibilityButtonClass")}
type="button"
aria-label={msgStr("showPassword")}
aria-controls="password"
data-password-toggle
tabIndex={4}
data-icon-show={getClassName("kcFormPasswordVisibilityIconShow")}
data-icon-hide={getClassName("kcFormPasswordVisibilityIconHide")}
data-label-show={msg("showPassword")}
data-label-hide={msg("hidePassword")}
>
<i className={getClassName("kcFormPasswordVisibilityIconShow")} aria-hidden={true}></i>
</button>
</div>
{usernameHidden && messagesPerField.existsError("username", "password") && ( {usernameHidden && messagesPerField.existsError("username", "password") && (
<span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite"> <span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
{messagesPerField.getFirstError("username", "password")} {messagesPerField.getFirstError("username", "password")}
</span> </span>
)} )}
</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 && !usernameHidden && ( {realm.rememberMe && !usernameHidden && (
<div className="checkbox"> <div className="checkbox">
<label> <label>
{login.rememberMe ? ( <input
<input tabIndex={5} id="rememberMe" name="rememberMe" type="checkbox" defaultChecked /> tabIndex={5}
) : ( id="rememberMe"
<input tabIndex={5} id="rememberMe" name="rememberMe" type="checkbox" /> name="rememberMe"
)} type="checkbox"
defaultChecked={!!login.rememberMe}
/>{" "}
{msg("rememberMe")} {msg("rememberMe")}
</label> </label>
</div> </div>
@ -184,10 +172,12 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
)} )}
</div> </div>
</div> </div>
<div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}> <div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
<input type="hidden" id="id-hidden-input" name="credentialId" value={auth.selectedCredential ?? ""} /> <input type="hidden" id="id-hidden-input" name="credentialId" value={auth.selectedCredential} />
<input <input
tabIndex={7} tabIndex={7}
disabled={isLoginButtonDisabled}
className={clsx( className={clsx(
getClassName("kcButtonClass"), getClassName("kcButtonClass"),
getClassName("kcButtonPrimaryClass"), getClassName("kcButtonPrimaryClass"),
@ -198,14 +188,46 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
id="kc-login" id="kc-login"
type="submit" type="submit"
value={msgStr("doLogIn")} value={msgStr("doLogIn")}
disabled={isLoginButtonDisabled}
/> />
</div> </div>
</form> </form>
)} )}
</div> </div>
</div> </div>
<script type="module" src={`${url.resourcesPath}/js/passwordVisibility.js`} />
</Template> </Template>
); );
} }
function PasswordWrapper(props: { getClassName: (classKey: ClassKey) => string; i18n: I18n; passwordInputId: string; children: JSX.Element }) {
const { getClassName, i18n, passwordInputId, children } = props;
const { msgStr } = i18n;
const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer((isPasswordRevealed: boolean) => !isPasswordRevealed, false);
useEffect(() => {
const passwordInputElement = document.getElementById(passwordInputId);
assert(passwordInputElement instanceof HTMLInputElement);
passwordInputElement.type = isPasswordRevealed ? "text" : "password";
}, [isPasswordRevealed]);
return (
<div className={getClassName("kcInputGroup")}>
{children}
<button
type="button"
className={getClassName("kcFormPasswordVisibilityButtonClass")}
aria-label={msgStr(isPasswordRevealed ? "hidePassword" : "showPassword")}
aria-controls={passwordInputId}
onClick={toggleIsPasswordRevealed}
>
<i
className={getClassName(isPasswordRevealed ? "kcFormPasswordVisibilityIconHide" : "kcFormPasswordVisibilityIconShow")}
aria-hidden
/>
</button>
</div>
);
}