database integration

src/App.vue

@@ -1,5 +1,20 @@
 <script setup>
+import { computed, onMounted } from 'vue'
 import { RouterLink, RouterView } from 'vue-router'
+
+import { useAuthStore } from './stores/authStore'
+
+const auth = useAuthStore()
+
+const accountLabel = computed(() => auth.user?.name || auth.user?.email || 'Account')
+
+onMounted(() => {
+  auth.bootstrap()
+})
+
+async function handleLogout() {
+  await auth.logout()
+}
 </script>
 
 <template>
@@ -9,6 +24,13 @@ import { RouterLink, RouterView } from 'vue-router'
       <nav class="app-nav">
         <RouterLink to="/" class="nav-link">Home</RouterLink>
         <RouterLink to="/capture" class="nav-link">Capture</RouterLink>
+
+        <RouterLink v-if="auth.isAuthenticated" to="/account" class="nav-link">{{ accountLabel }}</RouterLink>
+        <RouterLink v-else to="/login" class="nav-link">Login</RouterLink>
+
+        <button v-if="auth.isAuthenticated" type="button" class="nav-link nav-button" @click="handleLogout">
+          Logout
+        </button>
       </nav>
     </header>
 
@@ -94,6 +116,11 @@ h1 {
   transition: all 0.2s ease;
 }
 
+.nav-button {
+  cursor: pointer;
+  font: inherit;
+}
+
 .nav-link.router-link-exact-active,
 .nav-link:hover {
   background: #fff;