front > account : start

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>