added backup and email client
This commit is contained in:
@@ -0,0 +1,340 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { Send, Paperclip, X, FileText } from 'lucide-react';
|
||||
import Modal from '../ui/Modal';
|
||||
import Button from '../ui/Button';
|
||||
import { stressfreiEmailApi, CachedEmail, MailboxAccount, EmailAttachment } from '../../services/api';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
|
||||
interface ComposeEmailModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
account: MailboxAccount;
|
||||
replyTo?: CachedEmail;
|
||||
onSuccess?: () => void;
|
||||
contractId?: number; // Optional: Vertrag dem die gesendete E-Mail zugeordnet wird
|
||||
}
|
||||
|
||||
export default function ComposeEmailModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
account,
|
||||
replyTo,
|
||||
onSuccess,
|
||||
contractId,
|
||||
}: ComposeEmailModalProps) {
|
||||
const [to, setTo] = useState('');
|
||||
const [cc, setCc] = useState('');
|
||||
const [subject, setSubject] = useState('');
|
||||
const [body, setBody] = useState('');
|
||||
const [attachments, setAttachments] = useState<EmailAttachment[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Formular bei Modal-Öffnung initialisieren
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (replyTo) {
|
||||
// Antwort: Felder vorausfüllen
|
||||
setTo(replyTo.fromAddress || '');
|
||||
// Betreff: "Re:" nur hinzufügen wenn nicht schon vorhanden
|
||||
const existingSubject = replyTo.subject || '';
|
||||
const hasRePrefix = /^(Re|Aw|Fwd|Wg):\s*/i.test(existingSubject);
|
||||
setSubject(hasRePrefix ? existingSubject : `Re: ${existingSubject}`);
|
||||
// Ursprüngliche Nachricht zitieren
|
||||
const originalDate = new Date(replyTo.receivedAt).toLocaleString('de-DE');
|
||||
const quotedText = replyTo.textBody
|
||||
? `\n\n--- Ursprüngliche Nachricht ---\nVon: ${replyTo.fromName || replyTo.fromAddress}\nAm: ${originalDate}\n\n${replyTo.textBody}`
|
||||
: '';
|
||||
setBody(quotedText);
|
||||
} else {
|
||||
// Neue E-Mail: Felder leer
|
||||
setTo('');
|
||||
setSubject('');
|
||||
setBody('');
|
||||
}
|
||||
setCc('');
|
||||
setAttachments([]);
|
||||
setError(null);
|
||||
}
|
||||
}, [isOpen, replyTo]);
|
||||
|
||||
// Maximale Dateigröße: 10 MB
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024;
|
||||
// Maximale Gesamtgröße aller Anhänge: 25 MB
|
||||
const MAX_TOTAL_SIZE = 25 * 1024 * 1024;
|
||||
|
||||
// Datei zu Base64 konvertieren
|
||||
const fileToBase64 = (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
// data:application/pdf;base64,JVBERi0... -> JVBERi0...
|
||||
const result = reader.result as string;
|
||||
const base64 = result.split(',')[1];
|
||||
resolve(base64);
|
||||
};
|
||||
reader.onerror = reject;
|
||||
});
|
||||
};
|
||||
|
||||
// Dateien hinzufügen
|
||||
const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (!files) return;
|
||||
|
||||
const newAttachments: EmailAttachment[] = [];
|
||||
let currentTotalSize = attachments.reduce(
|
||||
(sum, att) => sum + (att.content.length * 0.75), // Base64 ist ~33% größer
|
||||
0
|
||||
);
|
||||
|
||||
for (const file of Array.from(files)) {
|
||||
// Einzelne Dateigröße prüfen
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
setError(`Datei "${file.name}" ist zu groß (max. 10 MB)`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Gesamtgröße prüfen
|
||||
if (currentTotalSize + file.size > MAX_TOTAL_SIZE) {
|
||||
setError('Maximale Gesamtgröße der Anhänge erreicht (25 MB)');
|
||||
break;
|
||||
}
|
||||
|
||||
try {
|
||||
const content = await fileToBase64(file);
|
||||
newAttachments.push({
|
||||
filename: file.name,
|
||||
content,
|
||||
contentType: file.type || 'application/octet-stream',
|
||||
});
|
||||
currentTotalSize += file.size;
|
||||
} catch {
|
||||
setError(`Fehler beim Lesen von "${file.name}"`);
|
||||
}
|
||||
}
|
||||
|
||||
if (newAttachments.length > 0) {
|
||||
setAttachments((prev) => [...prev, ...newAttachments]);
|
||||
}
|
||||
|
||||
// Input zurücksetzen damit gleiche Datei erneut gewählt werden kann
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// Anhang entfernen
|
||||
const removeAttachment = (index: number) => {
|
||||
setAttachments((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// Dateigröße formatieren
|
||||
const formatFileSize = (base64Content: string): string => {
|
||||
const bytes = base64Content.length * 0.75; // Base64 Dekodierung
|
||||
if (bytes < 1024) return `${Math.round(bytes)} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
const sendMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
stressfreiEmailApi.sendEmail(account.id, {
|
||||
to: to.split(',').map((e) => e.trim()).filter(Boolean),
|
||||
cc: cc ? cc.split(',').map((e) => e.trim()).filter(Boolean) : undefined,
|
||||
subject,
|
||||
text: body,
|
||||
inReplyTo: replyTo?.messageId,
|
||||
references: replyTo?.messageId ? [replyTo.messageId] : undefined,
|
||||
attachments: attachments.length > 0 ? attachments : undefined,
|
||||
contractId,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
onSuccess?.();
|
||||
handleClose();
|
||||
},
|
||||
onError: (err) => {
|
||||
setError(err instanceof Error ? err.message : 'Fehler beim Senden');
|
||||
},
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
// Formular wird beim nächsten Öffnen durch useEffect initialisiert
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleSend = () => {
|
||||
if (!to.trim()) {
|
||||
setError('Bitte Empfänger angeben');
|
||||
return;
|
||||
}
|
||||
if (!subject.trim()) {
|
||||
setError('Bitte Betreff angeben');
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
sendMutation.mutate();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
title={replyTo ? 'Antworten' : 'Neue E-Mail'}
|
||||
size="lg"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* From */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Von
|
||||
</label>
|
||||
<div className="px-3 py-2 bg-gray-100 rounded-lg text-sm text-gray-700">
|
||||
{account.email}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* To */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
An <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={to}
|
||||
onChange={(e) => setTo(e.target.value)}
|
||||
placeholder="empfaenger@example.com"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Mehrere Empfänger mit Komma trennen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CC */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
CC
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={cc}
|
||||
onChange={(e) => setCc(e.target.value)}
|
||||
placeholder="cc@example.com"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Subject */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Betreff <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
placeholder="Betreff eingeben"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nachricht
|
||||
</label>
|
||||
<textarea
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
rows={10}
|
||||
placeholder="Ihre Nachricht..."
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Anhänge */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Anhänge
|
||||
</label>
|
||||
|
||||
{/* Versteckter File-Input */}
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
onChange={handleFileSelect}
|
||||
multiple
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
{/* Anhang hinzufügen Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="inline-flex items-center px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<Paperclip className="w-4 h-4 mr-2" />
|
||||
Datei anhängen
|
||||
</button>
|
||||
|
||||
{/* Anhang-Liste */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="mt-2 space-y-2">
|
||||
{attachments.map((att, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<div className="flex items-center min-w-0">
|
||||
<FileText className="w-4 h-4 text-gray-500 mr-2 flex-shrink-0" />
|
||||
<span className="text-sm text-gray-700 truncate">
|
||||
{att.filename}
|
||||
</span>
|
||||
<span className="ml-2 text-xs text-gray-500 flex-shrink-0">
|
||||
({formatFileSize(att.content)})
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeAttachment(index)}
|
||||
className="ml-2 p-1 text-gray-400 hover:text-red-500 transition-colors"
|
||||
title="Anhang entfernen"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Max. 10 MB pro Datei, 25 MB gesamt
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<Button variant="secondary" onClick={handleClose}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
disabled={sendMutation.isPending}
|
||||
>
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
{sendMutation.isPending ? 'Wird gesendet...' : 'Senden'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user