@micha.bigler/ui-core-micha 2.10.1 → 2.12.0

package/WORK_ORDERS.md

@@ -10,6 +10,7 @@ rules are defined centrally in `webapps/AGENTS.md` → "Work-Order Register".
 |---|---|
 | `ONB-*` | Onboarding wizard (steps, conditions, persistence) |
 | `PERF-*` | Performance improvements |
+| `NOTIF-*` | Shared notifications platform (dcm register is canonical; this repo's rows are its ucm-side WOs) |
 
 Introduce a new prefix when none fits and add it here. New WOs always get a
 prefixed ID; never reuse a bare flat number across workstreams.
@@ -19,4 +20,5 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | ID | Titel | Beschreibung | Datum | Status | Commit(s) | Notiz |
 |---|---|---|---|---|---|---|
 | 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 |  | 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. |
+| 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 |

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/i18n/notificationsTranslations.js

@@ -1,4 +1,7 @@
 export const notificationsTranslations = {
+    'NotificationBell.TITLE': { de: 'Benachrichtigungen', fr: 'Notifications', en: 'Notifications', sw: 'Arifa' },
+    'NotificationBell.EMPTY': { de: 'Keine Benachrichtigungen vorhanden.', fr: 'Aucune notification.', en: 'No notifications.', sw: 'Hakuna arifa.' },
+    'NotificationBell.MARK_ALL': { de: 'Alle als gelesen markieren', fr: 'Tout marquer comme lu', en: 'Mark all as read', sw: 'Weka zote alama kuwa zimesomwa' },
     'NotificationSettings.TITLE': { de: 'Benachrichtigungen', fr: 'Notifications', en: 'Notifications', sw: 'Arifa' },
     'NotificationSettings.SUBTITLE': { de: 'Lege fest, wie du informiert werden möchtest.', fr: 'Choisissez comment vous souhaitez être informé.', en: 'Choose how you want to be notified.', sw: 'Chagua jinsi unavyotaka kuarifiwa.' },
     'NotificationSettings.LOAD_ERROR': { de: 'Benachrichtigungseinstellungen konnten nicht geladen werden.', fr: 'Impossible de charger les paramètres de notification.', en: 'Notification settings could not be loaded.', sw: 'Mipangilio ya arifa haikuweza kupakiwa.' },

package/dist/index.js

@@ -32,6 +32,9 @@ export { authTranslations } from './i18n/authTranslations';
 // --- 7. Notifications ---
 export { NotificationSettings } from './notifications/NotificationSettings';
 export * from './notifications/api';
+export { NotificationsProvider, useNotifications } from './notifications/NotificationsProvider';
+export { NotificationBell } from './notifications/NotificationBell';
+export { getNotificationFeed, getUnreadCount, markNotifications } from './notifications/feedApi';
 // --- 8. Onboarding ---
 export * from './onboarding/api';
 export { selectActiveSteps } from './onboarding/stepSelection';

package/dist/notifications/NotificationBell.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import { Badge, Box, Button, IconButton, List, ListItemButton, ListItemText, Menu, Typography, } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useNotifications } from './NotificationsProvider';
+export function NotificationBell({ resolveLink }) {
+    const { t } = useTranslation();
+    const { notifications, unreadCount, markSeen } = useNotifications();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const unreadIds = notifications
+        .filter((notification) => !notification.seen && !notification.dismissed && notification.id != null)
+        .map((notification) => notification.id);
+    const handleItemClick = (notification) => {
+        var _a;
+        if (notification.id != null)
+            markSeen([notification.id]);
+        setAnchorEl(null);
+        if (resolveLink && ((_a = notification.content) === null || _a === void 0 ? void 0 : _a.link))
+            resolveLink(notification.content.link);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": t('NotificationBell.TITLE'), color: "inherit", onClick: (event) => setAnchorEl(event.currentTarget), children: _jsx(Badge, { badgeContent: unreadCount, color: "error", max: 99, children: _jsx(NotificationsIcon, {}) }) }), _jsx(Menu, { anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, onClose: () => setAnchorEl(null), open: open, transformOrigin: { horizontal: 'right', vertical: 'top' }, children: _jsxs(Box, { sx: { minWidth: 320 }, children: [_jsxs(Box, { sx: { alignItems: 'center', display: 'flex', justifyContent: 'space-between', px: 2, py: 1 }, children: [_jsx(Typography, { variant: "subtitle1", children: t('NotificationBell.TITLE') }), unreadIds.length > 0 && (_jsx(Button, { onClick: () => markSeen(unreadIds), size: "small", children: t('NotificationBell.MARK_ALL') }))] }), notifications.length === 0 ? (_jsx(Typography, { sx: { px: 2, py: 2 }, variant: "body2", children: t('NotificationBell.EMPTY') })) : (_jsx(List, { dense: true, disablePadding: true, children: notifications.map((notification) => {
+                                var _a, _b, _c, _d;
+                                return (_jsx(ListItemButton, { onClick: () => handleItemClick(notification), children: _jsx(ListItemText, { primary: t((_a = notification.content) === null || _a === void 0 ? void 0 : _a.title_key, ((_b = notification.content) === null || _b === void 0 ? void 0 : _b.params) || {}), secondary: ((_c = notification.content) === null || _c === void 0 ? void 0 : _c.body_key)
+                                            ? t(notification.content.body_key, notification.content.params || {})
+                                            : undefined, slotProps: { primary: { fontWeight: notification.seen || notification.dismissed ? 'regular' : 'bold' } } }) }, (_d = notification.id) !== null && _d !== void 0 ? _d : notification.notification_id));
+                            }) }))] }) })] }));
+}

