@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/logout-confirm/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "logout-confirm.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,24 +40,22 @@ export const French: Story = {
  * - Key Aspect: Ensures the custom logout message is displayed correctly.
  */
 export const WithCustomLogoutMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    logoutConfirmAction: "/mock-logout-action"
-                },
-                client: {
-                    baseUrl: "/mock-client-url"
-                },
-                logoutConfirm: {
-                    code: "mock-session-code",
-                    skipLink: false
-                },
-                message: {
-                    summary: "Are you sure you want to log out from all sessions?",
-                    type: "warning"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                logoutConfirmAction: "/mock-logout-action"
+            },
+            client: {
+                baseUrl: "/mock-client-url"
+            },
+            logoutConfirm: {
+                code: "mock-session-code",
+                skipLink: false
+            },
+            message: {
+                summary: "Are you sure you want to log out from all sessions?",
+                type: "warning"
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/logout-confirm/Page.tsx

@@ -1,53 +1,50 @@
-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 === "logout-confirm.ftl");
-
-
-    const { url, client, logoutConfirm } = kcContext;
-
-    const { msg, msgStr } = useI18n();
-    return (
-        <Template
-            headerNode={msg("logoutConfirmTitle")}
-        >
-            <div className="space-y-4">
-                <p className="text-foreground ">{msg("logoutConfirmHeader")}</p>
-
-                <form
-                    className="space-y-6"
-                    action={url.logoutConfirmAction}
-                    method="POST"
-                >
-                    <input type="hidden" name="session_code" value={logoutConfirm.code} />
-
-                    <Button
-                        tabIndex={4}
-                        className="w-full"
-                        name="confirmLogout"
-                        id="kc-logout"
-                        type="submit"
-                    >
-                        {msgStr("doLogout")}
-                    </Button>
-                </form>
-
-                {!logoutConfirm.skipLink && client.baseUrl && (
-                    <div className="flex justify-end">
-                        <a
-                            href={client.baseUrl}
-                            className="text-sm text-primary dark:text-white hover:text-primary/80 underline underline-offset-4"
-                        >
-                            {msg("backToApplication")}
-                        </a>
-                    </div>
-                )}
-            </div>
-        </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 === "logout-confirm.ftl");
+
+    const { url, client, logoutConfirm } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+    return (
+        <Template headerNode={msg("logoutConfirmTitle")}>
+            <div className="space-y-4">
+                <p className="text-foreground ">{msg("logoutConfirmHeader")}</p>
+
+                <form
+                    className="space-y-6"
+                    action={url.logoutConfirmAction}
+                    method="POST"
+                >
+                    <input type="hidden" name="session_code" value={logoutConfirm.code} />
+
+                    <Button
+                        tabIndex={4}
+                        className="w-full"
+                        name="confirmLogout"
+                        id="kc-logout"
+                        type="submit"
+                    >
+                        {msgStr("doLogout")}
+                    </Button>
+                </form>
+
+                {!logoutConfirm.skipLink && client.baseUrl && (
+                    <div className="flex justify-end">
+                        <a
+                            href={client.baseUrl}
+                            className="text-sm text-primary dark:text-white hover:text-primary/80 underline underline-offset-4"
+                        >
+                            {msg("backToApplication")}
+                        </a>
+                    </div>
+                )}
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/logout-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/register/Form.tsx

@@ -1,106 +1,107 @@
-import { Button } from '@/components/ui/button';
-import { clsx } from "@keycloakify/login-ui/tools/clsx";
-import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
-import { useLayoutEffect, useState } from "react";
-import { assert } from "tsafe/assert";
-import { useKcContext } from "../../KcContext";
-import { UserProfileFormFields } from "../../components/UserProfileFormFields";
-import { useI18n } from "../../i18n";
-import { TermsAcceptance } from "./TermsAcceptance";
-
-export function Form() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "register.ftl");
-    const { kcClsx } = useKcClsx();
-    const { msg, msgStr } = useI18n();
-
-    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
-    const [areTermsAccepted, setAreTermsAccepted] = useState(false);
-
-    useLayoutEffect(() => {
-        (window as any)["onSubmitRecaptcha"] = () => {
-            // @ts-expect-error
-            document.getElementById("kc-register-form").requestSubmit();
-        };
-
-        return () => {
-            delete (window as any)["onSubmitRecaptcha"];
-        };
-    }, []);
-
-    return (
-        <form
-            id="kc-register-form"
-            action={kcContext.url.registrationAction}
-            className="space-y-3"
-            method="post"
-        >
-            <UserProfileFormFields onIsFormSubmittableValueChange={setIsFormSubmittable} />
-            {kcContext.termsAcceptanceRequired && (
-                <TermsAcceptance
-                    messagesPerField={kcContext.messagesPerField}
-                    areTermsAccepted={areTermsAccepted}
-                    onAreTermsAcceptedValueChange={setAreTermsAccepted}
-                />
-            )}
-            {kcContext.recaptchaRequired &&
-                (kcContext.recaptchaVisible || kcContext.recaptchaAction === undefined) && (
-                    <div className="form-group">
-                        <div className={kcClsx("kcInputWrapperClass")}>
-                            <div
-                                className="g-recaptcha"
-                                data-size="compact"
-                                data-sitekey={kcContext.recaptchaSiteKey}
-                                data-action={kcContext.recaptchaAction}
-                            ></div>
-                        </div>
-                    </div>
-                )}
-            <div className={kcClsx("kcFormGroupClass")}>
-
-                {kcContext.recaptchaRequired &&
-                    !kcContext.recaptchaVisible &&
-                    kcContext.recaptchaAction !== undefined ? (
-                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
-                        <button
-                            className={clsx(
-                                kcClsx(
-                                    "kcButtonClass",
-                                    "kcButtonPrimaryClass",
-                                    "kcButtonBlockClass",
-                                    "kcButtonLargeClass"
-                                ),
-                                "g-recaptcha"
-                            )}
-                            data-sitekey={kcContext.recaptchaSiteKey}
-                            data-callback="onSubmitRecaptcha"
-                            data-action={kcContext.recaptchaAction}
-                            type="submit"
-                        >
-                            {msg("doRegister")}
-                        </button>
-                    </div>
-                ) : (
-                    <Button
-                        disabled={
-                            !isFormSubmittable ||
-                            (kcContext.termsAcceptanceRequired && !areTermsAccepted)
-                        }
-                        className="w-full mt-2"
-                        name="register"
-                        type="submit"
-                    >
-                        {msgStr("doRegister")}
-                    </Button>
-                )}
-            </div>
-
-            <div className=" flex justify-end">
-                <Button variant="ghost">
-                    <a href={kcContext.url.loginUrl}>{msg("backToLogin")}</a>
-                </Button>
-            </div>
-
-        </form>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { clsx } from "@keycloakify/login-ui/tools/clsx";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { useLayoutEffect, useState } from "react";
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { UserProfileFormFields } from "../../components/UserProfileFormFields";
+import { useI18n } from "../../i18n";
+import { TermsAcceptance } from "./TermsAcceptance";
+
+export function Form() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "register.ftl");
+    const { kcClsx } = useKcClsx();
+    const { msg, msgStr } = useI18n();
+
+    const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+    const [areTermsAccepted, setAreTermsAccepted] = useState(false);
+
+    useLayoutEffect(() => {
+        (window as any)["onSubmitRecaptcha"] = () => {
+            // @ts-expect-error
+            document.getElementById("kc-register-form").requestSubmit();
+        };
+
+        return () => {
+            delete (window as any)["onSubmitRecaptcha"];
+        };
+    }, []);
+
+    return (
+        <form
+            id="kc-register-form"
+            action={kcContext.url.registrationAction}
+            className="space-y-3"
+            method="post"
+        >
+            <UserProfileFormFields
+                onIsFormSubmittableValueChange={setIsFormSubmittable}
+            />
+            {kcContext.termsAcceptanceRequired && (
+                <TermsAcceptance
+                    messagesPerField={kcContext.messagesPerField}
+                    areTermsAccepted={areTermsAccepted}
+                    onAreTermsAcceptedValueChange={setAreTermsAccepted}
+                />
+            )}
+            {kcContext.recaptchaRequired &&
+                (kcContext.recaptchaVisible ||
+                    kcContext.recaptchaAction === undefined) && (
+                    <div className="form-group">
+                        <div className={kcClsx("kcInputWrapperClass")}>
+                            <div
+                                className="g-recaptcha"
+                                data-size="compact"
+                                data-sitekey={kcContext.recaptchaSiteKey}
+                                data-action={kcContext.recaptchaAction}
+                            ></div>
+                        </div>
+                    </div>
+                )}
+            <div className={kcClsx("kcFormGroupClass")}>
+                {kcContext.recaptchaRequired &&
+                !kcContext.recaptchaVisible &&
+                kcContext.recaptchaAction !== undefined ? (
+                    <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
+                        <button
+                            className={clsx(
+                                kcClsx(
+                                    "kcButtonClass",
+                                    "kcButtonPrimaryClass",
+                                    "kcButtonBlockClass",
+                                    "kcButtonLargeClass"
+                                ),
+                                "g-recaptcha"
+                            )}
+                            data-sitekey={kcContext.recaptchaSiteKey}
+                            data-callback="onSubmitRecaptcha"
+                            data-action={kcContext.recaptchaAction}
+                            type="submit"
+                        >
+                            {msg("doRegister")}
+                        </button>
+                    </div>
+                ) : (
+                    <Button
+                        disabled={
+                            !isFormSubmittable ||
+                            (kcContext.termsAcceptanceRequired && !areTermsAccepted)
+                        }
+                        className="w-full mt-2"
+                        name="register"
+                        type="submit"
+                    >
+                        {msgStr("doRegister")}
+                    </Button>
+                )}
+            </div>
+
+            <div className=" flex justify-end">
+                <Button variant="ghost">
+                    <a href={kcContext.url.loginUrl}>{msg("backToLogin")}</a>
+                </Button>
+            </div>
+        </form>
+    );
+}

