@oussemasahbeni/keycloakify-login-shadcn 250004.0.2 → 250004.0.7

package/keycloak-theme/login/pages/select-organization/Page.stories.tsx

@@ -11,8 +11,27 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    render: () => <KcPageStory />
+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
+            }
+        }
+    }
 };
 
 /**
@@ -22,25 +41,23 @@ export const Default: Story = {
  * - Key Aspect: Ensures that when there are more than 3 organizations, they are displayed in a grid.
  */
 export const WithManyOrganizations: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                user: {
-                    organizations: [
-                        { alias: "org1", name: "Organization 1" },
-                        { alias: "org2", name: "Organization 2" },
-                        { alias: "org3", name: "Organization 3" },
-                        { alias: "org4", name: "Organization 4" },
-                        { alias: "org5", name: "Organization 5" },
-                        { alias: "org6", name: "Organization 6" }
-                    ]
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            user: {
+                organizations: [
+                    { alias: "org1", name: "Organization 1" },
+                    { alias: "org2", name: "Organization 2" },
+                    { alias: "org3", name: "Organization 3" },
+                    { alias: "org4", name: "Organization 4" },
+                    { alias: "org5", name: "Organization 5" },
+                    { alias: "org6", name: "Organization 6" }
+                ]
+            }
+        }
+    }
 };
 
 /**
@@ -50,22 +67,20 @@ export const WithManyOrganizations: Story = {
  * - Key Aspect: Ensures that when there are 3 or fewer organizations, they are displayed in a list.
  */
 export const WithFewOrganizations: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                user: {
-                    organizations: [
-                        { alias: "org1", name: "Organization 1" },
-                        { alias: "org2", name: "Organization 2" },
-                        { alias: "org3", name: "Organization 3" }
-                    ]
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            user: {
+                organizations: [
+                    { alias: "org1", name: "Organization 1" },
+                    { alias: "org2", name: "Organization 2" },
+                    { alias: "org3", name: "Organization 3" }
+                ]
+            }
+        }
+    }
 };
 
 /**
@@ -75,16 +90,14 @@ export const WithFewOrganizations: Story = {
  * - Key Aspect: Ensures that a single organization is displayed correctly.
  */
 export const WithSingleOrganization: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                user: {
-                    organizations: [{ alias: "org1", name: "My Organization" }]
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            user: {
+                organizations: [{ alias: "org1", name: "My Organization" }]
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/select-organization/Page.tsx

@@ -1,126 +1,126 @@
-import { Button } from "@/components/ui/button";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue
-} from "@/components/ui/select";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { Building2 } from "lucide-react";
-import { MouseEvent, useRef, useState } from "react";
-import { assert } from 'tsafe/assert';
-import { Template } from "../../components/Template";
-
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "select-organization.ftl");
-
-    const { msg } = useI18n();
-
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    const [selectedOrg, setSelectedOrg] = useState<string>("");
-    const formRef = useRef<HTMLFormElement>(null);
-    const organizationInputRef = useRef<HTMLInputElement>(null);
-
-    const onOrganizationClick =
-        (organizationAlias: string) => (event: MouseEvent<HTMLButtonElement>) => {
-            event.preventDefault();
-
-            if (!organizationInputRef.current || !formRef.current) {
-                return;
-            }
-
-            organizationInputRef.current.value = organizationAlias;
-            setIsSubmitting(true);
-
-            if (typeof formRef.current.requestSubmit === "function") {
-                formRef.current.requestSubmit();
-                return;
-            }
-
-            formRef.current.submit();
-        };
-
-    const onSelectChange = (value: string) => {
-        setSelectedOrg(value);
-        if (!organizationInputRef.current || !formRef.current) {
-            return;
-        }
-
-        organizationInputRef.current.value = value;
-        setIsSubmitting(true);
-
-        if (typeof formRef.current.requestSubmit === "function") {
-            formRef.current.requestSubmit();
-            return;
-        }
-
-        formRef.current.submit();
-    };
-
-    const organizations = kcContext.user.organizations ?? [];
-    const useSelect = organizations.length > 3;
-
-    return (
-        <Template
-            headerNode={msg("organization.selectTitle")}
-        >
-            <form ref={formRef} action={kcContext.url.loginAction} method="post">
-                <div id="kc-user-organizations" className="space-y-2">
-                    <h2 className="text-md font-semibold">
-                        {msg("organization.select")}
-                    </h2>
-                    {useSelect ? (
-                        <div className="space-y-2">
-                            <Select
-                                value={selectedOrg}
-                                onValueChange={onSelectChange}
-                                disabled={isSubmitting}
-                            >
-                                <SelectTrigger className="w-full">
-                                    <SelectValue
-                                        placeholder={msg("organization.pickPlaceholder")}
-                                    />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {organizations.map(({ alias, name }) => (
-                                        <SelectItem key={alias} value={alias}>
-                                            <div className="flex items-center gap-2">
-                                                <Building2 className="w-4 h-4 text-muted-foreground" />
-                                                {name ?? alias}
-                                            </div>
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        </div>
-                    ) : (
-                        <ul className="space-y-3">
-                            {organizations.map(({ alias, name }) => (
-                                <li key={alias}>
-                                    <Button
-                                        id={`organization-${alias}`}
-                                        type="button"
-                                        variant="outline"
-                                        onClick={onOrganizationClick(alias)}
-                                        disabled={isSubmitting}
-                                        className="w-full h-auto p-4 flex items-center gap-3 justify-start hover:bg-accent hover:border-primary transition-colors"
-                                    >
-                                        <Building2 className="w-5 h-5 text-muted-foreground shrink-0" />
-                                        <span className="font-medium text-sm">
-                                            {name ?? alias}
-                                        </span>
-                                    </Button>
-                                </li>
-                            ))}
-                        </ul>
-                    )}
-                </div>
-                <input ref={organizationInputRef} type="hidden" name="kc.org" />
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@/components/ui/select";
+import { useI18n } from '@/login/i18n';
+import { useKcContext } from '@/login/KcContext';
+import { Building2 } from "lucide-react";
+import { MouseEvent, useRef, useState } from "react";
+import { assert } from 'tsafe/assert';
+import { Template } from "../../components/Template";
+
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "select-organization.ftl");
+
+    const { msg } = useI18n();
+
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [selectedOrg, setSelectedOrg] = useState<string>("");
+    const formRef = useRef<HTMLFormElement>(null);
+    const organizationInputRef = useRef<HTMLInputElement>(null);
+
+    const onOrganizationClick =
+        (organizationAlias: string) => (event: MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+
+            if (!organizationInputRef.current || !formRef.current) {
+                return;
+            }
+
+            organizationInputRef.current.value = organizationAlias;
+            setIsSubmitting(true);
+
+            if (typeof formRef.current.requestSubmit === "function") {
+                formRef.current.requestSubmit();
+                return;
+            }
+
+            formRef.current.submit();
+        };
+
+    const onSelectChange = (value: string) => {
+        setSelectedOrg(value);
+        if (!organizationInputRef.current || !formRef.current) {
+            return;
+        }
+
+        organizationInputRef.current.value = value;
+        setIsSubmitting(true);
+
+        if (typeof formRef.current.requestSubmit === "function") {
+            formRef.current.requestSubmit();
+            return;
+        }
+
+        formRef.current.submit();
+    };
+
+    const organizations = kcContext.user.organizations ?? [];
+    const useSelect = organizations.length > 3;
+
+    return (
+        <Template
+            headerNode={msg("organization.selectTitle")}
+        >
+            <form ref={formRef} action={kcContext.url.loginAction} method="post">
+                <div id="kc-user-organizations" className="space-y-2">
+                    <h2 className="text-md font-semibold">
+                        {msg("organization.select")}
+                    </h2>
+                    {useSelect ? (
+                        <div className="space-y-2">
+                            <Select
+                                value={selectedOrg}
+                                onValueChange={onSelectChange}
+                                disabled={isSubmitting}
+                            >
+                                <SelectTrigger className="w-full">
+                                    <SelectValue
+                                        placeholder={msg("organization.pickPlaceholder")}
+                                    />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {organizations.map(({ alias, name }) => (
+                                        <SelectItem key={alias} value={alias}>
+                                            <div className="flex items-center gap-2">
+                                                <Building2 className="w-4 h-4 text-muted-foreground" />
+                                                {name ?? alias}
+                                            </div>
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                    ) : (
+                        <ul className="space-y-3">
+                            {organizations.map(({ alias, name }) => (
+                                <li key={alias}>
+                                    <Button
+                                        id={`organization-${alias}`}
+                                        type="button"
+                                        variant="outline"
+                                        onClick={onOrganizationClick(alias)}
+                                        disabled={isSubmitting}
+                                        className="w-full h-auto p-4 flex items-center gap-3 justify-start hover:bg-accent hover:border-primary transition-colors"
+                                    >
+                                        <Building2 className="w-5 h-5 text-muted-foreground shrink-0" />
+                                        <span className="font-medium text-sm">
+                                            {name ?? alias}
+                                        </span>
+                                    </Button>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+                <input ref={organizationInputRef} type="hidden" name="kc.org" />
+            </form>
+        </Template>
+    );
+}

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

@@ -23,6 +23,21 @@ export const Default: Story = {
     }
 };
 
+export const Arabic: Story = {
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            },
+            "x-keycloakify": {
+                messages: {
+                    termsText: "<p>شروطي باللغة <strong>العربية</strong></p>"
+                }
+            }
+        }
+    }
+};
 export const French: Story = {
     args: {
         kcContext: {

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

@@ -1,51 +1,51 @@
-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

@@ -12,32 +12,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 +41,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
+        }
+    }
 };