From 5b3549068b11828c3a16b8a493f8417718f9018e Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 30 Apr 2025 15:27:01 +0200
Subject: [PATCH 01/21] create login page

---
 public/site/controllers/site.php     | 44 ++++++++++++++-------------
 public/site/templates/login.json.php | 13 ++++++++
 public/site/templates/login.php      |  1 +
 src/App.vue                          |  4 +--
 src/router/routes.js                 | 45 +++++++++++++++-------------
 src/views/Login.vue                  | 23 ++++++++++++++
 6 files changed, 88 insertions(+), 42 deletions(-)
 create mode 100644 public/site/templates/login.json.php
 create mode 100644 public/site/templates/login.php
 create mode 100644 src/views/Login.vue

diff --git a/public/site/controllers/site.php b/public/site/controllers/site.php
index 73ff66a..ab60617 100644
--- a/public/site/controllers/site.php
+++ b/public/site/controllers/site.php
@@ -1,27 +1,31 @@
 <?php
 
 return function ($page, $kirby, $site) {
-  if (!$kirby->user()) {
-    go($site->panel()->url());
-  }
-  $data = $page->toArray();
-  $data['template'] = (string) $page->template();
-  $data['newInspirations'] = (bool) page('inspirations')->children()->findBy('new', 'true');
+  if (!$kirby->user() && $page->uri() != 'login') {
+    go('/login');
+  } else {
+    $data = $page->toArray();
+    $data['template'] = (string) $page->template();
+    $data['newInspirations'] = (bool) page('inspirations')->children()->findBy('new', 'true');
 
-  $userData = [
-    "role" => (string) $kirby->user()->role(),
-    "uuid" => (string) $kirby->user()->uuid()
-  ];
-
-  if ($kirby->user()->client()->exists() && $kirby->user()->client()->isNotEmpty()) {
-    $userData['client'] = [
-      "name" => (string) $kirby->user()->client()->toPage()->title(),
-      "uuid" => (string) $kirby->user()->client()->toPage()->uuid()
+    if ($kirby->user()) {
+      $userData = [
+        "role" => (string) $kirby->user()->role(),
+        "uuid" => (string) $kirby->user()->uuid()
+      ];
+    
+      if ($kirby->user()->client()->exists() && $kirby->user()->client()->isNotEmpty()) {
+        $userData['client'] = [
+          "name" => (string) $kirby->user()->client()->toPage()->title(),
+          "uuid" => (string) $kirby->user()->client()->toPage()->uuid()
+        ];
+      }
+    }
+  
+  
+    return [
+      'genericData' => $data,
+      'userData' => $userData ?? null
     ];
   }
-
-  return [
-    'genericData' => $data,
-    'userData' => $userData
-  ];
 };
\ No newline at end of file
diff --git a/public/site/templates/login.json.php b/public/site/templates/login.json.php
new file mode 100644
index 0000000..8c7cbe7
--- /dev/null
+++ b/public/site/templates/login.json.php
@@ -0,0 +1,13 @@
+<?php
+
+$specificData = [
+  "exampleField" => $page->exampleField(),
+  "exampleHardData" => 'Example hard value'
+];
+
+$pageData = array_merge($genericData, $specificData);
+
+echo json_encode([
+  "page" => $pageData,
+  "user" => $userData
+]);
\ No newline at end of file
diff --git a/public/site/templates/login.php b/public/site/templates/login.php
new file mode 100644
index 0000000..4ed6305
--- /dev/null
+++ b/public/site/templates/login.php
@@ -0,0 +1 @@
+<?php snippet('generic-template') ?>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 2bd1586..0afe36b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <h1 v-if="page" class="sr-only">{{ page.content.title }}</h1>
-  <div class="with-sidebar">
-    <Menu />
+  <div :class="{ 'with-sidebar': page?.template !== 'login' }">
+    <Menu v-if="page?.template !== 'login'" />
     <RouterView />
   </div>
 </template>
diff --git a/src/router/routes.js b/src/router/routes.js
index 59af90b..be32a81 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,60 +1,65 @@
-import Home from "../views/Home.vue";
-import Notifications from "../views/Notifications.vue";
-import Reunions from "../views/Reunions.vue";
-import Inspirations from "../views/Inspirations.vue";
-import Kanban from "../views/Kanban.vue";
-import Brief from "../views/Brief.vue";
-import DesignToLight from "../views/DesignToLight.vue";
+import Home from '../views/Home.vue';
+import Notifications from '../views/Notifications.vue';
+import Reunions from '../views/Reunions.vue';
+import Inspirations from '../views/Inspirations.vue';
+import Kanban from '../views/Kanban.vue';
+import Brief from '../views/Brief.vue';
+import DesignToLight from '../views/DesignToLight.vue';
+import Login from '../views/Login.vue';
 
 const routes = [
   {
-    path: "/",
+    path: '/',
     component: Home,
   },
   {
-    path: "/notifications",
+    path: '/login',
+    component: Login,
+  },
+  {
+    path: '/notifications',
     component: Notifications,
   },
   {
-    path: "/reunions",
+    path: '/reunions',
     component: Reunions,
   },
   {
-    path: "/inspirations",
+    path: '/inspirations',
     component: Inspirations,
   },
   {
-    path: "/design-to-light",
+    path: '/design-to-light',
     component: DesignToLight,
   },
   {
-    path: "/projects/:id",
+    path: '/projects/:id',
     component: Kanban,
   },
   {
-    path: "/projects/:id/client-brief",
+    path: '/projects/:id/client-brief',
     component: Brief,
   },
   {
-    path: "/projects/:id/extended-brief",
+    path: '/projects/:id/extended-brief',
     component: Brief,
   },
 
   // Redirections
   {
-    path: "/projects/:id/industrial-ideation",
+    path: '/projects/:id/industrial-ideation',
     redirect: (to) => {
       return (
-        "/projects/" +
+        '/projects/' +
         to.params.id +
-        "?dialog=industrial-ideation&comments=true"
+        '?dialog=industrial-ideation&comments=true'
       );
     },
   },
   {
-    path: "/projects/:id/proposal",
+    path: '/projects/:id/proposal',
     redirect: (to) => {
-      return "/projects/" + to.params.id + "?dialog=proposal&comments=true";
+      return '/projects/' + to.params.id + '?dialog=proposal&comments=true';
     },
   },
 ];
diff --git a/src/views/Login.vue b/src/views/Login.vue
new file mode 100644
index 0000000..2b304c9
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,23 @@
+<template>
+  <form
+    @submit.prevent="handleSubmit"
+    class="w-full h-full p-16 flex flex-col"
+    style="--row-gap: 1rem"
+  >
+    <input
+      type="text"
+      v-model="subject"
+      id="appointment-subject"
+      placeholder="Objet du rendez-vous"
+      class="w-full rounded-md border border-grey-200 px-16 py-12"
+      required
+    />
+    <label for="appointment-details" class="sr-only">Détails du projet</label>
+    <button @click="login" class="btn" type="submit">Soumettre</button>
+  </form>
+</template>
+<script setup>
+function login() {
+  console.log('test');
+}
+</script>

From de52c5e6becfe407dfa12e142493ca596786c015 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 30 Apr 2025 16:09:24 +0200
Subject: [PATCH 02/21] route /login managed through vue router

---
 public/site/controllers/site.php        | 44 +++++++++++--------------
 public/site/templates/projects.json.php | 10 +++++-
 src/router/router.js                    | 18 ++++++----
 src/router/routes.js                    |  1 +
 4 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/public/site/controllers/site.php b/public/site/controllers/site.php
index ab60617..7d2d7c2 100644
--- a/public/site/controllers/site.php
+++ b/public/site/controllers/site.php
@@ -1,31 +1,27 @@
 <?php
 
 return function ($page, $kirby, $site) {
-  if (!$kirby->user() && $page->uri() != 'login') {
-    go('/login');
-  } else {
-    $data = $page->toArray();
-    $data['template'] = (string) $page->template();
-    $data['newInspirations'] = (bool) page('inspirations')->children()->findBy('new', 'true');
+  $data = $page->toArray();
+  $data['template'] = (string) $page->template();
+  $data['newInspirations'] = (bool) page('inspirations')->children()->findBy('new', 'true');
 
-    if ($kirby->user()) {
-      $userData = [
-        "role" => (string) $kirby->user()->role(),
-        "uuid" => (string) $kirby->user()->uuid()
-      ];
-    
-      if ($kirby->user()->client()->exists() && $kirby->user()->client()->isNotEmpty()) {
-        $userData['client'] = [
-          "name" => (string) $kirby->user()->client()->toPage()->title(),
-          "uuid" => (string) $kirby->user()->client()->toPage()->uuid()
-        ];
-      }
-    }
-  
-  
-    return [
-      'genericData' => $data,
-      'userData' => $userData ?? null
+  if ($kirby->user()) {
+    $userData = [
+      "role" => (string) $kirby->user()->role(),
+      "uuid" => (string) $kirby->user()->uuid()
     ];
+  
+    if ($kirby->user()->client()->exists() && $kirby->user()->client()->isNotEmpty()) {
+      $userData['client'] = [
+        "name" => (string) $kirby->user()->client()->toPage()->title(),
+        "uuid" => (string) $kirby->user()->client()->toPage()->uuid()
+      ];
+    }
   }
+
+
+  return [
+    'genericData' => $data,
+    'userData' => $userData ?? null
+  ];
 };
\ No newline at end of file
diff --git a/public/site/templates/projects.json.php b/public/site/templates/projects.json.php
index cabb5c7..ba74b69 100644
--- a/public/site/templates/projects.json.php
+++ b/public/site/templates/projects.json.php
@@ -1,7 +1,15 @@
 <?php
 
+if (!$kirby->user()) {
+  return json_encode([
+    'page' => $genericData,
+    'user' => []
+  ]);
+}
+
 function getProjectData($project)
-{
+{  
+
     $data = [
     'title'                  => $project->title()->value(),
     'url'                    => $project->url(),
diff --git a/src/router/router.js b/src/router/router.js
index 0e25560..22dae89 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -1,9 +1,9 @@
-import { createWebHistory, createRouter } from "vue-router";
-import routes from "./routes";
-import { useApiStore } from "../stores/api";
-import { usePageStore } from "../stores/page";
-import { useUserStore } from "../stores/user";
-import { getActivePinia } from "pinia";
+import { createWebHistory, createRouter } from 'vue-router';
+import routes from './routes';
+import { useApiStore } from '../stores/api';
+import { usePageStore } from '../stores/page';
+import { useUserStore } from '../stores/user';
+import { getActivePinia } from 'pinia';
 
 const router = createRouter({
   history: createWebHistory(),
@@ -12,10 +12,14 @@ const router = createRouter({
 
 router.beforeEach(async (to, from, next) => {
   const pinia = getActivePinia();
-  const api = useApiStore(pinia);
   const pageStore = usePageStore(pinia);
   const userStore = useUserStore(pinia);
 
+  if (to.path === '/login') next();
+
+  if (!userStore.user) next('/login');
+
+  const api = useApiStore(pinia);
   try {
     const res = await api.fetchData(to.path);
 
diff --git a/src/router/routes.js b/src/router/routes.js
index be32a81..2320150 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -13,6 +13,7 @@ const routes = [
     component: Home,
   },
   {
+    name: 'Login',
     path: '/login',
     component: Login,
   },

From 009752ff329e4cd753055538cedc629e118b9636 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 30 Apr 2025 16:21:56 +0200
Subject: [PATCH 03/21] fix user login page display

---
 src/App.vue          |  4 +++-
 src/router/router.js |  4 ++--
 src/stores/user.js   | 15 ++++++++++-----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0afe36b..c7c1cb3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <h1 v-if="page" class="sr-only">{{ page.content.title }}</h1>
   <div :class="{ 'with-sidebar': page?.template !== 'login' }">
-    <Menu v-if="page?.template !== 'login'" />
+    <Menu v-if="isLogged" />
     <RouterView />
   </div>
 </template>
@@ -11,6 +11,7 @@ import { storeToRefs } from 'pinia';
 import Menu from './components/Menu.vue';
 import { usePageStore } from './stores/page';
 import { detect } from 'detect-browser';
+import { useUserStore } from './stores/user';
 
 const browser = detect();
 
@@ -20,4 +21,5 @@ if (browser) {
   ).dataset.browser = `${browser.name} ${browser.version} ${browser.os}`;
 }
 const { page } = storeToRefs(usePageStore());
+const { isLogged } = storeToRefs(useUserStore());
 </script>
diff --git a/src/router/router.js b/src/router/router.js
index 22dae89..984f883 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -17,12 +17,12 @@ router.beforeEach(async (to, from, next) => {
 
   if (to.path === '/login') next();
 
-  if (!userStore.user) next('/login');
-
   const api = useApiStore(pinia);
   try {
     const res = await api.fetchData(to.path);
 
+    if (!res.user) next('/login');
+
     pageStore.page = res.page;
     userStore.user = res.user;
     next();
diff --git a/src/stores/user.js b/src/stores/user.js
index 7fe5956..17aa2fe 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -1,10 +1,14 @@
-import { defineStore, storeToRefs } from "pinia";
-import { ref, computed } from "vue";
-import { useProjectsStore } from "./projects";
+import { defineStore, storeToRefs } from 'pinia';
+import { ref, computed } from 'vue';
+import { useProjectsStore } from './projects';
 
-export const useUserStore = defineStore("user", () => {
+export const useUserStore = defineStore('user', () => {
   const user = ref(null);
 
+  const isLogged = computed(() => {
+    return user.value?.hasOwnProperty('role');
+  });
+
   const { projects } = storeToRefs(useProjectsStore());
 
   const notifications = computed(() => {
@@ -22,7 +26,7 @@ export const useUserStore = defineStore("user", () => {
   });
 
   function readNotification(notificationId, projectId) {
-    console.log("Read notification", notificationId, projectId);
+    console.log('Read notification', notificationId, projectId);
     projects.value = projects.value.map((project) => ({
       ...project,
       notifications:
@@ -57,6 +61,7 @@ export const useUserStore = defineStore("user", () => {
 
   return {
     user,
+    isLogged,
     notifications,
     readNotification,
     readAllNotifications,

From b4ba43acf5a536118015bb174caac7f1a20c9bfd Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 30 Apr 2025 16:31:38 +0200
Subject: [PATCH 04/21] Update login form markup

---
 src/views/Login.vue | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2b304c9..4e9750a 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,19 +1,33 @@
 <template>
   <form
     @submit.prevent="handleSubmit"
-    class="w-full h-full p-16 flex flex-col"
-    style="--row-gap: 1rem"
+    class="px-24 py-32 flex flex-col mx-auto bg-white rounded-xl"
+    style="--row-gap: 1rem; max-width: 24em;"
   >
-    <input
-      type="text"
-      v-model="subject"
-      id="appointment-subject"
-      placeholder="Objet du rendez-vous"
-      class="w-full rounded-md border border-grey-200 px-16 py-12"
-      required
-    />
-    <label for="appointment-details" class="sr-only">Détails du projet</label>
-    <button @click="login" class="btn" type="submit">Soumettre</button>
+    <div class="field | w-full">
+      <label for="username">Email</label>
+      <input
+        type="email"
+        v-model="email"
+        id="username"
+        placeholder="mail@exemple.com"
+        autocomplete="username"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
+        required
+      />
+    </div>
+    <div class="field | w-full">
+      <label for="password">Mot de passe</label>
+      <input
+        type="password"
+        v-model="password"
+        id="password"
+        autocomplete="current-password"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
+        required
+      />
+    </div>
+    <button @click="login" class="btn | w-full" type="submit">Connexion</button>
   </form>
 </template>
 <script setup>

From d15d4898c6ef27c797a29641887ef8b7a51de4fd Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 2 May 2025 17:02:13 +0200
Subject: [PATCH 05/21] front > login : login page working

---
 public/site/config/config.php        |  1 +
 public/site/config/routes/login.php  | 35 +++++++++++++
 public/site/config/routes/logout.php |  2 +-
 src/views/Login.vue                  | 76 ++++++++++++++++++++++++++--
 4 files changed, 109 insertions(+), 5 deletions(-)
 create mode 100644 public/site/config/routes/login.php

diff --git a/public/site/config/config.php b/public/site/config/config.php
index 2896a5f..7e92b30 100644
--- a/public/site/config/config.php
+++ b/public/site/config/config.php
@@ -27,6 +27,7 @@ return [
   ],
   'routes' => [
     require(__DIR__ . '/routes/logout.php'),
+    require(__DIR__ . '/routes/login.php'),
     require(__DIR__ . '/routes/toggle-favorite.php'),
     require(__DIR__ . '/routes/upload-images.php'),
     require(__DIR__ . '/routes/save-page.php'),
diff --git a/public/site/config/routes/login.php b/public/site/config/routes/login.php
new file mode 100644
index 0000000..2569ba2
--- /dev/null
+++ b/public/site/config/routes/login.php
@@ -0,0 +1,35 @@
+<?php
+
+return [
+  "pattern" => "login.json",
+  "method" => "POST",
+  "action"  => function () {
+    $json = file_get_contents("php://input");
+    $data = json_decode($json);
+
+    $kirby = kirby();
+
+    $email = $data->email;
+		$password = $data->password;
+		
+    if(V::email($email)) {
+			try {
+        $kirby->auth()->login($email, $password);
+        return json_encode([
+          "status" => "success",
+          "role" => (string) $kirby->user()->role()
+        ]);
+      } catch (Exception $e) {
+        return json_encode([
+          "status" => "error",
+          "message" => "<strong>Email ou mot de passe invalide.</strong><br>Contactez l'administrateur pour demander la réinitialisation de vos informations de connexion."
+        ]);
+      }
+		} else {
+      return json_encode([
+        "status" => "error",
+        "message" => "<strong>Email invalide.</strong>"
+      ]);
+    }
+  },
+];
diff --git a/public/site/config/routes/logout.php b/public/site/config/routes/logout.php
index 9f92b94..2f71026 100644
--- a/public/site/config/routes/logout.php
+++ b/public/site/config/routes/logout.php
@@ -10,6 +10,6 @@ return [
           session_start();
       }
 
-      go(site()->panel()->url());
+      go(site()->url() . '/login');
   },
 ];
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 4e9750a..211f9e0 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -2,17 +2,19 @@
   <form
     @submit.prevent="handleSubmit"
     class="px-24 py-32 flex flex-col mx-auto bg-white rounded-xl"
-    style="--row-gap: 1rem; max-width: 24em;"
+    style="--row-gap: 1rem; max-width: 24em"
   >
     <div class="field | w-full">
       <label for="username">Email</label>
       <input
+        @input="updateEmail"
         type="email"
         v-model="email"
         id="username"
         placeholder="mail@exemple.com"
         autocomplete="username"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
+        :class="{ invalid: !isValidEmail }"
         required
       />
     </div>
@@ -27,11 +29,77 @@
         required
       />
     </div>
-    <button @click="login" class="btn | w-full" type="submit">Connexion</button>
+    <p class="error" v-if="errorMessage" v-html="errorMessage"></p>
+    <button
+      @click="login"
+      :class="submitBtn.state"
+      class="btn | w-full"
+      type="submit"
+      :disabled="submitBtn.state === 'pending' ? true : undefined"
+    >
+      {{ submitBtn.message }}
+    </button>
   </form>
 </template>
 <script setup>
-function login() {
-  console.log('test');
+import { ref, watch } from 'vue';
+
+const email = ref('');
+const isValidEmail = ref(false);
+const password = ref('');
+const errorMessage = ref(null);
+
+const submitBtn = ref({
+  message: 'Connexion',
+  state: 'ready',
+});
+
+watch(email, (newEmail) => {
+  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  isValidEmail.value = regex.test(newEmail);
+});
+function updateEmail(event) {
+  email.value = event.target.value;
+}
+
+async function login() {
+  if (email.value.length === 0 || password.value.length === 0) {
+    errorMessage.value = 'Veuillez remplir les champs.';
+  }
+
+  submitBtn.value.message = 'En cours…';
+  submitBtn.value.state = 'pending';
+
+  const headers = {
+    method: 'POST',
+    body: JSON.stringify({
+      email: email.value,
+      password: password.value,
+    }),
+  };
+  const res = await fetch('/login.json', headers);
+  const json = await res.json();
+
+  if (json.status === 'success') {
+    if (json.role === 'admin') {
+      location.href = '/panel';
+    } else {
+      location.href = '/';
+    }
+  } else {
+    errorMessage.value = json.message;
+    submitBtn.value.message = 'Réessayer';
+    submitBtn.value.state = 'ready';
+  }
 }
 </script>
+
+<style scoped>
+.error {
+  color: #ee6767;
+}
+
+input.invalid:focus-visible {
+  outline: 2px solid #ef8d8d;
+}
+</style>

From 443369ee231159320d03c28b96a315da57f9495c Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 2 May 2025 17:58:50 +0200
Subject: [PATCH 06/21] front > account : start

---
 public/site/controllers/site.php       | 12 ++++++
 public/site/templates/account.json.php |  6 +++
 public/site/templates/account.php      |  1 +
 src/router/routes.js                   |  6 +++
 src/views/Account.vue                  | 58 ++++++++++++++++++++++++++
 5 files changed, 83 insertions(+)
 create mode 100644 public/site/templates/account.json.php
 create mode 100644 public/site/templates/account.php
 create mode 100644 src/views/Account.vue

diff --git a/public/site/controllers/site.php b/public/site/controllers/site.php
index 7d2d7c2..fccf18e 100644
--- a/public/site/controllers/site.php
+++ b/public/site/controllers/site.php
@@ -7,6 +7,8 @@ return function ($page, $kirby, $site) {
 
   if ($kirby->user()) {
     $userData = [
+      "name" => (string) $kirby->user()->name()->or(null),
+      "email" => (string) $kirby->user()->email(),
       "role" => (string) $kirby->user()->role(),
       "uuid" => (string) $kirby->user()->uuid()
     ];
@@ -17,6 +19,16 @@ return function ($page, $kirby, $site) {
         "uuid" => (string) $kirby->user()->client()->toPage()->uuid()
       ];
     }
+
+    if ($kirby->user()->projects()->exists() && $kirby->user()->projects()->isNotEmpty()) {
+      $userData['projects'] = $kirby->user()->projects()->toPages()->map(function ($project) {
+        return [
+          "title" => (string) $project->title(),
+          "uri" => (string) $project->uri(),
+          "step" => (string) $project->getStepLabel(),
+        ];
+      })->data;
+    }
   }
 
 
diff --git a/public/site/templates/account.json.php b/public/site/templates/account.json.php
new file mode 100644
index 0000000..032de0f
--- /dev/null
+++ b/public/site/templates/account.json.php
@@ -0,0 +1,6 @@
+<?php
+
+echo json_encode([
+  "page" => $genericData,
+  "user" => $userData
+]);
\ No newline at end of file
diff --git a/public/site/templates/account.php b/public/site/templates/account.php
new file mode 100644
index 0000000..4ed6305
--- /dev/null
+++ b/public/site/templates/account.php
@@ -0,0 +1 @@
+<?php snippet('generic-template') ?>
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index 2320150..12d0f18 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -6,6 +6,7 @@ import Kanban from '../views/Kanban.vue';
 import Brief from '../views/Brief.vue';
 import DesignToLight from '../views/DesignToLight.vue';
 import Login from '../views/Login.vue';
+import Account from '../views/Account.vue';
 
 const routes = [
   {
@@ -17,6 +18,11 @@ const routes = [
     path: '/login',
     component: Login,
   },
+  {
+    name: 'Account',
+    path: '/account',
+    component: Account,
+  },
   {
     path: '/notifications',
     component: Notifications,
diff --git a/src/views/Account.vue b/src/views/Account.vue
new file mode 100644
index 0000000..c299e20
--- /dev/null
+++ b/src/views/Account.vue
@@ -0,0 +1,58 @@
+<template>
+  <h1>Compte</h1>
+  <ul>
+    <li>
+      <p v-if="user.name">Nom : {{ user.name }}</p>
+    </li>
+    <li>
+      <input
+        v-if="isEditingEmail"
+        @input="updateEmail"
+        type="email"
+        v-model="email"
+        id="username"
+        placeholder="mail@exemple.com"
+        autocomplete="username"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
+        :class="{ invalid: !isValidEmail }"
+        required
+      />
+      <p v-else>Email : {{ user.email }}</p>
+      <button v-if="isEditingEmail" class="btn | w-full">enregistrer</button>
+      <button v-else @click="isEditingEmail = true" class="btn | w-full">
+        modifier
+      </button>
+    </li>
+    <li>
+      <p>Client : {{ user.client.name }}</p>
+    </li>
+    <li v-if="user.hasOwnProperty('projects')">
+      <p>Nombre de projets : {{ Object.values(user.projects).length }}</p>
+    </li>
+  </ul>
+</template>
+<script setup>
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '../stores/user';
+import { ref, watch } from 'vue';
+
+const { user } = storeToRefs(useUserStore());
+const email = ref('');
+const isEditingEmail = ref(false);
+const isValidEmail = ref(false);
+
+watch(email, (newEmail) => {
+  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  isValidEmail.value = regex.test(newEmail);
+});
+
+function updateEmail(event) {
+  email.value = event.target.value;
+}
+</script>
+
+<style scoped>
+input.invalid:focus-visible {
+  outline: 2px solid #ef8d8d;
+}
+</style>

From c3119a5cabba4658f24ce2e4711cddadf02d495c Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 14:01:03 +0200
Subject: [PATCH 07/21] account : add class is-editing

---
 src/views/Account.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Account.vue b/src/views/Account.vue
index c299e20..d4d3e4d 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -4,7 +4,7 @@
     <li>
       <p v-if="user.name">Nom : {{ user.name }}</p>
     </li>
-    <li>
+    <li :class="{ 'is-editing': isEditingEmail }">
       <input
         v-if="isEditingEmail"
         @input="updateEmail"

From 4113c69ccf320968e65995f728b8ff7b13a8b868 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 15:53:12 +0200
Subject: [PATCH 08/21] front > menu > account : link conditionally to panel or
 front account depending on user role

---
 public/site/controllers/site.php |  3 ++
 src/components/Menu.vue          | 80 +++++++++++++++++---------------
 2 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/public/site/controllers/site.php b/public/site/controllers/site.php
index fccf18e..471bc23 100644
--- a/public/site/controllers/site.php
+++ b/public/site/controllers/site.php
@@ -18,6 +18,9 @@ return function ($page, $kirby, $site) {
         "name" => (string) $kirby->user()->client()->toPage()->title(),
         "uuid" => (string) $kirby->user()->client()->toPage()->uuid()
       ];
+      if ($kirby->user()->client()->toPage()->logo()->isNotEmpty()) {
+        $userData['client']["logo"] = $kirby->user()->client()->toPage()->logo()->toFile()->url();
+      }
     }
 
     if ($kirby->user()->projects()->exists() && $kirby->user()->projects()->isNotEmpty()) {
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 2197a96..82327d0 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -15,7 +15,7 @@
       xmlns="http://www.w3.org/2000/svg"
     >
       <title id="menu-toggle">
-        {{ isExpanded ? "Masquer le menu" : "Afficher le menu" }}
+        {{ isExpanded ? 'Masquer le menu' : 'Afficher le menu' }}
       </title>
       <path
         d="M10.6751 2.625L3.00007 10.3125C2.94028 10.3686 2.89263 10.4364 2.86005 10.5116C2.82748 10.5869 2.81067 10.668 2.81067 10.75C2.81067 10.832 2.82748 10.9131 2.86005 10.9884C2.89263 11.0636 2.94028 11.1314 3.00007 11.1875L10.6751 18.875M17.1876 2.625L9.50007 10.3125C9.38555 10.4293 9.32141 10.5864 9.32141 10.75C9.32141 10.9136 9.38555 11.0707 9.50007 11.1875L17.1876 18.875"
@@ -53,7 +53,7 @@
           <span
             v-if="mainItem.title === 'Inspirations' && page?.newInspirations"
             class="pill pill--secondary"
-            >{{ "Nouveautés" }}</span
+            >{{ 'Nouveautés' }}</span
           >
         </li>
       </ul>
@@ -95,7 +95,11 @@
     <footer class="w-full">
       <ul class="flex">
         <li data-icon="user">
-          <a href="/panel/account" @click="collapse()">Profil</a>
+          <a
+            :href="user.role === 'admin' ? '/panel/account' : '/account'"
+            @click="collapse()"
+            >Profil</a
+          >
         </li>
         <li data-icon="logout">
           <a href="/logout" @click="collapse()">Déconnexion</a>
@@ -106,13 +110,13 @@
 </template>
 
 <script setup>
-import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
-import { useProjectsStore } from "../stores/projects";
-import { useRoute } from "vue-router";
-import { useUserStore } from "../stores/user";
-import { usePageStore } from "../stores/page";
-import { useProjectStore } from "../stores/project";
+import { storeToRefs } from 'pinia';
+import { computed, ref } from 'vue';
+import { useProjectsStore } from '../stores/projects';
+import { useRoute } from 'vue-router';
+import { useUserStore } from '../stores/user';
+import { usePageStore } from '../stores/page';
+import { useProjectStore } from '../stores/project';
 
 const route = useRoute();
 const isExpanded = ref(true);
@@ -132,30 +136,30 @@ const unreadNotificationsCount = computed(() => {
 
 const mainItems = [
   {
-    title: "Home",
-    path: "/",
-    icon: "home",
+    title: 'Home',
+    path: '/',
+    icon: 'home',
   },
   {
-    title: "Notifications",
-    path: "/notifications",
-    icon: "megaphone",
+    title: 'Notifications',
+    path: '/notifications',
+    icon: 'megaphone',
   },
   {
-    title: "Réunions",
-    path: "/reunions",
-    icon: "calendar",
+    title: 'Réunions',
+    path: '/reunions',
+    icon: 'calendar',
     disabled: true,
   },
   {
-    title: "Design to Light",
-    path: "/design-to-light",
-    icon: "leaf",
+    title: 'Design to Light',
+    path: '/design-to-light',
+    icon: 'leaf',
   },
   {
-    title: "Inspirations",
-    path: "/inspirations",
-    icon: "inspiration",
+    title: 'Inspirations',
+    path: '/inspirations',
+    icon: 'inspiration',
   },
 ];
 
@@ -176,7 +180,7 @@ function hasUnreadNotification(project) {
   if (!user.value) return false;
   return notifications.value.some((notification) => {
     return (
-      notification.isread != "true" &&
+      notification.isread != 'true' &&
       project.uri.includes(notification.location.project.uri)
     );
   });
@@ -190,31 +194,31 @@ function collapse() {
 </script>
 
 <style>
-button[aria-controls="menu"] {
+button[aria-controls='menu'] {
   position: fixed;
   z-index: 101;
   width: 2.5rem;
   height: 2.5rem;
 }
-button[aria-controls="menu"] svg {
+button[aria-controls='menu'] svg {
   width: 100%;
   height: 100%;
 }
-button[aria-controls="menu"][aria-expanded="true"] {
+button[aria-controls='menu'][aria-expanded='true'] {
   margin-top: 1rem;
   padding: 0.625rem; /* 10px */
   left: var(--gutter);
   transform: translateX(calc(var(--sidebar-width) - 100% - 1rem));
 }
-button[aria-controls="menu"][aria-expanded="false"] {
+button[aria-controls='menu'][aria-expanded='false'] {
   min-width: 3.5rem;
   min-height: 3.5rem;
   padding: 1.125rem;
   transform: rotate(180deg);
 }
-button[aria-controls="menu"][aria-expanded="false"]
+button[aria-controls='menu'][aria-expanded='false']
   + main
-  > header:not([role="tablist"]) {
+  > header:not([role='tablist']) {
   margin-left: 4rem;
   width: calc(100% - 4rem);
 }
@@ -238,7 +242,7 @@ button[aria-controls="menu"][aria-expanded="false"]
 }
 
 @media (max-width: 1023px) {
-  button[aria-controls="menu"][aria-expanded="true"] {
+  button[aria-controls='menu'][aria-expanded='true'] {
     left: 0;
     margin-top: 0.4rem;
   }
@@ -252,8 +256,8 @@ button[aria-controls="menu"][aria-expanded="false"]
     height: 100vh;
     padding-top: 2.5rem;
   }
-  button[aria-controls="menu"][aria-expanded="true"] + #menu::before {
-    content: "";
+  button[aria-controls='menu'][aria-expanded='true'] + #menu::before {
+    content: '';
     position: fixed;
     top: 0;
     right: 0;
@@ -281,7 +285,7 @@ button[aria-controls="menu"][aria-expanded="false"]
   z-index: 1;
 }
 #menu header::before {
-  content: "";
+  content: '';
   display: block;
   position: absolute;
   top: -1rem;
@@ -350,7 +354,7 @@ button[aria-controls="menu"][aria-expanded="false"]
   align-items: center;
 }
 #menu li a::before {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -386,7 +390,7 @@ button[aria-controls="menu"][aria-expanded="false"]
   width: fit-content;
 }
 #menu details .new::after {
-  content: "" / "Nouvelles modifications";
+  content: '' / 'Nouvelles modifications';
   color: transparent;
   position: relative;
   display: inline-block;

From 144196793fdb3c53a686ba1c065495c5bc319d58 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 16:21:03 +0200
Subject: [PATCH 09/21] front > login : redirect to home page if user is
 already logged in

---
 src/router/router.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/router/router.js b/src/router/router.js
index 984f883..82acbe6 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -11,21 +11,22 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to, from, next) => {
-  const pinia = getActivePinia();
-  const pageStore = usePageStore(pinia);
-  const userStore = useUserStore(pinia);
+  const pageStore = usePageStore();
+  const userStore = useUserStore();
 
-  if (to.path === '/login') next();
-
-  const api = useApiStore(pinia);
+  const api = useApiStore();
   try {
     const res = await api.fetchData(to.path);
 
-    if (!res.user) next('/login');
-
-    pageStore.page = res.page;
-    userStore.user = res.user;
-    next();
+    if (!res.user && to.path === '/login' && from.path === '/login') {
+      next();
+    } else if (res.user && to.path === '/login') {
+      next('/');
+    } else {
+      pageStore.page = res.page;
+      userStore.user = res.user;
+      next();
+    }
   } catch (error) {
     console.error(error);
     next(false);

From e30a80c4ff9ee6be9f9d42fdb0a61005ef409eed Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 16:22:46 +0200
Subject: [PATCH 10/21] remove useless import

---
 src/router/router.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/router/router.js b/src/router/router.js
index 82acbe6..41ba16e 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -3,7 +3,6 @@ import routes from './routes';
 import { useApiStore } from '../stores/api';
 import { usePageStore } from '../stores/page';
 import { useUserStore } from '../stores/user';
-import { getActivePinia } from 'pinia';
 
 const router = createRouter({
   history: createWebHistory(),

From 619e124fc4b64e4f8eb5fec0c946ef55cc0e9d93 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 16:41:22 +0200
Subject: [PATCH 11/21] front > login : fix redirection when user is already
 logged in

---
 public/site/controllers/site.php |  4 ++++
 src/router/router.js             | 14 ++++++--------
 src/views/Account.vue            | 21 +++++++++++++++------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/public/site/controllers/site.php b/public/site/controllers/site.php
index 471bc23..c5a36fb 100644
--- a/public/site/controllers/site.php
+++ b/public/site/controllers/site.php
@@ -1,6 +1,10 @@
 <?php
 
 return function ($page, $kirby, $site) {
+  if (!$kirby->user() && $page->uri() !== 'login') {
+    go('/login');
+  }
+
   $data = $page->toArray();
   $data['template'] = (string) $page->template();
   $data['newInspirations'] = (bool) page('inspirations')->children()->findBy('new', 'true');
diff --git a/src/router/router.js b/src/router/router.js
index 41ba16e..a67252a 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -17,15 +17,13 @@ router.beforeEach(async (to, from, next) => {
   try {
     const res = await api.fetchData(to.path);
 
-    if (!res.user && to.path === '/login' && from.path === '/login') {
-      next();
-    } else if (res.user && to.path === '/login') {
-      next('/');
-    } else {
-      pageStore.page = res.page;
-      userStore.user = res.user;
-      next();
+    if (to.path === '/login' && res.user) {
+      location.href = '/';
     }
+
+    pageStore.page = res.page;
+    userStore.user = res.user;
+    next();
   } catch (error) {
     console.error(error);
     next(false);
diff --git a/src/views/Account.vue b/src/views/Account.vue
index d4d3e4d..515dab5 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -14,7 +14,7 @@
         placeholder="mail@exemple.com"
         autocomplete="username"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
-        :class="{ invalid: !isValidEmail }"
+        :class="{ invalid: emailRegex.test(email) }"
         required
       />
       <p v-else>Email : {{ user.email }}</p>
@@ -23,6 +23,17 @@
         modifier
       </button>
     </li>
+    <li :class="{ 'is-editing': isEditingEmail }">
+      <input
+        @input="updatePassword"
+        type="password"
+        v-model="password"
+        id="password"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
+        :class="{ invalid: password.length < 8 }"
+        required
+      />
+    </li>
     <li>
       <p>Client : {{ user.client.name }}</p>
     </li>
@@ -37,14 +48,12 @@ import { useUserStore } from '../stores/user';
 import { ref, watch } from 'vue';
 
 const { user } = storeToRefs(useUserStore());
+
 const email = ref('');
 const isEditingEmail = ref(false);
-const isValidEmail = ref(false);
+const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
-watch(email, (newEmail) => {
-  const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-  isValidEmail.value = regex.test(newEmail);
-});
+const password = ref('');
 
 function updateEmail(event) {
   email.value = event.target.value;

From 1e40c38805582e27717d7daec1963cacd0eb8029 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 16:57:54 +0200
Subject: [PATCH 12/21] front > account : password form confirmation visually
 workin g

---
 src/views/Account.vue | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/views/Account.vue b/src/views/Account.vue
index 515dab5..86a3ade 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -7,7 +7,6 @@
     <li :class="{ 'is-editing': isEditingEmail }">
       <input
         v-if="isEditingEmail"
-        @input="updateEmail"
         type="email"
         v-model="email"
         id="username"
@@ -25,14 +24,29 @@
     </li>
     <li :class="{ 'is-editing': isEditingEmail }">
       <input
-        @input="updatePassword"
         type="password"
         v-model="password"
         id="password"
+        placeholder="Minimum 8 caractères"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
         :class="{ invalid: password.length < 8 }"
         required
       />
+      <input
+        type="password"
+        v-model="passwordConfirm"
+        id="password-confirm"
+        placeholder="Minimum 8 caractères"
+        class="w-full rounded-md border border-grey-200 px-16 py-12"
+        :class="{ invalid: !isPasswordConfirmed }"
+        required
+      />
+      <button
+        class="btn | w-full"
+        :disabled="!isPasswordConfirmed ? true : undefined"
+      >
+        enregistrer
+      </button>
     </li>
     <li>
       <p>Client : {{ user.client.name }}</p>
@@ -45,7 +59,7 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { useUserStore } from '../stores/user';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const { user } = storeToRefs(useUserStore());
 
@@ -54,10 +68,12 @@ const isEditingEmail = ref(false);
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
 const password = ref('');
-
-function updateEmail(event) {
-  email.value = event.target.value;
-}
+const passwordConfirm = ref('');
+const isPasswordConfirmed = computed(() => {
+  return (
+    passwordConfirm.value.length > 0 && passwordConfirm.value === password.value
+  );
+});
 </script>
 
 <style scoped>

From 074084f8674233f5d667d9e09fc44d9bc98e28d0 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 17:23:55 +0200
Subject: [PATCH 13/21] front > account : update password working

---
 public/site/config/config.php                 |  1 +
 public/site/config/routes/update-password.php | 22 +++++++
 src/views/Account.vue                         | 59 ++++++++++++++++++-
 3 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 public/site/config/routes/update-password.php

diff --git a/public/site/config/config.php b/public/site/config/config.php
index 7e92b30..c6cb731 100644
--- a/public/site/config/config.php
+++ b/public/site/config/config.php
@@ -33,6 +33,7 @@ return [
     require(__DIR__ . '/routes/save-page.php'),
     require(__DIR__ . '/routes/save-file.php'),
     require(__DIR__ . '/routes/remove-file.php'),
+    require(__DIR__ . '/routes/update-password.php'),
     require(__DIR__ . '/routes/upload-pdf.php'),
     require(__DIR__ . '/routes/validate-brief.php'),
     require(__DIR__ . '/routes/request-project-creation.php'),
diff --git a/public/site/config/routes/update-password.php b/public/site/config/routes/update-password.php
new file mode 100644
index 0000000..001b0dc
--- /dev/null
+++ b/public/site/config/routes/update-password.php
@@ -0,0 +1,22 @@
+<?php
+
+return [
+  'pattern' => '/update-password.json',
+  'method' => 'POST',
+  'action' => function() {
+    $json = file_get_contents("php://input");
+    $data = json_decode($json);
+
+    try {
+      kirby()->user()->changePassword($data->password);
+      return [
+        'status' => 'success'
+      ];
+    } catch (\Throwable $th) {
+      return [
+        'status' => 'error',
+        'message' => 'Impossible de mettre à jour le mot de passe : ' . $th->getMessage() . ' in file ' . $th->getFile() . ' line ' . $th->getLine()
+      ];
+    }
+  }
+];
\ No newline at end of file
diff --git a/src/views/Account.vue b/src/views/Account.vue
index 86a3ade..0bf10d4 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -17,7 +17,13 @@
         required
       />
       <p v-else>Email : {{ user.email }}</p>
-      <button v-if="isEditingEmail" class="btn | w-full">enregistrer</button>
+      <button
+        v-if="isEditingEmail"
+        class="btn | w-full"
+        :class="'btn--' + emailBtn.status"
+      >
+        {{ emailBtn.text }}
+      </button>
       <button v-else @click="isEditingEmail = true" class="btn | w-full">
         modifier
       </button>
@@ -43,9 +49,11 @@
       />
       <button
         class="btn | w-full"
+        :class="'btn--' + passwordBtn.status"
         :disabled="!isPasswordConfirmed ? true : undefined"
+        @click="updatePassword"
       >
-        enregistrer
+        {{ passwordBtn.text }}
       </button>
     </li>
     <li>
@@ -63,21 +71,66 @@ import { computed, ref, watch } from 'vue';
 
 const { user } = storeToRefs(useUserStore());
 
+// Email
 const email = ref('');
+const emailBtn = ref({
+  text: 'mettre à jour',
+  status: 'ready',
+});
 const isEditingEmail = ref(false);
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
+// Password
 const password = ref('');
+const passwordBtn = ref({
+  text: 'mettre à jour',
+  status: 'ready',
+});
 const passwordConfirm = ref('');
 const isPasswordConfirmed = computed(() => {
   return (
-    passwordConfirm.value.length > 0 && passwordConfirm.value === password.value
+    passwordConfirm.value.length > 7 && passwordConfirm.value === password.value
   );
 });
+async function updatePassword() {
+  passwordBtn.value.text = 'en cours…';
+  passwordBtn.value.status = 'pending';
+
+  const headers = {
+    method: 'POST',
+    body: JSON.stringify({
+      password: password.value,
+    }),
+  };
+  const response = await fetch('update-password.json', headers);
+  const json = await response.json();
+
+  if (json.status === 'success') {
+    password.value = '';
+    passwordConfirm.value = '';
+    passwordBtn.value.text = 'mise à jour réussie';
+    passwordBtn.value.status = 'succeed';
+
+    setTimeout(() => {
+      passwordBtn.value.text = 'mettre à jour';
+      passwordBtn.value.status = 'ready';
+    }, 1500);
+  } else {
+    console.log(json.message);
+  }
+}
 </script>
 
 <style scoped>
 input.invalid:focus-visible {
   outline: 2px solid #ef8d8d;
 }
+
+.btn--pending {
+  background-color: #ffdb88;
+}
+
+.btn--succeed {
+  background-color: rgb(182, 211, 255);
+}
 </style>

From 921eab5e7e7d1ecf9c839d1ffe3db00c29d06ec6 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 17:30:17 +0200
Subject: [PATCH 14/21] update email working

---
 public/site/config/config.php              |  1 +
 public/site/config/routes/update-email.php | 22 +++++++++++++++
 src/views/Account.vue                      | 33 +++++++++++++++++++++-
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 public/site/config/routes/update-email.php

diff --git a/public/site/config/config.php b/public/site/config/config.php
index c6cb731..6b4967e 100644
--- a/public/site/config/config.php
+++ b/public/site/config/config.php
@@ -34,6 +34,7 @@ return [
     require(__DIR__ . '/routes/save-file.php'),
     require(__DIR__ . '/routes/remove-file.php'),
     require(__DIR__ . '/routes/update-password.php'),
+    require(__DIR__ . '/routes/update-email.php'),
     require(__DIR__ . '/routes/upload-pdf.php'),
     require(__DIR__ . '/routes/validate-brief.php'),
     require(__DIR__ . '/routes/request-project-creation.php'),
diff --git a/public/site/config/routes/update-email.php b/public/site/config/routes/update-email.php
new file mode 100644
index 0000000..aaa9aa7
--- /dev/null
+++ b/public/site/config/routes/update-email.php
@@ -0,0 +1,22 @@
+<?php
+
+return [
+  'pattern' => '/update-email.json',
+  'method' => 'POST',
+  'action' => function() {
+    $json = file_get_contents("php://input");
+    $data = json_decode($json);
+
+    try {
+      kirby()->user()->changeEmail($data->email);
+      return [
+        'status' => 'success'
+      ];
+    } catch (\Throwable $th) {
+      return [
+        'status' => 'error',
+        'message' => 'Impossible de mettre à jour l\'email : ' . $th->getMessage() . ' in file ' . $th->getFile() . ' line ' . $th->getLine()
+      ];
+    }
+  }
+];
\ No newline at end of file
diff --git a/src/views/Account.vue b/src/views/Account.vue
index 0bf10d4..8d3f7cc 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -13,7 +13,7 @@
         placeholder="mail@exemple.com"
         autocomplete="username"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
-        :class="{ invalid: emailRegex.test(email) }"
+        :class="{ invalid: !isEmailValid }"
         required
       />
       <p v-else>Email : {{ user.email }}</p>
@@ -21,6 +21,8 @@
         v-if="isEditingEmail"
         class="btn | w-full"
         :class="'btn--' + emailBtn.status"
+        :disabled="!isEmailValid"
+        @click="updateEmail"
       >
         {{ emailBtn.text }}
       </button>
@@ -79,6 +81,35 @@ const emailBtn = ref({
 });
 const isEditingEmail = ref(false);
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+const isEmailValid = computed(() => {
+  return emailRegex.test(email.value);
+});
+async function updateEmail() {
+  emailBtn.value.text = 'en cours…';
+  emailBtn.value.status = 'pending';
+
+  const headers = {
+    method: 'POST',
+    body: JSON.stringify({
+      email: email.value,
+    }),
+  };
+  const response = await fetch('update-email.json', headers);
+  const json = await response.json();
+
+  if (json.status === 'success') {
+    email.value = '';
+    emailBtn.value.text = 'mise à jour réussie';
+    emailBtn.value.status = 'succeed';
+
+    setTimeout(() => {
+      emailBtn.value.text = 'mettre à jour';
+      emailBtn.value.status = 'ready';
+    }, 1500);
+  } else {
+    console.log(json.message);
+  }
+}
 
 // Password
 const password = ref('');

From 6c5737f45678cc80a5fdc16f711ded5e5c95183c Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 17:41:43 +0200
Subject: [PATCH 15/21] front > account : add password toggle visibility

---
 src/views/Account.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/views/Account.vue b/src/views/Account.vue
index 8d3f7cc..e45b9f0 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -32,7 +32,7 @@
     </li>
     <li :class="{ 'is-editing': isEditingEmail }">
       <input
-        type="password"
+        :type="isPasswordHidden ? 'password' : 'text'"
         v-model="password"
         id="password"
         placeholder="Minimum 8 caractères"
@@ -41,7 +41,7 @@
         required
       />
       <input
-        type="password"
+        :type="isPasswordHidden ? 'password' : 'text'"
         v-model="passwordConfirm"
         id="password-confirm"
         placeholder="Minimum 8 caractères"
@@ -49,6 +49,12 @@
         :class="{ invalid: !isPasswordConfirmed }"
         required
       />
+      <button
+        class="btn | w-full"
+        @click="isPasswordHidden = !isPasswordHidden"
+      >
+        {{ isPasswordHidden ? 'afficher' : 'masquer' }}
+      </button>
       <button
         class="btn | w-full"
         :class="'btn--' + passwordBtn.status"
@@ -118,6 +124,7 @@ const passwordBtn = ref({
   status: 'ready',
 });
 const passwordConfirm = ref('');
+const isPasswordHidden = ref(true);
 const isPasswordConfirmed = computed(() => {
   return (
     passwordConfirm.value.length > 7 && passwordConfirm.value === password.value

From ba35e50c6ffe369df252afacd530874e40b140f7 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 17:42:54 +0200
Subject: [PATCH 16/21] front > account : rename variable

---
 src/views/Account.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/Account.vue b/src/views/Account.vue
index e45b9f0..c874da2 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -32,7 +32,7 @@
     </li>
     <li :class="{ 'is-editing': isEditingEmail }">
       <input
-        :type="isPasswordHidden ? 'password' : 'text'"
+        :type="isPasswordVisible ? 'text' : 'password'"
         v-model="password"
         id="password"
         placeholder="Minimum 8 caractères"
@@ -41,7 +41,7 @@
         required
       />
       <input
-        :type="isPasswordHidden ? 'password' : 'text'"
+        :type="isPasswordVisible ? 'text' : 'password'"
         v-model="passwordConfirm"
         id="password-confirm"
         placeholder="Minimum 8 caractères"
@@ -51,9 +51,9 @@
       />
       <button
         class="btn | w-full"
-        @click="isPasswordHidden = !isPasswordHidden"
+        @click="isPasswordVisible = !isPasswordVisible"
       >
-        {{ isPasswordHidden ? 'afficher' : 'masquer' }}
+        {{ isPasswordVisible ? 'masquer' : 'afficher' }}
       </button>
       <button
         class="btn | w-full"
@@ -124,7 +124,7 @@ const passwordBtn = ref({
   status: 'ready',
 });
 const passwordConfirm = ref('');
-const isPasswordHidden = ref(true);
+const isPasswordVisible = ref(false);
 const isPasswordConfirmed = computed(() => {
   return (
     passwordConfirm.value.length > 7 && passwordConfirm.value === password.value

From 3f047abd386833c9c44a540e837df92d6d117042 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 5 May 2025 17:46:49 +0200
Subject: [PATCH 17/21] front > login : add toggle visibility button

---
 src/views/Login.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index 211f9e0..dc96d5f 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -21,13 +21,20 @@
     <div class="field | w-full">
       <label for="password">Mot de passe</label>
       <input
-        type="password"
+        :type="isPasswordVisible ? 'text' : 'password'"
         v-model="password"
         id="password"
         autocomplete="current-password"
         class="w-full rounded-md border border-grey-200 px-16 py-12"
         required
       />
+      <button
+        class="btn | w-full"
+        type="button"
+        @click="isPasswordVisible = !isPasswordVisible"
+      >
+        {{ isPasswordVisible ? 'masquer' : 'afficher' }}
+      </button>
     </div>
     <p class="error" v-if="errorMessage" v-html="errorMessage"></p>
     <button
@@ -47,6 +54,7 @@ import { ref, watch } from 'vue';
 const email = ref('');
 const isValidEmail = ref(false);
 const password = ref('');
+const isPasswordVisible = ref(false);
 const errorMessage = ref(null);
 
 const submitBtn = ref({

From bb13b7647ceeaf7a4ce153105f7fd7ad5e5caa14 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 7 May 2025 15:13:02 +0200
Subject: [PATCH 18/21] Fix user.role error

---
 src/views/Home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 27be011..6bc0d6c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,7 +6,7 @@
       @close="isProjectRequestDialogOpen = false"
     />
     <ProjectRequestButton
-      v-if="user.role === 'client'"
+      v-if="user?.role === 'client'"
       @click="isProjectRequestDialogOpen = true"
     />
   </main>

From f01f62a190c9a1dc04c9608b4e550de4f3c8fb43 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 7 May 2025 15:13:55 +0200
Subject: [PATCH 19/21] Update login form style and a11y

---
 src/assets/css/src/1.0.global.css      |   3 +
 src/assets/css/src/2.blocks.button.css |  19 +++-
 src/views/Login.vue                    | 149 +++++++++++++++++--------
 3 files changed, 117 insertions(+), 54 deletions(-)

diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css
index 7df4c77..73813b1 100644
--- a/src/assets/css/src/1.0.global.css
+++ b/src/assets/css/src/1.0.global.css
@@ -289,6 +289,9 @@ input[type="checkbox"]:checked::before {
 button {
   cursor: pointer;
 }
+.field {
+  position: relative;
+}
 
 /* General interactive states */
 
diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index 5153fc6..556d652 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/src/assets/css/src/2.blocks.button.css
@@ -78,10 +78,15 @@ input[type="checkbox"]:checked + .btn--primary {
   --btn-color: var(--color-white);
 }
 
-.btn--white {
+.btn--white,
+.btn--white[aria-pressed="true"],
+.btn--white[aria-pressed="true"]:focus-visible {
   --btn-background: var(--color-white);
   --btn-color: var(--color-grey-700);
 }
+.btn--white[aria-pressed="true"]:focus-visible {
+  outline: transparent;
+}
 .btn--white-10 {
   --btn-background: var(--color-white-10);
   --btn-color: var(--color-white-80);
@@ -168,11 +173,19 @@ input[type="checkbox"]:checked + .btn--primary {
   .btn:hover {
     --btn-background: var(--color-primary-hover);
   }
+  .btn[aria-pressed="true"]:hover {
+    --btn-background: var(--color-primary-hover);
+    --btn-border-color: var(--color-primary-hover);
+  }
   .btn--primary:hover {
     --btn-background: var(--color-primary-10);
   }
   .btn--white:hover {
+    --btn-background: var(--color-black-10);
+  }
+  .btn--white[aria-pressed="true"]:hover {
     --btn-background: var(--color-white);
+    --btn-border-color: transparent;
   }
   .btn--white-10:hover {
     --btn-background: var(--color-white-05);
@@ -192,10 +205,6 @@ input[type="checkbox"]:checked + .btn--primary {
   .btn--transparent:hover {
     --btn-background: var(--color-white-05);
   }
-  .btn[aria-pressed="true"]:hover {
-    --btn-background: var(--color-primary-hover);
-    --btn-border-color: var(--color-primary-hover);
-  }
   .btn--image:hover {
     --btn-background: var(--color-primary-10);
   }
diff --git a/src/views/Login.vue b/src/views/Login.vue
index dc96d5f..71e2a90 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,52 +1,70 @@
 <template>
-  <form
-    @submit.prevent="handleSubmit"
-    class="px-24 py-32 flex flex-col mx-auto bg-white rounded-xl"
-    style="--row-gap: 1rem; max-width: 24em"
-  >
-    <div class="field | w-full">
-      <label for="username">Email</label>
-      <input
-        @input="updateEmail"
-        type="email"
-        v-model="email"
-        id="username"
-        placeholder="mail@exemple.com"
-        autocomplete="username"
-        class="w-full rounded-md border border-grey-200 px-16 py-12"
-        :class="{ invalid: !isValidEmail }"
-        required
-      />
-    </div>
-    <div class="field | w-full">
-      <label for="password">Mot de passe</label>
-      <input
-        :type="isPasswordVisible ? 'text' : 'password'"
-        v-model="password"
-        id="password"
-        autocomplete="current-password"
-        class="w-full rounded-md border border-grey-200 px-16 py-12"
-        required
-      />
-      <button
-        class="btn | w-full"
-        type="button"
-        @click="isPasswordVisible = !isPasswordVisible"
-      >
-        {{ isPasswordVisible ? 'masquer' : 'afficher' }}
-      </button>
-    </div>
-    <p class="error" v-if="errorMessage" v-html="errorMessage"></p>
-    <button
-      @click="login"
-      :class="submitBtn.state"
-      class="btn | w-full"
-      type="submit"
-      :disabled="submitBtn.state === 'pending' ? true : undefined"
+  <div class="wrapper grid-center">
+    <form
+      @submit.prevent="handleSubmit"
+      class="px-24 pb-32 flex flex-col mx-auto bg-white rounded-xl"
+      style="--row-gap: 1rem; max-width: 24em"
     >
-      {{ submitBtn.message }}
-    </button>
-  </form>
+      <div class="field | w-full" role="group" aria-labelledby="username">
+        <label for="username">Email</label>
+        <input
+          @input="updateEmail"
+          type="email"
+          v-model="email"
+          id="username"
+          autocomplete="username"
+          autocapitalize="none"
+          autocorrect="off"
+          spellcheck="false"
+          class="w-full rounded-md border border-grey-200 px-16 py-12 mt-8"
+          placeholder="mail@exemple.com"
+          :aria-invalid="{ true: !isValidEmail }"
+          required
+        />
+      </div>
+      <div class="field | w-full" role="group" aria-labelledby="password">
+        <label for="password">Mot de passe</label>
+        <input
+          :type="isPasswordVisible ? 'text' : 'password'"
+          v-model="password"
+          id="password"
+          autocomplete="current-password"
+          autocapitalize="none"
+          autocorrect="off"
+          spellcheck="false"
+          class="w-full rounded-md border border-grey-200 px-16 py-12 mt-8"
+          required
+        />
+        <button
+          class="btn btn--white btn--icon"
+          type="button"
+          :aria-pressed="isPasswordVisible ? 'true' : 'false'"
+          aria-controls="password"
+          @click="isPasswordVisible = !isPasswordVisible"
+          :title="isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'"
+        >
+          <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path v-if="isPasswordVisible" d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"></path>
+            <path v-else d="M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z"></path>
+          </svg>
+          <span class="sr-only">{{ isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe' }}</span>
+        </button>
+      </div>
+      <p class="error" v-if="errorMessage" v-html="errorMessage"></p>
+      <div class="sr-only" id="announce" aria-live="assertive">
+        {{ isPasswordVisible ? 'Mot de passe affiché' : 'Mot de passe masqué' }}
+      </div>
+      <button
+        @click="login"
+        :class="submitBtn.state"
+        class="btn | w-full text-md"
+        type="submit"
+        :disabled="submitBtn.state === 'pending' ? true : undefined"
+      >
+        {{ submitBtn.message }}
+      </button>
+    </form>
+  </div>
 </template>
 <script setup>
 import { ref, watch } from 'vue';
@@ -103,11 +121,44 @@ async function login() {
 </script>
 
 <style scoped>
+.wrapper {
+  height: calc(100svh - var(--gutter) * 2);
+  padding: 0;
+}
+
+form::before {
+  content: 'Design to Pack';
+  text-align: center;
+  height: 8rem;
+  width: 100%;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='144' height='53' class='logo-courval' viewBox='0 0 144 53'%3E%3Cdefs%3E%3Cpath id='a' d='M0 52h144V0H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(0 .5)'%3E%3Cpath fill='%23717373' d='M11.3210912 45.6153321c.5185261-.5146003 1.2495928-.7882083 2.1162459-.7882083 2.0521173 0 2.9700733 1.5293052 2.9700733 3.0441146 0 1.4713221-.9289495 3.0567984-2.9700733 3.0567984-2.0191368 0-2.9499185-1.5854763-2.9590798-3.0586104-.0054967-.9059864.2931596-1.7068785.8428339-2.2540943m2.1162459-1.8608963c-2.8161645 0-4.07675078 2.0638373-4.07675078 4.1077427 0 1.9913583 1.27524428 4.1367343 4.07675078 4.1367343 2.7868486 0 4.0657574-2.1326922 4.0767508-4.1149906.007329-1.1977141-.4067589-2.2722141-1.1634772-3.0241828-.7274022-.7229773-1.7351384-1.1053036-2.9132736-1.1053036M24.7888436 44.8379957c.8226792 0 1.5885587.3080354 2.1547232.869747l.1813925.1775733.8116857-.6957976-.207044-.2047529c-.7805375-.7719005-1.8249186-1.1977141-2.9407574-1.1977141-1.2147801 0-2.25.3950101-2.997557 1.1415429-.7567182.7574047-1.1671416 1.8192209-1.1543159 2.9879434.0109935 2.01129 1.2990635 4.0406997 4.1518729 4.0406997 1.1158388 0 2.1602199-.4258136 2.9407574-1.1977141l.1978827-.197505-.7823697-.7302251-.1868892.1811973c-.569829.5544637-1.36136.8715589-2.1693812.8715589-2.220684 0-3.0287052-1.6126559-3.0470276-2.9933793-.0036645-.8969266.2949918-1.6905708.8446661-2.2377866.5368485-.534532 1.2990635-.8153878 2.2023615-.8153878M42.926079 48.3760541h4.4175489v-1.0618162H42.926079v-2.3591888h4.6337541v-1.0835598H41.808408v7.9998606h5.8815146v-1.0944316H42.926079zM50.5802932 44.9340302h2.7263843v6.9380445h1.1286645v-6.9380445h2.7245521v-1.0509443h-6.5796009zM63.5113803 50.9481497h-1.0920196v-3.8667503h1.0920196c1.3357085 0 1.9550081.9458499 1.9733306 1.8826399.0109935.5598997-.1868892 1.0871838-.5423453 1.4459544-.3499592.3515228-.8428338.538156-1.4309853.538156m0-4.7836086h-2.0411238v5.7077148h2.0411238c.8648208 0 1.6013844-.2808558 2.1272394-.8135759.5240228-.530908.8135179-1.2973726.7951954-2.1055125-.0311482-1.342672-.9600977-2.7886264-2.9224348-2.7886264M72.2669585 49.6458847c0 .9567218-.6907574 1.3934072-1.3338763 1.3934072-.3499592 0-.6760993-.1214022-.9161237-.3424629-.2711727-.2500522-.414088-.6142588-.414088-1.0509443v-3.4808h-.939943v3.4808c0 .7048575.2455212 1.2991846.7127443 1.7213743.4122557.3714545.9655945.5780194 1.5574104.5780194 1.1304968 0 2.2756515-.7900202 2.2756515-2.2993937v-3.4808h-.9417752v3.4808ZM82.3146376 44.8379957c.8226792 0 1.5885587.3080354 2.1547231.869747l.1813926.1775733.8116856-.6957976-.2070439-.2047529c-.7805375-.7719005-1.8249186-1.1977141-2.9407574-1.1977141-1.2147801 0-2.25.3950101-2.997557 1.1415429-.7567182.7574047-1.1671417 1.8192209-1.1543159 2.9879434.0109934 2.01129 1.2990635 4.0406997 4.1518729 4.0406997 1.1158388 0 2.1602199-.4258136 2.9407574-1.1977141l.1978827-.197505-.7823697-.7302251-.1887215.1811973c-.5679968.5544637-1.3595277.8715589-2.1675489.8715589-2.220684 0-3.0287052-1.6126559-3.0470277-2.9933793-.0054967-.8969266.2949919-1.6905708.8446662-2.2377866.5350162-.534532 1.2990635-.8153878 2.2023615-.8153878M89.9250611 45.6153321c.518526-.5146003 1.2495928-.7882083 2.1162459-.7882083 2.0521173 0 2.9700733 1.5293052 2.9700733 3.0441146 0 1.4713221-.9289495 3.0567984-2.9700733 3.0567984-2.0191368 0-2.9499186-1.5854763-2.9590798-3.0586104-.0054967-.9059864.2931596-1.7068785.8428339-2.2540943m2.1162459-1.8608963c-2.8161645 0-4.0767508 2.0638373-4.0767508 4.1077427 0 1.9913583 1.2752443 4.1367343 4.0767508 4.1367343 2.7868485 0 4.0657573-2.1326922 4.0767508-4.1149906.007329-1.1977141-.4067589-2.2722141-1.1634772-3.0241828-.7274023-.7229773-1.7351384-1.1053036-2.9132736-1.1053036M104.800529 48.7777685c0 1.4640741-1.060871 2.1308802-2.04662 2.1308802-.536849 0-1.037052-.1866332-1.405334-.5254722-.41592-.3841382-.63579-.9404139-.63579-1.605408v-4.9050108h-1.117671v4.9050108c0 .9839013.3444625 1.8119729.991246 2.3972402.573493.5164123 1.343037.802704 2.167549.802704 1.572068 0 3.164291-1.0998676 3.164291-3.1999442v-4.9050108h-1.117671v4.9050108ZM122.360607 50.2429298l-2.607289-6.3708969h-1.216612l3.329194 8.0197923h.989414l3.327361-8.0197923h-1.21478zM130.002178 48.9658513l1.606881-3.6003903 1.606882 3.6003903h-3.213763Zm1.117671-5.093456-3.62785 7.9980486h1.223942l.819014-1.8319046h4.150041l.830008 1.8319046h1.222109l-3.62785-7.9980486h-.989414ZM139.753583 50.7883337v-6.9163008h-1.126832v7.9998606h5.37215v-1.0835598zM1.12683225 44.9447209h2.45337948c1.10667752 0 1.6105456.8516273 1.6105456 1.6434595 0 .4348735-.14474756.8407554-.40492671 1.137919-.28949512.3297791-.70541531.5037285-1.20561889.5037285H1.44381107L2.064943 49.293456h1.51526873c1.79193811 0 2.73004886-1.3644156 2.73004886-2.7107116 0-1.3462959-.93811075-2.7107115-2.73004886-2.7107115H0v7.9998606h1.12683225v-6.9271726Z'/%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23717373' d='M30.9979642 51.8731619h1.1268322v-7.9998606h-1.1268322zM36.7867671 48.4827793v3.3883894h1.1268322v-7.9980486h-1.1268322v3.547843h-4.344259l.6192997 1.0618162zM110.889271 44.9447209h2.464373c.470888 0 .868485.1485818 1.148819.4276256.273005.2736079.425082.6668061.421417 1.0799359-.007329.6885497-.296824 1.5129974-1.634365 1.5129974h-2.083265l.632125 1.0817479h.716409l2.607288 2.8248658h1.50794l-2.704397-2.9009687c.57899-.0942226 1.0682-.3297791 1.438314-.6976096.458062-.4584291.707248-1.1016795.699919-1.810161-.010994-1.2865008-.960098-2.5911213-2.750204-2.5911213h-3.591205v7.9998606h1.126832v-6.9271726Z' mask='url(%23b)'/%3E%3Cpath fill='%23D60F3C' d='M80.4451954 30.3683044H63.5537052L55.107044 15.9015123l8.4466612-14.46679211h16.8914902l8.4466613 14.46679211-8.4466613 14.4667921Zm9.5221906-15.4941808L81.8816775 1.02702627c-.370114-.6360025-1.0553746-1.02738866-1.7974348-1.02738866H63.914658c-.7420603 0-1.4273209.39138616-1.7992671 1.02738866L54.0315147 14.8741236c-.3719463.6360025-.3719463 1.4187749 0 2.0547774l8.0838762 13.8470973c.3719462.6360025 1.0572068 1.0273887 1.7992671 1.0273887h16.1695847c.7420602 0 1.4273208-.3913862 1.7974348-1.0273887L89.967386 16.928901c.370114-.6360025.370114-1.4187749 0-2.0547774Z' mask='url(%23b)'/%3E%3Cpath fill='%23D60F3C' d='m73.1178542 10.2746115.058632.063419c1.9311889 2.0982647 2.9096091 4.0642554 2.9096091 5.8418008 0 2.6907799-1.7186482 4.6458987-4.0877443 4.6458987-2.3672639 0-4.0877443-1.9551188-4.0877443-4.6458987 0-1.7775454.9802524-3.7435361 2.9114413-5.8418008l.058632-.063419c-1.9788274-1.85908429-4.0309447-3.19450836-4.0309447-3.19450836l-5.1504478 8.82249636 5.1504478 8.8206844h10.2990636l5.1504478-8.8206844-5.1504478-8.82249636s-2.0521173 1.33542407-4.0309447 3.19450836' mask='url(%23b)'/%3E%3Cpath fill='%23D60F3C' d='M71.9992671 19.2502195c1.52443 0 2.4955212-1.3807234 2.4955212-3.0712941 0-1.5818524-1.1158388-3.2814831-2.4955212-4.7799847-1.3796824 1.4985016-2.4955212 3.1981323-2.4955212 4.7799847 0 1.6905707.9710912 3.0712941 2.4955212 3.0712941' mask='url(%23b)'/%3E%3C/g%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 12rem;
+  display: grid;
+  place-items: flex-end;
+  justify-content: center;
+}
+
 .error {
   color: #ee6767;
 }
 
-input.invalid:focus-visible {
-  outline: 2px solid #ef8d8d;
+[aria-invalid="true"]:focus-visible {
+  outline-color: #ef8d8d;
+}
+
+[aria-controls="password"] {
+  position: absolute;
+  right: var(--space-8);
+  bottom: var(--space-8);
+  max-height: unset;
+  height: 2rem;
+  padding: var(--space-8);
+  border: none;
+}
+[aria-controls="password"] > svg {
+  width: 1rem;
+  height: 1rem;
 }
 </style>

From 1f83abb78626cd4a5e919b49bdd7c53b9d90fc40 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 7 May 2025 16:04:37 +0200
Subject: [PATCH 20/21] Move aria-invalid and aria-controls style from
 Login.vue to 1.0.global.css

---
 src/assets/css/src/1.0.global.css | 16 ++++++++++++++++
 src/views/Login.vue               | 18 ------------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css
index 73813b1..d67fe16 100644
--- a/src/assets/css/src/1.0.global.css
+++ b/src/assets/css/src/1.0.global.css
@@ -292,6 +292,22 @@ button {
 .field {
   position: relative;
 }
+[aria-invalid="true"]:focus-visible {
+  outline-color: #ef8d8d;
+}
+button[aria-controls*="password"] {
+  position: absolute;
+  right: var(--space-8);
+  bottom: var(--space-8);
+  max-height: unset;
+  height: 2rem;
+  padding: var(--space-8);
+  border: none;
+}
+button[aria-controls*="password"] > svg {
+  width: 1rem;
+  height: 1rem;
+}
 
 /* General interactive states */
 
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 71e2a90..a531ce4 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -143,22 +143,4 @@ form::before {
 .error {
   color: #ee6767;
 }
-
-[aria-invalid="true"]:focus-visible {
-  outline-color: #ef8d8d;
-}
-
-[aria-controls="password"] {
-  position: absolute;
-  right: var(--space-8);
-  bottom: var(--space-8);
-  max-height: unset;
-  height: 2rem;
-  padding: var(--space-8);
-  border: none;
-}
-[aria-controls="password"] > svg {
-  width: 1rem;
-  height: 1rem;
-}
 </style>

From c31dc4e70142c5c381589aac44189eedaf429e78 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 7 May 2025 16:05:05 +0200
Subject: [PATCH 21/21] Update Account.vue markup and styles

---
 src/views/Account.vue | 209 +++++++++++++++++++++++++++---------------
 1 file changed, 133 insertions(+), 76 deletions(-)

diff --git a/src/views/Account.vue b/src/views/Account.vue
index c874da2..174b861 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -1,76 +1,133 @@
 <template>
-  <h1>Compte</h1>
-  <ul>
-    <li>
-      <p v-if="user.name">Nom : {{ user.name }}</p>
-    </li>
-    <li :class="{ 'is-editing': isEditingEmail }">
-      <input
-        v-if="isEditingEmail"
-        type="email"
-        v-model="email"
-        id="username"
-        placeholder="mail@exemple.com"
-        autocomplete="username"
-        class="w-full rounded-md border border-grey-200 px-16 py-12"
-        :class="{ invalid: !isEmailValid }"
-        required
-      />
-      <p v-else>Email : {{ user.email }}</p>
-      <button
-        v-if="isEditingEmail"
-        class="btn | w-full"
-        :class="'btn--' + emailBtn.status"
-        :disabled="!isEmailValid"
-        @click="updateEmail"
-      >
-        {{ emailBtn.text }}
-      </button>
-      <button v-else @click="isEditingEmail = true" class="btn | w-full">
-        modifier
-      </button>
-    </li>
-    <li :class="{ 'is-editing': isEditingEmail }">
-      <input
-        :type="isPasswordVisible ? 'text' : 'password'"
-        v-model="password"
-        id="password"
-        placeholder="Minimum 8 caractères"
-        class="w-full rounded-md border border-grey-200 px-16 py-12"
-        :class="{ invalid: password.length < 8 }"
-        required
-      />
-      <input
-        :type="isPasswordVisible ? 'text' : 'password'"
-        v-model="passwordConfirm"
-        id="password-confirm"
-        placeholder="Minimum 8 caractères"
-        class="w-full rounded-md border border-grey-200 px-16 py-12"
-        :class="{ invalid: !isPasswordConfirmed }"
-        required
-      />
-      <button
-        class="btn | w-full"
-        @click="isPasswordVisible = !isPasswordVisible"
-      >
-        {{ isPasswordVisible ? 'masquer' : 'afficher' }}
-      </button>
-      <button
-        class="btn | w-full"
-        :class="'btn--' + passwordBtn.status"
-        :disabled="!isPasswordConfirmed ? true : undefined"
-        @click="updatePassword"
-      >
-        {{ passwordBtn.text }}
-      </button>
-    </li>
-    <li>
-      <p>Client : {{ user.client.name }}</p>
-    </li>
-    <li v-if="user.hasOwnProperty('projects')">
-      <p>Nombre de projets : {{ Object.values(user.projects).length }}</p>
-    </li>
-  </ul>
+  <main class="flex flex-col items-stretch | w-full">
+
+    <header v-if="user.name" class="flex | bg-white rounded-2xl | p-8" style="height:3.5rem">
+      <h1 class="font-serif | px-8">{{ user.name }}</h1>
+    </header>
+
+    <div class="auto-grid" style="--min:20rem">
+
+      <section :class="{ 'is-editing': isEditingEmail }" class="bg-white rounded-2xl px-16 py-24" aria-labelledby="email-label">
+        <h2 class="sr-only" id="email-label">Email</h2>
+        <div class="field | flow w-full" role="group" aria-labelledby="username">
+          <label for="username" class="text-grey-700">Email</label>
+          <input
+            v-if="isEditingEmail"
+            type="email"
+            v-model="email"
+            id="username"
+            placeholder="mail@exemple.com"
+            autocomplete="username"
+            class="w-full rounded-md border border-grey-200 px-16 py-12 mt-8"
+            :class="{ invalid: !isEmailValid }"
+            required
+          />
+          <p v-else>{{ user.email }}</p>
+          <button
+            v-if="isEditingEmail"
+            class="btn | w-full text-md"
+            :class="'btn--' + emailBtn.status"
+            :disabled="!isEmailValid"
+            @click="updateEmail"
+          >
+            {{ emailBtn.text }}
+          </button>
+          <button v-else @click="isEditingEmail = true" class="btn | w-full text-md">
+            Modifier
+          </button>
+        </div>
+      </section>
+
+      <section :class="{ 'is-editing': isEditingEmail }" class="bg-white rounded-2xl px-16 py-24" aria-labelledby="password-label">
+        <h2 class="sr-only" id="password-label">Mot de passe</h2>
+        <div class="flow">
+          <div class="field | w-full" role="group" aria-labelledby="password">
+            <label for="password" class="text-grey-700">Nouveau mot de passe</label>
+            <input
+              :type="isPasswordVisible ? 'text' : 'password'"
+              v-model="password"
+              id="password"
+              placeholder="Minimum 8 caractères"
+              autocomplete="current-password"
+              autocapitalize="none"
+              autocorrect="off"
+              spellcheck="false"
+              class="w-full rounded-md border border-grey-200 px-16 py-12 mt-8"
+              :class="{ invalid: password.length < 8 }"
+              required
+            />
+            <button
+              class="btn btn--white btn--icon"
+              type="button"
+              :aria-pressed="isPasswordVisible ? 'true' : 'false'"
+              aria-controls="password"
+              @click="isPasswordVisible = !isPasswordVisible"
+              :title="isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'"
+            >
+              <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                <path v-if="isPasswordVisible" d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"></path>
+                <path v-else d="M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z"></path>
+              </svg>
+              <span class="sr-only">{{ isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe' }}</span>
+            </button>
+          </div>
+          <div class="field | w-full" role="group" aria-labelledby="password-confirm">
+            <label for="passwordConfirm" class="text-grey-700">Confirmez le nouveau mot de passe…</label>
+            <input
+              :type="isPasswordVisible ? 'text' : 'password'"
+              v-model="passwordConfirm"
+              id="password-confirm"
+              placeholder="Minimum 8 caractères"
+              autocomplete="current-password"
+              autocapitalize="none"
+              autocorrect="off"
+              spellcheck="false"
+              class="w-full rounded-md border border-grey-200 px-16 py-12 mt-8"
+              :class="{ invalid: !isPasswordConfirmed }"
+              required
+            />
+            <button
+              class="btn btn--white btn--icon"
+              type="button"
+              :aria-pressed="isPasswordVisible ? 'true' : 'false'"
+              aria-controls="password-confirm"
+              @click="isPasswordVisible = !isPasswordVisible"
+              :title="isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe'"
+            >
+              <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                <path v-if="isPasswordVisible" d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"></path>
+                <path v-else d="M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z"></path>
+              </svg>
+              <span class="sr-only">{{ isPasswordVisible ? 'Masquer le mot de passe' : 'Afficher le mot de passe' }}</span>
+            </button>
+          </div>
+          <button
+            class="btn | w-full text-md"
+            :class="'btn--' + passwordBtn.status"
+            :disabled="!isPasswordConfirmed ? true : undefined"
+            @click="updatePassword"
+          >
+            {{ passwordBtn.text }}
+          </button>
+        </div>
+      </section>
+
+      <section class="bg-white rounded-2xl px-16 py-24" aria-labelledby="client-label">
+        <h2 id="client-label" class="text-grey-700 mb-16">Client</h2>
+        <div class="flex" style="--column-gap: 2rem">
+          <img :src="user.client.logo" :alt="'logo' + user.client.name" class="rounded-md" width="72" height="72">
+          <p class="font-serif text-lg">{{ user.client.name }}</p>
+        </div>
+      </section>
+
+      <section v-if="user.hasOwnProperty('projects')" class="bg-white rounded-2xl px-16 py-24" aria-labelledby="projects-label">
+        <h2 class="sr-only" id="projects-label">Projets</h2>
+        <p class="text-grey-700 mb-16">Nombre de projets</p>
+        <p class="text-xl">{{ Object.values(user.projects).length }}</p>
+      </section>
+
+    </div>
+  </main>
 </template>
 <script setup>
 import { storeToRefs } from 'pinia';
@@ -82,7 +139,7 @@ const { user } = storeToRefs(useUserStore());
 // Email
 const email = ref('');
 const emailBtn = ref({
-  text: 'mettre à jour',
+  text: 'Mettre à jour',
   status: 'ready',
 });
 const isEditingEmail = ref(false);
@@ -109,7 +166,7 @@ async function updateEmail() {
     emailBtn.value.status = 'succeed';
 
     setTimeout(() => {
-      emailBtn.value.text = 'mettre à jour';
+      emailBtn.value.text = 'Mettre à jour';
       emailBtn.value.status = 'ready';
     }, 1500);
   } else {
@@ -120,7 +177,7 @@ async function updateEmail() {
 // Password
 const password = ref('');
 const passwordBtn = ref({
-  text: 'mettre à jour',
+  text: 'Mettre à jour',
   status: 'ready',
 });
 const passwordConfirm = ref('');
@@ -150,7 +207,7 @@ async function updatePassword() {
     passwordBtn.value.status = 'succeed';
 
     setTimeout(() => {
-      passwordBtn.value.text = 'mettre à jour';
+      passwordBtn.value.text = 'Mettre à jour';
       passwordBtn.value.status = 'ready';
     }, 1500);
   } else {