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

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

@@ -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 %}