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

package/dist/auth/authApi.js

@@ -609,14 +609,24 @@ export async function fetchRecoveryRequests(status = 'pending') {
     });
     return res.data;
 }
-export async function approveRecoveryRequest(id) {
-    const res = await axios.post(`/api/support/recovery-requests/${id}/approve/`, {}, { 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) {
+    try {
+        await axios.post(`/api/support/recovery-requests/recovery-login/${token}/`, { email, password }, { withCredentials: true });
+    }
+    catch (error) {
+        throw normaliseApiError(error, 'Auth.RECOVERY_LOGIN_FAILED');
+    }
+    const user = await fetchCurrentUser();
+    return { user, needsMfa: false };
+}
 // -----------------------------
 // Aggregated API object
 // -----------------------------
@@ -650,5 +660,6 @@ export const authApi = {
     fetchRecoveryRequests,
     approveRecoveryRequest,
     rejectRecoveryRequest,
+    loginWithRecoveryPassword,
 };
 export default authApi;

package/dist/components/LoginForm.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// src/auth/components/LoginForm.jsx
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Box, TextField, Button, Typography, Divider, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import SocialLoginButtons from './SocialLoginButtons';
 const LoginForm = ({ onSubmit, onForgotPassword, onSocialLogin, onPasskeyLogin, onSignUp, error, // bereits übersetzter Text oder t(errorKey) aus dem Parent
-disabled = false, }) => {
+disabled = false, initialIdentifier = '', }) => {
     const { t } = useTranslation();
-    const [identifier, setIdentifier] = useState('');
+    const [identifier, setIdentifier] = useState(initialIdentifier);
     const [password, setPassword] = useState('');
+    // Keep identifier in sync if initialIdentifier changes (e.g. recovery link)
+    useEffect(() => {
+        setIdentifier(initialIdentifier);
+    }, [initialIdentifier]);
     const handleSubmit = (event) => {
         event.preventDefault();
         if (!onSubmit)
@@ -18,6 +21,6 @@ disabled = false, }) => {
     const supportsPasskey = !!onPasskeyLogin &&
         typeof window !== 'undefined' &&
         !!window.PublicKeyCredential;
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), supportsPasskey && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", fullWidth: true, type: "button", onClick: onPasskeyLogin, disabled: disabled, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON') }), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') })] })), _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: identifier, onChange: (e) => setIdentifier(e.target.value), disabled: disabled }), _jsx(TextField, { label: t('Auth.LOGIN_PASSWORD_LABEL'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: disabled }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: disabled, children: t('Auth.LOGIN_SUBMIT') })] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(Divider, { children: t('Auth.LOGIN_OR') }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin })] }), _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('Auth.LOGIN_ACCOUNT_RECOVERY_TITLE') }), _jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: t('Auth.LOGIN_SIGNUP_BUTTON') })), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON') })] })] })] }));
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [error && (_jsx(Typography, { color: "error", gutterBottom: true, children: error })), supportsPasskey && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", fullWidth: true, type: "button", onClick: onPasskeyLogin, disabled: disabled, children: t('Auth.LOGIN_USE_PASSKEY_BUTTON') }), _jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') })] })), _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: identifier, onChange: (e) => setIdentifier(e.target.value), disabled: disabled }), _jsx(TextField, { label: t('Auth.LOGIN_PASSWORD_LABEL'), type: "password", required: true, fullWidth: true, value: password, onChange: (e) => setPassword(e.target.value), disabled: disabled }), _jsx(Button, { type: "submit", variant: "contained", fullWidth: true, disabled: disabled, children: t('Auth.LOGIN_SUBMIT') })] }), _jsxs(Box, { children: [_jsx(Divider, { sx: { my: 2 }, children: t('Auth.LOGIN_OR') }), _jsx(SocialLoginButtons, { onProviderClick: onSocialLogin })] }), _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: t('Auth.LOGIN_ACCOUNT_RECOVERY_TITLE') }), _jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [onSignUp && (_jsx(Button, { type: "button", variant: "outlined", onClick: onSignUp, disabled: disabled, children: t('Auth.LOGIN_SIGNUP_BUTTON') })), _jsx(Button, { type: "button", variant: "outlined", onClick: onForgotPassword, disabled: disabled, children: t('Auth.LOGIN_FORGOT_PASSWORD_BUTTON') })] })] })] }));
 };
 export default LoginForm;

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

@@ -1,7 +1,7 @@
 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 { Box, Typography, Table, TableHead, TableBody, TableRow, TableCell, TableContainer, Paper, Button, CircularProgress, Alert, Stack, Dialog, DialogTitle, DialogContent, DialogActions, TextField, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../auth/authApi';
 const SupportRecoveryRequestsTab = () => {
@@ -9,7 +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 [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);
@@ -28,32 +32,49 @@ const SupportRecoveryRequestsTab = () => {
         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 openDialog = (id, mode) => {
+        setDialogRequestId(id);
+        setDialogMode(mode);
+        setDialogNote('');
+        setDialogOpen(true);
+    };
+    const closeDialog = () => {
+        setDialogOpen(false);
+        setDialogRequestId(null);
+        setDialogNote('');
     };
-    const handleReject = async (id) => {
+    const handleConfirm = async () => {
+        if (!dialogRequestId)
+            return;
         setErrorKey(null);
         try {
-            await authApi.rejectRecoveryRequest(id);
+            if (dialogMode === 'approve') {
+                await authApi.approveRecoveryRequest(dialogRequestId, dialogNote);
+            }
+            else {
+                await authApi.rejectRecoveryRequest(dialogRequestId, dialogNote);
+            }
             await loadRequests();
+            closeDialog();
         }
         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) {
         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
+    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: () => 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))) })] }) }))] }));
+                                            : '-' }), _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

