@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/login/providers/slack.svg

@@ -1,11 +1,11 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <title>Slack</title>
-  <path d="M5.04235 15.1661C5.04235 16.5537 3.9088 17.6873 2.52117 17.6873C1.13355 17.6873 0 16.5537 0 15.1661C0 13.7785 1.13355 12.645 2.52117 12.645H5.04235V15.1661Z" fill="#E01E5A" />
-  <path d="M6.3127 15.1661C6.3127 13.7785 7.44626 12.645 8.83388 12.645C10.2215 12.645 11.355 13.7785 11.355 15.1661V21.4788C11.355 22.8664 10.2215 24 8.83388 24C7.44626 24 6.3127 22.8664 6.3127 21.4788V15.1661Z" fill="#E01E5A" />
-  <path d="M8.83388 5.04235C7.44626 5.04235 6.3127 3.9088 6.3127 2.52117C6.3127 1.13355 7.44626 0 8.83388 0C10.2215 0 11.355 1.13355 11.355 2.52117V5.04235H8.83388Z" fill="#36C5F0" />
-  <path d="M8.83388 6.3127C10.2215 6.3127 11.355 7.44626 11.355 8.83388C11.355 10.2215 10.2215 11.355 8.83388 11.355H2.52117C1.13355 11.355 0 10.2215 0 8.83388C0 7.44626 1.13355 6.3127 2.52117 6.3127H8.83388Z" fill="#36C5F0" />
-  <path d="M18.9577 8.83388C18.9577 7.44626 20.0912 6.3127 21.4788 6.3127C22.8664 6.3127 24 7.44626 24 8.83388C24 10.2215 22.8664 11.355 21.4788 11.355H18.9577V8.83388Z" fill="#2EB67D" />
-  <path d="M17.6873 8.83388C17.6873 10.2215 16.5537 11.355 15.1661 11.355C13.7785 11.355 12.645 10.2215 12.645 8.83388V2.52117C12.645 1.13355 13.7785 0 15.1661 0C16.5537 0 17.6873 1.13355 17.6873 2.52117V8.83388Z" fill="#2EB67D" />
-  <path d="M15.1661 18.9577C16.5537 18.9577 17.6873 20.0912 17.6873 21.4788C17.6873 22.8664 16.5537 24 15.1661 24C13.7785 24 12.645 22.8664 12.645 21.4788V18.9577H15.1661Z" fill="#ECB22E" />
-  <path d="M15.1661 17.6873C13.7785 17.6873 12.645 16.5537 12.645 15.1661C12.645 13.7785 13.7785 12.645 15.1661 12.645H21.4788C22.8664 12.645 24 13.7785 24 15.1661C24 16.5537 22.8664 17.6873 21.4788 17.6873H15.1661Z" fill="#ECB22E" />
-</svg>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Slack</title>
+  <path d="M5.04235 15.1661C5.04235 16.5537 3.9088 17.6873 2.52117 17.6873C1.13355 17.6873 0 16.5537 0 15.1661C0 13.7785 1.13355 12.645 2.52117 12.645H5.04235V15.1661Z" fill="#E01E5A" />
+  <path d="M6.3127 15.1661C6.3127 13.7785 7.44626 12.645 8.83388 12.645C10.2215 12.645 11.355 13.7785 11.355 15.1661V21.4788C11.355 22.8664 10.2215 24 8.83388 24C7.44626 24 6.3127 22.8664 6.3127 21.4788V15.1661Z" fill="#E01E5A" />
+  <path d="M8.83388 5.04235C7.44626 5.04235 6.3127 3.9088 6.3127 2.52117C6.3127 1.13355 7.44626 0 8.83388 0C10.2215 0 11.355 1.13355 11.355 2.52117V5.04235H8.83388Z" fill="#36C5F0" />
+  <path d="M8.83388 6.3127C10.2215 6.3127 11.355 7.44626 11.355 8.83388C11.355 10.2215 10.2215 11.355 8.83388 11.355H2.52117C1.13355 11.355 0 10.2215 0 8.83388C0 7.44626 1.13355 6.3127 2.52117 6.3127H8.83388Z" fill="#36C5F0" />
+  <path d="M18.9577 8.83388C18.9577 7.44626 20.0912 6.3127 21.4788 6.3127C22.8664 6.3127 24 7.44626 24 8.83388C24 10.2215 22.8664 11.355 21.4788 11.355H18.9577V8.83388Z" fill="#2EB67D" />
+  <path d="M17.6873 8.83388C17.6873 10.2215 16.5537 11.355 15.1661 11.355C13.7785 11.355 12.645 10.2215 12.645 8.83388V2.52117C12.645 1.13355 13.7785 0 15.1661 0C16.5537 0 17.6873 1.13355 17.6873 2.52117V8.83388Z" fill="#2EB67D" />
+  <path d="M15.1661 18.9577C16.5537 18.9577 17.6873 20.0912 17.6873 21.4788C17.6873 22.8664 16.5537 24 15.1661 24C13.7785 24 12.645 22.8664 12.645 21.4788V18.9577H15.1661Z" fill="#ECB22E" />
+  <path d="M15.1661 17.6873C13.7785 17.6873 12.645 16.5537 12.645 15.1661C12.645 13.7785 13.7785 12.645 15.1661 12.645H21.4788C22.8664 12.645 24 13.7785 24 15.1661C24 16.5537 22.8664 17.6873 21.4788 17.6873H15.1661Z" fill="#ECB22E" />
+</svg>

