@micha.bigler/ui-core-micha 2.11.0 → 2.13.0

package/WORK_ORDERS.md

@@ -22,3 +22,5 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | ONB-1 | Per-app configurable notifications onboarding step | New `browserPush` prop `{nagUntil, showOnce}` on `OnboardingProvider`; parameterizes the `browser_push` descriptor's condition (default changes from implicit "all-channels" to "any-channel", stopping the over-nag); `showOnce` via a persisted `onboarding_seen` set (frozen-at-mount ref, no mid-session flicker) | 2026-07-17 | done | 1ae7c20 | Default behavior change affects cockpit and all consumers on their next ucm bump. jg-ferien companion WO pins the new version with `browserPush={{nagUntil: 'any-channel'}}` explicit (matches new default, but pinned explicitly per the WO). |
 | PERF-3B1 | Parallel auth bootstrap after CSRF | Starts auth-methods and current-user concurrently once CSRF is available, while preserving error handling and loading semantics. | 2026-07-19 | done | ee89329 | Independent `reviewer` + `sec_reviewer` passes both clean (no findings); one P3 test-coverage gap from the reviewer (missing mirror case: auth-methods rejects, current-user succeeds) closed with an added regression test — 45/45 tests green. Published as 2.10.1 (patch, no interface change) and pinned in jg-ferien alongside its PERF-3A companion WO. |
 | NOTIF-6 | NotificationsProvider + bell on canonical dcm feed/* API | Single-WS-owner `NotificationsProvider`/`useNotifications` (initial REST seed via `feedApi.js` + one `/ws/notifications/` socket, reconnect w/ backoff) + generic MUI `NotificationBell`; additive exports only | 2026-07-27 | done | 6c63fb9 | Codex-built direct (no nesting), independent `reviewer`: single-WS-owner invariant traced clean (no way to break it — `authenticated`/`replaceNotifications`/`refresh` all referentially stable across unrelated re-renders, re-render test is genuine not a no-op). R1 (P2, real bug): the `notification.status` WS handler patched item flags but never adjusted `unreadCount`, so the badge went stale after a cross-tab/cross-device mark — the test had locked in the stale count as expected behavior. Fixed: delta computed from before/after unread state on the WS patch path, mirroring `mark()`'s own logic; test corrected + a new cross-tab regression test added. 57 passing, build clean. No new npm dependency. Full history + backend contract: dcm's `WORK_ORDERS.md`/`docs/design/notifications-platform.md`. Publishes ucm 2.11.0 |
+| NOTIF-13 | Layer-1 transport extraction (pluggable realtime) | Extract the socket out of `NotificationsProvider` into a generic subscribe-by-message-type realtime primitive so a second domain (messaging) can ride the same socket; the catch-all that turns every non-`notification.status` message into a feed entry is replaced by explicit dispatch with unknown types ignored. Additive: `NotificationsProvider` stays the sole mount point, its context value unchanged. Full spec: [work-orders/NOTIF-13.md](work-orders/NOTIF-13.md). | 2026-07-29 | planned | | Tier 2 (cockpit consumes `NotificationsProvider` at 2.12.0 in prod). Phase A, the hinge: unblocks NOTIF-15 (jg bell adoption) and is the substrate for Phase B messaging. Canonical register row: django-core-micha `WORK_ORDERS.md`. Operator decision 2026-07-29: additive only, NO standalone `RealtimeProvider` apps must mount. Scope E (envelope contract + helper + doc) also touches dcm; note that the roadmap wording "dcm multi-stream consumer" overstates it — `push_to_users`/`NotificationConsumer` are already stream-agnostic. |
+| NOTIF-12 | Popup channel via the wizard renderer | Make `popup` a real delivery channel: extract the presentational dialog shell out of `OnboardingWizard`, render popup-eligible notifications through it, and record seen/dismissed on `NotificationRecipient` (design D-F7: renderer reuse only, NOT the onboarding progress store); dcm `PopupDispatcher` stops being a logging stub. Full spec: [work-orders/NOTIF-12.md](work-orders/NOTIF-12.md). | 2026-07-29 | planned | | Tier 2 (extracts a renderer cockpit+jg run in production; the roadmap label "uncritical" is about urgency, not blast radius). **HARD GATE: starts only after NOTIF-13 landed + published** — consumes its envelope contract and `subscribe()`, and edits the same ucm files (AGENTS.md overlap rule). **SHIPS WITH ZERO PRODUCERS, deliberately** (operator decision 2026-07-29, made with the evidence): no notification type declares `popup` in `eligible_channels` anywhere in dcm/jg/cockpit/hram/spesix/survey_app, so the channel is wired but inactive until an app opts a type in. WO therefore requires (a) CHANGELOG wording that does not overclaim (NOTIF-4 R1 precedent) and (b) a test-local producer type proving the path end-to-end, so it is not untested dead code. Was NOTIF-11 (renumbered 2026-07-29 for the jg cutover/drop split). |

package/dist/auth/AuthContext.js

@@ -10,6 +10,7 @@ const DEFAULT_AUTH_METHODS = {
     password_reset: true,
     signup: true,
     signup_modes: ['self_signup_access_code'],
+    turnstile_site_key: '',
     password_change: true,
     social_login: true,
     social_providers: ['google', 'microsoft'],

package/dist/auth/authApi.js

@@ -341,7 +341,7 @@ export async function sendAdminInvite(email) {
         throw normaliseApiError(error, 'Auth.INVITE_FAILED');
     }
 }
-export async function submitRegistrationRequest({ email, mode, accessCode, registrationContextToken, registrationContext, }) {
+export async function submitRegistrationRequest({ email, mode, accessCode, registrationContextToken, registrationContext, turnstileToken, }) {
     const payload = { email, mode };
     if (accessCode)
         payload.access_code = accessCode;
@@ -351,6 +351,8 @@ export async function submitRegistrationRequest({ email, mode, accessCode, regis
     if (registrationContext) {
         payload.registration_context = registrationContext;
     }
+    if (turnstileToken)
+        payload.turnstile_token = turnstileToken;
     try {
         const res = await apiClient.post(`${USERS_BASE}/register-request/`, payload);
         return res.data;

package/dist/components/TurnstileWidget.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
+const TURNSTILE_SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+const TURNSTILE_SCRIPT_SELECTOR = 'script[data-turnstile-api="true"]';
+let turnstileScriptPromise;
+function loadTurnstileScript() {
+    var _a;
+    if ((_a = window.turnstile) === null || _a === void 0 ? void 0 : _a.render) {
+        return Promise.resolve(window.turnstile);
+    }
+    if (!turnstileScriptPromise) {
+        turnstileScriptPromise = new Promise((resolve, reject) => {
+            let script = document.querySelector(TURNSTILE_SCRIPT_SELECTOR);
+            if (!script) {
+                script = document.createElement('script');
+                script.src = TURNSTILE_SCRIPT_URL;
+                script.async = true;
+                script.defer = true;
+                script.dataset.turnstileApi = 'true';
+                document.head.appendChild(script);
+            }
+            script.addEventListener('load', () => {
+                var _a;
+                if ((_a = window.turnstile) === null || _a === void 0 ? void 0 : _a.render) {
+                    resolve(window.turnstile);
+                }
+                else {
+                    reject(new Error('Turnstile did not initialize.'));
+                }
+            }, { once: true });
+            script.addEventListener('error', () => {
+                reject(new Error('Turnstile could not be loaded.'));
+            }, { once: true });
+        });
+    }
+    return turnstileScriptPromise;
+}
+export const TurnstileWidget = forwardRef(function TurnstileWidget({ siteKey, onToken }, ref) {
+    const containerRef = useRef(null);
+    const widgetIdRef = useRef(null);
+    const onTokenRef = useRef(onToken);
+    useEffect(() => {
+        onTokenRef.current = onToken;
+    }, [onToken]);
+    const reset = useCallback(() => {
+        var _a;
+        if (widgetIdRef.current !== null && ((_a = window.turnstile) === null || _a === void 0 ? void 0 : _a.reset)) {
+            window.turnstile.reset(widgetIdRef.current);
+        }
+        onTokenRef.current('');
+    }, []);
+    useImperativeHandle(ref, () => ({ reset }), [reset]);
+    useEffect(() => {
+        if (!siteKey)
+            return undefined;
+        let cancelled = false;
+        loadTurnstileScript()
+            .then((turnstile) => {
+            if (cancelled || !containerRef.current)
+                return;
+            widgetIdRef.current = turnstile.render(containerRef.current, {
+                sitekey: siteKey,
+                callback: (token) => onTokenRef.current(token),
+                'expired-callback': reset,
+                'error-callback': () => onTokenRef.current(''),
+            });
+        })
+            .catch(() => {
+            if (!cancelled)
+                onTokenRef.current('');
+        });
+        return () => {
+            var _a;
+            cancelled = true;
+            if (widgetIdRef.current !== null && ((_a = window.turnstile) === null || _a === void 0 ? void 0 : _a.remove)) {
+                window.turnstile.remove(widgetIdRef.current);
+            }
+            widgetIdRef.current = null;
+        };
+    }, [siteKey, reset]);
+    if (!siteKey)
+        return null;
+    return _jsx("div", { ref: containerRef, "data-testid": "turnstile-widget" });
+});

package/dist/index.js

@@ -33,6 +33,7 @@ export { authTranslations } from './i18n/authTranslations';
 export { NotificationSettings } from './notifications/NotificationSettings';
 export * from './notifications/api';
 export { NotificationsProvider, useNotifications } from './notifications/NotificationsProvider';
+export { useRealtime } from './notifications/realtime';
 export { NotificationBell } from './notifications/NotificationBell';
 export { getNotificationFeed, getUnreadCount, markNotifications } from './notifications/feedApi';
 // --- 8. Onboarding ---

package/dist/notifications/NotificationsProvider.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { AuthContext } from '../auth/AuthContext';
 import { getNotificationFeed, getUnreadCount, markNotifications } from './feedApi';
-const INITIAL_BACKOFF_MS = 1000;
-const MAX_BACKOFF_MS = 30000;
+import { DEFAULT_ENVELOPE, RealtimeContext, useRealtimeCore } from './realtime';
 const NotificationsContext = createContext(null);
 function normalizeNotification(notification) {
     var _a, _b, _c;
@@ -43,7 +42,6 @@ export function NotificationsProvider({ children, wsUrlBase }) {
     const [notifications, setNotifications] = useState([]);
     const [unreadCount, setUnreadCount] = useState(0);
     const notificationsRef = useRef([]);
-    const socketRef = useRef(null);
     const replaceNotifications = useCallback((nextNotifications) => {
         notificationsRef.current = nextNotifications;
         setNotifications(nextNotifications);
@@ -61,94 +59,66 @@ export function NotificationsProvider({ children, wsUrlBase }) {
         setUnreadCount(nextUnreadCount);
         return { notifications: nextNotifications, unreadCount: nextUnreadCount };
     }, [authenticated, replaceNotifications]);
+    // Seeded gates the socket connect, not just `authenticated`: the prior single-purpose
+    // socket owner awaited the initial REST feed/unread-count fetch before opening the
+    // WebSocket, so a live push could never race an empty/incomplete `notificationsRef`.
+    // Preserved here rather than connecting immediately, since `refresh()`'s
+    // `replaceNotifications(...)` is unconditional and would silently drop a message that
+    // arrived and patched state before the initial REST response landed.
+    const [seeded, setSeeded] = useState(false);
+    const { subscribe } = useRealtimeCore({
+        active: authenticated && seeded,
+        wsUrl: getWebSocketUrl(wsUrlBase),
+    });
+    const handleRealtimeMessage = useCallback((data) => {
+        if (data.type === 'notification.status') {
+            let unreadDelta = 0;
+            const nextNotifications = notificationsRef.current.map((notification) => {
+                if (notification.notification_id !== data.notification_id)
+                    return notification;
+                const wasUnread = !notification.seen && !notification.dismissed;
+                const patched = patchStatus(notification, data.status || {});
+                const isUnread = !patched.seen && !patched.dismissed;
+                if (wasUnread !== isUnread) {
+                    unreadDelta += isUnread ? 1 : -1;
+                }
+                return patched;
+            });
+            replaceNotifications(nextNotifications);
+            if (unreadDelta) {
+                setUnreadCount((count) => Math.max(0, count + unreadDelta));
+            }
+            return;
+        }
+        const pushedNotification = normalizeNotificationPush(data);
+        replaceNotifications([pushedNotification, ...notificationsRef.current]);
+        setUnreadCount((count) => count + 1);
+    }, [replaceNotifications]);
+    useEffect(() => {
+        if (!authenticated)
+            return undefined;
+        return subscribe(DEFAULT_ENVELOPE, handleRealtimeMessage);
+    }, [authenticated, subscribe, handleRealtimeMessage]);
     useEffect(() => {
         if (!authenticated) {
             replaceNotifications([]);
             setUnreadCount(0);
+            setSeeded(false);
             return undefined;
         }
-        let active = true;
-        let reconnectTimer = null;
-        let backoffMs = INITIAL_BACKOFF_MS;
-        const patchNotifications = (updater) => {
-            const nextNotifications = updater(notificationsRef.current);
-            replaceNotifications(nextNotifications);
-        };
-        const handleMessage = (event) => {
-            let data;
-            try {
-                data = JSON.parse(event.data);
-            }
-            catch (_a) {
-                return;
-            }
-            if (data.type === 'notification.status') {
-                let unreadDelta = 0;
-                patchNotifications((current) => current.map((notification) => {
-                    if (notification.notification_id !== data.notification_id)
-                        return notification;
-                    const wasUnread = !notification.seen && !notification.dismissed;
-                    const patched = patchStatus(notification, data.status || {});
-                    const isUnread = !patched.seen && !patched.dismissed;
-                    if (wasUnread !== isUnread) {
-                        unreadDelta += isUnread ? 1 : -1;
-                    }
-                    return patched;
-                }));
-                if (unreadDelta) {
-                    setUnreadCount((count) => Math.max(0, count + unreadDelta));
-                }
-                return;
-            }
-            const pushedNotification = normalizeNotificationPush(data);
-            patchNotifications((current) => [pushedNotification, ...current]);
-            setUnreadCount((count) => count + 1);
-        };
-        const connect = () => {
-            if (!active || socketRef.current)
-                return;
-            const socket = new WebSocket(getWebSocketUrl(wsUrlBase));
-            socketRef.current = socket;
-            socket.onopen = () => {
-                backoffMs = INITIAL_BACKOFF_MS;
-            };
-            socket.onmessage = handleMessage;
-            socket.onerror = () => {
-                socket.close();
-            };
-            socket.onclose = () => {
-                if (socketRef.current === socket) {
-                    socketRef.current = null;
-                }
-                if (!active || reconnectTimer)
-                    return;
-                reconnectTimer = setTimeout(() => {
-                    reconnectTimer = null;
-                    connect();
-                }, backoffMs);
-                backoffMs = Math.min(backoffMs * 2, MAX_BACKOFF_MS);
-            };
-        };
-        const seedAndConnect = async () => {
-            try {
-                await refresh();
-            }
-            catch (_a) {
-                // The live stream remains useful if the initial REST request is temporarily unavailable.
-            }
-            if (active)
-                connect();
-        };
-        seedAndConnect();
+        let cancelled = false;
+        refresh()
+            .catch(() => {
+            // The live stream remains useful if the initial REST request is temporarily unavailable.
+        })
+            .finally(() => {
+            if (!cancelled)
+                setSeeded(true);
+        });
         return () => {
-            active = false;
-            clearTimeout(reconnectTimer);
-            const socket = socketRef.current;
-            socketRef.current = null;
-            if (socket)
-                socket.close();
+            cancelled = true;
         };
-    }, [authenticated, refresh, replaceNotifications, wsUrlBase]);
+    }, [authenticated, refresh, replaceNotifications]);
     const mark = useCallback((action, ids) => {
         const selectedIds = Array.isArray(ids) ? ids : [];
         const selected = new Set(selectedIds);
@@ -176,14 +146,14 @@ export function NotificationsProvider({ children, wsUrlBase }) {
     const markSeen = useCallback((ids) => mark('seen', ids), [mark]);
     const markDismissed = useCallback((ids) => mark('dismissed', ids), [mark]);
     const markDone = useCallback((ids) => mark('done', ids), [mark]);
-    return (_jsx(NotificationsContext.Provider, { value: {
-            notifications,
-            unreadCount,
-            markSeen,
-            markDismissed,
-            markDone,
-            refresh,
-        }, children: children }));
+    return (_jsx(RealtimeContext.Provider, { value: { subscribe }, children: _jsx(NotificationsContext.Provider, { value: {
+                notifications,
+                unreadCount,
+                markSeen,
+                markDismissed,
+                markDone,
+                refresh,
+            }, children: children }) }));
 }
 export function useNotifications() {
     const context = useContext(NotificationsContext);

package/dist/notifications/realtime.js

@@ -0,0 +1,110 @@
+import { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+const INITIAL_BACKOFF_MS = 1000;
+const MAX_BACKOFF_MS = 30000;
+// Envelope discriminator for the notifications domain. A message with no
+// `envelope` field (pre-NOTIF-13 dcm) is treated as this default so an
+// un-bumped backend keeps working unchanged (backward-compat).
+export const DEFAULT_ENVELOPE = 'notification';
+const RealtimeContext = createContext(null);
+export function useRealtime() {
+    const context = useContext(RealtimeContext);
+    if (!context) {
+        throw new Error('useRealtime must be used within a NotificationsProvider');
+    }
+    return context;
+}
+export { RealtimeContext };
+/**
+ * Owns the single WebSocket connection and an envelope-keyed subscriber
+ * registry. Internal — consumed only by NotificationsProvider, which
+ * re-exposes `subscribe` via RealtimeContext so useRealtime() works without
+ * a separate provider apps have to mount.
+ *
+ * Backoff, reconnect, and cleanup semantics are unchanged from the prior
+ * single-purpose socket owner. `active`/`wsUrl` are primitives, so the
+ * effect does not re-run (and does not reconnect) on unrelated re-renders.
+ */
+export function useRealtimeCore({ active, wsUrl }) {
+    const socketRef = useRef(null);
+    const subscribersRef = useRef(new Map());
+    const subscribe = useCallback((envelope, handler) => {
+        const subscribers = subscribersRef.current;
+        if (!subscribers.has(envelope)) {
+            subscribers.set(envelope, new Set());
+        }
+        subscribers.get(envelope).add(handler);
+        return () => {
+            const handlers = subscribers.get(envelope);
+            if (!handlers)
+                return;
+            handlers.delete(handler);
+            if (handlers.size === 0) {
+                subscribers.delete(envelope);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (!active)
+            return undefined;
+        let isActive = true;
+        let reconnectTimer = null;
+        let backoffMs = INITIAL_BACKOFF_MS;
+        const handleMessage = (event) => {
+            var _a;
+            let data;
+            try {
+                data = JSON.parse(event.data);
+            }
+            catch (_b) {
+                return;
+            }
+            const envelope = (_a = data.envelope) !== null && _a !== void 0 ? _a : DEFAULT_ENVELOPE;
+            const handlers = subscribersRef.current.get(envelope);
+            if (!handlers || handlers.size === 0)
+                return;
+            handlers.forEach((handler) => {
+                try {
+                    handler(data);
+                }
+                catch (error) {
+                    console.error('Realtime subscriber error', error);
+                }
+            });
+        };
+        const connect = () => {
+            if (!isActive || socketRef.current)
+                return;
+            const socket = new WebSocket(wsUrl);
+            socketRef.current = socket;
+            socket.onopen = () => {
+                backoffMs = INITIAL_BACKOFF_MS;
+            };
+            socket.onmessage = handleMessage;
+            socket.onerror = () => {
+                socket.close();
+            };
+            socket.onclose = () => {
+                if (socketRef.current === socket) {
+                    socketRef.current = null;
+                }
+                if (!isActive || reconnectTimer)
+                    return;
+                reconnectTimer = setTimeout(() => {
+                    reconnectTimer = null;
+                    connect();
+                }, backoffMs);
+                backoffMs = Math.min(backoffMs * 2, MAX_BACKOFF_MS);
+            };
+        };
+        connect();
+        return () => {
+            isActive = false;
+            clearTimeout(reconnectTimer);
+            const socket = socketRef.current;
+            socketRef.current = null;
+            if (socket)
+                socket.close();
+        };
+    }, [active, wsUrl]);
+    return { subscribe };
+}

package/dist/pages/SignUpPage.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { Alert, Box, Button, Stack, TextField, Typography, } from '@mui/material';
 import { Helmet } from 'react-helmet';
@@ -7,6 +7,11 @@ import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
 import { submitRegistrationRequest } from '../auth/authApi';
+import { TurnstileWidget } from '../components/TurnstileWidget';
+const TURNSTILE_SIGNUP_MODES = new Set([
+    'self_signup_open',
+    'self_signup_email_domain',
+]);
 const MODE_LABELS = {
     self_signup_access_code: 'Auth.SIGNUP_ACCESS_CODE_TAB',
     self_signup_open: 'Auth.SIGNUP_OPEN_TAB',
@@ -47,6 +52,10 @@ export function SignUpPage() {
     const [submitting, setSubmitting] = useState(false);
     const [successKey, setSuccessKey] = useState(null);
     const [errorKey, setErrorKey] = useState(null);
+    const [turnstileToken, setTurnstileToken] = useState('');
+    const turnstileWidgetRef = useRef(null);
+    const turnstileRequired = Boolean(authMethods === null || authMethods === void 0 ? void 0 : authMethods.turnstile_site_key)
+        && TURNSTILE_SIGNUP_MODES.has(mode);
     const pageSubtitle = useMemo(() => {
         if (mode === 'self_signup_qr' && tokenFromUrl) {
             return t('Auth.PAGE_SIGNUP_SUBTITLE_QR_READY', 'Enter your email address to complete sign-up with the QR link you opened.');
@@ -56,7 +65,11 @@ export function SignUpPage() {
     useEffect(() => {
         setMode(initialMode);
     }, [initialMode]);
+    useEffect(() => {
+        setTurnstileToken('');
+    }, [mode, authMethods === null || authMethods === void 0 ? void 0 : authMethods.turnstile_site_key]);
     const handleSubmit = async (event) => {
+        var _a;
         event.preventDefault();
         setSuccessKey(null);
         setErrorKey(null);
@@ -72,6 +85,8 @@ export function SignUpPage() {
             setErrorKey('Auth.SIGNUP_QR_INVALID');
             return;
         }
+        if (turnstileRequired && !turnstileToken)
+            return;
         setSubmitting(true);
         try {
             await submitRegistrationRequest({
@@ -79,11 +94,16 @@ export function SignUpPage() {
                 mode,
                 accessCode,
                 registrationContextToken: mode === 'self_signup_qr' ? tokenFromUrl : null,
+                turnstileToken: turnstileRequired ? turnstileToken : undefined,
             });
             setSuccessKey('Auth.INVITE_REQUEST_SUCCESS');
         }
         catch (err) {
             setErrorKey(err.code || 'Auth.INVITE_FAILED');
+            if (turnstileRequired) {
+                setTurnstileToken('');
+                (_a = turnstileWidgetRef.current) === null || _a === void 0 ? void 0 : _a.reset();
+            }
         }
         finally {
             setSubmitting(false);
@@ -92,7 +112,7 @@ export function SignUpPage() {
     const handleGoToLogin = () => {
         navigate('/login');
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.')) })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || signupModes.length === 0, children: submitting
+    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), successKey && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.')) })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), turnstileRequired && (_jsx(TurnstileWidget, { ref: turnstileWidgetRef, siteKey: authMethods.turnstile_site_key, onToken: setTurnstileToken })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || signupModes.length === 0 || (turnstileRequired && !turnstileToken), children: submitting
                             ? t('Auth.SIGNUP_SUBMITTING')
                             : t('Auth.SIGNUP_SUBMIT') })] }), _jsx(Box, { sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: [t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT'), ' ', _jsx(Button, { onClick: handleGoToLogin, variant: "text", size: "small", children: t('Auth.SIGNUP_GO_TO_LOGIN') })] }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.11.0",
+  "version": "2.13.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/auth/AuthContext.jsx

@@ -19,6 +19,7 @@ const DEFAULT_AUTH_METHODS = {
   password_reset: true,
   signup: true,
   signup_modes: ['self_signup_access_code'],
+  turnstile_site_key: '',
   password_change: true,
   social_login: true,
   social_providers: ['google', 'microsoft'],

package/src/auth/authApi.jsx

@@ -359,6 +359,7 @@ export async function submitRegistrationRequest({
   accessCode,
   registrationContextToken,
   registrationContext,
+  turnstileToken,
 }) {
   const payload = { email, mode };
   if (accessCode) payload.access_code = accessCode;
@@ -368,6 +369,7 @@ export async function submitRegistrationRequest({
   if (registrationContext) {
     payload.registration_context = registrationContext;
   }
+  if (turnstileToken) payload.turnstile_token = turnstileToken;
 
   try {
     const res = await apiClient.post(`${USERS_BASE}/register-request/`, payload);

package/src/components/TurnstileWidget.jsx

@@ -0,0 +1,99 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+
+const TURNSTILE_SCRIPT_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+const TURNSTILE_SCRIPT_SELECTOR = 'script[data-turnstile-api="true"]';
+
+let turnstileScriptPromise;
+
+function loadTurnstileScript() {
+  if (window.turnstile?.render) {
+    return Promise.resolve(window.turnstile);
+  }
+
+  if (!turnstileScriptPromise) {
+    turnstileScriptPromise = new Promise((resolve, reject) => {
+      let script = document.querySelector(TURNSTILE_SCRIPT_SELECTOR);
+      if (!script) {
+        script = document.createElement('script');
+        script.src = TURNSTILE_SCRIPT_URL;
+        script.async = true;
+        script.defer = true;
+        script.dataset.turnstileApi = 'true';
+        document.head.appendChild(script);
+      }
+
+      script.addEventListener('load', () => {
+        if (window.turnstile?.render) {
+          resolve(window.turnstile);
+        } else {
+          reject(new Error('Turnstile did not initialize.'));
+        }
+      }, { once: true });
+      script.addEventListener('error', () => {
+        reject(new Error('Turnstile could not be loaded.'));
+      }, { once: true });
+    });
+  }
+
+  return turnstileScriptPromise;
+}
+
+export const TurnstileWidget = forwardRef(function TurnstileWidget(
+  { siteKey, onToken },
+  ref,
+) {
+  const containerRef = useRef(null);
+  const widgetIdRef = useRef(null);
+  const onTokenRef = useRef(onToken);
+
+  useEffect(() => {
+    onTokenRef.current = onToken;
+  }, [onToken]);
+
+  const reset = useCallback(() => {
+    if (widgetIdRef.current !== null && window.turnstile?.reset) {
+      window.turnstile.reset(widgetIdRef.current);
+    }
+    onTokenRef.current('');
+  }, []);
+
+  useImperativeHandle(ref, () => ({ reset }), [reset]);
+
+  useEffect(() => {
+    if (!siteKey) return undefined;
+
+    let cancelled = false;
+    loadTurnstileScript()
+      .then((turnstile) => {
+        if (cancelled || !containerRef.current) return;
+
+        widgetIdRef.current = turnstile.render(containerRef.current, {
+          sitekey: siteKey,
+          callback: (token) => onTokenRef.current(token),
+          'expired-callback': reset,
+          'error-callback': () => onTokenRef.current(''),
+        });
+      })
+      .catch(() => {
+        if (!cancelled) onTokenRef.current('');
+      });
+
+    return () => {
+      cancelled = true;
+      if (widgetIdRef.current !== null && window.turnstile?.remove) {
+        window.turnstile.remove(widgetIdRef.current);
+      }
+      widgetIdRef.current = null;
+    };
+  }, [siteKey, reset]);
+
+  if (!siteKey) return null;
+
+  return <div ref={containerRef} data-testid="turnstile-widget" />;
+});

package/src/index.js

@@ -46,6 +46,7 @@ export { authTranslations } from './i18n/authTranslations';
 export { NotificationSettings } from './notifications/NotificationSettings';
 export * from './notifications/api';
 export { NotificationsProvider, useNotifications } from './notifications/NotificationsProvider';
+export { useRealtime } from './notifications/realtime';
 export { NotificationBell } from './notifications/NotificationBell';
 export { getNotificationFeed, getUnreadCount, markNotifications } from './notifications/feedApi';