From 144d14ab5bfbc49a4e7c763e06292af6933a4a07 Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Wed, 29 Nov 2023 21:49:49 +0530
Subject: [PATCH] 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 |  5 +++++
 .../src/components/teams/Add.vue                 | 15 +++++++++++----
 .../src/pages/teams/index.vue                    |  2 +-
 .../src/components/smart/AutoComplete.vue        | 16 ++++++++++++++--
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index df86a0b0c..95dbd07cd 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/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']
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/Add.vue b/packages/hoppscotch-sh-admin/src/components/teams/Add.vue
index 6598432d8..9818f9844 100644
--- a/packages/hoppscotch-sh-admin/src/components/teams/Add.vue
+++ b/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 = () => {
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
index 8dcdbffaf..f7dc58320 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/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;
   }
diff --git a/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue b/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue
index 9316c3c7f..5de2b6b6f 100644
--- a/packages/hoppscotch-ui/src/components/smart/AutoComplete.vue
+++ b/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 (