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

package/dist/pages/PasswordResetRequestPage.js

@@ -7,8 +7,9 @@ import { useTranslation } from 'react-i18next';
 import { NarrowPage } from '../layout/PageLayout';
 import { requestPasswordReset } from '../auth/authApi';
 import { PasswordResetRequestForm } from '../components/PasswordResetRequestForm';
+import { resolveErrorText } from '../utils/resolveErrorText';
 export function PasswordResetRequestPage() {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const [submitting, setSubmitting] = useState(false);
     const [successKey, setSuccessKey] = useState(null);
     const [errorKey, setErrorKey] = useState(null);
@@ -16,7 +17,7 @@ export function PasswordResetRequestPage() {
         setSuccessKey(null);
         setErrorKey(null);
         if (!email) {
-            setErrorKey('Auth.EMAIL_REQUIRED');
+            setErrorKey(t('Auth.EMAIL_REQUIRED'));
             return;
         }
         setSubmitting(true);
@@ -26,11 +27,11 @@ export function PasswordResetRequestPage() {
             setSuccessKey('Auth.RESET_REQUEST_ACCEPTED');
         }
         catch (err) {
-            setErrorKey(err.code || 'Auth.RESET_REQUEST_FAILED');
+            setErrorKey(resolveErrorText(i18n, err, 'Auth.RESET_REQUEST_FAILED'));
         }
         finally {
             setSubmitting(false);
         }
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_RESET_PASSWORD_TITLE'), subtitle: t('Auth.PAGE_RESET_REQUEST_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_RESET_PASSWORD_TITLE')] }) }), successKey && (_jsx(Typography, { color: "primary", gutterBottom: true, children: t(successKey) })), errorKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: t(errorKey) })), _jsx(PasswordResetRequestForm, { onSubmit: handleSubmit, submitting: submitting })] }));
+    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_RESET_PASSWORD_TITLE'), subtitle: t('Auth.PAGE_RESET_REQUEST_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_RESET_PASSWORD_TITLE')] }) }), successKey && (_jsx(Typography, { color: "primary", gutterBottom: true, children: t(successKey) })), errorKey && (_jsx(Typography, { color: "error", gutterBottom: true, children: errorKey })), _jsx(PasswordResetRequestForm, { onSubmit: handleSubmit, submitting: submitting })] }));
 }

package/dist/pages/SignUpPage.js

@@ -8,6 +8,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 };
 const TURNSTILE_SIGNUP_MODES = new Set([
     'self_signup_open',
@@ -28,7 +29,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(() => {
         const configured = Array.isArray(authMethods === null || authMethods === void 0 ? void 0 : authMethods.signup_modes)
@@ -75,15 +76,15 @@ export function SignUpPage() {
         setSuccessKey(null);
         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;
         }
         if (turnstileRequired && !turnstileToken)
@@ -104,7 +105,7 @@ export function SignUpPage() {
             setSuccessKey((res === null || res === void 0 ? void 0 : res.code) || 'Auth.INVITE_SENT');
         }
         catch (err) {
-            setErrorKey(err.code || 'Auth.INVITE_FAILED');
+            setErrorKey(resolveErrorText(i18n, err, 'Auth.INVITE_FAILED'));
             if (turnstileRequired) {
                 setTurnstileToken('');
                 (_a = turnstileWidgetRef.current) === null || _a === void 0 ? void 0 : _a.reset();
@@ -117,7 +118,7 @@ export function SignUpPage() {
     const handleGoToLogin = () => {
         navigate('/login');
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), signupModes.length === 0 ? (_jsx(Alert, { severity: "info", sx: SIGN_UP_PAGE_ALERT_SX, children: t('Auth.SELF_SIGNUP_DISABLED', 'Self sign-up is currently disabled.') })) : (_jsxs(_Fragment, { children: [successKey && (_jsx(Alert, { severity: "success", sx: SIGN_UP_PAGE_ALERT_SX, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: SIGN_UP_PAGE_ALERT_SX, children: t(errorKey, t('Auth.INVITE_FAILED', 'Could not complete signup.')) })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), turnstileRequired && (_jsx(TurnstileWidget, { ref: turnstileWidgetRef, siteKey: authMethods.turnstile_site_key, onToken: setTurnstileToken })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || (turnstileRequired && !turnstileToken), children: submitting
+    return (_jsxs(NarrowPage, { title: t('Auth.LOGIN_SIGNUP_BUTTON'), subtitle: pageSubtitle, children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.LOGIN_SIGNUP_BUTTON')] }) }), signupModes.length === 0 ? (_jsx(Alert, { severity: "info", sx: SIGN_UP_PAGE_ALERT_SX, children: t('Auth.SELF_SIGNUP_DISABLED', 'Self sign-up is currently disabled.') })) : (_jsxs(_Fragment, { children: [successKey && (_jsx(Alert, { severity: "success", sx: SIGN_UP_PAGE_ALERT_SX, children: t(successKey, { email }) })), errorKey && (_jsx(Alert, { severity: "error", sx: SIGN_UP_PAGE_ALERT_SX, children: errorKey })), signupModes.length > 1 && (_jsx(Stack, { spacing: 1, sx: { mb: 2 }, children: _jsx(Stack, { spacing: 1, children: signupModes.map((entry) => (_jsx(Button, { variant: mode === entry ? 'contained' : 'outlined', onClick: () => setMode(entry), disabled: submitting, fullWidth: true, children: t(MODE_LABELS[entry] || entry, entry) }, entry))) }) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.EMAIL_LABEL'), type: "email", required: true, fullWidth: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: submitting }), mode === 'self_signup_access_code' && (_jsx(TextField, { label: t('Auth.ACCESS_CODE_LABEL'), type: "text", required: true, fullWidth: true, value: accessCode, onChange: (e) => setAccessCode(e.target.value), disabled: submitting })), turnstileRequired && (_jsx(TurnstileWidget, { ref: turnstileWidgetRef, siteKey: authMethods.turnstile_site_key, onToken: setTurnstileToken })), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting || (turnstileRequired && !turnstileToken), children: submitting
                                     ? t('Auth.SIGNUP_SUBMITTING')
                                     : t('Auth.SIGNUP_SUBMIT') })] })] })), _jsx(Box, { sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: [t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT'), ' ', _jsx(Button, { onClick: handleGoToLogin, variant: "text", size: "small", children: t('Auth.SIGNUP_GO_TO_LOGIN') })] }) })] }));
 }

package/dist/pages/SignupConfirmPage.js

@@ -13,9 +13,10 @@ 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();
     const tokenFromUrl = useMemo(() => {
@@ -30,15 +31,15 @@ export function SignupConfirmPage() {
         event.preventDefault();
         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;
         }
         setSubmitting(true);
@@ -51,14 +52,14 @@ export function SignupConfirmPage() {
             return;
         }
         catch (err) {
-            setErrorKey((err === null || err === void 0 ? void 0 : err.code) || 'Auth.PENDING_TOKEN_INVALID');
+            setErrorKey(resolveErrorText(i18n, err, 'Auth.PENDING_TOKEN_INVALID'));
         }
         finally {
             setSubmitting(false);
         }
     };
     const tokenMissing = !tokenFromUrl;
-    return (_jsxs(NarrowPage, { title: t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration'), subtitle: t('Auth.SIGNUP_CONFIRM_SUBTITLE', 'Choose a password to finish creating your account.'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration')] }) }), tokenMissing ? (_jsxs(_Fragment, { children: [_jsx(Alert, { severity: "error", sx: SIGNUP_CONFIRM_PAGE_ALERT_SX, children: t('Auth.PENDING_TOKEN_INVALID', 'This confirmation link is invalid or expired.') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { onClick: () => navigate('/signup'), variant: "contained", children: t('Auth.SIGNUP_REQUEST_NEW', 'Request a new invitation') }), _jsx(Button, { onClick: () => navigate('/login'), variant: "text", children: t('Auth.SIGNUP_GO_TO_LOGIN', 'Go to login') })] })] })) : (_jsxs(_Fragment, { children: [errorKey && (_jsx(Alert, { severity: "error", sx: SIGNUP_CONFIRM_PAGE_ALERT_SX, children: t(errorKey, t('Auth.PENDING_TOKEN_INVALID', 'Could not confirm registration.')) })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.NEW_PASSWORD_LABEL', 'New password'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: submitting, autoComplete: "new-password" }), _jsx(TextField, { label: t('Auth.PASSWORD_CONFIRM_LABEL', 'Confirm new password'), type: "password", required: true, fullWidth: true, value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), disabled: submitting, autoComplete: "new-password" }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
+    return (_jsxs(NarrowPage, { title: t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration'), subtitle: t('Auth.SIGNUP_CONFIRM_SUBTITLE', 'Choose a password to finish creating your account.'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.SIGNUP_CONFIRM_TITLE', 'Confirm your registration')] }) }), tokenMissing ? (_jsxs(_Fragment, { children: [_jsx(Alert, { severity: "error", sx: SIGNUP_CONFIRM_PAGE_ALERT_SX, children: t('Auth.PENDING_TOKEN_INVALID', 'This confirmation link is invalid or expired.') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { onClick: () => navigate('/signup'), variant: "contained", children: t('Auth.SIGNUP_REQUEST_NEW', 'Request a new invitation') }), _jsx(Button, { onClick: () => navigate('/login'), variant: "text", children: t('Auth.SIGNUP_GO_TO_LOGIN', 'Go to login') })] })] })) : (_jsxs(_Fragment, { children: [errorKey && (_jsx(Alert, { severity: "error", sx: SIGNUP_CONFIRM_PAGE_ALERT_SX, children: errorKey })), _jsxs(Box, { component: "form", onSubmit: handleSubmit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(TextField, { label: t('Auth.NEW_PASSWORD_LABEL', 'New password'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: submitting, autoComplete: "new-password" }), _jsx(TextField, { label: t('Auth.PASSWORD_CONFIRM_LABEL', 'Confirm new password'), type: "password", required: true, fullWidth: true, value: confirmPassword, onChange: (e) => setConfirmPassword(e.target.value), disabled: submitting, autoComplete: "new-password" }), _jsx(Button, { type: "submit", variant: "contained", disabled: submitting, children: submitting
                                     ? t('Auth.SIGNUP_CONFIRM_SUBMITTING', 'Confirming…')
                                     : t('Auth.SIGNUP_CONFIRM_SUBMIT', 'Confirm registration') })] }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 3 }, children: [_jsx(Typography, { variant: "body2", children: t('Auth.SIGNUP_ALREADY_HAVE_ACCOUNT', 'Already have an account?') }), _jsx(Button, { onClick: () => navigate('/login'), variant: "text", size: "small", children: t('Auth.SIGNUP_GO_TO_LOGIN', 'Go to login') })] })] }))] }));
 }

