@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

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

@@ -1,100 +1,97 @@
-import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { ChevronRight, Fingerprint, Globe, KeyRound, Shield } from "lucide-react";
-import { FaKey } from "react-icons/fa";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-const getAuthenticatorIcon = (authSelection: {
-    displayName: string;
-    iconCssClass?: string;
-}) => {
-    const displayName = authSelection.displayName.toLowerCase();
-    const iconClass = authSelection.iconCssClass?.toLowerCase() || "";
-
-    if (
-        displayName.includes("webauthn") ||
-        displayName.includes("passwordless") ||
-        iconClass.includes("webauthn") ||
-        displayName.includes("passkey")
-    ) {
-        return <Fingerprint className="w-5 h-5" />;
-    }
-
-    if (
-        displayName.includes("otp") ||
-        displayName.includes("totp") ||
-        displayName.includes("authenticator")
-    ) {
-        return <Shield className="w-5 h-5" />;
-    }
-
-    if (
-        displayName.includes("identity-provider") ||
-        displayName.includes("idp") ||
-        displayName.includes("sso") ||
-        iconClass.includes("identityprovider")
-    ) {
-        return <Globe className="w-5 h-5" />;
-    }
-
-    if (
-        displayName.includes("password") ||
-        displayName.includes("username") ||
-        iconClass.includes("password")
-    ) {
-        return <KeyRound className="w-5 h-5" />;
-    }
-
-    return <FaKey className="w-5 h-5" />;
-};
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "select-authenticator.ftl");
-
-    const { url, auth } = kcContext;
-
-    const { msg, advancedMsg } = useI18n();
-    return (
-        <Template
-            displayInfo={false}
-            headerNode={msg("loginChooseAuthenticator")}
-        >
-            <form
-                id="kc-select-credential-form"
-                className="space-y-3"
-                action={url.loginAction}
-                method="post"
-            >
-                <div className="space-y-2">
-                    {auth.authenticationSelections.map((authenticationSelection, i) => (
-                        <Button
-                            key={i}
-                            variant="outline"
-                            className="w-full h-auto p-4 flex items-center justify-between text-left hover:bg-accent"
-                            type="submit"
-                            name="authenticationExecution"
-                            value={authenticationSelection.authExecId}
-                        >
-                            <div className="flex items-center gap-3 flex-1">
-                                {getAuthenticatorIcon(authenticationSelection)}
-
-                                <div className="flex-1 min-w-0">
-                                    <div className="font-medium text-sm">
-                                        {advancedMsg(authenticationSelection.displayName)}
-                                    </div>
-                                    <div className="text-xs text-muted-foreground mt-1 whitespace-normal">
-                                        {advancedMsg(authenticationSelection.helpText)}
-                                    </div>
-                                </div>
-                            </div>
-                            <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
-                        </Button>
-                    ))}
-                </div>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { ChevronRight, Fingerprint, Globe, KeyRound, Shield } from "lucide-react";
+import { FaKey } from "react-icons/fa";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+const getAuthenticatorIcon = (authSelection: {
+    displayName: string;
+    iconCssClass?: string;
+}) => {
+    const displayName = authSelection.displayName.toLowerCase();
+    const iconClass = authSelection.iconCssClass?.toLowerCase() || "";
+
+    if (
+        displayName.includes("webauthn") ||
+        displayName.includes("passwordless") ||
+        iconClass.includes("webauthn") ||
+        displayName.includes("passkey")
+    ) {
+        return <Fingerprint className="w-5 h-5" />;
+    }
+
+    if (
+        displayName.includes("otp") ||
+        displayName.includes("totp") ||
+        displayName.includes("authenticator")
+    ) {
+        return <Shield className="w-5 h-5" />;
+    }
+
+    if (
+        displayName.includes("identity-provider") ||
+        displayName.includes("idp") ||
+        displayName.includes("sso") ||
+        iconClass.includes("identityprovider")
+    ) {
+        return <Globe className="w-5 h-5" />;
+    }
+
+    if (
+        displayName.includes("password") ||
+        displayName.includes("username") ||
+        iconClass.includes("password")
+    ) {
+        return <KeyRound className="w-5 h-5" />;
+    }
+
+    return <FaKey className="w-5 h-5" />;
+};
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "select-authenticator.ftl");
+
+    const { url, auth } = kcContext;
+
+    const { msg, advancedMsg } = useI18n();
+    return (
+        <Template displayInfo={false} headerNode={msg("loginChooseAuthenticator")}>
+            <form
+                id="kc-select-credential-form"
+                className="space-y-3"
+                action={url.loginAction}
+                method="post"
+            >
+                <div className="space-y-2">
+                    {auth.authenticationSelections.map((authenticationSelection, i) => (
+                        <Button
+                            key={i}
+                            variant="outline"
+                            className="w-full h-auto p-4 flex items-center justify-between text-left hover:bg-accent"
+                            type="submit"
+                            name="authenticationExecution"
+                            value={authenticationSelection.authExecId}
+                        >
+                            <div className="flex items-center gap-3 flex-1">
+                                {getAuthenticatorIcon(authenticationSelection)}
+
+                                <div className="flex-1 min-w-0">
+                                    <div className="font-medium text-sm">
+                                        {advancedMsg(authenticationSelection.displayName)}
+                                    </div>
+                                    <div className="text-xs text-muted-foreground mt-1 whitespace-normal">
+                                        {advancedMsg(authenticationSelection.helpText)}
+                                    </div>
+                                </div>
+                            </div>
+                            <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+                        </Button>
+                    ))}
+                </div>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/select-authenticator/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/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,123 @@
-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 { type 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: {