@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/login-idp-link-confirm/Page.tsx

@@ -1,43 +1,40 @@
-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 === "login-idp-link-confirm.ftl");
-
-    const { msg } = useI18n();
-
-    return (
-        <Template
-            headerNode={msg("confirmLinkIdpTitle")}
-        >
-            <form id="kc-register-form" action={kcContext.url.loginAction} method="post">
-                <div className="flex flex-col gap-4">
-                    <Button
-                        type="submit"
-                        className="w-full"
-                        variant="outline"
-                        name="submitAction"
-                        id="updateProfile"
-                        value="updateProfile"
-                    >
-                        {msg("confirmLinkIdpReviewProfile")}
-                    </Button>
-                    <Button
-                        type="submit"
-                        className="w-full"
-                        name="submitAction"
-                        id="linkAccount"
-                        value="linkAccount"
-                    >
-                        {msg("confirmLinkIdpContinue", kcContext.idpAlias)}
-                    </Button>
-                </div>
-            </form>
-        </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 === "login-idp-link-confirm.ftl");
+
+    const { msg } = useI18n();
+
+    return (
+        <Template headerNode={msg("confirmLinkIdpTitle")}>
+            <form id="kc-register-form" action={kcContext.url.loginAction} method="post">
+                <div className="flex flex-col gap-4">
+                    <Button
+                        type="submit"
+                        className="w-full"
+                        variant="outline"
+                        name="submitAction"
+                        id="updateProfile"
+                        value="updateProfile"
+                    >
+                        {msg("confirmLinkIdpReviewProfile")}
+                    </Button>
+                    <Button
+                        type="submit"
+                        className="w-full"
+                        name="submitAction"
+                        id="linkAccount"
+                        value="linkAccount"
+                    >
+                        {msg("confirmLinkIdpContinue", kcContext.idpAlias)}
+                    </Button>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-idp-link-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/login-idp-link-confirm-override/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({
     pageId: "login-idp-link-confirm-override.ftl"
 });
@@ -14,30 +13,24 @@ 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"
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/login-idp-link-confirm-override/Page.tsx

@@ -1,47 +1,44 @@
-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 === "login-idp-link-confirm-override.ftl");
-
-
-    const { msg } = useI18n();
-
-    return (
-        <Template
-            headerNode={msg("confirmOverrideIdpTitle")}
-        >
-            <form
-                id="kc-register-form"
-                action={kcContext.url.loginAction}
-                className="flex flex-col gap-5"
-                method="post"
-            >
-                <span>
-                    {msg("pageExpiredMsg1")}{" "}
-                    <a
-                        className="text-primary dark:text-white underline underline-offset-2"
-                        id="loginRestartLink"
-                        href={kcContext.url.loginRestartFlowUrl}
-                    >
-                        {msg("doClickHere")}
-                    </a>
-                </span>
-
-                <Button
-                    type="submit"
-                    className="w-full"
-                    name="submitAction"
-                    id="confirmOverride"
-                    value="confirmOverride"
-                >
-                    {msg("confirmOverrideIdpContinue", kcContext.idpDisplayName)}
-                </Button>
-            </form>
-        </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 === "login-idp-link-confirm-override.ftl");
+
+    const { msg } = useI18n();
+
+    return (
+        <Template headerNode={msg("confirmOverrideIdpTitle")}>
+            <form
+                id="kc-register-form"
+                action={kcContext.url.loginAction}
+                className="flex flex-col gap-5"
+                method="post"
+            >
+                <span>
+                    {msg("pageExpiredMsg1")}{" "}
+                    <a
+                        className="text-primary dark:text-white underline underline-offset-2"
+                        id="loginRestartLink"
+                        href={kcContext.url.loginRestartFlowUrl}
+                    >
+                        {msg("doClickHere")}
+                    </a>
+                </span>
+
+                <Button
+                    type="submit"
+                    className="w-full"
+                    name="submitAction"
+                    id="confirmOverride"
+                    value="confirmOverride"
+                >
+                    {msg("confirmOverrideIdpContinue", kcContext.idpDisplayName)}
+                </Button>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-idp-link-confirm-override/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-idp-link-email/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 // Mock kcContext to avoid TS2304 error and to simulate the real environment
 const mockKcContext = {
     url: {
@@ -33,31 +32,29 @@ type Story = StoryObj<typeof meta>;
  * - Key Aspect: Ensures the default behavior of the component with typical kcContext values.
  */
 export const Default: Story = {
-    render: () => <KcPageStory kcContext={mockKcContext} />
+    args: {
+        kcContext: mockKcContext
+    }
 };
 
 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"
+            }
+        }
+    }
 };
 
 /**
@@ -67,20 +64,18 @@ export const French: Story = {
  * - Key Aspect: Ensures the correct identity provider alias ("Google") and broker context (user info) are displayed in the email linking instructions.
  */
 export const WithIdpAlias: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                ...mockKcContext,
-                idpAlias: "Google",
-                brokerContext: {
-                    username: "john.doe"
-                },
-                realm: {
-                    displayName: "MyRealm"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            ...mockKcContext,
+            idpAlias: "Google",
+            brokerContext: {
+                username: "john.doe"
+            },
+            realm: {
+                displayName: "MyRealm"
+            }
+        }
+    }
 };
 
 /**
@@ -90,20 +85,18 @@ export const WithIdpAlias: Story = {
  * - Key Aspect: Ensures that custom realm display names are rendered correctly alongside the idpAlias and broker context.
  */
 export const WithCustomRealmDisplayName: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                ...mockKcContext,
