@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/login-reset-otp/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "login-reset-otp.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,22 +40,20 @@ export const French: Story = {
  * - Key Aspect: Ensures that the component handles the absence of OTP credentials correctly.
  */
 export const WithoutOtpCredentials: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login"
-                },
-                configuredOtpCredentials: {
-                    userOtpCredentials: [],
-                    selectedCredentialId: undefined
-                },
-                messagesPerField: {
-                    existsError: () => false
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login"
+            },
+            configuredOtpCredentials: {
+                userOtpCredentials: [],
+                selectedCredentialId: undefined
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
 };
 
 /**
@@ -72,26 +63,24 @@ export const WithoutOtpCredentials: Story = {
  * - Key Aspect: Ensures that error messages are displayed correctly for OTP-related errors.
  */
 export const WithOtpError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login"
-                },
-                configuredOtpCredentials: {
-                    userOtpCredentials: [
-                        { id: "otp1", userLabel: "Device 1" },
-                        { id: "otp2", userLabel: "Device 2" }
-                    ],
-                    selectedCredentialId: "otp1"
-                },
-                messagesPerField: {
-                    existsError: (field: string) => field === "totp",
-                    get: () => "Invalid OTP selection"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login"
+            },
+            configuredOtpCredentials: {
+                userOtpCredentials: [
+                    { id: "otp1", userLabel: "Device 1" },
+                    { id: "otp2", userLabel: "Device 2" }
+                ],
+                selectedCredentialId: "otp1"
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === "totp",
+                get: () => "Invalid OTP selection"
+            }
+        }
+    }
 };
 
 /**
@@ -101,20 +90,18 @@ export const WithOtpError: Story = {
  * - Key Aspect: Ensures that the component renders correctly with only one OTP credential pre-selected.
  */
 export const WithOnlyOneOtpCredential: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login"
