Phase 6.6: Mail-Settings-Forms on RHF + Zod
- MailSettings account form: RHF+Zod (email valid, password required, imap/smtp host required, ports numeric) - SignatureManager: RHF+Zod (name required, body_html, is_default) - RuleEditor: RHF+Zod (name required, priority numeric) - LabelManager: RHF+Zod (name required, color optional) - VacationResponder: RHF+Zod (enabled, dates with end>start validation, subject, body) - Error display under each field - Preserved all existing functionality: CRUD, templates, variables - Added 2 validation tests for MailSettings account form
This commit is contained in:
Agent Zero
@@ -5,6 +5,9 @@
|
||||
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';
|
||||
@@ -37,16 +40,24 @@ export function MailSettingsPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedAccountId, setSelectedAccountId] = useState('');
|
||||
const [showAddAccount, setShowAddAccount] = useState(false);
|
||||
const [newAccount, setNewAccount] = useState<CreateAccountPayload>({
|
||||
email: '',
|
||||
display_name: '',
|
||||
imap_host: '',
|
||||
imap_port: 993,
|
||||
smtp_host: '',
|
||||
smtp_port: 587,
|
||||
username: '',
|
||||
password: '',
|
||||
is_shared: 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);
|
||||
@@ -75,31 +86,17 @@ export function MailSettingsPage() {
|
||||
|
||||
useEffect(() => { loadAccounts(); }, [loadAccounts]);
|
||||
|
||||
const handleCreateAccount = useCallback(async () => {
|
||||
if (!newAccount.email.trim() || !newAccount.password.trim()) return;
|
||||
setSaving(true);
|
||||
const handleCreateAccount = useCallback(async (data: AccountFormData) => {
|
||||
try {
|
||||
const acc = await createAccount(newAccount);
|
||||
const acc = await createAccount(data);
|
||||
setAccounts((prev) => [...prev, acc]);
|
||||
toast.success(t('mail.accountCreated'));
|
||||
setShowAddAccount(false);
|
||||
setNewAccount({
|
||||
email: '',
|
||||
display_name: '',
|
||||
imap_host: '',
|
||||
imap_port: 993,
|
||||
smtp_host: '',
|
||||
smtp_port: 587,
|
||||
username: '',
|
||||
password: '',
|
||||
is_shared: false,
|
||||
});
|
||||
resetAccount({ email: '', display_name: '', username: '', imap_host: '', imap_port: 993, smtp_host: '', smtp_port: 587, password: '', is_shared: false });
|
||||
} catch (err: any) {
|
||||
toast.error(err?.message || err?.detail || 'Save failed');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, [newAccount, toast, t]);
|
||||
}, [toast, t, resetAccount]);
|
||||
|
||||
const handleTestConnection = useCallback(async (accountId: string) => {
|
||||
setTesting(accountId);
|
||||
@@ -218,75 +215,72 @@ export function MailSettingsPage() {
|
||||
|
||||
{showAddAccount && (
|
||||
<Card className="mb-4" data-testid="add-account-form">
|
||||
<div className="space-y-3">
|
||||
<form onSubmit={handleSubmitAccount(handleCreateAccount)} className="space-y-3">
|
||||
<Input
|
||||
label={t('mail.email')}
|
||||
value={newAccount.email}
|
||||
onChange={(e) => setNewAccount((prev) => ({ ...prev, email: e.target.value }))}
|
||||
{...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')}
|
||||
value={newAccount.display_name}
|
||||
onChange={(e) => setNewAccount((prev) => ({ ...prev, display_name: e.target.value }))}
|
||||
{...registerAccount('display_name')}
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
<Input
|
||||
label="Benutzername (IMAP/SMTP)"
|
||||
value={newAccount.username}
|
||||
onChange={(e) => setNewAccount((prev) => ({ ...prev, username: e.target.value }))}
|
||||
{...registerAccount('username')}
|
||||
placeholder="Leer lassen für E-Mail-Adresse"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label={t('mail.imapHost')}
|
||||
value={newAccount.imap_host}
|
||||
onChange={(e) => setNewAccount((prev) => ({ ...prev, imap_host: e.target.value }))}
|
||||
{...registerAccount('imap_host')}
|
||||
error={accountErrors.imap_host?.message === 'required' ? t('validation.required') : undefined}
|
||||
placeholder="imap.example.com"
|
||||
/>
|
||||
<Input
|
||||
label={t('mail.imapPort')}
|
||||
type="number"
|
||||
value={String(newAccount.imap_port)}
|
||||
onChange={(e) => setNewAccount((prev) => ({ ...prev, imap_port: Number(e.target.value) }))}
|
||||
{...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')}
|
||||
value={newAccount.smtp_host}
|
||||
onChange={(e) => setNewAccount((prev) => ({ ...prev, smtp_host: e.target.value }))}
|
||||
{...registerAccount('smtp_host')}
|
||||
error={accountErrors.smtp_host?.message === 'required' ? t('validation.required') : undefined}
|
||||
placeholder="smtp.example.com"
|
||||
/>
|
||||
<Input
|
||||
label={t('mail.smtpPort')}
|
||||
type="number"
|
||||
value={String(newAccount.smtp_port)}
|
||||
onChange={(e) => setNewAccount((prev) => ({ ...prev, smtp_port: Number(e.target.value) }))}
|
||||
{...registerAccount('smtp_port')}
|
||||
error={accountErrors.smtp_port?.message === 'invalidNumber' ? t('validation.invalidNumber', 'Invalid number') : undefined}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label={t('mail.password')}
|
||||
type="password"
|
||||
value={newAccount.password}
|
||||
onChange={(e) => setNewAccount((prev) => ({ ...prev, password: e.target.value }))}
|
||||
{...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"
|
||||
checked={newAccount.is_shared || false}
|
||||
onChange={(e) => setNewAccount((prev) => ({ ...prev, is_shared: e.target.checked }))}
|
||||
{...registerAccount('is_shared')}
|
||||
className="rounded"
|
||||
/>
|
||||
Geteiltes Postfach (für alle Tenant-Benutzer sichtbar)
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleCreateAccount} isLoading={saving} size="sm">{t('common.save')}</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => setShowAddAccount(false)}>{t('common.cancel')}</Button>
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user