package/keycloak-theme/login/pages/login/providers/stackoverflow.svg

@@ -1,5 +1,5 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <title>Stack Overflow</title>
-  <path d="M18.9475 15.4707H21.0799V24H1.88887V15.4707H4.0212V21.8677H18.9475V15.4707Z" fill="#BBBBBB" />
-  <path d="M6.34504 14.8368L16.8177 17.0379L17.2579 14.9444L6.78527 12.7422L6.34504 14.8368ZM7.73086 9.82211L17.4322 14.3403L18.3359 12.4001L8.63439 7.88188L7.73086 9.82211ZM10.4153 5.06255L18.6399 11.9114L20.0096 10.2666L11.785 3.41794L10.4153 5.06255ZM15.7242 0L14.0067 1.27746L20.3936 9.86495L22.1111 8.58768L15.7242 0ZM6.15354 19.7353H16.8152V17.603H6.15354V19.7353Z" fill="#F58025" />
-</svg>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Stack Overflow</title>
+  <path d="M18.9475 15.4707H21.0799V24H1.88887V15.4707H4.0212V21.8677H18.9475V15.4707Z" fill="#BBBBBB" />
+  <path d="M6.34504 14.8368L16.8177 17.0379L17.2579 14.9444L6.78527 12.7422L6.34504 14.8368ZM7.73086 9.82211L17.4322 14.3403L18.3359 12.4001L8.63439 7.88188L7.73086 9.82211ZM10.4153 5.06255L18.6399 11.9114L20.0096 10.2666L11.785 3.41794L10.4153 5.06255ZM15.7242 0L14.0067 1.27746L20.3936 9.86495L22.1111 8.58768L15.7242 0ZM6.15354 19.7353H16.8152V17.603H6.15354V19.7353Z" fill="#F58025" />
+</svg>

package/keycloak-theme/login/pages/login/providers/x.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="300" height="271" xmlns="http://www.w3.org/2000/svg">
-    <path d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"/>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="300" height="271" xmlns="http://www.w3.org/2000/svg">
+    <path d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"/>
 </svg>

package/keycloak-theme/login/pages/login/useProviderLogos.tsx

