@oussemasahbeni/keycloakify-login-shadcn 250004.0.2 → 250004.0.7

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

@@ -1,53 +1,53 @@
-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,106 @@
-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: {
@@ -200,7 +217,7 @@ export const WithTermsAcceptance: Story = {
     }
 };
 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={{

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>
+    );
+}

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

@@ -1,56 +1,56 @@
-import { Checkbox } from '@/components/ui/checkbox';
-import { FieldError } from '@/components/ui/field';
-import { Label } from '@/components/ui/label';
-import { KcContext } from '@/kc.gen';
-import { useI18n } from '@/login/i18n';
-import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
-
-export function TermsAcceptance(props: {
-    messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
-    areTermsAccepted: boolean;
-    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
-}) {
-    const { messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } =
-        props;
-
-    const { msg } = useI18n();
-
-    return (
-        <div className="space-y-4">
-            <div className="p-4 bg-muted/50 rounded-lg space-y-2">
-                <h3 className="font-medium text-sm">{msg("termsTitle")}</h3>
-                <div className="text-sm text-muted-foreground">{msg("termsText")}</div>
-            </div>
-
-            <div className="space-y-2">
-                <div className="flex items-center space-x-2">
-                    <Checkbox
-                        id="termsAccepted"
-                        name="termsAccepted"
-                        checked={areTermsAccepted}
-                        onCheckedChange={checked =>
-                            onAreTermsAcceptedValueChange(!!checked)
-                        }
-                        aria-invalid={messagesPerField.existsError("termsAccepted")}
-                    />
-                    <Label
-                        htmlFor="termsAccepted"
-                        className="text-sm font-medium cursor-pointer"
-                    >
-                        {msg("acceptTerms")}
-                    </Label>
-                </div>
-
-                {messagesPerField.existsError("termsAccepted") && (
-                    <FieldError id="input-error-terms-accepted">
-                        <span
-                            dangerouslySetInnerHTML={{
-                                __html: kcSanitize(messagesPerField.get("termsAccepted"))
-                            }}
-                        />
-                    </FieldError>
-                )}
-            </div>
-        </div>
-    );
-}
+import { Checkbox } from '@/components/ui/checkbox';
+import { FieldError } from '@/components/ui/field';
+import { Label } from '@/components/ui/label';
+import { useI18n } from '@/login/i18n';
+import type { KcContext } from '@/login/KcContext';
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+
+export function TermsAcceptance(props: {
+    messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
+    areTermsAccepted: boolean;
+    onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
+}) {
+    const { messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } =
+        props;
+
+    const { msg } = useI18n();
+
+    return (
+        <div className="space-y-4">
+            <div className="p-4 bg-muted/50 rounded-lg space-y-2">
+                <h3 className="font-medium text-sm">{msg("termsTitle")}</h3>
+                <div className="text-sm text-muted-foreground">{msg("termsText")}</div>
+            </div>
+
+            <div className="space-y-2">
+                <div className="flex items-center space-x-2">
+                    <Checkbox
+                        id="termsAccepted"
+                        name="termsAccepted"
+                        checked={areTermsAccepted}
+                        onCheckedChange={checked =>
+                            onAreTermsAcceptedValueChange(!!checked)
+                        }
+                        aria-invalid={messagesPerField.existsError("termsAccepted")}
+                    />
+                    <Label
+                        htmlFor="termsAccepted"
+                        className="text-sm font-medium cursor-pointer"
+                    >
+                        {msg("acceptTerms")}
+                    </Label>
+                </div>
+
+                {messagesPerField.existsError("termsAccepted") && (
+                    <FieldError id="input-error-terms-accepted">
+                        <span
+                            dangerouslySetInnerHTML={{
+                                __html: kcSanitize(messagesPerField.get("termsAccepted"))
+                            }}
+                        />
+                    </FieldError>
+                )}
+            </div>
+        </div>
+    );
+}

package/keycloak-theme/login/pages/register/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/saml-post-form/Page.stories.tsx

@@ -12,30 +12,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"
+            }
+        }
+    }
 };