refactor + email text field fix (#2854)

Signed-off-by: Shaanjot Gill <gill.shaanjots@gmail.com>

Author: shaangill025

auth-web/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.24",
+  "version": "2.6.25",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/package.json

@@ -52,46 +52,44 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref } from '@vue/composition-api'
+import { defineComponent, onMounted, reactive, toRefs } from '@vue/composition-api'
 import { SafeEmail } from '@/models/safe-email'
 import StaffService from '@/services/staff.services'
 
 export default defineComponent({
   name: 'SafeEmailView',
   setup () {
-    const safeEmails = ref<SafeEmail[]>()
-    const alertMessage = ref('')
-    const alertType = ref('')
-    const deletedEmail = ref('')
-    const delEmailAlertMsg = ref('')
-    const delEmailAlertType = ref('')
+    const state = reactive({
+      safeEmails: [] as SafeEmail[],
+      alertMessage: '',
+      alertType: '',
+      deletedEmail: '',
+      delEmailAlertMsg: '',
+      delEmailAlertType: ''
+    })
 
     function showGeneralAlert (msg: string, type: string) {
-      alertMessage.value = msg
-      alertType.value = type
+      state.alertMessage = msg
+      state.alertType = type
       // 2 seconds timeout
       setTimeout(() => {
-        alertMessage.value = ''
+        state.alertMessage = ''
       }, 2000)
     }
 
     function showPerEmailAlert (email: string, type: string) {
-      deletedEmail.value = email
-      delEmailAlertType.value = type
-      if (type === 'success') {
-        delEmailAlertMsg.value = `Deleted`
-      } else {
-        delEmailAlertMsg.value = `Error`
-      }
+      state.deletedEmail = email
+      state.delEmailAlertType = type
+      state.delEmailAlertMsg = type === 'success' ? 'Deleted' : 'Error'
       // 1 seconds timeout
       setTimeout(() => {
-        deletedEmail.value = ''
+        state.deletedEmail = ''
       }, 1000)
     }
 
     async function getSafeEmails () {
       try {
-        safeEmails.value = (await StaffService.getSafeEmails()).data
+        state.safeEmails = (await StaffService.getSafeEmails()).data
       } catch (error) {
         showGeneralAlert(`Error fetching safe emails, ${error}`, 'error')
       }
@@ -114,15 +112,10 @@ export default defineComponent({
     })
 
     return {
+      ...toRefs(state),
       deleteEmail,
       getSafeEmails,
-      showGeneralAlert,
-      safeEmails,
-      alertMessage,
-      alertType,
-      deletedEmail,
-      delEmailAlertMsg,
-      delEmailAlertType
+      showGeneralAlert
     }
   }
 })

auth-web/src/views/auth/staff/SafeEmailView.vue

@@ -433,6 +433,7 @@ export default defineComponent({
         await StaffService.addSafeEmail(safeListEmailsRequestBody)
         await safeEmailView.value.getSafeEmails()
         safeEmailView.value.showGeneralAlert(`Email ${emailToAdd.value} added successfully`, 'success')
+        emailToAdd.value = ''
       } catch (error) {
         // eslint-disable-next-line no-console
         const errMsg = `Error adding ${emailToAdd.value}, ${error}`