234 lines
12 KiB
TypeScript
234 lines
12 KiB
TypeScript
import { useState, useEffect, useReducer } from "react";
|
|
import { assert } from "tsafe/assert";
|
|
import { clsx } from "keycloakify/tools/clsx";
|
|
import type { PageProps } from "keycloakify/login/pages/PageProps";
|
|
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
|
|
import type { KcContext } from "../kcContext";
|
|
import type { I18n } from "../i18n";
|
|
|
|
export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
|
|
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
|
|
|
|
const { getClassName } = useGetClassName({
|
|
doUseDefaultCss,
|
|
classes
|
|
});
|
|
|
|
const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField } = kcContext;
|
|
|
|
const { msg, msgStr } = i18n;
|
|
|
|
const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
|
|
|
|
return (
|
|
<Template
|
|
{...{ kcContext, i18n, doUseDefaultCss, classes }}
|
|
displayMessage={!messagesPerField.existsError("username", "password")}
|
|
headerNode={msg("loginAccountTitle")}
|
|
displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
|
|
infoNode={
|
|
<div id="kc-registration-container">
|
|
<div id="kc-registration">
|
|
<span>
|
|
{msg("noAccount")}{" "}
|
|
<a tabIndex={8} href={url.registrationUrl}>
|
|
{msg("doRegister")}
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
socialProvidersNode={
|
|
<>
|
|
{realm.password && social.providers?.length && (
|
|
<div id="kc-social-providers" className={getClassName("kcFormSocialAccountSectionClass")}>
|
|
<hr />
|
|
<h2>{msg("identity-provider-login-label")}</h2>
|
|
<ul
|
|
className={clsx(
|
|
getClassName("kcFormSocialAccountListClass"),
|
|
social.providers.length > 3 && getClassName("kcFormSocialAccountListGridClass")
|
|
)}
|
|
>
|
|
{social.providers.map((...[p, , providers]) => (
|
|
<li key={p.alias}>
|
|
<a
|
|
id={`social-${p.alias}`}
|
|
className={clsx(
|
|
getClassName("kcFormSocialAccountListButtonClass"),
|
|
providers.length > 3 && getClassName("kcFormSocialAccountGridItem")
|
|
)}
|
|
type="button"
|
|
href={p.loginUrl}
|
|
>
|
|
{p.iconClasses && (
|
|
<i className={clsx(getClassName("kcCommonLogoIdP"), p.iconClasses)} aria-hidden="true"></i>
|
|
)}
|
|
<span
|
|
className={clsx(getClassName("kcFormSocialAccountNameClass"), p.iconClasses && "kc-social-icon-text")}
|
|
>
|
|
{p.displayName}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</>
|
|
}
|
|
>
|
|
<div id="kc-form">
|
|
<div id="kc-form-wrapper">
|
|
{realm.password && (
|
|
<form
|
|
id="kc-form-login"
|
|
onSubmit={() => {
|
|
setIsLoginButtonDisabled(true);
|
|
return true;
|
|
}}
|
|
action={url.loginAction}
|
|
method="post"
|
|
>
|
|
{!usernameHidden && (
|
|
<div className={getClassName("kcFormGroupClass")}>
|
|
<label htmlFor="username" className={getClassName("kcLabelClass")}>
|
|
{!realm.loginWithEmailAllowed
|
|
? msg("username")
|
|
: !realm.registrationEmailAsUsername
|
|
? msg("usernameOrEmail")
|
|
: msg("email")}
|
|
</label>
|
|
<input
|
|
tabIndex={2}
|
|
id="username"
|
|
className={getClassName("kcInputClass")}
|
|
name="username"
|
|
defaultValue={login.username ?? ""}
|
|
type="text"
|
|
autoFocus
|
|
autoComplete="username"
|
|
aria-invalid={messagesPerField.existsError("username", "password")}
|
|
/>
|
|
{messagesPerField.existsError("username", "password") && (
|
|
<span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
|
|
{messagesPerField.getFirstError("username", "password")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className={getClassName("kcFormGroupClass")}>
|
|
<label htmlFor="password" className={getClassName("kcLabelClass")}>
|
|
{msg("password")}
|
|
</label>
|
|
<PasswordWrapper getClassName={getClassName} i18n={i18n} passwordInputId="password">
|
|
<input
|
|
tabIndex={3}
|
|
id="password"
|
|
className={getClassName("kcInputClass")}
|
|
name="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
aria-invalid={messagesPerField.existsError("username", "password")}
|
|
/>
|
|
</PasswordWrapper>
|
|
{usernameHidden && messagesPerField.existsError("username", "password") && (
|
|
<span id="input-error" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
|
|
{messagesPerField.getFirstError("username", "password")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className={clsx(getClassName("kcFormGroupClass"), getClassName("kcFormSettingClass"))}>
|
|
<div id="kc-form-options">
|
|
{realm.rememberMe && !usernameHidden && (
|
|
<div className="checkbox">
|
|
<label>
|
|
<input
|
|
tabIndex={5}
|
|
id="rememberMe"
|
|
name="rememberMe"
|
|
type="checkbox"
|
|
defaultChecked={!!login.rememberMe}
|
|
/>{" "}
|
|
{msg("rememberMe")}
|
|
</label>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={getClassName("kcFormOptionsWrapperClass")}>
|
|
{realm.resetPasswordAllowed && (
|
|
<span>
|
|
<a tabIndex={6} href={url.loginResetCredentialsUrl}>
|
|
{msg("doForgotPassword")}
|
|
</a>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="kc-form-buttons" className={getClassName("kcFormGroupClass")}>
|
|
<input type="hidden" id="id-hidden-input" name="credentialId" value={auth.selectedCredential} />
|
|
<input
|
|
tabIndex={7}
|
|
disabled={isLoginButtonDisabled}
|
|
className={clsx(
|
|
getClassName("kcButtonClass"),
|
|
getClassName("kcButtonPrimaryClass"),
|
|
getClassName("kcButtonBlockClass"),
|
|
getClassName("kcButtonLargeClass")
|
|
)}
|
|
name="login"
|
|
id="kc-login"
|
|
type="submit"
|
|
value={msgStr("doLogIn")}
|
|
/>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Template>
|
|
);
|
|
}
|
|
|
|
function PasswordWrapper(props: {
|
|
getClassName: ReturnType<typeof useGetClassName>["getClassName"];
|
|
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>
|
|
);
|
|
}
|