feat: adds nav on account page

assets/styles/_clickables.scss

@@ -1,6 +1,21 @@
+.clickable{
+  cursor:pointer;
+}
+a{
+  @extend .clickable;
+  color: $primary_color;
+  &:hover{
+    color: $primary_color_darker;
+  }
+}
 button{
+  @extend .clickable;
+
   padding: 1rem 2rem;
   border: solid 1px $bg_color;
   background: $primary_color;
   border-radius: 0.25rem;
+  &:hover{
+    background: $primary_color_darker;
+  }
 }

assets/styles/_variables.scss

@@ -1,3 +1,4 @@
 $bg_color:lightgray;
 $bg_main_color: white;
 $primary_color: #98c87e;
+$primary_color_darker: #537b3d;

composer.json

@@ -7,6 +7,7 @@
         "php": ">=8.1",
         "ext-ctype": "*",
         "ext-iconv": "*",
+        "amphp/http-client": "^4.2.1",
         "doctrine/dbal": "^3",
         "doctrine/doctrine-bundle": "^2.12",
         "doctrine/doctrine-migrations-bundle": "^3.3",

config/packages/translation.yaml

@@ -1,5 +1,5 @@
 framework:
-    default_locale: en
+    default_locale: fr
     translator:
         default_path: '%kernel.project_dir%/translations'
         fallbacks:

migrations/Version20240716084111.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 Version20240716084111 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
+
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+
+    }
+}

src/Controller/AccountController.php

@@ -15,4 +15,10 @@ class AccountController extends AbstractController
             'controller_name' => 'AccountController',
         ]);
     }
+#[Route('/account/history', name: 'app_account_history')]
+    public function history(): Response
+    {
+        return $this->render('account/history.html.twig', [
+        ]);
+    }
 }

src/Entity/User.php

@@ -21,7 +21,7 @@ class User implements UserInterface, PasswordAuthenticatedUserInterface
     #[ORM\Column(length: 180, unique: true)]
     private ?string $email = null;
 
-    #[ORM\Column(length: 500)]
+    #[ORM\Column(length: 500, nullable: true)]
     private ?string $description = null;
 
     #[ORM\Column]

templates/account/base.html.twig

@@ -0,0 +1,12 @@
+{% extends 'base.html.twig' %}
+
+
+{% block title %}Votre compte{% endblock %}
+
+{% block body %}
+    <div id="account_main">
+    {% include 'account/nav.html.twig' %}
+    {% block account_body %}{% endblock %}
+    </div>
+
+{% endblock body %}

templates/account/history.html.twig

@@ -0,0 +1,22 @@
+{% extends 'account/base.html.twig' %}
+
+{% block title %}Votre historique{% endblock %}
+
+{% block account_body %}
+        <div id="account_history">
+
+            <h1>
+                Mon compte
+            </h1>
+            <p>
+                Page historique
+            </p>
+            <article>
+                <h1>Votre historique d'actions</h1>
+                <p>
+                    Blah blah blah.
+                </p>
+            </article>
+        </div>
+    </div>
+{% endblock account_body %}

templates/account/index.html.twig

@@ -1,43 +1,23 @@
-{% extends 'base.html.twig' %}
+{% extends 'account/base.html.twig' %}
 
 {% block title %}Votre compte{% endblock %}
 
-{% block body %}
+{% block account_body %}
-    <style>
-			.example-wrapper {
-				margin: 1em auto;
-				max-width: 800px;
-				width: 95%;
-				font: 18px/1.5 sans-serif;
-			}
 
-			.example-wrapper code {
+    <div id="account_home">
-				background: #F5F5F5;
-				padding: 2px 6px;
-			}
-    </style>
-    <div class="example-wrapper">
-        <div id="account">
 
-            <h1>
+        <h1>
-                Mon compte
+            Mon compte
-            </h1>
+        </h1>
+        <p>
+            Coucou!
+        </p>
+
+        <footer>
             <p>
-                Coucou!
+                <a href="{{ path('app_logout') }}">Logout</a>
             </p>
-            <menu>
+        </footer>
-                Un menu
-                <ul>
-                    <li>un choix</li>
-                    <li>un autre</li>
-                    <li>un bidule</li>
-                </ul>
-            </menu>
-            <footer>
-                <p>
-                    <a href="{{ path('app_logout') }}">Logout</a>
-                </p>
-            </footer>
-        </div>
     </div>
-{% endblock body %}
+    </div>
+{% endblock account_body %}

templates/account/nav.html.twig

@@ -0,0 +1,12 @@
+<menu>
+    {#    Navigation de l'espace utilisateur #}
+    <ul>
+        <li>
+            <a href="{{ path('app_account_history') }}">
+            Historique
+            </a>
+        </li>
+        <li>un autre</li>
+        <li>un bidule</li>
+    </ul>
+</menu>

templates/account_nop/index.html.twig

@@ -1,43 +0,0 @@
-{% extends 'base.html.twig' %}
-
-{% block title %}Votre compte{% endblock %}
-
-{% block body %}
-    <style>
-			.example-wrapper {
-				margin: 1em auto;
-				max-width: 800px;
-				width: 95%;
-				font: 18px/1.5 sans-serif;
-			}
-
-			.example-wrapper code {
-				background: #F5F5F5;
-				padding: 2px 6px;
-			}
-    </style>
-    <div class="example-wrapper">
-        <div id="account">
-
-            <h1>
-                Mon compte
-            </h1>
-            <p>
-                Coucou!
-            </p>
-            <menu>
-                Un menu
-                <ul>
-                    <li>un choix</li>
-                    <li>un autre</li>
-                    <li>un bidule</li>
-                </ul>
-            </menu>
-            <footer>
-                <p>
-                    <a href="{{ path('app_logout') }}">Logout</a>
-                </p>
-            </footer>
-        </div>
-    </div>
-{% endblock body %}

templates/common/nav.html.twig

@@ -1,13 +1,14 @@
 <div id="nav_menu">
     <nav>
+            <a href="{{path('app_index')}}">Accueil</a>
         {% if app.user %}
             <div class="mb-3">
                 You are logged in as
-                <a href="{{path('account')}}">Account</a>
+                <a class="account-link" href="{{path('app_account')}}">{{ app.user.userIdentifier }}</a>
-                {{ app.user.userIdentifier }}, <a href="{{ path('app_logout') }}">Logout</a>
+                , <a href="{{ path('app_logout') }}">Logout</a>
             </div>
         {% else %}
-            <a href="{{path('app_login')}}">Login</a>
+            <a href="{{path('app_login')}}">{{ 'user.login'|trans }}</a>
             <a href="{{path('app_register')}}">Register</a>
         {% endif %}
 {#        <a href="{{path('admin')}}">Admin</a>#}

translations/messages.en.yaml

@@ -0,0 +1,11 @@
+common:
+  homepage: Homepage
+pages:
+  app_index:
+    title: Hello!
+    subtitle: This friendly message is coming from your controller.
+user:
+  # id is user.login
+  login: Login
+  logout: Logout
+  register: Register

translations/messages.fr.yaml

@@ -0,0 +1 @@
+