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

config/packages/tailwind.yaml

@@ -0,0 +1,2 @@
+symfonycasts_tailwind:
+    input_css: '%kernel.project_dir%/assets/styles/app.css'

config/services.yaml

@@ -1,3 +1,6 @@
+parameters:
+    images_directory: '%kernel.project_dir%/public/uploads/images'
+
 services:
 # configuration par défaut pour les services
     _defaults:
@@ -12,3 +15,8 @@ services:
             $kazApiClient: '@kaz_api.client'
             $apiUser: '%env(KAZ_API_USER)%'
             $apiPassword: '%env(KAZ_API_PASSWORD)%'
+
+    # Gestion de l'enregistrement de la photo de profil
+    App\Service\FileUploader:
+        arguments:
+            $targetDirectory: '%images_directory%'

migrations/Version20260326214353.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20260326214353 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE "user" ADD photo VARCHAR(255) DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE "user" DROP photo');
+    }
+}

migrations/Version20260326231417.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20260326231417 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE "user" ADD telephone VARCHAR(20) DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE "user" DROP telephone');
+    }
+}

src/Controller/UserController.php

@@ -3,14 +3,18 @@
 namespace App\Controller;
 
 use App\Form\ChangePasswordType;
+use App\Form\UserProfileType;
+use App\Service\FileUploader;
 use App\Service\KazApiService;
 use Doctrine\ORM\EntityManagerInterface;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\Form\FormError;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\PasswordHasher\Hasher\UserPasswordHasherInterface;
 use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\Security\Http\Attribute\IsGranted;
 use Symfony\Contracts\HttpClient\Exception\ClientExceptionInterface;
 use Symfony\Contracts\HttpClient\Exception\DecodingExceptionInterface;
 use Symfony\Contracts\HttpClient\Exception\RedirectionExceptionInterface;
@@ -33,32 +37,73 @@ class UserController extends AbstractController
      * @throws TransportExceptionInterface
      */
 
-//    #[Route('/user/{email}', name: 'app_user', methods: ['GET'])]
-//    public function index(string $email, KazApiService $apiClient): Response
-//    {
-//        $exist = $apiClient->getUserData($email);
-//
-//        return $this->render('user/index.html.twig', [
-//            'exist' => $exist,
-//        ]);
-//    }
+#    #[Route('/user/{email}', name: 'app_user', methods: ['GET'])]
+#    public function index(string $email, KazApiService $apiClient): Response
+#    {
+#        $exist = $apiClient->getUserData($email);
+#
+#        return $this->render('user/index.html.twig', [
+#            'exist' => $exist,
+#        ]);
+#    }
 
