keycloakify 9.3.0 → 9.3.1

package/README.md

@@ -114,6 +114,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://m-siemens.de/"><img src="https://avatars.githubusercontent.com/u/1873922?v=4?s=100" width="100px;" alt="Markus Siemens"/><br /><sub><b>Markus Siemens</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=msiemens" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/law108000"><img src="https://avatars.githubusercontent.com/u/8112024?v=4?s=100" width="100px;" alt="Rlok"/><br /><sub><b>Rlok</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=law108000" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Moulyy"><img src="https://avatars.githubusercontent.com/u/115405804?v=4?s=100" width="100px;" alt="Moulyy"/><br /><sub><b>Moulyy</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Moulyy" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/giorgoslytos"><img src="https://avatars.githubusercontent.com/u/50946162?v=4?s=100" width="100px;" alt="giorgoslytos"/><br /><sub><b>giorgoslytos</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=giorgoslytos" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/login/lib/useGetClassName.js

@@ -81,7 +81,7 @@ export const { useGetClassName } = createUseClassName({
         "kcAuthenticatorWebAuthnClass": "fa fa-key list-view-pf-icon-lg",
         "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",

package/login/lib/useGetClassName.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGetClassName.js","sourceRoot":"","sources":["../../src/login/lib/useGetClassName.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useGetClassName.js","sourceRoot":"","sources":["../../src/login/lib/useGetClassName.ts"],"names":[],"mappings":"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"}

package/login/pages/LoginOtp.js

@@ -1,6 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { headInsert } from "../../tools/headInsert";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { clsx } from "../../tools/clsx";
 import { useGetClassName } from "../../login/lib/useGetClassName";
 export default function LoginOtp(props) {
@@ -11,45 +9,9 @@ export default function LoginOtp(props) {
     });
     const { otpLogin, url } = kcContext;
     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 (_jsx(Template, Object.assign({}, { kcContext, i18n, doUseDefaultCss, classes }, { headerNode: msg("doLogIn") }, { children: _jsxs("form", Object.assign({ id: "kc-otp-login-form", className: getClassName("kcFormClass"), action: url.loginAction, method: "post" }, { children: [otpLogin.userOtpCredentials.length > 1 && (_jsx("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: otpLogin.userOtpCredentials.map(otpCredential => (_jsxs("div", Object.assign({ className: getClassName("kcSelectOTPListClass") }, { children: [_jsx("input", { type: "hidden", value: "${otpCredential.id}" }), _jsxs("div", Object.assign({ className: getClassName("kcSelectOTPListItemClass") }, { children: [_jsx("span", { className: getClassName("kcAuthenticatorOtpCircleClass") }), _jsx("h2", Object.assign({ className: getClassName("kcSelectOTPItemHeadingClass") }, { children: otpCredential.userLabel }))] }))] }), otpCredential.id))) })) }))), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ className: getClassName("kcLabelWrapperClass") }, { children: _jsx("label", Object.assign({ htmlFor: "otp", className: getClassName("kcLabelClass") }, { children: msg("loginOtpOneTime") })) })), _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: _jsx("input", { id: "otp", name: "otp", autoComplete: "off", type: "text", className: getClassName("kcInputClass"), autoFocus: true }) }))] })), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ id: "kc-form-options", className: getClassName("kcFormOptionsClass") }, { children: _jsx("div", { className: getClassName("kcFormOptionsWrapperClass") }) })), _jsx("div", Object.assign({ id: "kc-form-buttons", className: getClassName("kcFormButtonsClass") }, { children: _jsx("input", { className: clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonBlockClass"), getClassName("kcButtonLargeClass")), name: "login", id: "kc-login", type: "submit", value: msgStr("doLogIn") }) }))] }))] })) })));
