feat: enhance child edit and view components with improved form handling and validation

- Added `requireDirty` prop to `EntityEditForm` for dirty state management.
- Updated `ChildEditView` to handle initial data loading and image selection more robustly.
- Refactored `ChildView` to remove unused reward dialog logic and prevent API calls in child mode.
- Improved type definitions for form fields and initial data in `ChildEditView`.
- Enhanced error handling in form submissions across components.
- Implemented cross-tab logout synchronization on password reset in the auth store.
- Added tests for login and entity edit form functionalities to ensure proper behavior.
- Introduced global fetch interceptor for handling unauthorized responses.
- Documented password reset flow and its implications on session management.

frontend/vue-app/src/common/__tests__/api.interceptor.spec.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+const mockLogoutUser = vi.fn()
+
+vi.mock('@/stores/auth', () => ({
+  logoutUser: () => mockLogoutUser(),
+}))
+
+describe('installUnauthorizedFetchInterceptor', () => {
+  const originalFetch = globalThis.fetch
+
+  beforeEach(() => {
+    vi.resetModules()
+    mockLogoutUser.mockReset()
+    globalThis.fetch = vi.fn()
+  })
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch
+  })
+
+  it('logs out and redirects to /auth on 401 outside auth routes', async () => {
+    const fetchMock = globalThis.fetch as unknown as ReturnType<typeof vi.fn>
+    fetchMock.mockResolvedValue({ status: 401 } as Response)
+
+    window.history.pushState({}, '', '/parent/profile')
+    const redirectSpy = vi.fn()
+
+    const { installUnauthorizedFetchInterceptor, setUnauthorizedRedirectHandlerForTests } =
+      await import('../api')
+    setUnauthorizedRedirectHandlerForTests(redirectSpy)
+    installUnauthorizedFetchInterceptor()
+
+    await fetch('/api/user/profile')
+
+    expect(mockLogoutUser).toHaveBeenCalledTimes(1)
+    expect(redirectSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not redirect when already on auth route', async () => {
+    const fetchMock = globalThis.fetch as unknown as ReturnType<typeof vi.fn>
+    fetchMock.mockResolvedValue({ status: 401 } as Response)
+
+    window.history.pushState({}, '', '/auth/login')
+    const redirectSpy = vi.fn()
+
+    const { installUnauthorizedFetchInterceptor, setUnauthorizedRedirectHandlerForTests } =
+      await import('../api')
+    setUnauthorizedRedirectHandlerForTests(redirectSpy)
+    installUnauthorizedFetchInterceptor()
+
+    await fetch('/api/auth/me')
+
+    expect(mockLogoutUser).toHaveBeenCalledTimes(1)
+    expect(redirectSpy).not.toHaveBeenCalled()
+  })
+
+  it('handles unauthorized redirect only once even for repeated 401 responses', async () => {
+    const fetchMock = globalThis.fetch as unknown as ReturnType<typeof vi.fn>
+    fetchMock.mockResolvedValue({ status: 401 } as Response)
+
+    window.history.pushState({}, '', '/parent/tasks')
+    const redirectSpy = vi.fn()
+
+    const { installUnauthorizedFetchInterceptor, setUnauthorizedRedirectHandlerForTests } =
+      await import('../api')
+    setUnauthorizedRedirectHandlerForTests(redirectSpy)
+    installUnauthorizedFetchInterceptor()
+
+    await fetch('/api/task/add', { method: 'PUT' })
+    await fetch('/api/image/list?type=2')
+
+    expect(mockLogoutUser).toHaveBeenCalledTimes(1)
+    expect(redirectSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not log out for non-401 responses', async () => {
+    const fetchMock = globalThis.fetch as unknown as ReturnType<typeof vi.fn>
+    fetchMock.mockResolvedValue({ status: 200 } as Response)
+
+    window.history.pushState({}, '', '/parent')
+    const redirectSpy = vi.fn()
+
+    const { installUnauthorizedFetchInterceptor, setUnauthorizedRedirectHandlerForTests } =
+      await import('../api')
+    setUnauthorizedRedirectHandlerForTests(redirectSpy)
+    installUnauthorizedFetchInterceptor()
+
+    await fetch('/api/child/list')
+
+    expect(mockLogoutUser).not.toHaveBeenCalled()
+    expect(redirectSpy).not.toHaveBeenCalled()
+  })
+})

