login complete (fr)

app/components/main_header.vue

@@ -15,11 +15,26 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: true
+  },
+  logged_in: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 
+
+
 })
 
-
+  function logout() {
+    return fetch("/logout").then(
+      (response) => {
+        if (response.ok) {
+          window.location.reload;
+        }
+      }
+    )
+  }
 
 
 </script>
@@ -33,10 +48,10 @@ const props = defineProps({
             <!----<UDropdownMenu :items="ui_colors_dropdown">
                 <UButton icon="lucide:palette" variant="ghost" color="neutral" />
             </UDropdownMenu>-->
-            <UButton icon="lucide:settings" variant="ghost" color="neutral" :to="props.settings_link ? '/settings/general' : undefined" v-if="loggedIn" />
+            <UButton icon="lucide:settings" variant="ghost" color="neutral" :to="props.settings_link ? '/settings/general' : undefined" v-if="props.logged_in" />
             <UModal :ui="{ overlay: 'bg-black opacity-75', content: 'bg-zinc-950 py-3'}" v-model:open="logout_prompt">
 
-              <UButton icon="lucide:log-out" variant="ghost" color="error" class="hover:cursor-pointer" v-if="loggedIn" />
+              <UButton icon="lucide:log-out" variant="ghost" color="error" class="hover:cursor-pointer" v-if="props.logged_in" />
               
               <template #content>
                 <div class="p-4 text-center">
@@ -46,13 +61,13 @@ const props = defineProps({
                   </p>
                   <div class="flex gap-4 flex-col justify-end">
                     <UButton class="w-full hover:cursor-pointer dark:bg-zinc-900 hover:dark:bg-zinc-800 active:dark:bg-black" variant="soft" color="neutral" @click="logout_prompt = false">No</UButton>
-                    <UButton class="w-full" variant="soft" color="error" to="/logout">Yes</UButton>
+                    <UButton class="w-full" variant="soft" color="error" loading-auto @click="logout()">Yes</UButton>
                   </div>
                 </div>
               </template>
 
             </UModal>
-            <UButton icon="lucide:log-in" variant="soft" color="success" v-if="!loggedIn" to="/login">Login</UButton>
+            <UButton icon="lucide:log-in" variant="soft" color="success" v-if="!props.logged_in" to="/login">Login</UButton>
           </template>
     </UHeader>
 </template>