@micha.bigler/ui-core-micha 1.4.2 → 1.4.4

package/dist/auth/authApi.js

@@ -596,6 +596,27 @@ export function isStrongSession(session) {
     const strongMethods = ['totp', 'recovery_codes', 'webauthn'];
     return used.some((m) => strongMethods.includes(m));
 }
+export async function requestMfaSupportHelp(emailOrIdentifier, message = '') {
+    // Wir nutzen hier die Users-API, nicht HEADLESS_BASE
+    const payload = { email: emailOrIdentifier, message };
+    const res = await axios.post(`${USERS_BASE}/mfa/support-help/`, payload, { withCredentials: true });
+    return res.data;
+}
+export async function fetchRecoveryRequests(status = 'pending') {
+    const res = await axios.get('/api/support/recovery-requests/', {
+        params: { status },
+        withCredentials: true,
+    });
+    return res.data;
+}
+export async function approveRecoveryRequest(id) {
+    const res = await axios.post(`/api/support/recovery-requests/${id}/approve/`, {}, { withCredentials: true });
+    return res.data;
+}
+export async function rejectRecoveryRequest(id) {
+    const res = await axios.post(`/api/support/recovery-requests/${id}/reject/`, {}, { withCredentials: true });
+    return res.data;
+}
 // -----------------------------
 // Aggregated API object
 // -----------------------------
@@ -625,5 +646,9 @@ export const authApi = {
     validateAccessCode,
     requestInviteWithCode,
     isStrongSession,
+    requestMfaSupportHelp,
+    fetchRecoveryRequests,
+    approveRecoveryRequest,
+    rejectRecoveryRequest,
 };
 export default authApi;

package/dist/components/MfaLoginComponent.js

