@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

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

@@ -1,62 +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-username.ftl");
-
-    const { msgStr, isFetchingTranslations } = useI18n();
-
-    const { insertScriptTags } = useInsertScriptTags({
-        effectId: "LoginRecoveryAuthnCodeConfigLoginUsername",
-        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-username.ftl");
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "LoginRecoveryAuthnCodeConfigLoginUsername",
+        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-verify-email/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "login-verify-email.ftl" });
 
 const meta = {
@@ -13,43 +12,37 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: {
-                    summary: "You need to verify your email to activate your account.",
-                    type: "warning"
-                },
-                user: {
-                    email: "john.doe@gmail.com"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            message: {
+                summary: "You need to verify your email to activate your account.",
+                type: "warning"
+            },
+            user: {
+                email: "john.doe@gmail.com"
+            }
+        }
+    }
 };
 
 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"
+            }
+        }
+    }
 };
 
 /**
@@ -59,22 +52,20 @@ export const French: Story = {
  * - Key Aspect: Ensures the success message is displayed correctly when the email is successfully verified.
  */
 export const WithSuccessMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: {
-                    summary: "Your email has been successfully verified.",
-                    type: "success"
-                },
-                user: {
-                    email: "john.doe@gmail.com"
-                },
-                url: {
-                    loginAction: "/mock-login-action"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            message: {
+                summary: "Your email has been successfully verified.",
+                type: "success"
+            },
+            user: {
+                email: "john.doe@gmail.com"
+            },
+            url: {
+                loginAction: "/mock-login-action"
+            }
+        }
+    }
 };
 
 /**
@@ -84,22 +75,20 @@ export const WithSuccessMessage: Story = {
  * - Key Aspect: Ensures the error message is shown correctly when the verification process encounters an issue.
  */
 export const WithErrorMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: {
-                    summary: "There was an error verifying your email. Please try again.",
-                    type: "error"
-                },
-                user: {
-                    email: "john.doe@gmail.com"
-                },
-                url: {
-                    loginAction: "/mock-login-action"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            message: {
+                summary: "There was an error verifying your email. Please try again.",
+                type: "error"
+            },
+            user: {
+                email: "john.doe@gmail.com"
+            },
+            url: {
+                loginAction: "/mock-login-action"
+            }
+        }
+    }
 };
 
 /**
@@ -109,20 +98,18 @@ export const WithErrorMessage: Story = {
  * - Key Aspect: Ensures the informational message is displayed properly.
  */
 export const WithInfoMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: {
-                    summary: "Please verify your email to continue using our services.",
-                    type: "info"
-                },
-                user: {
-                    email: "john.doe@gmail.com"
-                },
-                url: {
-                    loginAction: "/mock-login-action"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            message: {
+                summary: "Please verify your email to continue using our services.",
+                type: "info"
+            },
+            user: {
+                email: "john.doe@gmail.com"
+            },
+            url: {
+                loginAction: "/mock-login-action"
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/login-verify-email/Page.tsx

@@ -1,38 +1,37 @@
-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 === "login-verify-email.ftl");
-
-    const { msg } = useI18n();
-
-    const { url, user } = kcContext;
-    return (
-        <Template
-            displayInfo
-            headerNode={msg("emailVerifyTitle")}
-            infoNode={
-                <p className="instruction">
-                    {msg("emailVerifyInstruction2")}
-                    <br />
-                    <a
-                        className="text-primary dark:text-white underline"
-                        href={url.loginAction}
-                    >
-                        {msg("doClickHere")}
-                    </a>
-                    &nbsp;
-                    {msg("emailVerifyInstruction3")}
-                </p>
-            }
-        >
-            <p className="instruction">
-                {msg("emailVerifyInstruction1", user?.email ?? "")}
-            </p>
-        </Template>
-    );
-}
+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 === "login-verify-email.ftl");
+
+    const { msg } = useI18n();
+
+    const { url, user } = kcContext;
+    return (
+        <Template
+            displayInfo
+            headerNode={msg("emailVerifyTitle")}
+            infoNode={
+                <p className="instruction">
+                    {msg("emailVerifyInstruction2")}
+                    <br />
+                    <a
+                        className="text-primary dark:text-white underline"
+                        href={url.loginAction}
+                    >
+                        {msg("doClickHere")}
+                    </a>
+                    &nbsp;
+                    {msg("emailVerifyInstruction3")}
+                </p>
+            }
+        >
+            <p className="instruction">
+                {msg("emailVerifyInstruction1", user?.email ?? "")}
+            </p>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-verify-email/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-x509-info/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "login-x509-info.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 that the login buttons are not displayed when the user is not enabled.
  */
 export const WithoutUserEnabled: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                x509: {
-                    formData: {
-                        subjectDN: "CN=John Doe, OU=Example Org, O=Example Inc, C=US",
-                        username: "johndoe",
-                        isUserEnabled: false // User not enabled for login
-                    }
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            x509: {
+                formData: {
+                    subjectDN: "CN=John Doe, OU=Example Org, O=Example Inc, C=US",
+                    username: "johndoe",
+                    isUserEnabled: false // User not enabled for login
                 }
-            }}
-        />
-    )
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/login-x509-info/Page.tsx