-    #[Route('/mon-profil', name: 'app_user', methods: ['GET'])]
-    public function index(KazApiService $apiClient): Response
-    {
-        // Récupération de l'utilisateur actuellement connecté
+/* TODO : Param l'API avec un Serializer pour la lecture du fichier JSON ? */
+    #[Route('/mon-profil', name: 'app_user', methods: ['GET', 'POST'])]
+    #[IsGranted('ROLE_USER')]
+    public function showProfile(
+        Request $request,
+        EntityManagerInterface $entityManager,
+        FileUploader $fileUploader # <-- On injecte ton super service ici
+    ): Response {
+        # Récupération de l'utilisateur actuellement connecté
         $user = $this->getUser();
 
-        // Utilisation de son email pour interroger l'API
-        $userData = $apiClient->getUserData($user->getUserIdentifier());
+        /* Utilisation des fixtures pour vérifier la mise en page.
+        TODO: modifier pour que ça communique avec l'API */
 
+        # Création du formulaire lié à l'utilisateur connecté
+        $form = $this->createForm(UserProfileType::class, $user);
+        $form->handleRequest($request);
+
+        # Traitement si l'utilisateur clique sur "Valider"
+        if ($form->isSubmitted() && $form->isValid()) {
+
+            /** @var UploadedFile $imageFile */
+            $imageFile = $form->get('image')->getData();
+
+            if ($imageFile) {
+                # Suppression de l'ancienne photo du serveur
+                $fileUploader->delete($user->getPhoto());
+
+                # Dépot de la nouvelle photo
+                $newFilename = $fileUploader->upload($imageFile);
+
+                # Mise à jour de l'utilisateur avec le nouveau nom
+                $user->setPhoto($newFilename);
+            }
+
+            # Sauvegarde en base de données
+            $entityManager->flush();
+
+            # Message de confirmation et rechargement de la page
+            $this->addFlash('success', 'Votre profil a été mis à jour avec succès !');
+
+            return $this->redirectToRoute('app_user');
+        }
+
+        # Affichage de la page
         return $this->render('user/index.html.twig', [
-            'userData' => $userData,
+            'form' => $form->createView(),
+            'userData' => $user, # TODO : Mettre $userData quand connexion avec API OK
         ]);
     }
 
     #[Route('/mot-de-passe', name: 'app_user_edit_password', methods: ['GET', 'POST'])]
-    public function editPassword(Request $request, UserPasswordHasherInterface $hasher, EntityManagerInterface $entityManager): Response
+    public function editPassword(
+        Request $request,
+        UserPasswordHasherInterface $hasher,
+        EntityManagerInterface $entityManager
+    ): Response
     {
         # Récupération de l'utilisateur actuellement connecté
         $user = $this->getUser();

src/Entity/User.php

@@ -3,6 +3,7 @@
 namespace App\Entity;
 
 use App\Repository\UserRepository;
+use Doctrine\DBAL\Types\Types;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Bridge\Doctrine\Validator\Constraints\UniqueEntity;
 use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
@@ -66,6 +67,12 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     #[ORM\Column(length: 255)]
     private ?string $firstName = null;
 
+    #[ORM\Column(length: 255, nullable: true)]
+    private ?string $photo = null;
+
+    #[ORM\Column(length: 20, nullable: true)]
+    private ?string $telephone = null;
+
     public function getId(): ?Uuid
     {
         return $this->id;
@@ -275,4 +282,28 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
 
         return $this;
     }
+
+    public function getPhoto(): ?string
+    {
+        return $this->photo;
+    }
+
+    public function setPhoto(?string $photo): static
+    {
+        $this->photo = $photo;
+
+        return $this;
+    }
+
+    public function getTelephone(): ?string
+    {
+        return $this->telephone;
+    }
+
+    public function setTelephone(?string $telephone): static
+    {
+        $this->telephone = $telephone;
+
+        return $this;
+    }
 }

src/Form/ChangePasswordType.php

@@ -17,26 +17,30 @@ class ChangePasswordType extends AbstractType
     {
         $builder
             ->add('oldPassword', PasswordType::class, [
-                'label' => 'Ancien mot de passe',
+                'label' => 'Mot de passe actuel',
                 'mapped' => false,
+                # Mise en place de contraintes dans la saisie du mot de passe
+                'constraints' => [
+                    new NotBlank(message: 'Veuillez saisir votre mot de passe actuel'),
+                ],
             ])
             ->add('newPassword', RepeatedType::class, [
                 'type' => PasswordType::class,
+                'invalid_message' => 'Les deux mots de passe doivent être identiques.',
                 'mapped' => false,
-                'first_options' => ['label' => 'Nouveau mot de passe'],
-                'second_options' => ['label' => 'Confirmer mot de passe'],
-
                 # Mise en place de contraintes dans la saisie du mot de passe
                 'constraints' => [
-                    new NotBlank([
-                        'message' => 'Veuillez saisir un mot de passe',
-                    ]),
-                    new Length([
-                        'min' => 8,
-                        'minMessage' => 'Votre mot de passe doit faire au moins {{ limit }} caractères',
-                        'max' => 4096,
-                    ]),
+                    new NotBlank(
+                        message: 'Veuillez saisir un mot de passe'
+                    ),
+                    new Length(
+                        min: 8,
+                        minMessage: 'Votre mot de passe doit faire au moins {{ limit }} caractères',
+                        max: 4096,
+                    ),
                 ],
+                'first_options' => ['label' => 'Nouveau mot de passe'],
+                'second_options' => ['label' => 'Confirmer le nouveau mot de passe'],
             ])
         ;
     }

src/Form/UserProfileType.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace App\Form;
+
+use App\Entity\User;
+use Symfony\Component\Form\Extension\Core\Type\TelType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\EmailType;
+use Symfony\Component\Form\Extension\Core\Type\FileType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Validator\Constraints\Image;
+use Symfony\Component\Validator\Constraints\Length;
+use Symfony\Component\Validator\Constraints\Regex;
+
+class UserProfileType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('firstName', TextType::class, [
+                'label' => 'Prénom',
+                'disabled' => true,
+            ])
+            ->add('lastName', TextType::class, [
+                'label' => 'Nom',
+                'disabled' => true,
+            ])
+            ->add('email', EmailType::class, [
+                'label' => 'E-mail',
+                'disabled' => true,
+            ])
+            ->add('emailDeSecours', EmailType::class, ['label' => 'E-mail de secours'])
+            ->add('telephone', TelType::class, [
+                'label'=>'Téléphone',
+                'required' => false,
+                'attr' => [
+                    'placeholder'=>'06 00 00 00 00',
+                    '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'
+                ],
+                'constraints' => [
+                    new Regex(
+                        pattern: '/^[0-9\+\s\.\-\(\)]+$/',
+                        message: 'Le numéro de téléphone contient des caractères non valides'
+                    ),
+                    new Length(
+                        max: 20,
+                        maxMessage: 'Le numéro est trop long (maximum {{ limit }} caractères)'
+                    ),
+                ],
+            ])
+            ->add('image', FileType::class, [
+                'label' => 'Ma photo de profil',
+                'mapped' => false,
+                'required' => false,
+                'constraints' => [
+                    new Image(
+                        maxSize: '2M',
+                        extensions: ['jpg', 'jpeg', 'png'],
+                        extensionsMessage: 'Veuillez déposer une image JPG, JPEG ou PNG valide',)
+                ],
+            ])
+        ;
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'data_class' => User::class,
+        ]);
+    }
+}

