@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.7

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

@@ -1,145 +1,145 @@
-import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
-import { waitForElementMountedOnDom } from "@keycloakify/login-ui/tools/waitForElementMountedOnDom";
-import { useEffect } from "react";
-import { useI18n } from "../../i18n";
-
-export function useScript(params: { olRecoveryCodesListId: string }) {
-    const { olRecoveryCodesListId } = params;
-
-    const { msgStr, isFetchingTranslations } = useI18n();
-
-    const { insertScriptTags } = useInsertScriptTags({
-        effectId: "LoginRecoveryAuthnCodeConfig",
-        scriptTags: [
-            {
-                type: "text/javascript",
-                textContent: () => `
-
-                    /* copy recovery codes  */
-                    function copyRecoveryCodes() {
-                        var tmpTextarea = document.createElement("textarea");
-                        var codes = document.querySelectorAll("#${olRecoveryCodesListId} li");
-                        for (i = 0; i < codes.length; i++) {
-                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
-                        }
-                        document.body.appendChild(tmpTextarea);
-                        tmpTextarea.select();
-                        document.execCommand("copy");
-                        document.body.removeChild(tmpTextarea);
-                    }
-
-                    var copyButton = document.getElementById("copyRecoveryCodes");
-                    copyButton && copyButton.addEventListener("click", function () {
-                        copyRecoveryCodes();
-                    });
-
-                    /* download recovery codes  */
-                    function formatCurrentDateTime() {
-                        var dt = new Date();
-                        var options = {
-                            month: 'long',
-                            day: 'numeric',
-                            year: 'numeric',
-                            hour: 'numeric',
-                            minute: 'numeric',
-                            timeZoneName: 'short'
-                        };
-
-                        return dt.toLocaleString('en-US', options);
-                    }
-
-                    function parseRecoveryCodeList() {
-                        var recoveryCodes = document.querySelectorAll("#${olRecoveryCodesListId} li");
-                        var recoveryCodeList = "";
-
-                        for (var i = 0; i < recoveryCodes.length; i++) {
-                            var recoveryCodeLiElement = recoveryCodes[i].innerText;
-                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
-                        }
-
-                        return recoveryCodeList;
-                    }
-
-                    function buildDownloadContent() {
-                        var recoveryCodeList = parseRecoveryCodeList();
-                        var dt = new Date();
-                        var options = {
-                            month: 'long',
-                            day: 'numeric',
-                            year: 'numeric',
-                            hour: 'numeric',
-                            minute: 'numeric',
-                            timeZoneName: 'short'
-                        };
-
-                        return fileBodyContent =
-                            ${JSON.stringify(msgStr("recovery-codes-download-file-header"))} + "\\n\\n" +
-                            recoveryCodeList + "\\n" +
-                            ${JSON.stringify(msgStr("recovery-codes-download-file-description"))} + "\\n\\n" +
-                            ${JSON.stringify(msgStr("recovery-codes-download-file-date"))} + " " + formatCurrentDateTime();
-                    }
-
-                    function setUpDownloadLinkAndDownload(filename, text) {
-                        var el = document.createElement('a');
-                        el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
-                        el.setAttribute('download', filename);
-                        el.style.display = 'none';
-                        document.body.appendChild(el);
-                        el.click();
-                        document.body.removeChild(el);
-                    }
-
-                    function downloadRecoveryCodes() {
-                        setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
-                    }
-
-                    var downloadButton = document.getElementById("downloadRecoveryCodes");
-                    downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
-
-                    /* print recovery codes */
-                    function buildPrintContent() {
-                        var recoveryCodeListHTML = document.getElementById('${olRecoveryCodesListId}').innerHTML;
-                        var styles =
-                            \`@page { size: auto;  margin-top: 0; }
-                            body { width: 480px; }
-                            div { list-style-type: none; font-family: monospace }
-                            p:first-of-type { margin-top: 48px }\`;
-
-                        return printFileContent =
-                            "<html><style>" + styles + "</style><body>" +
-                            "<title>kc-download-recovery-codes</title>" +
-                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-header"))} + "</p>" +
-                            "<div>" + recoveryCodeListHTML + "</div>" +
-                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-description"))} + "</p>" +
-                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-date"))} + " " + formatCurrentDateTime() + "</p>" +
-                            "</body></html>";
-                    }
-
-                    function printRecoveryCodes() {
-                        var w = window.open();
-                        w.document.write(buildPrintContent());
-                        w.print();
-                        w.close();
-                    }
-
-                    var printButton = document.getElementById("printRecoveryCodes");
-                    printButton && printButton.addEventListener("click", printRecoveryCodes);
-                `
-            }
-        ]
-    });
-
-    useEffect(() => {
-        if (isFetchingTranslations) {
-            return;
-        }
-
-        (async () => {
-            await waitForElementMountedOnDom({
-                elementId: olRecoveryCodesListId
-            });
-
-            insertScriptTags();
-        })();
-    }, [isFetchingTranslations]);
-}
+import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
+import { waitForElementMountedOnDom } from "@keycloakify/login-ui/tools/waitForElementMountedOnDom";
+import { useEffect } from "react";
+import { useI18n } from "../../i18n";
+
+export function useScript(params: { olRecoveryCodesListId: string }) {
+    const { olRecoveryCodesListId } = params;
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "text/javascript",
+                textContent: () => `
+
+                    /* copy recovery codes  */
+                    function copyRecoveryCodes() {
+                        var tmpTextarea = document.createElement("textarea");
+                        var codes = document.querySelectorAll("#${olRecoveryCodesListId} li");
+                        for (i = 0; i < codes.length; i++) {
+                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
+                        }
+                        document.body.appendChild(tmpTextarea);
+                        tmpTextarea.select();
+                        document.execCommand("copy");
+                        document.body.removeChild(tmpTextarea);
+                    }
+
+                    var copyButton = document.getElementById("copyRecoveryCodes");
+                    copyButton && copyButton.addEventListener("click", function () {
+                        copyRecoveryCodes();
+                    });
+
+                    /* download recovery codes  */
+                    function formatCurrentDateTime() {
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return dt.toLocaleString('en-US', options);
+                    }
+
+                    function parseRecoveryCodeList() {
+                        var recoveryCodes = document.querySelectorAll("#${olRecoveryCodesListId} li");
+                        var recoveryCodeList = "";
+
+                        for (var i = 0; i < recoveryCodes.length; i++) {
+                            var recoveryCodeLiElement = recoveryCodes[i].innerText;
+                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
+                        }
+
+                        return recoveryCodeList;
+                    }
+
+                    function buildDownloadContent() {
+                        var recoveryCodeList = parseRecoveryCodeList();
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return fileBodyContent =
+                            ${JSON.stringify(msgStr("recovery-codes-download-file-header"))} + "\\n\\n" +
+                            recoveryCodeList + "\\n" +
+                            ${JSON.stringify(msgStr("recovery-codes-download-file-description"))} + "\\n\\n" +
+                            ${JSON.stringify(msgStr("recovery-codes-download-file-date"))} + " " + formatCurrentDateTime();
+                    }
+
+                    function setUpDownloadLinkAndDownload(filename, text) {
+                        var el = document.createElement('a');
+                        el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+                        el.setAttribute('download', filename);
+                        el.style.display = 'none';
+                        document.body.appendChild(el);
+                        el.click();
+                        document.body.removeChild(el);
+                    }
+
+                    function downloadRecoveryCodes() {
+                        setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+                    }
+
+                    var downloadButton = document.getElementById("downloadRecoveryCodes");
+                    downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+
+                    /* print recovery codes */
+                    function buildPrintContent() {
+                        var recoveryCodeListHTML = document.getElementById('${olRecoveryCodesListId}').innerHTML;
+                        var styles =
+                            \`@page { size: auto;  margin-top: 0; }
+                            body { width: 480px; }
+                            div { list-style-type: none; font-family: monospace }
+                            p:first-of-type { margin-top: 48px }\`;
+
+                        return printFileContent =
+                            "<html><style>" + styles + "</style><body>" +
+                            "<title>kc-download-recovery-codes</title>" +
+                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-header"))} + "</p>" +
+                            "<div>" + recoveryCodeListHTML + "</div>" +
+                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-description"))} + "</p>" +
+                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-date"))} + " " + formatCurrentDateTime() + "</p>" +
+                            "</body></html>";
+                    }
+
+                    function printRecoveryCodes() {
+                        var w = window.open();
+                        w.document.write(buildPrintContent());
+                        w.print();
+                        w.close();
+                    }
+
+                    var printButton = document.getElementById("printRecoveryCodes");
+                    printButton && printButton.addEventListener("click", printRecoveryCodes);
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: olRecoveryCodesListId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}

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

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

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

@@ -1,70 +1,70 @@
-import { Button } from "@/components/ui/button";
-import { Field, FieldError, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { kcSanitize } from "keycloakify/lib/kcSanitize";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-export function Page() {
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "login-recovery-authn-code-input.ftl");
-
-    const { url, messagesPerField, recoveryAuthnCodesInputBean } = kcContext;
-
-    const { msg, msgStr } = useI18n();
-    return (
-        <Template
-            headerNode={msg("auth-recovery-code-header")}
-            displayMessage={!messagesPerField.existsError("recoveryCodeInput")}
-        >
-            <form
-                id="kc-recovery-code-login-form"
-                className="space-y-6"
-                action={url.loginAction}
-                method="post"
-            >
-                <Field>
-                    <FieldLabel htmlFor="recoveryCodeInput">
-                        {" "}
-                        {msg(
-                            "auth-recovery-code-prompt",
-                            `${recoveryAuthnCodesInputBean.codeNumber}`
-                        )}
-                    </FieldLabel>
-                    <Input
-                        tabIndex={1}
-                        id="recoveryCodeInput"
-                        name="recoveryCodeInput"
-                        autoComplete="off"
-                        type="text"
-                        autoFocus
-                        placeholder="Enter recovery code"
-                        aria-invalid={messagesPerField.existsError("recoveryCodeInput")}
-                    />
-                    {messagesPerField.existsError("recoveryCodeInput") && (
-                        <FieldError>
-                            <span
-                                id="input-error"
-                                aria-live="polite"
-                                dangerouslySetInnerHTML={{
-                                    __html: kcSanitize(
-                                        messagesPerField.getFirstError(
-                                            "recoveryCodeInput"
-                                        )
-                                    )
-                                }}
-                            />
-                        </FieldError>
-                    )}
-                </Field>
-
-                <Button className="w-full" name="login" id="kc-login" type="submit">
-                    {msgStr("doLogIn")}
-                </Button>
-            </form>
-        </Template>
-    );
-}
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { useI18n } from '@/login/i18n';
+import { useKcContext } from '@/login/KcContext';
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+export function Page() {
+
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "login-recovery-authn-code-input.ftl");
+
+    const { url, messagesPerField, recoveryAuthnCodesInputBean } = kcContext;
+
+    const { msg, msgStr } = useI18n();
+    return (
+        <Template
+            headerNode={msg("auth-recovery-code-header")}
+            displayMessage={!messagesPerField.existsError("recoveryCodeInput")}
+        >
+            <form
+                id="kc-recovery-code-login-form"
+                className="space-y-6"
+                action={url.loginAction}
+                method="post"
+            >
+                <Field>
+                    <FieldLabel htmlFor="recoveryCodeInput">
+                        {" "}
+                        {msg(
+                            "auth-recovery-code-prompt",
+                            `${recoveryAuthnCodesInputBean.codeNumber}`
+                        )}
+                    </FieldLabel>
+                    <Input
+                        tabIndex={1}
+                        id="recoveryCodeInput"
+                        name="recoveryCodeInput"
+                        autoComplete="off"
+                        type="text"
+                        autoFocus
+                        placeholder="Enter recovery code"
+                        aria-invalid={messagesPerField.existsError("recoveryCodeInput")}
+                    />
+                    {messagesPerField.existsError("recoveryCodeInput") && (
+                        <FieldError>
+                            <span
+                                id="input-error"
+                                aria-live="polite"
+                                dangerouslySetInnerHTML={{
+                                    __html: kcSanitize(
+                                        messagesPerField.getFirstError(
+                                            "recoveryCodeInput"
+                                        )
+                                    )
+                                }}
+                            />
+                        </FieldError>
+                    )}
+                </Field>
+
+                <Button className="w-full" name="login" id="kc-login" type="submit">
+                    {msgStr("doLogIn")}
+                </Button>
+            </form>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/login-recovery-authn-code-input/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-reset-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,22 +41,20 @@ export const French: Story = {
  * - Key Aspect: Ensures that the component handles the absence of OTP credentials correctly.
  */
 export const WithoutOtpCredentials: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login"
-                },
-                configuredOtpCredentials: {
-                    userOtpCredentials: [],
-                    selectedCredentialId: undefined
-                },
-                messagesPerField: {
-                    existsError: () => false
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login"
+            },
+            configuredOtpCredentials: {
+                userOtpCredentials: [],
+                selectedCredentialId: undefined
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
 };
 
 /**
@@ -72,26 +64,24 @@ export const WithoutOtpCredentials: Story = {
  * - Key Aspect: Ensures that error messages are displayed correctly for OTP-related errors.
  */
 export const WithOtpError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login"
-                },
-                configuredOtpCredentials: {
-                    userOtpCredentials: [
-                        { id: "otp1", userLabel: "Device 1" },
-                        { id: "otp2", userLabel: "Device 2" }
-                    ],
-                    selectedCredentialId: "otp1"
-                },
-                messagesPerField: {
-                    existsError: (field: string) => field === "totp",
-                    get: () => "Invalid OTP selection"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login"
+            },
+            configuredOtpCredentials: {
+                userOtpCredentials: [
+                    { id: "otp1", userLabel: "Device 1" },
+                    { id: "otp2", userLabel: "Device 2" }
+                ],
+                selectedCredentialId: "otp1"
+            },
+            messagesPerField: {
+                existsError: (field: string) => field === "totp",
+                get: () => "Invalid OTP selection"
+            }
+        }
+    }
 };
 
 /**
@@ -101,20 +91,18 @@ export const WithOtpError: Story = {
  * - Key Aspect: Ensures that the component renders correctly with only one OTP credential pre-selected.
  */
 export const WithOnlyOneOtpCredential: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                url: {
-                    loginAction: "/mock-login"
-                },
-                configuredOtpCredentials: {
-                    userOtpCredentials: [{ id: "otp1", userLabel: "Device 1" }],
-                    selectedCredentialId: "otp1"
-                },
-                messagesPerField: {
-                    existsError: () => false
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            url: {
+                loginAction: "/mock-login"
+            },
+            configuredOtpCredentials: {
+                userOtpCredentials: [{ id: "otp1", userLabel: "Device 1" }],
+                selectedCredentialId: "otp1"
+            },
+            messagesPerField: {
+                existsError: () => false
+            }
+        }
+    }
 };