401 lines
14 KiB
TypeScript
401 lines
14 KiB
TypeScript
'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
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|