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

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>