@micha.bigler/ui-core-micha 2.26.4 → 2.28.2

package/src/components/charts/TimeSeriesChart.jsx

@@ -15,6 +15,23 @@ import { useNeutralChartPalette } from './palette';
 // Fixed platform-wide range -> granularity mapping (operator decision, CHART-2 /
 // dcm ACT-1) — the resolution follows the window and is never an independent
 // caller-supplied control. Every preset lands between a dozen and fifty points.
+// Preset default height (CHART-4): MUI X-Charts' responsive container
+// measures its actual parent height via ResizeObserver and draws nothing
+// if that parent has none — ChartFrame's flex-centered content Box does
+// NOT stretch its child to fill available height (alignItems: 'center'),
+// so BarChart needs its own explicit size, not just ChartFrame's.
+// `height` forwards straight to MuiBarChart's own native height prop
+// (bypassing ResizeObserver-based measurement entirely), matching the
+// confirmed-working dev/entries.jsx BarChartEntry reference.
+// Deliberate, known exception to DESIGN.md #14 ("responsive = container-
+// sized, not fixed px"): width stays responsive (unset, still auto-
+// measured), only height is fixed, and only because MUI X-Charts' own
+// ResizeObserver-based height measurement is what silently produced a
+// zero-height chart in the first place (CHART-4). Do not "fix" this back
+// to a responsive/aspect-ratio height without re-verifying the underlying
+// MUI measurement bug is actually resolved.
+const CHART_HEIGHT = 320;
+
 const RANGE_OPTIONS = [
   { key: '1d', granularity: 'hour', labelKey: 'TimeSeriesChart.RANGE_1_DAY' },
   { key: '1w', granularity: '4hour', labelKey: 'TimeSeriesChart.RANGE_1_WEEK' },
@@ -52,11 +69,34 @@ export function TimeSeriesChart({
   const seriesConfig = data?.series || [];
 
   const [range, setRange] = useState(defaultRange);
-  // Series identity (keys) is assumed stable for a given chart instance — the
-  // toggle set is initialized once from the first data the chart receives.
-  const [visibleKeys, setVisibleKeys] = useState(
-    () => new Set(seriesConfig.map((series) => series.key)),
-  );
+  // Series identity (keys) is NOT assumed stable at mount: the host commonly
+  // mounts with empty data and fills it asynchronously (fetch-after-mount),
+  // so visibleKeys must sync as new keys appear rather than being captured
+  // once. seenKeys tracks every key ever observed so that a key present in
+  // seriesConfig but absent from visibleKeys is recognized as a deliberate
+  // user toggle-off (stays off) rather than treated as new (defaulted
+  // visible) on the next data update. Both are plain state (not a ref) and
+  // updated together in the render body — React's documented pattern for
+  // syncing derived state from props — so an interrupted/discarded render
+  // (concurrent features) rolls both back together instead of leaving
+  // seenKeys mutated while the paired visibleKeys update is dropped.
+  const [seenKeys, setSeenKeys] = useState(() => new Set());
+  const [visibleKeys, setVisibleKeys] = useState(() => new Set());
+
+  const currentKeys = seriesConfig.map((series) => series.key);
+  const newKeys = currentKeys.filter((key) => !seenKeys.has(key));
+  if (newKeys.length > 0) {
+    setSeenKeys((previous) => {
+      const next = new Set(previous);
+      newKeys.forEach((key) => next.add(key));
+      return next;
+    });
+    setVisibleKeys((previous) => {
+      const next = new Set(previous);
+      newKeys.forEach((key) => next.add(key));
+      return next;
+    });
+  }
 
   const handleRangeChange = (event) => {
     const nextRange = event.target.value;
@@ -132,6 +172,7 @@ export function TimeSeriesChart({
       loading={loading}
       error={error}
       isEmpty={isDataEmpty}
+      minHeight={CHART_HEIGHT}
     >
       {!isDataEmpty && (
         <BarChart
@@ -140,6 +181,7 @@ export function TimeSeriesChart({
           xAxis={[{ data: data?.xLabels || [] }]}
           series={visibleSeries.map((series) => ({ data: series.data, label: series.label }))}
           palette={visiblePalette}
+          height={CHART_HEIGHT}
         />
       )}
     </ChartFrame>

package/src/i18n/authTranslations.ts

@@ -927,6 +927,24 @@ export const authTranslations = {
     "en": "The passwords do not match.",
     "sw": "Manenosiri hayalingani."
   },
+  "Auth.PASSWORD_RULES_HINT": {
+    "de": "Mindestens 8 Zeichen, nicht nur Zahlen, kein gängiges Passwort.",
+    "fr": "Au moins 8 caractères, pas uniquement des chiffres, pas un mot de passe courant.",
+    "en": "At least 8 characters, not entirely numeric, not a commonly used password.",
+    "sw": "Angalau herufi 8, si tarakimu tu, si nenosiri linalotumika sana."
+  },
+  "Auth.PASSWORD_TOO_SHORT_LOCAL": {
+    "de": "Das Passwort muss mindestens 8 Zeichen lang sein.",
+    "fr": "Le mot de passe doit contenir au moins 8 caractères.",
+    "en": "The password must be at least 8 characters long.",
+    "sw": "Nenosiri linahitajika kuwa na angalau herufi 8."
+  },
+  "Auth.PASSWORD_NUMERIC_LOCAL": {
+    "de": "Das Passwort darf nicht nur aus Zahlen bestehen.",
+    "fr": "Le mot de passe ne peut pas être uniquement composé de chiffres.",
+    "en": "The password cannot be entirely numeric.",
+    "sw": "Nenosiri haliwezi kuwa na tarakimu tu."
+  },
   "Auth.PROFILE_LOAD_FAILED": {
     "de": "Profil konnte nicht geladen werden.",
     "fr": "Le profil n’a pas pu être chargé.",
@@ -1853,5 +1871,81 @@ export const authTranslations = {
     "fr": "Le mot de passe est incorrect.",
     "en": "The password is incorrect.",
     "sw": "Nenosiri si sahihi."
+  },
+
+  // Raw backend auth error codes (allauth-headless + Django password validators).
+  // Keyed by the exact code string so the existing `t(err.code)` call sites resolve
+  // as a drop-in, without any component change. See AUTH-2.
+  "email_password_mismatch": {
+    "de": "E-Mail-Adresse oder Passwort ist falsch.",
+    "fr": "Adresse e-mail ou mot de passe incorrect.",
+    "en": "Email address or password is incorrect.",
+    "sw": "Barua pepe au nenosiri sio sahihi."
+  },
+  "username_password_mismatch": {
+    "de": "Benutzername oder Passwort ist falsch.",
+    "fr": "Nom d'utilisateur ou mot de passe incorrect.",
+    "en": "Username or password is incorrect.",
+    "sw": "Jina la mtumiaji au nenosiri sio sahihi."
+  },
+  "phone_password_mismatch": {
+    "de": "Telefonnummer oder Passwort ist falsch.",
+    "fr": "Numéro de téléphone ou mot de passe incorrect.",
+    "en": "Phone number or password is incorrect.",
+    "sw": "Nambari ya simu au nenosiri sio sahihi."
+  },
+  "too_many_login_attempts": {
+    "de": "Zu viele fehlgeschlagene Anmeldeversuche. Bitte versuchen Sie es später erneut.",
+    "fr": "Trop de tentatives de connexion échouées. Veuillez réessayer plus tard.",
+    "en": "Too many failed login attempts. Please try again later.",
+    "sw": "Majaribio mengi ya kuingia yameshindwa. Tafadhali jaribu tena baadaye."
+  },
+  "invalid_login": {
+    "de": "Ungültige Anmeldedaten.",
+    "fr": "Données de connexion invalides.",
+    "en": "Invalid login credentials.",
+    "sw": "Taarifa za kuingia si sahihi."
+  },
+  "account_inactive": {
+    "de": "Dieses Konto ist derzeit inaktiv.",
+    "fr": "Ce compte est actuellement inactif.",
+    "en": "This account is currently inactive.",
+    "sw": "Akaunti hii haitumiki kwa sasa."
+  },
+  "enter_current_password": {
+    "de": "Das aktuelle Passwort ist falsch.",
+    "fr": "Le mot de passe actuel est incorrect.",
+    "en": "The current password is incorrect.",
+    "sw": "Nenosiri la sasa si sahihi."
+  },
+  "password_too_short": {
+    "de": "Das Passwort muss mindestens 8 Zeichen lang sein.",
+    "fr": "Le mot de passe doit contenir au moins 8 caractères.",
+    "en": "The password must be at least 8 characters long.",
+    "sw": "Nenosiri linahitajika kuwa na angalau herufi 8."
+  },
+  "password_too_common": {
+    "de": "Dieses Passwort ist zu gängig und leicht zu erraten.",
+    "fr": "Ce mot de passe est trop courant et facile à deviner.",
+    "en": "This password is too common and easy to guess.",
+    "sw": "Nenosiri hili linatumika sana na ni rahisi kubashiri."
+  },
+  "password_entirely_numeric": {
+    "de": "Das Passwort darf nicht nur aus Zahlen bestehen.",
+    "fr": "Le mot de passe ne peut pas être uniquement composé de chiffres.",
+    "en": "The password cannot be entirely numeric.",
+    "sw": "Nenosiri haliwezi kuwa na tarakimu tu."
+  },
+  "password_too_similar": {
+    "de": "Das Passwort ist Ihren persönlichen Daten zu ähnlich.",
+    "fr": "Le mot de passe est trop similaire à vos informations personnelles.",
+    "en": "The password is too similar to your personal information.",
+    "sw": "Nenosiri linafanana sana na taarifa zako binafsi."
+  },
+  "incorrect_code": {
+    "de": "Der eingegebene Code ist falsch.",
+    "fr": "Le code saisi est incorrect.",
+    "en": "The code you entered is incorrect.",
+    "sw": "Msimbo uliouweka si sahihi."
   }
 };

package/src/i18n/notificationsTranslations.ts

@@ -19,6 +19,14 @@ export const notificationsTranslations = {
   'NotificationSettings.PUSH_CONFLICT': { de: 'Dieses Gerät ist bereits mit einem anderen Konto für Push-Benachrichtigungen verbunden.', fr: 'Cet appareil est déjà associé à un autre compte pour les notifications push.', en: 'This device is already associated with another account for push notifications.', sw: 'Kifaa hiki tayari kimeunganishwa na akaunti nyingine kwa arifa za push.' },
   'NotificationSettings.PUSH_NOT_SUPPORTED': { de: 'Push-Benachrichtigungen werden von diesem Browser nicht unterstützt.', fr: 'Les notifications push ne sont pas prises en charge par ce navigateur.', en: 'Push notifications are not supported by this browser.', sw: 'Arifa za push hazitumiki na kivinjari hiki.' },
   'NotificationSettings.IOS_HINT': { de: 'Füge diese App zuerst zum Home-Bildschirm hinzu, um Push-Benachrichtigungen zu aktivieren.', fr: 'Ajoutez d’abord cette application à l’écran d’accueil pour activer les notifications push.', en: 'Add this app to your home screen first to enable push notifications.', sw: 'Ongeza programu hii kwenye skrini yako ya mwanzo kwanza ili kuwasha arifa za push.' },
+  'NotificationSettings.REACH_TITLE': { de: 'Wie du erreicht wirst', fr: 'Comment vous êtes joint', en: 'How you’re reached', sw: 'Jinsi unavyofikiwa' },
+  'NotificationSettings.REACH_ACTIVE': { de: 'Erreicht dich per E-Mail oder Push, je nach deiner Wahl oben.', fr: 'Vous joint par e-mail ou push, selon votre choix ci-dessus.', en: 'Reaches you by email or push, whichever you’ve chosen above.', sw: 'Inakufikia kwa barua pepe au push, kulingana na uchaguzi wako hapo juu.' },
+  'NotificationSettings.REACH_PASSIVE': { de: 'Wird angezeigt, wenn du nachschaust – keine E-Mail oder Push.', fr: 'Affiché seulement quand vous regardez – pas d’e-mail ni de push.', en: 'Shown only when you look – no email or push.', sw: 'Inaonyeshwa tu ukiangalia – hakuna barua pepe au push.' },
+  'NotificationSettings.REACH_BOTH': { de: 'Erreicht dich aktiv und bleibt zusätzlich sichtbar, wenn du nachschaust.', fr: 'Vous joint activement et reste visible quand vous regardez.', en: 'Reaches you actively, and also stays visible when you look.', sw: 'Inakufikia kikamilifu, na pia inabaki kuonekana ukiangalia.' },
+  'NotificationSettings.REACH_NO_ACTIVE_CHANNEL': { de: 'Kein E-Mail oder Push konfiguriert – diese Benachrichtigung erreicht dich derzeit nicht.', fr: 'Aucun e-mail ou push configuré – cette notification ne vous atteint pas actuellement.', en: 'No email or push configured – this notification does not currently reach you.', sw: 'Hakuna barua pepe au push iliyowekwa – arifa hii kwa sasa haikufikii.' },
+  'NotificationSettings.SUBSCRIPTIONS_TITLE': { de: 'Abonnements', fr: 'Abonnements', en: 'Subscriptions', sw: 'Usajili' },
+  'NotificationSettings.SUBSCRIPTIONS_SUBTITLE': { de: 'Ereignisse, für die du dich freiwillig anmelden kannst.', fr: 'Événements auxquels vous pouvez vous inscrire volontairement.', en: 'Events you can opt in to receive.', sw: 'Matukio unayoweza kujiunga kupokea.' },
+  'NotificationSettings.SUBSCRIPTION_ERROR': { de: 'Abonnement konnte nicht aktualisiert werden.', fr: 'Impossible de mettre à jour l’abonnement.', en: 'Subscription could not be updated.', sw: 'Usajili haukuweza kusasishwa.' },
   'PopupSurface.CLOSE': { de: 'Schliessen', fr: 'Fermer', en: 'Close', sw: 'Funga' },
   'PopupSurface.TITLE': { de: 'Benachrichtigung', fr: 'Notification', en: 'Notification', sw: 'Arifa' },
 };

package/src/notifications/NotificationSettings.jsx

@@ -14,9 +14,24 @@ import {
   patchNotificationPreferences,
   removePushSubscription,
   savePushSubscription,
+  setNotificationCategorySubscription,
   urlBase64ToUint8Array,
 } from './api';
 
+function reachLabelKey(notificationType) {
+  const noActiveChannel = notificationType.active && notificationType.has_active_channel === false;
+  if (notificationType.active && notificationType.passive) {
+    // Scope C's bounded fallback: a "both" type still reaches the user passively
+    // (chip) when no active channel is configured -- it is not undelivered, so it
+    // must not show the "does not reach you" warning meant for active-only types.
+    return noActiveChannel ? 'NotificationSettings.REACH_PASSIVE' : 'NotificationSettings.REACH_BOTH';
+  }
+  if (notificationType.active) {
+    return noActiveChannel ? 'NotificationSettings.REACH_NO_ACTIVE_CHANNEL' : 'NotificationSettings.REACH_ACTIVE';
+  }
+  return 'NotificationSettings.REACH_PASSIVE';
+}
+
 function getPushSupport() {
   return typeof navigator !== 'undefined'
     && typeof window !== 'undefined'
@@ -42,6 +57,7 @@ export function NotificationSettings() {
   const [pushSubscribed, setPushSubscribed] = useState(false);
   const [error, setError] = useState('');
   const [conflict, setConflict] = useState('');
+  const [savingSubscription, setSavingSubscription] = useState(null);
 
   const pushSupported = getPushSupport();
   const iosNeedsInstall = getIosInstallState();
@@ -138,6 +154,29 @@ export function NotificationSettings() {
     }
   };
 
+  const handleSubscriptionToggle = async (category, event) => {
+    const requested = event.target.checked;
+    setSavingSubscription(category);
+    setError('');
+    try {
+      const result = await setNotificationCategorySubscription(category, requested);
+      // Reflect what the server actually recorded, not the checkbox's optimistic
+      // value -- a 2xx response with a different `subscribed` (e.g. a server-side
+      // clamp) must not be silently overridden by what the user clicked.
+      const confirmed = result?.subscribed ?? requested;
+      setPreferences((current) => ({
+        ...current,
+        subscribable_categories: current.subscribable_categories.map((row) => (
+          row.category === category ? { ...row, subscribed: confirmed } : row
+        )),
+      }));
+    } catch {
+      setError(t('NotificationSettings.SUBSCRIPTION_ERROR'));
+    } finally {
+      setSavingSubscription(null);
+    }
+  };
+
   const handleDisablePush = async () => {
     setSavingPush(true);
     setError('');
@@ -213,6 +252,62 @@ export function NotificationSettings() {
           sx={{ alignItems: 'flex-start', ml: 0, mt: 1.5 }}
         />
       </Box>
+
+      {preferences?.notification_types?.length > 0 && (
+        <>
+          <Divider />
+          <Box sx={{ py: 2 }}>
+            <Typography variant="subtitle2" gutterBottom>{t('NotificationSettings.REACH_TITLE')}</Typography>
+            {preferences.notification_types.map((notificationType) => {
+              const labelKey = reachLabelKey(notificationType);
+              const reachText = t(labelKey);
+              // Reserve Alert (a colored banner) for the one case that is actually a
+              // warning -- an active-only type nobody can currently reach. Routine
+              // reach description is static settings copy, not a status message.
+              if (labelKey === 'NotificationSettings.REACH_NO_ACTIVE_CHANNEL') {
+                return (
+                  <Alert key={notificationType.key} severity="warning" sx={{ mb: 1 }}>
+                    <strong>{notificationType.label}</strong> — {reachText}
+                  </Alert>
+                );
+              }
+              return (
+                <Box key={notificationType.key} sx={{ py: 0.5 }}>
+                  <Typography variant="body2">{notificationType.label}</Typography>
+                  <Typography variant="caption" color="text.secondary">{reachText}</Typography>
+                </Box>
+              );
+            })}
+          </Box>
+        </>
+      )}
+
+      {preferences?.subscribable_categories?.length > 0 && (
+        <>
+          <Divider />
+          <Box sx={{ py: 2 }}>
+            <Typography variant="subtitle2" gutterBottom>{t('NotificationSettings.SUBSCRIPTIONS_TITLE')}</Typography>
+            <Typography variant="body2" color="text.secondary" gutterBottom>
+              {t('NotificationSettings.SUBSCRIPTIONS_SUBTITLE')}
+            </Typography>
+            {preferences.subscribable_categories.map((row) => (
+              <FormControlLabel
+                key={row.category}
+                control={(
+                  <Switch
+                    checked={Boolean(row.subscribed)}
+                    onChange={(event) => handleSubscriptionToggle(row.category, event)}
+                    disabled={savingSubscription === row.category}
+                  />
+                )}
+                label={row.label}
+                labelPlacement="end"
+                sx={{ alignItems: 'center', ml: 0, display: 'flex' }}
+              />
+            ))}
+          </Box>
+        </>
+      )}
     </Box>
   );
 }

package/src/notifications/api.js

@@ -2,6 +2,7 @@ import apiClient from '../auth/apiClient';
 
 const PREFERENCES_URL = '/api/notifications/preferences/';
 const PUSH_SUBSCRIPTION_URL = `${PREFERENCES_URL}push-subscription/`;
+const SUBSCRIPTIONS_URL = `${PREFERENCES_URL}subscriptions/`;
 
 export async function getNotificationPreferences() {
   const response = await apiClient.get(PREFERENCES_URL);
@@ -13,6 +14,11 @@ export async function patchNotificationPreferences(patch) {
   return response.data;
 }
 
+export async function setNotificationCategorySubscription(category, subscribed) {
+  const response = await apiClient.post(SUBSCRIPTIONS_URL, { category, subscribed });
+  return response.data;
+}
+
 export async function getVapidPublicKey() {
   const response = await apiClient.get(`${PREFERENCES_URL}vapid-public-key/`);
   return response.data?.vapidPublicKey;

package/tests/NotificationSettings.test.jsx

@@ -9,6 +9,7 @@ const notificationsApi = vi.hoisted(() => ({
   patchNotificationPreferences: vi.fn(),
   removePushSubscription: vi.fn(),
   savePushSubscription: vi.fn(),
+  setNotificationCategorySubscription: vi.fn(),
   urlBase64ToUint8Array: vi.fn(() => new Uint8Array([1, 2, 3])),
 }));
 
@@ -169,3 +170,107 @@ describe('NotificationSettings push preview toggle', () => {
     expect(toggle.disabled).toBe(false);
   });
 });
+
+describe('NotificationSettings reach axis (NOTIF-26)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    notificationsApi.getVapidPublicKey.mockResolvedValue('AQID');
+  });
+
+  it('renders no reach or subscriptions sections when the server reports none (no new props)', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: false, notification_types: [], subscribable_categories: [],
+    });
+
+    render(<NotificationSettings />);
+    await screen.findByRole('switch', { name: /EMAIL_LABEL/ });
+
+    expect(screen.queryByText('NotificationSettings.REACH_TITLE')).toBeNull();
+    expect(screen.queryByText('NotificationSettings.SUBSCRIPTIONS_TITLE')).toBeNull();
+  });
+
+  it('shows the both-reach message for a type that is active and passive', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: true, push_opt_in: false,
+      notification_types: [{ key: 'status.deploy_failed', category: 'status', label: 'Deploy failed', active: true, passive: true, has_active_channel: true }],
+    });
+
+    render(<NotificationSettings />);
+
+    expect(await screen.findByText('Deploy failed')).toBeTruthy();
+    expect(await screen.findByText('NotificationSettings.REACH_BOTH')).toBeTruthy();
+  });
+
+  it('shows the passive-only message for a type with no active reach', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: false,
+      notification_types: [{ key: 'status.deploy_recovered', category: 'status', label: 'Deploy recovered', active: false, passive: true, has_active_channel: null }],
+    });
+
+    render(<NotificationSettings />);
+
+    expect(await screen.findByText('NotificationSettings.REACH_PASSIVE')).toBeTruthy();
+  });
+
+  it('shows the no-active-channel warning for an active-only type the user cannot currently be reached on (scope C)', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: false,
+      notification_types: [{ key: 'app.messaging.new_message', category: 'messaging', label: 'New messages', active: true, passive: false, has_active_channel: false }],
+    });
+
+    render(<NotificationSettings />);
+
+    expect(await screen.findByText(/NotificationSettings\.REACH_NO_ACTIVE_CHANNEL/)).toBeTruthy();
+    expect(await screen.findByText(/New messages/)).toBeTruthy();
+  });
+
+  it('shows the passive fallback (not the undelivered warning) for a both-type with no active channel configured', async () => {
+    // Regression: scope C's bounded fallback means a both-type still reaches the
+    // user passively (chip) with no active channel -- it must not be shown as
+    // undelivered, which is reserved for active-only types.
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: false,
+      notification_types: [{ key: 'status.deploy_failed', category: 'status', label: 'Deploy failed', active: true, passive: true, has_active_channel: false }],
+    });
+
+    render(<NotificationSettings />);
+
+    expect(await screen.findByText('NotificationSettings.REACH_PASSIVE')).toBeTruthy();
+    expect(screen.queryByText(/NotificationSettings\.REACH_NO_ACTIVE_CHANNEL/)).toBeNull();
+  });
+
+  it('renders server-reported subscribable categories and toggles a subscription', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: false,
+      subscribable_categories: [{ category: 'ops', label: 'Operations', subscribed: false }],
+    });
+    notificationsApi.setNotificationCategorySubscription.mockResolvedValue({ category: 'ops', subscribed: true });
+
+    render(<NotificationSettings />);
+    const toggle = await screen.findByRole('switch', { name: 'Operations' });
+    expect(toggle.checked).toBe(false);
+
+    fireEvent.click(toggle);
+
+    await waitFor(() => expect(notificationsApi.setNotificationCategorySubscription).toHaveBeenCalledWith('ops', true));
+    await waitFor(() => expect(toggle.checked).toBe(true));
+  });
+
+  it('reflects the server response, not the clicked checkbox value, when they disagree', async () => {
+    // Regression: a 2xx response reporting a different `subscribed` (e.g. a
+    // server-side clamp) must win over what the user clicked.
+    notificationsApi.getNotificationPreferences.mockResolvedValue({
+      email_opt_in: false, push_opt_in: false,
+      subscribable_categories: [{ category: 'ops', label: 'Operations', subscribed: false }],
+    });
+    notificationsApi.setNotificationCategorySubscription.mockResolvedValue({ category: 'ops', subscribed: false });
+
+    render(<NotificationSettings />);
+    const toggle = await screen.findByRole('switch', { name: 'Operations' });
+
+    fireEvent.click(toggle);
+
+    await waitFor(() => expect(notificationsApi.setNotificationCategorySubscription).toHaveBeenCalledWith('ops', true));
+    await waitFor(() => expect(toggle.checked).toBe(false));
+  });
+});