@@ -1,75 +1,72 @@
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-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 === "login-x509-info.ftl");
-
-
-    const { url, x509 } = kcContext;
-
-    const { msg, msgStr } = useI18n();
-
-    return (
-        <Template
-            headerNode={msg("doLogIn")}
-        >
-            <form
-                id="kc-x509-login-info"
-                className="space-y-6"
-                action={url.loginAction}
-                method="post"
-            >
-                <div className="space-y-2">
-                    <Label className="text-sm font-medium">
-                        {msg("clientCertificate")}
-                    </Label>
-                    <div className="p-3 bg-muted/50 rounded-lg">
-                        <p className="text-sm font-mono break-all">
-                            {x509.formData.subjectDN || msg("noCertificate")}
-                        </p>
-                    </div>
-                </div>
-
-                {x509.formData.isUserEnabled && (
-                    <div className="space-y-2">
-                        <Label className="text-sm font-medium">
-                            {msg("doX509Login")}
-                        </Label>
-                        <div className="p-3 bg-muted/50 rounded-lg">
-                            <p className="text-sm font-medium">
-                                {x509.formData.username}
-                            </p>
-                        </div>
-                    </div>
-                )}
-
-                <div className="flex flex-col sm:flex-row gap-3">
-                    {x509.formData.isUserEnabled && (
-                        <Button
-                            variant="outline"
-                            name="cancel"
-                            id="kc-cancel"
-                            type="submit"
-                            className="sm:flex-1"
-                        >
-                            {msgStr("doIgnore")}
-                        </Button>
-                    )}
-                    <Button
-                        name="login"
-                        id="kc-login"
-                        type="submit"
-                        className="sm:flex-1"
-                    >
-                        {msgStr("doContinue")}
-                    </Button>
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+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 === "login-x509-info.ftl");
+
+    const { url, x509 } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <Template headerNode={msg("doLogIn")}>
+            <form
+                id="kc-x509-login-info"
+                className="space-y-6"
+                action={url.loginAction}
+                method="post"
+            >
+                <div className="space-y-2">
+                    <Label className="text-sm font-medium">
+                        {msg("clientCertificate")}
+                    </Label>
+                    <div className="p-3 bg-muted/50 rounded-lg">
+                        <p className="text-sm font-mono break-all">
+                            {x509.formData.subjectDN || msg("noCertificate")}
+                        </p>
+                    </div>
+                </div>
+
+                {x509.formData.isUserEnabled && (
+                    <div className="space-y-2">
+                        <Label className="text-sm font-medium">
+                            {msg("doX509Login")}
+                        </Label>
+                        <div className="p-3 bg-muted/50 rounded-lg">
+                            <p className="text-sm font-medium">
+                                {x509.formData.username}
+                            </p>
+                        </div>
+                    </div>
+                )}
+
+                <div className="flex flex-col sm:flex-row gap-3">
+                    {x509.formData.isUserEnabled && (
+                        <Button
+                            variant="outline"
+                            name="cancel"
+                            id="kc-cancel"
+                            type="submit"
+                            className="sm:flex-1"
+                        >
+                            {msgStr("doIgnore")}
+                        </Button>
+                    )}
+                    <Button
+                        name="login"
+                        id="kc-login"
+                        type="submit"
+                        className="sm:flex-1"
+                    >
+                        {msgStr("doContinue")}
+                    </Button>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-x509-info/index.ts

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