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

package/src/notifications/NotificationsProvider.jsx

@@ -2,9 +2,7 @@ import { createContext, useCallback, useContext, useEffect, useRef, useState } f
 
 import { AuthContext } from '../auth/AuthContext';
 import { getNotificationFeed, getUnreadCount, markNotifications } from './feedApi';
-
-const INITIAL_BACKOFF_MS = 1_000;
-const MAX_BACKOFF_MS = 30_000;
+import { DEFAULT_ENVELOPE, RealtimeContext, useRealtimeCore } from './realtime';
 
 const NotificationsContext = createContext(null);
 
@@ -62,7 +60,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;
@@ -84,99 +81,71 @@ export function NotificationsProvider({ children, wsUrlBase }) {
     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;
+  // 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 patchNotifications = (updater) => {
-      const nextNotifications = updater(notificationsRef.current);
+  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);
-    };
-
-    const handleMessage = (event) => {
-      let data;
-      try {
-        data = JSON.parse(event.data);
-      } catch {
-        return;
+      if (unreadDelta) {
+        setUnreadCount((count) => Math.max(0, count + unreadDelta));
       }
+      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);
+    replaceNotifications([pushedNotification, ...notificationsRef.current]);
+    setUnreadCount((count) => count + 1);
+  }, [replaceNotifications]);
 
-      const pushedNotification = normalizeNotificationPush(data);
-      patchNotifications((current) => [pushedNotification, ...current]);
-      setUnreadCount((count) => count + 1);
-    };
+  useEffect(() => {
+    if (!authenticated) return undefined;
+    return subscribe(DEFAULT_ENVELOPE, handleRealtimeMessage);
+  }, [authenticated, subscribe, handleRealtimeMessage]);
 
