@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/login-password/useScript.tsx

@@ -1,63 +1,62 @@
-
-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-password.ftl");
-
-    const { msgStr, isFetchingTranslations } = useI18n();
-
-    const { insertScriptTags } = useInsertScriptTags({
-        effectId: "LoginPassword",
-        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-password.ftl");
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "LoginPassword",
+        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]);
+}

package/keycloak-theme/login/pages/login-recovery-authn-code-config/Page.stories.tsx

@@ -13,32 +13,26 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    render: () => <KcPageStory />
-};
+export const Default: Story = {};
 
 export const Arabic: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "ar",
-                    rtl: true
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            }
+        }
+    }
 };
 export const French: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "fr"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr"
+            }
+        }
+    }
 };
 
 /**
@@ -48,18 +42,16 @@ export const French: Story = {
  * - Key Aspect: Ensures that error messages are properly displayed when recovery code generation fails.
  */
 export const WithErrorDuringCodeGeneration: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                message: {
-                    summary:
-                        "An error occurred during recovery code generation. Please try again.",
-                    type: "error"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            message: {
+                summary:
+                    "An error occurred during recovery code generation. Please try again.",
+                type: "error"
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/login-recovery-authn-code-config/Page.tsx

@@ -1,181 +1,178 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { LogoutOtherSessions } from '@/login/components/LogoutOtherSessions';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { Copy, Download, Printer } from "lucide-react";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-import { useScript } from './useScript';
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-recovery-authn-code-config.ftl");
-
-
-    const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
-
-    const { msg, msgStr } = useI18n();
-
-    const olRecoveryCodesListId = "kc-recovery-codes-list";
-
-    useScript({ olRecoveryCodesListId });
-
-    return (
-        <Template
-            headerNode={msg("recovery-code-config-header")}
-        >
-            <div className="space-y-6">
-                <Alert variant="warning">
-                    <AlertDescription>
-                        <div className="space-y-2">
-                            <h4 className="font-medium">
-                                {msg("recovery-code-config-warning-title")}
-                            </h4>
-                            <p className="text-sm">
-                                {msg("recovery-code-config-warning-message")}
-                            </p>
-                        </div>
-                    </AlertDescription>
-                </Alert>
-
-                <div className="bg-muted/50 rounded-lg p-4">
-                    <ol
-                        id={olRecoveryCodesListId}
-                        className="grid grid-cols-1 sm:grid-cols-2 gap-2 font-mono text-sm"
-                    >
-                        {recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList.map(
-                            (code, index) => (
-                                <li key={index} className="flex items-center space-x-2">
-                                    <span className="text-muted-foreground min-w-8">
-                                        {index + 1}:
-                                    </span>
-                                    <span className="font-medium">
-                                        {code.slice(0, 4)}-{code.slice(4, 8)}-
-                                        {code.slice(8)}
-                                    </span>
-                                </li>
-                            )
-                        )}
-                    </ol>
-                </div>
-
-                <div className="flex flex-wrap  gap-2">
-                    <Button
-                        id="printRecoveryCodes"
-                        variant="outline"
-                        size="sm"
-                        type="button"
-                        className="flex items-center gap-2"
-                    >
-                        <Printer className="w-4 h-4" />
-                        {msg("recovery-codes-print")}
-                    </Button>
-                    <Button
-                        id="downloadRecoveryCodes"
-                        variant="outline"
-                        size="sm"
-                        type="button"
-                        className="flex items-center gap-2"
-                    >
-                        <Download className="w-4 h-4" />
-                        {msg("recovery-codes-download")}
-                    </Button>
-                    <Button
-                        id="copyRecoveryCodes"
-                        variant="outline"
-                        size="sm"
-                        type="button"
-                        className="flex items-center gap-2"
-                    >
-                        <Copy className="w-4 h-4" />
-                        {msg("recovery-codes-copy")}
-                    </Button>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                    <Checkbox
-                        id="kcRecoveryCodesConfirmationCheck"
-                        name="kcRecoveryCodesConfirmationCheck"
-                        onCheckedChange={checked => {
-                            const saveButton = document.getElementById(
-                                "saveRecoveryAuthnCodesBtn"
-                            ) as HTMLButtonElement | null;
-                            if (saveButton) {
-                                saveButton.disabled = !checked;
-                            }
-                        }}
-                    />
-                    <Label
-                        htmlFor="kcRecoveryCodesConfirmationCheck"
-                        className="text-sm font-medium cursor-pointer"
-                    >
-                        {msg("recovery-codes-confirmation-message")}
-                    </Label>
-                </div>
-
-                <form
-                    action={kcContext.url.loginAction}
-                    className="space-y-4"
-                    id="kc-recovery-codes-settings-form"
-                    method="post"
-                >
-                    <input
-                        type="hidden"
-                        name="generatedRecoveryAuthnCodes"
-                        value={
-                            recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString
-                        }
-                    />
-                    <input
-                        type="hidden"
-                        name="generatedAt"
-                        value={recoveryAuthnCodesConfigBean.generatedAt}
-                    />
-                    <input
-                        type="hidden"
-                        id="userLabel"
-                        name="userLabel"
-                        value={msgStr("recovery-codes-label-default")}
-                    />
-
-                    <LogoutOtherSessions />
-
-                    {isAppInitiatedAction ? (
-                        <div className="flex flex-col sm:flex-row gap-3">
-                            <Button
-                                type="submit"
-                                id="saveRecoveryAuthnCodesBtn"
-                                disabled
-                                className="sm:flex-1"
-                            >
-                                {msgStr("recovery-codes-action-complete")}
-                            </Button>
-                            <Button
-                                type="submit"
-                                variant="outline"
-                                name="cancel-aia"
-                                value="true"
-                                id="cancelRecoveryAuthnCodesBtn"
-                                className="sm:flex-1"
-                            >
-                                {msg("recovery-codes-action-cancel")}
-                            </Button>
-                        </div>
-                    ) : (
-                        <Button
-                            type="submit"
-                            className="w-full"
-                            id="saveRecoveryAuthnCodesBtn"
-                            disabled
-                        >
-                            {msgStr("recovery-codes-action-complete")}
-                        </Button>
-                    )}
-                </form>
-            </div>
-        </Template>
-    );
-}
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { LogoutOtherSessions } from "@/login/components/LogoutOtherSessions";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { Copy, Download, Printer } from "lucide-react";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+import { useScript } from "./useScript";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-recovery-authn-code-config.ftl");
+
+    const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    const olRecoveryCodesListId = "kc-recovery-codes-list";
+
+    useScript({ olRecoveryCodesListId });
+
+    return (
+        <Template headerNode={msg("recovery-code-config-header")}>
+            <div className="space-y-6">
+                <Alert variant="warning">
+                    <AlertDescription>
+                        <div className="space-y-2">
+                            <h4 className="font-medium">
+                                {msg("recovery-code-config-warning-title")}
+                            </h4>
+                            <p className="text-sm">
+                                {msg("recovery-code-config-warning-message")}
+                            </p>
+                        </div>
+                    </AlertDescription>
+                </Alert>
+
+                <div className="bg-muted/50 rounded-lg p-4">
+                    <ol
+                        id={olRecoveryCodesListId}
+                        className="grid grid-cols-1 sm:grid-cols-2 gap-2 font-mono text-sm"
+                    >
+                        {recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList.map(
+                            (code, index) => (
+                                <li key={index} className="flex items-center space-x-2">
+                                    <span className="text-muted-foreground min-w-8">
+                                        {index + 1}:
+                                    </span>
+                                    <span className="font-medium">
+                                        {code.slice(0, 4)}-{code.slice(4, 8)}-
+                                        {code.slice(8)}
+                                    </span>
+                                </li>
+                            )
+                        )}
+                    </ol>
+                </div>
+
+                <div className="flex flex-wrap  gap-2">
+                    <Button
+                        id="printRecoveryCodes"
+                        variant="outline"
+                        size="sm"
+                        type="button"
+                        className="flex items-center gap-2"
+                    >
+                        <Printer className="w-4 h-4" />
+                        {msg("recovery-codes-print")}
+                    </Button>
+                    <Button
+                        id="downloadRecoveryCodes"
+                        variant="outline"
+                        size="sm"
+                        type="button"
+                        className="flex items-center gap-2"
+                    >
+                        <Download className="w-4 h-4" />
+                        {msg("recovery-codes-download")}
+                    </Button>
+                    <Button
+                        id="copyRecoveryCodes"
+                        variant="outline"
+                        size="sm"
+                        type="button"
+                        className="flex items-center gap-2"
+                    >
+                        <Copy className="w-4 h-4" />
+                        {msg("recovery-codes-copy")}
+                    </Button>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                    <Checkbox
+                        id="kcRecoveryCodesConfirmationCheck"
+                        name="kcRecoveryCodesConfirmationCheck"
+                        onCheckedChange={checked => {
+                            const saveButton = document.getElementById(
+                                "saveRecoveryAuthnCodesBtn"
+                            ) as HTMLButtonElement | null;
+                            if (saveButton) {
+                                saveButton.disabled = !checked;
+                            }
+                        }}
+                    />
+                    <Label
+                        htmlFor="kcRecoveryCodesConfirmationCheck"
+                        className="text-sm font-medium cursor-pointer"
+                    >
+                        {msg("recovery-codes-confirmation-message")}
+                    </Label>
+                </div>
+
+                <form
+                    action={kcContext.url.loginAction}
+                    className="space-y-4"
+                    id="kc-recovery-codes-settings-form"
+                    method="post"
+                >
+                    <input
+                        type="hidden"
+                        name="generatedRecoveryAuthnCodes"
+                        value={
+                            recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString
+                        }
+                    />
+                    <input
+                        type="hidden"
+                        name="generatedAt"
+                        value={recoveryAuthnCodesConfigBean.generatedAt}
+                    />
+                    <input
+                        type="hidden"
+                        id="userLabel"
+                        name="userLabel"
+                        value={msgStr("recovery-codes-label-default")}
+                    />
+
+                    <LogoutOtherSessions />
+
+                    {isAppInitiatedAction ? (
+                        <div className="flex flex-col sm:flex-row gap-3">
+                            <Button
+                                type="submit"
+                                id="saveRecoveryAuthnCodesBtn"
+                                disabled
+                                className="sm:flex-1"
+                            >
+                                {msgStr("recovery-codes-action-complete")}
+                            </Button>
+                            <Button
+                                type="submit"
+                                variant="outline"
+                                name="cancel-aia"
+                                value="true"
+                                id="cancelRecoveryAuthnCodesBtn"
+                                className="sm:flex-1"
+                            >
+                                {msg("recovery-codes-action-cancel")}
+                            </Button>
+                        </div>
+                    ) : (
+                        <Button
+                            type="submit"
+                            className="w-full"
+                            id="saveRecoveryAuthnCodesBtn"
+                            disabled
+                        >
+                            {msgStr("recovery-codes-action-complete")}
+                        </Button>
+                    )}
+                </form>
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-recovery-authn-code-config/index.ts

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