src/Services/FileUploader.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Service;
+
+use Symfony\Component\HttpFoundation\File\Exception\FileException;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\String\Slugger\SluggerInterface;
+
+class FileUploader
+{
+    // On utilise la promotion de constructeur (PHP 8) : ultra moderne et concis
+    public function __construct(
+        private string $targetDirectory,
+        private SluggerInterface $slugger,
+    ) {
+    }
+
+    public function upload(UploadedFile $file): string
+    {
+        $originalFilename = pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME);
+        $safeFilename = $this->slugger->slug($originalFilename);
+        $fileName = $safeFilename . '-' . uniqid() . '.' . $file->guessExtension();
+
+        try {
+            $file->move($this->getTargetDirectory(), $fileName);
+        } catch (FileException $e) {
+            // Ici tu peux logguer l'erreur si besoin
+            throw new \Exception('Erreur lors du transfert de l\'image : ' . $e->getMessage());
+        }
+
+        return $fileName;
+    }
+
+    public function delete(?string $fileName): void
+    {
+        if ($fileName) {
+            $filePath = $this->getTargetDirectory() . '/' . $fileName;
+            if (file_exists($filePath)) {
+                unlink($filePath);
+            }
+        }
+    }
+
+    public function getTargetDirectory(): string
+    {
+        return $this->targetDirectory;
+    }
+}

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">
+
+    {% 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>
-        </header>
-        {# contenu principal de chaque page #}
-        <main>
-            <div>
-                {% block body %}
-                {% endblock body %}
+
+                        {# 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">

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 :

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

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'}}) }}
+                <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>
 
-                <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">
+                    <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>

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