@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/webauthn-authenticate/Page.tsx

@@ -1,202 +1,206 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
-import { clsx } from "keycloakify/tools/clsx";
-import { Fingerprint, Shield } from "lucide-react";
-import { Fragment } from "react";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-import { useScript } from './useScript';
-
-export function Page() {
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "webauthn-authenticate.ftl");
-
-    const { kcClsx } = useKcClsx();
-
-    const { url, realm, registrationDisabled, authenticators, shouldDisplayAuthenticators } = kcContext;
-
-    const { msg, msgStr, advancedMsg } = useI18n();
-
-    const webAuthnButtonId = "authenticateWebAuthnButton";
-
-    useScript({ webAuthnButtonId });
-
-
-    return (
-        <Template
-            displayInfo={realm.registrationAllowed && !registrationDisabled}
-            infoNode={
-                <div id="kc-registration" className="text-center text-sm">
-                    <span>
-                        {msg("noAccount")}{" "}
-                        <a
-                            tabIndex={6}
-                            href={url.registrationUrl}
-                            className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-4"
-                        >
-                            {msg("doRegister")}
-                        </a>
-                    </span>
-                </div>
-            }
-            headerNode={msg("webauthn-login-title")}
-        >
-            <div className="space-y-6">
-                <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>
-
-                {authenticators && (
-                    <>
-                        <form id="authn_select">
-                            {authenticators.authenticators.map(authenticator => (
-                                <Input
-                                    key={authenticator.credentialId}
-                                    type="hidden"
-                                    name="authn_use_chk"
-                                    value={authenticator.credentialId}
-                                />
-                            ))}
-                        </form>
-
-                        {shouldDisplayAuthenticators && (
-                            <div className="space-y-4">
-                                {authenticators.authenticators.length > 1 && (
-                                    <h3 className="text-sm font-medium text-center">
-                                        {msg("webauthn-available-authenticators")}
-                                    </h3>
-                                )}
-
-                                <div className="space-y-2">
-                                    {authenticators.authenticators.map(
-                                        (authenticator, i) => (
-                                            <div
-                                                key={i}
-                                                id={`kc-webauthn-authenticator-item-${i}`}
-                                                className="flex items-center gap-3 p-3 border rounded-lg bg-muted/50"
-                                            >
-                                                <div className="shrink-0">
-                                                    {(() => {
-                                                        const className = kcClsx(
-                                                            authenticator.transports
-                                                                .iconClass as any
-                                                        );
-                                                        const isDefaultIcon =
-                                                            className ===
-                                                            authenticator.transports
-                                                                .iconClass;
-
-                                                        if (isDefaultIcon) {
-                                                            return (
-                                                                <Shield className="w-5 h-5 text-muted-foreground" />
-                                                            );
-                                                        }
-
-                                                        return (
-                                                            <i
-                                                                className={clsx(
-                                                                    className,
-                                                                    "text-muted-foreground"
-                                                                )}
-                                                            />
-                                                        );
-                                                    })()}
-                                                </div>
-
-                                                <div className="flex-1 min-w-0">
-                                                    <div
-                                                        id={`kc-webauthn-authenticator-label-${i}`}
-                                                        className="font-medium text-sm"
-                                                    >
-                                                        {advancedMsg(authenticator.label)}
-                                                    </div>
-
-                                                    {authenticator.transports
-                                                        .displayNameProperties
-                                                        ?.length && (
-                                                            <div
-                                                                id={`kc-webauthn-authenticator-transport-${i}`}
-                                                                className="text-xs text-muted-foreground mt-1"
-                                                            >
-                                                                {authenticator.transports.displayNameProperties
-                                                                    .map(
-                                                                        (
-                                                                            displayNameProperty,
-                                                                            i,
-                                                                            arr
-                                                                        ) => ({
-                                                                            displayNameProperty,
-                                                                            hasNext:
-                                                                                i !==
-                                                                                arr.length - 1
-                                                                        })
-                                                                    )
-                                                                    .map(
-                                                                        ({
-                                                                            displayNameProperty,
-                                                                            hasNext
-                                                                        }) => (
-                                                                            <Fragment
-                                                                                key={
-                                                                                    displayNameProperty
-                                                                                }
-                                                                            >
-                                                                                {advancedMsg(
-                                                                                    displayNameProperty
-                                                                                )}
-                                                                                {hasNext && (
-                                                                                    <span>
-                                                                                        ,{" "}
-                                                                                    </span>
-                                                                                )}
-                                                                            </Fragment>
-                                                                        )
-                                                                    )}
-                                                            </div>
-                                                        )}
-
-                                                    <div className="text-xs text-muted-foreground mt-1">
-                                                        <span
-                                                            id={`kc-webauthn-authenticator-createdlabel-${i}`}
-                                                        >
-                                                            {msg(
-                                                                "webauthn-createdAt-label"
-                                                            )}
-                                                        </span>{" "}
-                                                        <span
-                                                            id={`kc-webauthn-authenticator-created-${i}`}
-                                                        >
-                                                            {authenticator.createdAt}
-                                                        </span>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        )
-                                    )}
-                                </div>
-                            </div>
-                        )}
-                    </>
-                )}
-
-                <Button id={webAuthnButtonId} type="button" autoFocus className="w-full">
-                    <Fingerprint className="w-4 h-4" />
-                    {msgStr("webauthn-doAuthenticate")}
-                </Button>
-            </div>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { clsx } from "keycloakify/tools/clsx";
+import { Fingerprint, Shield } from "lucide-react";
+import { Fragment } from "react";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+import { useScript } from "./useScript";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "webauthn-authenticate.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const {
+        url,
+        realm,
+        registrationDisabled,
+        authenticators,
+        shouldDisplayAuthenticators
+    } = kcContext;
+
+    const { msg, msgStr, advancedMsg } = useI18n();
+
+    const webAuthnButtonId = "authenticateWebAuthnButton";
+
+    useScript({ webAuthnButtonId });
+
+    return (
+        <Template
+            displayInfo={realm.registrationAllowed && !registrationDisabled}
+            infoNode={
+                <div id="kc-registration" className="text-center text-sm">
+                    <span>
+                        {msg("noAccount")}{" "}
+                        <a
+                            tabIndex={6}
+                            href={url.registrationUrl}
+                            className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-4"
+                        >
+                            {msg("doRegister")}
+                        </a>
+                    </span>
+                </div>
+            }
+            headerNode={msg("webauthn-login-title")}
+        >
+            <div className="space-y-6">
+                <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>
+
+                {authenticators && (
+                    <>
+                        <form id="authn_select">
+                            {authenticators.authenticators.map(authenticator => (
+                                <Input
+                                    key={authenticator.credentialId}
+                                    type="hidden"
+                                    name="authn_use_chk"
+                                    value={authenticator.credentialId}
+                                />
+                            ))}
+                        </form>
+
+                        {shouldDisplayAuthenticators && (
+                            <div className="space-y-4">
+                                {authenticators.authenticators.length > 1 && (
+                                    <h3 className="text-sm font-medium text-center">
+                                        {msg("webauthn-available-authenticators")}
+                                    </h3>
+                                )}
+
+                                <div className="space-y-2">
+                                    {authenticators.authenticators.map(
+                                        (authenticator, i) => (
+                                            <div
+                                                key={i}
+                                                id={`kc-webauthn-authenticator-item-${i}`}
+                                                className="flex items-center gap-3 p-3 border rounded-lg bg-muted/50"
+                                            >
+                                                <div className="shrink-0">
+                                                    {(() => {
+                                                        const className = kcClsx(
+                                                            authenticator.transports
+                                                                .iconClass as any
+                                                        );
+                                                        const isDefaultIcon =
+                                                            className ===
+                                                            authenticator.transports
+                                                                .iconClass;
+
+                                                        if (isDefaultIcon) {
+                                                            return (
+                                                                <Shield className="w-5 h-5 text-muted-foreground" />
+                                                            );
+                                                        }
+
+                                                        return (
+                                                            <i
+                                                                className={clsx(
+                                                                    className,
+                                                                    "text-muted-foreground"
+                                                                )}
+                                                            />
+                                                        );
+                                                    })()}
+                                                </div>
+
+                                                <div className="flex-1 min-w-0">
+                                                    <div
+                                                        id={`kc-webauthn-authenticator-label-${i}`}
+                                                        className="font-medium text-sm"
+                                                    >
+                                                        {advancedMsg(authenticator.label)}
+                                                    </div>
+
+                                                    {authenticator.transports
+                                                        .displayNameProperties
+                                                        ?.length && (
+                                                        <div
+                                                            id={`kc-webauthn-authenticator-transport-${i}`}
+                                                            className="text-xs text-muted-foreground mt-1"
+                                                        >
+                                                            {authenticator.transports.displayNameProperties
+                                                                .map(
+                                                                    (
+                                                                        displayNameProperty,
+                                                                        i,
+                                                                        arr
+                                                                    ) => ({
+                                                                        displayNameProperty,
+                                                                        hasNext:
+                                                                            i !==
+                                                                            arr.length - 1
+                                                                    })
+                                                                )
+                                                                .map(
+                                                                    ({
+                                                                        displayNameProperty,
+                                                                        hasNext
+                                                                    }) => (
+                                                                        <Fragment
+                                                                            key={
+                                                                                displayNameProperty
+                                                                            }
+                                                                        >
+                                                                            {advancedMsg(
+                                                                                displayNameProperty
+                                                                            )}
+                                                                            {hasNext && (
+                                                                                <span>
+                                                                                    ,{" "}
+                                                                                </span>
+                                                                            )}
+                                                                        </Fragment>
+                                                                    )
+                                                                )}
+                                                        </div>
+                                                    )}
+
+                                                    <div className="text-xs text-muted-foreground mt-1">
+                                                        <span
+                                                            id={`kc-webauthn-authenticator-createdlabel-${i}`}
+                                                        >
+                                                            {msg(
+                                                                "webauthn-createdAt-label"
+                                                            )}
+                                                        </span>{" "}
+                                                        <span
+                                                            id={`kc-webauthn-authenticator-created-${i}`}
+                                                        >
+                                                            {authenticator.createdAt}
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                    </>
+                )}
+
+                <Button id={webAuthnButtonId} type="button" autoFocus className="w-full">
+                    <Fingerprint className="w-4 h-4" />
+                    {msgStr("webauthn-doAuthenticate")}
+                </Button>
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/webauthn-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/webauthn-authenticate/useScript.tsx

@@ -1,55 +1,55 @@
-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 { useKcContext } from "../../KcContext";
-import { useI18n } from "../../i18n";
-
-export function useScript(params: { webAuthnButtonId: string }) {
-    const { webAuthnButtonId } = params;
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "webauthn-authenticate.ftl");
-
-    const { msgStr, isFetchingTranslations } = useI18n();
-
-    const { insertScriptTags } = useInsertScriptTags({
-        effectId: "WebauthnAuthenticate",
-        scriptTags: [
-            {
-                type: "module",
-                textContent: () => `
-
-                    import { authenticateByWebAuthn } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/webauthnAuthenticate.js";
-                    const authButton = document.getElementById('${webAuthnButtonId}');
-                    authButton.addEventListener("click", function() {
-                        const input = {
-                            isUserIdentified : ${kcContext.isUserIdentified},
-                            challenge : '${kcContext.challenge}',
-                            userVerification : '${kcContext.userVerification}',
-                            rpId : '${kcContext.rpId}',
-                            createTimeout : ${kcContext.createTimeout},
-                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
-                        };
-                        authenticateByWebAuthn(input);
-                    });
-                `
-            }
-        ]
-    });
-
-    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 { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+
+export function useScript(params: { webAuthnButtonId: string }) {
+    const { webAuthnButtonId } = params;
+
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "webauthn-authenticate.ftl");
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "WebauthnAuthenticate",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+
+                    import { authenticateByWebAuthn } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/webauthnAuthenticate.js";
+                    const authButton = document.getElementById('${webAuthnButtonId}');
+                    authButton.addEventListener("click", function() {
+                        const input = {
+                            isUserIdentified : ${kcContext.isUserIdentified},
+                            challenge : '${kcContext.challenge}',
+                            userVerification : '${kcContext.userVerification}',
+                            rpId : '${kcContext.rpId}',
+                            createTimeout : ${kcContext.createTimeout},
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        };
+                        authenticateByWebAuthn(input);
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: webAuthnButtonId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}