From bc07a0a3b58f1cba6a9a13dbc2fe5dddf0deea59 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 9 Jun 2024 01:12:41 -0400
Subject: [PATCH] Added btn profile + add name user and last name into fields
 when connected

---
 src/layouts/DefaultLayout.vue  |  35 ++++++++++--
 src/views/main/YourProfile.vue | 100 +++++++++++++++++++--------------
 2 files changed, 89 insertions(+), 46 deletions(-)

diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index ca114d9..bf2b032 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -35,7 +35,16 @@
                 </v-btn>
               </v-list-item>
               <v-list-item v-if="currentUser">
-                <v-btn @click="logout()" class="full-width-btn" flat>Déconnecter</v-btn>
+                <router-link :to="{ name: 'yourprofile' }">
+                  <v-btn class="full-width-btn" flat>
+                    <v-icon left class="mr-4">mdi-account-details</v-icon>
+                    <p>Mon profil</p>
+                  </v-btn>
+                </router-link>
+              </v-list-item>
+
+              <v-list-item v-if="currentUser">
+                <v-btn @click="handleLogout" class="full-width-btn" flat>Déconnecter</v-btn>
               </v-list-item>
             </v-list>
           </v-menu>
@@ -80,9 +89,15 @@
             <v-list-item prepend-icon="mdi-handshake" title="Aidez-nous" value="friends"></v-list-item>
           </router-link>
 
+          <router-link :to="{ name: 'yourprofile' }">
+            <v-list-item prepend-icon="mdi-account-details" title="Mon profil" value="friends"> </v-list-item>
+          </router-link>
+
+
           <v-list-item v-if="currentUser" @click="openWalletDialog" prepend-icon="mdi-wallet" title="Bourse"
             value="wallet"></v-list-item>
-          <v-list-item v-if="currentUser" @click="logout()" style="margin-top: 110%;" prepend-icon="mdi-logout"
+
+          <v-list-item v-if="currentUser" @click="handleLogout" style="margin-top: 110%;" prepend-icon="mdi-logout"
             title="Déconnecter" value="logout"></v-list-item>
         </v-list>
       </v-navigation-drawer>
@@ -135,7 +150,6 @@ Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation
             </v-btn>
             <v-btn @click="walletDialog = false" text="Fermer"></v-btn>
           </v-row>
-
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -146,7 +160,10 @@ Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation
 import MyUserModel from "@/models/myUserModel.js";
 import { useClient } from "@/plugins/api.js";
 import { onBeforeMount, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
 const client = useClient();
+const router = useRouter();
 
 const drawer = ref(false);
 const currentUserName = ref("INVITÉ");
@@ -172,7 +189,17 @@ onBeforeMount(async () => {
 
 function logout() {
   localStorage.removeItem('jwt');
-  window.location.reload();
+  currentUser = null;
+  currentUserName.value = "INVITÉ";
+}
+
+function handleLogout() {
+  logout();
+  Reroot();
+}
+
+function Reroot() {
+  router.push('/');
 }
 
 function openWalletDialog() {
diff --git a/src/views/main/YourProfile.vue b/src/views/main/YourProfile.vue
index 127a6d8..df2e6f4 100644
--- a/src/views/main/YourProfile.vue
+++ b/src/views/main/YourProfile.vue
@@ -8,80 +8,97 @@
 
     <v-row justify="center">
       <v-col cols="12">
-
-        <v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
+        <v-img class="profile-banner" max-height="375" :src="bannerImageUrl" cover
           style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
       </v-col>
     </v-row>
-    <v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
+    <v-row style="background-color: #6b0065; height: 100px; margin-top: 0;" align="center">
       <v-col cols="12" class="text-right">
-        <v-btn style="margin-right: 3%"> <v-icon>mdi-pencil</v-icon></v-btn>
+        <v-btn style="margin-right: 3%;"> <v-icon>mdi-pencil</v-icon></v-btn>
       </v-col>
     </v-row>
 
-    <v-row justify="center">
-
-    </v-row>
-
-
     <v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
       <v-container>
-        <v-row>
-          <v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
-            <v-row style="margin-bottom: 20px;">
-              <v-spacer></v-spacer>
-              <v-col style="margin-top: -70px;">
-                <v-row>
-                  <v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
-                </v-row>
-                <v-col>
-                  <v-btn style="margin-top: -30px;">
-                    <v-icon>mdi-pencil</v-icon>
-                  </v-btn>
-                </v-col>
-
-
+        <v-row justify="center">
+          <v-col style="background-color: white; border-radius: 30px;" class="col-shadow" cols="12">
+            <v-row justify="center" style="margin-bottom: 20px;">
+              <v-col cols="auto" class="d-flex justify-center">
+                <v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
+              </v-col>
+              <v-col cols="auto" class="d-flex justify-center align-center">
+                <v-btn style="margin-top: -30px;">
+                  <v-icon>mdi-pencil</v-icon>
+                </v-btn>
               </v-col>
-              <v-spacer></v-spacer>
             </v-row>
-            <p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">User Name</p>
-            <p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
+            <p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">
+              {{ userName }}
+            </p>
+            <p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">
+              {{ firstName }} {{ lastName }}
+            </p>
 
             <v-form>
-              <v-text-field v-model="firstName" label="Prénom"></v-text-field>
-              <v-text-field v-model="lastName" label="Nom"></v-text-field>
-              <v-text-field v-model="titre" label="Titre"></v-text-field>
-              <v-text-field v-model="description" label="Description"></v-text-field>
-
+              <v-text-field variant="solo" v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
+              <v-text-field variant="solo" v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
+              <v-text-field variant="solo" v-model="titre" label="Titre" :readonly="!isEditing"></v-text-field>
+              <v-text-field variant="solo" v-model="description" label="Description"
+                :readonly="!isEditing"></v-text-field>
             </v-form>
-            <v-col class="text-right"> <!-- Aligner le contenu à droite -->
-
+            <v-col class="text-right">
               <router-link :to="{ name: 'creatorfolio' }" class="">
                 <v-btn style="margin-right: 20px;">Retour</v-btn>
               </router-link>
-              <v-btn>Éditer</v-btn>
-
+              <v-btn @click="toggleEdit">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</v-btn>
             </v-col>
-
           </v-col>
-
         </v-row>
       </v-container>
     </v-container>
+
     <FooterLayout></FooterLayout>
   </body>
 </template>
 
-<script setup>
+<script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
-
+import MyUserModel from "@/models/myUserModel.js";
+import { useClient } from "@/plugins/api.js";
+import { onBeforeMount, ref } from 'vue';
 
+const client = useClient();
 
 const profilePictureUrl = ref('/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png');
 const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png');
 
+const firstName = ref('');
+const lastName = ref('');
+const userName = ref('');
+const titre = ref('');
+const description = ref('');
+
+const isEditing = ref(false);
+
+const fetchUserData = async () => {
+  try {
+    const myUser = await client.get("/api/GetMyUser");
+    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
+    firstName.value = currentUserModel.firstName;
+    lastName.value = currentUserModel.lastName;
+    userName.value = currentUserModel.userName;
+    // Assignez d'autres champs si nécessaire
+  } catch (error) {
+    console.error('Error fetching user data:', error);
+  }
+};
+
+const toggleEdit = () => {
+  isEditing.value = !isEditing.value;
+};
+
+onBeforeMount(fetchUserData);
 </script>
 
 <style>
@@ -89,7 +106,6 @@ const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerG
   width: 300px;
   border-radius: 40px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
-
 }
 
 .row-shadow {