From 47d9fe93e502c9b4bc4081f6b90767c76de1bd2b Mon Sep 17 00:00:00 2001
From: maurine <maurine.denoual@kaz.bzh>
Date: Thu, 9 Apr 2026 23:00:12 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20am=C3=A9lioration=20du=20design=20du=20?=
 =?UTF-8?q?formulaire=20de=20modification=20de=20mot=20de=20passe=20(espac?=
 =?UTF-8?q?ement,=20gestion=20des=20erreurs,=20transitions,=20et=20structu?=
 =?UTF-8?q?re=20du=20code)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/user/edit_password.html.twig | 112 +++++++++++++------------
 1 file changed, 59 insertions(+), 53 deletions(-)

diff --git a/templates/user/edit_password.html.twig b/templates/user/edit_password.html.twig
index a1426c1..b14f3cb 100644
--- a/templates/user/edit_password.html.twig
+++ b/templates/user/edit_password.html.twig
@@ -3,78 +3,84 @@
 {% block title %}Modifier mes mots de passe | {{ parent() }}{% endblock %}
 
 {% block body %}
-    <div class="min-h-screen bg-bg-primaire flex items-center justify-center p-4 font-sora">
-        <div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border-t-4 border-bouton">
+    <div class="max-w-md mx-auto w-full bg-white rounded-2xl shadow-xl p-8 border-t-4 border-bouton mt-10 md:mt-20">
 
-            <h1 class="font-caveat text-4xl text-text mb-12 text-center">
-                Modifier le mot de passe de mon espace kaznaute
-            </h1>
+        <h1 class="font-caveat text-4xl text-text mb-12 text-center">
+            Modifier le mot de passe de mon espace kaznaute
+        </h1>
 
-            {{ form_start(form) }}
-            <div class="space-y-6">
-                {# Champ Ancien Mot de Passe #}
-                <div class="space-y-1">
-                    {{ form_label(form.oldPassword, 'Mon mot de passe actuel', {
-                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
-                    }) }}
-                    {{ form_widget(form.oldPassword, {
-                        'attr': {
-                            'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-shadow',
-                            'placeholder':'Saisissez votre ancien mot de passe'
-                        }
-                    }) }}
+        {{ form_start(form) }}
+        <div class="space-y-6">
+            {# Champ Ancien Mot de Passe #}
+            <div class="flex flex-col gap-1.5">
+                {{ form_label(form.oldPassword, 'Mon mot de passe actuel', {
+                    'label_attr': {'class': 'block text-sm font-semibold text-text'}
+                }) }}
+                {{ form_widget(form.oldPassword, {
+                    'attr': {
+                        'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-all',
+                        'placeholder':'Saisissez votre ancien mot de passe'
+                    }
+                }) }}
 
-                    {# Affichage message pour les erreurs de saisie de l'ancien mot de passe #}
+                {# Affichage message pour les erreurs de saisie de l'ancien mot de passe #}
+                {% if form_errors(form.oldPassword) %}
                     <div class="text-red-500 text-xs mt-1 italic">
                         {{ form_errors(form.oldPassword) }}
                     </div>
-                </div>
+                {% endif %}
+            </div>
 
-                {# Champs Nouveau Mot de Passe #}
-                <div class="space-y-6">
-                    {# Affichage d'un message d'erreur si les deux champs ne correspondent pas #}
+            <hr class="border-gris-clair/50">
+
+            {# Champs Nouveau Mot de Passe #}
+            <div class="space-y-6">
+                {# Affichage d'un message d'erreur si les deux champs ne correspondent pas #}
+                {% if form_errors(form.newPassword) %}
                     <div class="text-red-500 text-xs italic">
                         {{ form_errors(form.newPassword) }}
                     </div>
+                {% endif %}
 
-                    <div class="flex flex-col gap-1.5">
-                        {{ form_label(form.newPassword.first, 'Mon nouveau mot de passe', {
-                            'label_attr': {'class': 'block text-sm font-semibold text-text'}
-                        }) }}
-                        {{ form_widget(form.newPassword.first, {
-                            'attr': {
-                                'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-all',
-                                'placeholder':'Saisissez un nouveau mot de passe'
-                            }
-                        }) }}
+                <div class="flex flex-col gap-1.5">
+                    {{ form_label(form.newPassword.first, 'Mon nouveau mot de passe', {
+                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
+                    }) }}
+                    {{ form_widget(form.newPassword.first, {
+                        'attr': {
+                            'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-all',
+                            'placeholder':'Saisissez un nouveau mot de passe'
+                        }
+                    }) }}
+                    {% if form_errors(form.newPassword.first) %}
                         <div class="text-red-500 text-xs italic">
                             {{ form_errors(form.newPassword.first) }}
                         </div>
-                    </div>
-
-                    <div class="flex flex-col gap-1.5">
-                        {{ form_label(form.newPassword.second, 'Confirmer mon nouveau mot de passe', {
-                            'label_attr': {'class': 'block text-sm font-semibold text-text'}
-                        }) }}
-                        {{ form_widget(form.newPassword.second, {
-                            'attr': {
-                                'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-all',
-                                'placeholder': 'Confirmez votre saisie'
-                            }
-                        }) }}
-                    </div>
+                    {% endif %}
                 </div>
 
-                {# Bouton de validation #}
-                <div class="flex justify-center pt-12">
-                    <button type="submit"
-                            class="w-full sm:w-auto px-8 py-3 bg-bouton hover:bg-bouton-hover text-text text-sm font-bold rounded-lg shadow transition-all active:scale-95">
-                        Mettre à jour mon mot de passe
-                    </button>
+                <div class="flex flex-col gap-1.5">
+                    {{ form_label(form.newPassword.second, 'Confirmer mon nouveau mot de passe', {
+                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
+                    }) }}
+                    {{ form_widget(form.newPassword.second, {
+                        'attr': {
+                            'class': 'w-full px-4 py-3 border border-gris-clair rounded-lg focus:outline-none focus:border-bouton focus:ring-1 focus:ring-bouton placeholder-gris-moyen transition-all',
+                            'placeholder': 'Confirmez votre saisie'
+                        }
+                    }) }}
                 </div>
             </div>
+
+            {# Bouton de validation #}
+            <div class="flex justify-center pt-12 pb-2">
+                <button type="submit"
+                        class="w-full sm:w-auto px-8 py-3 bg-bouton hover:bg-bouton-hover text-text text-sm font-bold rounded-lg shadow-md transition-all transform active:scale-95">
+                    Mettre à jour mon mot de passe
+                </button>
+            </div>
+        </div>
             {{ form_end(form) }}
 
-        </div>
     </div>
 {% endblock %}