Agent Zero
441 lines
19 KiB
TypeScript
441 lines
19 KiB
TypeScript
/**
|
|
* Mail settings page — signatures, rules, labels, PGP, vacation responder.
|
|
*/
|
|
|
|
import { asError } from '@/utils/errorTypes';
|
|
import React, { useState, useCallback, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { useToast } from '@/components/ui/Toast';
|
|
import { Tabs } from '@/components/shared/Tabs';
|
|
import { SignatureManager } from '@/components/mail/SignatureManager';
|
|
import { RuleEditor } from '@/components/mail/RuleEditor';
|
|
import { LabelManager } from '@/components/mail/LabelManager';
|
|
import { VacationResponder } from '@/components/mail/VacationResponder';
|
|
import { PgpSettings } from '@/components/mail/PgpSettings';
|
|
import { Loader2, Pencil } from 'lucide-react';
|
|
import {
|
|
fetchAccounts,
|
|
createAccount,
|
|
deleteAccount,
|
|
testConnection,
|
|
triggerSync,
|
|
updateAccount,
|
|
fetchFolders,
|
|
type MailAccount,
|
|
type MailFolder,
|
|
type CreateAccountPayload,
|
|
} from '@/api/mail';
|
|
|
|
export function MailSettingsPage() {
|
|
const { t } = useTranslation();
|
|
const toast = useToast();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const [accounts, setAccounts] = useState<MailAccount[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedAccountId, setSelectedAccountId] = useState('');
|
|
const [showAddAccount, setShowAddAccount] = useState(false);
|
|
|
|
// ── Account create form (RHF + Zod) ──
|
|
const accountSchema = z.object({
|
|
email: z.string().min(1, 'required').email('invalidEmail'),
|
|
display_name: z.string().optional().default(''),
|
|
username: z.string().optional().default(''),
|
|
imap_host: z.string().min(1, 'required'),
|
|
imap_port: z.coerce.number().int().min(1, 'invalidNumber').max(65535, 'invalidNumber').default(993),
|
|
smtp_host: z.string().min(1, 'required'),
|
|
smtp_port: z.coerce.number().int().min(1, 'invalidNumber').max(65535, 'invalidNumber').default(587),
|
|
password: z.string().min(1, 'required'),
|
|
is_shared: z.boolean().default(false),
|
|
});
|
|
type AccountFormData = z.infer<typeof accountSchema>;
|
|
|
|
const { register: registerAccount, handleSubmit: handleSubmitAccount, reset: resetAccount, formState: { errors: accountErrors, isSubmitting: accountSubmitting } } = useForm<AccountFormData>({
|
|
resolver: zodResolver(accountSchema),
|
|
defaultValues: { email: '', display_name: '', username: '', imap_host: '', imap_port: 993, smtp_host: '', smtp_port: 587, password: '', is_shared: false },
|
|
});
|
|
const [saving, setSaving] = useState(false);
|
|
const [testing, setTesting] = useState<string | null>(null);
|
|
const [syncing, setSyncing] = useState<string | null>(null);
|
|
const [editingDisplayName, setEditingDisplayName] = useState<string | null>(null);
|
|
const [displayNameValue, setDisplayNameValue] = useState('');
|
|
const [accountFolders, setAccountFolders] = useState<Record<string, MailFolder[]>>({});
|
|
const [folderMappingEdit, setFolderMappingEdit] = useState<string | null>(null);
|
|
const [folderMappingValues, setFolderMappingValues] = useState<Record<string, string>>({});
|
|
const [savingMapping, setSavingMapping] = useState(false);
|
|
|
|
const loadAccounts = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const accs = await fetchAccounts();
|
|
setAccounts(accs);
|
|
if (accs.length > 0) {
|
|
setSelectedAccountId((prev) => prev || accs[0].id);
|
|
}
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj?.message || errObj?.detail || 'Failed to load accounts');
|
|
}
|
|
setLoading(false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
useEffect(() => { loadAccounts(); }, [loadAccounts]);
|
|
|
|
const handleCreateAccount = useCallback(async (data: AccountFormData) => {
|
|
try {
|
|
const acc = await createAccount(data);
|
|
setAccounts((prev) => [...prev, acc]);
|
|
toast.success(t('mail.accountCreated'));
|
|
setShowAddAccount(false);
|
|
resetAccount({ email: '', display_name: '', username: '', imap_host: '', imap_port: 993, smtp_host: '', smtp_port: 587, password: '', is_shared: false });
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj?.message || errObj?.detail || 'Save failed');
|
|
}
|
|
}, [toast, t, resetAccount]);
|
|
|
|
const handleTestConnection = useCallback(async (accountId: string) => {
|
|
setTesting(accountId);
|
|
try {
|
|
const result = await testConnection(accountId);
|
|
if (result.success) {
|
|
toast.success(t('mail.connectionSuccess'));
|
|
} else {
|
|
toast.error(result.message);
|
|
}
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj?.message || errObj?.detail || 'Connection test failed');
|
|
} finally {
|
|
setTesting(null);
|
|
}
|
|
}, [toast, t]);
|
|
|
|
const handleSync = useCallback(async (accountId: string) => {
|
|
setSyncing(accountId);
|
|
try {
|
|
const result = await triggerSync(accountId);
|
|
if ((result as any)?.error) {
|
|
toast.error((result as any).error);
|
|
} else {
|
|
toast.success(t('mail.syncSuccess'));
|
|
}
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj?.message || errObj?.detail || 'Sync failed');
|
|
} finally {
|
|
setSyncing(null);
|
|
}
|
|
}, [toast, t]);
|
|
|
|
const handleDeleteAccount = useCallback(async (accountId: string) => {
|
|
if (!window.confirm(t('mail.confirmDeleteAccount'))) return;
|
|
try {
|
|
await deleteAccount(accountId);
|
|
setAccounts((prev) => prev.filter((a) => a.id !== accountId));
|
|
toast.success(t('mail.accountDeleted'));
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj?.message || errObj?.detail || 'Delete failed');
|
|
}
|
|
}, [toast, t]);
|
|
|
|
const handleSaveDisplayName = useCallback(async (accountId: string) => {
|
|
try {
|
|
const updated = await updateAccount(accountId, { display_name: displayNameValue });
|
|
setAccounts((prev) => prev.map((a) => (a.id === accountId ? updated : a)));
|
|
setEditingDisplayName(null);
|
|
toast.success(t('common.saved'));
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj?.message || errObj?.detail || 'Save failed');
|
|
}
|
|
}, [displayNameValue, toast, t]);
|
|
|
|
const handleStartEditDisplayName = useCallback((acc: MailAccount) => {
|
|
setEditingDisplayName(acc.id);
|
|
setDisplayNameValue(acc.display_name || '');
|
|
}, []);
|
|
|
|
const loadAccountFolders = useCallback(async (accountId: string) => {
|
|
try {
|
|
const folders = await fetchFolders(accountId);
|
|
setAccountFolders((prev) => ({ ...prev, [accountId]: folders }));
|
|
} catch {
|
|
// non-critical
|
|
}
|
|
}, []);
|
|
|
|
const handleStartFolderMapping = useCallback((acc: MailAccount) => {
|
|
setFolderMappingEdit(acc.id);
|
|
setFolderMappingValues({
|
|
sent: acc.sent_folder_imap_name || '',
|
|
drafts: acc.drafts_folder_imap_name || '',
|
|
spam: acc.spam_folder_imap_name || '',
|
|
trash: acc.trash_folder_imap_name || '',
|
|
});
|
|
if (!accountFolders[acc.id]) {
|
|
loadAccountFolders(acc.id);
|
|
}
|
|
}, [accountFolders, loadAccountFolders]);
|
|
|
|
const handleSaveFolderMapping = useCallback(async (accountId: string) => {
|
|
setSavingMapping(true);
|
|
try {
|
|
const payload: Record<string, string | null> = {};
|
|
payload.sent_folder_imap_name = folderMappingValues.sent || null;
|
|
payload.drafts_folder_imap_name = folderMappingValues.drafts || null;
|
|
payload.spam_folder_imap_name = folderMappingValues.spam || null;
|
|
payload.trash_folder_imap_name = folderMappingValues.trash || null;
|
|
const updated = await updateAccount(accountId, payload);
|
|
setAccounts((prev) => prev.map((a) => (a.id === accountId ? updated : a)));
|
|
setFolderMappingEdit(null);
|
|
toast.success(t('common.saved'));
|
|
} catch (err: unknown) { const errObj = asError(err);
|
|
toast.error(errObj?.message || errObj?.detail || 'Save failed');
|
|
} finally {
|
|
setSavingMapping(false);
|
|
}
|
|
}, [folderMappingValues, toast, t]);
|
|
|
|
const activeTab = searchParams.get('tab') || 'accounts';
|
|
|
|
const tabs = [
|
|
{
|
|
key: 'accounts',
|
|
label: t('mail.tabAccounts'),
|
|
content: (
|
|
<div className="space-y-4" data-testid="tab-accounts">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-secondary-900">{t('mail.accounts')}</h3>
|
|
<Button size="sm" onClick={() => setShowAddAccount(!showAddAccount)} data-testid="add-account-btn">
|
|
{t('mail.addAccount')}
|
|
</Button>
|
|
</div>
|
|
|
|
{showAddAccount && (
|
|
<Card className="mb-4" data-testid="add-account-form">
|
|
<form onSubmit={handleSubmitAccount(handleCreateAccount)} className="space-y-3">
|
|
<Input
|
|
label={t('mail.email')}
|
|
{...registerAccount('email')}
|
|
error={accountErrors.email?.message === 'required' ? t('validation.required') : accountErrors.email?.message === 'invalidEmail' ? t('validation.email') : undefined}
|
|
placeholder="user@example.com"
|
|
required
|
|
/>
|
|
<Input
|
|
label={t('mail.displayName')}
|
|
{...registerAccount('display_name')}
|
|
placeholder="John Doe"
|
|
/>
|
|
<Input
|
|
label="Benutzername (IMAP/SMTP)"
|
|
{...registerAccount('username')}
|
|
placeholder="Leer lassen für E-Mail-Adresse"
|
|
/>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Input
|
|
label={t('mail.imapHost')}
|
|
{...registerAccount('imap_host')}
|
|
error={accountErrors.imap_host?.message === 'required' ? t('validation.required') : undefined}
|
|
placeholder="imap.example.com"
|
|
/>
|
|
<Input
|
|
label={t('mail.imapPort')}
|
|
type="number"
|
|
{...registerAccount('imap_port')}
|
|
error={accountErrors.imap_port?.message === 'invalidNumber' ? t('validation.invalidNumber', 'Invalid number') : undefined}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Input
|
|
label={t('mail.smtpHost')}
|
|
{...registerAccount('smtp_host')}
|
|
error={accountErrors.smtp_host?.message === 'required' ? t('validation.required') : undefined}
|
|
placeholder="smtp.example.com"
|
|
/>
|
|
<Input
|
|
label={t('mail.smtpPort')}
|
|
type="number"
|
|
{...registerAccount('smtp_port')}
|
|
error={accountErrors.smtp_port?.message === 'invalidNumber' ? t('validation.invalidNumber', 'Invalid number') : undefined}
|
|
/>
|
|
</div>
|
|
<Input
|
|
label={t('mail.password')}
|
|
type="password"
|
|
{...registerAccount('password')}
|
|
error={accountErrors.password?.message === 'required' ? t('validation.required') : undefined}
|
|
required
|
|
/>
|
|
<label className="flex items-center gap-2 text-sm text-secondary-700">
|
|
<input
|
|
type="checkbox"
|
|
{...registerAccount('is_shared')}
|
|
className="rounded"
|
|
/>
|
|
Geteiltes Postfach (für alle Tenant-Benutzer sichtbar)
|
|
</label>
|
|
<div className="flex gap-2">
|
|
<Button type="submit" isLoading={accountSubmitting} size="sm">{t('common.save')}</Button>
|
|
<Button variant="secondary" size="sm" type="button" onClick={() => setShowAddAccount(false)}>{t('common.cancel')}</Button>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
)}
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="animate-spin h-5 w-5 text-secondary-400" aria-hidden="true" />
|
|
</div>
|
|
) : accounts.length === 0 ? (
|
|
<p className="text-sm text-secondary-500">{t('mail.noAccounts')}</p>
|
|
) : (
|
|
<div className="space-y-2" data-testid="account-list">
|
|
{accounts.map((acc) => (
|
|
<Card key={acc.id}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="min-w-0 flex-1">
|
|
{editingDisplayName === acc.id ? (
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
value={displayNameValue}
|
|
onChange={(e) => setDisplayNameValue(e.target.value)}
|
|
placeholder={acc.email}
|
|
className="flex-1"
|
|
/>
|
|
<Button size="sm" onClick={() => handleSaveDisplayName(acc.id)}>{t('common.save')}</Button>
|
|
<Button variant="secondary" size="sm" onClick={() => setEditingDisplayName(null)}>{t('common.cancel')}</Button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<p className="font-medium text-secondary-900">{acc.display_name || acc.email}</p>
|
|
<button
|
|
onClick={() => handleStartEditDisplayName(acc)}
|
|
className="text-xs text-secondary-400 hover:text-secondary-600"
|
|
aria-label={t('common.edit')}
|
|
data-testid={`edit-display-name-${acc.id}`}
|
|
>
|
|
<Pencil className="w-3.5 h-3.5" aria-hidden="true" strokeWidth={2} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<p className="text-sm text-secondary-500 truncate">{acc.email}</p>
|
|
<p className="text-xs text-secondary-400 mt-1">
|
|
{t('mail.serverInfo')}: {acc.imap_host}:{acc.imap_port} / {acc.smtp_host}:{acc.smtp_port}
|
|
</p>
|
|
<p className="text-xs text-secondary-400">
|
|
{acc.is_shared ? t('mail.shared') : t('mail.personal')} ·
|
|
{acc.is_active ? t('common.active') : t('common.inactive')}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2 flex-shrink-0">
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => handleTestConnection(acc.id)}
|
|
isLoading={testing === acc.id}
|
|
data-testid={`test-conn-${acc.id}`}
|
|
>
|
|
{t('mail.testConnection')}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => handleSync(acc.id)}
|
|
isLoading={syncing === acc.id}
|
|
data-testid={`sync-${acc.id}`}
|
|
>
|
|
{t('mail.syncNow')}
|
|
</Button>
|
|
<Button
|
|
variant="danger"
|
|
size="sm"
|
|
onClick={() => handleDeleteAccount(acc.id)}
|
|
data-testid={`delete-account-${acc.id}`}
|
|
>
|
|
{t('mail.deleteAccount')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{/* Folder mapping section */}
|
|
{folderMappingEdit === acc.id ? (
|
|
<div className="mt-3 pt-3 border-t border-secondary-200 space-y-2" data-testid={`folder-mapping-${acc.id}`}>
|
|
<p className="text-xs font-medium text-secondary-600">Ordner-Zuordnung</p>
|
|
{(['sent', 'drafts', 'spam', 'trash'] as const).map((type) => (
|
|
<div key={type} className="flex items-center gap-2">
|
|
<label className="text-xs text-secondary-500 w-20">
|
|
{type === 'sent' ? 'Gesendet' : type === 'drafts' ? 'Entwürfe' : type === 'spam' ? 'Spam' : 'Papierkorb'}
|
|
</label>
|
|
<select
|
|
value={folderMappingValues[type] || ''}
|
|
onChange={(e) => setFolderMappingValues((prev) => ({ ...prev, [type]: e.target.value }))}
|
|
className="text-xs rounded border border-secondary-300 bg-white px-1.5 py-0.5 text-secondary-700 focus:outline-none focus:ring-1 focus:ring-primary-500 flex-1"
|
|
>
|
|
<option value="">(automatisch)</option>
|
|
{(accountFolders[acc.id] || []).map((f) => (
|
|
<option key={f.id} value={f.imap_name}>{f.imap_name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
))}
|
|
<div className="flex gap-2 mt-2">
|
|
<Button size="sm" onClick={() => handleSaveFolderMapping(acc.id)} isLoading={savingMapping}>{t('common.save')}</Button>
|
|
<Button variant="secondary" size="sm" onClick={() => setFolderMappingEdit(null)}>{t('common.cancel')}</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="mt-2">
|
|
<button
|
|
onClick={() => handleStartFolderMapping(acc)}
|
|
className="text-xs text-secondary-400 hover:text-secondary-600"
|
|
data-testid={`folder-mapping-btn-${acc.id}`}
|
|
>
|
|
Ordner-Zuordnung bearbeiten
|
|
</button>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
key: 'signatures',
|
|
label: t('mail.tabSignatures'),
|
|
content: <SignatureManager />,
|
|
},
|
|
{
|
|
key: 'rules',
|
|
label: t('mail.tabRules'),
|
|
content: selectedAccountId ? <RuleEditor accountId={selectedAccountId} /> : (
|
|
<p className="text-sm text-secondary-500">{t('mail.selectAccountFirst')}</p>
|
|
),
|
|
},
|
|
{
|
|
key: 'labels',
|
|
label: t('mail.tabLabels'),
|
|
content: <LabelManager />,
|
|
},
|
|
{
|
|
key: 'vacation',
|
|
label: t('mail.tabVacation'),
|
|
content: <VacationResponder accountId={selectedAccountId} />,
|
|
},
|
|
{
|
|
key: 'pgp',
|
|
label: t('mail.tabPgp'),
|
|
content: <PgpSettings />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="p-6 max-w-5xl mx-auto" data-testid="mail-settings-page">
|
|
<h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('mail.settings')}</h1>
|
|
<Tabs tabs={tabs} defaultKey={activeTab} />
|
|
</div>
|
|
);
|
|
} |