From 9adfa2200a1e1845a3f039b2ed87f1496c6fcee0 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Wed, 8 May 2024 17:11:58 +0200
Subject: [PATCH] Update SelectAuthenticator.tsx

---
 src/login/pages/SelectAuthenticator.tsx | 81 +++++++++----------------
 1 file changed, 29 insertions(+), 52 deletions(-)

diff --git a/src/login/pages/SelectAuthenticator.tsx b/src/login/pages/SelectAuthenticator.tsx
index 37dc74f8..22d10a1b 100644
--- a/src/login/pages/SelectAuthenticator.tsx
+++ b/src/login/pages/SelectAuthenticator.tsx
@@ -1,9 +1,8 @@
+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 "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;
@@ -12,60 +11,38 @@ export default function SelectAuthenticator(props: PageProps<Extract<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"
-            >
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} displayInfo={false} headerNode={msg("loginChooseAuthenticator")}>
+            <form id="kc-select-credential-form" className={getClassName("kcFormClass")} 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>
+                    {auth.authenticationSelections.map((authenticationSelection, i) => (
+                        <button
+                            key={i}
+                            className={getClassName("kcSelectAuthListItemClass")}
+                            type="submit"
+                            name="authenticationExecution"
+                            value={authenticationSelection.authExecId}
+                        >
+                            <div className={getClassName("kcSelectAuthListItemIconClass")}>
+                                <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("kcSelectAuthListItemHeadingClass")}>{msg(authenticationSelection.displayName)}</div>
+                                <div className={getClassName("kcSelectAuthListItemDescriptionClass")}>{msg(authenticationSelection.helpText)}</div>
+                            </div>
+                            <div className={getClassName("kcSelectAuthListItemFillClass")} />
+                            <div className={getClassName("kcSelectAuthListItemArrowClass")}>
+                                <i className={getClassName("kcSelectAuthListItemArrowIconClass")} />
+                            </div>
+                        </button>
                     ))}
-                    <input type="hidden" id="authexec-hidden-input" name="authenticationExecution" ref={authExecIdInput} />
                 </div>
             </form>
         </Template>