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/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>
   );
-}
+}