Added beginning of login functionality

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

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { eventBus } from '@/common/eventBus'
+import { authenticateParent, isParentAuthenticated, logoutParent } from '../../stores/auth'
+
+const router = useRouter()
+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 = ''
+  error.value = ''
+  show.value = true
+  await nextTick()
+  pinInput.value?.focus()
+}
+
+const close = () => {
+  show.value = false
+  error.value = ''
+}
+
+const submit = () => {
+  const isDigits = /^\d{4,6}$/.test(pin.value)
+  if (!isDigits) {
+    error.value = 'Enter 4–6 digits'
+    return
+  }
+
+  if (pin.value !== '1179') {
+    error.value = 'Incorrect PIN'
+    return
+  }
+
+  // Authenticate parent and navigate
+  authenticateParent()
+  close()
+  router.push('/parent')
+}
+
+const handleLogout = () => {
+  logoutParent()
+  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)
+})
+onUnmounted(() => {
+  eventBus.off('open-login', open)
+})
+</script>
+
+<template>
+  <div class="login-button-root" style="position: relative">
+    <button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login" class="login-btn">
+      Parent
+    </button>
+    <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">
+        <h3>Enter parent PIN</h3>
+        <form @submit.prevent="submit">
+          <input
+            ref="pinInput"
+            v-model="pin"
+            inputmode="numeric"
+            pattern="\d*"
+            maxlength="6"
+            placeholder="4–6 digits"
+            class="pin-input"
+          />
+          <div class="actions">
+            <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
+            <button type="submit" class="btn btn-primary">OK</button>
+          </div>
+        </form>
+        <div v-if="error" class="error">{{ error }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+/* modal */
+
+.modal h3 {
+  margin-bottom: 0.5rem;
+  font-size: 1.05rem;
+}
+
+.pin-input {
+  width: 100%;
+  padding: 0.5rem 0.6rem;
+  font-size: 1rem;
+  border-radius: 8px;
+  border: 1px solid #e6e6e6;
+  margin-bottom: 0.6rem;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  margin-bottom: 0.4rem;
+}
+
+.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>