feat: add select-authenticator page

2023-03-31 17:38:22 +02:00
parent b0db8caf65
commit e7837aea88
5 changed files with 133 additions and 2 deletions
--- a/src/login/pages/SelectAuthenticator.tsx
+++ b/src/login/pages/SelectAuthenticator.tsx
@ -0,0 +1,73 @@
+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>
+    );
+}