@@ -4,21 +4,24 @@ import React, { useState } from 'react';
 import { Box, Typography, TextField, Button, Stack, Alert, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../auth/authApi';
-const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
+const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel }) => {
     const { t } = useTranslation();
     const [code, setCode] = useState('');
     const [submitting, setSubmitting] = useState(false);
     const [errorKey, setErrorKey] = useState(null);
+    const [infoKey, setInfoKey] = useState(null);
+    const [helpRequested, setHelpRequested] = useState(false);
     const types = Array.isArray(availableTypes) ? availableTypes : [];
     const supportsTotpOrRecovery = types.includes('totp') || types.includes('recovery_codes');
     const supportsWebauthn = types.includes('webauthn');
     const handleSubmitCode = async (event) => {
         event.preventDefault();
         setErrorKey(null);
+        setInfoKey(null);
         setSubmitting(true);
         try {
             const trimmed = code.trim();
-            const isRecovery = trimmed.length > 6; // 6 = typische TOTP-Länge, >6 = Recovery
+            const isRecovery = trimmed.length > 6;
             await authApi.authenticateWithMFA({ code: trimmed });
             const user = await authApi.fetchCurrentUser();
             onSuccess({
@@ -35,6 +38,7 @@ const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
     };
     const handlePasskey = async () => {
         setErrorKey(null);
+        setInfoKey(null);
         setSubmitting(true);
         try {
             const { user } = await authApi.loginWithPasskey();
@@ -47,8 +51,22 @@ const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
             setSubmitting(false);
         }
     };
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.MFA_TITLE', 'Additional verification required') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_SUBTITLE', 'Please confirm your login using one of the available methods.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _jsxs(Stack, { spacing: 2, children: [supportsWebauthn && (_jsx(Button, { variant: "outlined", fullWidth: true, onClick: handlePasskey, disabled: submitting, children: t('Auth.MFA_USE_PASSKEY', 'Use passkey / security key') })), supportsTotpOrRecovery && (_jsxs(Box, { component: "form", onSubmit: handleSubmitCode, children: [_jsx(TextField, { label: t('Auth.MFA_CODE_LABEL', 'Authenticator code (or recovery code)'), value: code, onChange: (e) => setCode(e.target.value), fullWidth: true, disabled: submitting, autoComplete: "one-time-code", sx: { mb: 2 } }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: submitting || !code.trim(), children: t('Auth.MFA_VERIFY', 'Verify') })] })), _jsx(Button, { size: "small", onClick: onCancel, disabled: submitting, children: t('Auth.MFA_BACK_TO_LOGIN', 'Back to login') }), _jsx(Button, { size: "small", color: "secondary", onClick: () => {
-                            // später z.B. navigate('/help/account-recovery');
-                        }, children: t('Auth.MFA_NEED_HELP', "I can't use any of these methods") })] })] }));
+    const handleNeedHelp = async () => {
+        setErrorKey(null);
+        setInfoKey(null);
+        setSubmitting(true);
+        try {
+            await authApi.requestMfaSupportHelp(identifier || '');
+            setHelpRequested(true);
+            setInfoKey('Auth.MFA_HELP_REQUESTED');
+        }
+        catch (err) {
+            setErrorKey(err.code || 'Auth.MFA_HELP_REQUEST_FAILED');
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Auth.MFA_TITLE', 'Additional verification required') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_SUBTITLE', 'Please confirm your login using one of the available methods.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), infoKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t(infoKey) })), _jsxs(Stack, { spacing: 2, children: [supportsTotpOrRecovery && (_jsxs(Box, { component: "form", onSubmit: handleSubmitCode, children: [_jsx(TextField, { label: t('Auth.MFA_CODE_LABEL', 'Authenticator code (or recovery code)'), value: code, onChange: (e) => setCode(e.target.value), fullWidth: true, disabled: submitting || helpRequested, autoComplete: "one-time-code", sx: { mb: 2 } }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: submitting || !code.trim() || helpRequested, children: t('Auth.MFA_VERIFY', 'Verify') })] })), supportsWebauthn && (_jsx(Button, { variant: "outlined", fullWidth: true, onClick: handlePasskey, disabled: submitting || helpRequested, children: t('Auth.MFA_USE_PASSKEY', 'Use passkey / security key') })), _jsx(Button, { size: "small", onClick: onCancel, disabled: submitting, children: t('Auth.MFA_BACK_TO_LOGIN', 'Back to login') }), _jsx(Button, { size: "small", color: "secondary", onClick: handleNeedHelp, disabled: submitting || helpRequested, children: t('Auth.MFA_NEED_HELP', "I can't use any of these methods") })] })] }));
 };
 export default MfaLoginComponent;

package/dist/components/SupportRecoveryRequestsTab.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/SupportRecoveryRequestsTab.jsx
+import React, { useEffect, useState } from 'react';
+import { Box, Typography, Table, TableHead, TableBody, TableRow, TableCell, TableContainer, Paper, Button, CircularProgress, Alert, Stack, } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { authApi } from '../auth/authApi';
+const SupportRecoveryRequestsTab = () => {
+    const { t } = useTranslation();
+    const [requests, setRequests] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [errorKey, setErrorKey] = useState(null);
+    const [statusFilter, setStatusFilter] = useState('pending'); // optional erweiterbar
+    const loadRequests = async () => {
+        setLoading(true);
+        setErrorKey(null);
+        try {
+            const data = await authApi.fetchRecoveryRequests(statusFilter);
+            setRequests(Array.isArray(data) ? data : []);
+        }
+        catch (err) {
+            setErrorKey(err.code || 'Support.RECOVERY_REQUESTS_LOAD_FAILED');
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        loadRequests();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [statusFilter]);
+    const handleSendRecoveryLink = async (id) => {
+        setErrorKey(null);
+        try {
+            await authApi.approveRecoveryRequest(id);
+            // Nach Erfolg Liste neu laden
+            await loadRequests();
+        }
+        catch (err) {
+            setErrorKey(err.code || 'Support.RECOVERY_REQUEST_APPROVE_FAILED');
+        }
+    };
+    const handleReject = async (id) => {
+        setErrorKey(null);
+        try {
+            await authApi.rejectRecoveryRequest(id);
+            await loadRequests();
+        }
+        catch (err) {
+            setErrorKey(err.code || 'Support.RECOVERY_REQUEST_REJECT_FAILED');
+        }
+    };
+    if (loading) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mt: 4 }, children: _jsx(CircularProgress, {}) }));
+    }
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests') }), _jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.RECOVERY_REQUESTS_DESCRIPTION', 'Users who cannot complete MFA can request support. You can send them a recovery link or reject the request after verification.') }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), _jsxs(Stack, { direction: "row", spacing: 2, sx: { mb: 2 }, children: [_jsx(Button, { variant: statusFilter === 'pending' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('pending'), children: t('Support.RECOVERY_FILTER_PENDING', 'Open') }), _jsx(Button, { variant: statusFilter === 'approved' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('approved'), children: t('Support.RECOVERY_FILTER_APPROVED', 'Approved') }), _jsx(Button, { variant: statusFilter === 'rejected' ? 'contained' : 'outlined', size: "small", onClick: () => setStatusFilter('rejected'), children: t('Support.RECOVERY_FILTER_REJECTED', 'Rejected') })] }), requests.length === 0 ? (_jsx(Typography, { variant: "body2", children: t('Support.RECOVERY_REQUESTS_EMPTY', 'No recovery requests for this filter.') })) : (_jsx(TableContainer, { component: Paper, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('Support.RECOVERY_COL_CREATED', 'Created') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_USER', 'User') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_SUPPORT', 'Assigned support') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_STATUS', 'Status') }), _jsx(TableCell, { children: t('Support.RECOVERY_COL_ACTIONS', 'Actions') })] }) }), _jsx(TableBody, { children: requests.map((req) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: req.created_at
+                                            ? new Date(req.created_at).toLocaleString()
+                                            : '-' }), _jsx(TableCell, { children: req.user_email || req.user }), _jsx(TableCell, { children: req.support_email || '–' }), _jsx(TableCell, { children: req.status }), _jsx(TableCell, { children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { variant: "contained", size: "small", onClick: () => handleSendRecoveryLink(req.id), disabled: req.status !== 'pending', children: t('Support.RECOVERY_ACTION_SEND_LINK', 'Send recovery link') }), _jsx(Button, { variant: "outlined", size: "small", color: "error", onClick: () => handleReject(req.id), disabled: req.status !== 'pending', children: t('Support.RECOVERY_ACTION_REJECT', 'Reject') })] }) })] }, req.id))) })] }) }))] }));
+};
+export default SupportRecoveryRequestsTab;

