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

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