frontend/vue-app/src/common/__tests__/backendEvents.spec.ts

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h, toRef } from 'vue'
+import { useBackendEvents } from '../backendEvents'
+
+const { emitMock } = vi.hoisted(() => ({
+  emitMock: vi.fn(),
+}))
+
+vi.mock('../eventBus', () => ({
+  eventBus: {
+    emit: emitMock,
+  },
+}))
+
+class MockEventSource {
+  static instances: MockEventSource[] = []
+  public onmessage: ((event: MessageEvent) => void) | null = null
+  public close = vi.fn(() => {
+    this.closed = true
+  })
+  public closed = false
+
+  constructor(public url: string) {
+    MockEventSource.instances.push(this)
+  }
+}
+
+const TestHarness = defineComponent({
+  name: 'BackendEventsHarness',
+  props: {
+    userId: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    useBackendEvents(toRef(props, 'userId'))
+    return () => h('div')
+  },
+})
+
+describe('useBackendEvents', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    MockEventSource.instances = []
+    vi.stubGlobal('EventSource', MockEventSource)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('connects when user id becomes available after mount', async () => {
+    const wrapper = mount(TestHarness, { props: { userId: '' } })
+
+    expect(MockEventSource.instances.length).toBe(0)
+
+    await wrapper.setProps({ userId: 'user-1' })
+
+    expect(MockEventSource.instances.length).toBe(1)
+    expect(MockEventSource.instances[0]?.url).toBe('/events?user_id=user-1')
+  })
+
+  it('reconnects when user id changes and closes previous connection', async () => {
+    const wrapper = mount(TestHarness, { props: { userId: 'user-1' } })
+
+    expect(MockEventSource.instances.length).toBe(1)
+    const firstConnection = MockEventSource.instances[0]
+
+    await wrapper.setProps({ userId: 'user-2' })
+
+    expect(firstConnection?.close).toHaveBeenCalledTimes(1)
+    expect(MockEventSource.instances.length).toBe(2)
+    expect(MockEventSource.instances[1]?.url).toBe('/events?user_id=user-2')
+  })
+
+  it('emits parsed backend events on message', async () => {
+    mount(TestHarness, { props: { userId: 'user-1' } })
+
+    const connection = MockEventSource.instances[0]
+    expect(connection).toBeDefined()
+
+    connection?.onmessage?.({
+      data: JSON.stringify({ type: 'profile_updated', payload: { id: 'user-1' } }),
+    } as MessageEvent)
+
+    expect(emitMock).toHaveBeenCalledWith('profile_updated', {
+      type: 'profile_updated',
+      payload: { id: 'user-1' },
+    })
+    expect(emitMock).toHaveBeenCalledWith('sse', {
+      type: 'profile_updated',
+      payload: { id: 'user-1' },
+    })
+  })
+
+  it('closes the event source on unmount', () => {
+    const wrapper = mount(TestHarness, { props: { userId: 'user-1' } })
+
+    const connection = MockEventSource.instances[0]
+    wrapper.unmount()
+
+    expect(connection?.close).toHaveBeenCalledTimes(1)
+  })
+})

frontend/vue-app/src/common/api.ts