-                idpAlias: "Facebook",
-                brokerContext: {
-                    username: "jane.doe"
-                },
-                realm: {
-                    displayName: "CUSTOM REALM DISPLAY NAME"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            ...mockKcContext,
+            idpAlias: "Facebook",
+            brokerContext: {
+                username: "jane.doe"
+            },
+            realm: {
+                displayName: "CUSTOM REALM DISPLAY NAME"
+            }
+        }
+    }
 };
 
 /**
@@ -113,18 +106,16 @@ export const WithCustomRealmDisplayName: Story = {
  * - Key Aspect: Verifies that the component can display error messages during form submission failure, ensuring proper error handling.
  */
 export const WithFormSubmissionError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                ...mockKcContext,
-                url: {
-                    loginAction: "/error"
-                },
-                message: {
-                    type: "error",
-                    summary: "An error occurred during form submission."
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            ...mockKcContext,
+            url: {
+                loginAction: "/error"
+            },
+            message: {
+                type: "error",
+                summary: "An error occurred during form submission."
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/login-idp-link-email/Page.tsx

@@ -1,54 +1,51 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
-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-idp-link-email.ftl");
-
-    const { msg } = useI18n();
-
-    return (
-        <Template
-            headerNode={msg("emailLinkIdpTitle", kcContext.idpAlias)}
-        >
-            <Alert id="instruction1" variant="info" className="my-3">
-                <AlertDescription>
-                    {msg(
-                        "emailLinkIdp1",
-                        kcContext.idpAlias,
-                        kcContext.brokerContext.username,
-                        kcContext.realm.displayName
-                    )}
-                </AlertDescription>
-            </Alert>
-
-            <div className="space-y-2 text-sm text-muted-foreground">
-                <p className="leading-relaxed">
-                    {msg("emailLinkIdp2")}{" "}
-                    <a
-                        href={kcContext.url.loginAction}
-                        className="inline-flex items-center gap-1 text-primary dark:text-white underline underline-offset-2"
-                    >
-                        {msg("doClickHere")}
-                    </a>{" "}
-                    {msg("emailLinkIdp3")}
-                </p>
-
-                <p className="leading-relaxed">
-                    {msg("emailLinkIdp4")}{" "}
-                    <a
-                        href={kcContext.url.loginAction}
-                        className="inline-flex items-center gap-1 text-primary dark:text-white underline underline-offset-2"
-                    >
-                        {msg("doClickHere")}
-                    </a>{" "}
-                    {msg("emailLinkIdp5")}
-                </p>
-            </div>
-        </Template>
-    );
-}
+import { Alert, AlertDescription } from "@/components/ui/alert";
+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-idp-link-email.ftl");
+
+    const { msg } = useI18n();
+
+    return (
+        <Template headerNode={msg("emailLinkIdpTitle", kcContext.idpAlias)}>
+            <Alert id="instruction1" variant="info" className="my-3">
+                <AlertDescription>
+                    {msg(
+                        "emailLinkIdp1",
+                        kcContext.idpAlias,
+                        kcContext.brokerContext.username,
+                        kcContext.realm.displayName
+                    )}
+                </AlertDescription>
+            </Alert>
+
+            <div className="space-y-2 text-sm text-muted-foreground">
+                <p className="leading-relaxed">
+                    {msg("emailLinkIdp2")}{" "}
+                    <a
+                        href={kcContext.url.loginAction}
+                        className="inline-flex items-center gap-1 text-primary dark:text-white underline underline-offset-2"
+                    >
+                        {msg("doClickHere")}
+                    </a>{" "}
+                    {msg("emailLinkIdp3")}
+                </p>
+
+                <p className="leading-relaxed">
+                    {msg("emailLinkIdp4")}{" "}
+                    <a
+                        href={kcContext.url.loginAction}
+                        className="inline-flex items-center gap-1 text-primary dark:text-white underline underline-offset-2"
+                    >
+                        {msg("doClickHere")}
+                    </a>{" "}
+                    {msg("emailLinkIdp5")}
+                </p>
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-idp-link-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-oauth-grant/Page.stories.tsx

@@ -40,31 +40,29 @@ type Story = StoryObj<typeof meta>;
  * - Key Aspect: Ensures the component works with a realistic `logoUri` and client name.
  */
 export const Default: Story = {
-    render: () => <KcPageStory kcContext={mockKcContext} />
+    args: {
+        kcContext: mockKcContext
+    }
 };
 
 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"
+            }
+        }
+    }
 };
 
 /**
@@ -74,17 +72,15 @@ export const French: Story = {
  * - Key Aspect: Ensures the component renders correctly when there are no requested scopes.
  */
 export const WithoutScopes: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                ...mockKcContext,
-                oauth: {
-                    ...mockKcContext.oauth,
-                    clientScopesRequested: []
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            ...mockKcContext,
+            oauth: {
+                ...mockKcContext.oauth,
+                clientScopesRequested: []
+            }
+        }
+    }
 };
 
 /**
@@ -94,18 +90,16 @@ export const WithoutScopes: Story = {
  * - Key Aspect: Ensures that the component can display error messages when form submission fails.
  */
 export const WithFormSubmissionError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                ...mockKcContext,
-                url: {
-                    oauthAction: "/error"
-                },
-                message: {
-                    type: "error",
-                    summary: "An error occurred during form submission."
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            ...mockKcContext,
+            url: {
+                oauthAction: "/error"
+            },
+            message: {
+                type: "error",
+                summary: "An error occurred during form submission."
+            }
+        }
+    }
 };