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

2026-03-27 00:56:50 +01:00
parent ba84b49134
commit 0e5351b7f4
15 changed files with 540 additions and 64 deletions
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -4,7 +4,7 @@
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
-        <title>{% block title %}Association KAZ{% endblock %}</title>
+        <title>{% block title %}Association Kaz{% endblock %}</title>
        <link rel="icon" href="{{ asset("img/logo.svg") }}">

        {% block stylesheets %}
@@ -17,20 +17,53 @@
    </head>

    <body>
-    {# entête du site #}
-        <header>
-            <div class="container">
-                {{ include('_navbar.html.twig') }}
-            </div>
-        </header>
-        {# contenu principal de chaque page #}
-        <main>
-            <div>
-                {% block body %}
-                {% endblock body %}
-            </div>
+
+    {% block navbar %}
+        {{ include('_navbar.html.twig') }}
+    {% endblock %}
+
+    {# Contenu principal #}
+    <main class="flex-grow">
+        {# Affichage des messages flash (Succès ou Erreur) #}
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
+            {% for label, messages in app.flashes %}
+                {% for message in messages %}
+                    <div class="flex items-center p-4 mb-4 rounded-lg border shadow-sm
+                        {{ label == 'success' ? 'bg-green-50 border-green-200 text-green-800' :
+                    label == 'error' ? 'bg-red-50 border-red-200 text-red-800' :
+                    label == 'warning' ? 'bg-yellow-50 border-yellow-200 text-yellow-800' :
+                    'bg-blue-50 border-blue-200 text-blue-800' }}"
+                         role="alert">
+
+                        {# Icône dynamique #}
+                        <svg class="flex-shrink-0 w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                            {% if label == 'success' %}
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                            {% else %}
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
+                            {% endif %}
+                        </svg>
+
+                        <div class="text-sm font-bold">
+                            {{ message }}
+                        </div>
+
+                        {# Bouton Fermer #}
+                        <button type="button"
+                                onclick="this.parentElement.remove()"
+                                class="text-lg font-bold hover:opacity-70 transition-opacity ml-4">
+                            &times;
+                        </button>
+                    </div>
+                {% endfor %}
+            {% endfor %}
+        </div>
+
+        {# Contenu principal de chaque page #}
+        {% block body %}{% endblock %}
+
        </main>
-        {# pied-de-page du site #}
+        {# Gestion du pied-de-page du site #}
        <footer class="bg-white border-t border-gris-clair py-6 sm:py-8 mt-auto w-full font-sora">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="text-sm text-gris-fonce flex items-center gap-2 justify-center md:justify-start">
--- a/templates/bundles/TwigBundles/Exception/error.html.twig
+++ b/templates/bundles/TwigBundles/Exception/error.html.twig
--- a/templates/home/home.html.twig
+++ b/templates/home/home.html.twig
@@ -1,10 +1,10 @@
 {% extends 'base.html.twig' %}

-{% block title %}Accueil | Association KAZ{% endblock %}
+{% block title %}Accueil | {{ parent() }}{% endblock %}

 {% block body %}
    <div class="min-h-screen bg-bg-primaire py-8 w-full font-sora">
-        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">

            {# Bloc "message d'accueil" #}
            <h1 class="text-4xl font-caveat text-text mb-6 text-center sm:text-center">
@@ -16,7 +16,8 @@
                    Bienvenue sur ton espace kaznaute <span class="text-bouton">{{ app.user ? app.user.userIdentifier : 'visiteur' }}</span> !
                </h2>

-                {# Zone réservée pour les futures données de l'API #}
+                {# Zone réservée pour les futures données de l'API
+                TODO : Gérer les données de l'API #}
                <div class="bg-bouton/10 border border-bouton/30 rounded-lg p-5">
                    <h3 class="font-semibold text-title mb-3 flex items-center gap-2">
                        Votre abonnement actuellement :
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -27,9 +27,6 @@
        {% endif %}

        <form method="post" class="space-y-5">
-            {# ajout du token csrf pour 2 fois plus de plaisir en toute sécurité #}
-            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
-
            {# champ adresse-mail #}
            <div class="space-y-1">
                <label for="username" class="block text-sm font-semibold text-text">
@@ -60,6 +57,7 @@
            </div>

            <div class="flex flex-col sm:flex-row gap-4 pt-2">
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                <button type="submit"
                        class="flex-1 py-3 bg-bouton hover:bg-bouton-hover text-text font-bold rounded-lg shadow transition-colors">
                    Se connecter
--- a/templates/user/edit_password.html.twig
+++ b/templates/user/edit_password.html.twig
@@ -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>
--- a/templates/user/index.html.twig
+++ b/templates/user/index.html.twig
@@ -1,2 +1,135 @@
-{# templates/hellp.html.twig #}
-<h1>Hello ! {{ name }}</h1>
+{% extends 'base.html.twig' %}
+
+{% block title %}Accueil | {{ parent() }}{% endblock %}
+
+{% block body %}
+    <div class="min-h-screen bg-bg-primaire py-8 w-full font-sora">
+
+        {{ form_start(form, {'attr': {'class': 'max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-3 gap-8'}}) }}
+
+        {# TODO: voir si c'est pertinent avec l'API et s'il y a l'utilité d'une photo de profil #}
+         {# Gestion de la colone avec le choix de la photo de profil #}
+        <div class="flex flex-col text-text items-center">
+
+             {# Affichage de la photo de profil #}
+            <div class="w-full md:w-64 flex-shrink-0 mt-20">
+                <div class="border-2 border-black p-1 bg-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
+                    {% if userData.photo %}
+                        <img src="{{ asset('uploads/images/' ~ userData.photo) }}"
+                             alt="Photo de profil"
+                             class="w-full aspect-[4/3] object-cover">
+                    {% else %}
+                        <div class="w-full aspect-[4/3] bg-gray-50 flex items-center justify-center text-6xl">
+                            👤
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+
+            <p class="text-2xl text-title font-caveat mt-4"> Ma photo</p>
+
+             {# Gestion du dépôt d'un fichier image #}
+            <div class="w-full mt-2">
+                {{ form_label(form.image, 'Choisir un fichier', {
+                    'label_attr': {'class': 'block mb-2.5 text-sm font-medium text-gris-fonce'}
+                }) }}
+                {{ form_widget(form.image, {
+                    'attr': {
+                        'class': 'cursor-pointer bg-white border border-gris-clair text-text text-sm rounded-lg focus:outline-none focus:ring-1 focus:ring-bouton focus:border-bouton block w-full shadow-sm placeholder-gris-moyen file:mr-4 file:py-2.5 file:px-4 file:border-0 file:border-r file:border-gris-clair file:bg-gris-clair file:text-gris-fonce hover:file:bg-gris-moyen file:cursor-pointer transition-colors',
+                        'aria-describedby': 'file_input_help'
+                    }
+                }) }}
+                <p class="mt-1 text-sm text-gris-moyen" id="file_input_help">
+                    JPG, JPEG ou PNG (Taille max : 2Mo).
+                </p>
+            </div>
+        </div>
+
+        {# Gestion de la colonne avec les "infos persos" #}
+        <div class="md:col-span-2">
+            <h1 class="text-4xl font-caveat text-text mb-6 text-center sm:text-center">Mon profil</h1>
+            <h2 class="text-2xl font-caveat text-text mb-6 text-center sm:text-center">Mes informations personnelles</h2>
+
+            {# Gestion du formulaire qui regroupe toutes les infos perso #}
+            <div class="flex flex-col gap-6">
+
+                {# Champ NOM et Prénom #}
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="space-y-1">
+                        {{ form_label(form.firstName, 'NOM :', {
+                            'label_attr': {'class': 'block text-sm font-semibold text-text'}
+                        }) }}
+                        {{ form_widget(form.firstName, {
+                            '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'}
+                        }) }}
+                        {# Implémentation d'un message d'errer en cas de problème #}
+                        <div class="text-red-500 text-xs mt-1 italic font-sora">
+                            {{ form_errors(form.firstName) }}
+                        </div>
+                    </div>
+
+                    <div class="space-y-1">
+                        {{ form_label(form.lastName, 'Prénom :', {
+                            'label_attr': {'class': 'block text-sm font-semibold text-text'}
+                        }) }}
+                        {{ form_widget(form.lastName, {
+                            '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'}
+                        }) }}
+                        {# Implémentation d'un message d'errer en cas de problème #}
+                        <div class="text-red-500 text-xs mt-1 italic font-sora">
+                            {{ form_errors(form.lastName) }}
+                        </div>
+                    </div>
+                </div>
+
+                {# Champ Téléphone #}
+                <div class="space-y-1">
+                    {{ form_label(form.telephone, 'Numéro de téléphone', {
+                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
+                    }) }}
+                    {{ form_widget(form.telephone) }}
+                    {# Implémentation d'un message d'errer en cas de problème #}
+                    <div class="text-red-500 text-xs mt-1 italic">
+                        {{ form_errors(form.telephone) }}
+                    </div>
+                </div>
+
+                {# Champ E-mail #}
+                <div class="space-y-1">
+                    {{ form_label(form.email, 'E-mail :', {
+                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
+                    }) }}
+                    {{ form_widget(form.email, {
+                        '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'}
+                    }) }}
+                    {# Implémentation d'un message d'errer en cas de problème #}
+                    <div class="text-red-500 text-xs mt-1 italic font-sora">
+                        {{ form_errors(form.email) }}
+                    </div>
+                </div>
+
+                {# Champ E-mail de secours #}
+                <div class="space-y-1">
+                    {{ form_label(form.emailDeSecours, 'E-mail de secours :', {
+                        'label_attr': {'class': 'block text-sm font-semibold text-text'}
+                    }) }}
+                    {{ form_widget(form.emailDeSecours, {
+                        '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'}
+                    }) }}
+                    {# Implémentation d'un message d'errer en cas de problème #}
+                    <div class="text-red-500 text-xs mt-1 italic font-sora">
+                        {{ form_errors(form.emailDeSecours) }}
+                    </div>
+                </div>
+
+                <div class="flex flex-col sm:flex-row gap-4 pt-2">
+                    <button type="submit"
+                            class="flex-1 py-3 bg-bouton hover:bg-bouton-hover text-text font-bold rounded-lg shadow transition-colors">
+                        Valider
+                    </button>
+                </div>
+            </div>
+        </div>
+        {{ form_end(form) }}
+    </div>
+{% endblock %}