package/dist/notifications/NotificationsProvider.js

@@ -0,0 +1,194 @@
+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;
+const NotificationsContext = createContext(null);
+function normalizeNotification(notification) {
+    var _a, _b, _c;
+    return Object.assign(Object.assign({}, notification), { content: notification.content || {}, seen: Boolean((_a = notification.seen) !== null && _a !== void 0 ? _a : notification.seen_at), dismissed: Boolean((_b = notification.dismissed) !== null && _b !== void 0 ? _b : notification.dismissed_at), done: Boolean((_c = notification.done) !== null && _c !== void 0 ? _c : notification.done_at) });
+}
+function normalizeNotificationPush(data) {
+    var _a, _b;
+    return normalizeNotification({
+        id: (_b = (_a = data.id) !== null && _a !== void 0 ? _a : data.recipient_id) !== null && _b !== void 0 ? _b : data.notification_id,
+        notification_id: data.notification_id,
+        notification_type: data.type,
+        content: data.content || {},
+        created_at: data.created_at,
+        seen_at: null,
+        dismissed_at: null,
+        done_at: null,
+    });
+}
+function getWebSocketUrl(wsUrlBase) {
+    if (wsUrlBase) {
+        return new URL('/ws/notifications/', wsUrlBase).toString();
+    }
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return `${protocol}//${window.location.host}/ws/notifications/`;
+}
+function patchStatus(notification, status) {
+    const seen = Boolean(status.seen);
+    const dismissed = Boolean(status.dismissed);
+    const done = Boolean(status.done);
+    return Object.assign(Object.assign({}, notification), { seen,
+        dismissed,
+        done, seen_at: seen ? notification.seen_at || true : null, dismissed_at: dismissed ? notification.dismissed_at || true : null, done_at: done ? notification.done_at || true : null });
+}
+export function NotificationsProvider({ children, wsUrlBase }) {
+    const auth = useContext(AuthContext);
+    const authenticated = Boolean(auth === null || auth === void 0 ? void 0 : auth.user);
+    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);
+    }, []);
+    const refresh = useCallback(async () => {
+        if (!authenticated) {
+            replaceNotifications([]);
+            setUnreadCount(0);
+            return { notifications: [], unreadCount: 0 };
+        }
+        const [feed, unread] = await Promise.all([getNotificationFeed(), getUnreadCount()]);
+        const nextNotifications = (feed.results || []).map(normalizeNotification);
+        const nextUnreadCount = unread.count || 0;
+        replaceNotifications(nextNotifications);
+        setUnreadCount(nextUnreadCount);
+        return { notifications: nextNotifications, unreadCount: nextUnreadCount };
+    }, [authenticated, replaceNotifications]);
+    useEffect(() => {
+        if (!authenticated) {
+            replaceNotifications([]);
+            setUnreadCount(0);
+            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();
+        return () => {
+            active = false;
+            clearTimeout(reconnectTimer);
+            const socket = socketRef.current;
+            socketRef.current = null;
+            if (socket)
+                socket.close();
+        };
+    }, [authenticated, refresh, replaceNotifications, wsUrlBase]);
+    const mark = useCallback((action, ids) => {
+        const selectedIds = Array.isArray(ids) ? ids : [];
+        const selected = new Set(selectedIds);
+        const current = notificationsRef.current;
+        let unreadDelta = 0;
+        const nextNotifications = current.map((notification) => {
+            if (!selected.has(notification.id))
+                return notification;
+            const wasUnread = !notification.seen && !notification.dismissed;
+            if ((action === 'seen' || action === 'dismissed') && wasUnread) {
+                unreadDelta += 1;
+            }
+            return patchStatus(notification, {
+                seen: action === 'seen' ? true : notification.seen,
+                dismissed: action === 'dismissed' ? true : notification.dismissed,
+                done: action === 'done' ? true : notification.done,
+            });
+        });
+        replaceNotifications(nextNotifications);
+        if (unreadDelta) {
+            setUnreadCount((count) => Math.max(0, count - unreadDelta));
+        }
+        return markNotifications({ action, ids: selectedIds });
+    }, [replaceNotifications]);
+    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 }));
+}
+export function useNotifications() {
+    const context = useContext(NotificationsContext);
+    if (!context) {
+        throw new Error('useNotifications must be used within a NotificationsProvider');
+    }
+    return context;
+}

