81 lines
4.0 KiB
Twig
81 lines
4.0 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-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'
|
|
}
|
|
}) }}
|
|
|
|
{# 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-6">
|
|
{# Affichage d'un message d'erreur si les deux champs ne correspondent pas #}
|
|
<div class="text-red-500 text-xs italic">
|
|
{{ form_errors(form.newPassword) }}
|
|
</div>
|
|
|
|
<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="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>
|
|
</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>
|
|
</div>
|
|
{{ form_end(form) }}
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|