package/tests/PasswordChangeForm.test.jsx

@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key, fallback) => (typeof fallback === 'string' ? fallback : key) }),
+}));
+
+import { PasswordChangeForm } from '../src/components/PasswordChangeForm';
+
+afterEach(() => {
+  cleanup();
+});
+
+function fillAndSubmit(currentPassword, newPassword) {
+  fireEvent.change(screen.getByLabelText(/Auth\.CURRENT_PASSWORD_LABEL/), { target: { value: currentPassword } });
+  fireEvent.change(screen.getByLabelText(/Auth\.NEW_PASSWORD_LABEL/), { target: { value: newPassword } });
+  fireEvent.click(screen.getByRole('button', { name: 'Auth.CHANGE_PASSWORD_BUTTON' }));
+}
+
+describe('PasswordChangeForm', () => {
+  it('renders the default password-rules helperText', () => {
+    render(<PasswordChangeForm onSubmit={vi.fn()} />);
+    expect(screen.getAllByText('Auth.PASSWORD_RULES_HINT').length).toBeGreaterThan(0);
+  });
+
+  it('lets a caller override the helperText via passwordRulesHint', () => {
+    render(<PasswordChangeForm onSubmit={vi.fn()} passwordRulesHint="Custom rule text" />);
+    expect(screen.getAllByText('Custom rule text').length).toBeGreaterThan(0);
+    expect(screen.queryByText('Auth.PASSWORD_RULES_HINT')).toBeNull();
+  });
+
+  it('blocks submit and shows the local error for a new password shorter than 8 characters', () => {
+    const onSubmit = vi.fn();
+    render(<PasswordChangeForm onSubmit={onSubmit} />);
+    fillAndSubmit('currentpw', 'short1');
+    expect(screen.getByText('Auth.PASSWORD_TOO_SHORT_LOCAL')).toBeTruthy();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('blocks submit and shows the local error for an entirely numeric new password', () => {
+    const onSubmit = vi.fn();
+    render(<PasswordChangeForm onSubmit={onSubmit} />);
+    fillAndSubmit('currentpw', '12345678');
+    expect(screen.getByText('Auth.PASSWORD_NUMERIC_LOCAL')).toBeTruthy();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('calls onSubmit for a valid, non-numeric new password of sufficient length', async () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined);
+    render(<PasswordChangeForm onSubmit={onSubmit} />);
+    fillAndSubmit('currentpw', 'correct-horse-1');
+    expect(onSubmit).toHaveBeenCalledWith('currentpw', 'correct-horse-1');
+  });
+
+  it('honours a custom minPasswordLength for an app with a looser backend policy', () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined);
+    render(<PasswordChangeForm onSubmit={onSubmit} minPasswordLength={4} />);
+    fillAndSubmit('currentpw', 'ab12');
+    expect(onSubmit).toHaveBeenCalledWith('currentpw', 'ab12');
+  });
+
+  it('allows an entirely numeric new password when allowNumericPassword is set', () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined);
+    render(<PasswordChangeForm onSubmit={onSubmit} allowNumericPassword />);
+    fillAndSubmit('currentpw', '12345678');
+    expect(onSubmit).toHaveBeenCalledWith('currentpw', '12345678');
+  });
+});

