@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/webauthn-error/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "webauthn-error.ftl" });
 
 const meta = {
@@ -12,32 +11,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"
+            }
+        }
+    }
 };
 
 /**
@@ -47,20 +40,18 @@ export const French: Story = {
  * - Key Aspect: Ensures the retry button functionality is visible and the user can retry authentication.
  */
 export const WithRetryAvailable: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                isAppInitiatedAction: false,
-                message: {
-                    summary: "WebAuthn authentication failed. Please try again.",
-                    type: "error"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            isAppInitiatedAction: false,
+            message: {
+                summary: "WebAuthn authentication failed. Please try again.",
+                type: "error"
+            }
+        }
+    }
 };
 
 /**
@@ -70,21 +61,18 @@ export const WithRetryAvailable: Story = {
  * - Key Aspect: Ensures the form renders correctly with both "Try Again" and "Cancel" options.
  */
 export const WithAppInitiatedAction: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                isAppInitiatedAction: true,
-                message: {
-                    summary:
-                        "WebAuthn authentication failed. You can try again or cancel.",
-                    type: "error"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            isAppInitiatedAction: true,
+            message: {
+                summary: "WebAuthn authentication failed. You can try again or cancel.",
+                type: "error"
+            }
+        }
+    }
 };
 
 /**
@@ -94,19 +82,16 @@ export const WithAppInitiatedAction: Story = {
  * - Key Aspect: Ensures the retry mechanism works properly when JavaScript is disabled or unavailable.
  */
 export const WithJavaScriptDisabled: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                isAppInitiatedAction: false,
-                message: {
-                    summary:
-                        "JavaScript is disabled or not working. Please retry manually.",
-                    type: "warning"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            isAppInitiatedAction: false,
+            message: {
+                summary: "JavaScript is disabled or not working. Please retry manually.",
+                type: "warning"
+            }
+        }
+    }
 };

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

@@ -1,73 +1,70 @@
-import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "webauthn-error.ftl");
-
-    const { url, isAppInitiatedAction } = kcContext;
-
-    const { msg, msgStr } = useI18n();
-
-    return (
-        <Template
-            displayMessage
-            headerNode={msg("webauthn-error-title")}
-        >
-            <div className="space-y-4">
-                <form
-                    id="kc-error-credential-form"
-                    action={url.loginAction}
-                    method="post"
-                >
-                    <input
-                        type="hidden"
-                        id="executionValue"
-                        name="authenticationExecution"
-                    />
-                    <input type="hidden" id="isSetRetry" name="isSetRetry" />
-                </form>
-
-                <Button
-                    tabIndex={4}
-                    onClick={() => {
-                        // @ts-expect-error: Trusted Keycloak's code
-                        document.getElementById("isSetRetry").value = "retry";
-                        // @ts-expect-error: Trusted Keycloak's code
-                        document.getElementById("executionValue").value = "${execution}";
-                        // @ts-expect-error: Trusted Keycloak's code
-                        document.getElementById("kc-error-credential-form").submit();
-                    }}
-                    type="button"
-                    className="w-full"
-                    name="try-again"
-                    id="kc-try-again"
-                >
-                    {msgStr("doTryAgain")}
-                </Button>
-
-                {isAppInitiatedAction && (
-                    <form
-                        action={url.loginAction}
-                        id="kc-webauthn-settings-form"
-                        method="post"
-                    >
-                        <Button
-                            type="submit"
-                            variant="outline"
-                            className="w-full"
-                            id="cancelWebAuthnAIA"
-                            name="cancel-aia"
-                            value="true"
-                        >
-                            {msgStr("doCancel")}
-                        </Button>
-                    </form>
-                )}
-            </div>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "webauthn-error.ftl");
+
+    const { url, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <Template displayMessage headerNode={msg("webauthn-error-title")}>
+            <div className="space-y-4">
+                <form
+                    id="kc-error-credential-form"
+                    action={url.loginAction}
+                    method="post"
+                >
+                    <input
+                        type="hidden"
+                        id="executionValue"
+                        name="authenticationExecution"
+                    />
+                    <input type="hidden" id="isSetRetry" name="isSetRetry" />
+                </form>
+
+                <Button
+                    tabIndex={4}
+                    onClick={() => {
+                        // @ts-expect-error: Trusted Keycloak's code
+                        document.getElementById("isSetRetry").value = "retry";
+                        // @ts-expect-error: Trusted Keycloak's code
+                        document.getElementById("executionValue").value = "${execution}";
+                        // @ts-expect-error: Trusted Keycloak's code
+                        document.getElementById("kc-error-credential-form").submit();
+                    }}
+                    type="button"
+                    className="w-full"
+                    name="try-again"
+                    id="kc-try-again"
+                >
+                    {msgStr("doTryAgain")}
+                </Button>
+
+                {isAppInitiatedAction && (
+                    <form
+                        action={url.loginAction}
+                        id="kc-webauthn-settings-form"
+                        method="post"
+                    >
+                        <Button
+                            type="submit"
+                            variant="outline"
+                            className="w-full"
+                            id="cancelWebAuthnAIA"
+                            name="cancel-aia"
+                            value="true"
+                        >
+                            {msgStr("doCancel")}
+                        </Button>
+                    </form>
+                )}
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/webauthn-error/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-register/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "webauthn-register.ftl" });
 
 const meta = {
@@ -12,32 +11,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"
+            }
+        }
+    }
 };
 
 /**
@@ -47,17 +40,15 @@ export const French: Story = {
  * - Key Aspect: Ensures the retry functionality is available and the form allows the user to retry.
  */
 export const WithRetryAvailable: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                isSetRetry: true,