@@ -1,39 +1,39 @@
-import appleLogo from "./providers/apple.svg";
-import bitbucketLogo from "./providers/bitbucket.svg";
-import discordLogo from "./providers/discord.svg";
-import facebookLogo from "./providers/facebook.svg";
-import githubLogo from "./providers/github.svg";
-import gitlabLogo from "./providers/gitlab.svg";
-import googleLogo from "./providers/google.svg";
-import instagramLogo from "./providers/instagram.svg";
-import linkedinLogo from "./providers/linkedin.svg";
-import microsoftLogo from "./providers/microsoft.svg";
-import oidcLogo from "./providers/oidc.svg";
-import openshiftLogo from "./providers/openshift.svg";
-import paypalLogo from "./providers/paypal.svg";
-import slackLogo from "./providers/slack.svg";
-import stackoverflowLogo from "./providers/stackoverflow.svg";
-import xLogo from "./providers/x.svg";
-
-const useProviderLogos: () => Record<string, string> = () => ({
-    apple: appleLogo,
-    bitbucket: bitbucketLogo,
-    discord: discordLogo,
-    facebook: facebookLogo,
-    github: githubLogo,
-    gitlab: gitlabLogo,
-    google: googleLogo,
-    instagram: instagramLogo,
-    "linkedin-openid-connect": linkedinLogo,
-    microsoft: microsoftLogo,
-    oidc: oidcLogo,
-    "openshift-v3": openshiftLogo,
-    "openshift-v4": openshiftLogo,
-    paypal: paypalLogo,
-    slack: slackLogo,
-    stackoverflow: stackoverflowLogo,
-    twitter: xLogo,
-    x: xLogo
-});
-
-export default useProviderLogos;
+import appleLogo from "./providers/apple.svg";
+import bitbucketLogo from "./providers/bitbucket.svg";
+import discordLogo from "./providers/discord.svg";
+import facebookLogo from "./providers/facebook.svg";
+import githubLogo from "./providers/github.svg";
+import gitlabLogo from "./providers/gitlab.svg";
+import googleLogo from "./providers/google.svg";
+import instagramLogo from "./providers/instagram.svg";
+import linkedinLogo from "./providers/linkedin.svg";
+import microsoftLogo from "./providers/microsoft.svg";
+import oidcLogo from "./providers/oidc.svg";
+import openshiftLogo from "./providers/openshift.svg";
+import paypalLogo from "./providers/paypal.svg";
+import slackLogo from "./providers/slack.svg";
+import stackoverflowLogo from "./providers/stackoverflow.svg";
+import xLogo from "./providers/x.svg";
+
+const useProviderLogos: () => Record<string, string> = () => ({
+    apple: appleLogo,
+    bitbucket: bitbucketLogo,
+    discord: discordLogo,
+    facebook: facebookLogo,
+    github: githubLogo,
+    gitlab: gitlabLogo,
+    google: googleLogo,
+    instagram: instagramLogo,
+    "linkedin-openid-connect": linkedinLogo,
+    microsoft: microsoftLogo,
+    oidc: oidcLogo,
+    "openshift-v3": openshiftLogo,
+    "openshift-v4": openshiftLogo,
+    paypal: paypalLogo,
+    slack: slackLogo,
+    stackoverflow: stackoverflowLogo,
+    twitter: xLogo,
+    x: xLogo
+});
+
+export default useProviderLogos;

package/keycloak-theme/login/pages/login/useScript.tsx

@@ -1,62 +1,62 @@
-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.ftl");
-
-    const { msgStr, isFetchingTranslations } = useI18n();
-
-    const { insertScriptTags } = useInsertScriptTags({
-        effectId: "Login",
-        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.ftl");
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "Login",
+        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-config-totp/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "login-config-totp.ftl" });
 
 const meta = {
@@ -12,78 +11,64 @@ 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"
+            }
+        }
+    }
 };
 
 export const WithManualSetUp: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                mode: "manual"
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            mode: "manual"
+        }
+    }
 };
 
 export const WithError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                messagesPerField: {
-                    get: (fieldName: string) =>
-                        fieldName === "totp" ? "Invalid TOTP" : undefined,
-                    exists: (fieldName: string) => fieldName === "totp",
-                    existsError: (fieldName: string) => fieldName === "totp",
-                    printIfExists: <T,>(fieldName: string, x: T) =>
-                        fieldName === "totp" ? x : undefined
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            messagesPerField: {
+                get: (fieldName: string) =>
+                    fieldName === "totp" ? "Invalid TOTP" : undefined,
+                exists: (fieldName: string) => fieldName === "totp",
+                existsError: (fieldName: string) => fieldName === "totp",
+                printIfExists: <T,>(fieldName: string, x: T) =>
+                    fieldName === "totp" ? x : undefined
+            }
+        }
+    }
 };
 export const WithAppInitiatedAction: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                isAppInitiatedAction: true
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            isAppInitiatedAction: true
+        }
+    }
 };
 
 export const WithPreFilledUserLabel: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                totp: {
-                    otpCredentials: [{ userLabel: "MyDevice" }]
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            totp: {
+                otpCredentials: [{ userLabel: "MyDevice" }]
+            }
+        }
+    }
 };