74 lines
3.6 KiB
TypeScript
74 lines
3.6 KiB
TypeScript
|
import type { PageProps } from "keycloakify/login/pages/PageProps";
|
||
|
|
import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
|
||
|
|
import type { KcContext } from "keycloakify/login/kcContext";
|
||
|
|
import type { I18n } from "keycloakify/login/i18n";
|
||
|
|
import { MouseEvent, useRef } from "react";
|
||
|
|
import { useConstCallback } from "keycloakify/tools/useConstCallback";
|
||
|
|
|
||
|
|
export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>, I18n>) {
|
||
|
|
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
|
||
|
|
const { url, auth } = kcContext;
|
||
|
|
|
||
|
|
const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
|
||
|
|
const { msg } = i18n;
|
||
|
|
|
||
|
|
const selectCredentialsForm = useRef<HTMLFormElement>(null);
|
||
|
|
const authExecIdInput = useRef<HTMLInputElement>(null);
|
||
|
|
|
||
|
|
const submitForm = useConstCallback(() => {
|
||
|
|
selectCredentialsForm.current?.submit();
|
||
|
|
});
|
||
|
|
|
||
|
|
const onSelectedAuthenticator = useConstCallback((event: MouseEvent<HTMLDivElement>) => {
|
||
|
|
const divElement = event.currentTarget;
|
||
|
|
const authExecId = divElement.dataset.authExecId;
|
||
|
|
|
||
|
|
if (!authExecIdInput.current || !authExecId) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
authExecIdInput.current.value = authExecId;
|
||
|
|
submitForm();
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginChooseAuthenticator")}>
|
||
|
|
<form
|
||
|
|
id="kc-select-credential-form"
|
||
|
|
className={getClassName("kcFormClass")}
|
||
|
|
ref={selectCredentialsForm}
|
||
|
|
action={url.loginAction}
|
||
|
|
method="post"
|
||
|
|
>
|
||
|
|
<div className={getClassName("kcSelectAuthListClass")}>
|
||
|
|
{auth.authenticationSelections.map((authenticationSelection, index) => (
|
||
|
|
<div key={index} className={getClassName("kcSelectAuthListItemClass")}>
|
||
|
|
<div
|
||
|
|
style={{ cursor: "pointer" }}
|
||
|
|
onClick={onSelectedAuthenticator}
|
||
|
|
data-auth-exec-id={authenticationSelection.authExecId}
|
||
|
|
className={getClassName("kcSelectAuthListItemInfoClass")}
|
||
|
|
>
|
||
|
|
<div className={getClassName("kcSelectAuthListItemLeftClass")}>
|
||
|
|
<span className={getClassName(authenticationSelection.iconCssClass ?? "kcAuthenticatorDefaultClass")}></span>
|
||
|
|
</div>
|
||
|
|
<div className={getClassName("kcSelectAuthListItemBodyClass")}>
|
||
|
|
<div className={getClassName("kcSelectAuthListItemDescriptionClass")}>
|
||
|
|
<div className={getClassName("kcSelectAuthListItemHeadingClass")}>
|
||
|
|
{msg(authenticationSelection.displayName)}
|
||
|
|
</div>
|
||
|
|
<div className={getClassName("kcSelectAuthListItemHelpTextClass")}>
|
||
|
|
{msg(authenticationSelection.helpText)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
<input type="hidden" id="authexec-hidden-input" name="authenticationExecution" ref={authExecIdInput} />
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</Template>
|
||
|
|
);
|
||
|
|
}
|