Improve UX

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

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) {

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() {