@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/code/Page.tsx

@@ -1,89 +1,89 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Input } from "@/components/ui/input";
-import { kcSanitize } from "keycloakify/lib/kcSanitize";
-
-import { Button } from "@/components/ui/button";
-
-import { MdContentCopy } from "react-icons/md";
-
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useState } from 'react';
-import { MdCheck } from "react-icons/md";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-export function Page() {
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "code.ftl");
-
-    const [copied, setCopied] = useState(false);
-
-    const { msg } = useI18n();
-
-
-    const handleCopy = async () => {
-        try {
-            await navigator.clipboard.writeText(kcContext.code.code ?? "");
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        } catch (err) {
-            console.error("Failed to copy text: ", err);
-        }
-    };
-
-    return (
-        <Template
-            headerNode={
-                kcContext.code.success ? msg("codeSuccessTitle") : msg("codeErrorTitle", kcContext.code.error)
-            }
-        >
-            <div id="kc-code">
-                {kcContext.code.success ? (
-                    <>
-                        <Alert variant="success" className=" my-3">
-                            <AlertDescription>
-                                <span>{msg("copyCodeInstruction")}</span>
-                            </AlertDescription>
-                        </Alert>
-                        <div className="relative">
-                            <Input
-                                id="code"
-                                defaultValue={kcContext.code.code}
-                                readOnly
-                                className="font-mono"
-                            />
-
-                            <Button
-                                onClick={handleCopy}
-                                variant="secondary"
-                                size="icon"
-                                className="size-4 absolute end-2 top-1/2 transform -translate-y-1/2"
-                            >
-                                {copied ? (
-                                    <MdCheck className="text-green-500" />
-                                ) : (
-                                    <MdContentCopy />
-                                )}
-                            </Button>
-                        </div>
-                    </>
-                ) : (
-                    kcContext.code.error && (
-                        <Alert variant="error" className="my-3">
-                            <AlertDescription>
-                                <p
-                                    id="error"
-                                    dangerouslySetInnerHTML={{
-                                        __html: kcSanitize(kcContext.code.error)
-                                    }}
-                                />
-                            </AlertDescription>
-                        </Alert>
-                    )
-                )}
-            </div>
-        </Template>
-    );
-}
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Input } from "@/components/ui/input";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
+
+import { Button } from "@/components/ui/button";
+
+import { MdContentCopy } from "react-icons/md";
+
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useState } from "react";
+import { MdCheck } from "react-icons/md";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "code.ftl");
+
+    const [copied, setCopied] = useState(false);
+
+    const { msg } = useI18n();
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(kcContext.code.code ?? "");
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        } catch (err) {
+            console.error("Failed to copy text: ", err);
+        }
+    };
+
+    return (
+        <Template
+            headerNode={
+                kcContext.code.success
+                    ? msg("codeSuccessTitle")
+                    : msg("codeErrorTitle", kcContext.code.error)
+            }
+        >
+            <div id="kc-code">
+                {kcContext.code.success ? (
+                    <>
+                        <Alert variant="success" className=" my-3">
+                            <AlertDescription>
+                                <span>{msg("copyCodeInstruction")}</span>
+                            </AlertDescription>
+                        </Alert>
+                        <div className="relative">
+                            <Input
+                                id="code"
+                                defaultValue={kcContext.code.code}
+                                readOnly
+                                className="font-mono"
+                            />
+
+                            <Button
+                                onClick={handleCopy}
+                                variant="secondary"
+                                size="icon"
+                                className="size-4 absolute end-2 top-1/2 transform -translate-y-1/2"
+                            >
+                                {copied ? (
+                                    <MdCheck className="text-green-500" />
+                                ) : (
+                                    <MdContentCopy />
+                                )}
+                            </Button>
+                        </div>
+                    </>
+                ) : (
+                    kcContext.code.error && (
+                        <Alert variant="error" className="my-3">
+                            <AlertDescription>
+                                <p
+                                    id="error"
+                                    dangerouslySetInnerHTML={{
+                                        __html: kcSanitize(kcContext.code.error)
+                                    }}
+                                />
+                            </AlertDescription>
+                        </Alert>
+                    )
+                )}
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/code/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/delete-account-confirm/Page.stories.tsx

@@ -11,59 +11,50 @@ 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",
+                rtl: false
+            }
+        }
+    }
 };
+
 export const WithAIAFlow: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                triggered_from_aia: true,
-                url: { loginAction: "/login-action" }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            triggered_from_aia: true,
+            url: { loginAction: "/login-action" }
+        }
+    }
 };
 export const WithoutAIAFlow: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                triggered_from_aia: false,
-                url: { loginAction: "/login-action" }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            triggered_from_aia: false,
+            url: { loginAction: "/login-action" }
+        }
+    }
 };
 export const WithCustomButtonStyle: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                triggered_from_aia: true,
-                url: { loginAction: "/login-action" }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            triggered_from_aia: true,
+            url: { loginAction: "/login-action" }
+        }
+    }
 };

package/keycloak-theme/login/pages/delete-account-confirm/Page.tsx

