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

feat: mise en page de la page "infos perso" et "gérer mes mots de passe"

Browse Source
This commit is contained in:
maurine
2026-03-27 00:56:50 +01:00
parent ba84b49134
commit 0e5351b7f4
15 changed files with 540 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,29 +3,67 @@
{% block title %}Modifier mes mots de passe | {{ parent() }}{% endblock %}
{% block body %}
<div class="min-h-screen bg-bg-primary flex items-center justify-center p-4">
<div class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border-t-4 border-brand-teal">
<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-title text-4xl text-brand-dark mb-6 text-center">
<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>
{{ form_label(form.oldPassword, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
{{ form_widget(form.oldPassword, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-teal focus:border-transparent outline-none transition-all'}}) }}
{{ form_errors(form.oldPassword) }}
<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">
{{ form_row(form.newPassword.first, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-teal outline-none'}}) }}
{{ form_row(form.newPassword.second, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-brand-teal outline-none'}}) }}
<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>
<button type="submit" class="w-full bg-brand-teal text-brand-dark font-bold py-3 rounded-lg hover:bg-opacity-90 transition-colors shadow-md mt-6">
{# 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>