@oussemasahbeni/keycloakify-login-shadcn 250004.0.2 → 250004.0.7

package/keycloak-theme/login/pages/webauthn-register/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 { useKcContext } from "../../KcContext";
-import { useI18n } from "../../i18n";
-
-export function useScript(params: { webAuthnButtonId: string }) {
-    const { webAuthnButtonId } = params;
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "webauthn-register.ftl");
-
-    const { msgStr, isFetchingTranslations } = useI18n();
-
-    const { insertScriptTags } = useInsertScriptTags({
-        effectId: "LoginRecoveryAuthnCodeConfig",
-        scriptTags: [
-            {
-                type: "module",
-                textContent: () => `
-                    import { registerByWebAuthn } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/webauthnRegister.js";
-                    const registerButton = document.getElementById('${webAuthnButtonId}');
-                    registerButton.addEventListener("click", function() {
-                        const input = {
-                            challenge : '${kcContext.challenge}',
-                            userid : '${kcContext.userid}',
-                            username : '${kcContext.username}',
-                            signatureAlgorithms : ${JSON.stringify(kcContext.signatureAlgorithms)},
-                            rpEntityName : ${JSON.stringify(kcContext.rpEntityName)},
-                            rpId : ${JSON.stringify(kcContext.rpId)},
-                            attestationConveyancePreference : ${JSON.stringify(kcContext.attestationConveyancePreference)},
-                            authenticatorAttachment : ${JSON.stringify(kcContext.authenticatorAttachment)},
-                            requireResidentKey : ${JSON.stringify(kcContext.requireResidentKey)},
-                            userVerificationRequirement : ${JSON.stringify(kcContext.userVerificationRequirement)},
-                            createTimeout : ${kcContext.createTimeout},
-                            excludeCredentialIds : ${JSON.stringify(kcContext.excludeCredentialIds)},
-                            initLabel : ${JSON.stringify(msgStr("webauthn-registration-init-label"))},
-                            initLabelPrompt : ${JSON.stringify(msgStr("webauthn-registration-init-label-prompt"))},
-                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
-                        };
-                        registerByWebAuthn(input);
-                    });
-                `
-            }
-        ]
-    });
-
-    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 { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+
+export function useScript(params: { webAuthnButtonId: string }) {
+    const { webAuthnButtonId } = params;
+
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "webauthn-register.ftl");
+
+    const { msgStr, isFetchingTranslations } = useI18n();
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+                    import { registerByWebAuthn } from "${import.meta.env.BASE_URL}keycloak-theme/login/js/webauthnRegister.js";
+                    const registerButton = document.getElementById('${webAuthnButtonId}');
+                    registerButton.addEventListener("click", function() {
+                        const input = {
+                            challenge : '${kcContext.challenge}',
+                            userid : '${kcContext.userid}',
+                            username : '${kcContext.username}',
+                            signatureAlgorithms : ${JSON.stringify(kcContext.signatureAlgorithms)},
+                            rpEntityName : ${JSON.stringify(kcContext.rpEntityName)},
+                            rpId : ${JSON.stringify(kcContext.rpId)},
+                            attestationConveyancePreference : ${JSON.stringify(kcContext.attestationConveyancePreference)},
+                            authenticatorAttachment : ${JSON.stringify(kcContext.authenticatorAttachment)},
+                            requireResidentKey : ${JSON.stringify(kcContext.requireResidentKey)},
+                            userVerificationRequirement : ${JSON.stringify(kcContext.userVerificationRequirement)},
+                            createTimeout : ${kcContext.createTimeout},
+                            excludeCredentialIds : ${JSON.stringify(kcContext.excludeCredentialIds)},
+                            initLabel : ${JSON.stringify(msgStr("webauthn-registration-init-label"))},
+                            initLabelPrompt : ${JSON.stringify(msgStr("webauthn-registration-init-label-prompt"))},
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        };
+                        registerByWebAuthn(input);
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: webAuthnButtonId
+            });
+
+            insertScriptTags();
+        })();
+    }, [isFetchingTranslations]);
+}