@@ -1,63 +1,60 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
-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 === "delete-account-confirm.ftl");
-
-    const { msg, msgStr } = useI18n();
-
-    return (
-        <Template
-            headerNode={msg("deleteAccountConfirm")}
-        >
-            <form action={kcContext.url.loginAction} className="space-y-6" method="post">
-                <Alert variant="warning" className="my-3">
-                    <AlertDescription>
-                        <span>{msg("irreversibleAction")}</span>
-                    </AlertDescription>
-                </Alert>
-
-                <div className="space-y-4">
-                    <p className="text-foreground">{msg("deletingImplies")}</p>
-
-                    <ul className="list-disc list-inside space-y-2 text-muted-foreground pl-4">
-                        <li>{msg("loggingOutImmediately")}</li>
-                        <li>{msg("errasingData")}</li>
-                    </ul>
-
-                    <p className="text-foreground font-medium mt-6">
-                        {msg("finalDeletionConfirmation")}
-                    </p>
-                </div>
-
-                <div className="flex flex-col sm:flex-row gap-3 sm:justify-between mt-6">
-                    {kcContext.triggered_from_aia && (
-                        <Button
-                            variant="outline"
-                            type="submit"
-                            name="cancel-aia"
-                            value="true"
-                            className="sm:flex-1"
-                        >
-                            {msgStr("doCancel")}
-                        </Button>
-                    )}
-
-                    <Button
-                        type="submit"
-                        variant="destructive"
-                        className="sm:flex-1 text-white"
-                    >
-                        {msgStr("doConfirmDelete")}
-                    </Button>
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Alert, AlertDescription } from "@/components/ui/alert";
+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 === "delete-account-confirm.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <Template headerNode={msg("deleteAccountConfirm")}>
+            <form action={kcContext.url.loginAction} className="space-y-6" method="post">
+                <Alert variant="warning" className="my-3">
+                    <AlertDescription>
+                        <span>{msg("irreversibleAction")}</span>
+                    </AlertDescription>
+                </Alert>
+
+                <div className="space-y-4">
+                    <p className="text-foreground">{msg("deletingImplies")}</p>
+
+                    <ul className="list-disc list-inside space-y-2 text-muted-foreground pl-4">
+                        <li>{msg("loggingOutImmediately")}</li>
+                        <li>{msg("errasingData")}</li>
+                    </ul>
+
+                    <p className="text-foreground font-medium mt-6">
+                        {msg("finalDeletionConfirmation")}
+                    </p>
+                </div>
+
+                <div className="flex flex-col sm:flex-row gap-3 sm:justify-between mt-6">
+                    {kcContext.triggered_from_aia && (
+                        <Button
+                            variant="outline"
+                            type="submit"
+                            name="cancel-aia"
+                            value="true"
+                            className="sm:flex-1"
+                        >
+                            {msgStr("doCancel")}
+                        </Button>
+                    )}
+
+                    <Button
+                        type="submit"
+                        variant="destructive"
+                        className="sm:flex-1 text-white"
+                    >
+                        {msgStr("doConfirmDelete")}
+                    </Button>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/delete-account-confirm/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/delete-credential/Page.stories.tsx

@@ -11,39 +11,34 @@ 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",
+                rtl: false
+            }
+        }
+    }
 };
+
 export const WithCustomCredentialLabel: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                credentialLabel: "Test Credential",
-                url: { loginAction: "/login-action" }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            credentialLabel: "Test Credential",
+            url: { loginAction: "/login-action" }
+        }
+    }
 };

package/keycloak-theme/login/pages/delete-credential/Page.tsx

@@ -1,51 +1,56 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
-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 === "delete-credential.ftl");
-
-    const { msgStr, msg } = useI18n();
-
-    return (
-        <Template
-            displayMessage={false}
-            headerNode={msg("deleteCredentialTitle", kcContext.credentialLabel)}
-        >
-            <Alert variant="warning" className=" my-3">
-                <AlertDescription>
-                    <span>{msg("deleteCredentialMessage", kcContext.credentialLabel)}</span>
-                </AlertDescription>
-            </Alert>
-
-            <form className="form-actions" action={kcContext.url.loginAction} method="POST">
-                <div className="flex flex-col sm:flex-row gap-3 sm:justify-between mt-6">
-                    <Button
-                        variant="outline"
-                        name="cancel-aia"
-                        id="kc-decline"
-                        type="submit"
-                        className="sm:flex-1"
-                    >
-                        {msgStr("doCancel")}
-                    </Button>
-
-                    <Button
-                        name="accept"
-                        id="kc-accept"
-                        type="submit"
-                        variant="destructive"
-                        className="sm:flex-1 text-white"
-                    >
-                        {msgStr("doConfirmDelete")}
-                    </Button>
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Alert, AlertDescription } from "@/components/ui/alert";
+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 === "delete-credential.ftl");
+
+    const { msgStr, msg } = useI18n();
+
+    return (
+        <Template
+            displayMessage={false}
+            headerNode={msg("deleteCredentialTitle", kcContext.credentialLabel)}
+        >
+            <Alert variant="warning" className=" my-3">
+                <AlertDescription>
+                    <span>
+                        {msg("deleteCredentialMessage", kcContext.credentialLabel)}
+                    </span>
+                </AlertDescription>
+            </Alert>
+
+            <form
+                className="form-actions"
+                action={kcContext.url.loginAction}
+                method="POST"
+            >
+                <div className="flex flex-col sm:flex-row gap-3 sm:justify-between mt-6">
+                    <Button
+                        variant="outline"
+                        name="cancel-aia"
+                        id="kc-decline"
+                        type="submit"
+                        className="sm:flex-1"
+                    >
+                        {msgStr("doCancel")}
+                    </Button>
+
+                    <Button
+                        name="accept"
+                        id="kc-accept"
+                        type="submit"
+                        variant="destructive"
+                        className="sm:flex-1 text-white"
+                    >
+                        {msgStr("doConfirmDelete")}
+                    </Button>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/delete-credential/index.ts

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