package/dist/notifications/feedApi.js

@@ -0,0 +1,15 @@
+import apiClient from '../auth/apiClient';
+export async function getNotificationFeed({ status } = {}) {
+    const response = await apiClient.get('/api/notifications/feed/', {
+        params: status ? { status } : undefined,
+    });
+    return response.data;
+}
+export async function getUnreadCount() {
+    const response = await apiClient.get('/api/notifications/feed/unread-count/');
+    return response.data;
+}
+export async function markNotifications({ action, ids }) {
+    const response = await apiClient.post('/api/notifications/feed/mark/', { action, ids });
+    return response.data;
+}

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.10.1",
+  "version": "2.12.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/i18n/notificationsTranslations.ts

@@ -1,4 +1,7 @@
 export const notificationsTranslations = {
+  'NotificationBell.TITLE': { de: 'Benachrichtigungen', fr: 'Notifications', en: 'Notifications', sw: 'Arifa' },
+  'NotificationBell.EMPTY': { de: 'Keine Benachrichtigungen vorhanden.', fr: 'Aucune notification.', en: 'No notifications.', sw: 'Hakuna arifa.' },
+  'NotificationBell.MARK_ALL': { de: 'Alle als gelesen markieren', fr: 'Tout marquer comme lu', en: 'Mark all as read', sw: 'Weka zote alama kuwa zimesomwa' },
   'NotificationSettings.TITLE': { de: 'Benachrichtigungen', fr: 'Notifications', en: 'Notifications', sw: 'Arifa' },
   'NotificationSettings.SUBTITLE': { de: 'Lege fest, wie du informiert werden möchtest.', fr: 'Choisissez comment vous souhaitez être informé.', en: 'Choose how you want to be notified.', sw: 'Chagua jinsi unavyotaka kuarifiwa.' },
   'NotificationSettings.LOAD_ERROR': { de: 'Benachrichtigungseinstellungen konnten nicht geladen werden.', fr: 'Impossible de charger les paramètres de notification.', en: 'Notification settings could not be loaded.', sw: 'Mipangilio ya arifa haikuweza kupakiwa.' },

package/src/index.js

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