front > account : start

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;
+    }
   }
 
 

public/site/templates/account.json.php

@@ -0,0 +1,6 @@
+<?php
+
+echo json_encode([
+  "page" => $genericData,
+  "user" => $userData
+]);

public/site/templates/account.php

@@ -0,0 +1 @@
+<?php snippet('generic-template') ?>

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,

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>