Stressfrei-Adressen: zusätzliche Weiterleitungsziele
Pro StressfreiEmail können jetzt weitere Weiterleitungs-Adressen
gepflegt werden, die zusätzlich zur Stamm-E-Mail des Kunden und
zur globalen Default-Forward-Adresse an den Provider gepusht werden.
- Schema: StressfreiEmail.additionalForwardingEmails (TEXT/JSON-
Array), Migration mit IF NOT EXISTS.
- syncForwardingForEmail liest die Zusatzliste mit und filtert
Duplikate gegen customer.email + config.defaultForwardEmail
(case-insensitive) raus.
- Neuer Endpoint PUT /api/stressfrei-emails/:id/additional-forwards
mit Body { emails: string[] } – ersetzt die Liste komplett und
syncht den Provider direkt nach. Hard-Cap 20 Adressen, Format-
Validation per Regex, Audit-Log.
- Frontend: Button "Weitere Weiterleitungen" im Edit-Modus des
StressfreiEmailModals (erscheint sobald die Adresse beim Provider
vorhanden ist). Sub-Modal mit Liste + Add/Remove, Änderungen
gehen sofort live.
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useParams, Link, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
|
||||
import { pushHistory, popHistory } from '../../utils/navigation';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
@@ -3744,6 +3744,7 @@ function StressfreiEmailModal({
|
||||
} | null>(null);
|
||||
const [isLoadingCredentials, setIsLoadingCredentials] = useState(false);
|
||||
const [isResettingPassword, setIsResettingPassword] = useState(false);
|
||||
const [showForwardsModal, setShowForwardsModal] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
const isEditing = !!email;
|
||||
|
||||
@@ -4175,15 +4176,204 @@ function StressfreiEmailModal({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="button" variant="secondary" onClick={onClose}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" disabled={isPending || !localPart}>
|
||||
{isPending ? 'Speichern...' : 'Speichern'}
|
||||
</Button>
|
||||
<div className="flex justify-between items-center gap-2">
|
||||
<div>
|
||||
{isEditing && email && providerStatus === 'exists' && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowForwardsModal(true)}
|
||||
title="Zusätzliche Weiterleitungs-Adressen pflegen"
|
||||
>
|
||||
<Mail className="w-4 h-4 mr-1" />
|
||||
Weitere Weiterleitungen
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button type="button" variant="secondary" onClick={onClose}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button type="submit" disabled={isPending || !localPart}>
|
||||
{isPending ? 'Speichern...' : 'Speichern'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{isEditing && email && (
|
||||
<AdditionalForwardsModal
|
||||
isOpen={showForwardsModal}
|
||||
onClose={() => setShowForwardsModal(false)}
|
||||
email={email}
|
||||
customerEmail={customerEmail}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// Untermodal: zusätzliche Weiterleitungs-E-Mails verwalten
|
||||
function AdditionalForwardsModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
email,
|
||||
customerEmail,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
email: StressfreiEmail;
|
||||
customerEmail?: string;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const initial = useMemo<string[]>(() => {
|
||||
if (!email.additionalForwardingEmails) return [];
|
||||
try {
|
||||
const parsed = JSON.parse(email.additionalForwardingEmails);
|
||||
return Array.isArray(parsed) ? parsed.filter((x): x is string => typeof x === 'string') : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}, [email.additionalForwardingEmails]);
|
||||
|
||||
const [forwards, setForwards] = useState<string[]>(initial);
|
||||
const [newEmail, setNewEmail] = useState('');
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setForwards(initial);
|
||||
setNewEmail('');
|
||||
setError(null);
|
||||
}, [initial, isOpen]);
|
||||
|
||||
const EMAIL_REGEX = /^[A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$/;
|
||||
|
||||
const persist = async (next: string[]) => {
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
try {
|
||||
await stressfreiEmailApi.updateAdditionalForwards(email.id, next);
|
||||
setForwards(next);
|
||||
queryClient.invalidateQueries({ queryKey: ['stressfrei-emails', email.customerId] });
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : 'Speichern fehlgeschlagen';
|
||||
setError(msg);
|
||||
throw e;
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const candidate = newEmail.trim().toLowerCase();
|
||||
if (!candidate) return;
|
||||
if (!EMAIL_REGEX.test(candidate)) {
|
||||
setError('Bitte eine gültige E-Mail-Adresse eingeben.');
|
||||
return;
|
||||
}
|
||||
if (candidate === customerEmail?.toLowerCase()) {
|
||||
setError('Die Stamm-E-Mail des Kunden ist bereits Weiterleitungsziel.');
|
||||
return;
|
||||
}
|
||||
if (forwards.some((f) => f.toLowerCase() === candidate)) {
|
||||
setError('Diese Adresse ist schon in der Liste.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await persist([...forwards, candidate]);
|
||||
setNewEmail('');
|
||||
} catch {
|
||||
/* error wird oben gesetzt */
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = async (target: string) => {
|
||||
try {
|
||||
await persist(forwards.filter((f) => f !== target));
|
||||
} catch {
|
||||
/* error wird oben gesetzt */
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title={`Weiterleitungen für ${email.email}`}>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
Posteingänge gehen immer an die Stamm-E-Mail des Kunden
|
||||
{customerEmail && (
|
||||
<> (<span className="font-mono">{customerEmail}</span>)</>
|
||||
)}
|
||||
. Hier kannst du zusätzliche Adressen hinterlegen, die ebenfalls eine Kopie bekommen. Änderungen werden sofort am E-Mail-Provider übernommen.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Aktuelle zusätzliche Ziele
|
||||
</label>
|
||||
{forwards.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 italic">Noch keine zusätzlichen Adressen.</p>
|
||||
) : (
|
||||
<ul className="space-y-1">
|
||||
{forwards.map((f) => (
|
||||
<li
|
||||
key={f}
|
||||
className="flex items-center justify-between bg-gray-50 border border-gray-200 rounded px-3 py-2"
|
||||
>
|
||||
<span className="font-mono text-sm">{f}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemove(f)}
|
||||
className="text-red-600 hover:text-red-800 disabled:opacity-50"
|
||||
disabled={isSubmitting}
|
||||
title="Entfernen"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleAdd} className="border-t pt-3 space-y-2">
|
||||
<label className="block text-sm font-medium text-gray-700">
|
||||
Weitere Adresse hinzufügen
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
value={newEmail}
|
||||
onChange={(e) => {
|
||||
setNewEmail(e.target.value);
|
||||
setError(null);
|
||||
}}
|
||||
placeholder="z.B. info@partner.de"
|
||||
className="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
disabled={isSubmitting}
|
||||
maxLength={254}
|
||||
/>
|
||||
<Button type="submit" disabled={isSubmitting || !newEmail.trim()}>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
Hinzufügen
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 rounded px-3 py-2 text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="button" variant="secondary" onClick={onClose} disabled={isSubmitting}>
|
||||
Schließen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -369,6 +369,8 @@ export interface StressfreiEmail {
|
||||
isActive: boolean;
|
||||
isProvisioned?: boolean;
|
||||
hasMailbox: boolean;
|
||||
/** Zusätzliche Weiterleitungs-E-Mails als JSON-Array-String. */
|
||||
additionalForwardingEmails?: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
@@ -537,6 +539,14 @@ export const stressfreiEmailApi = {
|
||||
}>>(`/stressfrei-emails/${id}/sync-forwarding`);
|
||||
return res.data;
|
||||
},
|
||||
// Zusätzliche Weiterleitungs-Adressen ersetzen + sofort am Provider syncen.
|
||||
updateAdditionalForwards: async (id: number, emails: string[]) => {
|
||||
const res = await api.put<ApiResponse<{ forwardTargets: string[] }>>(
|
||||
`/stressfrei-emails/${id}/additional-forwards`,
|
||||
{ emails },
|
||||
);
|
||||
return res.data;
|
||||
},
|
||||
// E-Mails synchronisieren
|
||||
syncEmails: async (id: number, fullSync = false) => {
|
||||
const res = await api.post<ApiResponse<SyncResult>>(`/stressfrei-emails/${id}/sync`, {}, { params: { full: fullSync } });
|
||||
|
||||
Reference in New Issue
Block a user