295 lines
9.6 KiB
Markdown
295 lines
9.6 KiB
Markdown
# Story 5.6: Feedback Utilisateur (Succès/Erreur)
|
|
|
|
## Status
|
|
|
|
Ready for Dev
|
|
|
|
## Story
|
|
|
|
**As a** visiteur,
|
|
**I want** savoir clairement si mon message a été envoyé,
|
|
**so that** je ne doute pas et j'évite les envois multiples.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. Pendant l'envoi, un indicateur de chargement est affiché (spinner ou texte)
|
|
2. Le bouton d'envoi est désactivé pendant le traitement
|
|
3. En cas de succès : message de confirmation visible, formulaire réinitialisé, localStorage vidé
|
|
4. En cas d'erreur : message d'erreur explicite, données conservées pour réessayer
|
|
5. L'envoi est fait en AJAX (pas de rechargement de page)
|
|
6. Le message de succès invite à vérifier les spams si pas de réponse
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [] **Task 1 : Afficher l'état de chargement** (AC: 1, 2)
|
|
- [] Masquer le texte du bouton (submitText.classList.add('hidden'))
|
|
- [] Afficher le spinner (submitLoading.classList.remove('hidden'))
|
|
- [] Désactiver le bouton (submitBtn.disabled = true)
|
|
|
|
- [] **Task 2 : Envoyer en AJAX** (AC: 5)
|
|
- [] Utiliser fetch() avec POST
|
|
- [] Envoyer les données en JSON (Content-Type: application/json)
|
|
- [] Inclure les tokens (CSRF + reCAPTCHA)
|
|
|
|
- [] **Task 3 : Gérer le succès** (AC: 3, 6)
|
|
- [] Masquer le formulaire (form.classList.add('hidden'))
|
|
- [] Afficher le message de succès
|
|
- [] Mention des spams (vérifier sous 48h)
|
|
- [] Vider le localStorage (AppState.clearFormData())
|
|
- [] Réinitialiser le formulaire (form.reset())
|
|
|
|
- [] **Task 4 : Gérer les erreurs** (AC: 4)
|
|
- [] Afficher le message d'erreur avec icône
|
|
- [] Garder les données dans le formulaire
|
|
- [] Message "Vos données ont été conservées"
|
|
- [] Permettre de réessayer
|
|
|
|
- [] **Task 5 : Réinitialiser l'état après feedback**
|
|
- [] Masquer le spinner (finally block)
|
|
- [] Réactiver le bouton
|
|
- [] Scroll vers le message (scrollIntoView)
|
|
|
|
## Dev Notes
|
|
|
|
### Code JavaScript Complet
|
|
|
|
```javascript
|
|
// assets/js/contact-form.js (compléter)
|
|
|
|
class ContactFormSubmit {
|
|
constructor(formId) {
|
|
this.form = document.getElementById(formId);
|
|
if (!this.form) return;
|
|
|
|
this.submitBtn = document.getElementById('submit-btn');
|
|
this.submitText = document.getElementById('submit-text');
|
|
this.submitLoading = document.getElementById('submit-loading');
|
|
this.successMessage = document.getElementById('success-message');
|
|
this.errorMessage = document.getElementById('error-message');
|
|
this.errorText = document.getElementById('error-text');
|
|
|
|
this.isSubmitting = false;
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
// Écouter l'événement de validation réussie
|
|
this.form.addEventListener('validSubmit', () => this.handleSubmit());
|
|
}
|
|
|
|
async handleSubmit() {
|
|
if (this.isSubmitting) return;
|
|
|
|
this.setLoadingState(true);
|
|
this.hideMessages();
|
|
|
|
try {
|
|
// Récupérer les données
|
|
const formData = window.contactFormValidator.getFormData();
|
|
|
|
// Ajouter le token CSRF
|
|
const csrfInput = this.form.querySelector('[name="csrf_token"]');
|
|
if (csrfInput) {
|
|
formData.csrf_token = csrfInput.value;
|
|
}
|
|
|
|
// Obtenir le token reCAPTCHA
|
|
formData.recaptcha_token = await RecaptchaService.getToken('contact');
|
|
|
|
// Envoyer la requête
|
|
const response = await fetch('/api/contact.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
this.handleSuccess(result.message);
|
|
} else {
|
|
this.handleError(result.error || 'Une erreur est survenue');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Erreur envoi formulaire:', error);
|
|
this.handleError('Impossible de contacter le serveur. Vérifiez votre connexion.');
|
|
} finally {
|
|
this.setLoadingState(false);
|
|
}
|
|
}
|
|
|
|
setLoadingState(loading) {
|
|
this.isSubmitting = loading;
|
|
|
|
if (this.submitBtn) {
|
|
this.submitBtn.disabled = loading;
|
|
}
|
|
|
|
if (this.submitText && this.submitLoading) {
|
|
if (loading) {
|
|
this.submitText.classList.add('hidden');
|
|
this.submitLoading.classList.remove('hidden');
|
|
} else {
|
|
this.submitText.classList.remove('hidden');
|
|
this.submitLoading.classList.add('hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
handleSuccess(message) {
|
|
// Masquer le formulaire
|
|
this.form.classList.add('hidden');
|
|
|
|
// Afficher le message de succès
|
|
if (this.successMessage) {
|
|
this.successMessage.classList.remove('hidden');
|
|
|
|
// Scroll vers le message
|
|
this.successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
|
|
// Vider le localStorage
|
|
AppState.clearFormData();
|
|
|
|
// Réinitialiser le formulaire (pour un éventuel nouvel envoi)
|
|
this.form.reset();
|
|
|
|
// Déclencher l'événement de succès
|
|
this.form.dispatchEvent(new CustomEvent('formSuccess'));
|
|
}
|
|
|
|
handleError(message) {
|
|
// Afficher le message d'erreur
|
|
if (this.errorMessage && this.errorText) {
|
|
this.errorText.textContent = message;
|
|
this.errorMessage.classList.remove('hidden');
|
|
|
|
// Scroll vers le message
|
|
this.errorMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
|
|
// Les données sont conservées dans le formulaire pour réessayer
|
|
}
|
|
|
|
hideMessages() {
|
|
if (this.successMessage) {
|
|
this.successMessage.classList.add('hidden');
|
|
}
|
|
if (this.errorMessage) {
|
|
this.errorMessage.classList.add('hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialisation
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.contactFormSubmit = new ContactFormSubmit('contact-form');
|
|
});
|
|
```
|
|
|
|
### HTML des Messages (dans contact.php)
|
|
|
|
```html
|
|
<!-- Message de succès -->
|
|
<div id="success-message" class="hidden mt-8 p-6 bg-success/10 border border-success/30 rounded-lg text-center">
|
|
<svg class="w-12 h-12 text-success mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<h3 class="text-lg font-semibold text-text-primary mb-2">Message envoyé avec succès !</h3>
|
|
<p class="text-text-secondary mb-4">
|
|
Merci pour votre message. Je vous répondrai dans les meilleurs délais.
|
|
</p>
|
|
<p class="text-sm text-text-muted">
|
|
Si vous ne recevez pas de réponse sous 48h, pensez à vérifier vos spams.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Message d'erreur -->
|
|
<div id="error-message" class="hidden mt-8 p-6 bg-error/10 border border-error/30 rounded-lg">
|
|
<div class="flex items-start gap-4">
|
|
<svg class="w-6 h-6 text-error flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<div>
|
|
<h3 class="font-semibold text-error mb-1">Erreur</h3>
|
|
<p class="text-text-secondary" id="error-text"></p>
|
|
<p class="text-sm text-text-muted mt-2">
|
|
Vos données ont été conservées. Vous pouvez réessayer.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### État du Bouton
|
|
|
|
| État | Texte | Icône | Disabled |
|
|
|------|-------|-------|----------|
|
|
| Normal | "Envoyer le message" | Aucune | Non |
|
|
| Loading | "Envoi en cours..." | Spinner | Oui |
|
|
| Succès | (caché) | - | - |
|
|
| Erreur | "Envoyer le message" | Aucune | Non |
|
|
|
|
### Spinner CSS
|
|
|
|
```css
|
|
/* Déjà inclus dans Tailwind avec animate-spin */
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
```
|
|
|
|
## Testing
|
|
|
|
- [] Le spinner s'affiche pendant l'envoi
|
|
- [] Le bouton est désactivé pendant l'envoi
|
|
- [] Le message de succès s'affiche après envoi réussi
|
|
- [] Le formulaire est masqué après succès
|
|
- [] La mention des spams est présente (48h)
|
|
- [] Le localStorage est vidé après succès
|
|
- [] Le message d'erreur s'affiche si échec
|
|
- [] Les données sont conservées après erreur
|
|
- [] On peut réessayer après une erreur
|
|
- [] Pas de rechargement de page (AJAX)
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
|
|
|
### File List
|
|
| File | Action | Description |
|
|
|------|--------|-------------|
|
|
| `assets/js/contact-form.js` | Modified | Ajout classe ContactFormSubmit |
|
|
| `pages/contact.php` | Modified | Messages succès/erreur améliorés |
|
|
|
|
### Completion Notes
|
|
- Classe ContactFormSubmit avec gestion complète du cycle de vie
|
|
- État loading : spinner + bouton désactivé
|
|
- Envoi AJAX avec fetch() et JSON
|
|
- Tokens CSRF et reCAPTCHA inclus automatiquement
|
|
- Succès : formulaire masqué, message avec mention spams, localStorage vidé
|
|
- Erreur : message explicite, données conservées, possibilité de réessayer
|
|
- Scroll automatique vers les messages (scrollIntoView smooth)
|
|
- Gestion des erreurs réseau (catch)
|
|
|
|
### Debug Log References
|
|
Aucun problème rencontré.
|
|
|
|
## Change Log
|
|
|
|
| Date | Version | Description | Author |
|
|
|------|---------|-------------|--------|
|
|
| 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
|
|
| 2026-01-24 | 1.0 | Implémentation complète | James (Dev) |
|