Task: Improve registration ux (#256)

* feat: add required asterisk indicator and improve phone number input format

* feat: enhance dropdown search with loading state and improved member filtering

* feat: redesign thank you page with enhanced messaging and responsive layout

* feat: implement form data persistence with localStorage and enhance registration flow

* chore: remove unnecessary onMounted

* chore: remove additonal unnecessary onMounted in the registration phases

* chore: remove unused onMounted imports

* chore: remove watch deep true for the persistance

* feat: add a button to redirect the user to the home page

* feat: remove timeout to clear the data and use the close registration event trigger instead

Author: thamudi

components/Form/AppControlInput.vue

@@ -14,11 +14,17 @@
         :type="props.inputType"
         class="checkbox form-check-input border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
       />
-      <label class="items-center" :for="props.labelId"> <slot /></label>
+      <label class="items-center" :for="props.labelId">
+        <slot />
+        <span v-if="props.isRequired" class="required-asterisk">*</span>
+      </label>
     </div>
     <div v-else>
       <div v-if="$props.showSlot">
-        <label> <slot /></label>
+        <label>
+          <slot />
+          <span v-if="props.isRequired" class="required-asterisk">*</span>
+        </label>
       </div>
       <div
         v-if="props.inputType !== 'textarea' && props.inputType !== 'file'"
@@ -33,6 +39,7 @@
           :type="state.showPassword ? 'text' : props.inputType"
           :pattern="props.pattern"
           :value="props.value"
+          :title="props.title"
           class="interactive-control"
           :class="props.showPasswordIcon ? 'hide-right-border' : ''"
           @focusin="state.pwActive = true"
@@ -62,6 +69,7 @@
           :placeholder="props.placeholder"
           :type="state.showPassword ? 'text' : props.inputType"
           :pattern="props.pattern"
+          :title="props.title"
           class="interactive-control"
           :class="props.editIcon ? 'input-file-edit-icon' : ''"
           @focusin="state.pwActive = true"
@@ -74,6 +82,7 @@
         rows="5"
         @input="$emit('update:value', $event.target.value)"
         :required="props.isRequired"
+        :title="props.title"
         >{{ props.value }}</textarea
       >
     </div>
@@ -96,7 +105,8 @@ const props = defineProps({
   value: { default: '' },
   width: { type: String, default: '' },
   labelId: { type: String, default: '' },
-  acceptedFiles: {type: String, default: ''}
+  acceptedFiles: {type: String, default: ''},
+  title: { type: String, default: '' }
 })
 
 const state = reactive({
@@ -191,4 +201,9 @@ input.input-file-edit-icon {
 .file-edit-container:hover {
   background-color: rgb(11 150 171 / 0.8);
 }
+
+.required-asterisk {
+  @apply text-community-red ml-1;
+  font-weight: bold;
+}
 </style>

components/Form/AppDropDownSearch.vue

@@ -22,17 +22,22 @@
       <div class="dropdown-popover">
         <form @submit.prevent="onSubmit">
           <input
+            ref="searchInput"
             class="input-field"
             type="text"
             :placeholder="placeholderText"
             v-model="state.searchQuery"
+            @focus="onFocus"
+            @blur="onBlur"
+            @input="onInput"
           />
           <svg
-            @submit="onSubmit"
+            @click="onSubmit"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             width="24"
             height="24"
+            class="cursor-pointer"
           >
             <path fill="none" d="M0 0h24v24H0z" />
             <path
@@ -42,11 +47,15 @@
           </svg>
         </form>
         <div class="options" :class="state.isVisible ? 'visible' : 'invisible'">
-          <ul>
+          <div v-if="state.loading" class="loading p-4 text-center">
+            <div class="loader mx-auto"></div>
+            <span class="text-sm text-gray-500">Loading members...</span>
+          </div>
+          <ul v-else-if="filteredMembers.length">
             <li
               @click="selectedItem(member)"
-              v-for="(member, index) in state.members"
-              :key="`member-${index}`"
+              v-for="(member, index) in filteredMembers"
+              :key="`member-${member.id || index}`"
               class="flex flex-row"
             >
               <img
@@ -63,14 +72,16 @@
               </span>
             </li>
           </ul>
+          <div v-else-if="state.searchQuery && !state.loading" class="no-results p-4 text-center text-gray-500">
+            No members found matching "{{ state.searchQuery }}"
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { reactive, computed } from 'vue'
-const config = useRuntimeConfig()
+import { reactive, computed, ref } from 'vue'
 
 // Define emit events
 const emit = defineEmits(['emitSelected'])
@@ -80,9 +91,14 @@ const state = reactive({
   searchQuery: '',
   selectedItem: null,
   isVisible: false,
-  members: [],
+  allMembers: [], // Cache all members
+  loading: false,
+  membersLoaded: false, // Track if we've loaded members
+  focusTimeout: null, // For debouncing blur events
 })
 
+const searchInput = ref(null)
+
 // Define passed props
 const props = defineProps({
   placeholderText: {
@@ -91,30 +107,122 @@ const props = defineProps({
   },
 })
 
+// Computed property for filtered members
+const filteredMembers = computed(() => {
+  if (!state.searchQuery.trim()) {
+    return state.allMembers
+  }
+
+  const query = state.searchQuery.toLowerCase()
+  return state.allMembers.filter(member => {
+    const firstName = member.first_name_en?.toLowerCase() || ''
+    const lastName = member.last_name_en?.toLowerCase() || ''
+    const fullName = `${firstName} ${lastName}`
+
+    return firstName.includes(query) ||
+           lastName.includes(query) ||
+           fullName.includes(query)
+  })
+})
+
+// Load all members (called once on component mount or first focus)
+const loadAllMembers = async () => {
+  if (state.membersLoaded || state.loading) return
+
+  state.loading = true
+
+  try {
+    // Use the correct paginated API endpoint
+    const data = await $api('/member/page/1?is_none_josa_member=false')
+    state.allMembers = data?.items || []
+    state.membersLoaded = true
+  } catch (error) {
+    console.error('Error loading members:', error)
+    state.allMembers = []
+  } finally {
+    state.loading = false
+  }
+}
+
+// Search for specific members (when user types and hits enter)
+const searchMembers = async (query) => {
+  if (!query.trim()) {
+    return
+  }
+
+  state.loading = true
+
+  try {
+    // Use the correct paginated API endpoint with name filter
+    const data = await $api(`/member/page/1?is_none_josa_member=false&name=${encodeURIComponent(query)}`)
+
+    // Merge search results with cached members (avoid duplicates)
+    const searchResults = data?.items || []
+    const existingIds = new Set(state.allMembers.map(m => m.id))
+    const newMembers = searchResults.filter(m => !existingIds.has(m.id))
+
+    state.allMembers = [...state.allMembers, ...newMembers]
+  } catch (error) {
+    console.error('Error searching members:', error)
+  } finally {
+    state.loading = false
+  }
+}
+
+// Handle input focus - show dropdown and load members if needed
+const onFocus = async () => {
+  // Clear any pending blur timeout
+  if (state.focusTimeout) {
+    clearTimeout(state.focusTimeout)
+    state.focusTimeout = null
+  }
+
+  await loadAllMembers()
+  state.isVisible = true
+}
+
+// Handle input blur - hide dropdown after a short delay
+const onBlur = () => {
+  // Delay hiding to allow clicks on dropdown items
+  state.focusTimeout = setTimeout(() => {
+    state.isVisible = false
+  }, 200)
+}
+
+// Handle input changes - filter existing members
+const onInput = () => {
+  // Show dropdown if hidden and there's content
+  if (!state.isVisible && state.searchQuery.trim()) {
+    state.isVisible = true
+  }
+
+  // If dropdown is visible, we don't need to do anything else
+  // The computed filteredMembers will handle the filtering
+}
+
+// Handle form submission (Enter key) - search for more members
 const onSubmit = async () => {
-  await $api(
-    `/member/search?q=${state.searchQuery}`
-  )
-    .then((response) => response.json())
-    .then((data) => {
-      state.members = Object.assign([], data)
-    })
-
-  if (state.members.length) {
+  if (state.searchQuery.trim()) {
+    await searchMembers(state.searchQuery.trim())
     state.isVisible = true
-  } else {
-    state.isVisible = false
   }
 }
 
 // Event Callback function to assign the selected value and emit the value back
 const selectedItem = (item) => {
   state.selectedItem = item
-  state.isVisible = !state.isVisible
+  state.isVisible = false
   state.searchQuery = ''
 
+  // Clear any pending blur timeout
+  if (state.focusTimeout) {
+    clearTimeout(state.focusTimeout)
+    state.focusTimeout = null
+  }
+
   emit('emitSelected', state.selectedItem)
 }
+
 </script>
 <style lang="postcss" scoped>
 input {
@@ -142,6 +250,8 @@ input {
 
   .options {
     border: 1px solid #e0dddb;
+    max-height: 300px;
+    overflow-y: auto;
 
     ul {
       @apply list-none;
@@ -157,6 +267,36 @@ input {
     li:hover {
       @apply bg-community-blue text-community-grey-light cursor-pointer;
     }
+
+    li:last-child {
+      border-bottom: none;
+    }
   }
+
+  .loading {
+    @apply flex flex-col items-center gap-2;
+  }
+
+  .loader {
+    @apply w-6 h-6 border-2 border-gray-300 border-t-community-blue rounded-full animate-spin;
+  }
+
+  .no-results {
+    @apply text-sm italic;
+  }
+}
+
+/* Ensure dropdown appears above other elements */
+.dropdown-popover {
+  z-index: 1000;
+}
+
+/* Hide dropdown when invisible */
+.options.invisible {
+  @apply hidden;
+}
+
+.options.visible {
+  @apply block;
 }
 </style>