added auth support

app/components/forms/auth/login-form.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+const email = ref("");
+const password = ref("");
+const {login} = useAuth();
+
+const handleLogin = () => login(email.value, password.value)
+</script>
+
+<template>
+  <form class="password-form" @submit.prevent="handleLogin">
+    <div class="form-group">
+      <label for="email">Email</label>
+      <input id="email" v-model="email" type="email"/>
+    </div>
+
+    <div class="form-group">
+      <label for="password">Password</label>
+      <input id="password" v-model="password" type="password"/>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

app/components/profile-menu.vue

@@ -2,11 +2,13 @@
 const dropdownOpen = ref(false)
 const profileMenu = ref<HTMLElement | null>(null)
 
-function toggleDropdown() {
+const {logout} = useAuth()
+
+const toggleDropdown = () => {
   dropdownOpen.value = !dropdownOpen.value
 }
 
-function onClickOutside(e: MouseEvent) {
+const onClickOutside = (e: MouseEvent) => {
   if (profileMenu.value && !profileMenu.value.contains(e.target as Node)) {
     dropdownOpen.value = false
   }
@@ -26,7 +28,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
       <li>
         <NuxtLink to="/account" @click="dropdownOpen = false">Account</NuxtLink>
       </li>
-      <li>Log Out</li>
+      <li @click="logout">Log Out</li>
     </ul>
   </div>
 </template>