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

Update SelectAuthenticator.tsx

Browse Source
This commit is contained in:
Joseph Garrone 2024-05-08 17:11:58 +02:00
parent f5ab145906
commit 9adfa2200a
1 changed files with 29 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/login/pages/SelectAuthenticator.tsx
View File

@ -1,9 +1,8 @@
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 "keycloakify/login/kcContext"; import type { KcContext } from "keycloakify/login/kcContext";
import type { I18n } from "keycloakify/login/i18n"; 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>) { export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>, I18n>) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props; const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@ -12,60 +11,38 @@ export default function SelectAuthenticator(props: PageProps<Extract<KcContext,
const { getClassName } = useGetClassName({ doUseDefaultCss, classes }); const { getClassName } = useGetClassName({ doUseDefaultCss, classes });
const { msg } = i18n; 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 ( return (
<Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("loginChooseAuthenticator")}> <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayInfo={false} headerNode={msg("loginChooseAuthenticator")}>
<form <form id="kc-select-credential-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
id="kc-select-credential-form"
className={getClassName("kcFormClass")}
ref={selectCredentialsForm}
action={url.loginAction}
method="post"
>
<div className={getClassName("kcSelectAuthListClass")}> <div className={getClassName("kcSelectAuthListClass")}>
{auth.authenticationSelections.map((authenticationSelection, index) => ( {auth.authenticationSelections.map((authenticationSelection, i) => (
<div key={index} className={getClassName("kcSelectAuthListItemClass")}> <button
<div key={i}
style={{ cursor: "pointer" }} className={getClassName("kcSelectAuthListItemClass")}
onClick={onSelectedAuthenticator} type="submit"
data-auth-exec-id={authenticationSelection.authExecId} name="authenticationExecution"
className={getClassName("kcSelectAuthListItemInfoClass")} value={authenticationSelection.authExecId}
> >
<div className={getClassName("kcSelectAuthListItemLeftClass")}> <div className={getClassName("kcSelectAuthListItemIconClass")}>
<span className={getClassName(authenticationSelection.iconCssClass ?? "kcAuthenticatorDefaultClass")}></span> <i
className={clsx(
// @ts-expect-error: iconCssClass is a string and not a class key
// however getClassName gracefully handles this case at runtime
getClassName(authenticationSelection.iconCssClass),
getClassName("kcSelectAuthListItemIconPropertyClass")
)}
/>
</div> </div>
<div className={getClassName("kcSelectAuthListItemBodyClass")}> <div className={getClassName("kcSelectAuthListItemBodyClass")}>
<div className={getClassName("kcSelectAuthListItemDescriptionClass")}> <div className={getClassName("kcSelectAuthListItemHeadingClass")}>{msg(authenticationSelection.displayName)}</div>
<div className={getClassName("kcSelectAuthListItemHeadingClass")}> <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>{msg(authenticationSelection.helpText)}</div>
{msg(authenticationSelection.displayName)}
</div>
<div className={getClassName("kcSelectAuthListItemHelpTextClass")}>
{msg(authenticationSelection.helpText)}
</div>
</div>
</div>
</div> </div>
<div className={getClassName("kcSelectAuthListItemFillClass")} />
<div className={getClassName("kcSelectAuthListItemArrowClass")}>
<i className={getClassName("kcSelectAuthListItemArrowIconClass")} />
</div> </div>
</button>
))} ))}
<input type="hidden" id="authexec-hidden-input" name="authenticationExecution" ref={authExecIdInput} />
</div> </div>
</form> </form>
</Template> </Template>