@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

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

@@ -1,51 +1,49 @@
-import { Button } from '@/components/ui/button';
-import { assert } from "tsafe/assert";
-import { useKcContext } from "../../KcContext";
-import { Template } from "../../components/Template";
-import { useI18n } from "../../i18n";
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "terms.ftl");
-
-
-    const { msg, msgStr } = useI18n();
-
-    const { url } = kcContext;
-
-    return (
-        <Template displayMessage={false} headerNode={msg("termsTitle")}>
-            <div className="space-y-6">
-                <div
-                    id="kc-terms-text"
-                    className="p-4 bg-muted/50 rounded-lg max-h-64 overflow-y-auto text-sm leading-relaxed"
-                >
-                    {msg("termsText")}
-                </div>
-
-                <form className="space-y-4" action={url.loginAction} method="POST">
-                    <div className="flex flex-col sm:flex-row gap-3 sm:justify-between">
-                        <Button
-                            variant="outline"
-                            name="cancel"
-                            id="kc-decline"
-                            type="submit"
-                            className="sm:flex-1"
-                        >
-                            {msgStr("doDecline")}
-                        </Button>
-                        <Button
-                            name="accept"
-                            id="kc-accept"
-                            type="submit"
-                            className="sm:flex-1"
-                        >
-                            {msgStr("doAccept")}
-                        </Button>
-
-                    </div>
-                </form>
-            </div>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { Template } from "../../components/Template";
+import { useI18n } from "../../i18n";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "terms.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    const { url } = kcContext;
+
+    return (
+        <Template displayMessage={false} headerNode={msg("termsTitle")}>
+            <div className="space-y-6">
+                <div
+                    id="kc-terms-text"
+                    className="p-4 bg-muted/50 rounded-lg max-h-64 overflow-y-auto text-sm leading-relaxed"
+                >
+                    {msg("termsText")}
+                </div>
+
+                <form className="space-y-4" action={url.loginAction} method="POST">
+                    <div className="flex flex-col sm:flex-row gap-3 sm:justify-between">
+                        <Button
+                            variant="outline"
+                            name="cancel"
+                            id="kc-decline"
+                            type="submit"
+                            className="sm:flex-1"
+                        >
+                            {msgStr("doDecline")}
+                        </Button>
+                        <Button
+                            name="accept"
+                            id="kc-accept"
+                            type="submit"
+                            className="sm:flex-1"
+                        >
+                            {msgStr("doAccept")}
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/terms/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/update-email/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "update-email.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 "Cancel" button is visible and functional during app-initiated actions.
  */
 export const WithAppInitiatedAction: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                messagesPerField: {
-                    exists: () => false
-                },
-                isAppInitiatedAction: true
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            messagesPerField: {
+                exists: () => false
+            },
+            isAppInitiatedAction: true
+        }
+    }
 };

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

