fix: email validation failure in cases when email entered is correct when trying to create a team in admin dashboard (#3588)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -25,14 +25,19 @@ declare module '@vue/runtime-core' {
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
+    HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
+    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
     HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
+    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
     SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']
     SmartCheckbox: typeof import('./../../hoppscotch-ui/src/components/smart/Checkbox.vue')['default']
     SmartConfirmModal: typeof import('./../../hoppscotch-ui/src/components/smart/ConfirmModal.vue')['default']
+    SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default']
     SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default']
     SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default']
     SmartInput: typeof import('./../../hoppscotch-ui/src/components/smart/Input.vue')['default']

packages/hoppscotch-sh-admin/src/components/teams/Add.vue

@@ -10,6 +10,8 @@
         <div class="flex flex-col relaive">
           <label for="teamName" class="py-2"> {{ t('teams.email') }} </label>
           <HoppSmartAutoComplete
+            type="email"
+            :value="ownerEmail"
             styles="w-full p-2 bg-transparent border border-divider rounded-md"
             class="flex-1 !flex"
             :source="allUsersEmail"
@@ -41,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watchEffect } from 'vue';
 import { useToast } from '~/composables/toast';
 import { useI18n } from '~/composables/i18n';
 
@@ -49,7 +51,7 @@ const t = useI18n();
 
 const toast = useToast();
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     show: boolean;
     loadingState: boolean;
@@ -69,6 +71,13 @@ const emit = defineEmits<{
 const teamName = ref('');
 const ownerEmail = ref('');
 
+watchEffect(() => {
+  if (!props.show) {
+    teamName.value = '';
+    ownerEmail.value = '';
+  }
+});
+
 const getOwnerEmail = (email: string) => (ownerEmail.value = email);
 
 const createTeam = () => {
@@ -81,8 +90,6 @@ const createTeam = () => {
     return;
   }
   emit('create-team', teamName.value, ownerEmail.value);
-  teamName.value = '';
-  ownerEmail.value = '';
 };
 
 const hideModal = () => {

packages/hoppscotch-sh-admin/src/pages/teams/index.vue

@@ -183,7 +183,7 @@ const createTeam = async (newTeamName: string, ownerEmail: string) => {
     toast.error(`${t('state.team_name_long')}`);
     return;
   }
-  if (ownerEmail.length == 0) {
+  if (ownerEmail.length === 0) {
     toast.error(`${t('state.enter_team_email')}`);
     return;
   }

packages/hoppscotch-ui/src/components/smart/AutoComplete.vue

@@ -3,7 +3,7 @@
     <input
       ref="acInput"
       v-model="text"
-      type="text"
+      :type="type"
       autocomplete="off"
       :placeholder="placeholder"
       :spellcheck="spellcheck"
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed } from "vue"
+import { onMounted, ref, computed, watch } from "vue"
 
 const acInput = ref<HTMLInputElement>()
 
@@ -67,6 +67,11 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  type: {
+    type: String,
+    default: "text",
+  },
 })
 
 const emit = defineEmits<{
@@ -85,6 +90,13 @@ onMounted(() => {
   })
 })
 
+watch(
+  () => props.value,
+  (newValue) => {
+    text.value = newValue
+  }
+)
+
 const suggestions = computed(() => {
   const input = text.value.substring(0, selectionStart.value)
   return (