75 lines
3.6 KiB
Twig
75 lines
3.6 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% 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">
|
|
|
|
<h1 class="font-caveat text-4xl text-text mb-6 text-center">
|
|
Sécurité du compte
|
|
</h1>
|
|
|
|
{{ form_start(form) }}
|
|
<div class="space-y-4">
|
|
{# Champ Ancien Mot de Passe #}
|
|
<div class="space-y-1">
|
|
{{ form_label(form.oldPassword, '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'}
|
|
}) }}
|
|
|
|
{# Affichage message pour les erreurs de saisie de l'ancien mot de passe #}
|
|
<div class="text-red-500 text-xs mt-1 italic">
|
|
{{ form_errors(form.oldPassword) }}
|
|
</div>
|
|
</div>
|
|
|
|
{# Champs Nouveau Mot de Passe #}
|
|
<div class="space-y-4 pt-2">
|
|
{# Affichage de l'erreur si les deux champs ne correspondent pas #}
|
|
<div class="text-red-500 text-xs italic">
|
|
{{ form_errors(form.newPassword) }}
|
|
</div>
|
|
<div class="space-y-1">
|
|
{{ form_label(form.newPassword.first, '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 transition-shadow'}
|
|
}) }}
|
|
|
|
{# Affichage de l'erreur de longueur (min 8 caractères) #}
|
|
<div class="text-red-500 text-xs mt-1 italic">
|
|
{{ form_errors(form.newPassword.first) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
{{ form_label(form.newPassword.second, 'Confirmer le 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 transition-shadow'}
|
|
}) }}
|
|
</div>
|
|
|
|
<div class="text-red-500 text-xs mt-1">
|
|
{{ form_errors(form.newPassword) }}
|
|
</div>
|
|
</div>
|
|
|
|
{# Bouton de validation #}
|
|
<button type="submit"
|
|
class="w-full bg-bouton hover:bg-bouton-hover text-text font-bold py-3 rounded-lg shadow-md transition-colors mt-6">
|
|
Mettre à jour mon mot de passe
|
|
</button>
|
|
</div>
|
|
{{ form_end(form) }}
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|