diff options
author | Christopher Ng <chrng8@gmail.com> | 2021-07-20 04:44:03 +0300 |
---|---|---|
committer | Christopher Ng <chrng8@gmail.com> | 2021-07-20 17:58:38 +0300 |
commit | 07c6ed3df226c42bfb66984842a86c7f3bcfaa84 (patch) | |
tree | 159a866fb80e00a77abda3d373c0a9c49bba7cc4 /apps/settings/src | |
parent | 71109b74259fdc5ec78e278d1674cf314c414ae1 (diff) |
Improve UX
Signed-off-by: Christopher Ng <chrng8@gmail.com>
Diffstat (limited to 'apps/settings/src')
-rw-r--r-- | apps/settings/src/components/PersonalInfo/EmailSection/Email.vue | 29 | ||||
-rw-r--r-- | apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue | 10 |
2 files changed, 23 insertions, 16 deletions
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue b/apps/settings/src/components/PersonalInfo/EmailSection/Email.vue index 7ae01908013..2c6d34b44f3 100644 --- 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 bcd5973f626..57e9ac60357 100644 --- 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() { |