modif header et page mon compte

frontend/src/components/Header.vue

 <script setup>
+import { ref, onMounted } from 'vue';
+
+
+let isConnected = ref(false);
+let firstname = ref('');
+
+function checkConnection() {
+    const req = fetch('http://localhost:3000/user', { credentials: 'include' }).then(response => {
+        if (response.ok) {
+            isConnected.value = true;
+            return response.json();
+        } else {
+            isConnected.value = false;
+            return null;
+        }
+    }).then(data => {
+        if (data) {
+            firstname.value = data.firstname;
+        }
+
+    }).catch(erreur => {
+        console.error('Erreur lors de l\'appel API :', erreur);
+        isConnected.value = false;
+    });
+
+}
+
+function logout() {
+
+    const req = fetch('http://localhost:3000/user/logout', { credentials: 'include' }).then(response => {
+        if (response.ok) {
+            isConnected.value = false;
+        }
+    }).catch(erreur => {
+        console.error('Erreur lors de l\'appel API :', erreur);
+    });
+
+}
+
+onMounted(() => {
+    checkConnection();
+});
+
+
 </script>
 
 <template>
@@ -7,8 +51,11 @@
             <div>Projet S5</div>
         </router-link>
         <nav>
-            <router-link to="/inscription">Inscription</router-link>
-            <router-link to="/connexion">Connexion</router-link>
+            <router-link v-if="!isConnected" to="/inscription">Inscription</router-link>
+            <router-link v-if="!isConnected" to="/connexion">Connexion</router-link>
+            <router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link>
+            <button v-if="isConnected" @click="logout">Déconnexion</button>
+
         </nav>
     </header>
 </template>

frontend/src/views/MonCompte.vue

 <script setup>
-    import Header from '@/components/Header.vue'
+import Header from '@/components/Header.vue'
+import { ref, onMounted } from 'vue';
+
+
+let username = ref('');
+let firstname = ref('');
+let lastname = ref('');
+let birthdate = ref('');
+
+function getUserInfo() {
+    const req = fetch('http://localhost:3000/user', { credentials: 'include' }).then(response => {
+        if (response.ok) {
+            return response.json();
+        }
+    }).then(data => {
+        if (data) {
+            username.value = data.username;
+            firstname.value = data.firstname;
+            lastname.value = data.lastname;
+            birthdate.value = data.birthdate;
+        }
+
+    }).catch(erreur => {
+        console.error('Erreur lors de l\'appel API :', erreur);
+        isConnected.value = false;
+    });
+
+}
+
+onMounted(() => {
+    getUserInfo();
+});
 
 </script>
 
@@ -10,17 +41,15 @@
 
     <h1>Mes informations</h1>
     <h3>Personnelles :</h3>
-    <h5>Nom :{lastName}</h5>
-    <h5>Prénom :{name}</h5>
-    <h5>Date de naissance :</h5>
+    <h5>Nom :{{ lastname }}</h5>
+    <h5>Prénom :{{ firstname }}</h5>
+    <h5>Date de naissance : {{ birthdate }}</h5>
     <h3>Films préférés :</h3>
     <h3>Sécurité :</h3>
     <button>Changer de mot de login</button>
     <br>
     <br>
     <button>Changer de mot de passe</button>
-
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
\ No newline at end of file
\ No newline at end of file