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] 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>