ajout envoi smtp (paramètres, test envois, envoi à 1 participant). protège vue mot de passe

- ajout filtre page statistiques

src/components/SmtpSettingsForm.tsx

@@ -0,0 +1,400 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { SmtpSettings } from '@/types';
+import { settingsService } from '@/lib/services';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Mail, Eye, EyeOff, TestTube, Save, CheckCircle, Send } from 'lucide-react';
+import SendTestEmailModal from './SendTestEmailModal';
+
+interface SmtpSettingsFormProps {
+  onSave?: () => void;
+}
+
+export default function SmtpSettingsForm({ onSave }: SmtpSettingsFormProps) {
+  const [settings, setSettings] = useState<SmtpSettings>({
+    host: '',
+    port: 587,
+    username: '',
+    password: '',
+    secure: true,
+    from_email: '',
+    from_name: ''
+  });
+  
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [showTestEmailModal, setShowTestEmailModal] = useState(false);
+  const [passwordValue, setPasswordValue] = useState('');
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      setLoading(true);
+      const smtpSettings = await settingsService.getSmtpSettings();
+      setSettings(smtpSettings);
+      // Ne pas stocker le mot de passe en clair dans l'état local
+      setPasswordValue('');
+    } catch (error) {
+      console.error('Erreur lors du chargement des paramètres SMTP:', error);
+      setMessage({ type: 'error', text: 'Erreur lors du chargement des paramètres' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInputChange = (field: keyof SmtpSettings, value: string | number | boolean) => {
+    setSettings(prev => ({
+      ...prev,
+      [field]: value
+    }));
+    
+    // Si c'est le mot de passe, mettre à jour aussi l'état local
+    if (field === 'password') {
+      setPasswordValue(value as string);
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      setMessage(null);
+      
+      // Utiliser le mot de passe saisi si disponible, sinon utiliser celui des settings
+      const settingsToSave = {
+        ...settings,
+        password: passwordValue || settings.password
+      };
+      
+      await settingsService.setSmtpSettings(settingsToSave);
+      
+      setMessage({ type: 'success', text: 'Paramètres SMTP sauvegardés avec succès' });
+      onSave?.();
+      
+      // Effacer le message après 3 secondes
+      setTimeout(() => setMessage(null), 3000);
+    } catch (error) {
+      console.error('Erreur lors de la sauvegarde:', error);
+      setMessage({ type: 'error', text: 'Erreur lors de la sauvegarde des paramètres' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    try {
+      setTesting(true);
+      setMessage(null);
+      
+      // Utiliser le mot de passe saisi si disponible
+      const settingsToTest = {
+        ...settings,
+        password: passwordValue || settings.password
+      };
+      
+      const result = await settingsService.testSmtpConnection(settingsToTest);
+      
+      if (result.success) {
+        // Sauvegarder automatiquement les paramètres si le test réussit
+        try {
+          await settingsService.setSmtpSettings(settingsToTest);
+          setMessage({ type: 'success', text: 'Test de connexion SMTP réussi ! Les paramètres ont été sauvegardés automatiquement.' });
+          onSave?.(); // Appeler le callback de sauvegarde
+        } catch (saveError) {
+          console.error('Erreur lors de la sauvegarde automatique:', saveError);
+          setMessage({ type: 'success', text: 'Test de connexion SMTP réussi ! (Erreur lors de la sauvegarde automatique)' });
+        }
+      } else {
+        setMessage({ type: 'error', text: `Test de connexion échoué : ${result.error}` });
+      }
+    } catch (error) {
+      console.error('Erreur lors du test:', error);
+      setMessage({ type: 'error', text: 'Erreur lors du test de connexion' });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex items-center justify-center h-32">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-slate-900 dark:border-slate-100"></div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      <Card>
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
+            <Mail className="w-5 h-5 text-green-600 dark:text-green-300" />
+          </div>
+          <div>
+            <CardTitle className="text-xl">Configuration Email</CardTitle>
+            <CardDescription>
+              Paramètres SMTP pour l'envoi d'emails automatiques
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      
+      <CardContent className="space-y-6">
+        {message && (
+          <Alert className={message.type === 'success' ? 'border-green-200 bg-green-50 dark:bg-green-900/20' : 'border-red-200 bg-red-50 dark:bg-red-900/20'}>
+            <AlertDescription className={message.type === 'success' ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'}>
+              {message.text}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Serveur SMTP */}
+          <div className="space-y-2">
+            <Label htmlFor="smtp-host">Serveur SMTP *</Label>
+            <Input
+              id="smtp-host"
+              type="text"
+              placeholder="smtp.gmail.com"
+              value={settings.host}
+              onChange={(e) => handleInputChange('host', e.target.value)}
+            />
+            <div className="text-xs text-slate-500 dark:text-slate-400">
+              Exemples : smtp.gmail.com, smtp.office365.com, mail.infomaniak.com
+            </div>
+          </div>
+
+          {/* Port SMTP */}
+          <div className="space-y-2">
+            <Label htmlFor="smtp-port">Port SMTP *</Label>
+            <Input
+              id="smtp-port"
+              type="number"
+              placeholder="587"
+              value={settings.port}
+              onChange={(e) => handleInputChange('port', parseInt(e.target.value) || 587)}
+            />
+            <div className="text-xs text-slate-500 dark:text-slate-400">
+              Ports courants : 587 (TLS), 465 (SSL), 25 (non sécurisé)
+            </div>
+          </div>
+
+          {/* Nom d'utilisateur */}
+          <div className="space-y-2">
+            <Label htmlFor="smtp-username">Nom d'utilisateur *</Label>
+            <Input
+              id="smtp-username"
+              type="text"
+              placeholder="votre-email@gmail.com"
+              value={settings.username}
+              onChange={(e) => handleInputChange('username', e.target.value)}
+            />
+          </div>
+
+          {/* Mot de passe */}
+          <div className="space-y-2">
+            <Label htmlFor="smtp-password">Mot de passe *</Label>
+            <div className="relative">
+              <Input
+                id="smtp-password"
+                type={showPassword ? 'text' : 'password'}
+                placeholder="••••••••"
+                value={showPassword ? passwordValue : (passwordValue ? '••••••••' : '')}
+                onChange={(e) => handleInputChange('password', e.target.value)}
+              />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="w-4 h-4" />
+                )}
+              </Button>
+            </div>
+            {passwordValue && (
+              <div className="text-xs text-slate-500 dark:text-slate-400">
+                Mot de passe saisi. Cliquez sur l'œil pour le voir.
+              </div>
+            )}
+          </div>
+
+          {/* Email d'expédition */}
+          <div className="space-y-2">
+            <Label htmlFor="smtp-from-email">Email d'expédition *</Label>
+            <Input
+              id="smtp-from-email"
+              type="email"
+              placeholder="noreply@votre-domaine.com"
+              value={settings.from_email}
+              onChange={(e) => handleInputChange('from_email', e.target.value)}
+            />
+          </div>
+
+          {/* Nom d'expédition */}
+          <div className="space-y-2">
+            <Label htmlFor="smtp-from-name">Nom d'expédition</Label>
+            <Input
+              id="smtp-from-name"
+              type="text"
+              placeholder="Mes Budgets Participatifs"
+              value={settings.from_name}
+              onChange={(e) => handleInputChange('from_name', e.target.value)}
+            />
+          </div>
+        </div>
+
+        {/* Connexion sécurisée */}
+        <div className="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
+          <div className="flex-1">
+            <Label htmlFor="smtp-secure" className="text-base font-medium">
+              Connexion sécurisée (SSL/TLS)
+            </Label>
+            <p className="text-sm text-slate-600 dark:text-slate-300 mt-1">
+              Activez cette option pour utiliser une connexion chiffrée SSL/TLS
+            </p>
+          </div>
+          <Switch
+            id="smtp-secure"
+            checked={settings.secure}
+            onCheckedChange={(checked) => handleInputChange('secure', checked)}
+            className="ml-4"
+          />
+        </div>
+
+        {/* Boutons d'action */}
+        <div className="flex flex-col sm:flex-row gap-3 pt-4">
+          <Button
+            onClick={handleTestConnection}
+            disabled={testing || !settings.host || !settings.username || !settings.password}
+            variant="outline"
+            className="flex items-center gap-2"
+          >
+            {testing ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>
+                Test en cours...
+              </>
+            ) : (
+              <>
+                <TestTube className="w-4 h-4" />
+                Tester la connexion
+              </>
+            )}
+          </Button>
+          
+          <Button
+            onClick={() => setShowTestEmailModal(true)}
+            disabled={!settings.host || !settings.username || (!passwordValue && !settings.password) || !settings.from_email}
+            variant="outline"
+            className="flex items-center gap-2"
+          >
+            <Send className="w-4 h-4" />
+            Envoyer un email de test
+          </Button>
+          
+          <Button
+            onClick={handleSave}
+            disabled={saving}
+            className="flex items-center gap-2"
+          >
+            {saving ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                Sauvegarde...
+              </>
+            ) : (
+              <>
+                <Save className="w-4 h-4" />
+                Sauvegarder
+              </>
+            )}
+          </Button>
+        </div>
+
+        {/* Informations de sécurité */}
+        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
+            🔒 Sécurité
+          </h4>
+          <p className="text-sm text-blue-700 dark:text-blue-300">
+            Le mot de passe SMTP est automatiquement chiffré avant d'être stocké dans la base de données. 
+            Seules les personnes ayant accès à la clé de chiffrement peuvent le déchiffrer.
+          </p>
+        </div>
+
+        {/* Aide pour les configurations SMTP populaires */}
+        <div className="mt-4 p-4 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg">
+          <h4 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
+            💡 Configurations SMTP populaires
+          </h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
+            <div>
+              <h5 className="font-medium text-slate-700 dark:text-slate-300 mb-1">Gmail</h5>
+              <div className="text-slate-600 dark:text-slate-400 space-y-1">
+                <div>Serveur : smtp.gmail.com</div>
+                <div>Port : 587</div>
+                <div>SSL/TLS : Activé</div>
+              </div>
+            </div>
+            <div>
+              <h5 className="font-medium text-slate-700 dark:text-slate-300 mb-1">Outlook/Hotmail</h5>
+              <div className="text-slate-600 dark:text-slate-400 space-y-1">
+                <div>Serveur : smtp-mail.outlook.com</div>
+                <div>Port : 587</div>
+                <div>SSL/TLS : Activé</div>
+              </div>
+            </div>
+            <div>
+              <h5 className="font-medium text-slate-700 dark:text-slate-300 mb-1">Yahoo</h5>
+              <div className="text-slate-600 dark:text-slate-400 space-y-1">
+                <div>Serveur : smtp.mail.yahoo.com</div>
+                <div>Port : 587</div>
+                <div>SSL/TLS : Activé</div>
+              </div>
+            </div>
+            <div>
+              <h5 className="font-medium text-slate-700 dark:text-slate-300 mb-1">Infomaniak</h5>
+              <div className="text-slate-600 dark:text-slate-400 space-y-1">
+                <div>Serveur : mail.infomaniak.com</div>
+                <div>Port : 587</div>
+                <div>SSL/TLS : Activé</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+
+    {/* Modal d'envoi d'email de test */}
+    <SendTestEmailModal
+      isOpen={showTestEmailModal}
+      onClose={() => setShowTestEmailModal(false)}
+      smtpSettings={{
+        ...settings,
+        password: passwordValue || settings.password
+      }}
+    />
+  </>
+  );
+}