package/dist/i18n/authTranslations.js

@@ -781,6 +781,11 @@ export const authTranslations = {
         "fr": "Veuillez confirmer votre connexion à l’aide d’une des méthodes disponibles.",
         "en": "Please confirm your login using one of the available methods."
     },
+    "Auth.MFA_SUBTITLE_SHORT": {
+        "de": "Bitte bestätige deine Anmeldung mit einer der verfügbaren Methoden.",
+        "fr": "Veuillez confirmer votre connexion à l’aide d’une des méthodes disponibles.",
+        "en": "Please confirm your login using one of the available methods."
+    },
     "Auth.MFA_USE_PASSKEY": {
         "de": "Passkey / Sicherheitsschlüssel verwenden",
         "fr": "Utiliser une clé d’accès / clé de sécurité",
@@ -811,5 +816,15 @@ export const authTranslations = {
         "fr": "Votre connexion actuelle ne satisfait pas aux exigences de sécurité recommandées. Veuillez configurer un facteur de sécurité supplémentaire (clé d’accès ou application d’authentification) et générer des codes de récupération.",
         "en": "Your current sign-in does not meet the recommended security requirements. Please set up an additional security factor (passkey or authenticator app) and generate recovery codes."
     },
+    "Auth.MFA_HELP_REQUESTED": {
+        "de": "Wir haben deinen Support-Kontakt informiert. Du erhältst eine Rückmeldung, sobald deine Identität geprüft wurde.",
+        "fr": "Nous avons informé votre contact de support. Vous recevrez une réponse dès que votre identité aura été vérifiée.",
+        "en": "We have informed your support contact. You will hear back as soon as your identity has been verified."
+    },
+    "Auth.MFA_HELP_REQUEST_FAILED": {
+        "de": "Die Support-Anfrage konnte nicht gesendet werden. Bitte versuche es später erneut oder kontaktiere den Support direkt.",
+        "fr": "La demande d'assistance n'a pas pu être envoyée. Veuillez réessayer plus tard ou contacter le support directement.",
+        "en": "Could not send the support request. Please try again later or contact support directly."
+    }
     // ...
 };

