ajout envoi smtp (paramètres, test envois, envoi à 1 participant). protège vue mot de passe
- ajout filtre page statistiques
This commit is contained in:
Yannick Le Duc
229
src/components/SendParticipantEmailModal.tsx
Normal file
229
src/components/SendParticipantEmailModal.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Participant, Campaign } 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 { Textarea } from '@/components/ui/textarea';
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Mail, Send, CheckCircle, XCircle } from 'lucide-react';
|
||||
|
||||
interface SendParticipantEmailModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
participant: Participant;
|
||||
campaign: Campaign;
|
||||
}
|
||||
|
||||
export default function SendParticipantEmailModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
participant,
|
||||
campaign
|
||||
}: SendParticipantEmailModalProps) {
|
||||
const [subject, setSubject] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);
|
||||
|
||||
// Générer le lien de vote
|
||||
const voteUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}/campaigns/${campaign.id}/vote/${participant.id}`;
|
||||
|
||||
// Initialiser le message par défaut quand le modal s'ouvre
|
||||
useEffect(() => {
|
||||
if (isOpen && campaign && participant) {
|
||||
setSubject(`Votez pour la campagne "${campaign.title}"`);
|
||||
setMessage(`Bonjour ${participant.first_name},
|
||||
|
||||
Vous êtes invité(e) à participer au vote pour la campagne "${campaign.title}".
|
||||
|
||||
${campaign.description}
|
||||
|
||||
Pour voter, cliquez sur le lien suivant :
|
||||
${voteUrl}
|
||||
|
||||
Vous disposez d'un budget de ${campaign.budget_per_user}€ à répartir entre les propositions selon vos préférences.
|
||||
|
||||
Merci de votre participation !
|
||||
|
||||
Cordialement,
|
||||
L'équipe Mes Budgets Participatifs`);
|
||||
}
|
||||
}, [isOpen, campaign, participant]);
|
||||
|
||||
const handleSendEmail = async () => {
|
||||
if (!subject.trim() || !message.trim()) {
|
||||
setResult({ success: false, message: 'Veuillez remplir le sujet et le message' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSending(true);
|
||||
setResult(null);
|
||||
|
||||
// Récupérer les paramètres SMTP
|
||||
const smtpSettings = await settingsService.getSmtpSettings();
|
||||
|
||||
if (!smtpSettings.host || !smtpSettings.username || !smtpSettings.password) {
|
||||
setResult({ success: false, message: 'Configuration SMTP manquante. Veuillez configurer les paramètres email dans les paramètres.' });
|
||||
return;
|
||||
}
|
||||
|
||||
// Envoyer l'email via l'API
|
||||
const response = await fetch('/api/send-participant-email', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
smtpSettings,
|
||||
toEmail: participant.email,
|
||||
toName: `${participant.first_name} ${participant.last_name}`,
|
||||
subject: subject.trim(),
|
||||
message: message.trim(),
|
||||
campaignTitle: campaign.title,
|
||||
voteUrl
|
||||
}),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
setResult({ success: true, message: 'Email envoyé avec succès !' });
|
||||
// Vider les champs après succès
|
||||
setTimeout(() => {
|
||||
setSubject('');
|
||||
setMessage('');
|
||||
onClose();
|
||||
}, 2000);
|
||||
} else {
|
||||
setResult({ success: false, message: result.error || 'Erreur lors de l\'envoi de l\'email' });
|
||||
}
|
||||
} catch (error) {
|
||||
setResult({ success: false, message: 'Erreur inattendue lors de l\'envoi' });
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setSubject('');
|
||||
setMessage('');
|
||||
setResult(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Mail className="w-5 h-5" />
|
||||
Envoyer un email à {participant.first_name} {participant.last_name}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Envoyez un email personnalisé à ce participant avec le lien de vote.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Informations du participant */}
|
||||
<div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||
<h4 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-2">
|
||||
Destinataire :
|
||||
</h4>
|
||||
<div className="text-sm text-slate-600 dark:text-slate-300">
|
||||
<div><strong>Nom :</strong> {participant.first_name} {participant.last_name}</div>
|
||||
<div><strong>Email :</strong> {participant.email}</div>
|
||||
<div><strong>Campagne :</strong> {campaign.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sujet */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email-subject">Sujet *</Label>
|
||||
<Input
|
||||
id="email-subject"
|
||||
type="text"
|
||||
placeholder="Sujet de l'email"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
disabled={sending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email-message">Message *</Label>
|
||||
<Textarea
|
||||
id="email-message"
|
||||
placeholder="Votre message..."
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
rows={12}
|
||||
disabled={sending}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
<div className="text-xs text-slate-500 dark:text-slate-400">
|
||||
Le lien de vote sera automatiquement inclus dans votre message.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Aperçu du lien */}
|
||||
<div className="p-3 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">
|
||||
Lien de vote qui sera inclus :
|
||||
</h4>
|
||||
<div className="text-xs text-blue-700 dark:text-blue-300 font-mono break-all">
|
||||
{voteUrl}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Résultat */}
|
||||
{result && (
|
||||
<Alert className={result.success ? 'border-green-200 bg-green-50 dark:bg-green-900/20' : 'border-red-200 bg-red-50 dark:bg-red-900/20'}>
|
||||
{result.success ? (
|
||||
<CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
|
||||
) : (
|
||||
<XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
|
||||
)}
|
||||
<AlertDescription className={result.success ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'}>
|
||||
{result.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex flex-col sm:flex-row gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
disabled={sending}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSendEmail}
|
||||
disabled={sending || !subject.trim() || !message.trim()}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{sending ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
||||
Envoi en cours...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="w-4 h-4" />
|
||||
Envoyer l'email
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
154
src/components/SendTestEmailModal.tsx
Normal file
154
src/components/SendTestEmailModal.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
'use client';
|
||||
|
||||
import { useState } 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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { Mail, Send, CheckCircle, XCircle } from 'lucide-react';
|
||||
|
||||
interface SendTestEmailModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
smtpSettings: SmtpSettings;
|
||||
}
|
||||
|
||||
export default function SendTestEmailModal({ isOpen, onClose, smtpSettings }: SendTestEmailModalProps) {
|
||||
const [toEmail, setToEmail] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const [result, setResult] = useState<{ success: boolean; message: string; messageId?: string } | null>(null);
|
||||
|
||||
const handleSendTestEmail = async () => {
|
||||
if (!toEmail.trim()) {
|
||||
setResult({ success: false, message: 'Veuillez saisir une adresse email de destination' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSending(true);
|
||||
setResult(null);
|
||||
|
||||
const response = await settingsService.sendTestEmail(smtpSettings, toEmail.trim());
|
||||
|
||||
if (response.success) {
|
||||
// Sauvegarder automatiquement les paramètres si l'envoi réussit
|
||||
try {
|
||||
await settingsService.setSmtpSettings(smtpSettings);
|
||||
setResult({
|
||||
success: true,
|
||||
message: `Email de test envoyé avec succès ! ID: ${response.messageId} Les paramètres ont été sauvegardés automatiquement.`,
|
||||
messageId: response.messageId
|
||||
});
|
||||
} catch (saveError) {
|
||||
console.error('Erreur lors de la sauvegarde automatique:', saveError);
|
||||
setResult({
|
||||
success: true,
|
||||
message: `Email de test envoyé avec succès ! ID: ${response.messageId} (Erreur lors de la sauvegarde automatique)`,
|
||||
messageId: response.messageId
|
||||
});
|
||||
}
|
||||
setToEmail(''); // Vider le champ après succès
|
||||
} else {
|
||||
setResult({ success: false, message: response.error || 'Erreur lors de l\'envoi' });
|
||||
}
|
||||
} catch (error) {
|
||||
setResult({ success: false, message: 'Erreur inattendue lors de l\'envoi' });
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setToEmail('');
|
||||
setResult(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Mail className="w-5 h-5" />
|
||||
Envoyer un email de test
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Envoyez un email de test pour vérifier que votre configuration SMTP fonctionne correctement.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Configuration SMTP affichée */}
|
||||
<div className="p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||
<h4 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-2">
|
||||
Configuration utilisée :
|
||||
</h4>
|
||||
<div className="text-xs text-slate-600 dark:text-slate-300 space-y-1">
|
||||
<div><strong>Serveur :</strong> {smtpSettings.host}:{smtpSettings.port}</div>
|
||||
<div><strong>Sécurisé :</strong> {smtpSettings.secure ? 'Oui (SSL/TLS)' : 'Non'}</div>
|
||||
<div><strong>Utilisateur :</strong> {smtpSettings.username}</div>
|
||||
<div><strong>Expéditeur :</strong> {smtpSettings.from_name} <{smtpSettings.from_email}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Champ email de destination */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="test-email">Adresse email de destination *</Label>
|
||||
<Input
|
||||
id="test-email"
|
||||
type="email"
|
||||
placeholder="destinataire@exemple.com"
|
||||
value={toEmail}
|
||||
onChange={(e) => setToEmail(e.target.value)}
|
||||
disabled={sending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Résultat */}
|
||||
{result && (
|
||||
<Alert className={result.success ? 'border-green-200 bg-green-50 dark:bg-green-900/20' : 'border-red-200 bg-red-50 dark:bg-red-900/20'}>
|
||||
{result.success ? (
|
||||
<CheckCircle className="h-4 w-4 text-green-600 dark:text-green-400" />
|
||||
) : (
|
||||
<XCircle className="h-4 w-4 text-red-600 dark:text-red-400" />
|
||||
)}
|
||||
<AlertDescription className={result.success ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'}>
|
||||
{result.message}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex flex-col sm:flex-row gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
disabled={sending}
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSendTestEmail}
|
||||
disabled={sending || !toEmail.trim()}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{sending ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
||||
Envoi en cours...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="w-4 h-4" />
|
||||
Envoyer l'email de test
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
400
src/components/SmtpSettingsForm.tsx
Normal file
400
src/components/SmtpSettingsForm.tsx
Normal file
@@ -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
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
29
src/components/ui/switch.tsx
Normal file
29
src/components/ui/switch.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SwitchPrimitives from "@radix-ui/react-switch"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
))
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName
|
||||
|
||||
export { Switch }
|
||||
Reference in New Issue
Block a user