Improve UX

Signed-off-by: Christopher Ng <chrng8@gmail.com>

diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
index 7ae0190801381c3bebeb909c7da4698fe79b12e7..2c6d34b44f360fa2a049f27937cc420394f03948 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue
@@ -135,7 +135,10 @@ export default {
                },
 
                deleteDisabled() {
-                       return !this.containsNoWhitespace(this.email)
+                       if (this.primary) {
+                               return this.email === ''
+                       }
+                       return this.email !== '' && !this.isValid()
                },
 
                deleteEmailLabel() {
@@ -146,6 +149,12 @@ export default {
                },
        },
 
+       mounted() {
+               if (this.initialEmail === '') {
+                       this.$nextTick(() => this.$refs.email?.focus())
+               }
+       },
+
        methods: {
                onEmailChange(e) {
                        this.$emit('update:email', e.target.value)
@@ -154,16 +163,16 @@ export default {
                },
 
                debounceEmailChange: debounce(async function() {
-                       if ((this.$refs.email?.checkValidity() && this.containsNoWhitespace(this.email)) || this.email === '') {
+                       if (this.$refs.email?.checkValidity() || this.email === '') {
                                if (this.primary) {
                                        await this.updatePrimaryEmail()
                                } else {
-                                       if (this.initialEmail && this.email === '') {
-                                               await this.deleteAdditionalEmail()
-                                       } else if (this.initialEmail === '') {
-                                               await this.addAdditionalEmail()
-                                       } else {
-                                               await this.updateAdditionalEmail()
+                                       if (this.email) {
+                                               if (this.initialEmail === '') {
+                                                       await this.addAdditionalEmail()
+                                               } else {
+                                                       await this.updateAdditionalEmail()
+                                               }
                                        }
                                }
                        }
@@ -218,8 +227,8 @@ export default {
                        }
                },
 
-               containsNoWhitespace(string) {
-                       return /^\S+$/.test(string)
+               isValid() {
+                       return /^\S+$/.test(this.email)
                },
 
                handleDeleteAdditionalEmail(status) {

diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
index bcd5973f626f3c26336dd184e1b1d04ff22f0147..57e9ac60357d6be82fe256c1965c77efa94ef3c0 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
@@ -25,12 +25,12 @@
                class="section"
                @submit.stop.prevent="() => {}">
                <HeaderBar
-                       :can-edit-emails="isDisplayNameChangeSupported"
+                       :can-edit-emails="displayNameChangeSupported"
                        :is-valid-form="isValidForm"
                        :scope.sync="primaryEmail.scope"
                        @addAdditionalEmail="onAddAdditionalEmail" />
 
-               <template v-if="isDisplayNameChangeSupported">
+               <template v-if="displayNameChangeSupported">
                        <Email
                                :primary="true"
                                :scope.sync="primaryEmail.scope"
@@ -75,16 +75,13 @@ export default {
        data() {
                return {
                        additionalEmails,
+                       displayNameChangeSupported,
                        primaryEmail,
                        isValidForm: true,
                }
        },
 
        computed: {
-               isDisplayNameChangeSupported() {
-                       return displayNameChangeSupported
-               },
-
                primaryEmailValue: {
                        get() {
                                return this.primaryEmail.value
@@ -116,6 +113,7 @@ export default {
 
                onDeleteAdditionalEmail(index) {
                        this.$delete(this.additionalEmails, index)
+                       this.$nextTick(() => this.updateFormValidity())
                },
 
                async onUpdateEmail() {