package/dist/theme/createAppTheme.js

@@ -1,6 +1,7 @@
 import './fonts';
 import { createTheme, darken, getContrastRatio } from '@mui/material/styles';
-import { BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS, BASELINE_PALETTE, BASELINE_STATIC, MOTION, } from './tokens';
+import { BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS, BASELINE_PALETTE, BASELINE_STATIC, MOTION, withMainShades, } from './tokens';
+import { calculateContrastRatio } from './themeCompleteness';
 function findFunction(value, path) {
     if (typeof value === 'function')
         return path;
@@ -40,6 +41,41 @@ 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 = {
@@ -151,21 +187,38 @@ function createPaletteAwareComponents(palette) {
  * objects are created, so runtime app/site overrides cannot leave stale values.
  */
 export function createAppTheme(appConfig = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     if (!((_a = appConfig === null || appConfig === void 0 ? void 0 : appConfig.palette) === null || _a === void 0 ? void 0 : _a.primary)) {
         throw new TypeError('createAppTheme: appConfig.palette.primary is required.');
     }
     validateStyleOverrides(appConfig.components);
     const paletteTheme = createTheme({ palette: appConfig.palette }, { palette: BASELINE_PALETTE }, { palette: appConfig.palette });
     const finalPalette = paletteTheme.palette;
-    const computedPalette = {
-        controlBorder: Object.assign(Object.assign({}, finalPalette.controlBorder), { focus: deriveFocusColour(finalPalette.primary.main, [
-                '#FFFFFF',
-                finalPalette.background.default,
-            ]) }),
-    };
+    const contrastSurfaces = ['#FFFFFF', finalPalette.background.default];
+    const derivedStatusEntries = {};
+    for (const status of ['success', 'warning', 'error', 'info']) {
+        if (((_c = (_b = appConfig.palette) === null || _b === void 0 ? void 0 : _b[status]) === null || _c === void 0 ? void 0 : _c.main) !== undefined)
+            continue;
+        const current = finalPalette[status];
+        const main = deriveDarkenedPageColour(current.main, contrastSurfaces, 4.5);
+        if (main !== current.main) {
+            derivedStatusEntries[status] = Object.assign(Object.assign({}, current), withMainShades(main, current.contrastText));
+        }
+    }
+    const derivedControlBorderEntries = {};
+    for (const state of ['main', 'hover', 'error']) {
+        if (((_e = (_d = appConfig.palette) === null || _d === void 0 ? void 0 : _d.controlBorder) === null || _e === void 0 ? void 0 : _e[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 = Object.assign(Object.assign({}, derivedStatusEntries), { controlBorder: Object.assign(Object.assign(Object.assign({}, finalPalette.controlBorder), derivedControlBorderEntries), { focus: deriveFocusColour(finalPalette.primary.main, contrastSurfaces) }) });
     const resolvedPalette = Object.assign(Object.assign({}, finalPalette), computedPalette);
-    const fontFamily = ((_b = appConfig.typography) === null || _b === void 0 ? void 0 : _b.fontFamily) || BASELINE_STATIC.typography.fontFamily;
+    const fontFamily = ((_f = appConfig.typography) === null || _f === void 0 ? void 0 : _f.fontFamily) || BASELINE_STATIC.typography.fontFamily;
     return createTheme(Object.assign(Object.assign({}, BASELINE_STATIC), { typography: Object.assign(Object.assign({}, BASELINE_STATIC.typography), { fontFamily }), fontLoading: Object.assign(Object.assign({}, BASELINE_STATIC.fontLoading), { weights: [...BASELINE_STATIC.fontLoading.weights] }), palette: resolvedPalette, themeCompleteness: {
             baseline: true,
             exemptions: BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS.map((exemption) => (Object.assign({}, exemption))),

package/dist/theme/tokens.js

@@ -7,7 +7,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/dist/utils/auth-errors.js

@@ -1,25 +1,59 @@
 // src/utils/auth-errors.js
 export function extractErrorInfo(error) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const status = (_b = (_a = error.response) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : null;
     const data = (_d = (_c = error.response) === null || _c === void 0 ? void 0 : _c.data) !== null && _d !== void 0 ? _d : 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: (_e = first.code) !== null && _e !== void 0 ? _e : null,
+            field: (_g = (_f = first.field) !== null && _f !== void 0 ? _f : first.param) !== null && _g !== void 0 ? _g : null,
+            i18nKey: (_h = first.i18nKey) !== null && _h !== void 0 ? _h : 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: (_j = data.field) !== null && _j !== void 0 ? _j : null,
+            i18nKey: (_k = data.i18nKey) !== null && _k !== void 0 ? _k : null,
+            message: (_l = data.message) !== null && _l !== void 0 ? _l : 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: (_m = data.field) !== null && _m !== void 0 ? _m : null,
+            i18nKey: (_o = data.i18nKey) !== null && _o !== void 0 ? _o : null,
+            message: data.detail,
+            raw: data,
+        };
     }
-    return { status, code: null, message: null, raw: data };
+    return {
+        status,
+        code: null,
+        field: (_p = data.field) !== null && _p !== void 0 ? _p : null,
+        i18nKey: (_q = data.i18nKey) !== null && _q !== void 0 ? _q : null,
+        message: data.message,
+        raw: data,
+    };
 }
 export function normaliseApiError(error, defaultCode = 'Auth.GENERIC_ERROR') {
     const info = extractErrorInfo(error);
@@ -27,6 +61,9 @@ export function normaliseApiError(error, defaultCode = 'Auth.GENERIC_ERROR') {
     const message = info.message || code || defaultCode;
     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/dist/utils/resolveErrorText.js

@@ -0,0 +1,24 @@
+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 === null || err === void 0 ? void 0 : err.response) ? extractErrorInfo(err) : null;
+    const resolvedErr = info
+        ? Object.assign(Object.assign({}, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "sideEffects": [

package/src/auth/apiClient.jsx

@@ -1,4 +1,5 @@
 import axios from "axios";
+import i18next from "i18next";
 import { CSRF_URL } from "./authConfig";
 import { requestReauth } from "./reauth";
 
@@ -8,6 +9,14 @@ const apiClient = axios.create({
   xsrfHeaderName: "X-CSRFToken",
 });
 
+apiClient.interceptors.request.use((config) => {
+  const language = i18next?.isInitialized ? i18next.language : null;
+  if (language) {
+    config.headers = { ...config.headers, 'Accept-Language': language };
+  }
+  return config;
+});
+
 let redirectingToLogin = false;
 
 function isBrowser() {

package/src/components/AccessCodeManager.jsx

@@ -13,6 +13,7 @@ import {
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
+import { resolveErrorText } from '../utils/resolveErrorText';
 
 // Pfad ggf. anpassen je nach Struktur: von src/auth/components zu src/auth/authApi
 import {
@@ -36,7 +37,7 @@ export const ACCESS_CODE_VALUE_FIELD_SX = {
 };
 
 export function AccessCodeManager() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [codes, setCodes] = useState([]);
   const [loading, setLoading] = useState(true);
   const [submitting, setSubmitting] = useState(false);
@@ -50,8 +51,7 @@ export function AccessCodeManager() {
 
   // Helper that prefers backend error code if available
   const setErrorFromErrorObject = (err, fallbackCode) => {
-    const backendCode = err?.code;
-    setErrorKey(backendCode || fallbackCode);
+    setErrorKey(resolveErrorText(i18n, err, fallbackCode));
   };
 
   // Load all access codes from backend
@@ -104,7 +104,7 @@ export function AccessCodeManager() {
 
   const handleAddManual = async () => {
     if (!manualCode.trim()) {
-      setErrorKey('Auth.SIGNUP_ACCESS_CODE_REQUIRED');
+      setErrorKey(t('Auth.SIGNUP_ACCESS_CODE_REQUIRED'));
       return;
     }
     await handleCreateCode(manualCode.trim());
@@ -150,7 +150,7 @@ export function AccessCodeManager() {
     <Box>
       {errorKey && (
         <Alert severity="error" sx={ACCESS_CODE_ALERT_SX}>
-          {t(errorKey)}
+          {errorKey}
         </Alert>
       )}
       {successKey && (

package/src/components/AccessCodeSingleUseToggle.jsx

@@ -8,11 +8,12 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
+import { resolveErrorText } from '../utils/resolveErrorText';
 
 export const ACCESS_CODE_SINGLE_USE_ALERT_SX = { mb: 2 };
 
 export function AccessCodeSingleUseToggle({ canEdit = true, policy = null, onPolicyChange = null }) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [value, setValue] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState('');
@@ -57,7 +58,7 @@ export function AccessCodeSingleUseToggle({ canEdit = true, policy = null, onPol
       setSuccess(t('Auth.ACCESS_CODE_SINGLE_USE_SAVE_SUCCESS', 'Access code policy saved.'));
     } catch (err) {
       setValue(previous);
-      setError(t(err?.code || 'Auth.AUTH_POLICY_UPDATE_FAILED', 'Could not save access code policy.'));
+      setError(resolveErrorText(i18n, err, 'Auth.AUTH_POLICY_UPDATE_FAILED'));
     } finally {
       setBusy(false);
     }

package/src/components/AllowedEmailDomainsManager.jsx

@@ -8,6 +8,7 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { updateAuthPolicy } from '../auth/authApi';
+import { resolveErrorText } from '../utils/resolveErrorText';
 
 export const ALLOWED_EMAIL_DOMAINS_ALERT_SX = { mb: 2 };
 export const ALLOWED_EMAIL_DOMAINS_BUTTON_SX = { mt: 2 };
@@ -18,7 +19,7 @@ export function AllowedEmailDomainsManager({
   onPolicyChange,
   canEdit = true,
 }) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [domainsText, setDomainsText] = useState('');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState('');
@@ -44,7 +45,7 @@ export function AllowedEmailDomainsManager({
       setSuccess(t('Auth.AUTH_POLICY_SAVE_SUCCESS', 'Authentication settings saved.'));
       if (onPolicyChange) onPolicyChange(next);
     } catch (err) {
-      setError(t(err?.code || 'Auth.AUTH_POLICY_UPDATE_FAILED', 'Could not save authentication settings.'));
+      setError(resolveErrorText(i18n, err, 'Auth.AUTH_POLICY_UPDATE_FAILED'));
     } finally {
       setBusy(false);
     }

package/src/components/AuthFactorRequirementCard.jsx

@@ -10,11 +10,12 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { fetchAuthPolicy, updateAuthPolicy } from '../auth/authApi';
+import { resolveErrorText } from '../utils/resolveErrorText';
 
 export const AUTH_FACTOR_REQUIREMENT_ALERT_SX = { mb: 2 };
 
 export function AuthFactorRequirementCard({ canEdit = true, policy = null }) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [value, setValue] = useState('1');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState('');
@@ -56,7 +57,7 @@ export function AuthFactorRequirementCard({ canEdit = true, policy = null }) {
       setSuccess(t('Auth.AUTH_FACTOR_SAVE_SUCCESS', 'Factor requirement saved.'));
     } catch (err) {
       setValue(previous);
-      setError(t(err?.code || 'Auth.AUTH_POLICY_UPDATE_FAILED', 'Could not save factor requirement.'));
+      setError(resolveErrorText(i18n, err, 'Auth.AUTH_POLICY_UPDATE_FAILED'));
     } finally {
       setBusy(false);
     }

package/src/components/BulkInviteCsvTab.jsx

@@ -15,6 +15,7 @@ import {
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { sendAdminInvite } from '../auth/authApi';
+import { resolveErrorText } from '../utils/resolveErrorText';
 
 export const BULK_INVITE_ACTION_SX = {
   minWidth: 120,
@@ -51,7 +52,7 @@ export function BulkInviteCsvTab({
   inviteFn = (email) => sendAdminInvite(email),
   onCompleted,
 }) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [emails, setEmails] = useState([]);
   const [results, setResults] = useState({});
   const [busy, setBusy] = useState(false);
@@ -106,7 +107,7 @@ export function BulkInviteCsvTab({
       } catch (err) {
         nextResults[email] = {
           ok: false,
-          message: t(err?.code || 'Auth.INVITE_FAILED'),
+          message: resolveErrorText(i18n, err, 'Auth.INVITE_FAILED'),
         };
       }
       setResults({ ...nextResults });

package/src/components/MFAComponent.jsx

@@ -19,6 +19,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { useTranslation } from 'react-i18next';
 import { fetchAuthenticators, requestTotpKey, activateTotp, deactivateTotp, fetchRecoveryCodes, generateRecoveryCodes  } from '../auth/authApi';
+import { resolveErrorText } from '../utils/resolveErrorText';
 
 export const MFA_ALERT_SX = { mb: 2 };
 export const MFA_CARD_SX = { mb: 3 };
@@ -28,7 +29,7 @@ export const MFA_DIVIDER_SX = { my: 3 };
 export const MFA_RECOVERY_BUTTON_SX = { mt: 2 };
 
 export function MFAComponent() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const [authenticators, setAuthenticators] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -75,7 +76,7 @@ export function MFAComponent() {
 
       if (result.exists) {
         setIsSettingUp(false);
-        setErrorKey('Auth.MFA_TOTP_ALREADY_ACTIVE');
+        setErrorKey(t('Auth.MFA_TOTP_ALREADY_ACTIVE'));
         return;
       }
 
@@ -86,7 +87,7 @@ export function MFAComponent() {
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err);
-      setErrorKey(err.code || 'Auth.TOTP_REQUEST_FAILED');
+      setErrorKey(resolveErrorText(i18n, err, 'Auth.TOTP_REQUEST_FAILED'));
       setIsSettingUp(false);
     }
   };
@@ -104,7 +105,7 @@ export function MFAComponent() {
       await loadData();
       await handleShowRecoveryCodes();
     } catch (err) {
-      setErrorKey(err.code || 'Auth.MFA_AUTHENTICATE_FAILED');
+      setErrorKey(resolveErrorText(i18n, err, 'Auth.MFA_AUTHENTICATE_FAILED'));
     } finally {
       setSubmitting(false);
     }
@@ -124,7 +125,7 @@ export function MFAComponent() {
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err);
-      setErrorKey(err.code || 'Auth.TOTP_DEACTIVATE_FAILED');
+      setErrorKey(resolveErrorText(i18n, err, 'Auth.TOTP_DEACTIVATE_FAILED'));
     }
   };
 
@@ -139,7 +140,7 @@ export function MFAComponent() {
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err);
-      setErrorKey(err.code || 'Auth.RECOVERY_CODES_FETCH_FAILED');
+      setErrorKey(resolveErrorText(i18n, err, 'Auth.RECOVERY_CODES_FETCH_FAILED'));
     }
   };
 
@@ -152,7 +153,7 @@ export function MFAComponent() {
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err);
-      setErrorKey(err.code || 'Auth.RECOVERY_CODES_GENERATE_FAILED');
+      setErrorKey(resolveErrorText(i18n, err, 'Auth.RECOVERY_CODES_GENERATE_FAILED'));
     }
   };
 
@@ -173,7 +174,7 @@ export function MFAComponent() {
 
       {errorKey && (
         <Alert severity="error" sx={MFA_ALERT_SX}>
-          {t(errorKey)}
+          {errorKey}
         </Alert>
       )}