-}
-function evaluateInlineScript() {
-    $(document).ready(function () {
-        // Card Single Select
-        $(".card-pf-view-single-select").click(function () {
-            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();
-        }
-    });
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+                input[type="radio"]:checked~label.kcSelectOTPListClass{
+                    border: 2px solid #39a5dc;
+                }` }), _jsx(Template, Object.assign({}, { kcContext, i18n, doUseDefaultCss, classes }, { headerNode: msg("doLogIn") }, { children: _jsxs("form", Object.assign({ id: "kc-otp-login-form", className: getClassName("kcFormClass"), action: url.loginAction, method: "post" }, { children: [otpLogin.userOtpCredentials.length > 1 && (_jsx("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: otpLogin.userOtpCredentials.map((otpCredential, index) => (_jsxs("div", { children: [_jsx("input", { id: `kc-otp-credential-${index}`, name: "selectedCredentialId", type: "radio", value: otpCredential.id, style: { display: "none" } }), _jsx("label", Object.assign({ htmlFor: `kc-otp-credential-${index}`, className: getClassName("kcSelectOTPListClass") }, { children: _jsxs("div", Object.assign({ className: getClassName("kcSelectOTPListItemClass") }, { children: [_jsx("span", { className: getClassName("kcAuthenticatorOtpCircleClass") }), _jsx("h2", Object.assign({ className: getClassName("kcSelectOTPItemHeadingClass") }, { children: otpCredential.userLabel }))] })) }), otpCredential.id)] }, otpCredential.id))) })) }))), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ className: getClassName("kcLabelWrapperClass") }, { children: _jsx("label", Object.assign({ htmlFor: "otp", className: getClassName("kcLabelClass") }, { children: msg("loginOtpOneTime") })) })), _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: _jsx("input", { id: "otp", name: "otp", autoComplete: "off", type: "text", className: getClassName("kcInputClass"), autoFocus: true }) }))] })), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ id: "kc-form-options", className: getClassName("kcFormOptionsClass") }, { children: _jsx("div", { className: getClassName("kcFormOptionsWrapperClass") }) })), _jsx("div", Object.assign({ id: "kc-form-buttons", className: getClassName("kcFormButtonsClass") }, { children: _jsx("input", { className: clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonBlockClass"), getClassName("kcButtonLargeClass")), name: "login", id: "kc-login", type: "submit", value: msgStr("doLogIn") }) }))] }))] })) }))] }));
 }
 //# sourceMappingURL=LoginOtp.js.map

package/login/pages/LoginOtp.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoginOtp.js","sourceRoot":"","sources":["../../src/login/pages/LoginOtp.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"LoginOtp.js","sourceRoot":"","sources":["../../src/login/pages/LoginOtp.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAIxE,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAuE;IACpG,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAEtE,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC;QACrC,eAAe;QACf,OAAO;KACV,CAAC,CAAC;IAEH,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC;IAEpC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAE7B,OAAO,CACH,8BACI,0BACK;;;kBAGC,GACE,EACR,KAAC,QAAQ,oBAAK,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,IAAE,UAAU,EAAE,GAAG,CAAC,SAAS,CAAC,gBACnF,8BAAM,EAAE,EAAC,mBAAmB,EAAC,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,WAAW,EAAE,MAAM,EAAC,MAAM,iBACtG,QAAQ,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CACvC,4BAAK,SAAS,EAAE,YAAY,CAAC,kBAAkB,CAAC,gBAC5C,4BAAK,SAAS,EAAE,YAAY,CAAC,qBAAqB,CAAC,gBAC9C,QAAQ,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,CAAC,CACvD,0BACI,gBACI,EAAE,EAAE,qBAAqB,KAAK,EAAE,EAChC,IAAI,EAAC,sBAAsB,EAC3B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,CAAC,EAAE,EACvB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAC5B,EACF,8BACI,OAAO,EAAE,qBAAqB,KAAK,EAAE,EAErC,SAAS,EAAE,YAAY,CAAC,sBAAsB,CAAC,gBAE/C,6BAAK,SAAS,EAAE,YAAY,CAAC,0BAA0B,CAAC,iBACpD,eAAM,SAAS,EAAE,YAAY,CAAC,+BAA+B,CAAC,GAAI,EAClE,2BAAI,SAAS,EAAE,YAAY,CAAC,6BAA6B,CAAC,gBAAG,aAAa,CAAC,SAAS,IAAM,KACxF,KAND,aAAa,CAAC,EAAE,CAOjB,KAjBF,aAAa,CAAC,EAAE,CAkBpB,CACT,CAAC,IACA,IACJ,CACT,EACD,6BAAK,SAAS,EAAE,YAAY,CAAC,kBAAkB,CAAC,iBAC5C,4BAAK,SAAS,EAAE,YAAY,CAAC,qBAAqB,CAAC,gBAC/C,8BAAO,OAAO,EAAC,KAAK,EAAC,SAAS,EAAE,YAAY,CAAC,cAAc,CAAC,gBACvD,GAAG,CAAC,iBAAiB,CAAC,IACnB,IACN,EAEN,4BAAK,SAAS,EAAE,YAAY,CAAC,qBAAqB,CAAC,gBAC/C,gBAAO,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,YAAY,CAAC,cAAc,CAAC,EAAE,SAAS,SAAG,IAC7G,KACJ,EAEN,6BAAK,SAAS,EAAE,YAAY,CAAC,kBAAkB,CAAC,iBAC5C,4BAAK,EAAE,EAAC,iBAAiB,EAAC,SAAS,EAAE,YAAY,CAAC,oBAAoB,CAAC,gBACnE,cAAK,SAAS,EAAE,YAAY,CAAC,2BAA2B,CAAC,GAAI,IAC3D,EAEN,4BAAK,EAAE,EAAC,iBAAiB,EAAC,SAAS,EAAE,YAAY,CAAC,oBAAoB,CAAC,gBACnE,gBACI,SAAS,EAAE,IAAI,CACX,YAAY,CAAC,eAAe,CAAC,EAC7B,YAAY,CAAC,sBAAsB,CAAC,EACpC,YAAY,CAAC,oBAAoB,CAAC,EAClC,YAAY,CAAC,oBAAoB,CAAC,CACrC,EACD,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,GAC1B,IACA,KACJ,KACH,IACA,IACZ,CACN,CAAC;AACN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "9.3.0",
+    "version": "9.3.1",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",

package/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",

package/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,105 +16,77 @@ 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 (
-        <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 => (
-                                <div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}>
-                                    <input type="hidden" value="${otpCredential.id}" />
-                                    <div className={getClassName("kcSelectOTPListItemClass")}>
-                                        <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
-                                        <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
+        <>
+            <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, index) => (
+                                    <div key={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>
-                            ))}
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div className={getClassName("kcLabelWrapperClass")}>
+                            <label htmlFor="otp" className={getClassName("kcLabelClass")}>
+                                {msg("loginOtpOneTime")}
+                            </label>
                         </div>
-                    </div>
-                )}
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="otp" className={getClassName("kcLabelClass")}>
-                            {msg("loginOtpOneTime")}
-                        </label>
-                    </div>
 
-                    <div className={getClassName("kcInputWrapperClass")}>
-                        <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
+                        </div>
                     </div>
-                </div>
 
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")} />
-                    </div>
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                            <div className={getClassName("kcFormOptionsWrapperClass")} />
+                        </div>
 
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                        <input
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonPrimaryClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
-                            name="login"
-                            id="kc-login"
-                            type="submit"
-                            value={msgStr("doLogIn")}
-                        />
+                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                            <input
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="login"
+                                id="kc-login"
+                                type="submit"
+                                value={msgStr("doLogIn")}
+                            />
+                        </div>
                     </div>
-                </div>
-            </form>
-        </Template>
+                </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();
-        }
-    });
-}