package/keycloak-theme/login/pages/register/Page.stories.tsx

@@ -1,8 +1,4 @@
-import { KcContextExtension } from '@/login/KcContext';
-import { KcContext } from '@keycloakify/login-ui/core/KcContext/KcContext';
-import type { Attribute, PasswordPolicies, UserProfile } from "@keycloakify/login-ui/KcContext";
-import { DeepPartial } from '@keycloakify/login-ui/tools/DeepPartial';
-import { JSX } from 'react/jsx-runtime';
+import type { Attribute } from "@keycloakify/login-ui/KcContext";
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
 const { KcPageStory } = createKcPageStory({ pageId: "register.ftl" });
@@ -18,6 +14,27 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const Arabic: Story = {
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            }
+        }
+    }
+};
+export const French: Story = {
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr",
+                rtl: false
+            }
+        }
+    }
+};
+
 export const WithEmailAlreadyExists: Story = {
     args: {
         kcContext: {
@@ -42,7 +59,8 @@ export const WithEmailAlreadyExists: Story = {
                 // existsError() so they are the only ones that need to mock.
                 existsError: (fieldName: string, ...otherFieldNames: string[]) =>
                     [fieldName, ...otherFieldNames].includes("email"),
-                get: (fieldName: string) => (fieldName === "email" ? "Email already exists." : undefined)
+                get: (fieldName: string) =>
+                    fieldName === "email" ? "Email already exists." : undefined
             }
         }
     }
@@ -56,12 +74,15 @@ export const WithRestrictedToMITStudents: Story = {
                     email: {
                         validators: {
                             pattern: {
-                                pattern: "^[^@]+@([^.]+\\.)*((mit\\.edu)|(berkeley\\.edu))$",
-                                "error-message": "${profile.attributes.email.pattern.error}"
+                                pattern:
+                                    "^[^@]+@([^.]+\\.)*((mit\\.edu)|(berkeley\\.edu))$",
+                                "error-message":
+                                    "${profile.attributes.email.pattern.error}"
                             }
                         },
                         annotations: {
-                            inputHelperTextBefore: "${profile.attributes.email.inputHelperTextBefore}"
+                            inputHelperTextBefore:
+                                "${profile.attributes.email.inputHelperTextBefore}"
                         }
                     }
                 }
@@ -92,7 +113,8 @@ export const WithFavoritePet: Story = {
                             }
                         },
                         annotations: {
-                            inputOptionLabelsI18nPrefix: "profile.attributes.favoritePet.options"
+                            inputOptionLabelsI18nPrefix:
+                                "profile.attributes.favoritePet.options"
                         },
                         required: false,
                         readOnly: false
