@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

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

@@ -1,27 +1,27 @@
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-import { Form } from './Form';
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-reset-password.ftl");
-
-    const { msg } = useI18n();
-
-    return (
-        <Template
-            displayInfo
-            displayMessage={!kcContext.messagesPerField.existsError("username")}
-            infoNode={
-                kcContext.realm.duplicateEmailsAllowed
-                    ? msg("emailInstructionUsername")
-                    : msg("emailInstruction")
-            }
-            headerNode={msg("emailForgotTitle")}
-        >
-            <Form />
-        </Template>
-    );
-}
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+import { Form } from "./Form";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-reset-password.ftl");
+
+    const { msg } = useI18n();
+
+    return (
+        <Template
+            displayInfo
+            displayMessage={!kcContext.messagesPerField.existsError("username")}
+            infoNode={
+                kcContext.realm.duplicateEmailsAllowed
+                    ? msg("emailInstructionUsername")
+                    : msg("emailInstruction")
+            }
+            headerNode={msg("emailForgotTitle")}
+        >
+            <Form />
+        </Template>
+    );
+}

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

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "login-update-password.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 the password input field shows an error message when validation fails.
  */
 export const WithPasswordError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                messagesPerField: {
-                    existsError: (field: string) => field === "password",
-                    get: () => "Password must be at least 8 characters long."
-                },
-                isAppInitiatedAction: false
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === "password",
+                get: () => "Password must be at least 8 characters long."
+            },
+            isAppInitiatedAction: false
+        }
+    }
 };
 
 /**
@@ -70,18 +61,16 @@ export const WithPasswordError: Story = {
  * - Key Aspect: Ensures that the password confirmation field shows an error when passwords do not match.
  */
 export const WithPasswordConfirmError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                messagesPerField: {
-                    existsError: (field: string) => field === "password-confirm",
-                    get: () => "Passwords do not match."
-                },
-                isAppInitiatedAction: false
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === "password-confirm",
+                get: () => "Passwords do not match."
+            },
+            isAppInitiatedAction: false
+        }
+    }
 };

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