@@ -1,3 +1,43 @@
+import { logoutUser } from '@/stores/auth'
+
+let unauthorizedInterceptorInstalled = false
+let unauthorizedRedirectHandler: (() => void) | null = null
+let unauthorizedHandlingInProgress = false
+
+export function setUnauthorizedRedirectHandlerForTests(handler: (() => void) | null): void {
+  unauthorizedRedirectHandler = handler
+}
+
+function handleUnauthorizedResponse(): void {
+  if (unauthorizedHandlingInProgress) return
+  unauthorizedHandlingInProgress = true
+  logoutUser()
+  if (typeof window === 'undefined') return
+  if (window.location.pathname.startsWith('/auth')) return
+  if (unauthorizedRedirectHandler) {
+    unauthorizedRedirectHandler()
+    return
+  }
+  window.location.assign('/auth')
+}
+
+export function installUnauthorizedFetchInterceptor(): void {
+  if (unauthorizedInterceptorInstalled || typeof window === 'undefined') return
+  unauthorizedInterceptorInstalled = true
+
+  const originalFetch = globalThis.fetch.bind(globalThis)
+  const wrappedFetch = (async (...args: Parameters<typeof fetch>) => {
+    const response = await originalFetch(...args)
+    if (response.status === 401) {
+      handleUnauthorizedResponse()
+    }
+    return response
+  }) as typeof fetch
+
+  window.fetch = wrappedFetch as typeof window.fetch
+  globalThis.fetch = wrappedFetch as typeof globalThis.fetch
+}
+
 export async function parseErrorResponse(res: Response): Promise<{ msg: string; code?: string }> {
   try {
     const data = await res.json()

frontend/vue-app/src/common/models.ts

@@ -13,6 +13,7 @@ export interface User {
   first_name: string
   last_name: string
   email: string
+  token_version: number
   image_id: string | null
   marked_for_deletion: boolean
   marked_for_deletion_at: string | null

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

@@ -146,7 +146,7 @@ import {
   ALREADY_VERIFIED,
 } from '@/common/errorCodes'
 import { parseErrorResponse, isEmailValid } from '@/common/api'
-import { loginUser } from '@/stores/auth'
+import { loginUser, checkAuth } from '@/stores/auth'
 
 const router = useRouter()
 
@@ -211,6 +211,7 @@ async function submitForm() {
     }
 
     loginUser() // <-- set user as logged in
+    await checkAuth() // hydrate currentUserId so SSE reconnects immediately
 
     await router.push({ path: '/' }).catch(() => (window.location.href = '/'))
   } catch (err) {

frontend/vue-app/src/components/auth/ParentPinSetup.vue

@@ -39,6 +39,7 @@
       <p>Enter a new 4–6 digit Parent PIN. This will be required for parent access.</p>
       <input
         v-model="pin"
+        @input="handlePinInput"
         maxlength="6"
         inputmode="numeric"
         pattern="\d*"
@@ -47,6 +48,7 @@
       />
       <input
         v-model="pin2"
+        @input="handlePin2Input"
         maxlength="6"
         inputmode="numeric"
         pattern="\d*"
@@ -92,6 +94,16 @@ const isPinValid = computed(() => {
   return /^\d{4,6}$/.test(p1) && /^\d{4,6}$/.test(p2) && p1 === p2
 })
 
+function handlePinInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  pin.value = target.value.replace(/\D/g, '').slice(0, 6)
+}
+
+function handlePin2Input(event: Event) {
+  const target = event.target as HTMLInputElement
+  pin2.value = target.value.replace(/\D/g, '').slice(0, 6)
+}
+
 async function requestCode() {
   error.value = ''
   info.value = ''

frontend/vue-app/src/components/auth/ResetPassword.vue

@@ -129,6 +129,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { isPasswordStrong } from '@/common/api'
+import { logoutUser } from '@/stores/auth'
 import ModalDialog from '@/components/shared/ModalDialog.vue'
 import '@/assets/styles.css'
 
@@ -156,7 +157,7 @@ const formValid = computed(
 onMounted(async () => {
   // Get token from query string
   const raw = route.query.token ?? ''
-  token.value = Array.isArray(raw) ? raw[0] : String(raw || '')
+  token.value = (Array.isArray(raw) ? raw[0] : raw) || ''
 
   // Validate token with backend
   if (token.value) {
@@ -223,6 +224,7 @@ async function submitForm() {
       return
     }
     // Success: Show modal instead of successMsg
+    logoutUser()
     showModal.value = true
     password.value = ''
     confirmPassword.value = ''

frontend/vue-app/src/components/auth/__tests__/Login.spec.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Login from '../Login.vue'
+
+const { pushMock, loginUserMock, checkAuthMock } = vi.hoisted(() => ({
+  pushMock: vi.fn(),
+  loginUserMock: vi.fn(),
+  checkAuthMock: vi.fn(),
+}))
+
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn(() => ({ push: pushMock })),
+}))
+
+vi.mock('@/stores/auth', () => ({
+  loginUser: loginUserMock,
+  checkAuth: checkAuthMock,
+}))
+
+vi.mock('@/common/api', async () => {
+  const actual = await vi.importActual<typeof import('@/common/api')>('@/common/api')
+  return {
+    ...actual,
+    parseErrorResponse: vi.fn(async () => ({
+      msg: 'bad credentials',
+      code: 'INVALID_CREDENTIALS',
+    })),
+  }
+})
+
+describe('Login.vue', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    checkAuthMock.mockResolvedValue(undefined)
+    vi.stubGlobal('fetch', vi.fn())
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('hydrates auth state after successful login', async () => {
+    const fetchMock = vi.mocked(fetch)
+    fetchMock.mockResolvedValue({ ok: true } as Response)
+
+    const wrapper = mount(Login)
+
+    await wrapper.get('#email').setValue('test@example.com')
+    await wrapper.get('#password').setValue('secret123')
+    await wrapper.get('form').trigger('submit')
+
+    await Promise.resolve()
+
+    expect(loginUserMock).toHaveBeenCalledTimes(1)
+    expect(checkAuthMock).toHaveBeenCalledTimes(1)
+    expect(pushMock).toHaveBeenCalledWith({ path: '/' })
+
+    const checkAuthOrder = checkAuthMock.mock.invocationCallOrder[0]
+    const pushOrder = pushMock.mock.invocationCallOrder[0]
+    expect(checkAuthOrder).toBeDefined()
+    expect(pushOrder).toBeDefined()
+    expect((checkAuthOrder ?? 0) < (pushOrder ?? 0)).toBe(true)
+  })
+
+  it('does not hydrate auth state when login fails', async () => {
+    const fetchMock = vi.mocked(fetch)
+    fetchMock.mockResolvedValue({ ok: false, status: 401 } as Response)
+
+    const wrapper = mount(Login)
+
+    await wrapper.get('#email').setValue('test@example.com')
+    await wrapper.get('#password').setValue('badpassword')
+    await wrapper.get('form').trigger('submit')
+
+    await Promise.resolve()
+
+    expect(loginUserMock).not.toHaveBeenCalled()
+    expect(checkAuthMock).not.toHaveBeenCalled()
+    expect(pushMock).not.toHaveBeenCalled()
+  })
+})

frontend/vue-app/src/components/child/ChildEditView.vue

@@ -5,6 +5,7 @@
       :fields="fields"
       :initialData="initialData"
       :isEdit="isEdit"
+      :requireDirty="isEdit"
       :loading="loading"
       :error="error"
       @submit="handleSubmit"
@@ -16,22 +17,38 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import EntityEditForm from '../shared/EntityEditForm.vue'
 import '@/assets/styles.css'
 
-const route = useRoute()
 const router = useRouter()
 const props = defineProps<{ id?: string }>()
 const isEdit = computed(() => !!props.id)
 
-const fields = [
+type Field = {
+  name: string
+  label: string
+  type: 'text' | 'number' | 'image' | 'custom'
+  required?: boolean
+  maxlength?: number
+  min?: number
+  max?: number
+  imageType?: number
+}
+
+type ChildForm = {
+  name: string
+  age: number | null
+  image_id: string | null
+}
+
+const fields: Field[] = [
   { name: 'name', label: 'Name', type: 'text', required: true, maxlength: 64 },
   { name: 'age', label: 'Age', type: 'number', required: true, min: 0, max: 120 },
   { name: 'image_id', label: 'Image', type: 'image', imageType: 1 },
 ]
 
-const initialData = ref({ name: '', age: null, image_id: null })
+const initialData = ref<ChildForm>({ name: '', age: null, image_id: null })
 const localImageFile = ref<File | null>(null)
 const loading = ref(false)
 const error = ref<string | null>(null)
@@ -45,15 +62,31 @@ onMounted(async () => {
       const data = await resp.json()
       initialData.value = {
         name: data.name ?? '',
-        age: Number(data.age) ?? null,
+        age: data.age === null || data.age === undefined ? null : Number(data.age),
         image_id: data.image_id ?? null,
       }
-    } catch (e) {
+    } catch {
       error.value = 'Could not load child.'
     } finally {
       loading.value = false
       await nextTick()
     }
+  } else {
+    try {
+      const resp = await fetch('/api/image/list?type=1')
+      if (resp.ok) {
+        const data = await resp.json()
+        const ids = data.ids || []
+        if (ids.length > 0) {
+          initialData.value = {
+            ...initialData.value,
+            image_id: ids[0],
+          }
+        }
+      }
+    } catch {
+      // Ignore default image lookup failures and keep existing behavior.
+    }
   }
 })
 
@@ -63,7 +96,7 @@ function handleAddImage({ id, file }: { id: string; file: File }) {
   }
 }
 
-async function handleSubmit(form: any) {
+async function handleSubmit(form: ChildForm) {
   let imageId = form.image_id
   error.value = null
   if (!form.name.trim()) {
@@ -90,7 +123,7 @@ async function handleSubmit(form: any) {
       if (!resp.ok) throw new Error('Image upload failed')
       const data = await resp.json()
       imageId = data.id
-    } catch (err) {
+    } catch {
       error.value = 'Failed to upload image.'
       loading.value = false
       return
@@ -123,7 +156,7 @@ async function handleSubmit(form: any) {
     }
     if (!resp.ok) throw new Error('Failed to save child')
     await router.push({ name: 'ParentChildrenListView' })
-  } catch (err) {
+  } catch {
     error.value = 'Failed to save child.'
   }
   loading.value = false

frontend/vue-app/src/components/child/ChildView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from 'vue'
-import ModalDialog from '../shared/ModalDialog.vue'
 import { useRoute, useRouter } from 'vue-router'
 import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
@@ -12,7 +11,6 @@ import type {
   Child,
   Event,
   Task,
-  Reward,
   RewardStatus,
   ChildTaskTriggeredEventPayload,
   ChildRewardTriggeredEventPayload,
@@ -32,9 +30,6 @@ const tasks = ref<string[]>([])
 const rewards = ref<string[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
-const showRewardDialog = ref(false)
-const showCancelDialog = ref(false)
-const dialogReward = ref<Reward | null>(null)
 const childRewardListRef = ref()
 
 function handleTaskTriggered(event: Event) {
@@ -179,21 +174,7 @@ const triggerTask = async (task: Task) => {
     }
   }
 
-  // Trigger the task via API
-  if (child.value?.id && task.id) {
-    try {
-      const resp = await fetch(`/api/child/${child.value.id}/trigger-task`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ task_id: task.id }),
-      })
-      if (!resp.ok) {
-        console.error('Failed to trigger task')
-      }
-    } catch (err) {
-      console.error('Error triggering task:', err)
-    }
-  }
+  // Child mode is speech-only; point changes are handled in parent mode.
 }
 
 const triggerReward = (reward: RewardStatus) => {
@@ -211,60 +192,6 @@ const triggerReward = (reward: RewardStatus) => {
       utter.volume = 1.0
       window.speechSynthesis.speak(utter)
     }
-
-    if (reward.redeeming) {
-      dialogReward.value = reward
-      showCancelDialog.value = true
-      return // Do not allow redeeming if already pending
-    }
-    if (reward.points_needed <= 0) {
-      dialogReward.value = reward
-      showRewardDialog.value = true
-    }
-  }
-}
-
-async function cancelPendingReward() {
-  if (!child.value?.id || !dialogReward.value) return
-  try {
-    const resp = await fetch(`/api/child/${child.value.id}/cancel-request-reward`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ reward_id: dialogReward.value.id }),
-    })
-    if (!resp.ok) throw new Error('Failed to cancel pending reward')
-  } catch (err) {
-    console.error('Failed to cancel pending reward:', err)
-  } finally {
-    showCancelDialog.value = false
-    dialogReward.value = null
-  }
-}
-
-function cancelRedeemReward() {
-  showRewardDialog.value = false
-  dialogReward.value = null
-}
-
-function closeCancelDialog() {
-  showCancelDialog.value = false
-  dialogReward.value = null
-}
-
-async function confirmRedeemReward() {
-  if (!child.value?.id || !dialogReward.value) return
-  try {
-    const resp = await fetch(`/api/child/${child.value.id}/request-reward`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ reward_id: dialogReward.value.id }),
-    })
-    if (!resp.ok) return
-  } catch (err) {
-    console.error('Failed to redeem reward:', err)
-  } finally {
-    showRewardDialog.value = false
-    dialogReward.value = null
   }
 }
 