@@ -193,14 +215,15 @@ export const WithTermsAcceptance: Story = {
             termsAcceptanceRequired: true,
             "x-keycloakify": {
                 messages: {
-                    termsText: "<a href='https://example.com/terms'>Service Terms of Use</a>"
+                    termsText:
+                        "<a href='https://example.com/terms'>Service Terms of Use</a>"
                 }
             }
         }
     }
 };
 export const WithTermsNotAccepted: Story = {
-    render: (args: JSX.IntrinsicAttributes & { kcContext?: DeepPartial<KcContext.Common & { pageId: "register.ftl"; profile: UserProfile; passwordPolicies?: PasswordPolicies; url: { registrationAction: string; }; passwordRequired: boolean; recaptchaRequired?: boolean; recaptchaVisible?: boolean; recaptchaSiteKey?: string; recaptchaAction?: string; termsAcceptanceRequired?: boolean; messageHeader?: string; social?: KcContext.Login["social"]; } & KcContextExtension> | undefined; }) => (
+    render: args => (
         <KcPageStory
             {...args}
             kcContext={{
@@ -208,7 +231,9 @@ export const WithTermsNotAccepted: Story = {
                 messagesPerField: {
                     existsError: (fieldName: string) => fieldName === "termsAccepted",
                     get: (fieldName: string) =>
-                        fieldName === "termsAccepted" ? "You must accept the terms." : undefined
+                        fieldName === "termsAccepted"
+                            ? "You must accept the terms."
+                            : undefined
                 }
             }}
         />
@@ -224,7 +249,8 @@ export const WithFieldErrors: Story = {
                 }
             },
             messagesPerField: {
-                existsError: (fieldName: string) => ["username", "email"].includes(fieldName),
+                existsError: (fieldName: string) =>
+                    ["username", "email"].includes(fieldName),
                 get: (fieldName: string) => {
                     if (fieldName === "username") return "Username is required.";
                     if (fieldName === "email") return "Invalid email format.";

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

@@ -1,26 +1,26 @@
-import { assert } from "tsafe/assert";
-import { useKcContext } from "../../KcContext";
-import { Template } from "../../components/Template";
-import { useI18n } from "../../i18n";
-import { Form } from "./Form";
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "register.ftl");
-
-    const { msg, advancedMsg } = useI18n();
-
-    return (
-        <Template
-            headerNode={
-                kcContext.messageHeader !== undefined
-                    ? advancedMsg(kcContext.messageHeader)
-                    : msg("registerTitle")
-            }
-            displayMessage={kcContext.messagesPerField.exists("global")}
-            displayRequiredFields
-        >
-            <Form />
-        </Template>
-    );
-}
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { Template } from "../../components/Template";
+import { useI18n } from "../../i18n";
+import { Form } from "./Form";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "register.ftl");
+
+    const { msg, advancedMsg } = useI18n();
+
+    return (
+        <Template
+            headerNode={
+                kcContext.messageHeader !== undefined
+                    ? advancedMsg(kcContext.messageHeader)
+                    : msg("registerTitle")
+            }
+            displayMessage={kcContext.messagesPerField.exists("global")}
+            displayRequiredFields
+        >
+            <Form />
+        </Template>
+    );
+}