@micha.bigler/ui-core-micha 3.6.0 → 3.8.0

package/src/pages/PasswordInvitePage.jsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { Typography } from '@mui/material';
+import { Button, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { PasswordSetForm } from '../components/PasswordSetForm';
@@ -18,7 +18,9 @@ export function PasswordInvitePage() {
 
   const [submitting, setSubmitting] = useState(false);
   const [errorKey, setErrorKey] = useState(null);
+  const [submitErrorKey, setSubmitErrorKey] = useState(null);
   const [successKey, setSuccessKey] = useState(null);
+  const [continueTarget, setContinueTarget] = useState(null);
   const [checked, setChecked] = useState(false);
 
   // Unterscheidung Invite-Link vs klassischer Reset
@@ -55,12 +57,11 @@ export function PasswordInvitePage() {
 
   const handleSubmit = async (newPassword) => {
     if (!uid || !token) {
-      setErrorKey('Auth.RESET_LINK_INVALID');
       return;
     }
 
     setSubmitting(true);
-    setErrorKey(null);
+    setSubmitErrorKey(null);
     setSuccessKey(null);
 
     try {
@@ -99,9 +100,23 @@ export function PasswordInvitePage() {
       const target = safeNextPath
         ? `/login?next=${encodeURIComponent(safeNextPath)}`
         : '/login';
-      navigate(target);
+      setContinueTarget(target);
     } catch (err) {
-      setErrorKey(err.code || 'Auth.RESET_PASSWORD_FAILED');
+      // Told apart by CODE, not by the presence of `messages` (a submission
+      // can fail with a link problem too, e.g. the token expires in the gap
+      // between the page's initial verifyResetToken check and this submit) —
+      // only a password rejection keeps the form; a link problem must still
+      // end in the same invalid-link state the initial check produces.
+      if (err.code === 'Auth.RESET_LINK_INVALID') {
+        setErrorKey(err.code);
+      } else {
+        const responseMessages = err.raw?.messages || err.response?.data?.messages;
+        setSubmitErrorKey(
+          Array.isArray(responseMessages) && responseMessages.length > 0
+            ? responseMessages.join(' ')
+            : t(err.code || 'Auth.RESET_PASSWORD_FAILED'),
+        );
+      }
     } finally {
       setSubmitting(false);
     }
@@ -134,8 +149,22 @@ export function PasswordInvitePage() {
       )}
 
       {successKey && (
-        <Typography color="primary" gutterBottom>
-          {t(successKey)}
+        <>
+          <Typography color="primary" gutterBottom>
+            {t(successKey)}
+          </Typography>
+          <Button
+            variant="contained"
+            onClick={() => navigate(continueTarget)}
+          >
+            {t('Auth.SIGNUP_GO_TO_LOGIN')}
+          </Button>
+        </>
+      )}
+
+      {submitErrorKey && !successKey && (
+        <Typography color="error" gutterBottom>
+          {submitErrorKey}
         </Typography>
       )}
 

package/src/pages/SignUpPage.jsx

@@ -163,82 +163,93 @@ export function SignUpPage() {
         </title>
       </Helmet>
 
-      {successKey && (
-        <Alert severity="success" sx={SIGN_UP_PAGE_ALERT_SX}>
-          {t(successKey, { email })}
+      {signupModes.length === 0 ? (
+        <Alert severity="info" sx={SIGN_UP_PAGE_ALERT_SX}>
+          {t('Auth.SELF_SIGNUP_DISABLED', 'Self sign-up is currently disabled.')}
         </Alert>
-      )}
+      ) : (
+        <>
+          {successKey && (
+            <Alert severity="success" sx={SIGN_UP_PAGE_ALERT_SX}>
+              {t(successKey, { email })}
+            </Alert>
+          )}
 
-      {errorKey && (
-        <Alert severity="error" sx={SIGN_UP_PAGE_ALERT_SX}>
-          {t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.'))}
-        </Alert>
-      )}
+          {errorKey && (
+            <Alert severity="error" sx={SIGN_UP_PAGE_ALERT_SX}>
+              {t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.'))}
+            </Alert>
+          )}
 
-      {signupModes.length > 1 && (
-        <Stack spacing={1} sx={{ mb: 2 }}>
-          <Stack spacing={1}>
-            {signupModes.map((entry) => (
-              <Button
-                key={entry}
-                variant={mode === entry ? 'contained' : 'outlined'}
-                onClick={() => setMode(entry)}
-                disabled={submitting}
-                fullWidth
-              >
-                {t(MODE_LABELS[entry] || entry, entry)}
-              </Button>
-            ))}
-          </Stack>
-        </Stack>
-      )}
+          {signupModes.length > 1 && (
+            <Stack spacing={1} sx={{ mb: 2 }}>
+              <Stack spacing={1}>
+                {signupModes.map((entry) => (
+                  <Button
+                    key={entry}
+                    variant={mode === entry ? 'contained' : 'outlined'}
+                    onClick={() => setMode(entry)}
+                    disabled={submitting}
+                    fullWidth
+                  >
+                    {t(MODE_LABELS[entry] || entry, entry)}
+                  </Button>
+                ))}
+              </Stack>
+            </Stack>
+          )}
 
-      <Box
-        component="form"
-        onSubmit={handleSubmit}
-        sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
-      >
-        <TextField
-          label={t('Auth.EMAIL_LABEL')}
-          type="email"
-          required
-          fullWidth
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          disabled={submitting}
-        />
+          <Box
+            component="form"
+            onSubmit={handleSubmit}
+            sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
+          >
+            <TextField
+              label={t('Auth.EMAIL_LABEL')}
+              type="email"
+              required
+              fullWidth
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={submitting}
+            />
 
-        {mode === 'self_signup_access_code' && (
-          <TextField
-            label={t('Auth.ACCESS_CODE_LABEL')}
-            type="text"
-            required
-            fullWidth
-            value={accessCode}
-            onChange={(e) => setAccessCode(e.target.value)}
-            disabled={submitting}
-          />
-        )}
+            {mode === 'self_signup_access_code' && (
+              <TextField
+                label={t('Auth.ACCESS_CODE_LABEL')}
+                type="text"
+                required
+                fullWidth
+                value={accessCode}
+                onChange={(e) => setAccessCode(e.target.value)}
+                disabled={submitting}
+              />
+            )}
 
-        {turnstileRequired && (
-          <TurnstileWidget
-            ref={turnstileWidgetRef}
-            siteKey={authMethods.turnstile_site_key}
-            onToken={setTurnstileToken}
-          />
-        )}
+            {turnstileRequired && (
+              <TurnstileWidget
+                ref={turnstileWidgetRef}
+                siteKey={authMethods.turnstile_site_key}
+                onToken={setTurnstileToken}
+              />
+            )}
 
-        <Button
-          type="submit"
-          variant="contained"
-          disabled={submitting || signupModes.length === 0 || (turnstileRequired && !turnstileToken)}
-        >
-          {submitting
-            ? t('Auth.SIGNUP_SUBMITTING')
-            : t('Auth.SIGNUP_SUBMIT')}
-        </Button>
-      </Box>
+            <Button
+              type="submit"
+              variant="contained"
+              disabled={submitting || (turnstileRequired && !turnstileToken)}
+            >
+              {submitting
+                ? t('Auth.SIGNUP_SUBMITTING')
+                : t('Auth.SIGNUP_SUBMIT')}
+            </Button>
+          </Box>
+        </>
+      )}
 
+      {/* Always rendered, closed or open — a closed signup page must still
+          leave the person a way forward (the Envelope's own Goal), not just
+          say why the form is missing. */}
       <Box sx={{ mt: 3 }}>
         <Typography variant="body2">
           {t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT')}{' '}

package/src/theme/createAppTheme.js

@@ -7,7 +7,9 @@ import {
   BASELINE_PALETTE,
   BASELINE_STATIC,
   MOTION,
+  withMainShades,
 } from './tokens';
+import { calculateContrastRatio } from './themeCompleteness';
 
 function findFunction(value, path) {
   if (typeof value === 'function') return path;
@@ -53,6 +55,43 @@ function deriveFocusColour(primary, surfaces) {
   return focus;
 }
 
+function clearsPageContrast(colour, surfaces, threshold) {
+  return surfaces.every((surface) => {
+    const ratio = calculateContrastRatio(colour, surface);
+    return Number.isFinite(ratio) && ratio >= threshold;
+  });
+}
+
+function deriveDarkenedPageColour(original, surfaces, threshold) {
+  if (clearsPageContrast(original, surfaces, threshold)) return original;
+
+  let colour = original;
+  for (let coefficient = 0.05; !clearsPageContrast(colour, surfaces, threshold); coefficient += 0.05) {
+    colour = darken(original, Math.min(coefficient, 0.9));
+    if (coefficient >= 0.9) break;
+  }
+  return colour;
+}
+
+const RGBA_PATTERN = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d*\.?\d+)\s*\)$/;
+
+function deriveAlphaPageColour(original, surfaces, threshold) {
+  if (clearsPageContrast(original, surfaces, threshold)) return original;
+
+  const match = original.match(RGBA_PATTERN);
+  if (!match) return original;
+
+  const [, red, green, blue, alphaText] = match;
+  let alpha = Number(alphaText);
+  let colour = original;
+  while (alpha < 1) {
+    alpha = Math.min(1, Number((alpha + 0.05).toFixed(2)));
+    colour = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+    if (clearsPageContrast(colour, surfaces, threshold)) return colour;
+  }
+  return colour;
+}
+
 function createPaletteAwareComponents(palette) {
   const stateTransition = `border-color ${MOTION.duration.fast}ms ${MOTION.easing.state}, color ${MOTION.duration.fast}ms ${MOTION.easing.state}, background-color ${MOTION.duration.fast}ms ${MOTION.easing.state}`;
   const autofill = {
@@ -179,13 +218,38 @@ export function createAppTheme(appConfig = {}) {
     { palette: appConfig.palette },
   );
   const finalPalette = paletteTheme.palette;
+  const contrastSurfaces = ['#FFFFFF', finalPalette.background.default];
+  const derivedStatusEntries = {};
+  for (const status of ['success', 'warning', 'error', 'info']) {
+    if (appConfig.palette?.[status]?.main !== undefined) continue;
+
+    const current = finalPalette[status];
+    const main = deriveDarkenedPageColour(current.main, contrastSurfaces, 4.5);
+    if (main !== current.main) {
+      derivedStatusEntries[status] = {
+        ...current,
+        ...withMainShades(main, current.contrastText),
+      };
+    }
+  }
+
+  const derivedControlBorderEntries = {};
+  for (const state of ['main', 'hover', 'error']) {
+    if (appConfig.palette?.controlBorder?.[state] !== undefined) continue;
+
+    const current = finalPalette.controlBorder[state];
+    const derived = state === 'error'
+      ? deriveDarkenedPageColour(current, contrastSurfaces, 3)
+      : deriveAlphaPageColour(current, contrastSurfaces, 3);
+    if (derived !== current) derivedControlBorderEntries[state] = derived;
+  }
+
   const computedPalette = {
+    ...derivedStatusEntries,
     controlBorder: {
       ...finalPalette.controlBorder,
-      focus: deriveFocusColour(finalPalette.primary.main, [
-        '#FFFFFF',
-        finalPalette.background.default,
-      ]),
+      ...derivedControlBorderEntries,
+      focus: deriveFocusColour(finalPalette.primary.main, contrastSurfaces),
     },
   };
   const resolvedPalette = { ...finalPalette, ...computedPalette };

package/src/theme/kitSxRegistry.js

@@ -69,7 +69,11 @@ import {
   ATTACHMENT_LIST_ALERT_SX,
   ATTACHMENT_LIST_LIGHTBOX_ACTION_SX,
 } from '../messaging/AttachmentList';
-import { COMPOSER_EMOJI_BUTTON_SX } from '../messaging/Composer';
+import {
+  COMPOSER_EMOJI_BUTTON_SX,
+  COMPOSER_MESSAGE_FIELD_SX,
+  COMPOSER_SEND_BUTTON_SX,
+} from '../messaging/Composer';
 import { DIRECT_MESSAGE_LAUNCHER_ALERT_SX } from '../messaging/DirectMessageLauncher';
 import { MESSAGE_BUBBLE_ACTION_SX, MESSAGE_BUBBLE_ROOT_SX } from '../messaging/MessageBubble';
 import {
@@ -112,6 +116,8 @@ const SX_EXPORTS = {
   CHART_FRAME_ALERT_SX,
   CHART_FRAME_ROOT_SX,
   COMPOSER_EMOJI_BUTTON_SX,
+  COMPOSER_MESSAGE_FIELD_SX,
+  COMPOSER_SEND_BUTTON_SX,
   DIRECT_MESSAGE_LAUNCHER_ALERT_SX,
   LOGIN_FORM_DIVIDER_SX,
   LOGIN_PAGE_ALERT_SX,
@@ -243,6 +249,8 @@ export const KIT_COMPONENT_SX_REGISTRY = [
   entry('AttachmentList.lightboxAction', 'MuiIconButton', ATTACHMENT_LIST_LIGHTBOX_ACTION_SX),
   entry('AttachmentList.alert', 'MuiAlert', ATTACHMENT_LIST_ALERT_SX),
   entry('Composer.emojiAction', 'MuiIconButton', COMPOSER_EMOJI_BUTTON_SX),
+  entry('Composer.messageField', 'MuiTextField', COMPOSER_MESSAGE_FIELD_SX),
+  entry('Composer.sendAction', 'MuiButton', COMPOSER_SEND_BUTTON_SX),
   entry('DirectMessageLauncher.alert', 'MuiAlert', DIRECT_MESSAGE_LAUNCHER_ALERT_SX),
   entry('MessageBubble.root', 'MuiPaper', MESSAGE_BUBBLE_ROOT_SX),
   entry('MessageBubble.action', 'MuiIconButton', MESSAGE_BUBBLE_ACTION_SX),

package/src/theme/tokens.js

@@ -8,7 +8,7 @@ import { darken, lighten } from '@mui/material/styles';
 // though `text`/`fill`/`bg` are set correctly, so every status channel MUI
 // recognises (success/warning/error/info) must carry its own explicit
 // main/light/dark/contrastText, computed the same way augmentColor would.
-const withMainShades = (main, contrastText) => ({
+export const withMainShades = (main, contrastText) => ({
   main,
   light: lighten(main, 0.2),
   dark: darken(main, 0.3),

package/tests/EmptyState.test.jsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import fs from 'node:fs';
+import path from 'node:path';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@mui/material/styles';
+
+import EmptyState from '../src/components/EmptyState';
+import { createAppTheme, reportOffPaletteColours } from '../src/theme';
+
+const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+
+function renderEmptyState(props) {
+  return render(<ThemeProvider theme={theme}><EmptyState {...props} /></ThemeProvider>);
+}
+
+afterEach(() => cleanup());
+
+describe('EmptyState', () => {
+  it('renders its title as text content, driven by the prop', () => {
+    renderEmptyState({ title: 'No events yet' });
+
+    expect(screen.getByText('No events yet')).toBeTruthy();
+    cleanup();
+
+    renderEmptyState({ title: 'No songs yet' });
+
+    expect(screen.getByText('No songs yet')).toBeTruthy();
+    expect(screen.queryByText('No events yet')).toBeNull();
+  });
+
+  it('renders an optional description, driven by the prop', () => {
+    renderEmptyState({ title: 'No events yet', description: 'Create an event to see it here.' });
+
+    expect(screen.getByText('Create an event to see it here.')).toBeTruthy();
+    cleanup();
+
+    renderEmptyState({ title: 'No events yet' });
+
+    expect(screen.queryByText('Create an event to see it here.')).toBeNull();
+  });
+
+  it('renders an accessible real button and calls its action', () => {
+    const onClick = vi.fn();
+    renderEmptyState({
+      title: 'No events yet',
+      action: { label: 'Create event', onClick },
+    });
+
+    const button = screen.getByRole('button', { name: 'Create event' });
+    expect(button.tagName).toBe('BUTTON');
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('keeps the component source free of off-palette colour literals', () => {
+    const source = fs.readFileSync(path.resolve('src/components/EmptyState.jsx'), 'utf8');
+    const result = reportOffPaletteColours([{ path: 'src/components/EmptyState.jsx', source }]);
+
+    expect(result.findings).toEqual([]);
+  });
+});

package/tests/PasswordInvitePage.test.jsx

@@ -0,0 +1,135 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+
+const authApi = vi.hoisted(() => ({
+  verifyResetToken: vi.fn(),
+  setNewPassword: vi.fn(),
+}));
+
+vi.mock('../src/auth/authApi', () => authApi);
+vi.mock('react-helmet', () => ({ Helmet: ({ children }) => <>{children}</> }));
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, fallback) => ({
+      'Auth.PAGE_INVITE_TITLE': 'Set password',
+      'Auth.PAGE_INVITE_SUBTITLE': 'Choose a password.',
+      'Auth.PAGE_RESET_PASSWORD_TITLE': 'Reset password',
+      'Auth.PAGE_RESET_PASSWORD_SUBTITLE': 'Choose a new password.',
+      'Auth.PAGE_CHECKING_LINK_TITLE': 'Checking link',
+      'Auth.PAGE_CHECKING_LINK_TEXT': 'Checking…',
+      'Auth.RESET_LINK_INVALID': 'The link is invalid or expired.',
+      'Auth.RESET_PASSWORD_SUCCESS_INVITE': 'Password set successfully.',
+      'Auth.RESET_PASSWORD_SUCCESS_RESET': 'Password changed successfully.',
+      'Auth.SIGNUP_GO_TO_LOGIN': 'Go to login',
+      'Auth.NEW_PASSWORD_LABEL': 'New password',
+      'Auth.PASSWORD_CONFIRM_LABEL': 'Confirm password',
+      'Auth.PASSWORD_RULES_HINT': 'Password rules',
+      'Auth.PASSWORD_SET_BUTTON': 'Set password',
+      'Auth.PASSWORD_SET_BUTTON_LOADING': 'Setting password…',
+    }[key] ?? (typeof fallback === 'string' ? fallback : key)),
+  }),
+}));
+
+function LocationProbe() {
+  const location = useLocation();
+  return <output data-testid="pathname">{location.pathname}</output>;
+}
+
+function renderPage(route = '/invite/uid/token') {
+  return render(
+    <MemoryRouter initialEntries={[route]}>
+      <LocationProbe />
+      <Routes>
+        <Route path="/invite/:uid/:token" element={<PasswordInvitePage />} />
+        <Route path="/reset/:uid/:token" element={<PasswordInvitePage />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+import { PasswordInvitePage } from '../src/pages/PasswordInvitePage';
+
+describe('PasswordInvitePage auth flow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    authApi.verifyResetToken.mockResolvedValue({});
+  });
+
+  afterEach(() => cleanup());
+
+  it('keeps the form and shows the server password reason so the person can retry', async () => {
+    authApi.setNewPassword
+      .mockRejectedValueOnce({
+        response: {
+          data: {
+            code: 'Auth.RESET_PASSWORD_INVALID',
+            messages: ['This password is too common.'],
+          },
+        },
+      })
+      .mockResolvedValueOnce({});
+
+    renderPage();
+    await waitFor(() => expect(screen.getByLabelText('New password')).toBeTruthy());
+
+    fireEvent.change(screen.getByLabelText('New password'), { target: { value: 'password123' } });
+    fireEvent.change(screen.getByLabelText('Confirm password'), { target: { value: 'password123' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Set password' }));
+
+    await waitFor(() => expect(screen.getByText('This password is too common.')).toBeTruthy());
+    expect(screen.getByLabelText('New password')).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Set password' }));
+    await waitFor(() => expect(screen.getByText('Password set successfully.')).toBeTruthy());
+    expect(authApi.setNewPassword).toHaveBeenCalledTimes(2);
+  });
+
+  it('shows the invalid-link state, not a retryable form, when the link expires during submit', async () => {
+    // The initial verifyResetToken check can pass and the token can still
+    // expire before setNewPassword is called (a real race, not hypothetical)
+    // -- told apart by the server's CODE, not by treating every submit
+    // error as a password rejection.
+    authApi.setNewPassword.mockRejectedValueOnce({ code: 'Auth.RESET_LINK_INVALID' });
+
+    renderPage();
+    await waitFor(() => expect(screen.getByLabelText('New password')).toBeTruthy());
+
+    fireEvent.change(screen.getByLabelText('New password'), { target: { value: 'password123' } });
+    fireEvent.change(screen.getByLabelText('Confirm password'), { target: { value: 'password123' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Set password' }));
+
+    await waitFor(() => expect(screen.getByText('The link is invalid or expired.')).toBeTruthy());
+    expect(screen.queryByLabelText('New password')).toBeNull();
+  });
+
+  it('shows the invalid-link state without a password form when token verification fails', async () => {
+    authApi.verifyResetToken.mockRejectedValue({ code: 'Auth.RESET_LINK_INVALID' });
+
+    renderPage();
+
+    await waitFor(() => expect(screen.getByText('The link is invalid or expired.')).toBeTruthy());
+    expect(screen.queryByLabelText('New password')).toBeNull();
+    expect(screen.queryByLabelText('Confirm password')).toBeNull();
+  });
+
+  it('shows confirmation and waits for an explicit login action after success', async () => {
+    authApi.setNewPassword.mockResolvedValue({});
+
+    renderPage('/reset/uid/token?next=/account');
+    await waitFor(() => expect(screen.getByLabelText('New password')).toBeTruthy());
+
+    fireEvent.change(screen.getByLabelText('New password'), { target: { value: 'new-password' } });
+    fireEvent.change(screen.getByLabelText('Confirm password'), { target: { value: 'new-password' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Set password' }));
+
+    await waitFor(() => expect(screen.getByText('Password changed successfully.')).toBeTruthy());
+    expect(screen.getByRole('button', { name: 'Go to login' })).toBeTruthy();
+    expect(screen.getByTestId('pathname').textContent).toBe('/reset/uid/token');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Go to login' }));
+    await waitFor(() => expect(screen.getByTestId('pathname').textContent).toBe('/login'));
+  });
+});

package/tests/SignUpPage.test.jsx

@@ -20,10 +20,10 @@ vi.mock('react-i18next', () => ({
 import { AuthContext } from '../src/auth/AuthContext';
 import { SignUpPage } from '../src/pages/SignUpPage';
 
-function renderSignUp({ signupModes, siteKey }) {
+function renderSignUp({ signup = true, signupModes, siteKey }) {
   return render(
     <AuthContext.Provider value={{ authMethods: {
-      signup: true,
+      signup,
       signup_modes: signupModes,
       turnstile_site_key: siteKey,
     } }}>
@@ -62,6 +62,19 @@ describe('SignUpPage Turnstile integration', () => {
     await waitFor(() => expect(screen.getByTestId('turnstile-widget')).toBeTruthy());
   });
 
+  it('explains that signup is closed and omits the form when no signup modes are available', () => {
+    renderSignUp({ signup: false, signupModes: [] });
+
+    expect(screen.getByText('Self sign-up is currently disabled.')).toBeTruthy();
+    expect(screen.queryByRole('textbox', { name: /Auth\.EMAIL_LABEL/ })).toBeNull();
+    expect(screen.queryByRole('textbox', { name: /Auth\.ACCESS_CODE_LABEL/ })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Auth.SIGNUP_SUBMIT' })).toBeNull();
+    // A closed page must still leave a way forward, not just say why the
+    // form is missing (caught by review: the first implementation hid this
+    // too).
+    expect(screen.getByRole('button', { name: 'Auth.SIGNUP_GO_TO_LOGIN' })).toBeTruthy();
+  });
+
   it('gates submission until verified and passes the Turnstile token to the registration API', async () => {
     renderSignUp({ signupModes: ['self_signup_open'], siteKey: 'site-key' });