@micha.bigler/ui-core-micha 3.7.0 → 3.9.0

package/src/pages/SignUpPage.jsx

@@ -20,6 +20,7 @@ import { NarrowPage } from '../layout/PageLayout';
 import { AuthContext } from '../auth/AuthContext';
 import { submitRegistrationRequest } from '../auth/authApi';
 import { TurnstileWidget } from '../components/TurnstileWidget';
+import { resolveErrorText } from '../utils/resolveErrorText';
 
 export const SIGN_UP_PAGE_ALERT_SX = { mb: 2 };
 
@@ -45,7 +46,7 @@ const MODE_SUBTITLES = {
 export function SignUpPage() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { authMethods } = useContext(AuthContext);
 
   const signupModes = useMemo(() => {
@@ -107,17 +108,17 @@ export function SignUpPage() {
     setErrorKey(null);
 
     if (!email) {
-      setErrorKey('Auth.EMAIL_REQUIRED');
+      setErrorKey(t('Auth.EMAIL_REQUIRED'));
       return;
     }
 
     if (mode === 'self_signup_access_code' && !accessCode) {
-      setErrorKey('Auth.SIGNUP_ACCESS_CODE_REQUIRED');
+      setErrorKey(t('Auth.SIGNUP_ACCESS_CODE_REQUIRED'));
       return;
     }
 
     if (mode === 'self_signup_qr' && !tokenFromUrl) {
-      setErrorKey('Auth.SIGNUP_QR_INVALID');
+      setErrorKey(t('Auth.SIGNUP_QR_INVALID'));
       return;
     }
 
@@ -138,7 +139,7 @@ export function SignUpPage() {
       // signup, which have no code whose validity needs hiding.
       setSuccessKey(res?.code || 'Auth.INVITE_SENT');
     } catch (err) {
-      setErrorKey(err.code || 'Auth.INVITE_FAILED');
+      setErrorKey(resolveErrorText(i18n, err, 'Auth.INVITE_FAILED'));
       if (turnstileRequired) {
         setTurnstileToken('');
         turnstileWidgetRef.current?.reset();
@@ -177,7 +178,7 @@ export function SignUpPage() {
 
           {errorKey && (
             <Alert severity="error" sx={SIGN_UP_PAGE_ALERT_SX}>
-              {t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.'))}
+              {errorKey}
             </Alert>
           )}
 

package/src/pages/SignupConfirmPage.jsx

@@ -19,11 +19,12 @@ import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { confirmRegistration } from '../auth/authApi';
+import { resolveErrorText } from '../utils/resolveErrorText';
 
 export const SIGNUP_CONFIRM_PAGE_ALERT_SX = { mb: 2 };
 
 export function SignupConfirmPage() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -42,15 +43,15 @@ export function SignupConfirmPage() {
     setErrorKey(null);
 
     if (!tokenFromUrl) {
-      setErrorKey('Auth.PENDING_TOKEN_INVALID');
+      setErrorKey(t('Auth.PENDING_TOKEN_INVALID'));
       return;
     }
     if (!password || password.length < 8) {
-      setErrorKey('Auth.PASSWORD_TOO_SHORT');
+      setErrorKey(t('Auth.PASSWORD_TOO_SHORT'));
       return;
     }
     if (password !== confirmPassword) {
-      setErrorKey('Auth.PASSWORD_MISMATCH');
+      setErrorKey(t('Auth.PASSWORD_MISMATCH'));
       return;
     }
 
@@ -63,7 +64,7 @@ export function SignupConfirmPage() {
       navigate('/login', { replace: true });
       return;
     } catch (err) {
-      setErrorKey(err?.code || 'Auth.PENDING_TOKEN_INVALID');
+      setErrorKey(resolveErrorText(i18n, err, 'Auth.PENDING_TOKEN_INVALID'));
     } finally {
       setSubmitting(false);
     }
@@ -103,7 +104,7 @@ export function SignupConfirmPage() {
         <>
           {errorKey && (
             <Alert severity="error" sx={SIGNUP_CONFIRM_PAGE_ALERT_SX}>
-              {t(errorKey, t('Auth.PENDING_TOKEN_INVALID', 'Could not confirm registration.'))}
+              {errorKey}
             </Alert>
           )}
 

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/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/src/utils/auth-errors.js

@@ -4,26 +4,60 @@ export function extractErrorInfo(error) {
   const data = error.response?.data ?? null;
 
   if (!data) {
-    return { status, code: null, message: error.message || null, raw: null };
+    return {
+      status,
+      code: null,
+      field: null,
+      i18nKey: null,
+      message: null,
+      raw: null,
+    };
   }
 
   // Allauth Headless structure often nests errors in "errors" array or "status" key
   if (Array.isArray(data.errors) && data.errors.length > 0) {
-      // Pick the first error code
-      const first = data.errors[0];
-      return { status, code: first.code, message: first.message, raw: data };
+      const first = data.errors[0] || {};
+      return {
+        status,
+        code: first.code ?? null,
+        field: first.field ?? first.param ?? null,
+        i18nKey: first.i18nKey ?? null,
+        message: first.message,
+        raw: data,
+      };
   }
 
   if (typeof data.code === 'string') {
-    return { status, code: data.code, message: null, raw: data };
+    return {
+      status,
+      code: data.code,
+      field: data.field ?? null,
+      i18nKey: data.i18nKey ?? null,
+      message: data.message ?? data.detail,
+      raw: data,
+    };
   }
   
   // Fallback for generic Django errors
   if (typeof data.detail === 'string') {
-    return { status, code: null, message: data.detail, raw: data };
+    return {
+      status,
+      code: null,
+      field: data.field ?? null,
+      i18nKey: data.i18nKey ?? null,
+      message: data.detail,
+      raw: data,
+    };
   }
 
-  return { status, code: null, message: null, raw: data };
+  return {
+    status,
+    code: null,
+    field: data.field ?? null,
+    i18nKey: data.i18nKey ?? null,
+    message: data.message,
+    raw: data,
+  };
 }
 
 export function normaliseApiError(error, defaultCode = 'Auth.GENERIC_ERROR') {
@@ -33,6 +67,9 @@ export function normaliseApiError(error, defaultCode = 'Auth.GENERIC_ERROR') {
 
   const err = new Error(message);
   err.code = code;
+  err.field = info.field;
+  err.i18nKey = info.i18nKey;
+  err.backendMessage = info.message;
   err.status = info.status;
   err.raw = info.raw;
   return err;

package/src/utils/resolveErrorText.js

@@ -0,0 +1,28 @@
+import { extractErrorInfo } from './auth-errors';
+
+export function resolveErrorText(i18n, err, defaultKey) {
+  // API helpers normally throw normalized errors. Keeping this small boundary
+  // adapter also makes the resolver safe for callers that pass an Axios error
+  // directly (for example, an app-level wrapper around a kit API call).
+  const info = err?.response ? extractErrorInfo(err) : null;
+  const resolvedErr = info
+    ? {
+        ...err,
+        code: info.code || err.code,
+        field: info.field,
+        i18nKey: info.i18nKey,
+        backendMessage: info.message,
+      }
+    : err;
+  const exists = (key) => Boolean(key) && i18n.exists(key);
+
+  if (!resolvedErr) return i18n.t(defaultKey);
+  if (exists(resolvedErr.i18nKey)) return i18n.t(resolvedErr.i18nKey);
+  if (resolvedErr.field && resolvedErr.code) {
+    const fieldKey = `Auth.field.${resolvedErr.field}.${resolvedErr.code}`;
+    if (exists(fieldKey)) return i18n.t(fieldKey);
+  }
+  if (exists(resolvedErr.code)) return i18n.t(resolvedErr.code);
+  if (resolvedErr.backendMessage) return resolvedErr.backendMessage;
+  return i18n.t(defaultKey);
+}

package/tests/AccountPage.test.jsx

@@ -5,26 +5,33 @@ import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key, fallback) => ({
-      'Account.TITLE': 'Account & Administration',
-      'Account.PAGE_TITLE': 'Account',
-      'Account.TAB_PROFILE': 'Profile',
-      'Account.TAB_SECURITY': 'Security',
-      'Account.TAB_USERS': 'Users',
-      'Account.TAB_INVITE': 'Invite',
-      'Account.TAB_SUPPORT': 'Support',
-      'Account.GROUP_MY_ACCOUNT': 'My account',
-      'Account.GROUP_MANAGEMENT': 'Management',
-      'Account.GROUP_HELP': 'Help',
-      'Account.GROUP_MORE': 'More',
-      'SectionNav.TITLE': 'Switch section',
-      'SectionNav.TRIGGER_EYEBROW': 'Section',
-      'SectionNav.LAST_OPENED': 'Last opened',
-    }[key] ?? fallback ?? key),
-  }),
-}));
+vi.mock('react-i18next', () => {
+  const KEYS = {
+    'Account.TITLE': 'Account & Administration',
+    'Account.PAGE_TITLE': 'Account',
+    'Account.TAB_PROFILE': 'Profile',
+    'Account.TAB_SECURITY': 'Security',
+    'Account.TAB_USERS': 'Users',
+    'Account.TAB_INVITE': 'Invite',
+    'Account.TAB_SUPPORT': 'Support',
+    'Account.GROUP_MY_ACCOUNT': 'My account',
+    'Account.GROUP_MANAGEMENT': 'Management',
+    'Account.GROUP_HELP': 'Help',
+    'Account.GROUP_MORE': 'More',
+    'SectionNav.TITLE': 'Switch section',
+    'SectionNav.TRIGGER_EYEBROW': 'Section',
+    'SectionNav.LAST_OPENED': 'Last opened',
+  };
+  const t = (key, fallback) => KEYS[key] ?? fallback ?? key;
+  return {
+    useTranslation: () => ({
+      t,
+      // resolveErrorText (AUTH-10) reads i18n.exists/i18n.t off the object
+      // useTranslation() returns — this mock must carry both, not just `t`.
+      i18n: { exists: (key) => Object.hasOwn(KEYS, key), t },
+    }),
+  };
+});
 
 vi.mock('../src/auth/authApi', () => ({
   fetchAuthPolicy: vi.fn(() => new Promise(() => {})),

package/tests/PasswordInvitePage.test.jsx

@@ -11,27 +11,34 @@ const authApi = vi.hoisted(() => ({
 
 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)),
-  }),
-}));
+vi.mock('react-i18next', () => {
+  const KEYS = {
+    '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…',
+  };
+  const t = (key, fallback) => KEYS[key] ?? (typeof fallback === 'string' ? fallback : key);
+  return {
+    useTranslation: () => ({
+      t,
+      // resolveErrorText (AUTH-10) reads i18n.exists/i18n.t off the object
+      // useTranslation() returns — this mock must carry both, not just `t`.
+      i18n: { exists: (key) => Object.hasOwn(KEYS, key), t },
+    }),
+  };
+});
 
 function LocationProbe() {
   const location = useLocation();

package/tests/QrSignupManager.registrationContext.test.jsx

@@ -25,8 +25,12 @@ vi.mock('qrcode.react', () => ({
 // re-render (e.g. the setBusy(true) inside it), which is a mock artifact this test file must
 // not reintroduce given it asserts exact createSignupQr call counts.
 const stableT = (_key, fallback) => fallback;
+// resolveErrorText (AUTH-10) reads i18n.exists/i18n.t off the object
+// useTranslation() returns — kept module-scoped/stable for the same reason
+// `stableT` is, above.
+const stableI18n = { exists: () => false, t: stableT };
 vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: stableT }),
+  useTranslation: () => ({ t: stableT, i18n: stableI18n }),
 }));
 
 import { QrSignupManager } from '../src/components/QrSignupManager';

package/tests/SignUpPage.test.jsx

@@ -13,9 +13,20 @@ vi.mock('react-router-dom', () => ({
   useLocation: () => ({ search: '' }),
 }));
 vi.mock('react-helmet', () => ({ Helmet: ({ children }) => <>{children}</> }));
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: (key, fallback) => (typeof fallback === 'string' ? fallback : key) }),
-}));
+vi.mock('react-i18next', () => {
+  const t = (key, fallback) => (typeof fallback === 'string' ? fallback : key);
+  return {
+    useTranslation: () => ({
+      t,
+      // resolveErrorText (AUTH-10) reads i18n.exists/i18n.t off the object
+      // useTranslation() returns — this mock must carry both, not just `t`.
+      // No real catalogue here, so nothing "exists"; resolveErrorText falls
+      // through to the backend message or the caller's default key, exactly
+      // as it did before this mock had an i18n object at all.
+      i18n: { exists: () => false, t },
+    }),
+  };
+});
 
 import { AuthContext } from '../src/auth/AuthContext';
 import { SignUpPage } from '../src/pages/SignUpPage';

