Apply #502 from main

src/login/lib/useGetClassName.ts

@@ -94,7 +94,7 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
         "kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg",
 
         //css classes for the OTP Login Form
-        "kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select",
+        "kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select col-xs-12",
         "kcSelectOTPListItemClass": "card-pf-body card-pf-top-element",
         "kcAuthenticatorOtpCircleClass": "fa fa-mobile card-pf-icon-circle",
         "kcSelectOTPItemHeadingClass": "card-pf-title text-center",

src/login/pages/LoginOtp.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from "react";
-import { headInsert } from "keycloakify/tools/headInsert";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
@@ -18,43 +16,38 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
 
     const { msg, msgStr } = i18n;
 
-    useEffect(() => {
-        let isCleanedUp = false;
-
-        const { prLoaded, remove } = headInsert({
-            "type": "javascript",
-            "src": `${kcContext.url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
-        });
-
-        (async () => {
-            await prLoaded;
-
-            if (isCleanedUp) {
-                return;
-            }
-
-            evaluateInlineScript();
-        })();
-
-        return () => {
-            isCleanedUp = true;
-            remove();
-        };
-    }, []);
-
     return (
+        <>
+            <style>
+                {`
+                input[type="radio"]:checked~label.kcSelectOTPListClass{
+                    border: 2px solid #39a5dc;
+                }`}
+            </style>
             <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
                 <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
                     {otpLogin.userOtpCredentials.length > 1 && (
                         <div className={getClassName("kcFormGroupClass")}>
                             <div className={getClassName("kcInputWrapperClass")}>
-                            {otpLogin.userOtpCredentials.map(otpCredential => (
+                                {otpLogin.userOtpCredentials.map((otpCredential, index) => (
-                                <div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}>
+                                    <div key={otpCredential.id}>
-                                    <input type="hidden" value="${otpCredential.id}" />
+                                        <input
+                                            id={`kc-otp-credential-${index}`}
+                                            name="selectedCredentialId"
+                                            type="radio"
+                                            value={otpCredential.id}
+                                            style={{ display: "none" }}
+                                        />
+                                        <label
+                                            htmlFor={`kc-otp-credential-${index}`}
+                                            key={otpCredential.id}
+                                            className={getClassName("kcSelectOTPListClass")}
+                                        >
                                             <div className={getClassName("kcSelectOTPListItemClass")}>
                                                 <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
                                                 <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
                                             </div>
+                                        </label>
                                     </div>
                                 ))}
                             </div>
@@ -94,29 +87,6 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
                     </div>
                 </form>
             </Template>
+        </>
     );
 }
-
-declare const $: any;
-
-function evaluateInlineScript() {
-    $(document).ready(function () {
-        // Card Single Select
-        $(".card-pf-view-single-select").click(function (this: any) {
-            if ($(this).hasClass("active")) {
-                $(this).removeClass("active");
-                $(this).children().removeAttr("name");
-            } else {
-                $(".card-pf-view-single-select").removeClass("active");
-                $(".card-pf-view-single-select").children().removeAttr("name");
-                $(this).addClass("active");
-                $(this).children().attr("name", "selectedCredentialId");
-            }
-        });
-
-        var defaultCred = $(".card-pf-view-single-select")[0];
-        if (defaultCred) {
-            defaultCred.click();
-        }
-    });
-}