@oussemasahbeni/keycloakify-login-shadcn 250004.0.2 → 250004.0.7

package/keycloak-theme/login/pages/login-otp/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,29 +41,27 @@ export const French: Story = {
  * - Key Aspect: Ensures that multiple OTP credentials are listed and selectable, and the correct credential is selected by default.
  */
 export const MultipleOtpCredentials: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                otpLogin: {
-                    userOtpCredentials: [
-                        { id: "credential1", userLabel: "Device 1" },
-                        { id: "credential2", userLabel: "Device 2" },
-                        { id: "credential3", userLabel: "Device 3" },
-                        { id: "credential4", userLabel: "Device 4" },
-                        { id: "credential5", userLabel: "Device 5" },
-                        { id: "credential6", userLabel: "Device 6" }
-                    ],
-                    selectedCredentialId: "credential1"
-                },
-                url: {
-                    loginAction: "/login-action"
-                },
-                messagesPerField: {
-                    existsError: () => false
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            otpLogin: {
+                userOtpCredentials: [
+                    { id: "credential1", userLabel: "Device 1" },
+                    { id: "credential2", userLabel: "Device 2" },
+                    { id: "credential3", userLabel: "Device 3" },
+                    { id: "credential4", userLabel: "Device 4" },
+                    { id: "credential5", userLabel: "Device 5" },
+                    { id: "credential6", userLabel: "Device 6" }
+                ],
+                selectedCredentialId: "credential1"
+            },
+            url: {
+                loginAction: "/login-action"
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
 };
 
 /**
@@ -79,22 +71,20 @@ export const MultipleOtpCredentials: Story = {
  * - Key Aspect: Ensures that the OTP input displays error messages correctly and the error is visible.
  */
 export const WithOtpError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                otpLogin: {
-                    userOtpCredentials: []
-                },
-                url: {
-                    loginAction: "/login-action"
-                },
-                messagesPerField: {
-                    existsError: (field: string) => field === "totp",
-                    get: () => "Invalid OTP code"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            otpLogin: {
+                userOtpCredentials: []
+            },
+            url: {
+                loginAction: "/login-action"
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === "totp",
+                get: () => "Invalid OTP code"
+            }
+        }
+    }
 };
 
 /**
@@ -104,21 +94,19 @@ export const WithOtpError: Story = {
  * - Key Aspect: Ensures that the component handles cases where there are no user OTP credentials, and the user is only prompted for the OTP code.
  */
 export const NoOtpCredentials: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                otpLogin: {
-                    userOtpCredentials: []
-                },
-                url: {
-                    loginAction: "/login-action"
-                },
-                messagesPerField: {
-                    existsError: () => false
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            otpLogin: {
+                userOtpCredentials: []
+            },
+            url: {
+                loginAction: "/login-action"
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
 };
 
 /**
@@ -128,24 +116,22 @@ export const NoOtpCredentials: Story = {
  * - Key Aspect: Ensures that the component can handle both multiple OTP credentials and display an error message simultaneously.
  */
 export const WithErrorAndMultipleOtpCredentials: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                otpLogin: {
-                    userOtpCredentials: [
-                        { id: "credential1", userLabel: "Device 1" },
-                        { id: "credential2", userLabel: "Device 2" }
-                    ],
-                    selectedCredentialId: "credential1"
-                },
-                url: {
-                    loginAction: "/login-action"
-                },
-                messagesPerField: {
-                    existsError: (field: string) => field === "totp",
-                    get: () => "Invalid OTP code"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            otpLogin: {
+                userOtpCredentials: [
+                    { id: "credential1", userLabel: "Device 1" },
+                    { id: "credential2", userLabel: "Device 2" }
+                ],
+                selectedCredentialId: "credential1"
+            },
+            url: {
+                loginAction: "/login-action"
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === "totp",
+                get: () => "Invalid OTP code"
+            }
+        }
+    }
 };

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

