Ryan Kegel
ccfc710753
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Failing after 1m37s
624 lines
15 KiB
Vue
624 lines
15 KiB
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,
|
||
isParentPersistent,
|
||
logoutParent,
|
||
logoutUser,
|
||
} from '../../stores/auth'
|
||
import { getCachedImageUrl, getCachedImageBlob } from '@/common/imageCache'
|
||
import '@/assets/styles.css'
|
||
import ModalDialog from './ModalDialog.vue'
|
||
|
||
const router = useRouter()
|
||
const show = ref(false)
|
||
const pin = ref('')
|
||
const error = ref('')
|
||
const stayInParentMode = ref(false)
|
||
const pinInput = ref<HTMLInputElement | null>(null)
|
||
const dropdownOpen = ref(false)
|
||
const dropdownRef = ref<HTMLElement | null>(null)
|
||
const avatarButtonRef = ref<HTMLButtonElement | null>(null)
|
||
const focusedMenuIndex = ref(0)
|
||
|
||
// User profile data
|
||
const userImageId = ref<string | null>(null)
|
||
const userFirstName = ref<string>('')
|
||
const userEmail = ref<string>('')
|
||
const profileLoading = ref(true)
|
||
const avatarImageUrl = ref<string | null>(null)
|
||
const dropdownAvatarImageUrl = ref<string | null>(null)
|
||
|
||
// Compute avatar initial
|
||
const avatarInitial = ref<string>('?')
|
||
|
||
// Fetch user profile
|
||
async function fetchUserProfile() {
|
||
try {
|
||
const res = await fetch('/api/user/profile', { credentials: 'include' })
|
||
if (!res.ok) {
|
||
console.error('Failed to fetch user profile')
|
||
profileLoading.value = false
|
||
return
|
||
}
|
||
const data = await res.json()
|
||
userImageId.value = data.image_id || null
|
||
userFirstName.value = data.first_name || ''
|
||
userEmail.value = data.email || ''
|
||
|
||
// Update avatar initial
|
||
avatarInitial.value = userFirstName.value ? userFirstName.value.charAt(0).toUpperCase() : '?'
|
||
|
||
profileLoading.value = false
|
||
|
||
// Load cached image if available
|
||
if (userImageId.value) {
|
||
await loadAvatarImages(userImageId.value)
|
||
}
|
||
} catch (e) {
|
||
console.error('Error fetching user profile:', e)
|
||
profileLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function loadAvatarImages(imageId: string) {
|
||
try {
|
||
const blob = await getCachedImageBlob(imageId)
|
||
// Clean up previous URLs
|
||
if (avatarImageUrl.value) URL.revokeObjectURL(avatarImageUrl.value)
|
||
if (dropdownAvatarImageUrl.value) URL.revokeObjectURL(dropdownAvatarImageUrl.value)
|
||
avatarImageUrl.value = URL.createObjectURL(blob)
|
||
dropdownAvatarImageUrl.value = URL.createObjectURL(blob)
|
||
} catch (e) {
|
||
avatarImageUrl.value = null
|
||
dropdownAvatarImageUrl.value = null
|
||
}
|
||
}
|
||
|
||
const open = async () => {
|
||
// Check if user has a pin
|
||
try {
|
||
const res = await fetch('/api/user/has-pin', { credentials: 'include' })
|
||
const data = await res.json()
|
||
if (!res.ok) throw new Error(data.error || 'Error checking PIN')
|
||
if (!data.has_pin) {
|
||
console.log('No PIN set, redirecting to setup')
|
||
// Route to PIN setup view
|
||
router.push('/parent/pin-setup')
|
||
return
|
||
}
|
||
} catch (e) {
|
||
error.value = 'Network error'
|
||
return
|
||
}
|
||
pin.value = ''
|
||
error.value = ''
|
||
show.value = true
|
||
await nextTick()
|
||
pinInput.value?.focus()
|
||
}
|
||
|
||
const close = () => {
|
||
show.value = false
|
||
error.value = ''
|
||
stayInParentMode.value = false
|
||
}
|
||
|
||
const submit = async () => {
|
||
const isDigits = /^\d{4,6}$/.test(pin.value)
|
||
if (!isDigits) {
|
||
error.value = 'Enter 4–6 digits'
|
||
return
|
||
}
|
||
|
||
try {
|
||
const res = await fetch('/api/user/check-pin', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ pin: pin.value }),
|
||
credentials: 'include',
|
||
})
|
||
const data = await res.json()
|
||
if (!res.ok) {
|
||
error.value = data.error || 'Error validating PIN'
|
||
return
|
||
}
|
||
if (!data.valid) {
|
||
error.value = 'Incorrect PIN'
|
||
pin.value = ''
|
||
await nextTick()
|
||
pinInput.value?.focus()
|
||
return
|
||
}
|
||
// Authenticate parent and navigate
|
||
authenticateParent(stayInParentMode.value)
|
||
close()
|
||
router.push('/parent')
|
||
} catch (e) {
|
||
error.value = 'Network error'
|
||
}
|
||
}
|
||
|
||
function handlePinInput(event: Event) {
|
||
const target = event.target as HTMLInputElement
|
||
pin.value = target.value.replace(/\D/g, '').slice(0, 6)
|
||
}
|
||
|
||
const handleLogout = () => {
|
||
logoutParent()
|
||
router.push('/child')
|
||
}
|
||
|
||
function toggleDropdown() {
|
||
dropdownOpen.value = !dropdownOpen.value
|
||
if (dropdownOpen.value) {
|
||
focusedMenuIndex.value = 0
|
||
}
|
||
}
|
||
|
||
function closeDropdown() {
|
||
dropdownOpen.value = false
|
||
focusedMenuIndex.value = 0
|
||
avatarButtonRef.value?.focus()
|
||
}
|
||
|
||
function handleKeyDown(event: KeyboardEvent) {
|
||
if (!dropdownOpen.value) {
|
||
// Handle avatar button keyboard
|
||
if (event.key === 'Enter' || event.key === ' ') {
|
||
event.preventDefault()
|
||
if (isParentAuthenticated.value) {
|
||
toggleDropdown()
|
||
} else {
|
||
open()
|
||
}
|
||
}
|
||
return
|
||
}
|
||
|
||
// Handle dropdown keyboard navigation
|
||
const menuItems = 3 // Profile, Child Mode, Sign Out
|
||
|
||
switch (event.key) {
|
||
case 'ArrowDown':
|
||
event.preventDefault()
|
||
focusedMenuIndex.value = (focusedMenuIndex.value + 1) % menuItems
|
||
break
|
||
case 'ArrowUp':
|
||
event.preventDefault()
|
||
focusedMenuIndex.value = (focusedMenuIndex.value - 1 + menuItems) % menuItems
|
||
break
|
||
case 'Enter':
|
||
case ' ':
|
||
event.preventDefault()
|
||
executeMenuItem(focusedMenuIndex.value)
|
||
break
|
||
case 'Escape':
|
||
event.preventDefault()
|
||
closeDropdown()
|
||
break
|
||
case 'Tab':
|
||
closeDropdown()
|
||
break
|
||
}
|
||
}
|
||
|
||
function executeMenuItem(index: number) {
|
||
switch (index) {
|
||
case 0:
|
||
goToProfile()
|
||
break
|
||
case 1:
|
||
handleLogout()
|
||
closeDropdown()
|
||
break
|
||
case 2:
|
||
signOut()
|
||
break
|
||
}
|
||
}
|
||
|
||
async function signOut() {
|
||
try {
|
||
await fetch('/api/auth/logout', { method: 'POST' })
|
||
logoutUser()
|
||
router.push('/')
|
||
} catch {
|
||
// Optionally show error
|
||
}
|
||
closeDropdown()
|
||
}
|
||
|
||
function goToProfile() {
|
||
router.push('/parent/profile')
|
||
closeDropdown()
|
||
}
|
||
|
||
function handleClickOutside(event: MouseEvent) {
|
||
if (
|
||
dropdownOpen.value &&
|
||
dropdownRef.value &&
|
||
!dropdownRef.value.contains(event.target as Node)
|
||
) {
|
||
closeDropdown()
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
eventBus.on('open-login', open)
|
||
eventBus.on('profile_updated', fetchUserProfile)
|
||
document.addEventListener('mousedown', handleClickOutside)
|
||
fetchUserProfile()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
eventBus.off('open-login', open)
|
||
eventBus.off('profile_updated', fetchUserProfile)
|
||
document.removeEventListener('mousedown', handleClickOutside)
|
||
|
||
// Revoke object URL to free memory
|
||
if (avatarImageUrl.value) URL.revokeObjectURL(avatarImageUrl.value)
|
||
if (dropdownAvatarImageUrl.value) URL.revokeObjectURL(dropdownAvatarImageUrl.value)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div style="position: relative">
|
||
<button
|
||
ref="avatarButtonRef"
|
||
@click="isParentAuthenticated ? toggleDropdown() : open()"
|
||
@keydown="handleKeyDown"
|
||
:aria-label="isParentAuthenticated ? 'Parent menu' : 'Parent login'"
|
||
aria-haspopup="menu"
|
||
:aria-expanded="isParentAuthenticated && dropdownOpen ? 'true' : 'false'"
|
||
class="avatar-btn"
|
||
>
|
||
<img
|
||
v-if="avatarImageUrl && !profileLoading"
|
||
:src="avatarImageUrl"
|
||
:alt="userFirstName || 'User avatar'"
|
||
class="avatar-image"
|
||
/>
|
||
<span v-else class="avatar-text">{{ profileLoading ? '...' : avatarInitial }}</span>
|
||
</button>
|
||
<span
|
||
v-if="isParentAuthenticated && isParentPersistent"
|
||
class="persistent-badge"
|
||
aria-label="Persistent parent mode active"
|
||
>🔒</span
|
||
>
|
||
|
||
<Transition name="slide-fade">
|
||
<div
|
||
v-if="isParentAuthenticated && dropdownOpen"
|
||
ref="dropdownRef"
|
||
role="menu"
|
||
class="dropdown-menu"
|
||
>
|
||
<div class="dropdown-header">
|
||
<img
|
||
v-if="avatarImageUrl"
|
||
:src="avatarImageUrl"
|
||
:alt="userFirstName || 'User avatar'"
|
||
class="dropdown-avatar"
|
||
/>
|
||
<span v-else class="dropdown-avatar-initial">{{ avatarInitial }}</span>
|
||
<div class="dropdown-user-info">
|
||
<div class="dropdown-user-name">{{ userFirstName || 'User' }}</div>
|
||
<div v-if="userEmail" class="dropdown-user-email">{{ userEmail }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
role="menuitem"
|
||
:aria-selected="focusedMenuIndex === 0"
|
||
:class="['menu-item', { focused: focusedMenuIndex === 0 }]"
|
||
@mouseenter="focusedMenuIndex = 0"
|
||
@click="goToProfile"
|
||
>
|
||
<span class="menu-icon-stub">
|
||
<img
|
||
src="/profile.png"
|
||
alt="Profile"
|
||
style="width: 20px; height: 20px; object-fit: contain; vertical-align: middle"
|
||
/>
|
||
</span>
|
||
<span>Profile</span>
|
||
</button>
|
||
<button
|
||
role="menuitem"
|
||
:aria-selected="focusedMenuIndex === 1"
|
||
:class="['menu-item', { focused: focusedMenuIndex === 1 }]"
|
||
@mouseenter="focusedMenuIndex = 1"
|
||
@click="
|
||
() => {
|
||
handleLogout()
|
||
closeDropdown()
|
||
}
|
||
"
|
||
>
|
||
<span class="menu-icon-stub">
|
||
<img
|
||
src="/child-mode.png"
|
||
alt="Child Mode"
|
||
style="width: 20px; height: 20px; object-fit: contain; vertical-align: middle"
|
||
/>
|
||
</span>
|
||
<span>Child Mode</span>
|
||
</button>
|
||
<button
|
||
role="menuitem"
|
||
:aria-selected="focusedMenuIndex === 2"
|
||
:class="['menu-item', 'danger', { focused: focusedMenuIndex === 2 }]"
|
||
@mouseenter="focusedMenuIndex = 2"
|
||
@click="signOut"
|
||
>
|
||
<span class="menu-icon-stub">
|
||
<img
|
||
src="/sign-out.png"
|
||
alt="Sign out"
|
||
style="width: 20px; height: 20px; object-fit: contain; vertical-align: middle"
|
||
/>
|
||
</span>
|
||
<span>Sign out</span>
|
||
</button>
|
||
</div>
|
||
</Transition>
|
||
|
||
<ModalDialog v-if="show" title="Enter parent PIN" @click.self="close" @close="close">
|
||
<form @submit.prevent="submit">
|
||
<input
|
||
ref="pinInput"
|
||
v-model="pin"
|
||
@input="handlePinInput"
|
||
inputmode="numeric"
|
||
pattern="\d*"
|
||
maxlength="6"
|
||
placeholder="4–6 digits"
|
||
class="pin-input"
|
||
/>
|
||
<label class="stay-label">
|
||
<input type="checkbox" v-model="stayInParentMode" class="stay-checkbox" />
|
||
Stay in parent mode on this device
|
||
</label>
|
||
<div class="actions modal-actions">
|
||
<button type="button" class="btn btn-secondary" @click="close">Cancel</button>
|
||
<button type="submit" class="btn btn-primary" :disabled="pin.length < 4">OK</button>
|
||
</div>
|
||
</form>
|
||
<div v-if="error" class="error modal-message">{{ error }}</div>
|
||
</ModalDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.error {
|
||
color: var(--error);
|
||
}
|
||
|
||
.avatar-btn {
|
||
width: 44px;
|
||
min-width: 44px;
|
||
max-width: 44px;
|
||
height: 44px;
|
||
min-height: 44px;
|
||
max-height: 44px;
|
||
margin: 0;
|
||
background: var(--button-bg, #fff);
|
||
border: 0;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
transition:
|
||
transform 0.18s,
|
||
box-shadow 0.18s;
|
||
}
|
||
|
||
.avatar-btn:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||
}
|
||
|
||
.avatar-btn:focus-visible {
|
||
outline: 3px solid var(--primary, #667eea);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.avatar-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.avatar-text {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--button-text, #667eea);
|
||
user-select: none;
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.avatar-text {
|
||
font-size: 1.2rem;
|
||
}
|
||
}
|
||
|
||
.pin-input {
|
||
width: 100%;
|
||
padding: 0.5rem 0.6rem;
|
||
font-size: 1rem;
|
||
border-radius: 8px;
|
||
border: 1px solid #e6e6e6;
|
||
margin-bottom: 0.8rem;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
|
||
.stay-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.9rem;
|
||
color: var(--form-label, #444);
|
||
cursor: pointer;
|
||
margin-bottom: 1rem;
|
||
user-select: none;
|
||
}
|
||
|
||
.stay-checkbox {
|
||
width: 16px;
|
||
height: 16px;
|
||
accent-color: var(--btn-primary, #667eea);
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.persistent-badge {
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: -2px;
|
||
font-size: 10px;
|
||
line-height: 1;
|
||
pointer-events: none;
|
||
user-select: none;
|
||
}
|
||
|
||
.dropdown-menu {
|
||
position: absolute;
|
||
right: 0;
|
||
top: calc(100% + 8px);
|
||
background: var(--form-bg, #fff);
|
||
border: 1px solid var(--form-input-border, #cbd5e1);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||
min-width: 240px;
|
||
z-index: 100;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dropdown-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
|
||
color: #fff;
|
||
}
|
||
|
||
.dropdown-avatar,
|
||
.dropdown-avatar-initial {
|
||
width: 48px;
|
||
height: 48px;
|
||
min-width: 48px;
|
||
min-height: 48px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.dropdown-avatar-initial {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
}
|
||
|
||
.dropdown-user-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.dropdown-user-name {
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.dropdown-user-email {
|
||
font-size: 0.85rem;
|
||
opacity: 0.9;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
width: 100%;
|
||
padding: 14px 16px;
|
||
background: transparent;
|
||
border: 0;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
color: var(--form-label, #444);
|
||
font-size: 0.95rem;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.menu-item.focused {
|
||
background: var(--btn-secondary-hover, #e2e8f0);
|
||
}
|
||
|
||
.menu-item:focus-visible {
|
||
outline: 2px solid var(--primary, #667eea);
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
.menu-item.danger {
|
||
color: var(--btn-danger, #ef4444);
|
||
}
|
||
|
||
.menu-icon-stub {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: var(--form-input-bg, #f8fafc);
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Slide fade animation */
|
||
.slide-fade-enter-active,
|
||
.slide-fade-leave-active {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.slide-fade-enter-from {
|
||
opacity: 0;
|
||
transform: translateY(-8px);
|
||
}
|
||
|
||
.slide-fade-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(-8px);
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.menu-item {
|
||
padding: 12px 14px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.dropdown-menu {
|
||
min-width: 200px;
|
||
}
|
||
}
|
||
</style>
|