@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.7

package/keycloak-theme/login/pages/login-passkeys-conditional-authenticate/Page.tsx

@@ -1,233 +1,233 @@
-import { clsx } from "@keycloakify/login-ui/tools/clsx";
-import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
-import { Fragment } from "react";
-import { assert } from "tsafe/assert";
-import { useKcContext } from "../../KcContext";
-import { Template } from "../../components/Template";
-import { useI18n } from "../../i18n";
-import { useScript } from "./useScript";
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-passkeys-conditional-authenticate.ftl");
-
-    const {
-        messagesPerField,
-        login,
-        url,
-        usernameHidden,
-        shouldDisplayAuthenticators,
-        authenticators,
-        registrationDisabled,
-        realm
-    } = kcContext;
-
-    const { msg, msgStr, advancedMsg } = useI18n();
-
-    const { kcClsx } = useKcClsx();
-
-    const webAuthnButtonId = "authenticateWebAuthnButton";
-
-    useScript({ webAuthnButtonId });
-
-    return (
-        <Template
-            headerNode={msg("passkey-login-title")}
-            infoNode={
-                realm.registrationAllowed &&
-                !registrationDisabled && (
-                    <div id="kc-registration">
-                        <span>
-                            ${msg("noAccount")}{" "}
-                            <a tabIndex={6} href={url.registrationUrl}>
-                                {msg("doRegister")}
-                            </a>
-                        </span>
-                    </div>
-                )
-            }
-        >
-            <form id="webauth" action={url.loginAction} method="post">
-                <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
-                <input type="hidden" id="authenticatorData" name="authenticatorData" />
-                <input type="hidden" id="signature" name="signature" />
-                <input type="hidden" id="credentialId" name="credentialId" />
-                <input type="hidden" id="userHandle" name="userHandle" />
-                <input type="hidden" id="error" name="error" />
-            </form>
-
-            <div className={kcClsx("kcFormGroupClass")} style={{ marginBottom: 0 }}>
-                {authenticators !== undefined && Object.keys(authenticators).length !== 0 && (
-                    <>
-                        <form id="authn_select" className={kcClsx("kcFormClass")}>
-                            {authenticators.authenticators.map((authenticator, i) => (
-                                <input
-                                    key={i}
-                                    type="hidden"
-                                    name="authn_use_chk"
-                                    readOnly
-                                    value={authenticator.credentialId}
-                                />
-                            ))}
-                        </form>
-                        {shouldDisplayAuthenticators && (
-                            <>
-                                {authenticators.authenticators.length > 1 && (
-                                    <p className={kcClsx("kcSelectAuthListItemTitle")}>
-                                        {msg("passkey-available-authenticators")}
-                                    </p>
-                                )}
-                                <div className={kcClsx("kcFormClass")}>
-                                    {authenticators.authenticators.map((authenticator, i) => (
-                                        <div
-                                            key={i}
-                                            id={`kc-webauthn-authenticator-item-${i}`}
-                                            className={kcClsx("kcSelectAuthListItemClass")}
-                                        >
-                                            <i
-                                                className={clsx(
-                                                    (() => {
-                                                        const className = kcClsx(
-                                                            authenticator.transports.iconClass as any
-                                                        );
-                                                        if (
-                                                            className ===
-                                                            authenticator.transports.iconClass
-                                                        ) {
-                                                            return kcClsx("kcWebAuthnDefaultIcon");
-                                                        }
-                                                        return className;
-                                                    })(),
-                                                    kcClsx("kcSelectAuthListItemIconPropertyClass")
-                                                )}
-                                            />
-                                            <div className={kcClsx("kcSelectAuthListItemBodyClass")}>
-                                                <div
-                                                    id={`kc-webauthn-authenticator-label-${i}`}
-                                                    className={kcClsx(
-                                                        "kcSelectAuthListItemHeadingClass"
-                                                    )}
-                                                >
-                                                    {advancedMsg(authenticator.label)}
-                                                </div>
-                                                {authenticator.transports !== undefined &&
-                                                    authenticator.transports.displayNameProperties !==
-                                                    undefined &&
-                                                    authenticator.transports.displayNameProperties
-                                                        .length !== 0 && (
-                                                        <div
-                                                            id={`kc-webauthn-authenticator-transport-${i}`}
-                                                            className={kcClsx(
-                                                                "kcSelectAuthListItemDescriptionClass"
-                                                            )}
-                                                        >
-                                                            {authenticator.transports.displayNameProperties.map(
-                                                                (nameProperty, i, arr) => (
-                                                                    <Fragment key={i}>
-                                                                        <span key={i}>
-                                                                            {" "}
-                                                                            {advancedMsg(
-                                                                                nameProperty
-                                                                            )}{" "}
-                                                                        </span>
-                                                                        {i !== arr.length - 1 && (
-                                                                            <span>, </span>
-                                                                        )}
-                                                                    </Fragment>
-                                                                )
-                                                            )}
-                                                        </div>
-                                                    )}
-                                                <div
-                                                    className={kcClsx(
-                                                        "kcSelectAuthListItemDescriptionClass"
-                                                    )}
-                                                >
-                                                    <span
-                                                        id={`kc-webauthn-authenticator-createdlabel-${i}`}
-                                                    >
-                                                        {msg("passkey-createdAt-label")}
-                                                    </span>
-                                                    <span id={`kc-webauthn-authenticator-created-${i}`}>
-                                                        {authenticator.createdAt}
-                                                    </span>
-                                                </div>
-                                            </div>
-                                            <div className={kcClsx("kcSelectAuthListItemFillClass")} />
-                                        </div>
-                                    ))}
-                                </div>
-                            </>
-                        )}
-                    </>
-                )}
-                <div id="kc-form">
-                    <div id="kc-form-wrapper">
-                        {realm.password && (
-                            <form
-                                id="kc-form-login"
-                                action={url.loginAction}
-                                method="post"
-                                style={{ display: "none" }}
-                                onSubmit={event => {
-                                    try {
-                                        // @ts-expect-error: Ok
-                                        event.target.login.disabled = true;
-                                    } catch { /* empty */ }
-
-                                    return true;
-                                }}
-                            >
-                                {!usernameHidden && (
-                                    <div className={kcClsx("kcFormGroupClass")}>
-                                        <label htmlFor="username" className={kcClsx("kcLabelClass")}>
-                                            {msg("passkey-autofill-select")}
-                                        </label>
-                                        <input
-                                            tabIndex={1}
-                                            id="username"
-                                            aria-invalid={messagesPerField.existsError("username")}
-                                            className={kcClsx("kcInputClass")}
-                                            name="username"
-                                            defaultValue={login.username ?? ""}
-                                            autoComplete="username webauthn"
-                                            type="text"
-                                            autoFocus
-                                        />
-                                        {messagesPerField.existsError("username") && (
-                                            <span
-                                                id="input-error-username"
-                                                className={kcClsx("kcInputErrorMessageClass")}
-                                                aria-live="polite"
-                                            >
-                                                {messagesPerField.get("username")}
-                                            </span>
-                                        )}
-                                    </div>
-                                )}
-                            </form>
-                        )}
-                        <div
-                            id="kc-form-passkey-button"
-                            className={kcClsx("kcFormButtonsClass")}
-                            style={{ display: "none" }}
-                        >
-                            <input
-                                id={webAuthnButtonId}
-                                type="button"
-                                autoFocus
-                                value={msgStr("passkey-doAuthenticate")}
-                                className={kcClsx(
-                                    "kcButtonClass",
-                                    "kcButtonPrimaryClass",
-                                    "kcButtonBlockClass",
-                                    "kcButtonLargeClass"
-                                )}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Template>
-    );
-}
+import { clsx } from "@keycloakify/login-ui/tools/clsx";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { Fragment } from "react";
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { Template } from "../../components/Template";
+import { useI18n } from "../../i18n";
+import { useScript } from "./useScript";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-passkeys-conditional-authenticate.ftl");
+
+    const {
+        messagesPerField,
+        login,
+        url,
+        usernameHidden,
+        shouldDisplayAuthenticators,
+        authenticators,
+        registrationDisabled,
+        realm
+    } = kcContext;
+
+    const { msg, msgStr, advancedMsg } = useI18n();
+
+    const { kcClsx } = useKcClsx();
+
+    const webAuthnButtonId = "authenticateWebAuthnButton";
+
+    useScript({ webAuthnButtonId });
+
+    return (
+        <Template
+            headerNode={msg("passkey-login-title")}
+            infoNode={
+                realm.registrationAllowed &&
+                !registrationDisabled && (
+                    <div id="kc-registration">
+                        <span>
+                            ${msg("noAccount")}{" "}
+                            <a tabIndex={6} href={url.registrationUrl}>
+                                {msg("doRegister")}
+                            </a>
+                        </span>
+                    </div>
+                )
+            }
+        >
+            <form id="webauth" action={url.loginAction} method="post">
+                <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
+                <input type="hidden" id="authenticatorData" name="authenticatorData" />
+                <input type="hidden" id="signature" name="signature" />
+                <input type="hidden" id="credentialId" name="credentialId" />
+                <input type="hidden" id="userHandle" name="userHandle" />
+                <input type="hidden" id="error" name="error" />
+            </form>
+
+            <div className={kcClsx("kcFormGroupClass")} style={{ marginBottom: 0 }}>
+                {authenticators !== undefined && Object.keys(authenticators).length !== 0 && (
+                    <>
+                        <form id="authn_select" className={kcClsx("kcFormClass")}>
+                            {authenticators.authenticators.map((authenticator, i) => (
+                                <input
+                                    key={i}
+                                    type="hidden"
+                                    name="authn_use_chk"
+                                    readOnly
+                                    value={authenticator.credentialId}
+                                />
+                            ))}
+                        </form>
+                        {shouldDisplayAuthenticators && (
+                            <>
+                                {authenticators.authenticators.length > 1 && (
+                                    <p className={kcClsx("kcSelectAuthListItemTitle")}>
+                                        {msg("passkey-available-authenticators")}
+                                    </p>
+                                )}
+                                <div className={kcClsx("kcFormClass")}>
+                                    {authenticators.authenticators.map((authenticator, i) => (
+                                        <div
+                                            key={i}
+                                            id={`kc-webauthn-authenticator-item-${i}`}
+                                            className={kcClsx("kcSelectAuthListItemClass")}
+                                        >
+                                            <i
+                                                className={clsx(
+                                                    (() => {
+                                                        const className = kcClsx(
+                                                            authenticator.transports.iconClass as any
+                                                        );
+                                                        if (
+                                                            className ===
+                                                            authenticator.transports.iconClass
+                                                        ) {
+                                                            return kcClsx("kcWebAuthnDefaultIcon");
+                                                        }
+                                                        return className;
+                                                    })(),
+                                                    kcClsx("kcSelectAuthListItemIconPropertyClass")
+                                                )}
+                                            />
+                                            <div className={kcClsx("kcSelectAuthListItemBodyClass")}>
+                                                <div
+                                                    id={`kc-webauthn-authenticator-label-${i}`}
+                                                    className={kcClsx(
+                                                        "kcSelectAuthListItemHeadingClass"
+                                                    )}
+                                                >
+                                                    {advancedMsg(authenticator.label)}
+                                                </div>
+                                                {authenticator.transports !== undefined &&
+                                                    authenticator.transports.displayNameProperties !==
+                                                    undefined &&
+                                                    authenticator.transports.displayNameProperties
+                                                        .length !== 0 && (
+                                                        <div
+                                                            id={`kc-webauthn-authenticator-transport-${i}`}
+                                                            className={kcClsx(
+                                                                "kcSelectAuthListItemDescriptionClass"
+                                                            )}
+                                                        >
+                                                            {authenticator.transports.displayNameProperties.map(
+                                                                (nameProperty, i, arr) => (
+                                                                    <Fragment key={i}>
+                                                                        <span key={i}>
+                                                                            {" "}
+                                                                            {advancedMsg(
+                                                                                nameProperty
+                                                                            )}{" "}
+                                                                        </span>
+                                                                        {i !== arr.length - 1 && (
+                                                                            <span>, </span>
+                                                                        )}
+                                                                    </Fragment>
+                                                                )
+                                                            )}
+                                                        </div>
+                                                    )}
+                                                <div
+                                                    className={kcClsx(
+                                                        "kcSelectAuthListItemDescriptionClass"
+                                                    )}
+                                                >
+                                                    <span
+                                                        id={`kc-webauthn-authenticator-createdlabel-${i}`}
+                                                    >
+                                                        {msg("passkey-createdAt-label")}
+                                                    </span>
+                                                    <span id={`kc-webauthn-authenticator-created-${i}`}>
+                                                        {authenticator.createdAt}
+                                                    </span>
+                                                </div>
+                                            </div>
+                                            <div className={kcClsx("kcSelectAuthListItemFillClass")} />
+                                        </div>
+                                    ))}
+                                </div>
+                            </>
+                        )}
+                    </>
+                )}
+                <div id="kc-form">
+                    <div id="kc-form-wrapper">
+                        {realm.password && (
+                            <form
+                                id="kc-form-login"
+                                action={url.loginAction}
+                                method="post"
+                                style={{ display: "none" }}
+                                onSubmit={event => {
+                                    try {
+                                        // @ts-expect-error: Ok
+                                        event.target.login.disabled = true;
+                                    } catch { /* empty */ }
+
+                                    return true;
+                                }}
+                            >
+                                {!usernameHidden && (
+                                    <div className={kcClsx("kcFormGroupClass")}>
+                                        <label htmlFor="username" className={kcClsx("kcLabelClass")}>
+                                            {msg("passkey-autofill-select")}
+                                        </label>
+                                        <input
+                                            tabIndex={1}
+                                            id="username"
+                                            aria-invalid={messagesPerField.existsError("username")}
+                                            className={kcClsx("kcInputClass")}
+                                            name="username"
+                                            defaultValue={login.username ?? ""}
+                                            autoComplete="username webauthn"
+                                            type="text"
+                                            autoFocus
+                                        />
+                                        {messagesPerField.existsError("username") && (
+                                            <span
+                                                id="input-error-username"
+                                                className={kcClsx("kcInputErrorMessageClass")}
+                                                aria-live="polite"
+                                            >
+                                                {messagesPerField.get("username")}
+                                            </span>
+                                        )}
+                                    </div>
+                                )}
+                            </form>
+                        )}
+                        <div
+                            id="kc-form-passkey-button"
+                            className={kcClsx("kcFormButtonsClass")}
+                            style={{ display: "none" }}
+                        >
+                            <input
+                                id={webAuthnButtonId}
+                                type="button"
+                                autoFocus
+                                value={msgStr("passkey-doAuthenticate")}
+                                className={kcClsx(
+                                    "kcButtonClass",
+                                    "kcButtonPrimaryClass",
+                                    "kcButtonBlockClass",
+                                    "kcButtonLargeClass"
+                                )}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-passkeys-conditional-authenticate/index.ts

@@ -1,3 +1,3 @@
-import { Page } from "./Page";
-
-export default Page;
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/login-passkeys-conditional-authenticate/useScript.tsx

@@ -1,63 +1,63 @@
-import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
-import { waitForElementMountedOnDom } from "@keycloakify/login-ui/tools/waitForElementMountedOnDom";
-import { useEffect } from "react";
-import { assert } from "tsafe/assert";
-
-import { useI18n } from "../../i18n";
-import { useKcContext } from "../../KcContext";
-
-export function useScript(params: { webAuthnButtonId: string }) {
-    const { webAuthnButtonId } = params;
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-passkeys-conditional-authenticate.ftl");
-
-    const { msgStr, isFetchingTranslations } = useI18n();
-
-    const { insertScriptTags } = useInsertScriptTags({
-        effectId: "LoginRecoveryAuthnCodeConfig",
-        scriptTags: [
-            {
-                type: "module",
-                textContent: () => `
-                    import { authenticateByWebAuthn } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/webauthnAuthenticate.js";
-                    import { initAuthenticate } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/passkeysConditionalAuth.js";
-
-                    const authButton = document.getElementById("${webAuthnButtonId}");
-                    const input = {
-                        isUserIdentified : ${kcContext.isUserIdentified},
-                        challenge : ${JSON.stringify(kcContext.challenge)},
-                        userVerification : ${JSON.stringify(kcContext.userVerification)},
-                        rpId : ${JSON.stringify(kcContext.rpId)},
-                        createTimeout : ${kcContext.createTimeout}
-                    };
-                    authButton.addEventListener("click", () => {
-                        authenticateByWebAuthn({
-                            ...input,
-                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
-                        });
-                    });
-
-                    initAuthenticate({
-                        ...input,
-                        errmsg : ${JSON.stringify(msgStr("passkey-unsupported-browser-text"))}
-                    });
-                `
-            }
-        ]
-    });
-
-    useEffect(() => {
-        if (isFetchingTranslations) {
-            return;
-        }
-
-        (async () => {
-            await waitForElementMountedOnDom({
-                elementId: webAuthnButtonId
-            });
-
-            insertScriptTags();
-        })();
-    }, [isFetchingTranslations]);
-}
+import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
+import { waitForElementMountedOnDom } from "@keycloakify/login-ui/tools/waitForElementMountedOnDom";
+import { useEffect } from "react";
+import { assert } from "tsafe/assert";
+
+import { useI18n } from "../../i18n";
+import { useKcContext } from "../../KcContext";
+
+export function useScript(params: { webAuthnButtonId: string }) {
+    const { webAuthnButtonId } = params;
+
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-passkeys-conditional-authenticate.ftl");
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+                    import { authenticateByWebAuthn } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/passkeysConditionalAuth.js";
+
+                    const authButton = document.getElementById("${webAuthnButtonId}");
+                    const input = {
+                        isUserIdentified : ${kcContext.isUserIdentified},
+                        challenge : ${JSON.stringify(kcContext.challenge)},
+                        userVerification : ${JSON.stringify(kcContext.userVerification)},
+                        rpId : ${JSON.stringify(kcContext.rpId)},
+                        createTimeout : ${kcContext.createTimeout}
+                    };
+                    authButton.addEventListener("click", () => {
+                        authenticateByWebAuthn({
+                            ...input,
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        });
+                    });
+
+                    initAuthenticate({
+                        ...input,
+                        errmsg : ${JSON.stringify(msgStr("passkey-unsupported-browser-text"))}
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: webAuthnButtonId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}