@@ -1,111 +1,109 @@
-
-import { Button } from "@/components/ui/button";
-import { Field, FieldError, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { LogoutOtherSessions } from '@/login/components/LogoutOtherSessions';
-import { PasswordWrapper } from '@/login/components/PasswordWrapper';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { kcSanitize } from "keycloakify/lib/kcSanitize";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-export function Page() {
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-update-password.ftl");
-
-    const { msg, msgStr } = useI18n();
-
-    const { url, messagesPerField, isAppInitiatedAction } = kcContext;
-
-    return (
-        <Template
-            displayMessage={!messagesPerField.existsError("password", "password-confirm")}
-            headerNode={msg("updatePasswordTitle")}
-        >
-            <form
-                id="kc-passwd-update-form"
-                className="space-y-6"
-                action={url.loginAction}
-                method="post"
-            >
-                <Field>
-                    <FieldLabel htmlFor="password-new">{msg("passwordNew")}</FieldLabel>
-                    <PasswordWrapper passwordInputId="password-new" >
-                        <Input
-                            type="password"
-                            id="password-new"
-                            name="password-new"
-                            autoFocus
-                            autoComplete="new-password"
-                            aria-invalid={messagesPerField.existsError("password")}
-                        />
-                    </PasswordWrapper>
-                    {messagesPerField.existsError("password") && (
-                        <FieldError>
-                            <span
-                                id="input-error"
-                                aria-live="polite"
-                                dangerouslySetInnerHTML={{
-                                    __html: kcSanitize(
-                                        messagesPerField.getFirstError("password")
-                                    )
-                                }}
-                            />
-                        </FieldError>
-                    )}
-                </Field>
-
-                <Field>
-                    <FieldLabel htmlFor="password-confirm">
-                        {msg("passwordConfirm")}
-                    </FieldLabel>
-                    <PasswordWrapper passwordInputId="password-confirm">
-                        <Input
-                            type="password"
-                            id="password-confirm"
-                            name="password-confirm"
-                            autoComplete="new-password"
-                            aria-invalid={messagesPerField.existsError(
-                                "password-confirm"
-                            )}
-                        />
-                    </PasswordWrapper>
-                    {messagesPerField.existsError("password-confirm") && (
-                        <FieldError>
-                            <span
-                                id="input-error"
-                                aria-live="polite"
-                                dangerouslySetInnerHTML={{
-                                    __html: kcSanitize(
-                                        messagesPerField.getFirstError("password-confirm")
-                                    )
-                                }}
-                            />
-                        </FieldError>
-                    )}
-                </Field>
-
-                <LogoutOtherSessions />
-
-                <div className="space-y-3">
-                    <Button 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 { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { LogoutOtherSessions } from "@/login/components/LogoutOtherSessions";
+import { PasswordWrapper } from "@/login/components/PasswordWrapper";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-update-password.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    const { url, messagesPerField, isAppInitiatedAction } = kcContext;
+
+    return (
+        <Template
+            displayMessage={!messagesPerField.existsError("password", "password-confirm")}
+            headerNode={msg("updatePasswordTitle")}
+        >
+            <form
+                id="kc-passwd-update-form"
+                className="space-y-6"
+                action={url.loginAction}
+                method="post"
+            >
+                <Field>
+                    <FieldLabel htmlFor="password-new">{msg("passwordNew")}</FieldLabel>
+                    <PasswordWrapper passwordInputId="password-new">
+                        <Input
+                            type="password"
+                            id="password-new"
+                            name="password-new"
+                            autoFocus
+                            autoComplete="new-password"
+                            aria-invalid={messagesPerField.existsError("password")}
+                        />
+                    </PasswordWrapper>
+                    {messagesPerField.existsError("password") && (
+                        <FieldError>
+                            <span
+                                id="input-error"
+                                aria-live="polite"
+                                dangerouslySetInnerHTML={{
+                                    __html: kcSanitize(
+                                        messagesPerField.getFirstError("password")
+                                    )
+                                }}
+                            />
+                        </FieldError>
+                    )}
+                </Field>
+
+                <Field>
+                    <FieldLabel htmlFor="password-confirm">
+                        {msg("passwordConfirm")}
+                    </FieldLabel>
+                    <PasswordWrapper passwordInputId="password-confirm">
+                        <Input
+                            type="password"
+                            id="password-confirm"
+                            name="password-confirm"
+                            autoComplete="new-password"
+                            aria-invalid={messagesPerField.existsError(
+                                "password-confirm"
+                            )}
+                        />
+                    </PasswordWrapper>
+                    {messagesPerField.existsError("password-confirm") && (
+                        <FieldError>
+                            <span
+                                id="input-error"
+                                aria-live="polite"
+                                dangerouslySetInnerHTML={{
+                                    __html: kcSanitize(
+                                        messagesPerField.getFirstError("password-confirm")
+                                    )
+                                }}
+                            />
+                        </FieldError>
+                    )}
+                </Field>
+
+                <LogoutOtherSessions />
+
+                <div className="space-y-3">
+                    <Button 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/login-update-password/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-update-profile/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "login-update-profile.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,18 +40,16 @@ export const French: Story = {
  * - Key Aspect: Ensures the profile fields show error messages when validation fails.
  */
 export const WithProfileError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                messagesPerField: {
-                    existsError: (field: string) => field === "email",
-                    get: () => "Invalid email format"
-                },
-                isAppInitiatedAction: false
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === "email",
+                get: () => "Invalid email format"
+            },
+            isAppInitiatedAction: false
+        }
+    }
 };

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

@@ -1,68 +1,67 @@
-import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
-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 === "login-update-profile.ftl");
-
-    const { kcClsx } = useKcClsx();
-
-    const { messagesPerField, url, isAppInitiatedAction } = kcContext;
-
-    const { msg, msgStr } = useI18n();
-
-    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
-
-    return (
-        <Template
-            displayRequiredFields
-            headerNode={msg("loginProfileTitle")}
-            displayMessage={messagesPerField.exists("global")}
-        >
-            <form
-                id="kc-update-profile-form"
-                className="space-y-6"
-                action={url.loginAction}
-                method="post"
-            >
-                <UserProfileFormFields onIsFormSubmittableValueChange={setIsFormSubmittable} />
-
-                <div className={kcClsx("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
-                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
-                    </div>
-                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
-                        <Button
-                            disabled={!isFormSubmittable}
-                            className="w-full"
-                            type="submit"
-                            value={msgStr("doSubmit")}
-                        >
-                            {msgStr("doSubmit")}
-                        </Button>
-                        {isAppInitiatedAction && (
-                            <Button
-                                variant="secondary"
-                                className=" w-full mt-2 "
-                                type="submit"
-                                name="cancel-aia"
-                                value="true"
-                            >
-                                {msg("doCancel")}
-                            </Button>
-                        )}
-                    </div>
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+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 === "login-update-profile.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { messagesPerField, url, isAppInitiatedAction } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+
+    return (
+        <Template
+            displayRequiredFields
+            headerNode={msg("loginProfileTitle")}
+            displayMessage={messagesPerField.exists("global")}
+        >
+            <form
+                id="kc-update-profile-form"
+                className="space-y-6"
+                action={url.loginAction}
+                method="post"
+            >
+                <UserProfileFormFields
+                    onIsFormSubmittableValueChange={setIsFormSubmittable}
+                />
+
+                <div className={kcClsx("kcFormGroupClass")}>
+                    <div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
+                        <div className={kcClsx("kcFormOptionsWrapperClass")} />
+                    </div>
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <Button
+                            disabled={!isFormSubmittable}
+                            className="w-full"
+                            type="submit"
+                            value={msgStr("doSubmit")}
+                        >
+                            {msgStr("doSubmit")}
+                        </Button>
+                        {isAppInitiatedAction && (
+                            <Button
+                                variant="secondary"
+                                className=" w-full mt-2 "
+                                type="submit"
+                                name="cancel-aia"
+                                value="true"
+                            >
+                                {msg("doCancel")}
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-update-profile/index.ts

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