Stop tracking .env

.gitignore

@@ -15,3 +15,4 @@ hugo_stats.json
 go.sum
 yarn.lock
 .idea/*
+.env

README.md

@@ -28,3 +28,60 @@ docker rm -f chill-site-container
 ```
 
 Le site sera accessible sur http://localhost:1313
+
+## Utiliser le backend de contact
+
+Le formulaire de contact du site envoie les données vers un backend Node.js défini dans `contact-backend.js`.
+
+### 1. Configurer les variables d'environnement
+
+Créer un fichier `.env` à la racine du projet (ou copier `.env.template`) et renseigner :
+
+```bash
+SMTP_HOST=smtp.example.com
+SMTP_PORT=587
+SMTP_SECURE=false
+SMTP_USER=utilisateur@example.com
+SMTP_FROM=utilisateur@example.com
+SMTP_PASS=mot_de_passe
+PORT=3001
+```
+
+Notes :
+- `SMTP_SECURE=true` en général pour le port 465.
+- `SMTP_SECURE=false` en général pour les ports 587 et 25.
+
+### 2. Installer les dépendances Node.js
+
+Si ce n'est pas déjà fait :
+
+```bash
+npm install
+```
+
+### 3. Démarrer le backend contact
+
+```bash
+node contact-backend.js
+```
+
+Le serveur écoute par défaut sur `http://localhost:3001` et expose l'endpoint `POST /contact`.
+
+### 4. Vérifier l'URL du formulaire
+
+Dans `content/contact.md`, la valeur `contactForm.action` doit pointer vers le backend :
+
+```yaml
+contactForm:
+	action: "http://localhost:3001/contact"
+```
+
+### 5. Lancer le site Hugo
+
+Dans un autre terminal :
+
+```bash
+npm run start
+```
+
+Le formulaire sera alors fonctionnel en local, à condition que le backend tourne en même temps.

themes/chill-theme/layouts/shortcodes/contact-form.html

@@ -3,7 +3,7 @@
 
 
 <form id="contactForm" class="max-w-lg mx-auto p-6 bg-white rounded shadow" method="POST"
-	action="{{ $form.action | default " http://localhost:3001/contact" }}">
+	action="{{ $form.action | default "http://localhost:3001/contact" }}">
 	<h3 class="text-2xl font-bold mb-4">{{ $form.title }}</h3>
 	{{ range $form.fields }}
 	<div class="mb-4">
@@ -38,10 +38,24 @@
 			{{ $form.button.label | default "Envoyer" }}
 		</button>
 	</div>
+	<div id="contact-result" class="mt-4" aria-live="polite"></div>
 	<script>
 		document.addEventListener('DOMContentLoaded', function () {
 			const form = document.getElementById('contactForm');
 			const resultDiv = document.getElementById('contact-result');
+			if (!form) {
+				return;
+			}
+
+			function showResult(message, isSuccess) {
+				if (!resultDiv) {
+					return;
+				}
+				const bg = isSuccess ? '#e6ffed' : '#ffe6e6';
+				const color = isSuccess ? '#228B22' : '#b22222';
+				resultDiv.innerHTML = "<div style='background:" + bg + ";color:" + color + ";padding:1em;border-radius:6px;border:1px solid " + color + ";'></div>";
+				resultDiv.firstElementChild.textContent = message;
+			}
 			// Pré-sélectionner le champ "sujet" si paramètre dans l'URL
 			const urlParams = new URLSearchParams(window.location.search);
 			const subject = urlParams.get('subject');
@@ -53,7 +67,9 @@
 			}
 			form.addEventListener('submit', function (e) {
 				e.preventDefault();
-				resultDiv.innerHTML = '';
+				if (resultDiv) {
+					resultDiv.innerHTML = '';
+				}
 				const formData = new FormData(form);
 				fetch(form.action, {
 					method: 'POST',
@@ -62,14 +78,14 @@
 					.then(async response => {
 						const text = await response.text();
 						if (response.status === 200) {
-							resultDiv.innerHTML = `<div style='background:#e6ffed;color:#228B22;padding:1em;border-radius:6px;border:1px solid #228B22;'>${text}</div>`;
+							showResult(text, true);
 							form.reset();
 						} else {
-							resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>${text}</div>`;
+							showResult(text, false);
 						}
 					})
-					.catch(err => {
-						resultDiv.innerHTML = `<div style='background:#ffe6e6;color:#b22222;padding:1em;border-radius:6px;border:1px solid #b22222;'>Erreur réseau</div>`;
+					.catch(() => {
+						showResult('Erreur réseau', false);
 					});
 			});
 		});