package/keycloak-theme/login/shared/getColorScheme.ts

@@ -0,0 +1,45 @@
+const SESSION_STORAGE_KEY = "kc-color-scheme";
+
+export function getTheme(
+    kcContextDarkMode: boolean | undefined
+): "dark" | "light" | "system" {
+    from_admin_policy: {
+        if (kcContextDarkMode === undefined || kcContextDarkMode === true) {
+            break from_admin_policy;
+        }
+        return "light";
+    }
+
+    from_url: {
+        const url = new URL(window.location.href);
+
+        const value = url.searchParams.get("dark");
+
+        if (value === null) {
+            break from_url;
+        }
+
+        {
+            url.searchParams.delete("dark");
+            window.history.replaceState({}, "", url.toString());
+        }
+
+        const isDark = value === "true";
+
+        sessionStorage.setItem(SESSION_STORAGE_KEY, `${isDark}`);
+
+        return isDark ? "dark" : "light";
+    }
+
+    from_session_storage: {
+        const value = sessionStorage.getItem(SESSION_STORAGE_KEY);
+
+        if (value === null) {
+            break from_session_storage;
+        }
+
+        return value === "true" ? "dark" : "light";
+    }
+
+    return "system";
+}

package/keycloak-theme/login/styleLevelCustomization.tsx

@@ -1,17 +1,36 @@
-import type { ClassKey } from "@keycloakify/login-ui/useKcClsx";
-import type { ReactNode } from "react";
-
-type Classes = { [key in ClassKey]?: string };
-
-type StyleLevelCustomization = {
-    doUseDefaultCss: boolean;
-    classes?: Classes;
-    loadCustomStylesheet?: () => void;
-    Provider?: (props: { children: ReactNode }) => ReactNode;
-};
-
-export function useStyleLevelCustomization(): StyleLevelCustomization {
-    return {
-        doUseDefaultCss: false
-    };
-}
+import { ThemeProvider } from '@/components/theme-provider';
+import type { ClassKey } from "@keycloakify/login-ui/useKcClsx";
+import type { ReactNode } from "react";
+import { useKcContext } from './KcContext';
+import { getTheme } from './shared/getColorScheme';
+
+type Classes = { [key in ClassKey]?: string };
+
+type StyleLevelCustomization = {
+    doUseDefaultCss: boolean;
+    classes?: Classes;
+    loadCustomStylesheet?: () => void;
+    Provider?: (props: { children: ReactNode }) => ReactNode;
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+function Provider(props: { children: ReactNode }) {
+    const { children } = props;
+
+    const { kcContext } = useKcContext();
+
+
+    return (
+        <ThemeProvider defaultTheme={getTheme(kcContext.darkMode)}>
+            {children}
+        </ThemeProvider>
+    );
+}
+
+
+export function useStyleLevelCustomization(): StyleLevelCustomization {
+    return {
+        doUseDefaultCss: false,
+        Provider
+    };
+}

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@oussemasahbeni/keycloakify-login-shadcn",
-  "version": "250004.0.2",
+  "version": "250004.0.7",
   "description": "Keycloakify Shadcn Theme extensions",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Oussemasahbeni/keycloakify-shadcn-starter.git"
+  },
   "type": "module",
   "main": "keycloak-theme/login/index.js",
   "files": [
     "keycloak-theme"
   ],
-  "dependencies": {
-    "@keycloakify/login-ui": "~250004.6.5"
-  },
   "peerDependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -22,12 +23,12 @@
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "input-otp": "^1.4.2",
+    "@keycloakify/login-ui": "~250004.6.5",
     "lucide-react": "^0.473.0",
     "react-icons": "^5.5.0",
     "tailwind-merge": "^2.6.0",