178 lines
10 KiB
TypeScript
178 lines
10 KiB
TypeScript
import { Fragment } from "react";
|
|
import { clsx } from "keycloakify/tools/clsx";
|
|
import type { PageProps } from "keycloakify/login/pages/PageProps";
|
|
import { getKcClsx } from "keycloakify/login/lib/kcClsx";
|
|
import { useScript } from "keycloakify/login/pages/LoginPasskeysConditionalAuthenticate.useScript";
|
|
import type { KcContext } from "../KcContext";
|
|
import type { I18n } from "../i18n";
|
|
|
|
export default function LoginPasskeysConditionalAuthenticate(
|
|
props: PageProps<Extract<KcContext, { pageId: "login-passkeys-conditional-authenticate.ftl" }>, I18n>
|
|
) {
|
|
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
|
|
|
|
const { messagesPerField, login, url, usernameHidden, shouldDisplayAuthenticators, authenticators, registrationDisabled, realm } = kcContext;
|
|
|
|
const { msg, msgStr, advancedMsg } = i18n;
|
|
|
|
const { kcClsx } = getKcClsx({
|
|
doUseDefaultCss,
|
|
classes
|
|
});
|
|
|
|
const authButtonId = "authenticateWebAuthnButton";
|
|
|
|
useScript({ authButtonId, kcContext, i18n });
|
|
|
|
return (
|
|
<Template
|
|
kcContext={kcContext}
|
|
i18n={i18n}
|
|
doUseDefaultCss={doUseDefaultCss}
|
|
classes={classes}
|
|
headerNode={msg("passkey-login-title")}
|
|
infoNode={
|
|
realm.registrationAllowed &&
|
|
!registrationDisabled && (
|
|
<div id="kc-registration">
|
|
<span>
|
|
${msg("noAccount")}{" "}
|
|
<a tabIndex={6} href={url.registrationUrl}>
|
|
{msg("doRegister")}
|
|
</a>
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
>
|
|
<form id="webauth" action={url.loginAction} method="post">
|
|
<input type="hidden" id="clientDataJSON" name="clientDataJSON" />
|
|
<input type="hidden" id="authenticatorData" name="authenticatorData" />
|
|
<input type="hidden" id="signature" name="signature" />
|
|
<input type="hidden" id="credentialId" name="credentialId" />
|
|
<input type="hidden" id="userHandle" name="userHandle" />
|
|
<input type="hidden" id="error" name="error" />
|
|
</form>
|
|
|
|
<div className={kcClsx("kcFormGroupClass")} no-bottom-margin="true" style={{ marginBottom: 0 }}>
|
|
{authenticators !== undefined && Object.keys(authenticators).length !== 0 && (
|
|
<>
|
|
<form id="authn_select" className={kcClsx("kcFormClass")}>
|
|
{authenticators.authenticators.map((authenticator, i) => (
|
|
<input key={i} type="hidden" name="authn_use_chk" readOnly value={authenticator.credentialId} />
|
|
))}
|
|
</form>
|
|
{shouldDisplayAuthenticators && (
|
|
<>
|
|
{authenticators.authenticators.length > 1 && (
|
|
<p className={kcClsx("kcSelectAuthListItemTitle")}>{msg("passkey-available-authenticators")}</p>
|
|
)}
|
|
<div className={kcClsx("kcFormClass")}>
|
|
{authenticators.authenticators.map((authenticator, i) => (
|
|
<div key={i} id={`kc-webauthn-authenticator-item-${i}`} className={kcClsx("kcSelectAuthListItemClass")}>
|
|
<i
|
|
className={clsx(
|
|
(() => {
|
|
const className = kcClsx(authenticator.transports.iconClass as any);
|
|
if (className === authenticator.transports.iconClass) {
|
|
return kcClsx("kcWebAuthnDefaultIcon");
|
|
}
|
|
return className;
|
|
})(),
|
|
kcClsx("kcSelectAuthListItemIconPropertyClass")
|
|
)}
|
|
/>
|
|
<div className={kcClsx("kcSelectAuthListItemBodyClass")}>
|
|
<div
|
|
id={`kc-webauthn-authenticator-label-${i}`}
|
|
className={kcClsx("kcSelectAuthListItemHeadingClass")}
|
|
>
|
|
{advancedMsg(authenticator.label)}
|
|
</div>
|
|
{authenticator.transports !== undefined &&
|
|
authenticator.transports.displayNameProperties !== undefined &&
|
|
authenticator.transports.displayNameProperties.length !== 0 && (
|
|
<div
|
|
id={`kc-webauthn-authenticator-transport-${i}`}
|
|
className={kcClsx("kcSelectAuthListItemDescriptionClass")}
|
|
>
|
|
{authenticator.transports.displayNameProperties.map((nameProperty, i, arr) => (
|
|
<Fragment key={i}>
|
|
<span key={i}> {advancedMsg(nameProperty)} </span>
|
|
{i !== arr.length - 1 && <span>, </span>}
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className={kcClsx("kcSelectAuthListItemDescriptionClass")}>
|
|
<span id={`kc-webauthn-authenticator-createdlabel-${i}`}>{msg("passkey-createdAt-label")}</span>
|
|
<span id={`kc-webauthn-authenticator-created-${i}`}>{authenticator.createdAt}</span>
|
|
</div>
|
|
</div>
|
|
<div className={kcClsx("kcSelectAuthListItemFillClass")} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
<div id="kc-form">
|
|
<div id="kc-form-wrapper">
|
|
{realm.password && (
|
|
<form
|
|
id="kc-form-passkey"
|
|
action={url.loginAction}
|
|
method="post"
|
|
style={{ display: "none" }}
|
|
onSubmit={event => {
|
|
try {
|
|
// @ts-expect-error
|
|
event.target.login.disabled = true;
|
|
} catch {}
|
|
|
|
return true;
|
|
}}
|
|
>
|
|
{!usernameHidden && (
|
|
<div className={kcClsx("kcFormGroupClass")}>
|
|
<label htmlFor="username" className={kcClsx("kcLabelClass")}>
|
|
{msg("passkey-autofill-select")}
|
|
</label>
|
|
<input
|
|
tabIndex={1}
|
|
id="username"
|
|
aria-invalid={messagesPerField.existsError("username")}
|
|
className={kcClsx("kcInputClass")}
|
|
name="username"
|
|
defaultValue={login.username ?? ""}
|
|
//autoComplete="username webauthn"
|
|
type="text"
|
|
autoFocus
|
|
autoComplete="off"
|
|
/>
|
|
{messagesPerField.existsError("username") && (
|
|
<span id="input-error-username" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
|
|
{messagesPerField.get("username")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</form>
|
|
)}
|
|
<div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
|
|
<input
|
|
id={authButtonId}
|
|
type="button"
|
|
autoFocus
|
|
value={msgStr("passkey-doAuthenticate")}
|
|
className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Template>
|
|
);
|
|
}
|