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/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 () => {
-    if (!name.trim()) return;
+  const handleSave = useCallback(async (data: LabelFormData) => {
     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('');
-      setColor(PRESET_COLORS[0]);
+      resetLabel({ name: '', color: 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}
-              onChange={(e) => setName(e.target.value)}
+              {...registerLabel('name')}
+              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)}
-                    className={`w-8 h-8 rounded-full ${color === c ? 'ring-2 ring-offset-2 ring-primary-500' : ''}`}
+                    onClick={() => setLabelValue('color', c)}
+                    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 variant="secondary" size="sm" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
+              <Button type="submit" isLoading={saving} size="sm">{t('common.save')}</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 () => {
-    if (!name.trim()) return;
+  const handleSave = useCallback(async (data: RuleFormData) => {
     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('');
-      setPriority(1);
+      resetRule({ name: '', priority: 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}
-              onChange={(e) => setName(e.target.value)}
+              {...registerRule('name')}
+              error={ruleErrors.name?.message === 'required' ? t('validation.required') : undefined}
               placeholder={t('mail.ruleName')}
               required
             />
             <Input
               label={t('mail.rulePriority')}
               type="number"
-              value={String(priority)}
-              onChange={(e) => setPriority(Number(e.target.value))}
+              {...registerRule('priority')}
+              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 variant="secondary" size="sm" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
+              <Button type="submit" isLoading={saving} size="sm">{t('common.save')}</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('');
-    setBodyHtml('');
-    setIsDefault(false);
+    resetSig({ name: '', body_html: '', is_default: false });
     setShowForm(true);
   };
 
   const handleEdit = (sig: MailSignature) => {
     setEditing(sig);
-    setName(sig.name);
-    setBodyHtml(sig.body_html);
-    setIsDefault(sig.is_default);
+    resetSig({ name: sig.name, body_html: sig.body_html, is_default: sig.is_default });
     setShowForm(true);
   };
 
-  const handleSave = useCallback(async () => {
-    if (!name.trim()) return;
+  const handleSave = useCallback(async (data: SigFormData) => {
     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}
-              onChange={(e) => setName(e.target.value)}
+              {...registerSig('name')}
+              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}
-                onChange={setBodyHtml}
+                content={bodyHtmlValue}
+                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 variant="secondary" size="sm" onClick={() => setShowForm(false)}>{t('common.cancel')}</Button>
+              <Button type="submit" isLoading={saving} size="sm">{t('common.save')}</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 () => {
-    setSaving(true);
+  const {
+    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,
-        start_date: startDate || null,
-        end_date: endDate || null,
-        subject,
-        body,
+        enabled: data.enabled,
+        start_date: data.start_date || null,
+        end_date: data.end_date || null,
+        subject: data.subject,
+        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}
-              onChange={(e) => setEnabled(e.target.checked)}
+              {...register('enabled')}
               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}
-                  onChange={(e) => setStartDate(e.target.value)}
+                  {...register('start_date')}
                 />
                 <Input
                   label={t('mail.vacationEnd')}
                   type="date"
-                  value={endDate}
-                  onChange={(e) => setEndDate(e.target.value)}
+                  {...register('end_date')}
+                  error={errorMsg(errors.end_date?.message)}
                 />
               </div>
               <Input
                 label={t('mail.vacationSubject')}
-                value={subject}
-                onChange={(e) => setSubject(e.target.value)}
+                {...register('subject')}
                 placeholder={t('mail.vacationSubjectPlaceholder')}
               />
               <div>
                 <label className="block text-sm font-medium text-secondary-700 mb-1">{t('mail.vacationBody')}</label>
                 <textarea
-                  value={body}
-                  onChange={(e) => setBody(e.target.value)}
+                  {...register('body')}
                   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>
   );
-}
+}