package/dist/pages/AccountPage.js

@@ -6,14 +6,19 @@ import { Tabs, Tab, Box } from '@mui/material';
 import { WidePage } from '../layout/PageLayout';
 import ProfileComponent from '../components/ProfileComponent';
 import SecurityComponent from '../components/SecurityComponent';
+import SupportRecoveryRequestsTab from '../components/SupportRecoveryRequestsTab';
 import { authApi } from '../auth/authApi';
 import { AuthContext } from '../auth/AuthContext';
 import { useSearchParams } from 'react-router-dom';
 export function AccountPage() {
     const { login } = useContext(AuthContext);
     const [searchParams] = useSearchParams();
-    // Tab aus URL bestimmen
-    const initialTab = searchParams.get('tab') === 'security' ? 'security' : 'account';
+    const initialTabParam = searchParams.get('tab');
+    const initialTab = initialTabParam === 'security'
+        ? 'security'
+        : initialTabParam === 'support'
+            ? 'support'
+            : 'account';
     const fromParam = searchParams.get('from');
     const fromRecovery = fromParam === 'recovery';
     const fromWeakLogin = fromParam === 'weak_login';
@@ -25,6 +30,6 @@ export function AccountPage() {
         const updatedUser = await authApi.updateUserProfile(payload);
         login(updatedUser);
     };
-    return (_jsxs(WidePage, { title: "Account", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Account" }) }), _jsxs(Tabs, { value: tab, onChange: handleTabChange, sx: { mb: 3 }, children: [_jsx(Tab, { label: "Security", value: "security" }), _jsx(Tab, { label: "Account", value: "account" })] }), tab === 'security' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), tab === 'account' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(ProfileComponent, { onLoad: () => { }, onSubmit: handleProfileSubmit, submitText: "Save", showName: true, showPrivacy: true, showCookies: true }) }))] }));
+    return (_jsxs(WidePage, { title: "Account", children: [_jsx(Helmet, { children: _jsx("title", { children: "PROJECT_NAME \u2013 Account" }) }), _jsxs(Tabs, { value: tab, onChange: handleTabChange, sx: { mb: 3 }, children: [_jsx(Tab, { label: "Account", value: "account" }), _jsx(Tab, { label: "Security", value: "security" }), _jsx(Tab, { label: "Support", value: "support" })] }), tab === 'account' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(ProfileComponent, { onLoad: () => { }, onSubmit: handleProfileSubmit, submitText: "Save", showName: true, showPrivacy: true, showCookies: true }) })), tab === 'security' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SecurityComponent, { fromRecovery: fromRecovery, fromWeakLogin: fromWeakLogin }) })), tab === 'support' && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(SupportRecoveryRequestsTab, {}) }))] }));
 }
 export default AccountPage;

package/dist/pages/LoginPage.js

@@ -27,6 +27,7 @@ export function LoginPage() {
             if (result.needsMfa) {
                 setMfaState({
                     availableTypes: result.availableTypes || [],
+                    identifier,
                 });
                 setStep('mfa');
             }
@@ -88,6 +89,6 @@ export function LoginPage() {
         setMfaState(null);
         setErrorKey(null);
     };
-    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: handleSubmitCredentials, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, onPasskeyLogin: handlePasskeyLoginInitial, onSignUp: handleSignUp, disabled: submitting })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
+    return (_jsxs(NarrowPage, { title: t('Auth.PAGE_LOGIN_TITLE'), subtitle: t('Auth.PAGE_LOGIN_SUBTITLE'), children: [_jsx(Helmet, { children: _jsxs("title", { children: [t('App.NAME'), " \u2013 ", t('Auth.PAGE_LOGIN_TITLE')] }) }), errorKey && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(errorKey) })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: handleSubmitCredentials, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, onPasskeyLogin: handlePasskeyLoginInitial, onSignUp: handleSignUp, disabled: submitting })), step === 'mfa' && mfaState && (_jsx(Box, { children: _jsx(MfaLoginComponent, { availableTypes: mfaState.availableTypes, identifier: mfaState.identifier, onSuccess: handleMfaSuccess, onCancel: handleMfaCancel }) }))] }));
 }
 export default LoginPage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/auth/authApi.jsx