-    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);
-      };
-    };
+  useEffect(() => {
+    if (!authenticated) {
+      replaceNotifications([]);
+      setUnreadCount(0);
+      setSeeded(false);
+      return undefined;
+    }
 
-    const seedAndConnect = async () => {
-      try {
-        await refresh();
-      } catch {
+    let cancelled = false;
+    refresh()
+      .catch(() => {
         // The live stream remains useful if the initial REST request is temporarily unavailable.
-      }
-      if (active) connect();
-    };
-
-    seedAndConnect();
+      })
+      .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 : [];
@@ -210,16 +179,18 @@ export function NotificationsProvider({ children, wsUrlBase }) {
   const markDone = useCallback((ids) => mark('done', ids), [mark]);
 
   return (
-    <NotificationsContext.Provider value={{
-      notifications,
-      unreadCount,
-      markSeen,
-      markDismissed,
-      markDone,
-      refresh,
-    }}>
-      {children}
-    </NotificationsContext.Provider>
+    <RealtimeContext.Provider value={{ subscribe }}>
+      <NotificationsContext.Provider value={{
+        notifications,
+        unreadCount,
+        markSeen,
+        markDismissed,
+        markDone,
+        refresh,
+      }}>
+        {children}
+      </NotificationsContext.Provider>
+    </RealtimeContext.Provider>
   );
 }
 

package/src/notifications/realtime.jsx

@@ -0,0 +1,118 @@
+import { createContext, useCallback, useContext, useEffect, useRef } from 'react';
+
+const INITIAL_BACKOFF_MS = 1_000;
+const MAX_BACKOFF_MS = 30_000;
+
+// 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) => {
+      let data;
+      try {
+        data = JSON.parse(event.data);
+      } catch {
+        return;
+      }
+
+      const envelope = data.envelope ?? 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/src/pages/SignUpPage.jsx

@@ -1,4 +1,10 @@
-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,
@@ -13,6 +19,12 @@ 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',
@@ -60,6 +72,11 @@ 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?.turnstile_site_key)
+    && TURNSTILE_SIGNUP_MODES.has(mode);
 
   const pageSubtitle = useMemo(() => {
     if (mode === 'self_signup_qr' && tokenFromUrl) {
@@ -78,6 +95,10 @@ export function SignUpPage() {
     setMode(initialMode);
   }, [initialMode]);
 
+  useEffect(() => {
+    setTurnstileToken('');
+  }, [mode, authMethods?.turnstile_site_key]);
+
   const handleSubmit = async (event) => {
     event.preventDefault();
     setSuccessKey(null);
@@ -98,6 +119,8 @@ export function SignUpPage() {
       return;
     }
 
+    if (turnstileRequired && !turnstileToken) return;
+
     setSubmitting(true);
     try {
       await submitRegistrationRequest({
@@ -105,10 +128,15 @@ 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('');
+        turnstileWidgetRef.current?.reset();
+      }
     } finally {
       setSubmitting(false);
     }
@@ -186,10 +214,18 @@ export function SignUpPage() {
           />
         )}
 
+        {turnstileRequired && (
+          <TurnstileWidget
+            ref={turnstileWidgetRef}
+            siteKey={authMethods.turnstile_site_key}
+            onToken={setTurnstileToken}
+          />
+        )}
+
         <Button
           type="submit"
           variant="contained"
-          disabled={submitting || signupModes.length === 0}
+          disabled={submitting || signupModes.length === 0 || (turnstileRequired && !turnstileToken)}
         >
           {submitting
             ? t('Auth.SIGNUP_SUBMITTING')

package/tests/NotificationsProvider.test.jsx

@@ -136,6 +136,7 @@ describe('NotificationsProvider', () => {
   it('decrements unread count on a cross-tab status push and does not double-count a repeat push', async () => {
     renderProvider();
     await waitFor(() => expect(screen.getByTestId('unread-count').textContent).toBe('2'));
+    await waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
 
     MockWebSocket.instances[0].onmessage({ data: JSON.stringify({
       type: 'notification.status',

package/tests/SignUpPage.test.jsx

@@ -0,0 +1,138 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const authApi = vi.hoisted(() => ({
+  submitRegistrationRequest: vi.fn(),
+}));
+
+vi.mock('../src/auth/authApi', () => authApi);
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => vi.fn(),
+  useLocation: () => ({ search: '' }),
+}));
+vi.mock('react-helmet', () => ({ Helmet: ({ children }) => <>{children}</> }));
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key, fallback) => (typeof fallback === 'string' ? fallback : key) }),
+}));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { SignUpPage } from '../src/pages/SignUpPage';
+
+function renderSignUp({ signupModes, siteKey }) {
+  return render(
+    <AuthContext.Provider value={{ authMethods: {
+      signup: true,
+      signup_modes: signupModes,
+      turnstile_site_key: siteKey,
+    } }}>
+      <SignUpPage />
+    </AuthContext.Provider>,
+  );
+}
+
+describe('SignUpPage Turnstile integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    authApi.submitRegistrationRequest.mockResolvedValue({});
+    window.turnstile = {
+      render: vi.fn(() => 'widget-id'),
+      remove: vi.fn(),
+      reset: vi.fn(),
+    };
+  });
+
+  afterEach(() => {
+    cleanup();
+    delete window.turnstile;
+  });
+
+  it('renders only for open and email-domain signup modes when the site key is present', async () => {
+    renderSignUp({
+      signupModes: ['self_signup_open', 'self_signup_access_code', 'self_signup_email_domain'],
+      siteKey: 'site-key',
+    });
+
+    await waitFor(() => expect(screen.getByTestId('turnstile-widget')).toBeTruthy());
+    fireEvent.click(screen.getByRole('button', { name: 'self_signup_access_code' }));
+    expect(screen.queryByTestId('turnstile-widget')).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: 'self_signup_email_domain' }));
+    await waitFor(() => expect(screen.getByTestId('turnstile-widget')).toBeTruthy());
+  });
+
+  it('gates submission until verified and passes the Turnstile token to the registration API', async () => {
+    renderSignUp({ signupModes: ['self_signup_open'], siteKey: 'site-key' });
+
+    await waitFor(() => expect(window.turnstile.render).toHaveBeenCalledOnce());
+    fireEvent.change(screen.getByRole('textbox', { name: /Auth\.EMAIL_LABEL/ }), {
+      target: { value: 'ada@example.com' },
+    });
+
+    const submit = screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' });
+    expect(submit.disabled).toBe(true);
+
+    await act(async () => {
+      window.turnstile.render.mock.calls[0][1].callback('turnstile-token');
+    });
+
+    await waitFor(() => expect(submit.disabled).toBe(false));
+    fireEvent.click(submit);
+
+    await waitFor(() => expect(authApi.submitRegistrationRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        email: 'ada@example.com',
+        mode: 'self_signup_open',
+        turnstileToken: 'turnstile-token',
+      }),
+    ));
+  });
+
+  it('resets the widget after a failed protected signup submission', async () => {
+    authApi.submitRegistrationRequest.mockRejectedValue({ code: 'Auth.INVITE_FAILED' });
+    renderSignUp({ signupModes: ['self_signup_open'], siteKey: 'site-key' });
+
+    await waitFor(() => expect(window.turnstile.render).toHaveBeenCalledOnce());
+    fireEvent.change(screen.getByRole('textbox', { name: /Auth\.EMAIL_LABEL/ }), {
+      target: { value: 'ada@example.com' },
+    });
+    await act(async () => {
+      window.turnstile.render.mock.calls[0][1].callback('turnstile-token');
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' }));
+
+    await waitFor(() => expect(window.turnstile.reset).toHaveBeenCalledWith('widget-id'));
+    expect(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' }).disabled).toBe(true);
+  });
+
+  it('resets the widget and gates submission when its token expires', async () => {
+    renderSignUp({ signupModes: ['self_signup_open'], siteKey: 'site-key' });
+
+    await waitFor(() => expect(window.turnstile.render).toHaveBeenCalledOnce());
+    await act(async () => {
+      window.turnstile.render.mock.calls[0][1].callback('turnstile-token');
+    });
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' }).disabled).toBe(false));
+
+    await act(async () => {
+      window.turnstile.render.mock.calls[0][1]['expired-callback']();
+    });
+
+    expect(window.turnstile.reset).toHaveBeenCalledWith('widget-id');
+    expect(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' }).disabled).toBe(true);
+  });
+
+  it.each([
+    ['self_signup_access_code', 'site-key'],
+    ['self_signup_qr', 'site-key'],
+    ['self_signup_open', ''],
+  ])('does not render for %s without an eligible key/mode combination', async (mode, siteKey) => {
+    renderSignUp({ signupModes: [mode], siteKey });
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Auth.SIGNUP_SUBMIT' })).toBeTruthy());
+    expect(screen.queryByTestId('turnstile-widget')).toBeNull();
+    expect(window.turnstile.render).not.toHaveBeenCalled();
+  });
+});

package/tests/authApiRegistration.test.js

@@ -0,0 +1,31 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const client = vi.hoisted(() => ({
+  post: vi.fn(),
+}));
+
+vi.mock('../src/auth/apiClient', () => ({ default: client }));
+
+import { submitRegistrationRequest } from '../src/auth/authApi';
+
+describe('submitRegistrationRequest', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('includes a Turnstile token in the registration payload', async () => {
+    client.post.mockResolvedValue({ data: { ok: true } });
+
+    await submitRegistrationRequest({
+      email: 'ada@example.com',
+      mode: 'self_signup_open',
+      turnstileToken: 'turnstile-token',
+    });
+
+    expect(client.post).toHaveBeenCalledWith('/api/users/register-request/', {
+      email: 'ada@example.com',
+      mode: 'self_signup_open',
+      turnstile_token: 'turnstile-token',
+    });
+  });
+});