@@ -1,108 +1,108 @@
-import { Button } from "@/components/ui/button";
-import { FieldError } from '@/components/ui/field';
-import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
-import { kcSanitize } from "keycloakify/lib/kcSanitize";
-import { useState } from 'react';
-import { MdOutlineDevices } from "react-icons/md";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-export function Page() {
-
-    const { kcContext } = useKcContext();
-
-    assert(kcContext.pageId === "login-otp.ftl");
-
-    const { msg, msgStr } = useI18n();
-
-    const [isSubmitting, setIsSubmitting] = useState(false);
-    return (
-        <Template
-            displayMessage={!kcContext.messagesPerField.existsError("totp")}
-            headerNode={msg("doLogIn")}
-        >
-            <form
-                id="kc-otp-login-form"
-                className="space-y-6"
-                action={kcContext.url.loginAction}
-                onSubmit={() => {
-                    setIsSubmitting(true);
-                    return true;
-                }}
-                method="post"
-            >
-                {kcContext.otpLogin.userOtpCredentials.length > 1 && (
-                    <div className="space-y-3">
-                        <RadioGroup
-                            name="selectedCredentialId"
-                            defaultValue={kcContext.otpLogin.selectedCredentialId}
-                            className="space-y-2"
-                        >
-                            {kcContext.otpLogin.userOtpCredentials.map((otpCredential, index) => (
-                                <div
-                                    key={otpCredential.id}
-                                    className="flex items-center space-x-3 p-3 border rounded-lg"
-                                >
-                                    <RadioGroupItem
-                                        value={otpCredential.id}
-                                        id={`kc-otp-credential-${index}`}
-                                    />
-                                    <Label
-                                        htmlFor={`kc-otp-credential-${index}`}
-                                        className="flex items-center space-x-2 cursor-pointer flex-1"
-                                    >
-                                        <MdOutlineDevices />
-                                        <span className="text-sm font-medium">
-                                            {otpCredential.userLabel}
-                                        </span>
-                                    </Label>
-                                </div>
-                            ))}
-                        </RadioGroup>
-                    </div>
-                )}
-
-                <div className="space-y-2">
-                    <Label htmlFor="otp" className="text-sm font-medium  block">
-                        {msg("loginOtpOneTime")}
-                    </Label>
-                    <div className="flex w-72 ">
-                        <InputOTP
-                            maxLength={6}
-                            pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
-                            name="otp"
-                            autoFocus
-                        >
-                            <InputOTPGroup>
-                                <InputOTPSlot index={0} className="h-12 w-12 text-lg" />
-                                <InputOTPSlot index={1} className="h-12 w-12 text-lg" />
-                                <InputOTPSlot index={2} className="h-12 w-12 text-lg" />
-                                <InputOTPSlot index={3} className="h-12 w-12 text-lg" />
-                                <InputOTPSlot index={4} className="h-12 w-12 text-lg" />
-                                <InputOTPSlot index={5} className="h-12 w-12 text-lg" />
-                            </InputOTPGroup>
-                        </InputOTP>
-                    </div>
-                    {kcContext.messagesPerField.existsError("totp") && (
-                        <FieldError id="input-error-otp-code">
-                            <span
-                                dangerouslySetInnerHTML={{
-                                    __html: kcSanitize(kcContext.messagesPerField.get("totp"))
-                                }}
-                            />
-                        </FieldError>
-                    )}
-                </div>
-
-                <Button className="w-full" name="login" id="kc-login" type="submit" disabled={isSubmitting}>
-                    {msgStr("doLogIn")}
-                </Button>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { FieldError } from '@/components/ui/field';
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useI18n } from '@/login/i18n';
+import { useKcContext } from '@/login/KcContext';
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
+import { useState } from 'react';
+import { MdOutlineDevices } from "react-icons/md";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+export function Page() {
+
+    const { kcContext } = useKcContext();
+
+    assert(kcContext.pageId === "login-otp.ftl");
+
+    const { msg, msgStr } = useI18n();
+
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    return (
+        <Template
+            displayMessage={!kcContext.messagesPerField.existsError("totp")}
+            headerNode={msg("doLogIn")}
+        >
+            <form
+                id="kc-otp-login-form"
+                className="space-y-6"
+                action={kcContext.url.loginAction}
+                onSubmit={() => {
+                    setIsSubmitting(true);
+                    return true;
+                }}
+                method="post"
+            >
+                {kcContext.otpLogin.userOtpCredentials.length > 1 && (
+                    <div className="space-y-3">
+                        <RadioGroup
+                            name="selectedCredentialId"
+                            defaultValue={kcContext.otpLogin.selectedCredentialId}
+                            className="space-y-2"
+                        >
+                            {kcContext.otpLogin.userOtpCredentials.map((otpCredential, index) => (
+                                <div
+                                    key={otpCredential.id}
+                                    className="flex items-center space-x-3 p-3 border rounded-lg"
+                                >
+                                    <RadioGroupItem
+                                        value={otpCredential.id}
+                                        id={`kc-otp-credential-${index}`}
+                                    />
+                                    <Label
+                                        htmlFor={`kc-otp-credential-${index}`}
+                                        className="flex items-center space-x-2 cursor-pointer flex-1"
+                                    >
+                                        <MdOutlineDevices />
+                                        <span className="text-sm font-medium">
+                                            {otpCredential.userLabel}
+                                        </span>
+                                    </Label>
+                                </div>
+                            ))}
+                        </RadioGroup>
+                    </div>
+                )}
+
+                <div className="space-y-2">
+                    <Label htmlFor="otp" className="text-sm font-medium  block">
+                        {msg("loginOtpOneTime")}
+                    </Label>
+                    <div className="flex w-72 ">
+                        <InputOTP
+                            maxLength={6}
+                            pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+                            name="otp"
+                            autoFocus
+                        >
+                            <InputOTPGroup>
+                                <InputOTPSlot index={0} className="h-12 w-12 text-lg" />
+                                <InputOTPSlot index={1} className="h-12 w-12 text-lg" />
+                                <InputOTPSlot index={2} className="h-12 w-12 text-lg" />
+                                <InputOTPSlot index={3} className="h-12 w-12 text-lg" />
+                                <InputOTPSlot index={4} className="h-12 w-12 text-lg" />
+                                <InputOTPSlot index={5} className="h-12 w-12 text-lg" />
+                            </InputOTPGroup>
+                        </InputOTP>
+                    </div>
+                    {kcContext.messagesPerField.existsError("totp") && (
+                        <FieldError id="input-error-otp-code">
+                            <span
+                                dangerouslySetInnerHTML={{
+                                    __html: kcSanitize(kcContext.messagesPerField.get("totp"))
+                                }}
+                            />
+                        </FieldError>
+                    )}
+                </div>
+
+                <Button className="w-full" name="login" id="kc-login" type="submit" disabled={isSubmitting}>
+                    {msgStr("doLogIn")}
+                </Button>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-otp/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-page-expired/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,18 +41,16 @@ export const French: Story = {
  * - Key Aspect: Ensures that error messages are displayed correctly in addition to the page expiration notice.
  */
 export const WithErrorMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginRestartFlowUrl: "/mock-restart-flow",
-                    loginAction: "/mock-continue-login"
-                },
-                message: {
-                    type: "error",
-                    summary: "An error occurred while processing your session."
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginRestartFlowUrl: "/mock-restart-flow",
+                loginAction: "/mock-continue-login"
+            },
+            message: {
+                type: "error",
+                summary: "An error occurred while processing your session."
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/login-page-expired/Page.tsx

@@ -1,47 +1,47 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
-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 === "login-page-expired.ftl");
-
-    const { msg } = useI18n();
-
-    return (
-        <Template
-            headerNode={msg("pageExpiredTitle")}
-        >
-            <Alert variant="warning" className="my-6">
-                <AlertDescription>
-                    <div className="space-y-3 text-sm leading-relaxed">
-                        <p>
-                            {msg("pageExpiredMsg1")}{" "}
-                            <a
-                                id="loginRestartLink"
-                                href={kcContext.url.loginRestartFlowUrl}
-                                className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-2 font-medium"
-                            >
-                                {msg("doClickHere")}
-                            </a>
-                            .
-                        </p>
-                        <p>
-                            {msg("pageExpiredMsg2")}{" "}
-                            <a
-                                id="loginContinueLink"
-                                href={kcContext.url.loginAction}
-                                className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-2 font-medium"
-                            >
-                                {msg("doClickHere")}
-                            </a>
-                            .
-                        </p>
-                    </div>
-                </AlertDescription>
-            </Alert>
-        </Template>
-    );
-}
+import { Alert, AlertDescription } from "@/components/ui/alert";
+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 === "login-page-expired.ftl");
+
+    const { msg } = useI18n();
+
+    return (
+        <Template
+            headerNode={msg("pageExpiredTitle")}
+        >
+            <Alert variant="warning" className="my-6">
+                <AlertDescription>
+                    <div className="space-y-3 text-sm leading-relaxed">
+                        <p>
+                            {msg("pageExpiredMsg1")}{" "}
+                            <a
+                                id="loginRestartLink"
+                                href={kcContext.url.loginRestartFlowUrl}
+                                className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-2 font-medium"
+                            >
+                                {msg("doClickHere")}
+                            </a>
+                            .
+                        </p>
+                        <p>
+                            {msg("pageExpiredMsg2")}{" "}
+                            <a
+                                id="loginContinueLink"
+                                href={kcContext.url.loginAction}
+                                className="text-primary dark:text-white hover:text-primary/80 underline underline-offset-2 font-medium"
+                            >
+                                {msg("doClickHere")}
+                            </a>
+                            .
+                        </p>
+                    </div>
+                </AlertDescription>
+            </Alert>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-page-expired/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-passkeys-conditional-authenticate/Page.stories.tsx

@@ -14,3 +14,23 @@ export default meta;
 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"
+            }
+        }
+    }
+};