@micha.bigler/ui-core-micha 1.4.11 → 1.4.12

package/dist/auth/authApi.js

@@ -609,13 +609,12 @@ export async function fetchRecoveryRequests(status = 'pending') {
     });
     return res.data;
 }
-export async function approveRecoveryRequest(id, note = '') {
-    const res = await axios.post(`/api/support/recovery-requests/${id}/approve/`, { note }, // 👉 Note mitsenden
-    { withCredentials: true });
+export async function approveRecoveryRequest(id, supportNote) {
+    const res = await axios.post(`/api/support/recovery-requests/${id}/approve/`, { support_note: supportNote || '' }, { withCredentials: true });
     return res.data;
 }
-export async function rejectRecoveryRequest(id) {
-    const res = await axios.post(`/api/support/recovery-requests/${id}/reject/`, {}, { withCredentials: true });
+export async function rejectRecoveryRequest(id, supportNote) {
+    const res = await axios.post(`/api/support/recovery-requests/${id}/reject/`, { support_note: supportNote || '' }, { withCredentials: true });
     return res.data;
 }
 export async function loginWithRecoveryPassword(email, password, token) {

package/dist/components/MfaLoginComponent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/auth/components/MfaLoginComponent.jsx
 import React, { useState } from 'react';
-import { Box, Typography, TextField, Button, Stack, Alert, Divider, } from '@mui/material';
+import { Box, Typography, TextField, Button, Stack, Alert, Divider, Dialog, DialogTitle, DialogContent, DialogActions, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../auth/authApi';
 const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel }) => {
@@ -11,6 +11,8 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
     const [errorKey, setErrorKey] = useState(null);
     const [infoKey, setInfoKey] = useState(null);
     const [helpRequested, setHelpRequested] = useState(false);
+    const [helpDialogOpen, setHelpDialogOpen] = useState(false);
+    const [helpMessage, setHelpMessage] = useState('');
     const types = Array.isArray(availableTypes) ? availableTypes : [];
     const supportsTotpOrRecovery = types.includes('totp') || types.includes('recovery_codes');
     const supportsWebauthn = types.includes('webauthn');
@@ -51,14 +53,21 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
             setSubmitting(false);
         }
     };
+    const openHelpDialog = () => {
+        setErrorKey(null);
+        setInfoKey(null);
+        setHelpDialogOpen(true);
+    };
     const handleNeedHelp = async () => {
         setErrorKey(null);
         setInfoKey(null);
         setSubmitting(true);
         try {
-            await authApi.requestMfaSupportHelp(identifier || '');
+            await authApi.requestMfaSupportHelp(identifier || '', helpMessage || '');
             setHelpRequested(true);
             setInfoKey('Auth.MFA_HELP_REQUESTED');
+            setHelpDialogOpen(false);
+            setHelpMessage('');
         }
         catch (err) {
             setErrorKey(err.code || 'Auth.MFA_HELP_REQUEST_FAILED');
@@ -67,6 +76,6 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
             setSubmitting(false);
         }
     };
-    return (_jsxs(Box, { children: [_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: [supportsWebauthn && (_jsx(Button, { variant: "contained", fullWidth: true, onClick: handlePasskey, disabled: submitting || helpRequested, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON', 'Use passkey / security key') })), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), 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') })] })), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { fullWidth: true, size: "small", variant: "outlined", onClick: onCancel, disabled: submitting, children: t('Auth.MFA_BACK_TO_LOGIN', 'Back to login') }), _jsx(Button, { fullWidth: true, size: "small", variant: "outlined", color: "secondary", onClick: handleNeedHelp, disabled: submitting || helpRequested, children: t('Auth.MFA_NEED_HELP', "I can't use any of these methods") })] })] })] }));
+    return (_jsxs(Box, { children: [_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: [supportsWebauthn && (_jsx(Button, { variant: "contained", fullWidth: true, onClick: handlePasskey, disabled: submitting || helpRequested, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON', 'Use passkey / security key') })), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), 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') })] })), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [_jsx(Button, { fullWidth: true, size: "small", variant: "outlined", onClick: onCancel, disabled: submitting, children: t('Auth.MFA_BACK_TO_LOGIN', 'Back to login') }), _jsx(Button, { fullWidth: true, size: "small", variant: "outlined", color: "secondary", onClick: openHelpDialog, disabled: submitting || helpRequested, children: t('Auth.MFA_NEED_HELP', "I can't use any of these methods") })] })] }), _jsxs(Dialog, { open: helpDialogOpen, onClose: () => setHelpDialogOpen(false), fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('Auth.MFA_HELP_DIALOG_TITLE', 'Need help with sign-in') }), _jsxs(DialogContent, { dividers: true, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Auth.MFA_HELP_DIALOG_DESCRIPTION', 'Describe briefly why you cannot use the available methods. A support person will review your request.') }), _jsx(TextField, { label: t('Auth.MFA_HELP_MESSAGE_LABEL', 'Your message to support'), helperText: t('Auth.MFA_HELP_MESSAGE_HELP', 'Optional, but helps support verify your identity.'), multiline: true, minRows: 3, fullWidth: true, value: helpMessage, onChange: (e) => setHelpMessage(e.target.value), disabled: submitting })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setHelpDialogOpen(false), disabled: submitting, children: t('Common.CANCEL', 'Cancel') }), _jsx(Button, { onClick: handleNeedHelp, disabled: submitting, variant: "contained", children: t('Auth.MFA_HELP_SUBMIT', 'Send request') })] })] })] }));
 };
 export default MfaLoginComponent;

package/dist/components/SupportRecoveryRequestsTab.js

@@ -9,10 +9,11 @@ const SupportRecoveryRequestsTab = () => {
     const [requests, setRequests] = useState([]);
     const [loading, setLoading] = useState(true);
     const [errorKey, setErrorKey] = useState(null);
-    const [statusFilter, setStatusFilter] = useState('pending'); // optional erweiterbar
-    const [approveDialogOpen, setApproveDialogOpen] = useState(false);
-    const [approveDialogNote, setApproveDialogNote] = useState('');
-    const [approveDialogRequestId, setApproveDialogRequestId] = useState(null);
+    const [statusFilter, setStatusFilter] = useState('pending');
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [dialogNote, setDialogNote] = useState('');
+    const [dialogRequestId, setDialogRequestId] = useState(null);
+    const [dialogMode, setDialogMode] = useState('approve');
     const loadRequests = async () => {
         setLoading(true);
         setErrorKey(null);
@@ -31,37 +32,36 @@ const SupportRecoveryRequestsTab = () => {
         loadRequests();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [statusFilter]);
-    const handleOpenApproveDialog = (id) => {
-        setApproveDialogRequestId(id);
-        setApproveDialogNote('');
-        setApproveDialogOpen(true);
+    const openDialog = (id, mode) => {
+        setDialogRequestId(id);
+        setDialogMode(mode);
+        setDialogNote('');
+        setDialogOpen(true);
     };
-    const handleCloseApproveDialog = () => {
-        setApproveDialogOpen(false);
-        setApproveDialogRequestId(null);
-        setApproveDialogNote('');
+    const closeDialog = () => {
+        setDialogOpen(false);
+        setDialogRequestId(null);
+        setDialogNote('');
     };
-    const handleConfirmApprove = async () => {
-        if (!approveDialogRequestId)
+    const handleConfirm = async () => {
+        if (!dialogRequestId)
             return;
         setErrorKey(null);
         try {
-            await authApi.approveRecoveryRequest(approveDialogRequestId, approveDialogNote);
+            if (dialogMode === 'approve') {
+                await authApi.approveRecoveryRequest(dialogRequestId, dialogNote);
+            }
+            else {
+                await authApi.rejectRecoveryRequest(dialogRequestId, dialogNote);
+            }
             await loadRequests();
-            handleCloseApproveDialog();
+            closeDialog();
         }
         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');
+            setErrorKey(err.code ||
+                (dialogMode === 'approve'
+                    ? 'Support.RECOVERY_REQUEST_APPROVE_FAILED'
+                    : 'Support.RECOVERY_REQUEST_REJECT_FAILED'));
         }
     };
     if (loading) {
@@ -69,6 +69,12 @@ const SupportRecoveryRequestsTab = () => {
     }
     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_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.status }), _jsx(TableCell, { children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { variant: "contained", size: "small", onClick: () => handleOpenApproveDialog(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))) })] }) })), _jsxs(Dialog, { open: approveDialogOpen, onClose: handleCloseApproveDialog, fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: t('Support.RECOVERY_APPROVE_DIALOG_TITLE', 'Confirm account recovery') }), _jsxs(DialogContent, { dividers: true, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: t('Support.RECOVERY_APPROVE_CONFIRM_QUESTION', 'Are you sure you want to approve this recovery request?') }), _jsx(TextField, { label: t('Support.RECOVERY_APPROVE_NOTE_LABEL', 'Reason for this decision'), helperText: t('Support.RECOVERY_APPROVE_NOTE_HELP', 'Describe briefly why you are approving this request.'), multiline: true, minRows: 3, fullWidth: true, value: approveDialogNote, onChange: (e) => setApproveDialogNote(e.target.value) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleCloseApproveDialog, children: t('Common.CANCEL', 'Cancel') }), _jsx(Button, { onClick: handleConfirmApprove, variant: "contained", disabled: !approveDialogNote.trim(), children: t('Support.RECOVERY_APPROVE_SUBMIT', 'Send link') })] })] })] }));
