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

<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>