package/tests/PasswordSetForm.test.jsx

@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key, fallback) => (typeof fallback === 'string' ? fallback : key) }),
+}));
+
+import { PasswordSetForm } from '../src/components/PasswordSetForm';
+
+afterEach(() => {
+  cleanup();
+});
+
+function fillAndSubmit(password1, password2) {
+  fireEvent.change(screen.getByLabelText('Auth.NEW_PASSWORD_LABEL'), { target: { value: password1 } });
+  fireEvent.change(screen.getByLabelText('Auth.PASSWORD_CONFIRM_LABEL'), { target: { value: password2 } });
+  fireEvent.click(screen.getByRole('button', { name: 'Auth.PASSWORD_SET_BUTTON' }));
+}
+
+describe('PasswordSetForm', () => {
+  it('renders the default password-rules helperText', () => {
+    render(<PasswordSetForm onSubmit={vi.fn()} />);
+    expect(screen.getAllByText('Auth.PASSWORD_RULES_HINT').length).toBeGreaterThan(0);
+  });
+
+  it('lets a caller override the helperText via passwordRulesHint', () => {
+    render(<PasswordSetForm onSubmit={vi.fn()} passwordRulesHint="Custom rule text" />);
+    expect(screen.getAllByText('Custom rule text').length).toBeGreaterThan(0);
+    expect(screen.queryByText('Auth.PASSWORD_RULES_HINT')).toBeNull();
+  });
+
+  it('blocks submit and shows the local error for a password shorter than 8 characters', () => {
+    const onSubmit = vi.fn();
+    render(<PasswordSetForm onSubmit={onSubmit} />);
+    fillAndSubmit('short1', 'short1');
+    expect(screen.getByText('Auth.PASSWORD_TOO_SHORT_LOCAL')).toBeTruthy();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('blocks submit and shows the local error for an entirely numeric password', () => {
+    const onSubmit = vi.fn();
+    render(<PasswordSetForm onSubmit={onSubmit} />);
+    fillAndSubmit('12345678', '12345678');
+    expect(screen.getByText('Auth.PASSWORD_NUMERIC_LOCAL')).toBeTruthy();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('calls onSubmit for a valid, non-numeric password of sufficient length', () => {
+    const onSubmit = vi.fn();
+    render(<PasswordSetForm onSubmit={onSubmit} />);
+    fillAndSubmit('correct-horse-1', 'correct-horse-1');
+    expect(onSubmit).toHaveBeenCalledWith('correct-horse-1');
+  });
+
+  it('honours a custom minPasswordLength for an app with a looser backend policy', () => {
+    const onSubmit = vi.fn();
+    render(<PasswordSetForm onSubmit={onSubmit} minPasswordLength={4} />);
+    fillAndSubmit('ab12', 'ab12');
+    expect(onSubmit).toHaveBeenCalledWith('ab12');
+  });
+
+  it('allows an entirely numeric password when allowNumericPassword is set', () => {
+    const onSubmit = vi.fn();
+    render(<PasswordSetForm onSubmit={onSubmit} allowNumericPassword />);
+    fillAndSubmit('12345678', '12345678');
+    expect(onSubmit).toHaveBeenCalledWith('12345678');
+  });
+});