Added beginning of login functionality

api/auth_api.py

@@ -159,3 +159,8 @@ def me():
     except jwt.InvalidTokenError:
         return jsonify({'error': 'Invalid token', 'code': INVALID_TOKEN}), 401
 
+@auth_api.route('/logout', methods=['POST'])
+def logout():
+    resp = jsonify({'message': 'Logged out'})
+    resp.set_cookie('token', '', expires=0, httponly=True, secure=True, samesite='Strict')
+    return resp, 200

web/vue-app/src/components/LoginButton.vue

@@ -9,6 +9,7 @@ const show = ref(false)
 const pin = ref('')
 const error = ref('')
 const pinInput = ref<HTMLInputElement | null>(null)
+const dropdownOpen = ref(false)
 
 const open = async () => {
   pin.value = ''
@@ -46,6 +47,21 @@ const handleLogout = () => {
   router.push('/child')
 }
 
+function toggleDropdown() {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+async function signOut() {
+  try {
+    await fetch('/api/logout', { method: 'POST' })
+    logoutParent()
+    router.push('/auth')
+  } catch {
+    // Optionally show error
+  }
+  dropdownOpen.value = false
+}
+
 onMounted(() => {
   eventBus.on('open-login', open)
 })
@@ -55,13 +71,42 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="login-button-root">
+  <div class="login-button-root" style="position: relative">
     <button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login" class="login-btn">
       Parent
     </button>
-    <button v-else @click="handleLogout" aria-label="Parent logout" class="login-btn">
+    <div v-else style="display: inline-block; position: relative">
+      <button
+        @click="toggleDropdown"
+        aria-label="Parent menu"
+        class="login-btn"
+        style="min-width: 80px"
+      >
+        Parent ▼
+      </button>
+      <div
+        v-if="dropdownOpen"
+        class="dropdown-menu"
+        style="
+          position: absolute;
+          right: 0;
+          top: 100%;
+          background: #fff;
+          border: 1px solid #e6e6e6;
+          border-radius: 8px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+          min-width: 120px;
+          z-index: 10;
+        "
+      >
+        <button class="menu-item" @click="handleLogout" style="width: 100%; text-align: left">
           Log out
         </button>
+        <button class="menu-item danger" @click="signOut" style="width: 100%; text-align: left">
+          Sign out
+        </button>
+      </div>
+    </div>
 
     <div v-if="show" class="modal-backdrop" @click.self="close">
       <div class="modal">
@@ -115,4 +160,27 @@ onUnmounted(() => {
 
 .login-button-root {
 }
+
+.dropdown-menu {
+  padding: 0.5rem 0;
+}
+.menu-item {
+  padding: 1rem 0.9rem;
+  background: transparent;
+  border: 0;
+  text-align: left;
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--menu-item-color, #333);
+  font-size: 0.9rem;
+}
+.menu-item + .menu-item {
+  margin-top: 0.5rem;
+}
+.menu-item:hover {
+  background: var(--menu-item-hover-bg, rgba(0, 0, 0, 0.04));
+}
+.menu-item.danger {
+  color: var(--menu-item-danger, #ff4d4f);
+}
 </style>

web/vue-app/src/components/auth/Login.vue

@@ -127,7 +127,7 @@ import {
   ALREADY_VERIFIED,
 } from '@/common/errorCodes'
 import { parseErrorResponse, isEmailValid } from '@/common/api'
-import { loginUser } from '@/stores/auth' // <-- add this import
+import { loginUser } from '@/stores/auth'
 
 const router = useRouter()
 

web/vue-app/src/router/index.ts

@@ -168,11 +168,6 @@ router.beforeEach(async (to, from, next) => {
     })
   }
 
-  console.log('Auth Guard:', {
-    to: to.fullPath,
-    isUserLoggedIn: isUserLoggedIn.value,
-    isParentAuthenticated: isParentAuthenticated.value,
-  })
   // Always allow access to /auth routes
   if (to.path.startsWith('/auth')) {
     return next()