@micha.bigler/ui-core-micha 3.6.0 → 3.7.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/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/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' });
 

package/tests/UserListComponent.test.jsx

@@ -0,0 +1,85 @@
+// @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';
+
+const authApi = vi.hoisted(() => ({
+  fetchUsersList: vi.fn(),
+  updateUserRole: vi.fn(),
+  deleteUser: vi.fn(),
+}));
+
+vi.mock('../src/auth/authApi', () => authApi);
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, fallback) => ({
+      'UserList.TITLE': 'All Users',
+      'Common.SEARCH': 'Search',
+      'UserList.SEARCH_PLACEHOLDER': 'Search users...',
+      'Auth.EMAIL_LABEL': 'Email',
+      'Profile.NAME_LABEL': 'Name',
+      'UserList.ROLE': 'Role',
+      'UserList.ROLE_UPDATE_SUCCESS': 'Role updated.',
+      'Auth.USER_ROLE_UPDATE_FAILED': 'Role update failed.',
+      'UserList.NO_USERS': 'No users found.',
+    }[key] ?? (typeof fallback === 'string' ? fallback : key)),
+  }),
+}));
+
+import { UserListComponent } from '../src/components/UserListComponent';
+
+const currentUser = { id: 99, is_superuser: true, role: 'admin' };
+const user = { id: 1, email: 'person@example.com', role: 'student' };
+
+function renderUserList() {
+  return render(
+    <UserListComponent
+      currentUser={currentUser}
+      showNewColumn={false}
+      showSuccessfulLoginColumn={false}
+      showDeleteAction={false}
+    />,
+  );
+}
+
+async function chooseRole(role) {
+  fireEvent.mouseDown(screen.getAllByRole('combobox')[0]);
+  await waitFor(() => expect(screen.getByRole('listbox')).toBeTruthy());
+  fireEvent.click(screen.getByRole('option', { name: role }));
+}
+
+describe('UserListComponent role updates', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    authApi.fetchUsersList.mockResolvedValue([user]);
+    authApi.updateUserRole.mockResolvedValue({});
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  it('confirms a successful role update', async () => {
+    const alert = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    renderUserList();
+
+    await waitFor(() => expect(screen.getAllByRole('combobox')[0]).toBeTruthy());
+    await chooseRole('teacher');
+
+    await waitFor(() => expect(authApi.updateUserRole).toHaveBeenCalledWith(1, 'teacher'));
+    expect(alert).toHaveBeenCalledWith('Role updated.');
+  });
+
+  it('keeps the failure feedback when a role update fails', async () => {
+    authApi.updateUserRole.mockRejectedValue({ code: 'Auth.USER_ROLE_UPDATE_FAILED' });
+    const alert = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    renderUserList();
+
+    await waitFor(() => expect(screen.getAllByRole('combobox')[0]).toBeTruthy());
+    await chooseRole('teacher');
+
+    await waitFor(() => expect(alert).toHaveBeenCalledWith('Role update failed.'));
+    expect(authApi.fetchUsersList).toHaveBeenCalledTimes(1);
+  });
+});

package/tests/UserMenu.test.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const translation = vi.hoisted(() => ({
   t: vi.fn((key) => `translated:${key}`),
@@ -11,15 +12,26 @@ vi.mock('react-i18next', () => ({ useTranslation: () => translation }));
 
 import { AuthContext } from '../src/auth/AuthContext';
 import { UserMenu } from '../src/auth/UserMenu';
+import { calculateContrastRatio, createAppTheme } from '../src/theme';
 
-function renderUserMenu({ user, logout = vi.fn(), ...props } = {}) {
+const defaultTheme = createAppTheme({ palette: { primary: { main: createTheme().palette.primary.main } } });
+
+function renderUserMenu({ user, logout = vi.fn(), theme = defaultTheme, ...props } = {}) {
   return render(
-    <AuthContext.Provider value={{ user, logout }}>
-      <UserMenu {...props} />
-    </AuthContext.Provider>,
+    <ThemeProvider theme={theme}>
+      <AuthContext.Provider value={{ user, logout }}>
+        <UserMenu {...props} />
+      </AuthContext.Provider>
+    </ThemeProvider>,
   );
 }
 
+function getAvatarContrast() {
+  const avatar = screen.getByText(/^[A-Z]+$/).closest('.MuiAvatar-root');
+  const styles = window.getComputedStyle(avatar);
+  return calculateContrastRatio(styles.color, styles.backgroundColor);
+}
+
 describe('UserMenu', () => {
   afterEach(() => {
     cleanup();
@@ -132,4 +144,28 @@ describe('UserMenu', () => {
     renderUserMenu({ user: { username: 'grace' } });
     expect(screen.getByText('G')).toBeTruthy();
   });
+
+  it("uses a contrasting avatar pair with jg-ferien's primary colour", () => {
+    const theme = createAppTheme({ palette: { primary: { main: '#367964' } } });
+    renderUserMenu({ theme, user: { username: 'ab' } });
+
+    expect(getAvatarContrast()).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('uses a contrasting avatar pair with the library baseline primary colour', () => {
+    renderUserMenu({ user: { username: 'ab' } });
+
+    expect(getAvatarContrast()).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('falls back to the dark text pair for a medium-luminance primary colour', () => {
+    // A synthetic mid-grey (luminance ~0.216, no real brand meaning) picked to
+    // fail white-on-background at 4.5:1 (~3.95:1) so this test actually
+    // exercises the black-fallback branch, not just the white branch every
+    // other test here happens to land on.
+    const theme = createAppTheme({ palette: { primary: { main: '#808080' } } });
+    renderUserMenu({ theme, user: { username: 'ab' } });
+
+    expect(getAvatarContrast()).toBeGreaterThanOrEqual(4.5);
+  });
 });