✨ Complete all user management with forms and DB

modules/app/components/FOHeader.vue

@@ -5,38 +5,57 @@ defineOptions({
   name: 'FOHeader',
 })
 
-const links = [{
-  label: 'Les actus',
-  to: '/'
-}, {
-  label: 'Rejoindre FO',
-  to: '/join'
-}]
-
-const user = useSupabaseUser()
+const router = useRouter()
+const { user, displayName, waitingMailValidation, loading } = useProfile()
 const { auth } = useSupabaseClient<Database>()
 
+const links = computed(() => {
+  const tmp = []
+
+  if (!user.value) {
+    tmp.push({
+      label: 'Rejoindre FO',
+      to: '/join'
+    })
+  } else {
+    tmp.push({
+      label: 'Les actus',
+      to: '/news'
+    })
+  }
+
+  return tmp
+})
+
 const signOut = async () => {
   const { error } = await auth.signOut()
   if (error) console.log(error)
+  router.push('/')
 }
 </script>
 
 <template>
   <UHeader :links="links" class="bg-white dark:bg-gray-900 rounded-xl shadow-lg mx-4 mt-4">
     <template #left>
-      <!-- <p class="font-logo text-orange-500 stroke-5 stroke-black-500 text-hlogo">Force Orange</p> -->
-      <NuxtImg src="/assets/img/logo-fo.svg" alt="Force Orange" />
+      <NuxtLink to="/">
+        <NuxtImg src="/assets/img/logo-fo.svg" alt="Force Orange" />
+      </NuxtLink>
     </template>
 
     <template #right>
       <UColorModeButton />
-      {{ user?.user_metadata.firstname }}
-      <UButton v-if="user" @click="signOut" variant="soft">Se déconnecter</UButton>
+
+      <template v-if="user">
+        <UButton to="/profile" :loading="loading" icon="i-mdi-account-circle">
+          {{ displayName }}
+        </UButton>
+        <UButton @click="signOut" variant="soft">Se déconnecter</UButton>
+      </template>
+
       <UButton v-else to="/signin" variant="soft">Se connecter</UButton>
     </template>
   </UHeader>
 
-  <UNotification v-if="user && !user?.email_confirmed_at" title="N'oubliez pas de confirmer votre adresse de courriel !"
-    :id="1" :timeout="0" />
+  <UNotification v-if="waitingMailValidation" title="N'oublies pas de confirmer ton adresse de courriel !" :id="1"
+    :timeout="0" />
 </template>