@@ -464,35 +391,6 @@ onUnmounted(() => {
         </ScrollingList>
       </div>
     </div>
-
-    <ModalDialog
-      v-if="showRewardDialog && dialogReward"
-      :imageUrl="dialogReward?.image_url"
-      :title="dialogReward.name"
-      :subtitle="`${dialogReward.cost} pts`"
-    >
-      <div class="modal-message">Would you like to redeem this reward?</div>
-      <div class="modal-actions">
-        <button @click="confirmRedeemReward" class="btn btn-primary">Yes</button>
-        <button @click="cancelRedeemReward" class="btn btn-secondary">No</button>
-      </div>
-    </ModalDialog>
-
-    <ModalDialog
-      v-if="showCancelDialog && dialogReward"
-      :imageUrl="dialogReward?.image_url"
-      :title="dialogReward.name"
-      :subtitle="`${dialogReward.cost} pts`"
-    >
-      <div class="modal-message">
-        This reward is pending.<br />
-        Would you like to cancel the pending reward request?
-      </div>
-      <div class="modal-actions">
-        <button @click="cancelPendingReward" class="btn btn-primary">Yes</button>
-        <button @click="closeCancelDialog" class="btn btn-secondary">No</button>
-      </div>
-    </ModalDialog>
   </div>
 </template>
 

frontend/vue-app/src/components/child/__tests__/ChildView.spec.ts

@@ -191,6 +191,16 @@ describe('ChildView', () => {
       expect(window.speechSynthesis.speak).toHaveBeenCalled()
     })
 
+    it('does not call trigger-task API in child mode', async () => {
+      await wrapper.vm.triggerTask(mockChore)
+
+      expect(
+        (global.fetch as any).mock.calls.some((call: [string]) =>
+          call[0].includes('/trigger-task'),
+        ),
+      ).toBe(false)
+    })
+
     it('does not crash if speechSynthesis is not available', () => {
       const originalSpeechSynthesis = global.window.speechSynthesis
       delete (global.window as any).speechSynthesis
@@ -202,6 +212,43 @@ describe('ChildView', () => {
     })
   })
 
+  describe('Reward Triggering', () => {
+    beforeEach(async () => {
+      wrapper = mount(ChildView)
+      await nextTick()
+      await new Promise((resolve) => setTimeout(resolve, 50))
+    })
+
+    it('speaks reward text when triggered', () => {
+      wrapper.vm.triggerReward({
+        id: 'reward-1',
+        name: 'Ice Cream',
+        cost: 50,
+        points_needed: 10,
+        redeeming: false,
+      })
+
+      expect(window.speechSynthesis.cancel).toHaveBeenCalled()
+      expect(window.speechSynthesis.speak).toHaveBeenCalled()
+    })
+
+    it('does not call reward request/cancel APIs in child mode', () => {
+      wrapper.vm.triggerReward({
+        id: 'reward-1',
+        name: 'Ice Cream',
+        cost: 50,
+        points_needed: 0,
+        redeeming: false,
+      })
+
+      const requestCalls = (global.fetch as any).mock.calls.filter(
+        (call: [string]) =>
+          call[0].includes('/request-reward') || call[0].includes('/cancel-request-reward'),
+      )
+      expect(requestCalls.length).toBe(0)
+    })
+  })
+
   describe('SSE Event Handlers', () => {
     beforeEach(async () => {
       wrapper = mount(ChildView)

frontend/vue-app/src/components/profile/UserProfile.vue

@@ -117,7 +117,6 @@ import '@/assets/styles.css'
 const router = useRouter()
 const loading = ref(false)
 const errorMsg = ref('')
-const successMsg = ref('')
 const resetting = ref(false)
 const localImageFile = ref<File | null>(null)
 const showModal = ref(false)
@@ -133,14 +132,26 @@ const showDeleteSuccess = ref(false)
 const showDeleteError = ref(false)
 const deleteErrorMessage = ref('')
 
-const initialData = ref({
+const initialData = ref<{
+  image_id: string | null
+  first_name: string
+  last_name: string
+  email: string
+}>({
   image_id: null,
   first_name: '',
   last_name: '',
   email: '',
 })
 
-const fields = [
+const fields: Array<{
+  name: string
+  label: string
+  type: 'image' | 'text' | 'custom'
+  imageType?: number
+  required?: boolean
+  maxlength?: number
+}> = [
   { name: 'image_id', label: 'Image', type: 'image', imageType: 1 },
   { name: 'first_name', label: 'First Name', type: 'text', required: true, maxlength: 64 },
   { name: 'last_name', label: 'Last Name', type: 'text', required: true, maxlength: 64 },

frontend/vue-app/src/components/reward/RewardView.vue

@@ -52,7 +52,7 @@ const $router = useRouter()
 
 const showConfirm = ref(false)
 const rewardToDelete = ref<string | null>(null)
-const rewardListRef = ref()
+const rewardListRef = ref<InstanceType<typeof ItemList> | null>(null)
 const rewardCountRef = ref<number>(-1)
 
 function handleRewardModified(event: any) {
@@ -75,10 +75,7 @@ function confirmDeleteReward(rewardId: string) {
 }
 
 const deleteReward = async () => {
-  const id =
-    typeof rewardToDelete.value === 'object' && rewardToDelete.value !== null
-      ? rewardToDelete.value.id
-      : rewardToDelete.value
+  const id = rewardToDelete.value
   if (!id) return
   try {
     const resp = await fetch(`/api/reward/${id}`, {

frontend/vue-app/src/components/shared/EntityEditForm.vue

@@ -10,7 +10,7 @@
           <slot
             :name="`custom-field-${field.name}`"
             :modelValue="formData[field.name]"
-            :update="(val) => (formData[field.name] = val)"
+            :update="(val: unknown) => (formData[field.name] = val)"
           >
             <!-- Default rendering if no slot provided -->
             <input
@@ -39,7 +39,11 @@
       <button type="button" class="btn btn-secondary" @click="onCancel" :disabled="loading">
         Cancel
       </button>
-      <button type="submit" class="btn btn-primary" :disabled="loading || !isDirty || !isValid">
+      <button
+        type="submit"
+        class="btn btn-primary"
+        :disabled="loading || !isValid || (props.requireDirty && !isDirty)"
+      >
         {{ isEdit ? 'Save' : 'Create' }}
       </button>
     </div>
@@ -63,34 +67,31 @@ type Field = {
   imageType?: number
 }
 
-const props = defineProps<{
-  entityLabel: string
-  fields: Field[]
-  initialData?: Record<string, any>
-  isEdit?: boolean
-  loading?: boolean
-  error?: string | null
-  title?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    entityLabel: string
+    fields: Field[]
+    initialData?: Record<string, any>
+    isEdit?: boolean
+    loading?: boolean
+    error?: string | null
+    title?: string
+    requireDirty?: boolean
+  }>(),
+  {
+    requireDirty: true,
+  },
+)
 
 const emit = defineEmits(['submit', 'cancel', 'add-image'])
 
 const router = useRouter()
 const formData = ref<Record<string, any>>({ ...props.initialData })
-
-watch(
-  () => props.initialData,
-  (newVal) => {
-    if (newVal) {
-      formData.value = { ...newVal }
-    }
-  },
-  { immediate: true, deep: true },
-)
+const baselineData = ref<Record<string, any>>({ ...props.initialData })
 
 onMounted(async () => {
   await nextTick()
-  // Optionally focus first input
+  isDirty.value = false
 })
 
 function onAddImage({ id, file }: { id: string; file: File }) {
@@ -109,14 +110,36 @@ function submit() {
 
 // Editable field names (exclude custom fields that are not editable)
 const editableFieldNames = props.fields
-  .filter((f) => f.type !== 'custom' || f.name === 'is_good' || f.type === 'image')
+  .filter((f) => f.type !== 'custom' || f.name === 'is_good')
   .map((f) => f.name)
 
 const isDirty = ref(false)
 
+function getFieldByName(name: string): Field | undefined {
+  return props.fields.find((field) => field.name === name)
+}
+
+function valuesEqualForDirtyCheck(
+  fieldName: string,
+  currentValue: unknown,
+  initialValue: unknown,
+): boolean {
+  const field = getFieldByName(fieldName)
+
+  if (field?.type === 'number') {
+    const currentEmpty = currentValue === '' || currentValue === null || currentValue === undefined
+    const initialEmpty = initialValue === '' || initialValue === null || initialValue === undefined
+    if (currentEmpty && initialEmpty) return true
+    if (currentEmpty !== initialEmpty) return false
+    return Number(currentValue) === Number(initialValue)
+  }
+
+  return JSON.stringify(currentValue) === JSON.stringify(initialValue)
+}
+
 function checkDirty() {
   isDirty.value = editableFieldNames.some((key) => {
-    return JSON.stringify(formData.value[key]) !== JSON.stringify(props.initialData?.[key])
+    return !valuesEqualForDirtyCheck(key, formData.value[key], baselineData.value[key])
   })
 }
 
@@ -131,6 +154,7 @@ const isValid = computed(() => {
     }
 
     if (field.type === 'number') {
+      if (value === '' || value === null || value === undefined) return false
       const numValue = Number(value)
       if (isNaN(numValue)) return false
       if (field.min !== undefined && numValue < field.min) return false
@@ -145,8 +169,7 @@ const isValid = computed(() => {
 
 watch(
   () => ({ ...formData.value }),
-  (newVal) => {
-    console.log('formData changed:', newVal)
+  () => {
     checkDirty()
   },
   { deep: true },
@@ -157,7 +180,8 @@ watch(
   (newVal) => {
     if (newVal) {
       formData.value = { ...newVal }
-      checkDirty()
+      baselineData.value = { ...newVal }
+      isDirty.value = false
     }
   },
   { immediate: true, deep: true },

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

@@ -137,6 +137,11 @@ const submit = async () => {
   }
 }
 
+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')
@@ -357,6 +362,7 @@ onUnmounted(() => {
         <input
           ref="pinInput"
           v-model="pin"
+          @input="handlePinInput"
           inputmode="numeric"
           pattern="\d*"
           maxlength="6"
@@ -365,7 +371,7 @@ onUnmounted(() => {
         />
         <div class="actions modal-actions">
           <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
-          <button type="submit" class="btn btn-primary">OK</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>

frontend/vue-app/src/components/shared/__tests__/EntityEditForm.spec.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EntityEditForm from '../EntityEditForm.vue'
+
+vi.mock('vue-router', () => ({
+  useRouter: vi.fn(() => ({
+    push: vi.fn(),
+    back: vi.fn(),
+  })),
+}))
+
+describe('EntityEditForm', () => {
+  it('keeps Create disabled when required number field is empty', async () => {
+    const wrapper = mount(EntityEditForm, {
+      props: {
+        entityLabel: 'Child',
+        fields: [
+          { name: 'name', label: 'Name', type: 'text', required: true },
+          { name: 'age', label: 'Age', type: 'number', required: true, min: 0, max: 120 },
+        ],
+        initialData: {
+          name: '',
+          age: null,
+        },
+        isEdit: false,
+        loading: false,
+        requireDirty: false,
+      },
+    })
+
+    const nameInput = wrapper.find('#name')
+    const ageInput = wrapper.find('#age')
+
+    await nameInput.setValue('Sam')
+    await ageInput.setValue('')
+
+    const submitButton = wrapper.find('button[type="submit"]')
+    expect(submitButton.text()).toBe('Create')
+    expect((submitButton.element as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('enables Create when required Name and Age are both valid', async () => {
+    const wrapper = mount(EntityEditForm, {
+      props: {
+        entityLabel: 'Child',
+        fields: [
+          { name: 'name', label: 'Name', type: 'text', required: true },
+          { name: 'age', label: 'Age', type: 'number', required: true, min: 0, max: 120 },
+        ],
+        initialData: {
+          name: '',
+          age: null,
+        },
+        isEdit: false,
+        loading: false,
+        requireDirty: false,
+      },
+    })
+
+    const nameInput = wrapper.find('#name')
+    const ageInput = wrapper.find('#age')
+
+    await nameInput.setValue('Sam')
+    await ageInput.setValue('8')
+
+    const submitButton = wrapper.find('button[type="submit"]')
+    expect(submitButton.text()).toBe('Create')
+    expect((submitButton.element as HTMLButtonElement).disabled).toBe(false)
+  })
+})

frontend/vue-app/src/components/utils/ImagePicker.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
 const emit = defineEmits(['update:modelValue', 'add-image'])
 
 const fileInput = ref<HTMLInputElement | null>(null)
+const imageScrollRef = ref<HTMLDivElement | null>(null)
 const localImageUrl = ref<string | null>(null)
 const showCamera = ref(false)
 const cameraStream = ref<MediaStream | null>(null)
@@ -198,6 +199,13 @@ function updateLocalImage(url: string, file: File) {
   } else {
     availableImages.value[idx].url = url
   }
+
+  nextTick(() => {
+    if (imageScrollRef.value) {
+      imageScrollRef.value.scrollLeft = 0
+    }
+  })
+
   emit('add-image', { id: 'local-upload', url, file })
   emit('update:modelValue', 'local-upload')
 }
@@ -205,7 +213,7 @@ function updateLocalImage(url: string, file: File) {
 
 <template>
   <div class="picker">
-    <div class="image-scroll">
+    <div ref="imageScrollRef" class="image-scroll">
       <div v-if="loadingImages" class="loading-images">Loading images...</div>
       <div v-else class="image-list">
         <img

frontend/vue-app/src/main.ts

@@ -2,9 +2,14 @@ import '@/assets/colors.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { initAuthSync } from './stores/auth'
+import { installUnauthorizedFetchInterceptor } from './common/api'
 
 const app = createApp(App)
 
+initAuthSync()
+installUnauthorizedFetchInterceptor()
+
 app.use(router)
 
 app.mount('#app')

frontend/vue-app/src/stores/__tests__/auth.childmode.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { isParentAuthenticated, loginUser } from '../auth'
+import { isParentAuthenticated, isUserLoggedIn, loginUser, initAuthSync } from '../auth'
 import { nextTick } from 'vue'
 
 // Helper to mock localStorage
@@ -30,4 +30,20 @@ describe('auth store - child mode on login', () => {
     await nextTick() // flush Vue watcher
     expect(isParentAuthenticated.value).toBe(false)
   })
+
+  it('logs out on cross-tab storage logout event', async () => {
+    initAuthSync()
+    isUserLoggedIn.value = true
+    isParentAuthenticated.value = true
+
+    const logoutEvent = new StorageEvent('storage', {
+      key: 'authSyncEvent',
+      newValue: JSON.stringify({ type: 'logout', at: Date.now() }),
+    })
+    window.dispatchEvent(logoutEvent)
+
+    await nextTick()
+    expect(isUserLoggedIn.value).toBe(false)
+    expect(isParentAuthenticated.value).toBe(false)
+  })
 })

frontend/vue-app/src/stores/auth.ts

@@ -2,6 +2,7 @@ import { ref, watch } from 'vue'
 
 const hasLocalStorage =
   typeof localStorage !== 'undefined' && typeof localStorage.getItem === 'function'
+const AUTH_SYNC_EVENT_KEY = 'authSyncEvent'
 
 export const isParentAuthenticated = ref(
   hasLocalStorage ? localStorage.getItem('isParentAuthenticated') === 'true' : false,
@@ -9,6 +10,7 @@ export const isParentAuthenticated = ref(
 export const isUserLoggedIn = ref(false)
 export const isAuthReady = ref(false)
 export const currentUserId = ref('')
+let authSyncInitialized = false
 
 watch(isParentAuthenticated, (val) => {
   if (hasLocalStorage && typeof localStorage.setItem === 'function') {
@@ -33,12 +35,42 @@ export function loginUser() {
   isParentAuthenticated.value = false
 }
 
-export function logoutUser() {
+function applyLoggedOutState() {
   isUserLoggedIn.value = false
   currentUserId.value = ''
   logoutParent()
 }
 
+function broadcastLogoutEvent() {
+  if (!hasLocalStorage || typeof localStorage.setItem !== 'function') return
+  localStorage.setItem(AUTH_SYNC_EVENT_KEY, JSON.stringify({ type: 'logout', at: Date.now() }))
+}
+
+export function logoutUser() {
+  applyLoggedOutState()
+  broadcastLogoutEvent()
+}
+
+export function initAuthSync() {
+  if (authSyncInitialized || typeof window === 'undefined') return
+  authSyncInitialized = true
+
+  window.addEventListener('storage', (event) => {
+    if (event.key !== AUTH_SYNC_EVENT_KEY || !event.newValue) return
+    try {
+      const payload = JSON.parse(event.newValue)
+      if (payload?.type === 'logout') {
+        applyLoggedOutState()
+        if (!window.location.pathname.startsWith('/auth')) {
+          window.location.href = '/auth/login'
+        }
+      }
+    } catch {
+      // Ignore malformed sync events.
+    }
+  })
+}
+
 export async function checkAuth() {
   try {
     const res = await fetch('/api/auth/me', { method: 'GET' })
@@ -47,12 +79,10 @@ export async function checkAuth() {
       currentUserId.value = data.id
       isUserLoggedIn.value = true
     } else {
-      isUserLoggedIn.value = false
-      currentUserId.value = ''
+      logoutUser()
     }
   } catch {
-    isUserLoggedIn.value = false
-    currentUserId.value = ''
+    logoutUser()
   }
   isAuthReady.value = true
 }