+                                            : '-' }), _jsx(TableCell, { children: req.user_email || req.user }), _jsx(TableCell, { children: req.status }), _jsx(TableCell, { children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { variant: "contained", size: "small", onClick: () => openDialog(req.id, 'approve'), disabled: req.status !== 'pending', children: t('Support.RECOVERY_ACTION_SEND_LINK', 'Send recovery link') }), _jsx(Button, { variant: "outlined", size: "small", color: "error", onClick: () => openDialog(req.id, 'reject'), disabled: req.status !== 'pending', children: t('Support.RECOVERY_ACTION_REJECT', 'Reject') })] }) })] }, req.id))) })] }) })), _jsxs(Dialog, { open: dialogOpen, onClose: closeDialog, fullWidth: true, maxWidth: "sm", children: [_jsx(DialogTitle, { children: dialogMode === 'approve'
+                            ? t('Support.RECOVERY_APPROVE_DIALOG_TITLE', 'Confirm account recovery')
+                            : t('Support.RECOVERY_REJECT_DIALOG_TITLE', 'Reject account recovery') }), _jsxs(DialogContent, { dividers: true, children: [_jsx(Typography, { variant: "body2", sx: { mb: 2 }, children: dialogMode === 'approve'
+                                    ? t('Support.RECOVERY_APPROVE_CONFIRM_QUESTION', 'Are you sure you want to approve this recovery request?')
+                                    : t('Support.RECOVERY_REJECT_CONFIRM_QUESTION', 'Are you sure you want to reject this recovery request?') }), _jsx(TextField, { label: t('Support.RECOVERY_NOTE_LABEL', 'Reason for this decision'), helperText: t('Support.RECOVERY_NOTE_HELP', 'Describe briefly why you are approving or rejecting this request.'), multiline: true, minRows: 3, fullWidth: true, value: dialogNote, onChange: (e) => setDialogNote(e.target.value) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: closeDialog, children: t('Common.CANCEL', 'Cancel') }), _jsx(Button, { onClick: handleConfirm, variant: "contained", disabled: !dialogNote.trim(), color: dialogMode === 'approve' ? 'primary' : 'error', children: dialogMode === 'approve'
+                                    ? t('Support.RECOVERY_APPROVE_SUBMIT', 'Send link')
+                                    : t('Support.RECOVERY_REJECT_SUBMIT', 'Reject request') })] })] })] }));
 };
 export default SupportRecoveryRequestsTab;