@@ -831,5 +831,80 @@ export const authTranslations = {
         "fr": "Si ce compte existe, votre demande a été transmise au support. Veuillez contacter le support pour obtenir de l’aide supplémentaire.",
         "en": "If this account exists, your request has been forwarded to support. Please contact support for further assistance."
     },
+    "Support.RECOVERY_APPROVE_DIALOG_TITLE": {
+        "de": "Kontowiederherstellung bestätigen",
+        "fr": "Confirmer la récupération du compte",
+        "en": "Confirm account recovery"
+    },
+    "Support.RECOVERY_APPROVE_CONFIRM_QUESTION": {
+        "de": "Sind Sie sicher, dass Sie diese Wiederherstellungsanfrage bewilligen möchten?",
+        "fr": "Êtes-vous sûr de vouloir approuver cette demande de récupération ?",
+        "en": "Are you sure you want to approve this recovery request?"
+    },
+    "Support.RECOVERY_APPROVE_NOTE_LABEL": {
+        "de": "Begründung für diese Entscheidung",
+        "fr": "Raison de cette décision",
+        "en": "Reason for this decision"
+    },
+    "Support.RECOVERY_APPROVE_NOTE_HELP": {
+        "de": "Beschreiben Sie kurz, warum Sie diese Anfrage bewilligen.",
+        "fr": "Décrivez brièvement pourquoi vous approuvez cette demande.",
+        "en": "Briefly describe why you are approving this request."
+    },
+    "Support.RECOVERY_APPROVE_SUBMIT": {
+        "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/dist/pages/LoginPage.js

@@ -1,7 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-// src/pages/LoginPage.jsx
 import React, { useState, useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { Typography, Box, Alert } from '@mui/material';
 import { NarrowPage } from '../layout/PageLayout';
@@ -12,17 +11,31 @@ import MfaLoginComponent from '../components/MfaLoginComponent';
 import { useTranslation } from 'react-i18next';
 export function LoginPage() {
     const navigate = useNavigate();
+    const location = useLocation();
     const { login } = useContext(AuthContext);
     const [step, setStep] = useState('credentials'); // 'credentials' | 'mfa'
     const [submitting, setSubmitting] = useState(false);
     const [errorKey, setErrorKey] = useState(null);
     const [mfaState, setMfaState] = useState(null); // { availableTypes: [...] }
     const { t } = useTranslation();
+    // Read recovery token + prefill email from query params
+    const params = new URLSearchParams(location.search);
+    const recoveryToken = params.get('recovery');
+    const recoveryEmail = params.get('email') || '';
     const handleSubmitCredentials = async ({ identifier, password }) => {
         var _a;
         setErrorKey(null);
         setSubmitting(true);
         try {
+            // Recovery flow: password login via special endpoint, no MFA
+            if (recoveryToken) {
+                const result = await authApi.loginWithRecoveryPassword(identifier, password, recoveryToken);
+                const user = result.user;
+                login(user);
+                navigate('/account?tab=security&from=recovery');
+                return;
+            }
+            // Normal login flow via headless allauth
             const result = await authApi.loginWithPassword(identifier, password);
             if (result.needsMfa) {
                 setMfaState({
@@ -89,6 +102,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, identifier: mfaState.identifier, 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) })), recoveryToken && !errorKey && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: t('Auth.RECOVERY_LOGIN_INFO', 'Your recovery link was validated. Please sign in with your password to continue.') })), step === 'credentials' && (_jsx(LoginForm, { onSubmit: handleSubmitCredentials, onForgotPassword: handleForgotPassword, onSocialLogin: handleSocialLogin, onPasskeyLogin: handlePasskeyLoginInitial, onSignUp: handleSignUp, disabled: submitting, initialIdentifier: recoveryEmail })), 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.10",
+  "version": "1.4.12",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/auth/authApi.jsx

@@ -800,25 +800,41 @@ export async function fetchRecoveryRequests(status = 'pending') {
   return res.data;
 }
 
-export async function approveRecoveryRequest(id) {
+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) {
+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) {
+  try {
+    await axios.post(
+      `/api/support/recovery-requests/recovery-login/${token}/`,
+      { email, password },
+      { withCredentials: true },
+    );
+  } catch (error) {
+    throw normaliseApiError(error, 'Auth.RECOVERY_LOGIN_FAILED');
+  }
+
+  const user = await fetchCurrentUser();
+  return { user, needsMfa: false };
+}
+
+
 
 // -----------------------------
 // Aggregated API object
@@ -853,6 +869,7 @@ export const authApi = {
   fetchRecoveryRequests,
   approveRecoveryRequest,
   rejectRecoveryRequest,
+  loginWithRecoveryPassword,
 };
 
 export default authApi;

package/src/components/LoginForm.jsx

@@ -1,5 +1,4 @@
-// src/auth/components/LoginForm.jsx
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Box,
   TextField,
@@ -18,12 +17,18 @@ const LoginForm = ({
   onSignUp,
   error,           // bereits übersetzter Text oder t(errorKey) aus dem Parent
   disabled = false,
+  initialIdentifier = '',
 }) => {
   const { t } = useTranslation();
 
-  const [identifier, setIdentifier] = useState('');
+  const [identifier, setIdentifier] = useState(initialIdentifier);
   const [password, setPassword] = useState('');
 
+  // Keep identifier in sync if initialIdentifier changes (e.g. recovery link)
+  useEffect(() => {
+    setIdentifier(initialIdentifier);
+  }, [initialIdentifier]);
+
   const handleSubmit = (event) => {
     event.preventDefault();
     if (!onSubmit) return;
@@ -96,13 +101,11 @@ const LoginForm = ({
         >
           {t('Auth.LOGIN_SUBMIT')}
         </Button>
-
-
       </Box>
 
       {/* Other ways to sign in */}
-       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-        <Divider>
+      <Box>
+        <Divider sx={{ my: 2 }}>
           {t('Auth.LOGIN_OR')}
         </Divider>
         <SocialLoginButtons onProviderClick={onSocialLogin} />

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

@@ -14,6 +14,11 @@ import {
   CircularProgress,
   Alert,
   Stack,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { authApi } from '../auth/authApi';
@@ -24,7 +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 [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogNote, setDialogNote] = useState('');
+  const [dialogRequestId, setDialogRequestId] = useState(null);
+  const [dialogMode, setDialogMode] = useState('approve');
 
   const loadRequests = async () => {
     setLoading(true);
@@ -44,24 +54,37 @@ const SupportRecoveryRequestsTab = () => {
     // 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 openDialog = (id, mode) => {
+    setDialogRequestId(id);
+    setDialogMode(mode);
+    setDialogNote('');
+    setDialogOpen(true);
+  };
+
+  const closeDialog = () => {
+    setDialogOpen(false);
+    setDialogRequestId(null);
+    setDialogNote('');
   };
 
-  const handleReject = async (id) => {
+  const handleConfirm = async () => {
+    if (!dialogRequestId) return;
     setErrorKey(null);
     try {
-      await authApi.rejectRecoveryRequest(id);
+      if (dialogMode === 'approve') {
+        await authApi.approveRecoveryRequest(dialogRequestId, dialogNote);
+      } else {
+        await authApi.rejectRecoveryRequest(dialogRequestId, dialogNote);
+      }
       await loadRequests();
+      closeDialog();
     } 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'),
+      );
     }
   };
 
@@ -118,18 +141,28 @@ 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}>
           <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>
+                <TableCell>
+                  {t('Support.RECOVERY_COL_CREATED', 'Created')}
+                </TableCell>
+                <TableCell>
+                  {t('Support.RECOVERY_COL_USER', 'User')}
+                </TableCell>
+                <TableCell>
+                  {t('Support.RECOVERY_COL_STATUS', 'Status')}
+                </TableCell>
+                <TableCell>
+                  {t('Support.RECOVERY_COL_ACTIONS', 'Actions')}
+                </TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -147,7 +180,7 @@ const SupportRecoveryRequestsTab = () => {
                       <Button
                         variant="contained"
                         size="small"
-                        onClick={() => handleSendRecoveryLink(req.id)}
+                        onClick={() => openDialog(req.id, 'approve')}
                         disabled={req.status !== 'pending'}
                       >
                         {t(
@@ -159,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')}
@@ -172,6 +205,64 @@ const SupportRecoveryRequestsTab = () => {
           </Table>
         </TableContainer>
       )}
+
+      <Dialog open={dialogOpen} onClose={closeDialog} fullWidth maxWidth="sm">
+        <DialogTitle>
+          {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 }}>
+            {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_NOTE_LABEL',
+              'Reason for this decision',
+            )}
+            helperText={t(
+              'Support.RECOVERY_NOTE_HELP',
+              'Describe briefly why you are approving or rejecting this request.',
+            )}
+            multiline
+            minRows={3}
+            fullWidth
+            value={dialogNote}
+            onChange={(e) => setDialogNote(e.target.value)}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeDialog}>
+            {t('Common.CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            variant="contained"
+            disabled={!dialogNote.trim()}
+            color={dialogMode === 'approve' ? 'primary' : 'error'}
+          >
+            {dialogMode === 'approve'
+              ? t('Support.RECOVERY_APPROVE_SUBMIT', 'Send link')
+              : t('Support.RECOVERY_REJECT_SUBMIT', 'Reject request')}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };

package/src/i18n/authTranslations.js

@@ -878,6 +878,82 @@ export const authTranslations = {
   "fr": "Si ce compte existe, votre demande a été transmise au support. Veuillez contacter le support pour obtenir de l’aide supplémentaire.",
   "en": "If this account exists, your request has been forwarded to support. Please contact support for further assistance."
 },
+"Support.RECOVERY_APPROVE_DIALOG_TITLE": {
+  "de": "Kontowiederherstellung bestätigen",
+  "fr": "Confirmer la récupération du compte",
+  "en": "Confirm account recovery"
+},
+"Support.RECOVERY_APPROVE_CONFIRM_QUESTION": {
+  "de": "Sind Sie sicher, dass Sie diese Wiederherstellungsanfrage bewilligen möchten?",
+  "fr": "Êtes-vous sûr de vouloir approuver cette demande de récupération ?",
+  "en": "Are you sure you want to approve this recovery request?"
+},
+"Support.RECOVERY_APPROVE_NOTE_LABEL": {
+  "de": "Begründung für diese Entscheidung",
+  "fr": "Raison de cette décision",
+  "en": "Reason for this decision"
+},
+"Support.RECOVERY_APPROVE_NOTE_HELP": {
+  "de": "Beschreiben Sie kurz, warum Sie diese Anfrage bewilligen.",
+  "fr": "Décrivez brièvement pourquoi vous approuvez cette demande.",
+  "en": "Briefly describe why you are approving this request."
+},
+"Support.RECOVERY_APPROVE_SUBMIT": {
+  "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/src/pages/LoginPage.jsx

@@ -1,6 +1,5 @@
-// src/pages/LoginPage.jsx
 import React, { useState, useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { Typography, Box, Alert } from '@mui/material';
 import { NarrowPage } from '../layout/PageLayout';
@@ -12,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 
 export function LoginPage() {
   const navigate = useNavigate();
+  const location = useLocation();
   const { login } = useContext(AuthContext);
 
   const [step, setStep] = useState('credentials'); // 'credentials' | 'mfa'
@@ -21,10 +21,30 @@ export function LoginPage() {
 
   const { t } = useTranslation();
 
+  // Read recovery token + prefill email from query params
+  const params = new URLSearchParams(location.search);
+  const recoveryToken = params.get('recovery');
+  const recoveryEmail = params.get('email') || '';
+
   const handleSubmitCredentials = async ({ identifier, password }) => {
     setErrorKey(null);
     setSubmitting(true);
     try {
+      // Recovery flow: password login via special endpoint, no MFA
+      if (recoveryToken) {
+        const result = await authApi.loginWithRecoveryPassword(
+          identifier,
+          password,
+          recoveryToken,
+        );
+
+        const user = result.user;
+        login(user);
+        navigate('/account?tab=security&from=recovery');
+        return;
+      }
+
+      // Normal login flow via headless allauth
       const result = await authApi.loginWithPassword(identifier, password);
 
       if (result.needsMfa) {
@@ -112,14 +132,24 @@ export function LoginPage() {
         </Alert>
       )}
 
+      {recoveryToken && !errorKey && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          {t(
+            'Auth.RECOVERY_LOGIN_INFO',
+            'Your recovery link was validated. Please sign in with your password to continue.',
+          )}
+        </Alert>
+      )}
+
       {step === 'credentials' && (
         <LoginForm
           onSubmit={handleSubmitCredentials}
           onForgotPassword={handleForgotPassword}
           onSocialLogin={handleSocialLogin}
-          onPasskeyLogin={handlePasskeyLoginInitial} // Passkey als 1. Faktor
+          onPasskeyLogin={handlePasskeyLoginInitial} // Passkey as first factor
           onSignUp={handleSignUp}
           disabled={submitting}
+          initialIdentifier={recoveryEmail}
         />
       )}
 
@@ -130,7 +160,6 @@ export function LoginPage() {
             identifier={mfaState.identifier}
             onSuccess={handleMfaSuccess}
             onCancel={handleMfaCancel}
-            //onNeedHelp={handleMfaNeedHelp}
           />
         </Box>
       )}