Add user profile page

assets/styles/app.scss

@@ -122,13 +122,13 @@ button[type=submit]{
   padding: 10px;
 }
 
-.capsule-title {
+.row-title {
   text-decoration: none;
   text-transform: uppercase;
   font-size: 18px;
 }
 
-.capsule-title:hover {
+.row-title:hover {
   color: rgba(255,255,255,.75);
 }
 
@@ -139,13 +139,13 @@ button[type=submit]{
 .standard-button {
   line-height: 40px;
   margin: 30px 0 0 0;
-  padding: 0 20px;
+  padding: 0.5em 2em;
   font-size: 14px;
   text-transform: uppercase;
   font-weight: bold;
   border: none;
   color: #FFF !important;
-  border-radius: 2px;
+  border-radius: 3px;
   background: #49AD9A;
   box-shadow: 0 -2px 0 #3B8C7E inset;
 }
@@ -171,3 +171,9 @@ button[type=submit]{
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+.profile-block {
+  color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(0, 0, 0, 0);
+  background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2));
+}

src/Controller/UserController.php

+<?php
+
+namespace App\Controller;
+
+use App\Entity\User;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class UserController extends AbstractController
+{
+    /**
+     * @Route("/profile", name="show_profile")
+     */
+    public function showProfile(): Response
+    {
+        $current_user = $this->getUser();
+
+        if (! $current_user instanceof User) {
+            return $this->redirectToRoute('app_logout');
+        }
+
+        return $this->render('user/profile.html.twig', [
+            'user' => $current_user
+        ]);
+    }
+
+//    /**
+//     * @Route("/edit_profile", name="edit_profile")
+//     */
+//    public function editProfile(Request $request): Response
+//    {
+//        $form = $this->createForm(EditUserProfileFormType::class);
+//        $form->handleRequest($request);
+//        $current_user = $this->getUser();
+//
+//        if (! $current_user instanceof User) {
+//            return $this->redirectToRoute('app_logout');
+//        }
+//
+//        if ($form->isSubmitted() && $form->isValid()) {
+//        }
+//
+//        return $this->render('user/edit_profile.html.twig', [
+//            'editUserProfileForm' => $form->createView()
+//        ]);
+//    }
+
+//    /**
+//     * @Route("/edit_password", name="edit_password")
+//     */
+//    public function editPassword(Request $request): Response
+//    {
+//        $form = $this->createForm(EditPasswordFormType::class);
+//        $form->handleRequest($request);
+//        $current_user = $this->getUser();
+//
+//        if (! $current_user instanceof User) {
+//            return $this->redirectToRoute('app_logout');
+//        }
+//
+//        return $this->render('user/edit_password.html.twig', [
+//            'editPasswordForm' => $form->createView()
+//        ]);
+//    }
+}

templates/layout.html.twig

@@ -25,6 +25,7 @@
         {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
           <div id="user-block">
             <div id="user-block-nom">{{ app.user.firstName }} {{ app.user.lastName }}</div>
+            <a href="{{ path('show_profile') }}" class="text-decoration-none fs-5">My profile</a>
             <form>
               <button class="btn btn-primary" formaction="/logout">
                 {{ 'general.log_out'|trans }}

templates/user/profile.html.twig

+{% extends 'layout.html.twig' %}
+
+{% block title %}
+    {{ 'user.profile.title'|trans }}
+{% endblock %}
+
+{% block body %}
+    <div class="row gx-0">
+        <div class="row-title-box">
+            <h3 class="row-title">
+                {{ 'user.profile.title'|trans }}
+            </h3>
+        </div>
+    </div>
+
+    <div class="d-flex flex-column flex-md-row justify-content-center align-items-center">
+        <div class="profile-block d-flex flex-row ps-3 ps-md-5 pe-3 pe-md-5 pt-4 pb-3 fw-normal me-0 me-md-5">
+            <div class="pe-3 pe-md-4 text-nowrap">
+                <p class="">
+                    {{ 'user.firstname'|trans }}
+                </p>
+                <p class="">
+                    {{ 'user.lastname'|trans }}
+                </p>
+                <p class="">
+                    {{ 'user.email'|trans }}
+                </p>
+            </div>
+            <div class="text-white">
+                <p class="text-capitalize">{{ app.user.firstName }}</p>
+                <p class="text-capitalize">{{ app.user.lastName }}</p>
+                <p>{{ app.user.email }}</p>
+            </div>
+        </div>
+
+
+        <div class="d-flex flex-column justify-content-center mt-2 mt-md-0">
+            <a href="/edit_profile" class="m-2 m-md-3 standard-button text-decoration-none text-center">
+                    {{ 'user.profile.edit'|trans }}
+            </a>
+            <a href="/edit_password" class="m-2 m-md-3 standard-button text-decoration-none text-center">
+                    {{ 'user.password.edit'|trans }}
+            </a>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file

translations/messages.en.yaml

@@ -56,3 +56,13 @@ capsule:
 
 project:
   already_exists: Project capsule_name already exists so the capsule could not be created
+
+user:
+  firstname: First name
+  lastname: Last name
+  email: Email
+  profile:
+    title: My profile
+    edit: Edit profile
+  password:
+    edit: Edit password
\ No newline at end of file

translations/messages.fr.yaml

 general:
-  email: Courriel
+  email: E-mail
   password: Mot de passe
   sign_in: Se connecter
   log_out: Se déconnecter
@@ -55,3 +55,13 @@ capsule:
 
 project:
   already_exists: Le projet capsule_name existe déjà. La capsule n'a pas pu être créée
+
+user:
+  firstname: Prénom
+  lastname: Nom
+  email: E-mail
+  profile:
+    title: Mon profil
+    edit: Modifier mon profil
+  password:
+    edit: Modifier mon mot de passe
\ No newline at end of file