package/dist/i18n/authTranslations.js

@@ -855,6 +855,56 @@ export const authTranslations = {
         "de": "Link senden",
         "fr": "Envoyer le lien",
         "en": "Send link"
+    },
+    "Auth.MFA_HELP_DIALOG_TITLE": {
+        "de": "Hilfe bei der Anmeldung",
+        "fr": "Aide pour la connexion",
+        "en": "Need help with sign-in"
+    },
+    "Auth.MFA_HELP_DIALOG_DESCRIPTION": {
+        "de": "Beschreiben Sie kurz, warum Sie keine der verfügbaren Methoden verwenden können. Eine Supportperson wird Ihre Anfrage prüfen.",
+        "fr": "Décrivez brièvement pourquoi vous ne pouvez utiliser aucune des méthodes disponibles. Un membre du support examinera votre demande.",
+        "en": "Briefly describe why you cannot use any of the available methods. A support person will review your request."
+    },
+    "Auth.MFA_HELP_MESSAGE_LABEL": {
+        "de": "Ihre Nachricht an den Support",
+        "fr": "Votre message au support",
+        "en": "Your message to support"
+    },
+    "Auth.MFA_HELP_MESSAGE_HELP": {
+        "de": "Optional, hilft dem Support bei der Überprüfung Ihrer Identität.",
+        "fr": "Facultatif, mais aide le support à vérifier votre identité.",
+        "en": "Optional, but helps support verify your identity."
+    },
+    "Auth.MFA_HELP_SUBMIT": {
+        "de": "Anfrage senden",
+        "fr": "Envoyer la demande",
+        "en": "Send request"
+    },
+    "Support.RECOVERY_NOTE_LABEL": {
+        "de": "Begründung für diese Entscheidung",
+        "fr": "Raison de cette décision",
+        "en": "Reason for this decision"
+    },
+    "Support.RECOVERY_NOTE_HELP": {
+        "de": "Beschreiben Sie kurz, warum Sie diese Anfrage genehmigen oder ablehnen.",
+        "fr": "Décrivez brièvement pourquoi vous approuvez ou rejetez cette demande.",
+        "en": "Briefly describe why you are approving or rejecting this request."
+    },
+    "Support.RECOVERY_REJECT_DIALOG_TITLE": {
+        "de": "Konto-Wiederherstellung ablehnen",
+        "fr": "Refuser la récupération de compte",
+        "en": "Reject account recovery"
+    },
+    "Support.RECOVERY_REJECT_CONFIRM_QUESTION": {
+        "de": "Sind Sie sicher, dass Sie diese Wiederherstellungsanfrage ablehnen möchten?",
+        "fr": "Êtes-vous sûr de vouloir refuser cette demande de récupération ?",
+        "en": "Are you sure you want to reject this recovery request?"
+    },
+    "Support.RECOVERY_REJECT_SUBMIT": {
+        "de": "Anfrage ablehnen",
+        "fr": "Refuser la demande",
+        "en": "Reject request"
     }
     // ...
 };