@@ -777,6 +777,47 @@ export function isStrongSession(session) {
   return used.some((m) => strongMethods.includes(m));
 }
 
+export async function requestMfaSupportHelp(emailOrIdentifier, message = '') {
+  // Wir nutzen hier die Users-API, nicht HEADLESS_BASE
+  const payload = { email: emailOrIdentifier, message };
+
+  const res = await axios.post(
+    `${USERS_BASE}/mfa/support-help/`,
+    payload,
+    { withCredentials: true }
+  );
+  return res.data;
+}
+
+export async function fetchRecoveryRequests(status = 'pending') {
+  const res = await axios.get(
+    '/api/support/recovery-requests/',
+    {
+      params: { status },
+      withCredentials: true,
+    },
+  );
+  return res.data;
+}
+
+export async function approveRecoveryRequest(id) {
+  const res = await axios.post(
+    `/api/support/recovery-requests/${id}/approve/`,
+    {},
+    { withCredentials: true },
+  );
+  return res.data;
+}
+
+export async function rejectRecoveryRequest(id) {
+  const res = await axios.post(
+    `/api/support/recovery-requests/${id}/reject/`,
+    {},
+    { withCredentials: true },
+  );
+  return res.data;
+}
+
 
 
 // -----------------------------
@@ -808,6 +849,10 @@ export const authApi = {
   validateAccessCode,
   requestInviteWithCode,
   isStrongSession,
+  requestMfaSupportHelp,
+  fetchRecoveryRequests,
+  approveRecoveryRequest,
+  rejectRecoveryRequest,
 };
 
 export default authApi;

package/src/components/MfaLoginComponent.jsx

