@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.7

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

@@ -11,71 +11,70 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    render: () => <KcPageStory />
-};
+export const Default: Story = {};
 
 export const WithPasswordError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                realm: {
-                    resetPasswordAllowed: true
-                },
-                url: {
-                    loginAction: "/mock-login",
-                    loginResetCredentialsUrl: "/mock-reset-password"
-                },
-                messagesPerField: {
-                    existsError: (field: string) => field === "password",
-                    get: () => "Invalid password"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            realm: {
+                resetPasswordAllowed: true
+            },
+            url: {
+                loginAction: "/mock-login",
+                loginResetCredentialsUrl: "/mock-reset-password"
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === "password",
+                get: () => "Invalid password"
+            }
+        }
+    }
 };
 
 export const Arabic: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "ar",
-                    rtl: true
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            }
+        }
+    }
+};
+export const French: Story = {
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr"
+            }
+        }
+    }
 };
 
 export const WithWebauthn: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                enableWebAuthnConditionalUI: true
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            enableWebAuthnConditionalUI: true
+        }
+    }
 };
 
 export const WithoutResetPasswordOption: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                realm: {
-                    resetPasswordAllowed: false
-                },
-                url: {
-                    loginAction: "/mock-login",
-                    loginResetCredentialsUrl: "/mock-reset-password"
-                },
-                messagesPerField: {
-                    existsError: () => false
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            realm: {
+                resetPasswordAllowed: false
+            },
+            url: {
+                loginAction: "/mock-login",
+                loginResetCredentialsUrl: "/mock-reset-password"
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
 };

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

@@ -1,149 +1,149 @@
-import { Button } from "@/components/ui/button";
-import { Field, FieldError, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { Label } from '@/components/ui/label';
-import { PasswordWrapper } from '@/login/components/PasswordWrapper';
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
-import { kcSanitize } from "keycloakify/lib/kcSanitize";
-import { Fingerprint } from "lucide-react";
-import { useState } from "react";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-import { useScript } from './useScript';
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-password.ftl");
-
-    const { kcClsx } = useKcClsx();
-
-    const { msg, msgStr } = useI18n();
-
-    const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
-
-    const webAuthnButtonId = "authenticateWebAuthnButton";
-
-    useScript({ webAuthnButtonId });
-
-    return (
-        <Template
-            headerNode={msg("doLogIn")}
-            displayMessage={!kcContext.messagesPerField.existsError("password")}
-        >
-            <form
-                id="kc-form-login"
-                onSubmit={() => {
-                    setIsLoginButtonDisabled(true);
-                    return true;
-                }}
-                action={kcContext.url.loginAction}
-                className="flex flex-col gap-4"
-                method="post"
-            >
-                <Field>
-                    <FieldLabel htmlFor="password">{msg("password")}</FieldLabel>
-                    <PasswordWrapper
-                        passwordInputId="password"
-                    >
-                        <Input
-                            tabIndex={2}
-                            type="password"
-                            id="password"
-                            name="password"
-                            autoComplete="current-password"
-                            aria-invalid={kcContext.messagesPerField.existsError("password")}
-                        />
-                    </PasswordWrapper>
-                    {kcContext.messagesPerField.existsError("password") && (
-                        <FieldError>
-                            <span
-                                id="input-error"
-                                aria-live="polite"
-                                dangerouslySetInnerHTML={{
-                                    __html: kcSanitize(
-                                        kcContext.messagesPerField.getFirstError("password")
-                                    )
-                                }}
-                            />
-                        </FieldError>
-                    )}
-                </Field>
-
-                <div className="flex justify-end">
-                    {kcContext.realm.resetPasswordAllowed && (
-                        <span className=" underline-offset-4 hover:underline">
-                            <a
-                                tabIndex={5}
-                                href={kcContext.url.loginResetCredentialsUrl}
-                            >
-                                <Label className="text-sm font-medium cursor-pointer">
-                                    {msg("doForgotPassword")}
-                                </Label>
-                            </a>
-                        </span>
-                    )}
-                </div>
-
-                <div className="flex justify-end ">
-                    <Button
-                        disabled={isLoginButtonDisabled}
-                        className="w-full"
-                        name="login"
-                        type="submit"
-                        tabIndex={4}
-                    >
-                        {msgStr("doLogIn")}
-                    </Button>
-                </div>
-            </form>
-            {kcContext.enableWebAuthnConditionalUI && (
-                <>
-                    <form id="webauth" action={kcContext.url.loginAction} method="post">
-                        <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
-                        <input
-                            type="hidden"
-                            id="authenticatorData"
-                            name="authenticatorData"
-                        />
-                        <input type="hidden" id="signature" name="signature" />
-                        <input type="hidden" id="credentialId" name="credentialId" />
-                        <input type="hidden" id="userHandle" name="userHandle" />
-                        <input type="hidden" id="error" name="error" />
-                    </form>
-
-                    {kcContext.authenticators !== undefined &&
-                        kcContext.authenticators.authenticators.length !== 0 && (
-                            <>
-                                <form id="authn_select" className={kcClsx("kcFormClass")}>
-                                    {kcContext.authenticators.authenticators.map(
-                                        (authenticator, i) => (
-                                            <input
-                                                key={i}
-                                                type="hidden"
-                                                name="authn_use_chk"
-                                                readOnly
-                                                value={authenticator.credentialId}
-                                            />
-                                        )
-                                    )}
-                                </form>
-                            </>
-                        )}
-                    <br />
-
-                    <Button
-                        id={webAuthnButtonId}
-                        type="button"
-                        className="w-full"
-                        variant="outline"
-                    >
-                        <Fingerprint className="w-4 h-4" />
-                        {msgStr("passkey-doAuthenticate")}
-                    </Button>
-                </>
-            )}
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Label } from '@/components/ui/label';
+import { PasswordWrapper } from '@/login/components/PasswordWrapper';
+import { useI18n } from '@/login/i18n';
+import { useKcContext } from '@/login/KcContext';
+import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
+import { Fingerprint } from "lucide-react";
+import { useState } from "react";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+import { useScript } from './useScript';
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-password.ftl");
+
+    const { kcClsx } = useKcClsx();
+
+    const { msg, msgStr } = useI18n();
+
+    const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
+
+    const webAuthnButtonId = "authenticateWebAuthnButton";
+
+    useScript({ webAuthnButtonId });
+
+    return (
+        <Template
+            headerNode={msg("doLogIn")}
+            displayMessage={!kcContext.messagesPerField.existsError("password")}
+        >
+            <form
+                id="kc-form-login"
+                onSubmit={() => {
+                    setIsLoginButtonDisabled(true);
+                    return true;
+                }}
+                action={kcContext.url.loginAction}
+                className="flex flex-col gap-4"
+                method="post"
+            >
+                <Field>
+                    <FieldLabel htmlFor="password">{msg("password")}</FieldLabel>
+                    <PasswordWrapper
+                        passwordInputId="password"
+                    >
+                        <Input
+                            tabIndex={2}
+                            type="password"
+                            id="password"
+                            name="password"
+                            autoComplete="current-password"
+                            aria-invalid={kcContext.messagesPerField.existsError("password")}
+                        />
+                    </PasswordWrapper>
+                    {kcContext.messagesPerField.existsError("password") && (
+                        <FieldError>
+                            <span
+                                id="input-error"
+                                aria-live="polite"
+                                dangerouslySetInnerHTML={{
+                                    __html: kcSanitize(
+                                        kcContext.messagesPerField.getFirstError("password")
+                                    )
+                                }}
+                            />
+                        </FieldError>
+                    )}
+                </Field>
+
+                <div className="flex justify-end">
+                    {kcContext.realm.resetPasswordAllowed && (
+                        <span className=" underline-offset-4 hover:underline">
+                            <a
+                                tabIndex={5}
+                                href={kcContext.url.loginResetCredentialsUrl}
+                            >
+                                <Label className="text-sm font-medium cursor-pointer">
+                                    {msg("doForgotPassword")}
+                                </Label>
+                            </a>
+                        </span>
+                    )}
+                </div>
+
+                <div className="flex justify-end ">
+                    <Button
+                        disabled={isLoginButtonDisabled}
+                        className="w-full"
+                        name="login"
+                        type="submit"
+                        tabIndex={4}
+                    >
+                        {msgStr("doLogIn")}
+                    </Button>
+                </div>
+            </form>
+            {kcContext.enableWebAuthnConditionalUI && (
+                <>
+                    <form id="webauth" action={kcContext.url.loginAction} method="post">
+                        <input type="hidden" id="clientDataJSON" name="clientDataJSON" />
+                        <input
+                            type="hidden"
+                            id="authenticatorData"
+                            name="authenticatorData"
+                        />
+                        <input type="hidden" id="signature" name="signature" />
+                        <input type="hidden" id="credentialId" name="credentialId" />
+                        <input type="hidden" id="userHandle" name="userHandle" />
+                        <input type="hidden" id="error" name="error" />
+                    </form>
+
+                    {kcContext.authenticators !== undefined &&
+                        kcContext.authenticators.authenticators.length !== 0 && (
+                            <>
+                                <form id="authn_select" className={kcClsx("kcFormClass")}>
+                                    {kcContext.authenticators.authenticators.map(
+                                        (authenticator, i) => (
+                                            <input
+                                                key={i}
+                                                type="hidden"
+                                                name="authn_use_chk"
+                                                readOnly
+                                                value={authenticator.credentialId}
+                                            />
+                                        )
+                                    )}
+                                </form>
+                            </>
+                        )}
+                    <br />
+
+                    <Button
+                        id={webAuthnButtonId}
+                        type="button"
+                        className="w-full"
+                        variant="outline"
+                    >
+                        <Fingerprint className="w-4 h-4" />
+                        {msgStr("passkey-doAuthenticate")}
+                    </Button>
+                </>
+            )}
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-password/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-password/useScript.tsx

@@ -1,63 +1,63 @@
-
-import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
-import { waitForElementMountedOnDom } from "@keycloakify/login-ui/tools/waitForElementMountedOnDom";
-import { useEffect } from "react";
-import { assert } from "tsafe/assert";
-import { useI18n } from "../../i18n";
-import { useKcContext } from "../../KcContext";
-
-export function useScript(params: { webAuthnButtonId: string }) {
-    const { webAuthnButtonId } = params;
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-password.ftl");
-
-    const { msgStr, isFetchingTranslations } = useI18n();
-
-    const { insertScriptTags } = useInsertScriptTags({
-        effectId: "LoginPassword",
-        scriptTags: [
-            {
-                type: "module",
-                textContent: () => `
-                    import { authenticateByWebAuthn } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/webauthnAuthenticate.js";
-                    import { initAuthenticate } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/passkeysConditionalAuth.js";
-
-                    const authButton = document.getElementById("${webAuthnButtonId}");
-                    const input = {
-                        isUserIdentified : ${kcContext.isUserIdentified},
-                        challenge : ${JSON.stringify(kcContext.challenge)},
-                        userVerification : ${JSON.stringify(kcContext.userVerification)},
-                        rpId : ${JSON.stringify(kcContext.rpId)},
-                        createTimeout : ${kcContext.createTimeout}
-                    };
-                    authButton.addEventListener("click", () => {
-                        authenticateByWebAuthn({
-                            ...input,
-                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
-                        });
-                    });
-
-                    initAuthenticate({
-                        ...input,
-                        errmsg : ${JSON.stringify(msgStr("passkey-unsupported-browser-text"))}
-                    });
-                `
-            }
-        ]
-    });
-
-    useEffect(() => {
-        if (isFetchingTranslations) {
-            return;
-        }
-
-        (async () => {
-            await waitForElementMountedOnDom({
-                elementId: webAuthnButtonId
-            });
-
-            insertScriptTags();
-        })();
-    }, [isFetchingTranslations]);
-}
+
+import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
+import { waitForElementMountedOnDom } from "@keycloakify/login-ui/tools/waitForElementMountedOnDom";
+import { useEffect } from "react";
+import { assert } from "tsafe/assert";
+import { useI18n } from "../../i18n";
+import { useKcContext } from "../../KcContext";
+
+export function useScript(params: { webAuthnButtonId: string }) {
+    const { webAuthnButtonId } = params;
+
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-password.ftl");
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "LoginPassword",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+                    import { authenticateByWebAuthn } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/passkeysConditionalAuth.js";
+
+                    const authButton = document.getElementById("${webAuthnButtonId}");
+                    const input = {
+                        isUserIdentified : ${kcContext.isUserIdentified},
+                        challenge : ${JSON.stringify(kcContext.challenge)},
+                        userVerification : ${JSON.stringify(kcContext.userVerification)},
+                        rpId : ${JSON.stringify(kcContext.rpId)},
+                        createTimeout : ${kcContext.createTimeout}
+                    };
+                    authButton.addEventListener("click", () => {
+                        authenticateByWebAuthn({
+                            ...input,
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        });
+                    });
+
+                    initAuthenticate({
+                        ...input,
+                        errmsg : ${JSON.stringify(msgStr("passkey-unsupported-browser-text"))}
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: webAuthnButtonId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}

package/keycloak-theme/login/pages/login-recovery-authn-code-config/Page.stories.tsx

@@ -13,32 +13,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"
+            }
+        }
+    }
 };
 
 /**
@@ -48,18 +42,16 @@ export const French: Story = {
  * - Key Aspect: Ensures that error messages are properly displayed when recovery code generation fails.
  */
 export const WithErrorDuringCodeGeneration: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login-action"
-                },
-                message: {
-                    summary:
-                        "An error occurred during recovery code generation. Please try again.",
-                    type: "error"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login-action"
+            },
+            message: {
+                summary:
+                    "An error occurred during recovery code generation. Please try again.",
+                type: "error"
+            }
+        }
+    }
 };