package/package.json

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

package/src/auth/authApi.jsx

@@ -800,19 +800,19 @@ export async function fetchRecoveryRequests(status = 'pending') {
   return res.data;
 }
 
-export async function approveRecoveryRequest(id, note = '') {
+export async function approveRecoveryRequest(id, supportNote) {
   const res = await axios.post(
     `/api/support/recovery-requests/${id}/approve/`,
-    { note },             // 👉 Note mitsenden
+    { support_note: supportNote || '' },
     { withCredentials: true },
   );
   return res.data;
 }
 
-export async function rejectRecoveryRequest(id) {
+export async function rejectRecoveryRequest(id, supportNote) {
   const res = await axios.post(
     `/api/support/recovery-requests/${id}/reject/`,
-    {},
+    { support_note: supportNote || '' },
     { withCredentials: true },
   );
   return res.data;

package/src/components/MfaLoginComponent.jsx

@@ -8,6 +8,10 @@ import {
   Stack,
   Alert,
   Divider,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../auth/authApi';
@@ -20,6 +24,9 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
   const [infoKey, setInfoKey] = useState(null);
   const [helpRequested, setHelpRequested] = useState(false);
 
+  const [helpDialogOpen, setHelpDialogOpen] = useState(false);
+  const [helpMessage, setHelpMessage] = useState('');
+
   const types = Array.isArray(availableTypes) ? availableTypes : [];
   const supportsTotpOrRecovery =
     types.includes('totp') || types.includes('recovery_codes');
@@ -63,14 +70,22 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
     }
   };
 
+  const openHelpDialog = () => {
+    setErrorKey(null);
+    setInfoKey(null);
+    setHelpDialogOpen(true);
+  };
+
   const handleNeedHelp = async () => {
     setErrorKey(null);
     setInfoKey(null);
     setSubmitting(true);
     try {
-      await authApi.requestMfaSupportHelp(identifier || '');
+      await authApi.requestMfaSupportHelp(identifier || '', helpMessage || '');
       setHelpRequested(true);
       setInfoKey('Auth.MFA_HELP_REQUESTED');
+      setHelpDialogOpen(false);
+      setHelpMessage('');
     } catch (err) {
       setErrorKey(err.code || 'Auth.MFA_HELP_REQUEST_FAILED');
     } finally {
@@ -162,7 +177,7 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
             size="small"
             variant="outlined"
             color="secondary"
-            onClick={handleNeedHelp}
+            onClick={openHelpDialog}
             disabled={submitting || helpRequested}
           >
             {t(
@@ -172,8 +187,57 @@ const MfaLoginComponent = ({ availableTypes, identifier, onSuccess, onCancel })
           </Button>
         </Stack>
       </Stack>
+       <Dialog
+        open={helpDialogOpen}
+        onClose={() => setHelpDialogOpen(false)}
+        fullWidth
+        maxWidth="sm"
+      >
+        <DialogTitle>
+          {t('Auth.MFA_HELP_DIALOG_TITLE', 'Need help with sign-in')}
+        </DialogTitle>
+        <DialogContent dividers>
+          <Typography variant="body2" sx={{ mb: 2 }}>
+            {t(
+              'Auth.MFA_HELP_DIALOG_DESCRIPTION',
+              'Describe briefly why you cannot use the available methods. A support person will review your request.',
+            )}
+          </Typography>
+          <TextField
+            label={t('Auth.MFA_HELP_MESSAGE_LABEL', 'Your message to support')}
+            helperText={t(
+              'Auth.MFA_HELP_MESSAGE_HELP',
+              'Optional, but helps support verify your identity.',
+            )}
+            multiline
+            minRows={3}
+            fullWidth
+            value={helpMessage}
+            onChange={(e) => setHelpMessage(e.target.value)}
+            disabled={submitting}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => setHelpDialogOpen(false)}
+            disabled={submitting}
+          >
+            {t('Common.CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            onClick={handleNeedHelp}
+            disabled={submitting}
+            variant="contained"
+          >
+            {t('Auth.MFA_HELP_SUBMIT', 'Send request')}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
+    
   );
+  
 };
 
+
 export default MfaLoginComponent;

package/src/components/SupportRecoveryRequestsTab.jsx

@@ -29,11 +29,12 @@ const SupportRecoveryRequestsTab = () => {
   const [requests, setRequests] = useState([]);
   const [loading, setLoading] = useState(true);
   const [errorKey, setErrorKey] = useState(null);
-  const [statusFilter, setStatusFilter] = useState('pending'); // optional erweiterbar
+  const [statusFilter, setStatusFilter] = useState('pending');
 
-  const [approveDialogOpen, setApproveDialogOpen] = useState(false);
-  const [approveDialogNote, setApproveDialogNote] = useState('');
-  const [approveDialogRequestId, setApproveDialogRequestId] = useState(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogNote, setDialogNote] = useState('');
+  const [dialogRequestId, setDialogRequestId] = useState(null);
+  const [dialogMode, setDialogMode] = useState('approve');
 
   const loadRequests = async () => {
     setLoading(true);
@@ -53,37 +54,37 @@ const SupportRecoveryRequestsTab = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [statusFilter]);
 
-  const handleOpenApproveDialog = (id) => {
-    setApproveDialogRequestId(id);
-    setApproveDialogNote('');
-    setApproveDialogOpen(true);
+  const openDialog = (id, mode) => {
+    setDialogRequestId(id);
+    setDialogMode(mode);
+    setDialogNote('');
+    setDialogOpen(true);
   };
 
-  const handleCloseApproveDialog = () => {
-    setApproveDialogOpen(false);
-    setApproveDialogRequestId(null);
-    setApproveDialogNote('');
+  const closeDialog = () => {
+    setDialogOpen(false);
+    setDialogRequestId(null);
+    setDialogNote('');
   };
 
-  const handleConfirmApprove = async () => {
-    if (!approveDialogRequestId) return;
+  const handleConfirm = async () => {
+    if (!dialogRequestId) return;
     setErrorKey(null);
     try {
-      await authApi.approveRecoveryRequest(approveDialogRequestId, approveDialogNote);
+      if (dialogMode === 'approve') {
+        await authApi.approveRecoveryRequest(dialogRequestId, dialogNote);
+      } else {
+        await authApi.rejectRecoveryRequest(dialogRequestId, dialogNote);
+      }
       await loadRequests();
-      handleCloseApproveDialog();
+      closeDialog();
     } 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');
+      setErrorKey(
+        err.code ||
+          (dialogMode === 'approve'
+            ? 'Support.RECOVERY_REQUEST_APPROVE_FAILED'
+            : 'Support.RECOVERY_REQUEST_REJECT_FAILED'),
+      );
     }
   };
 
@@ -140,7 +141,10 @@ const SupportRecoveryRequestsTab = () => {
 
       {requests.length === 0 ? (
         <Typography variant="body2">
-          {t('Support.RECOVERY_REQUESTS_EMPTY', 'No recovery requests for this filter.')}
+          {t(
+            'Support.RECOVERY_REQUESTS_EMPTY',
+            'No recovery requests for this filter.',
+          )}
         </Typography>
       ) : (
         <TableContainer component={Paper}>
@@ -176,7 +180,7 @@ const SupportRecoveryRequestsTab = () => {
                       <Button
                         variant="contained"
                         size="small"
-                        onClick={() => handleOpenApproveDialog(req.id)}
+                        onClick={() => openDialog(req.id, 'approve')}
                         disabled={req.status !== 'pending'}
                       >
                         {t(
@@ -188,7 +192,7 @@ const SupportRecoveryRequestsTab = () => {
                         variant="outlined"
                         size="small"
                         color="error"
-                        onClick={() => handleReject(req.id)}
+                        onClick={() => openDialog(req.id, 'reject')}
                         disabled={req.status !== 'pending'}
                       >
                         {t('Support.RECOVERY_ACTION_REJECT', 'Reject')}
@@ -202,55 +206,60 @@ const SupportRecoveryRequestsTab = () => {
         </TableContainer>
       )}
 
-      <Dialog
-        open={approveDialogOpen}
-        onClose={handleCloseApproveDialog}
-        fullWidth
-        maxWidth="sm"
-      >
+      <Dialog open={dialogOpen} onClose={closeDialog} fullWidth maxWidth="sm">
         <DialogTitle>
-          {t(
-            'Support.RECOVERY_APPROVE_DIALOG_TITLE',
-            'Confirm account recovery',
-          )}
+          {dialogMode === 'approve'
+            ? t(
+                'Support.RECOVERY_APPROVE_DIALOG_TITLE',
+                'Confirm account recovery',
+              )
+            : t(
+                'Support.RECOVERY_REJECT_DIALOG_TITLE',
+                'Reject account recovery',
+              )}
         </DialogTitle>
         <DialogContent dividers>
           <Typography variant="body2" sx={{ mb: 2 }}>
-            {t(
-              'Support.RECOVERY_APPROVE_CONFIRM_QUESTION',
-              'Are you sure you want to approve this recovery request?',
-            )}
+            {dialogMode === 'approve'
+              ? t(
+                  'Support.RECOVERY_APPROVE_CONFIRM_QUESTION',
+                  'Are you sure you want to approve this recovery request?',
+                )
+              : t(
+                  'Support.RECOVERY_REJECT_CONFIRM_QUESTION',
+                  'Are you sure you want to reject this recovery request?',
+                )}
           </Typography>
 
           <TextField
             label={t(
-              'Support.RECOVERY_APPROVE_NOTE_LABEL',
+              'Support.RECOVERY_NOTE_LABEL',
               'Reason for this decision',
             )}
             helperText={t(
-              'Support.RECOVERY_APPROVE_NOTE_HELP',
-              'Describe briefly why you are approving this request.',
+              'Support.RECOVERY_NOTE_HELP',
+              'Describe briefly why you are approving or rejecting this request.',
             )}
             multiline
             minRows={3}
             fullWidth
-            value={approveDialogNote}
-            onChange={(e) => setApproveDialogNote(e.target.value)}
+            value={dialogNote}
+            onChange={(e) => setDialogNote(e.target.value)}
           />
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleCloseApproveDialog}>
+          <Button onClick={closeDialog}>
             {t('Common.CANCEL', 'Cancel')}
           </Button>
           <Button
-            onClick={handleConfirmApprove}
+            onClick={handleConfirm}
             variant="contained"
-            disabled={!approveDialogNote.trim()}
+            disabled={!dialogNote.trim()}
+            color={dialogMode === 'approve' ? 'primary' : 'error'}
           >
-            {t(
-              'Support.RECOVERY_APPROVE_SUBMIT',
-              'Send link',
-            )}
+            {dialogMode === 'approve'
+              ? t('Support.RECOVERY_APPROVE_SUBMIT', 'Send link')
+              : t('Support.RECOVERY_REJECT_SUBMIT', 'Reject request')}
           </Button>
         </DialogActions>
       </Dialog>

package/src/i18n/authTranslations.js

@@ -902,6 +902,57 @@ export const authTranslations = {
   "de": "Link senden",
   "fr": "Envoyer le lien",
   "en": "Send link"
+},
+"Auth.MFA_HELP_DIALOG_TITLE": {
+  "de": "Hilfe bei der Anmeldung",
+  "fr": "Aide pour la connexion",
+  "en": "Need help with sign-in"
+},
+"Auth.MFA_HELP_DIALOG_DESCRIPTION": {
+  "de": "Beschreiben Sie kurz, warum Sie keine der verfügbaren Methoden verwenden können. Eine Supportperson wird Ihre Anfrage prüfen.",
+  "fr": "Décrivez brièvement pourquoi vous ne pouvez utiliser aucune des méthodes disponibles. Un membre du support examinera votre demande.",
+  "en": "Briefly describe why you cannot use any of the available methods. A support person will review your request."
+},
+"Auth.MFA_HELP_MESSAGE_LABEL": {
+  "de": "Ihre Nachricht an den Support",
+  "fr": "Votre message au support",
+  "en": "Your message to support"
+},
+"Auth.MFA_HELP_MESSAGE_HELP": {
+  "de": "Optional, hilft dem Support bei der Überprüfung Ihrer Identität.",
+  "fr": "Facultatif, mais aide le support à vérifier votre identité.",
+  "en": "Optional, but helps support verify your identity."
+},
+"Auth.MFA_HELP_SUBMIT": {
+  "de": "Anfrage senden",
+  "fr": "Envoyer la demande",
+  "en": "Send request"
+},
+
+"Support.RECOVERY_NOTE_LABEL": {
+  "de": "Begründung für diese Entscheidung",
+  "fr": "Raison de cette décision",
+  "en": "Reason for this decision"
+},
+"Support.RECOVERY_NOTE_HELP": {
+  "de": "Beschreiben Sie kurz, warum Sie diese Anfrage genehmigen oder ablehnen.",
+  "fr": "Décrivez brièvement pourquoi vous approuvez ou rejetez cette demande.",
+  "en": "Briefly describe why you are approving or rejecting this request."
+},
+"Support.RECOVERY_REJECT_DIALOG_TITLE": {
+  "de": "Konto-Wiederherstellung ablehnen",
+  "fr": "Refuser la récupération de compte",
+  "en": "Reject account recovery"
+},
+"Support.RECOVERY_REJECT_CONFIRM_QUESTION": {
+  "de": "Sind Sie sicher, dass Sie diese Wiederherstellungsanfrage ablehnen möchten?",
+  "fr": "Êtes-vous sûr de vouloir refuser cette demande de récupération ?",
+  "en": "Are you sure you want to reject this recovery request?"
+},
+"Support.RECOVERY_REJECT_SUBMIT": {
+  "de": "Anfrage ablehnen",
+  "fr": "Refuser la demande",
+  "en": "Reject request"
 }