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

package/dist/auth/authApi.js

@@ -609,14 +609,25 @@ 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, note = '') {
+    const res = await axios.post(`/api/support/recovery-requests/${id}/approve/`, { note }, // 👉 Note mitsenden
+    { 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;
 }
+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 +661,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/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 = () => {
@@ -10,6 +10,9 @@ const SupportRecoveryRequestsTab = () => {
     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 loadRequests = async () => {
         setLoading(true);
         setErrorKey(null);
@@ -28,12 +31,24 @@ const SupportRecoveryRequestsTab = () => {
         loadRequests();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [statusFilter]);
-    const handleSendRecoveryLink = async (id) => {
+    const handleOpenApproveDialog = (id) => {
+        setApproveDialogRequestId(id);
+        setApproveDialogNote('');
+        setApproveDialogOpen(true);
+    };
+    const handleCloseApproveDialog = () => {
+        setApproveDialogOpen(false);
+        setApproveDialogRequestId(null);
+        setApproveDialogNote('');
+    };
+    const handleConfirmApprove = async () => {
+        if (!approveDialogRequestId)
+            return;
         setErrorKey(null);
         try {
-            await authApi.approveRecoveryRequest(id);
-            // Nach Erfolg Liste neu laden
+            await authApi.approveRecoveryRequest(approveDialogRequestId, approveDialogNote);
             await loadRequests();
+            handleCloseApproveDialog();
         }
         catch (err) {
             setErrorKey(err.code || 'Support.RECOVERY_REQUEST_APPROVE_FAILED');
@@ -52,8 +67,8 @@ const SupportRecoveryRequestsTab = () => {
     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: () => 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') })] })] })] }));
 };
 export default SupportRecoveryRequestsTab;

package/dist/i18n/authTranslations.js

@@ -831,5 +831,30 @@ 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"
+    }
     // ...
 };

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.11",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/auth/authApi.jsx

@@ -800,10 +800,10 @@ export async function fetchRecoveryRequests(status = 'pending') {
   return res.data;
 }
 
-export async function approveRecoveryRequest(id) {
+export async function approveRecoveryRequest(id, note = '') {
   const res = await axios.post(
     `/api/support/recovery-requests/${id}/approve/`,
-    {},
+    { note },             // 👉 Note mitsenden
     { withCredentials: true },
   );
   return res.data;
@@ -819,6 +819,22 @@ export async function rejectRecoveryRequest(id) {
 }
 
 
+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/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';
@@ -26,6 +31,10 @@ const SupportRecoveryRequestsTab = () => {
   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 loadRequests = async () => {
     setLoading(true);
     setErrorKey(null);
@@ -44,12 +53,25 @@ const SupportRecoveryRequestsTab = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [statusFilter]);
 
-  const handleSendRecoveryLink = async (id) => {
+  const handleOpenApproveDialog = (id) => {
+    setApproveDialogRequestId(id);
+    setApproveDialogNote('');
+    setApproveDialogOpen(true);
+  };
+
+  const handleCloseApproveDialog = () => {
+    setApproveDialogOpen(false);
+    setApproveDialogRequestId(null);
+    setApproveDialogNote('');
+  };
+
+  const handleConfirmApprove = async () => {
+    if (!approveDialogRequestId) return;
     setErrorKey(null);
     try {
-      await authApi.approveRecoveryRequest(id);
-      // Nach Erfolg Liste neu laden
+      await authApi.approveRecoveryRequest(approveDialogRequestId, approveDialogNote);
       await loadRequests();
+      handleCloseApproveDialog();
     } catch (err) {
       setErrorKey(err.code || 'Support.RECOVERY_REQUEST_APPROVE_FAILED');
     }
@@ -125,11 +147,18 @@ const SupportRecoveryRequestsTab = () => {
           <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 +176,7 @@ const SupportRecoveryRequestsTab = () => {
                       <Button
                         variant="contained"
                         size="small"
-                        onClick={() => handleSendRecoveryLink(req.id)}
+                        onClick={() => handleOpenApproveDialog(req.id)}
                         disabled={req.status !== 'pending'}
                       >
                         {t(
@@ -172,6 +201,59 @@ const SupportRecoveryRequestsTab = () => {
           </Table>
         </TableContainer>
       )}
+
+      <Dialog
+        open={approveDialogOpen}
+        onClose={handleCloseApproveDialog}
+        fullWidth
+        maxWidth="sm"
+      >
+        <DialogTitle>
+          {t(
+            'Support.RECOVERY_APPROVE_DIALOG_TITLE',
+            'Confirm 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?',
+            )}
+          </Typography>
+
+          <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
+            minRows={3}
+            fullWidth
+            value={approveDialogNote}
+            onChange={(e) => setApproveDialogNote(e.target.value)}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseApproveDialog}>
+            {t('Common.CANCEL', 'Cancel')}
+          </Button>
+          <Button
+            onClick={handleConfirmApprove}
+            variant="contained"
+            disabled={!approveDialogNote.trim()}
+          >
+            {t(
+              'Support.RECOVERY_APPROVE_SUBMIT',
+              'Send link',
+            )}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };

package/src/i18n/authTranslations.js

@@ -878,6 +878,31 @@ 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"
+}
 
 
 

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>
       )}