-                },
-                configuredOtpCredentials: {
-                    userOtpCredentials: [{ id: "otp1", userLabel: "Device 1" }],
-                    selectedCredentialId: "otp1"
-                },
-                messagesPerField: {
-                    existsError: () => false
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login"
+            },
+            configuredOtpCredentials: {
+                userOtpCredentials: [{ id: "otp1", userLabel: "Device 1" }],
+                selectedCredentialId: "otp1"
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/login-reset-otp/Page.tsx

@@ -1,86 +1,85 @@
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { RadioGroupItem } from "@/components/ui/radio-group";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
-import { RadioGroup } from "@radix-ui/react-radio-group";
-import { Smartphone } from "lucide-react";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-export function Page() {
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-reset-otp.ftl");
-
-    const { kcClsx } = useKcClsx();
-
-    const { url, messagesPerField, configuredOtpCredentials } = kcContext;
-
-    const { msg, msgStr } = useI18n();
-
-    return (
-        <Template
-            displayMessage={!messagesPerField.existsError("totp")}
-            headerNode={msg("doLogIn")}
-        >
-            <form
-                id="kc-otp-reset-form"
-                className={kcClsx("kcFormClass")}
-                action={url.loginAction}
-                method="post"
-            >
-                <div className="flex flex-col gap-4 w-full">
-                    <p id="kc-otp-reset-form-description">
-                        {msg("otp-reset-description")}
-                    </p>
-
-                    <RadioGroup
-                        name="selectedCredentialId"
-                        defaultValue={configuredOtpCredentials.selectedCredentialId}
-                        className="space-y-2"
-                    >
-                        {configuredOtpCredentials.userOtpCredentials.map(
-                            (otpCredential, index) => (
-                                <div
-                                    key={otpCredential.id}
-                                    className="flex items-center space-x-3 p-3 border rounded-lg"
-                                >
-                                    <Label
-                                        htmlFor={`kc-otp-credential-${index}`}
-                                        className="flex items-center space-x-2 cursor-pointer flex-1"
-                                    >
-                                        <Smartphone className="w-5 h-5 text-muted-foreground shrink-0" />
-                                        <span className="text-sm font-medium">
-                                            {otpCredential.userLabel}
-                                        </span>
-                                    </Label>
-                                    <RadioGroupItem
-                                        value={otpCredential.id}
-                                        id={`kc-otp-credential-${index}`}
-                                    />
-                                </div>
-                            )
-                        )}
-                    </RadioGroup>
-
-                    <div className={kcClsx("kcFormGroupClass")}>
-                        <div
-                            id="kc-form-buttons"
-                            className={kcClsx("kcFormButtonsClass")}
-                        >
-                            <Button
-                                id="kc-otp-reset-form-submit"
-                                className={"w-full"}
-                                type="submit"
-                            >
-                                {msgStr("doSubmit")}
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { RadioGroupItem } from "@/components/ui/radio-group";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { RadioGroup } from "@radix-ui/react-radio-group";
+import { Smartphone } from "lucide-react";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-reset-otp.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { url, messagesPerField, configuredOtpCredentials } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <Template
+            displayMessage={!messagesPerField.existsError("totp")}
+            headerNode={msg("doLogIn")}
+        >
+            <form
+                id="kc-otp-reset-form"
+                className={kcClsx("kcFormClass")}
+                action={url.loginAction}
+                method="post"
+            >
+                <div className="flex flex-col gap-4 w-full">
+                    <p id="kc-otp-reset-form-description">
+                        {msg("otp-reset-description")}
+                    </p>
+
+                    <RadioGroup
+                        name="selectedCredentialId"
+                        defaultValue={configuredOtpCredentials.selectedCredentialId}
+                        className="space-y-2"
+                    >
+                        {configuredOtpCredentials.userOtpCredentials.map(
+                            (otpCredential, index) => (
+                                <div
+                                    key={otpCredential.id}
+                                    className="flex items-center space-x-3 p-3 border rounded-lg"
+                                >
+                                    <Label
+                                        htmlFor={`kc-otp-credential-${index}`}
+                                        className="flex items-center space-x-2 cursor-pointer flex-1"
+                                    >
+                                        <Smartphone className="w-5 h-5 text-muted-foreground shrink-0" />
+                                        <span className="text-sm font-medium">
+                                            {otpCredential.userLabel}
+                                        </span>
+                                    </Label>
+                                    <RadioGroupItem
+                                        value={otpCredential.id}
+                                        id={`kc-otp-credential-${index}`}
+                                    />
+                                </div>
+                            )
+                        )}
+                    </RadioGroup>
+
+                    <div className={kcClsx("kcFormGroupClass")}>
+                        <div
+                            id="kc-form-buttons"
+                            className={kcClsx("kcFormButtonsClass")}
+                        >
+                            <Button
+                                id="kc-otp-reset-form-submit"
+                                className={"w-full"}
+                                type="submit"
+                            >
+                                {msgStr("doSubmit")}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-reset-otp/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-reset-password/Form.tsx

@@ -1,68 +1,67 @@
-
-import { Button } from '@/components/ui/button';
-import { Field, FieldError, FieldLabel } from '@/components/ui/field';
-import { Input } from '@/components/ui/input';
-import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
-import { assert } from "tsafe/assert";
-import { useKcContext } from "../../KcContext";
-import { useI18n } from "../../i18n";
-
-export function Form() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-reset-password.ftl");
-
-    const { msg, msgStr } = useI18n();
-
-    return (
-        <form
-            id="kc-reset-password-form"
-            className="space-y-3"
-            action={kcContext.url.loginAction}
-            method="post"
-        >
-            <Field>
-                <FieldLabel htmlFor="username">
-                    {" "}
-                    {!kcContext.realm.loginWithEmailAllowed
-                        ? msg("username")
-                        : !kcContext.realm.registrationEmailAsUsername
-                            ? msg("usernameOrEmail")
-                            : msg("email")}
-                </FieldLabel>
-                <Input
-                    type="text"
-                    id="username"
-                    name="username"
-                    autoFocus
-                    defaultValue={kcContext.auth.attemptedUsername ?? ""}
-                    aria-invalid={kcContext.messagesPerField.existsError("username")}
-                />
-                {kcContext.messagesPerField.existsError("username") && (
-                    <FieldError>
-                        <span
-                            id="input-error"
-                            aria-live="polite"
-                            dangerouslySetInnerHTML={{
-                                __html: kcSanitize(
-                                    kcContext.messagesPerField.getFirstError("username")
-                                )
-                            }}
-                        />
-                    </FieldError>
-                )}
-            </Field>
-
-            <Button className="w-full" type="submit">
-                {msgStr("doSubmit")}
-            </Button>
-
-            <div className="flex justify-end">
-                <Button variant="link" type="button">
-                    <a id="backToApplication" href={kcContext.url.loginUrl}>
-                        {msg("backToApplication")}
-                    </a>
-                </Button>
-            </div>
-        </form>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+
+export function Form() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-reset-password.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    return (
+        <form
+            id="kc-reset-password-form"
+            className="space-y-3"
+            action={kcContext.url.loginAction}
+            method="post"
+        >
+            <Field>
+                <FieldLabel htmlFor="username">
+                    {" "}
+                    {!kcContext.realm.loginWithEmailAllowed
+                        ? msg("username")
+                        : !kcContext.realm.registrationEmailAsUsername
+                          ? msg("usernameOrEmail")
+                          : msg("email")}
+                </FieldLabel>
+                <Input
+                    type="text"
+                    id="username"
+                    name="username"
+                    autoFocus
+                    defaultValue={kcContext.auth.attemptedUsername ?? ""}
+                    aria-invalid={kcContext.messagesPerField.existsError("username")}
+                />
+                {kcContext.messagesPerField.existsError("username") && (
+                    <FieldError>
+                        <span
+                            id="input-error"
+                            aria-live="polite"
+                            dangerouslySetInnerHTML={{
+                                __html: kcSanitize(
+                                    kcContext.messagesPerField.getFirstError("username")
+                                )
+                            }}
+                        />
+                    </FieldError>
+                )}
+            </Field>
+
+            <Button className="w-full" type="submit">
+                {msgStr("doSubmit")}
+            </Button>
+
+            <div className="flex justify-end">
+                <Button variant="link" type="button">
+                    <a id="backToApplication" href={kcContext.url.loginUrl}>
+                        {msg("backToApplication")}
+                    </a>
+                </Button>
+            </div>
+        </form>
+    );
+}

package/keycloak-theme/login/pages/login-reset-password/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "login-reset-password.ftl" });
 
 const meta = {
@@ -12,45 +11,37 @@ 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"
+            }
+        }
+    }
 };
 
 export const WithEmailAsUsername: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                realm: {
-                    loginWithEmailAllowed: true,
-                    registrationEmailAsUsername: true
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            realm: {
+                loginWithEmailAllowed: true,
+                registrationEmailAsUsername: true
+            }
+        }
+    }
 };
 /**
  * WithUsernameError:
@@ -59,26 +50,24 @@ export const WithEmailAsUsername: Story = {
  * - Key Aspect: Ensures the username input shows error messages when validation fails.
  */
 export const WithUsernameError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                realm: {
-                    loginWithEmailAllowed: false,
-                    registrationEmailAsUsername: false,
-                    duplicateEmailsAllowed: false
-                },
-                url: {
-                    loginAction: "/mock-login-action",
-                    loginUrl: "/mock-login-url"
-                },
-                messagesPerField: {
-                    existsError: (field: string) => field === "username",
-                    get: () => "Invalid username"
-                },
-                auth: {
-                    attemptedUsername: "invalid_user"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            realm: {
+                loginWithEmailAllowed: false,
+                registrationEmailAsUsername: false,
+                duplicateEmailsAllowed: false
+            },
+            url: {
+                loginAction: "/mock-login-action",
+                loginUrl: "/mock-login-url"
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === "username",
+                get: () => "Invalid username"
+            },
+            auth: {
+                attemptedUsername: "invalid_user"
+            }
+        }
+    }
 };