-                isAppInitiatedAction: false
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            isSetRetry: true,
+            isAppInitiatedAction: false
+        }
+    }
 };
 
 /**
@@ -67,20 +58,18 @@ export const WithRetryAvailable: Story = {
  * - Key Aspect: Ensures the error message is displayed correctly, informing the user of the registration failure.
  */
 export const WithErrorDuringRegistration: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                isSetRetry: false,
-                isAppInitiatedAction: false,
-                message: {
-                    summary:
-                        "An error occurred during WebAuthn registration. Please try again.",
-                    type: "error"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            isSetRetry: false,
+            isAppInitiatedAction: false,
+            message: {
+                summary:
+                    "An error occurred during WebAuthn registration. Please try again.",
+                type: "error"
+            }
+        }
+    }
 };

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

@@ -1,78 +1,78 @@
-import { Button } from "@/components/ui/button";
-import { LogoutOtherSessions } from '@/login/components/LogoutOtherSessions';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-import { useScript } from './useScript';
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "webauthn-register.ftl");
-
-    const { msg, msgStr } = useI18n();
-
-    const webAuthnButtonId = "authenticateWebAuthnButton";
-
-    useScript({ webAuthnButtonId });
-
-    return (
-        <Template
-            headerNode={
-                <div className="flex items-center justify-center gap-2">
-                    <span>{msg("webauthn-registration-title")}</span>
-                </div>
-            }
-        >
-            <div className="space-y-6">
-                <form id="register" action={kcContext.url.loginAction} method="post">
-                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
-                    <input
-                        type="hidden"
-                        id="attestationObject"
-                        name="attestationObject"
-                    />
-                    <input
-                        type="hidden"
-                        id="publicKeyCredentialId"
-                        name="publicKeyCredentialId"
-                    />
-                    <input
-                        type="hidden"
-                        id="authenticatorLabel"
-                        name="authenticatorLabel"
-                    />
-                    <input type="hidden" id="transports" name="transports" />
-                    <input type="hidden" id="error" name="error" />
-                </form>
-
-                <LogoutOtherSessions />
-
-                <div className="space-y-3">
-                    <Button type="button" className="w-full" id={webAuthnButtonId}>
-                        {msgStr("doRegisterSecurityKey")}
-                    </Button>
-
-                    {!kcContext.isSetRetry && kcContext.isAppInitiatedAction && (
-                        <form
-                            action={kcContext.url.loginAction}
-                            id="kc-webauthn-settings-form"
-                            method="post"
-                        >
-                            <Button
-                                type="submit"
-                                variant="outline"
-                                className="w-full"
-                                id="cancelWebAuthnAIA"
-                                name="cancel-aia"
-                                value="true"
-                            >
-                                {msgStr("doCancel")}
-                            </Button>
-                        </form>
-                    )}
-                </div>
-            </div>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { LogoutOtherSessions } from "@/login/components/LogoutOtherSessions";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+import { useScript } from "./useScript";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "webauthn-register.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    const webAuthnButtonId = "authenticateWebAuthnButton";
+
+    useScript({ webAuthnButtonId });
+
+    return (
+        <Template
+            headerNode={
+                <div className="flex items-center justify-center gap-2">
+                    <span>{msg("webauthn-registration-title")}</span>
+                </div>
+            }
+        >
+            <div className="space-y-6">
+                <form id="register" action={kcContext.url.loginAction} method="post">
+                    <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
+                    <input
+                        type="hidden"
+                        id="attestationObject"
+                        name="attestationObject"
+                    />
+                    <input
+                        type="hidden"
+                        id="publicKeyCredentialId"
+                        name="publicKeyCredentialId"
+                    />
+                    <input
+                        type="hidden"
+                        id="authenticatorLabel"
+                        name="authenticatorLabel"
+                    />
+                    <input type="hidden" id="transports" name="transports" />
+                    <input type="hidden" id="error" name="error" />
+                </form>
+
+                <LogoutOtherSessions />
+
+                <div className="space-y-3">
+                    <Button type="button" className="w-full" id={webAuthnButtonId}>
+                        {msgStr("doRegisterSecurityKey")}
+                    </Button>
+
+                    {!kcContext.isSetRetry && kcContext.isAppInitiatedAction && (
+                        <form
+                            action={kcContext.url.loginAction}
+                            id="kc-webauthn-settings-form"
+                            method="post"
+                        >
+                            <Button
+                                type="submit"
+                                variant="outline"
+                                className="w-full"
+                                id="cancelWebAuthnAIA"
+                                name="cancel-aia"
+                                value="true"
+                            >
+                                {msgStr("doCancel")}
+                            </Button>
+                        </form>
+                    )}
+                </div>
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/webauthn-register/index.ts

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