Basic auth working

src/layouts/MainLayout.vue

@@ -12,6 +12,8 @@
         />
 
         <q-toolbar-title> OYS Borrow a Boat </q-toolbar-title>
+        <div v-if="loggedInUser">Logged in as: {{ loggedInUser.name }}</div>
+        <q-btn flat round dense icon="logout" @click="logout" />
       </q-toolbar>
     </q-header>
 
@@ -20,7 +22,7 @@
         <q-item-label header> Essential Links </q-item-label>
 
         <EssentialLink
-          v-for="link in essentialLinks"
+          v-for="link in linksList"
           :key="link.title"
           v-bind="link"
         />
@@ -33,9 +35,12 @@
   </q-layout>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
+<script setup lang="ts">
 import EssentialLink from 'components/EssentialLink.vue';
+import { account } from 'boot/appwrite';
+import type { Models } from 'appwrite';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 const linksList = [
   {
@@ -46,23 +51,22 @@ const linksList = [
   },
 ];
 
-export default defineComponent({
-  name: 'MainLayout',
+const leftDrawerOpen = ref(false);
 
-  components: {
-    EssentialLink,
-  },
+const loggedInUser = ref<Models.User<Models.Preferences> | null>();
 
-  setup() {
-    const leftDrawerOpen = ref(false);
+const router = useRouter();
 
-    return {
-      essentialLinks: linksList,
-      leftDrawerOpen,
-      toggleLeftDrawer() {
-        leftDrawerOpen.value = !leftDrawerOpen.value;
-      },
-    };
-  },
+account.get().then((result) => {
+  loggedInUser.value = result;
 });
+
+async function logout() {
+  await account.deleteSession('current');
+  router.push({ name: 'login' });
+}
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
 </script>