Files
notytex/templates/config/email.html

258 lines
13 KiB
HTML

{% extends "base.html" %}
{% block title %}Configuration Email - Gestion Scolaire{% endblock %}
{% block content %}
<div class="space-y-6">
<div class="flex justify-between items-center">
<div>
<a href="{{ url_for('config.index') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium mb-2 inline-block">
← Retour à la configuration
</a>
<h1 class="text-2xl font-bold text-gray-900">Configuration Email</h1>
<p class="text-gray-600">Configurez les paramètres SMTP pour l'envoi des bilans d'évaluation</p>
</div>
</div>
<!-- Formulaire de configuration email -->
<div class="bg-white shadow rounded-lg">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900">Paramètres SMTP</h2>
<p class="text-sm text-gray-600 mt-1">
Configurez votre serveur SMTP pour envoyer les bilans d'évaluation par email
</p>
</div>
<form method="POST" action="{{ url_for('config.update_email') }}" class="px-6 py-4 space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Serveur SMTP -->
<div>
<label for="smtp_host" class="block text-sm font-medium text-gray-700 mb-1">
Serveur SMTP
</label>
<input type="text"
id="smtp_host"
name="smtp_host"
value="{{ email_config.smtp_host }}"
placeholder="smtp.gmail.com"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1">Ex: smtp.gmail.com, smtp.outlook.com</p>
</div>
<!-- Port SMTP -->
<div>
<label for="smtp_port" class="block text-sm font-medium text-gray-700 mb-1">
Port SMTP
</label>
<input type="text"
id="smtp_port"
name="smtp_port"
value="{{ email_config.smtp_port }}"
placeholder="587"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1">587 (TLS) ou 465 (SSL) généralement</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Nom d'utilisateur -->
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">
Nom d'utilisateur
</label>
<input type="text"
id="username"
name="username"
value="{{ email_config.username }}"
placeholder="votre.email@domain.com"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1">Votre adresse email de connexion SMTP</p>
</div>
<!-- Mot de passe -->
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">
Mot de passe
</label>
<input type="password"
id="password"
name="password"
value="{{ email_config.password }}"
placeholder="••••••••"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1">Mot de passe ou mot de passe d'application</p>
</div>
</div>
<!-- Options de sécurité -->
<div class="flex items-center">
<input type="checkbox"
id="use_tls"
name="use_tls"
{% if email_config.use_tls %}checked{% endif %}
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="use_tls" class="ml-2 text-sm text-gray-700">
Utiliser TLS (recommandé)
</label>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Nom d'expéditeur -->
<div>
<label for="from_name" class="block text-sm font-medium text-gray-700 mb-1">
Nom d'expéditeur
</label>
<input type="text"
id="from_name"
name="from_name"
value="{{ email_config.from_name }}"
placeholder="Notytex"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1">Nom qui apparaîtra comme expéditeur</p>
</div>
<!-- Adresse d'expéditeur -->
<div>
<label for="from_address" class="block text-sm font-medium text-gray-700 mb-1">
Adresse d'expéditeur
</label>
<input type="email"
id="from_address"
name="from_address"
value="{{ email_config.from_address }}"
placeholder="professeur@etablissement.fr"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1">Adresse qui apparaîtra comme expéditeur</p>
</div>
</div>
<div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
<a href="{{ url_for('config.index') }}"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Annuler
</a>
<button type="submit"
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Sauvegarder
</button>
</div>
</form>
</div>
<!-- Test de configuration -->
<div class="bg-white shadow rounded-lg">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="text-lg font-medium text-gray-900">Test de configuration</h2>
<p class="text-sm text-gray-600 mt-1">
Testez votre configuration en envoyant un email de test
</p>
</div>
<form method="POST" action="{{ url_for('config.test_email') }}" class="px-6 py-4">
<div class="space-y-4">
<div>
<label for="test_email" class="block text-sm font-medium text-gray-700 mb-1">
Adresse email de test
</label>
<input type="email"
id="test_email"
name="test_email"
placeholder="test@example.com"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<p class="text-xs text-gray-500 mt-1">Un email de test sera envoyé à cette adresse</p>
</div>
<div class="flex justify-end">
<button type="submit"
class="px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
📧 Envoyer un test
</button>
</div>
</div>
</form>
</div>
<!-- Aide configuration -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
<h3 class="text-lg font-medium text-blue-900 mb-3">💡 Aide à la configuration</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-blue-800 mb-2">Gmail</h4>
<ul class="text-sm text-blue-700 space-y-1">
<li><strong>Serveur:</strong> smtp.gmail.com</li>
<li><strong>Port:</strong> 587 (TLS)</li>
<li><strong>Sécurité:</strong> Utiliser un mot de passe d'application</li>
</ul>
</div>
<div>
<h4 class="font-medium text-blue-800 mb-2">Outlook/Hotmail</h4>
<ul class="text-sm text-blue-700 space-y-1">
<li><strong>Serveur:</strong> smtp-mail.outlook.com</li>
<li><strong>Port:</strong> 587 (TLS)</li>
<li><strong>Sécurité:</strong> Authentification moderne requise</li>
</ul>
</div>
</div>
<div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
<p class="text-sm text-yellow-800">
<strong>⚠️ Sécurité:</strong> Pour Gmail, créez un mot de passe d'application dans votre compte Google.
N'utilisez pas votre mot de passe principal.
</p>
</div>
</div>
<!-- Serveur SMTP de test local -->
<div class="bg-green-50 border border-green-200 rounded-lg p-6">
<h3 class="text-lg font-medium text-green-900 mb-3">🧪 Tests en local - Serveur SMTP factice</h3>
<p class="text-sm text-green-700 mb-3">
Pour tester l'envoi d'emails sans configuration réelle, utilisez le serveur SMTP de débogage Python :
</p>
<div class="bg-green-100 p-4 rounded-md mb-4">
<h4 class="font-medium text-green-800 mb-2">1. Lancer le serveur de débogage</h4>
<p class="text-sm text-green-700 mb-2"><strong>Option A:</strong> Script inclus dans Notytex (recommandé)</p>
<code class="block text-sm bg-gray-900 text-green-400 p-2 rounded mb-3">
python debug_smtp_server.py
</code>
<p class="text-sm text-green-700 mb-2"><strong>Option B:</strong> Avec aiosmtpd</p>
<code class="block text-sm bg-gray-900 text-blue-400 p-2 rounded mb-1">
pip install aiosmtpd
</code>
<code class="block text-sm bg-gray-900 text-blue-400 p-2 rounded mb-3">
python -m aiosmtpd -n -l localhost:1025
</code>
<p class="text-xs text-green-600">💡 Le script inclus affiche les emails avec un formatage amélioré</p>
<p class="text-xs text-green-600">⚠️ Laissez ce terminal ouvert pendant les tests</p>
</div>
<div class="bg-green-100 p-4 rounded-md mb-4">
<h4 class="font-medium text-green-800 mb-2">2. Configuration pour les tests</h4>
<ul class="text-sm text-green-700 space-y-1">
<li><strong>Serveur SMTP:</strong> localhost</li>
<li><strong>Port:</strong> 1025</li>
<li><strong>Utilisateur/Mot de passe:</strong> Laisser vides</li>
<li><strong>TLS:</strong> ❌ Décocher</li>
<li><strong>Adresse expéditeur:</strong> test@notytex.local</li>
</ul>
</div>
<div class="bg-green-100 p-4 rounded-md">
<h4 class="font-medium text-green-800 mb-2">3. Résultat</h4>
<p class="text-sm text-green-700">
✅ Tous les emails s'afficheront dans le terminal (contenu HTML complet)<br>
✅ Aucun email réellement envoyé<br>
✅ Parfait pour tester les bilans d'évaluation
</p>
</div>
</div>
</div>
{% endblock %}