✨ Story 5.1: formulaire contact HTML5

docs/stories/5.1.formulaire-structure-html5.md

@@ -2,7 +2,7 @@
 
 ## Status
 
-Ready for Dev
+review
 
 ## Story
 
@@ -22,41 +22,41 @@ Ready for Dev
 
 ## Tasks / Subtasks
 
-- [] **Task 1 : Créer la page contact.php** (AC: 1)
-  - [] Mettre à jour `pages/contact.php`
-  - [] Inclure header, navbar, footer
-  - [] Route `/contact` déjà configurée (Story 3.2)
+- [x] **Task 1 : Créer la page contact.php** (AC: 1)
+  - [x] Mettre à jour `pages/contact.php`
+  - [x] Inclure header, navbar, footer
+  - [x] Route `/contact` déjà configurée (Story 3.2)
 
-- [] **Task 2 : Créer la structure du formulaire** (AC: 1, 6)
-  - [] Balise `<form>` avec method POST et action
-  - [] Champ Nom avec label associé (for/id)
-  - [] Champ Prénom avec label associé
-  - [] Champ Email avec label associé
-  - [] Champ Entreprise (optionnel)
-  - [] Dropdown Catégorie
-  - [] Champ Objet
-  - [] Textarea Message
+- [x] **Task 2 : Créer la structure du formulaire** (AC: 1, 6)
+  - [x] Balise `<form>` avec method POST et action
+  - [x] Champ Nom avec label associé (for/id)
+  - [x] Champ Prénom avec label associé
+  - [x] Champ Email avec label associé
+  - [x] Champ Entreprise (optionnel)
+  - [x] Dropdown Catégorie
+  - [x] Champ Objet
+  - [x] Textarea Message
 
-- [] **Task 3 : Configurer les attributs HTML5** (AC: 2, 5)
-  - [] `type="email"` sur le champ email
-  - [] `required` sur les champs obligatoires
-  - [] `maxlength` appropriés (100, 255, 200, 5000)
-  - [] `placeholder` pour guider la saisie
-  - [] `autocomplete` pour les champs standards
+- [x] **Task 3 : Configurer les attributs HTML5** (AC: 2, 5)
+  - [x] `type="email"` sur le champ email
+  - [x] `required` sur les champs obligatoires
+  - [x] `maxlength` appropriés (100, 255, 200, 5000)
+  - [x] `placeholder` pour guider la saisie
+  - [x] `autocomplete` pour les champs standards
 
-- [] **Task 4 : Marquer les champs requis** (AC: 4)
-  - [] Astérisque visuel sur les labels (span.text-primary)
-  - [] Indication "(optionnel)" sur entreprise
+- [x] **Task 4 : Marquer les champs requis** (AC: 4)
+  - [x] Astérisque visuel sur les labels (span.text-primary)
+  - [x] Indication "(optionnel)" sur entreprise
 
-- [] **Task 5 : Configurer le dropdown** (AC: 3)
-  - [] Option par défaut "Sélectionnez une catégorie..."
-  - [] 3 options : projet, poste, autre
-  - [] Attribut `required`
+- [x] **Task 5 : Configurer le dropdown** (AC: 3)
+  - [x] Option par défaut "Sélectionnez une catégorie..."
+  - [x] 3 options : projet, poste, autre
+  - [x] Attribut `required`
 
-- [] **Task 6 : Rendre responsive** (AC: 7)
-  - [] Grille sm:grid-cols-2 pour Nom/Prénom et Email/Entreprise
-  - [] Champs empilés sur mobile (grid-cols-1)
-  - [] Boutons flex-col sur mobile, flex-row sur desktop
+- [x] **Task 6 : Rendre responsive** (AC: 7)
+  - [x] Grille sm:grid-cols-2 pour Nom/Prénom et Email/Entreprise
+  - [x] Champs empilés sur mobile (grid-cols-1)
+  - [x] Boutons flex-col sur mobile, flex-row sur desktop
 
 ## Dev Notes
 
@@ -297,23 +297,29 @@ include_template('navbar', compact('currentPage'));
 ## Dev Agent Record
 
 ### Agent Model Used
-Claude Opus 4.5 (claude-opus-4-5-20251101)
+GPT-5 Codex
+
+### Implementation Plan
+- Implémenter les tasks 1 à 6 dans l’ordre avec tests PHP à chaque étape.
+- Mettre à jour `pages/contact.php` progressivement et ajouter le JS du compteur de caractères si requis par les tests.
 
 ### File List
 | File | Action | Description |
 |------|--------|-------------|
-| `includes/functions.php` | Modified | Ajout generateCsrfToken() et verifyCsrfToken() |
-| `pages/contact.php` | Modified | Formulaire complet avec 7 champs |
+| `includes/functions.php` | Modified | Fonctions CSRF (génération/validation) |
+| `pages/contact.php` | Modified | Formulaire complet avec validation HTML5 et layout responsive |
+| `tests/contact.test.php` | Added | Tests formulaire contact (structure + attributs) |
+| `tests/run.ps1` | Modified | Ajout du test contact |
 
 ### Completion Notes
-- Formulaire avec 7 champs : nom, prénom, email, entreprise, catégorie, objet, message
-- Token CSRF généré et stocké en session
-- Validation HTML5 : required, type="email", maxlength
-- Autocomplete sur les champs standards (family-name, given-name, email, organization)
-- Layout responsive : 2 colonnes sur desktop, 1 sur mobile
-- Compteur de caractères en temps réel pour le message
-- Placeholders de messages succès/erreur (pour Story 5.6)
-- Spinner de chargement préparé (pour Story 5.2/5.5)
+- Task 1 : page contact initialisée avec header, navbar, footer, et en-tête "Me Contacter"
+- Task 2 : formulaire structuré avec labels associés et champs de base
+- Task 3 : attributs HTML5 (required/type/maxlength/placeholder/autocomplete) configurés
+- Task 4 : labels requis marqués et mention optionnelle ajoutée
+- Task 5 : dropdown catégorie complété avec placeholder et options
+- Task 6 : mise en page responsive en grille et boutons adaptatifs
+- Token CSRF généré et injecté dans le formulaire
+- Tests : `powershell -ExecutionPolicy Bypass -File tests/run.ps1`
 
 ### Debug Log References
 Aucun problème rencontré.
@@ -324,3 +330,4 @@ Aucun problème rencontré.
 |------|---------|-------------|--------|
 | 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
 | 2026-01-23 | 1.0 | Implémentation complète | James (Dev) |
+| 2026-02-04 | 1.1 | Formulaire contact HTML5 + responsive | Amelia (Dev) |