feat: normalize email handling in signup, login, and verification processes; refactor event handling in task and reward components

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

@@ -4,6 +4,7 @@ import ModalDialog from '../shared/ModalDialog.vue'
 import { useRoute, useRouter } from 'vue-router'
 import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
+import StatusMessage from '../shared/StatusMessage.vue'
 import { eventBus } from '@/common/eventBus'
 import '@/assets/view-shared.css'
 import '@/assets/styles.css'
@@ -176,7 +177,6 @@ const triggerReward = (reward: RewardStatus) => {
       (reward.points_needed <= 0 ? '' : `, You still need ${reward.points_needed} points.`)
     const utter = new window.SpeechSynthesisUtterance(utterString)
     window.speechSynthesis.speak(utter)
-    console.log('Reward data is:', reward)
     if (reward.redeeming) {
       dialogReward.value = reward
       showCancelDialog.value = true
@@ -405,90 +405,6 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <div v-else class="layout">
-      <div class="main">
-        <ChildDetailCard :child="child" />
-        <ScrollingList
-          title="Chores"
-          ref="childChoreListRef"
-          :fetchBaseUrl="`/api/task/list?ids=${tasks.join(',')}`"
-          :ids="tasks"
-          itemKey="tasks"
-          imageField="image_id"
-          @trigger-item="triggerTask"
-          :getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
-          :filter-fn="
-            (item) => {
-              return item.is_good
-            }
-          "
-        >
-          <template #item="{ item }">
-            <div class="item-name">{{ item.name }}</div>
-            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
-            <div
-              class="item-points"
-              :class="{ 'good-points': item.is_good, 'bad-points': !item.is_good }"
-            >
-              {{ item.is_good ? item.points : -item.points }} Points
-            </div>
-          </template>
-        </ScrollingList>
-        <ScrollingList
-          title="Penalties"
-          ref="childPenaltyListRef"
-          :fetchBaseUrl="`/api/task/list?ids=${tasks.join(',')}`"
-          :ids="tasks"
-          itemKey="tasks"
-          imageField="image_id"
-          @trigger-item="triggerTask"
-          :getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
-          :filter-fn="
-            (item) => {
-              return !item.is_good
-            }
-          "
-        >
-          <template #item="{ item }">
-            <div class="item-name">{{ item.name }}</div>
-            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
-            <div
-              class="item-points"
-              :class="{ 'good-points': item.is_good, 'bad-points': !item.is_good }"
-            >
-              {{ item.is_good ? item.points : -item.points }} Points
-            </div>
-          </template>
-        </ScrollingList>
-        <ScrollingList
-          title="Rewards"
-          ref="childRewardListRef"
-          :fetchBaseUrl="`/api/child/${child?.id}/reward-status`"
-          itemKey="reward_status"
-          imageField="image_id"
-          @trigger-item="triggerReward"
-          :getItemClass="
-            (item) => ({ reward: true, disabled: hasPendingRewards && !item.redeeming })
-          "
-        >
-          <template #item="{ item }: { item: RewardStatus }">
-            <div class="item-name">{{ item.name }}</div>
-            <img
-              v-if="item.image_url"
-              :src="item.image_url"
-              alt="Reward Image"
-              class="item-image"
-            />
-            <div class="item-points">
-              <span v-if="item.redeeming" class="pending">PENDING</span>
-              <span v-if="item.points_needed <= 0" class="ready">REWARD READY</span>
-              <span v-else>{{ item.points_needed }} more points</span>
-            </div>
-          </template>
-        </ScrollingList>
-      </div>
-    </div>
-
     <ModalDialog
       v-if="showRewardDialog && dialogReward"
       :imageUrl="dialogReward?.image_url"

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

@@ -4,6 +4,7 @@ import ModalDialog from '../shared/ModalDialog.vue'
 import { useRoute, useRouter } from 'vue-router'
 import ChildDetailCard from './ChildDetailCard.vue'
 import ScrollingList from '../shared/ScrollingList.vue'
+import StatusMessage from '../shared/StatusMessage.vue'
 import { eventBus } from '@/common/eventBus'
 import '@/assets/styles.css'
 import '@/assets/view-shared.css'
@@ -232,7 +233,6 @@ function getPendingRewardIds(): string[] {
 const triggerTask = (task: Task) => {
   selectedTask.value = task
   const pendingRewardIds = getPendingRewardIds()
-  console.log('Pending reward IDs:', pendingRewardIds)
   if (pendingRewardIds.length > 0) {
     showPendingRewardDialog.value = true
     return
@@ -263,7 +263,7 @@ async function cancelPendingReward() {
   try {
     const pendingRewardIds = getPendingRewardIds()
     await Promise.all(pendingRewardIds.map((id: string) => cancelRewardById(id)))
-    childRewardListRef.value?.refresh()
+    //childRewardListRef.value?.refresh()
   } catch (err) {
     console.error('Failed to cancel pending reward:', err)
   } finally {
@@ -296,6 +296,12 @@ const confirmTriggerTask = async () => {
 
 const triggerReward = (reward: RewardStatus) => {
   if (reward.points_needed > 0) return
+  // If there is a pending reward and it's not this one, show the pending dialog
+  const pendingRewardIds = getPendingRewardIds()
+  if (pendingRewardIds.length > 0 && !reward.redeeming) {
+    showPendingRewardDialog.value = true
+    return
+  }
   selectedReward.value = reward
   showRewardConfirm.value = true
 }
@@ -403,6 +409,7 @@ function goToAssignRewards() {
           :fetchBaseUrl="`/api/child/${child?.id}/reward-status`"
           itemKey="reward_status"
           imageField="image_id"
+          :ids="rewards"
           @trigger-item="triggerReward"
           :getItemClass="(item) => ({ reward: true })"
         >

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

@@ -58,7 +58,6 @@ function goToCreateTask() {
 async function onSubmit() {
   const selectedIds = taskListRef.value?.selectedItems ?? []
   try {
-    console.log('selectedIds:', selectedIds)
     const resp = await fetch(`/api/child/${childId}/set-tasks`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },

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

@@ -9,6 +9,7 @@
       :error="errorMsg"
       :title="'User Profile'"
       @submit="handleSubmit"
+      @cancel="router.back"
       @add-image="onAddImage"
     >
       <template #custom-field-email="{ modelValue }">
@@ -37,11 +38,11 @@
       v-if="showModal"
       :title="modalTitle"
       :subtitle="modalSubtitle"
-      @close="handleModalClose"
+      @close="handlePasswordModalClose"
     >
       <div class="modal-message">{{ modalMessage }}</div>
       <div class="modal-actions" v-if="!resetting">
-        <button class="btn btn-primary" @click="handleModalClose">OK</button>
+        <button class="btn btn-primary" @click="handlePasswordModalClose">OK</button>
       </div>
     </ModalDialog>
   </div>
@@ -180,14 +181,8 @@ function handleSubmit(form: {
     })
 }
 
-async function handleModalClose() {
+async function handlePasswordModalClose() {
   showModal.value = false
-  // Log out user and route to auth landing page
-  try {
-    await fetch('/api/logout', { method: 'POST' })
-  } catch {}
-  // Optionally clear any local auth state here if needed
-  router.push({ name: 'AuthLanding' })
 }
 
 async function resetPassword() {

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

@@ -6,6 +6,7 @@
 
     <ItemList
       v-else
+      ref="rewardListRef"
       fetchUrl="/api/reward/list"
       itemKey="rewards"
       :itemFields="REWARD_FIELDS"
@@ -35,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '@/components/shared/MessageBlock.vue'
@@ -45,7 +46,7 @@ import DeleteModal from '../shared/DeleteModal.vue'
 import type { Reward } from '@/common/models'
 import { REWARD_FIELDS } from '@/common/models'
 
-import '@/assets/view-shared.css'
+import { eventBus } from '@/common/eventBus'
 
 const $router = useRouter()
 
@@ -54,20 +55,37 @@ const rewardToDelete = ref<string | null>(null)
 const rewardListRef = ref()
 const rewardCountRef = ref<number>(-1)
 
+function handleRewardModified(event: any) {
+  // Always refresh the reward list on any add, edit, or delete
+  if (rewardListRef.value && typeof rewardListRef.value.refresh === 'function') {
+    rewardListRef.value.refresh()
+  }
+}
+
+onMounted(() => {
+  eventBus.on('reward_modified', handleRewardModified)
+})
+
+onUnmounted(() => {
+  eventBus.off('reward_modified', handleRewardModified)
+})
 function confirmDeleteReward(rewardId: string) {
   rewardToDelete.value = rewardId
   showConfirm.value = true
 }
 
 const deleteReward = async () => {
-  if (!rewardToDelete.value) return
+  const id =
+    typeof rewardToDelete.value === 'object' && rewardToDelete.value !== null
+      ? rewardToDelete.value.id
+      : rewardToDelete.value
+  if (!id) return
   try {
-    const resp = await fetch(`/api/reward/${rewardToDelete.value}`, {
+    const resp = await fetch(`/api/reward/${id}`, {
       method: 'DELETE',
     })
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
-    // Refresh the reward list after successful delete
-    rewardListRef.value?.refresh()
+    // No need to refresh here; SSE will trigger refresh
   } catch (err) {
     console.error('Failed to delete reward:', err)
   } finally {

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

@@ -32,7 +32,6 @@ const deletingChildId = ref<string | number | null>(null)
 const deleting = ref(false)
 
 const openChildEditor = (child: Child, evt?: Event) => {
-  console.log(' opening child editor for child id ', child.id)
   evt?.stopPropagation()
   router.push({ name: 'ChildEditView', params: { id: child.id } })
 }
@@ -137,7 +136,6 @@ const fetchChildren = async (): Promise<Child[]> => {
         return Promise.resolve()
       }),
     )
-    console.log(' fetched children list: ', childList)
     return childList
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to fetch children'
@@ -174,7 +172,6 @@ onUnmounted(() => {
 const shouldIgnoreNextCardClick = ref(false)
 
 const onDocClick = (e: MouseEvent) => {
-  console.log(' document click detected ')
   if (activeMenuFor.value !== null) {
     const path = (e.composedPath && e.composedPath()) || (e as any).path || []
     const clickedInsideKebab = path.some((node: unknown) => {

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

@@ -14,6 +14,8 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import '@/assets/styles.css'
+import '@/assets/colors.css'
 
 const props = defineProps<{
   show: boolean
@@ -43,6 +45,17 @@ watch(
 </script>
 
 <style>
-@import '@/assets/modal.css';
-@import '@/assets/actions-shared.css';
+.actions {
+  display: flex;
+  gap: 3rem;
+  justify-content: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+.actions .btn {
+  padding: 1rem 2.2rem;
+  font-weight: 700;
+  font-size: 1.25rem;
+  min-width: 120px;
+}
 </style>

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

@@ -100,11 +100,12 @@ function onAddImage({ id, file }: { id: string; file: File }) {
 
 function onCancel() {
   emit('cancel')
-  router.back()
 }
 
 function submit() {
   emit('submit', { ...formData.value })
+  // After submit, reset isDirty so Save button is disabled until next change
+  isDirty.value = false
 }
 
 // Editable field names (exclude custom fields that are not editable)

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

@@ -22,22 +22,24 @@ const loading = ref(true)
 const error = ref<string | null>(null)
 const selectedItems = ref<string[]>([])
 
+function refresh() {
+  fetchItems()
+}
+
 defineExpose({
   items,
   selectedItems,
+  refresh,
 })
 
 const fetchItems = async () => {
   loading.value = true
   error.value = null
-  console.log(`Fetching items from: ${props.fetchUrl}`)
   try {
     const resp = await fetch(props.fetchUrl)
-    console.log(`Fetch response status: ${resp.status}`)
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
     const data = await resp.json()
     //console log all data
-    console.log('Fetched data:', data)
     let itemList = data[props.itemKey || 'items'] || []
     if (props.filterFn) itemList = itemList.filter(props.filterFn)
     const initiallySelected: string[] = []

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

@@ -13,6 +13,7 @@ const pin = ref('')
 const error = ref('')
 const pinInput = ref<HTMLInputElement | null>(null)
 const dropdownOpen = ref(false)
+const dropdownRef = ref<HTMLElement | null>(null)
 
 const open = async () => {
   // Check if user has a pin
@@ -83,6 +84,10 @@ function toggleDropdown() {
   dropdownOpen.value = !dropdownOpen.value
 }
 
+function closeDropdown() {
+  dropdownOpen.value = false
+}
+
 async function signOut() {
   try {
     await fetch('/api/logout', { method: 'POST' })
@@ -91,18 +96,31 @@ async function signOut() {
   } catch {
     // Optionally show error
   }
-  dropdownOpen.value = false
+  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)
+  document.addEventListener('mousedown', handleClickOutside)
 })
 onUnmounted(() => {
   eventBus.off('open-login', open)
+  document.removeEventListener('mousedown', handleClickOutside)
 })
 </script>
 
@@ -111,7 +129,7 @@ onUnmounted(() => {
     <button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login" class="login-btn">
       Parent
     </button>
-    <div v-else style="display: inline-block; position: relative">
+    <div v-else style="display: inline-block; position: relative" ref="dropdownRef">
       <button
         @click="toggleDropdown"
         aria-label="Parent menu"
@@ -138,7 +156,16 @@ onUnmounted(() => {
         <button class="menu-item" @click="goToProfile" style="width: 100%; text-align: left">
           Profile
         </button>
-        <button class="menu-item" @click="handleLogout" style="width: 100%; text-align: left">
+        <button
+          class="menu-item"
+          @click="
+            () => {
+              handleLogout()
+              closeDropdown()
+            }
+          "
+          style="width: 100%; text-align: left"
+        >
           Log out
         </button>
         <button class="menu-item danger" @click="signOut" style="width: 100%; text-align: left">

frontend/vue-app/src/components/task/TaskView.vue

@@ -6,6 +6,7 @@
 
     <ItemList
       v-else
+      ref="taskListRef"
       fetchUrl="/api/task/list"
       itemKey="tasks"
       :itemFields="TASK_FIELDS"
@@ -35,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import ItemList from '../shared/ItemList.vue'
 import MessageBlock from '@/components/shared/MessageBlock.vue'
@@ -45,6 +46,8 @@ import DeleteModal from '../shared/DeleteModal.vue'
 import type { Task } from '@/common/models'
 import { TASK_FIELDS } from '@/common/models'
 
+import { eventBus } from '@/common/eventBus'
+
 const $router = useRouter()
 
 const showConfirm = ref(false)
@@ -52,20 +55,39 @@ const taskToDelete = ref<string | null>(null)
 const taskListRef = ref()
 const taskCountRef = ref<number>(-1)
 
+function handleTaskModified(event: any) {
+  // Always refresh the task list on any add, edit, or delete
+  if (taskListRef.value && typeof taskListRef.value.refresh === 'function') {
+    taskListRef.value.refresh()
+  }
+}
+
+onMounted(() => {
+  eventBus.on('task_modified', handleTaskModified)
+})
+
+onUnmounted(() => {
+  eventBus.off('task_modified', handleTaskModified)
+})
+
 function confirmDeleteTask(taskId: string) {
   taskToDelete.value = taskId
   showConfirm.value = true
 }
 
 const deleteTask = async () => {
-  if (!taskToDelete.value) return
+  // Ensure we use the string ID, not an object
+  const id =
+    typeof taskToDelete.value === 'object' && taskToDelete.value !== null
+      ? taskToDelete.value.id
+      : taskToDelete.value
+  if (!id) return
   try {
-    const resp = await fetch(`/api/task/${taskToDelete.value}`, {
+    const resp = await fetch(`/api/task/${id}`, {
       method: 'DELETE',
     })
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
-    // Refresh the task list after successful delete
-    taskListRef.value?.refresh()
+    // No need to refresh here; SSE will trigger refresh
   } catch (err) {
     console.error('Failed to delete task:', err)
   } finally {
@@ -76,8 +98,6 @@ const deleteTask = async () => {
 
 // New function to handle task creation
 const createTask = () => {
-  // Route to your create task page or open a create dialog
-  // Example:
   $router.push({ name: 'CreateTask' })
 }
 </script>

frontend/vue-app/src/layout/ParentLayout.vue

@@ -157,7 +157,7 @@ onMounted(async () => {
     </header>
 
     <main class="main-content">
-      <router-view />
+      <router-view :key="$route.fullPath" />
     </main>
 
     <div v-if="appVersion" class="app-version">v{{ appVersion }}</div>

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

@@ -179,9 +179,16 @@ const router = createRouter({
 
 // Auth guard
 router.beforeEach(async (to, from, next) => {
-  console.log('navigating to', to.fullPath, 'from', from.fullPath)
-  console.log('isParentAuthenticated:', isParentAuthenticated.value)
-  console.trace()
+  if (!isAuthReady.value) {
+    await new Promise((resolve) => {
+      const stop = watch(isAuthReady, (ready) => {
+        if (ready) {
+          stop()
+          resolve(true)
+        }
+      })
+    })
+  }
 
   // Always allow /auth and /parent/pin-setup
   if (to.path.startsWith('/auth') || to.name === 'ParentPinSetup') {