@@ -11,11 +11,13 @@ import {
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../auth/authApi';
 
-const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
+const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel }) => {
   const { t } = useTranslation();
   const [code, setCode] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [errorKey, setErrorKey] = useState(null);
+  const [infoKey, setInfoKey] = useState(null);
+  const [helpRequested, setHelpRequested] = useState(false);
 
   const types = Array.isArray(availableTypes) ? availableTypes : [];
   const supportsTotpOrRecovery =
@@ -25,10 +27,11 @@ const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
   const handleSubmitCode = async (event) => {
     event.preventDefault();
     setErrorKey(null);
+    setInfoKey(null);
     setSubmitting(true);
     try {
       const trimmed = code.trim();
-      const isRecovery = trimmed.length > 6; // 6 = typische TOTP-Länge, >6 = Recovery
+      const isRecovery = trimmed.length > 6;
 
       await authApi.authenticateWithMFA({ code: trimmed });
 
@@ -47,6 +50,7 @@ const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
 
   const handlePasskey = async () => {
     setErrorKey(null);
+    setInfoKey(null);
     setSubmitting(true);
     try {
       const { user } = await authApi.loginWithPasskey();
@@ -58,6 +62,21 @@ const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
     }
   };
 
+  const handleNeedHelp = async () => {
+    setErrorKey(null);
+    setInfoKey(null);
+    setSubmitting(true);
+    try {
+      await authApi.requestMfaSupportHelp(identifier || '');
+      setHelpRequested(true);
+      setInfoKey('Auth.MFA_HELP_REQUESTED');
+    } catch (err) {
+      setErrorKey(err.code || 'Auth.MFA_HELP_REQUEST_FAILED');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
   return (
     <Box>
       <Typography variant="h6" gutterBottom>
@@ -76,18 +95,13 @@ const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
         </Alert>
       )}
 
-      <Stack spacing={2}>
-        {supportsWebauthn && (
-          <Button
-            variant="outlined"
-            fullWidth
-            onClick={handlePasskey}
-            disabled={submitting}
-          >
-            {t('Auth.MFA_USE_PASSKEY', 'Use passkey / security key')}
-          </Button>
-        )}
+      {infoKey && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          {t(infoKey)}
+        </Alert>
+      )}
 
+      <Stack spacing={2}>
         {supportsTotpOrRecovery && (
           <Box component="form" onSubmit={handleSubmitCode}>
             <TextField
@@ -98,7 +112,7 @@ const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
               value={code}
               onChange={(e) => setCode(e.target.value)}
               fullWidth
-              disabled={submitting}
+              disabled={submitting || helpRequested}
               autoComplete="one-time-code"
               sx={{ mb: 2 }}
             />
@@ -106,13 +120,24 @@ const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
               type="submit"
               variant="contained"
               fullWidth
-              disabled={submitting || !code.trim()}
+              disabled={submitting || !code.trim() || helpRequested}
             >
               {t('Auth.MFA_VERIFY', 'Verify')}
             </Button>
           </Box>
         )}
 
+        {supportsWebauthn && (
+          <Button
+            variant="outlined"
+            fullWidth
+            onClick={handlePasskey}
+            disabled={submitting || helpRequested}
+          >
+            {t('Auth.MFA_USE_PASSKEY', 'Use passkey / security key')}
+          </Button>
+        )}
+
         <Button
           size="small"
           onClick={onCancel}
@@ -124,9 +149,8 @@ const MfaLoginComponent = ({ availableTypes, onSuccess, onCancel }) => {
         <Button
           size="small"
           color="secondary"
-          onClick={() => {
-            // später z.B. navigate('/help/account-recovery');
-          }}
+          onClick={handleNeedHelp}
+          disabled={submitting || helpRequested}
         >
           {t(
             'Auth.MFA_NEED_HELP',

package/src/components/SupportRecoveryRequestsTab.jsx

@@ -0,0 +1,180 @@
+// src/components/SupportRecoveryRequestsTab.jsx
+import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Typography,
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableContainer,
+  Paper,
+  Button,
+  CircularProgress,
+  Alert,
+  Stack,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { authApi } from '../auth/authApi';
+
+const SupportRecoveryRequestsTab = () => {
+  const { t } = useTranslation();
+
+  const [requests, setRequests] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [errorKey, setErrorKey] = useState(null);
+  const [statusFilter, setStatusFilter] = useState('pending'); // optional erweiterbar
+
+  const loadRequests = async () => {
+    setLoading(true);
+    setErrorKey(null);
+    try {
+      const data = await authApi.fetchRecoveryRequests(statusFilter);
+      setRequests(Array.isArray(data) ? data : []);
+    } catch (err) {
+      setErrorKey(err.code || 'Support.RECOVERY_REQUESTS_LOAD_FAILED');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadRequests();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [statusFilter]);
+
+  const handleSendRecoveryLink = async (id) => {
+    setErrorKey(null);
+    try {
+      await authApi.approveRecoveryRequest(id);
+      // Nach Erfolg Liste neu laden
+      await loadRequests();
+    } catch (err) {
+      setErrorKey(err.code || 'Support.RECOVERY_REQUEST_APPROVE_FAILED');
+    }
+  };
+
+  const handleReject = async (id) => {
+    setErrorKey(null);
+    try {
+      await authApi.rejectRecoveryRequest(id);
+      await loadRequests();
+    } catch (err) {
+      setErrorKey(err.code || 'Support.RECOVERY_REQUEST_REJECT_FAILED');
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        {t('Support.RECOVERY_REQUESTS_TITLE', 'Account recovery requests')}
+      </Typography>
+
+      <Typography variant="body2" sx={{ mb: 2 }}>
+        {t(
+          'Support.RECOVERY_REQUESTS_DESCRIPTION',
+          'Users who cannot complete MFA can request support. You can send them a recovery link or reject the request after verification.',
+        )}
+      </Typography>
+
+      {errorKey && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {t(errorKey)}
+        </Alert>
+      )}
+
+      <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
+        <Button
+          variant={statusFilter === 'pending' ? 'contained' : 'outlined'}
+          size="small"
+          onClick={() => setStatusFilter('pending')}
+        >
+          {t('Support.RECOVERY_FILTER_PENDING', 'Open')}
+        </Button>
+        <Button
+          variant={statusFilter === 'approved' ? 'contained' : 'outlined'}
+          size="small"
+          onClick={() => setStatusFilter('approved')}
+        >
+          {t('Support.RECOVERY_FILTER_APPROVED', 'Approved')}
+        </Button>
+        <Button
+          variant={statusFilter === 'rejected' ? 'contained' : 'outlined'}
+          size="small"
+          onClick={() => setStatusFilter('rejected')}
+        >
+          {t('Support.RECOVERY_FILTER_REJECTED', 'Rejected')}
+        </Button>
+      </Stack>
+
+      {requests.length === 0 ? (
+        <Typography variant="body2">
+          {t('Support.RECOVERY_REQUESTS_EMPTY', 'No recovery requests for this filter.')}
+        </Typography>
+      ) : (
+        <TableContainer component={Paper}>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell>{t('Support.RECOVERY_COL_CREATED', 'Created')}</TableCell>
+                <TableCell>{t('Support.RECOVERY_COL_USER', 'User')}</TableCell>
+                <TableCell>{t('Support.RECOVERY_COL_SUPPORT', 'Assigned support')}</TableCell>
+                <TableCell>{t('Support.RECOVERY_COL_STATUS', 'Status')}</TableCell>
+                <TableCell>{t('Support.RECOVERY_COL_ACTIONS', 'Actions')}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {requests.map((req) => (
+                <TableRow key={req.id}>
+                  <TableCell>
+                    {req.created_at
+                      ? new Date(req.created_at).toLocaleString()
+                      : '-'}
+                  </TableCell>
+                  <TableCell>{req.user_email || req.user}</TableCell>
+                  <TableCell>{req.support_email || '–'}</TableCell>
+                  <TableCell>{req.status}</TableCell>
+                  <TableCell>
+                    <Stack direction="row" spacing={1}>
+                      <Button
+                        variant="contained"
+                        size="small"
+                        onClick={() => handleSendRecoveryLink(req.id)}
+                        disabled={req.status !== 'pending'}
+                      >
+                        {t(
+                          'Support.RECOVERY_ACTION_SEND_LINK',
+                          'Send recovery link',
+                        )}
+                      </Button>
+                      <Button
+                        variant="outlined"
+                        size="small"
+                        color="error"
+                        onClick={() => handleReject(req.id)}
+                        disabled={req.status !== 'pending'}
+                      >
+                        {t('Support.RECOVERY_ACTION_REJECT', 'Reject')}
+                      </Button>
+                    </Stack>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </Box>
+  );
+};
+
+export default SupportRecoveryRequestsTab;

package/src/i18n/authTranslations.js

@@ -828,6 +828,11 @@ export const authTranslations = {
     "fr": "Veuillez confirmer votre connexion à l’aide d’une des méthodes disponibles.",
     "en": "Please confirm your login using one of the available methods."
   },
+  "Auth.MFA_SUBTITLE_SHORT": {
+    "de": "Bitte bestätige deine Anmeldung mit einer der verfügbaren Methoden.",
+    "fr": "Veuillez confirmer votre connexion à l’aide d’une des méthodes disponibles.",
+    "en": "Please confirm your login using one of the available methods."
+  },
   "Auth.MFA_USE_PASSKEY": {
     "de": "Passkey / Sicherheitsschlüssel verwenden",
     "fr": "Utiliser une clé d’accès / clé de sécurité",
@@ -858,6 +863,16 @@ export const authTranslations = {
   "fr": "Votre connexion actuelle ne satisfait pas aux exigences de sécurité recommandées. Veuillez configurer un facteur de sécurité supplémentaire (clé d’accès ou application d’authentification) et générer des codes de récupération.",
   "en": "Your current sign-in does not meet the recommended security requirements. Please set up an additional security factor (passkey or authenticator app) and generate recovery codes."
 },
+"Auth.MFA_HELP_REQUESTED": {
+  "de": "Wir haben deinen Support-Kontakt informiert. Du erhältst eine Rückmeldung, sobald deine Identität geprüft wurde.",
+  "fr": "Nous avons informé votre contact de support. Vous recevrez une réponse dès que votre identité aura été vérifiée.",
+  "en": "We have informed your support contact. You will hear back as soon as your identity has been verified."
+},
+"Auth.MFA_HELP_REQUEST_FAILED": {
+  "de": "Die Support-Anfrage konnte nicht gesendet werden. Bitte versuche es später erneut oder kontaktiere den Support direkt.",
+  "fr": "La demande d'assistance n'a pas pu être envoyée. Veuillez réessayer plus tard ou contacter le support directement.",
+  "en": "Could not send the support request. Please try again later or contact support directly."
+}
 
 
 

package/src/pages/AccountPage.jsx

@@ -5,6 +5,7 @@ import { Tabs, Tab, Box } from '@mui/material';
 import { WidePage } from '../layout/PageLayout';
 import ProfileComponent from '../components/ProfileComponent';
 import SecurityComponent from '../components/SecurityComponent';
+import SupportRecoveryRequestsTab from '../components/SupportRecoveryRequestsTab';
 import { authApi } from '../auth/authApi';
 import { AuthContext } from '../auth/AuthContext';
 import { useSearchParams } from 'react-router-dom';
@@ -13,9 +14,13 @@ export function AccountPage() {
   const { login } = useContext(AuthContext);
   const [searchParams] = useSearchParams();
 
-  // Tab aus URL bestimmen
+  const initialTabParam = searchParams.get('tab');
   const initialTab =
-    searchParams.get('tab') === 'security' ? 'security' : 'account';
+    initialTabParam === 'security'
+      ? 'security'
+      : initialTabParam === 'support'
+        ? 'support'
+        : 'account';
 
   const fromParam = searchParams.get('from');
   const fromRecovery = fromParam === 'recovery';
@@ -43,19 +48,11 @@ export function AccountPage() {
         onChange={handleTabChange}
         sx={{ mb: 3 }}
       >
-        <Tab label="Security" value="security" />
         <Tab label="Account" value="account" />
+        <Tab label="Security" value="security" />
+        <Tab label="Support" value="support" />
       </Tabs>
 
-      {tab === 'security' && (
-        <Box sx={{ mt: 1 }}>
-          <SecurityComponent
-            fromRecovery={fromRecovery}
-            fromWeakLogin={fromWeakLogin}
-          />
-        </Box>
-      )}
-
       {tab === 'account' && (
         <Box sx={{ mt: 1 }}>
           <ProfileComponent
@@ -68,6 +65,21 @@ export function AccountPage() {
           />
         </Box>
       )}
+
+      {tab === 'security' && (
+        <Box sx={{ mt: 1 }}>
+          <SecurityComponent
+            fromRecovery={fromRecovery}
+            fromWeakLogin={fromWeakLogin}
+          />
+        </Box>
+      )}
+
+      {tab === 'support' && (
+        <Box sx={{ mt: 1 }}>
+          <SupportRecoveryRequestsTab />
+        </Box>
+      )}
     </WidePage>
   );
 }

package/src/pages/LoginPage.jsx

@@ -30,6 +30,7 @@ export function LoginPage() {
       if (result.needsMfa) {
         setMfaState({
           availableTypes: result.availableTypes || [],
+          identifier,
         });
         setStep('mfa');
       } else {
@@ -126,8 +127,10 @@ export function LoginPage() {
         <Box>
           <MfaLoginComponent
             availableTypes={mfaState.availableTypes}
+            identifier={mfaState.identifier}
             onSuccess={handleMfaSuccess}
             onCancel={handleMfaCancel}
+            //onNeedHelp={handleMfaNeedHelp}
           />
         </Box>
       )}