melvin-leveque/interface-kaznautes
2
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: amélioration du design du formulaire de modification de mot de passe (espacement, gestion des erreurs, transitions, et structure du code)

Browse Source
This commit is contained in:
maurine
2026-04-09 23:00:12 +02:00
parent bf3439587e
commit 47d9fe93e5
1 changed files with 59 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
templates/user/edit_password.html.twig
View File

@@ -3,8 +3,7 @@
{% block title %}Modifier mes mots de passe | {{ parent() }}{% endblock %} {% block title %}Modifier mes mots de passe | {{ parent() }}{% endblock %}
{% block body %} {% block body %}
<div class="min-h-screen bg-bg-primaire flex items-center justify-center p-4 font-sora"> <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">
<div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border-t-4 border-bouton">
<h1 class="font-caveat text-4xl text-text mb-12 text-center"> <h1 class="font-caveat text-4xl text-text mb-12 text-center">
Modifier le mot de passe de mon espace kaznaute Modifier le mot de passe de mon espace kaznaute
@@ -13,29 +12,35 @@
{{ form_start(form) }} {{ form_start(form) }}
<div class="space-y-6"> <div class="space-y-6">
{# Champ Ancien Mot de Passe #} {# Champ Ancien Mot de Passe #}
<div class="space-y-1"> <div class="flex flex-col gap-1.5">
{{ form_label(form.oldPassword, 'Mon mot de passe actuel', { {{ form_label(form.oldPassword, 'Mon mot de passe actuel', {
'label_attr': {'class': 'block text-sm font-semibold text-text'} 'label_attr': {'class': 'block text-sm font-semibold text-text'}
}) }} }) }}
{{ form_widget(form.oldPassword, { {{ form_widget(form.oldPassword, {
'attr': { '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', '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' '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"> <div class="text-red-500 text-xs mt-1 italic">
{{ form_errors(form.oldPassword) }} {{ form_errors(form.oldPassword) }}
</div> </div>
{% endif %}
</div> </div>
<hr class="border-gris-clair/50">
{# Champs Nouveau Mot de Passe #} {# Champs Nouveau Mot de Passe #}
<div class="space-y-6"> <div class="space-y-6">
{# Affichage d'un message d'erreur si les deux champs ne correspondent pas #} {# 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"> <div class="text-red-500 text-xs italic">
{{ form_errors(form.newPassword) }} {{ form_errors(form.newPassword) }}
</div> </div>
{% endif %}
<div class="flex flex-col gap-1.5"> <div class="flex flex-col gap-1.5">
{{ form_label(form.newPassword.first, 'Mon nouveau mot de passe', { {{ form_label(form.newPassword.first, 'Mon nouveau mot de passe', {
@@ -47,9 +52,11 @@
'placeholder':'Saisissez un nouveau mot de passe' 'placeholder':'Saisissez un nouveau mot de passe'
} }
}) }} }) }}
{% if form_errors(form.newPassword.first) %}
<div class="text-red-500 text-xs italic"> <div class="text-red-500 text-xs italic">
{{ form_errors(form.newPassword.first) }} {{ form_errors(form.newPassword.first) }}
</div> </div>
{% endif %}
</div> </div>
<div class="flex flex-col gap-1.5"> <div class="flex flex-col gap-1.5">
@@ -66,9 +73,9 @@
</div> </div>
{# Bouton de validation #} {# Bouton de validation #}
<div class="flex justify-center pt-12"> <div class="flex justify-center pt-12 pb-2">
<button type="submit" <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"> 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 Mettre à jour mon mot de passe
</button> </button>
</div> </div>
@@ -76,5 +83,4 @@
{{ form_end(form) }} {{ form_end(form) }}
</div> </div>
</div>
{% endblock %} {% endblock %}