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

frontend/src/__tests__/mail/MailSettings.validation.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+vi.mock('@/api/mail', () => ({
+  fetchAccounts: vi.fn().mockResolvedValue([]),
+  createAccount: vi.fn().mockResolvedValue({ id: 'a1', email: 'test@example.com', display_name: '', imap_host: '', imap_port: 993, smtp_host: '', smtp_port: 587, is_shared: false, is_active: true }),
+  deleteAccount: vi.fn(),
+  testConnection: vi.fn(),
+  triggerSync: vi.fn(),
+  updateAccount: vi.fn(),
+  fetchFolders: vi.fn().mockResolvedValue([]),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn(), warning: vi.fn() }),
+}));
+
+vi.mock('@/components/mail/SignatureManager', () => ({ SignatureManager: () => null }));
+vi.mock('@/components/mail/RuleEditor', () => ({ RuleEditor: () => null }));
+vi.mock('@/components/mail/LabelManager', () => ({ LabelManager: () => null }));
+vi.mock('@/components/mail/VacationResponder', () => ({ VacationResponder: () => null }));
+vi.mock('@/components/mail/PgpSettings', () => ({ PgpSettings: () => null }));
+
+import { MailSettingsPage } from '@/pages/MailSettings';
+import { createAccount } from '@/api/mail';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('MailSettings account form validation (RHF + Zod)', () => {
+  it('shows validation error when email is empty', async () => {
+    render(<MemoryRouter><MailSettingsPage /></MemoryRouter>);
+    await waitFor(() => {
+      expect(screen.getByTestId('mail-settings-page')).toBeInTheDocument();
+    }, { timeout: 3000 });
+    // Click add account button
+    const addBtn = screen.getByTestId('add-account-btn');
+    fireEvent.click(addBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('add-account-form')).toBeInTheDocument();
+    });
+    // Submit empty form
+    const form = screen.getByTestId('add-account-form').querySelector('form');
+    expect(form).toBeTruthy();
+    fireEvent.submit(form!);
+    await waitFor(() => {
+      const errors = screen.getAllByText(/erforderlich|required/i);
+      expect(errors.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('calls createAccount when form is valid', async () => {
+    render(<MemoryRouter><MailSettingsPage /></MemoryRouter>);
+    await waitFor(() => {
+      expect(screen.getByTestId('mail-settings-page')).toBeInTheDocument();
+    }, { timeout: 3000 });
+    const addBtn = screen.getByTestId('add-account-btn');
+    fireEvent.click(addBtn);
+    await waitFor(() => {
+      expect(screen.getByTestId('add-account-form')).toBeInTheDocument();
+    });
+    const form = screen.getByTestId('add-account-form').querySelector('form');
+    const inputs = form!.querySelectorAll('input');
+    // Fill email, imap_host, smtp_host, password
+    fireEvent.change(inputs[0], { target: { value: 'test@example.com' } }); // email
+    fireEvent.change(inputs[3], { target: { value: 'imap.example.com' } }); // imap_host
+    fireEvent.change(inputs[5], { target: { value: 'smtp.example.com' } }); // smtp_host
+    fireEvent.change(inputs[7], { target: { value: 'password123' } }); // password
+    fireEvent.submit(form!);
+    await waitFor(() => {
+      expect(createAccount).toHaveBeenCalledWith(expect.objectContaining({ email: 'test@example.com', imap_host: 'imap.example.com', smtp_host: 'smtp.example.com' }));
+    }, { timeout: 3000 });
+  });
+});

frontend/src/components/mail/LabelManager.tsx

@@ -4,6 +4,9 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Card } from '@/components/ui/Card';
@@ -30,11 +33,23 @@ export function LabelManager() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [showForm, setShowForm] = useState(false);
-  const [name, setName] = useState('');
-  const [color, setColor] = useState(PRESET_COLORS[0]);
   const [saving, setSaving] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<MailLabel | null>(null);
 
+  // ── Label form (RHF + Zod) ──
+  const labelSchema = z.object({
+    name: z.string().min(1, 'required'),
+    color: z.string().optional().default(PRESET_COLORS[0]),
+  });
+  type LabelFormData = z.infer<typeof labelSchema>;
+
+  const { register: registerLabel, handleSubmit: handleSubmitLabel, reset: resetLabel, watch: watchLabel, setValue: setLabelValue, formState: { errors: labelErrors } } = useForm<LabelFormData>({
+    resolver: zodResolver(labelSchema),
+    defaultValues: { name: '', color: PRESET_COLORS[0] },
+  });
+
+  const colorValue = watchLabel('color');
+
   const load = useCallback(() => {
     setLoading(true);
     fetchLabels()
@@ -50,22 +65,20 @@ export function LabelManager() {
 
   useEffect(() => { load(); }, [load]);
 
-  const handleSave = useCallback(async () => {
+  const handleSave = useCallback(async (data: LabelFormData) => {
-    if (!name.trim()) return;
     setSaving(true);
     try {
-      const label = await createLabel({ name, color });
+      const label = await createLabel({ name: data.name, color: data.color });
       setLabels((prev) => [...prev, label]);
       toast.success(t('mail.labelCreated'));
       setShowForm(false);
-      setName('');
+      resetLabel({ name: '', color: PRESET_COLORS[0] });
-      setColor(PRESET_COLORS[0]);
     } catch (err) {
       toast.error(err instanceof Error ? err.message : String(err));
     } finally {
       setSaving(false);
     }
-  }, [name, color, toast, t]);
+  }, [toast, t, resetLabel]);
 
   const handleDelete = useCallback(async () => {
     if (!deleteTarget) return;
@@ -104,11 +117,11 @@ export function LabelManager() {
 
       {showForm && (
         <Card className="mb-4" data-testid="label-form">
-          <div className="space-y-3">
+          <form onSubmit={handleSubmitLabel(handleSave)} className="space-y-3">
             <Input
               label={t('mail.labelName')}
-              value={name}
+              {...registerLabel('name')}
-              onChange={(e) => setName(e.target.value)}
+              error={labelErrors.name?.message === 'required' ? t('validation.required') : undefined}
               placeholder={t('mail.labelName')}
               required
             />
@@ -119,8 +132,8 @@ export function LabelManager() {
                   <button
                     key={c}
                     type="button"
-                    onClick={() => setColor(c)}
+                    onClick={() => setLabelValue('color', c)}
-                    className={`w-8 h-8 rounded-full ${color === c ? 'ring-2 ring-offset-2 ring-primary-500' : ''}`}
+                    className={`w-8 h-8 rounded-full ${colorValue === c ? 'ring-2 ring-offset-2 ring-primary-500' : ''}`}
                     style={{ backgroundColor: c }}
                     aria-label={c}
                   />
@@ -128,10 +141,10 @@ export function LabelManager() {
               </div>
             </div>
             <div className="flex gap-2">
-              <Button onClick={handleSave} isLoading={saving} size="sm">{t('common.save')}</Button>
+              <Button type="submit" isLoading={saving} size="sm">{t('common.save')}</Button>
-              <Button variant="secondary" size="sm" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
+              <Button variant="secondary" size="sm" type="button" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
             </div>
-          </div>
+          </form>
         </Card>
       )}
 

frontend/src/components/mail/RuleEditor.tsx

@@ -4,6 +4,9 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Select } from '@/components/ui/Select';
@@ -47,13 +50,23 @@ export function RuleEditor({ accountId }: { accountId: string }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [showForm, setShowForm] = useState(false);
-  const [name, setName] = useState('');
-  const [priority, setPriority] = useState(1);
   const [conditions, setConditions] = useState<RuleCondition[]>([{ type: 'from_contains', value: '' }]);
   const [actions, setActions] = useState<RuleAction[]>([{ type: 'mark_as_read', value: '' }]);
   const [saving, setSaving] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<MailRule | null>(null);
 
+  // ── Rule form (RHF + Zod) ──
+  const ruleSchema = z.object({
+    name: z.string().min(1, 'required'),
+    priority: z.coerce.number().int().min(1, 'invalidNumber').default(1),
+  });
+  type RuleFormData = z.infer<typeof ruleSchema>;
+
+  const { register: registerRule, handleSubmit: handleSubmitRule, reset: resetRule, formState: { errors: ruleErrors } } = useForm<RuleFormData>({
+    resolver: zodResolver(ruleSchema),
+    defaultValues: { name: '', priority: 1 },
+  });
+
   const load = useCallback(() => {
     setLoading(true);
     fetchRules()
@@ -93,14 +106,13 @@ export function RuleEditor({ accountId }: { accountId: string }) {
     setActions((prev) => prev.filter((_, i) => i !== index));
   };
 
-  const handleSave = useCallback(async () => {
+  const handleSave = useCallback(async (data: RuleFormData) => {
-    if (!name.trim()) return;
     setSaving(true);
     try {
       const rule = await createRule({
-        name,
+        name: data.name,
         account_id: accountId,
-        priority,
+        priority: data.priority,
         is_active: true,
         conditions,
         actions,
@@ -108,8 +120,7 @@ export function RuleEditor({ accountId }: { accountId: string }) {
       setRules((prev) => [...prev, rule].sort((a, b) => a.priority - b.priority));
       toast.success(t('mail.ruleCreated'));
       setShowForm(false);
-      setName('');
+      resetRule({ name: '', priority: 1 });
-      setPriority(1);
       setConditions([{ type: 'from_contains', value: '' }]);
       setActions([{ type: 'mark_as_read', value: '' }]);
     } catch (err) {
@@ -117,7 +128,7 @@ export function RuleEditor({ accountId }: { accountId: string }) {
     } finally {
       setSaving(false);
     }
-  }, [name, accountId, priority, conditions, actions, toast, t]);
+  }, [accountId, conditions, actions, toast, t, resetRule]);
 
   const handleDelete = useCallback(async () => {
     if (!deleteTarget) return;
@@ -156,19 +167,19 @@ export function RuleEditor({ accountId }: { accountId: string }) {
 
       {showForm && (
         <Card className="mb-4" data-testid="rule-form">
-          <div className="space-y-4">
+          <form onSubmit={handleSubmitRule(handleSave)} className="space-y-4">
             <Input
               label={t('mail.ruleName')}
-              value={name}
+              {...registerRule('name')}
-              onChange={(e) => setName(e.target.value)}
+              error={ruleErrors.name?.message === 'required' ? t('validation.required') : undefined}
               placeholder={t('mail.ruleName')}
               required
             />
             <Input
               label={t('mail.rulePriority')}
               type="number"
-              value={String(priority)}
+              {...registerRule('priority')}
-              onChange={(e) => setPriority(Number(e.target.value))}
+              error={ruleErrors.priority?.message === 'invalidNumber' ? t('validation.invalidNumber', 'Invalid number') : undefined}
             />
 
             {/* Conditions */}
@@ -226,10 +237,10 @@ export function RuleEditor({ accountId }: { accountId: string }) {
             </div>
 
             <div className="flex gap-2">
-              <Button onClick={handleSave} isLoading={saving} size="sm">{t('common.save')}</Button>
+              <Button type="submit" isLoading={saving} size="sm">{t('common.save')}</Button>
-              <Button variant="secondary" size="sm" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
+              <Button variant="secondary" size="sm" type="button" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
             </div>
-          </div>
+          </form>
         </Card>
       )}
 

frontend/src/components/mail/SignatureManager.tsx

@@ -5,6 +5,9 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Card } from '@/components/ui/Card';
@@ -41,12 +44,24 @@ export function SignatureManager() {
   const [error, setError] = useState<string | null>(null);
   const [editing, setEditing] = useState<MailSignature | null>(null);
   const [showForm, setShowForm] = useState(false);
-  const [name, setName] = useState('');
-  const [bodyHtml, setBodyHtml] = useState('');
-  const [isDefault, setIsDefault] = useState(false);
   const [saving, setSaving] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<MailSignature | null>(null);
 
+  // ── Signature form (RHF + Zod) ──
+  const sigSchema = z.object({
+    name: z.string().min(1, 'required'),
+    body_html: z.string().default(''),
+    is_default: z.boolean().default(false),
+  });
+  type SigFormData = z.infer<typeof sigSchema>;
+
+  const { register: registerSig, handleSubmit: handleSubmitSig, reset: resetSig, watch: watchSig, setValue: setSigValue, formState: { errors: sigErrors } } = useForm<SigFormData>({
+    resolver: zodResolver(sigSchema),
+    defaultValues: { name: '', body_html: '', is_default: false },
+  });
+
+  const bodyHtmlValue = watchSig('body_html');
+
   const load = useCallback(() => {
     setLoading(true);
     fetchSignatures()
@@ -64,30 +79,25 @@ export function SignatureManager() {
 
   const handleNew = () => {
     setEditing(null);
-    setName('');
+    resetSig({ name: '', body_html: '', is_default: false });
-    setBodyHtml('');
-    setIsDefault(false);
     setShowForm(true);
   };
 
   const handleEdit = (sig: MailSignature) => {
     setEditing(sig);
-    setName(sig.name);
+    resetSig({ name: sig.name, body_html: sig.body_html, is_default: sig.is_default });
-    setBodyHtml(sig.body_html);
-    setIsDefault(sig.is_default);
     setShowForm(true);
   };
 
-  const handleSave = useCallback(async () => {
+  const handleSave = useCallback(async (data: SigFormData) => {
-    if (!name.trim()) return;
     setSaving(true);
     try {
       if (editing) {
-        const updated = await updateSignature(editing.id, { name, body_html: bodyHtml, is_default: isDefault });
+        const updated = await updateSignature(editing.id, { name: data.name, body_html: data.body_html, is_default: data.is_default });
         setSignatures((prev) => prev.map((s) => (s.id === editing.id ? updated : s)));
         toast.success(t('mail.signatureUpdated'));
       } else {
-        const created = await createSignature({ name, body_html: bodyHtml, is_default: isDefault });
+        const created = await createSignature({ name: data.name, body_html: data.body_html, is_default: data.is_default });
         setSignatures((prev) => [...prev, created]);
         toast.success(t('mail.signatureCreated'));
       }
@@ -97,7 +107,7 @@ export function SignatureManager() {
     } finally {
       setSaving(false);
     }
-  }, [editing, name, bodyHtml, isDefault, toast, t]);
+  }, [editing, toast, t]);
 
   const handleDelete = useCallback(async () => {
     if (!deleteTarget) return;
@@ -136,11 +146,11 @@ export function SignatureManager() {
 
       {showForm && (
         <Card className="mb-4" data-testid="signature-form">
-          <div className="space-y-3">
+          <form onSubmit={handleSubmitSig(handleSave)} className="space-y-3">
             <Input
               label={t('mail.signatureName')}
-              value={name}
+              {...registerSig('name')}
-              onChange={(e) => setName(e.target.value)}
+              error={sigErrors.name?.message === 'required' ? t('validation.required') : undefined}
               placeholder={t('mail.signatureName')}
               required
             />
@@ -152,7 +162,7 @@ export function SignatureManager() {
                   <button
                     key={v.token}
                     type="button"
-                    onClick={() => setBodyHtml((prev) => `${prev}${v.token}`)}
+                    onClick={() => setSigValue('body_html', `${bodyHtmlValue}${v.token}`)}
                     className="inline-flex items-center px-2 py-0.5 text-xs rounded border border-secondary-300 bg-secondary-50 hover:bg-secondary-100 text-secondary-700"
                     title={v.description}
                   >
@@ -161,20 +171,20 @@ export function SignatureManager() {
                 ))}
               </div>
               <RichTextEditor
-                content={bodyHtml}
+                content={bodyHtmlValue}
-                onChange={setBodyHtml}
+                onChange={(html: string) => setSigValue('body_html', html)}
                 placeholder="<p>Mit freundlichen Grüßen,<br>{{user.name}}</p>"
               />
             </div>
             <label className="flex items-center gap-2 text-sm text-secondary-700">
-              <input type="checkbox" checked={isDefault} onChange={(e) => setIsDefault(e.target.checked)} className="rounded" />
+              <input type="checkbox" {...registerSig('is_default')} className="rounded" />
               {t('mail.defaultSignature')}
             </label>
             <div className="flex gap-2">
-              <Button onClick={handleSave} isLoading={saving} size="sm">{t('common.save')}</Button>
+              <Button type="submit" isLoading={saving} size="sm">{t('common.save')}</Button>
-              <Button variant="secondary" size="sm" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
+              <Button variant="secondary" size="sm" type="button" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
             </div>
-          </div>
+          </form>
         </Card>
       )}
 

frontend/src/components/mail/VacationResponder.tsx

@@ -1,53 +1,90 @@
 /**
  * Vacation responder — toggle + date range + auto-reply text.
+ * Form validation: React Hook Form + Zod.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Card } from '@/components/ui/Card';
 import { useToast } from '@/components/ui/Toast';
 import { configureVacation, type VacationPayload } from '@/api/mail';
 
+// ── Zod Schema ──
+const vacationSchema = z.object({
+  enabled: z.boolean().default(false),
+  start_date: z.string().optional().default(''),
+  end_date: z.string().optional().default(''),
+  subject: z.string().optional().default(''),
+  body: z.string().optional().default(''),
+}).superRefine((data, ctx) => {
+  if (data.enabled && data.start_date && data.end_date) {
+    const start = new Date(data.start_date);
+    const end = new Date(data.end_date);
+    if (!Number.isNaN(start.getTime()) && !Number.isNaN(end.getTime())) {
+      if (end < start) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'endBeforeStart',
+          path: ['end_date'],
+        });
+      }
+    }
+  }
+});
+
+type VacationFormData = z.infer<typeof vacationSchema>;
+
 export function VacationResponder({ accountId }: { accountId: string }) {
   const { t } = useTranslation();
   const toast = useToast();
-  const [enabled, setEnabled] = useState(false);
-  const [startDate, setStartDate] = useState('');
-  const [endDate, setEndDate] = useState('');
-  const [subject, setSubject] = useState('');
-  const [body, setBody] = useState('');
-  const [saving, setSaving] = useState(false);
 
-  const handleSave = useCallback(async () => {
+  const {
-    setSaving(true);
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors, isSubmitting },
+  } = useForm<VacationFormData>({
+    resolver: zodResolver(vacationSchema),
+    defaultValues: { enabled: false, start_date: '', end_date: '', subject: '', body: '' },
+  });
+
+  const enabled = watch('enabled');
+
+  const onSubmit = useCallback(async (data: VacationFormData) => {
     try {
       const payload: VacationPayload = {
-        enabled,
+        enabled: data.enabled,
-        start_date: startDate || null,
+        start_date: data.start_date || null,
-        end_date: endDate || null,
+        end_date: data.end_date || null,
-        subject,
+        subject: data.subject,
-        body,
+        body: data.body,
       };
       await configureVacation(payload);
       toast.success(t('mail.vacationSaved'));
     } catch (err) {
       toast.error(err instanceof Error ? err.message : String(err));
-    } finally {
-      setSaving(false);
     }
-  }, [enabled, startDate, endDate, subject, body, toast, t]);
+  }, [toast, t]);
+
+  const errorMsg = (key: string | undefined) => {
+    if (!key) return undefined;
+    if (key === 'endBeforeStart') return t('calendar.endBeforeStart', 'End must be after start');
+    return key;
+  };
 
   return (
     <div data-testid="vacation-responder">
       <Card title={t('mail.vacationResponder')}>
-        <div className="space-y-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <label className="flex items-center gap-3 cursor-pointer">
             <input
               type="checkbox"
-              checked={enabled}
+              {...register('enabled')}
-              onChange={(e) => setEnabled(e.target.checked)}
               className="w-5 h-5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
               data-testid="vacation-toggle"
             />
@@ -60,27 +97,24 @@ export function VacationResponder({ accountId }: { accountId: string }) {
                 <Input
                   label={t('mail.vacationStart')}
                   type="date"
-                  value={startDate}
+                  {...register('start_date')}
-                  onChange={(e) => setStartDate(e.target.value)}
                 />
                 <Input
                   label={t('mail.vacationEnd')}
                   type="date"
-                  value={endDate}
+                  {...register('end_date')}
-                  onChange={(e) => setEndDate(e.target.value)}
+                  error={errorMsg(errors.end_date?.message)}
                 />
               </div>
               <Input
                 label={t('mail.vacationSubject')}
-                value={subject}
+                {...register('subject')}
-                onChange={(e) => setSubject(e.target.value)}
                 placeholder={t('mail.vacationSubjectPlaceholder')}
               />
               <div>
                 <label className="block text-sm font-medium text-secondary-700 mb-1">{t('mail.vacationBody')}</label>
                 <textarea
-                  value={body}
+                  {...register('body')}
-                  onChange={(e) => setBody(e.target.value)}
                   className="w-full min-h-32 border border-secondary-300 rounded-md p-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                   placeholder={t('mail.vacationBodyPlaceholder')}
                   data-testid="vacation-body"
@@ -89,11 +123,11 @@ export function VacationResponder({ accountId }: { accountId: string }) {
             </div>
           )}
 
-          <Button onClick={handleSave} isLoading={saving} size="sm" data-testid="vacation-save">
+          <Button type="submit" isLoading={isSubmitting} size="sm" data-testid="vacation-save">
             {t('common.save')}
           </Button>
-        </div>
+        </form>
       </Card>
     </div>
   );
-}
+}

frontend/src/pages/MailSettings.tsx

@@ -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: '',
+  // ── Account create form (RHF + Zod) ──
-    display_name: '',
+  const accountSchema = z.object({
-    imap_host: '',
+    email: z.string().min(1, 'required').email('invalidEmail'),
-    imap_port: 993,
+    display_name: z.string().optional().default(''),
-    smtp_host: '',
+    username: z.string().optional().default(''),
-    smtp_port: 587,
+    imap_host: z.string().min(1, 'required'),
-    username: '',
+    imap_port: z.coerce.number().int().min(1, 'invalidNumber').max(65535, 'invalidNumber').default(993),
-    password: '',
+    smtp_host: z.string().min(1, 'required'),
-    is_shared: false,
+    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 () => {
+  const handleCreateAccount = useCallback(async (data: AccountFormData) => {
-    if (!newAccount.email.trim() || !newAccount.password.trim()) return;
-    setSaving(true);
     try {
-      const acc = await createAccount(newAccount);
+      const acc = await createAccount(data);
       setAccounts((prev) => [...prev, acc]);
       toast.success(t('mail.accountCreated'));
       setShowAddAccount(false);
-      setNewAccount({
+      resetAccount({ email: '', display_name: '', username: '', imap_host: '', imap_port: 993, smtp_host: '', smtp_port: 587, password: '', is_shared: false });
-        email: '',
-        display_name: '',
-        imap_host: '',
-        imap_port: 993,
-        smtp_host: '',
-        smtp_port: 587,
-        username: '',
-        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}
+                  {...registerAccount('email')}
-                  onChange={(e) => setNewAccount((prev) => ({ ...prev, email: e.target.value }))}
+                  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}
+                  {...registerAccount('display_name')}
-                  onChange={(e) => setNewAccount((prev) => ({ ...prev, display_name: e.target.value }))}
                   placeholder="John Doe"
                 />
                 <Input
                   label="Benutzername (IMAP/SMTP)"
-                  value={newAccount.username}
+                  {...registerAccount('username')}
-                  onChange={(e) => setNewAccount((prev) => ({ ...prev, username: e.target.value }))}
                   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}
+                    {...registerAccount('imap_host')}
-                    onChange={(e) => setNewAccount((prev) => ({ ...prev, imap_host: e.target.value }))}
+                    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)}
+                    {...registerAccount('imap_port')}
-                    onChange={(e) => setNewAccount((prev) => ({ ...prev, imap_port: Number(e.target.value) }))}
+                    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}
+                    {...registerAccount('smtp_host')}
-                    onChange={(e) => setNewAccount((prev) => ({ ...prev, smtp_host: e.target.value }))}
+                    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)}
+                    {...registerAccount('smtp_port')}
-                    onChange={(e) => setNewAccount((prev) => ({ ...prev, smtp_port: Number(e.target.value) }))}
+                    error={accountErrors.smtp_port?.message === 'invalidNumber' ? t('validation.invalidNumber', 'Invalid number') : undefined}
                   />
                 </div>
                 <Input
                   label={t('mail.password')}
                   type="password"
-                  value={newAccount.password}
+                  {...registerAccount('password')}
-                  onChange={(e) => setNewAccount((prev) => ({ ...prev, password: e.target.value }))}
+                  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}
+                    {...registerAccount('is_shared')}
-                    onChange={(e) => setNewAccount((prev) => ({ ...prev, is_shared: e.target.checked }))}
                     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 type="submit" isLoading={accountSubmitting} size="sm">{t('common.save')}</Button>
-                  <Button variant="secondary" size="sm" onClick={() => setShowAddAccount(false)}>{t('common.cancel')}</Button>
+                  <Button variant="secondary" size="sm" type="button" onClick={() => setShowAddAccount(false)}>{t('common.cancel')}</Button>
                 </div>
-              </div>
+              </form>
             </Card>
           )}