package/tests/UserListComponent.test.jsx

@@ -10,21 +10,28 @@ const authApi = vi.hoisted(() => ({
 }));
 
 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)),
-  }),
-}));
+vi.mock('react-i18next', () => {
+  const KEYS = {
+    '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.',
+  };
+  const t = (key, fallback) => KEYS[key] ?? (typeof fallback === 'string' ? fallback : key);
+  return {
+    useTranslation: () => ({
+      t,
+      // resolveErrorText (AUTH-10) reads i18n.exists/i18n.t off the object
+      // useTranslation() returns — this mock must carry both, not just `t`.
+      i18n: { exists: (key) => Object.hasOwn(KEYS, key), t },
+    }),
+  };
+});
 
 import { UserListComponent } from '../src/components/UserListComponent';
 

package/tests/apiClientLanguage.test.js

@@ -0,0 +1,33 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import i18next from 'i18next';
+
+import apiClient from '../src/auth/apiClient';
+
+function requestConfig() {
+  const interceptor = apiClient.interceptors.request.handlers.find(Boolean);
+  return interceptor.fulfilled({ headers: { Existing: 'value' } });
+}
+
+describe('apiClient Accept-Language interceptor', () => {
+  let wasInitialized;
+
+  beforeEach(() => {
+    wasInitialized = i18next.isInitialized;
+  });
+
+  it('uses the active default i18next language and follows language changes', async () => {
+    await i18next.init({ lng: 'de', fallbackLng: 'en', resources: {} });
+    expect(requestConfig().headers['Accept-Language']).toBe('de');
+
+    await i18next.changeLanguage('en');
+    expect(requestConfig().headers['Accept-Language']).toBe('en');
+  });
+
+  it('sends no header when the default i18next instance is not initialized', () => {
+    i18next.isInitialized = false;
+    const config = requestConfig();
+    expect(config.headers).not.toHaveProperty('Accept-Language');
+    expect(config.headers.Existing).toBe('value');
+    i18next.isInitialized = wasInitialized;
+  });
+});

package/tests/authErrors.test.js

@@ -40,4 +40,35 @@ describe('auth error normalisation', () => {
 
     expect(error.code).toBe('invalid_credentials');
   });
+
+  it('keeps field, explicit i18n key, and backend message separate', () => {
+    const error = normaliseApiError({
+      response: {
+        status: 400,
+        data: {
+          errors: [{
+            code: 'invalid',
+            param: 'email',
+            i18nKey: 'Auth.EMAIL_INVALID',
+            message: 'Backend message',
+          }],
+        },
+      },
+    });
+
+    expect(error.code).toBe('invalid');
+    expect(error.field).toBe('email');
+    expect(error.i18nKey).toBe('Auth.EMAIL_INVALID');
+    expect(error.backendMessage).toBe('Backend message');
+    expect(error.message).toBe('Backend message');
+  });
+
+  it('does not turn a missing backend message into a code message', () => {
+    const error = normaliseApiError({
+      response: { data: { code: 'unknown_backend_code' } },
+    });
+
+    expect(error.backendMessage).toBeUndefined();
+    expect(error.message).toBe('unknown_backend_code');
+  });
 });