@@ -1,62 +1,61 @@
-import { Button } from "@/components/ui/button";
-import { LogoutOtherSessions } from '@/login/components/LogoutOtherSessions';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useState } from "react";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-import { UserProfileFormFields } from "../../components/UserProfileFormFields";
-
-
-export function Page() {
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "update-email.ftl");
-
-
-    const { msg, msgStr } = useI18n();
-
-    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
-
-    const { url, messagesPerField, isAppInitiatedAction } = kcContext;
-
-    return (
-        <Template
-            displayMessage={messagesPerField.exists("global")}
-            displayRequiredFields
-            headerNode={msg("updateEmailTitle")}
-        >
-            <form
-                id="kc-update-email-form"
-                className="space-y-6"
-                action={url.loginAction}
-                method="post"
-            >
-                <UserProfileFormFields onIsFormSubmittableValueChange={setIsFormSubmittable} />
-
-                <LogoutOtherSessions />
-
-                <div className="space-y-3">
-                    <Button
-                        disabled={!isFormSubmittable}
-                        className="w-full"
-                        type="submit"
-                    >
-                        {msgStr("doSubmit")}
-                    </Button>
-                    {isAppInitiatedAction && (
-                        <Button
-                            variant="outline"
-                            className="w-full"
-                            type="submit"
-                            name="cancel-aia"
-                            value="true"
-                        >
-                            {msg("doCancel")}
-                        </Button>
-                    )}
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { LogoutOtherSessions } from "@/login/components/LogoutOtherSessions";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useState } from "react";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+import { UserProfileFormFields } from "../../components/UserProfileFormFields";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "update-email.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+
+    const { url, messagesPerField, isAppInitiatedAction } = kcContext;
+
+    return (
+        <Template
+            displayMessage={messagesPerField.exists("global")}
+            displayRequiredFields
+            headerNode={msg("updateEmailTitle")}
+        >
+            <form
+                id="kc-update-email-form"
+                className="space-y-6"
+                action={url.loginAction}
+                method="post"
+            >
+                <UserProfileFormFields
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                />
+
+                <LogoutOtherSessions />
+
+                <div className="space-y-3">
+                    <Button
+                        disabled={!isFormSubmittable}
+                        className="w-full"
+                        type="submit"
+                    >
+                        {msgStr("doSubmit")}
+                    </Button>
+                    {isAppInitiatedAction && (
+                        <Button
+                            variant="outline"
+                            className="w-full"
+                            type="submit"
+                            name="cancel-aia"
+                            value="true"
+                        >
+                            {msg("doCancel")}
+                        </Button>
+                    )}
+                </div>
+            </form>
+        </Template>
+    );
+}

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

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "webauthn-authenticate.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,38 +40,36 @@ export const French: Story = {
  * - Key Aspect: Ensures that the available authenticators are displayed, and the user can select one.
  */
 export const WithMultipleAuthenticators: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                authenticators: {
-                    authenticators: [
-                        {
-                            credentialId: "authenticator-1",
-                            label: "Security Key 1",
-                            transports: {
-                                iconClass: "kcAuthenticatorUsbIcon",
-                                displayNameProperties: ["USB"]
-                            },
-                            createdAt: "2023-01-01"
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            authenticators: {
+                authenticators: [
+                    {
+                        credentialId: "authenticator-1",
+                        label: "Security Key 1",
+                        transports: {
+                            iconClass: "kcAuthenticatorUsbIcon",
+                            displayNameProperties: ["USB"]
+                        },
+                        createdAt: "2023-01-01"
+                    },
+                    {
+                        credentialId: "authenticator-2",
+                        label: "Security Key 2",
+                        transports: {
+                            iconClass: "kcAuthenticatorNfcIcon",
+                            displayNameProperties: ["NFC"]
                         },
-                        {
-                            credentialId: "authenticator-2",
-                            label: "Security Key 2",
-                            transports: {
-                                iconClass: "kcAuthenticatorNfcIcon",
-                                displayNameProperties: ["NFC"]
-                            },
-                            createdAt: "2023-02-01"
-                        }
-                    ]
-                },
-                shouldDisplayAuthenticators: true
-            }}
-        />
-    )
+                        createdAt: "2023-02-01"
+                    }
+                ]
+            },
+            shouldDisplayAuthenticators: true
+        }
+    }
 };
 
 /**
@@ -88,29 +79,27 @@ export const WithMultipleAuthenticators: Story = {
  * - Key Aspect: Ensures the form renders correctly when there is only one authenticator available.
  */
 export const WithSingleAuthenticator: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                authenticators: {
-                    authenticators: [
-                        {
-                            credentialId: "authenticator-1",
-                            label: "My Security Key",
-                            transports: {
-                                iconClass: "kcAuthenticatorUsbIcon",
-                                displayNameProperties: ["USB"]
-                            },
-                            createdAt: "2023-01-01"
-                        }
-                    ]
-                },
-                shouldDisplayAuthenticators: true
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            authenticators: {
+                authenticators: [
+                    {
+                        credentialId: "authenticator-1",
+                        label: "My Security Key",
+                        transports: {
+                            iconClass: "kcAuthenticatorUsbIcon",
+                            displayNameProperties: ["USB"]
+                        },
+                        createdAt: "2023-01-01"
+                    }
+                ]
+            },
+            shouldDisplayAuthenticators: true
+        }
+    }
 };
 
 /**
@@ -120,33 +109,31 @@ export const WithSingleAuthenticator: Story = {
  * - Key Aspect: Ensures the form handles authentication errors and displays a relevant message.
  */
 export const WithErrorDuringAuthentication: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                authenticators: {
-                    authenticators: [
-                        {
-                            credentialId: "authenticator-1",
-                            label: "My Security Key",
-                            transports: {
-                                iconClass: "kcAuthenticatorUsbIcon",
-                                displayNameProperties: ["USB"]
-                            },
-                            createdAt: "2023-01-01"
-                        }
-                    ]
-                },
-                shouldDisplayAuthenticators: true,
-                message: {
-                    summary: "An error occurred during WebAuthn authentication.",
-                    type: "error"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            authenticators: {
+                authenticators: [
+                    {
+                        credentialId: "authenticator-1",
+                        label: "My Security Key",
+                        transports: {
+                            iconClass: "kcAuthenticatorUsbIcon",
+                            displayNameProperties: ["USB"]
+                        },
+                        createdAt: "2023-01-01"
+                    }
+                ]
+            },
+            shouldDisplayAuthenticators: true,
+            message: {
+                summary: "An error occurred during WebAuthn authentication.",
+                type: "error"
+            }
+        }
+    }
 };
 
 /**
@@ -156,27 +143,25 @@ export const WithErrorDuringAuthentication: Story = {
  * - Key Aspect: Ensures the form provides a clear message when JavaScript is required but unavailable.
  */
 export const WithJavaScriptDisabled: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                authenticators: {
-                    authenticators: [
-                        {
-                            credentialId: "authenticator-1",
-                            label: "My Security Key",
-                            transports: {
-                                iconClass: "kcAuthenticatorUsbIcon",
-                                displayNameProperties: ["USB"]
-                            },
-                            createdAt: "2023-01-01"
-                        }
-                    ]
-                },
-                shouldDisplayAuthenticators: true
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            authenticators: {
+                authenticators: [
+                    {
+                        credentialId: "authenticator-1",
+                        label: "My Security Key",
+                        transports: {
+                            iconClass: "kcAuthenticatorUsbIcon",
+                            displayNameProperties: ["USB"]
+                        },
+                        createdAt: "2023-01-01"
+                    }
+                ]
+            },
+            shouldDisplayAuthenticators: true
+        }
+    }
 };