Refine UX for primary email deletion

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

diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
index 700036872b426380b0e38444f10b898f30419c37..2bcc491323b58df58c7e40fc5c23a367113a2c1c 100644 (file)
--- a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
@@ -35,13 +35,13 @@
                                :primary="true"
                                :scope.sync="primaryEmail.scope"
                                :email.sync="primaryEmail.value"
-                               @update:email="updateFormValidity" />
+                               @update:email="onUpdateEmail" />
                        <Email v-for="(additionalEmail, index) in additionalEmails"
                                :key="index"
                                :index="index"
                                :scope.sync="additionalEmail.scope"
                                :email.sync="additionalEmail.value"
-                               @update:email="updateFormValidity"
+                               @update:email="onUpdateEmail"
                                @deleteAdditionalEmail="onDeleteAdditionalEmail(index)" />
                </template>
 
@@ -53,10 +53,12 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
+import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/styles/toast.scss'
 
 import HeaderBar from './HeaderBar'
 import Email from './Email'
+import { savePrimaryEmail, removeAdditionalEmail } from '../../../service/PersonalInfoService'
 import { DEFAULT_ADDITIONAL_EMAIL_SCOPE } from '../../../constants/AccountPropertyConstants'
 
 const { additionalEmails, primaryEmail } = loadState('settings', 'emails', {})
@@ -83,6 +85,22 @@ export default {
                isDisplayNameChangeSupported() {
                        return this.accountParams.displayNameChangeSupported
                },
+
+               primaryEmailValue: {
+                       get() {
+                               return this.primaryEmail.value
+                       },
+                       set(value) {
+                               this.primaryEmail.value = value
+                       },
+               },
+
+               firstAdditionalEmail() {
+                       if (this.additionalEmails.length) {
+                               return this.additionalEmails[0].value
+                       }
+                       return null
+               },
        },
 
        mounted() {
@@ -101,6 +119,51 @@ export default {
                        this.$delete(this.additionalEmails, index)
                },
 
+               async onUpdateEmail() {
+                       this.$nextTick(() => this.updateFormValidity())
+
+                       if (this.primaryEmailValue === '' && this.firstAdditionalEmail) {
+                               const deletedEmail = this.firstAdditionalEmail
+                               await this.deleteFirstAdditionalEmail()
+                               this.primaryEmailValue = deletedEmail
+                               await this.updatePrimaryEmail()
+                               this.$nextTick(() => this.updateFormValidity())
+                       }
+               },
+
+               async updatePrimaryEmail() {
+                       try {
+                               const responseData = await savePrimaryEmail(this.primaryEmailValue)
+                               this.handleResponse(responseData.ocs?.meta?.status)
+                       } catch (e) {
+                               this.handleResponse('error', 'Unable to update primary email address', e)
+                       }
+               },
+
+               async deleteFirstAdditionalEmail() {
+                       try {
+                               const responseData = await removeAdditionalEmail(this.firstAdditionalEmail)
+                               this.handleDeleteFirstAdditionalEmail(responseData.ocs?.meta?.status)
+                       } catch (e) {
+                               this.handleResponse('error', 'Unable to delete additional email address', e)
+                       }
+               },
+
+               handleDeleteFirstAdditionalEmail(status) {
+                       if (status === 'ok') {
+                               this.$delete(this.additionalEmails, 0)
+                       } else {
+                               this.handleResponse('error', 'Unable to delete additional email address', {})
+                       }
+               },
+
+               handleResponse(status, errorMessage, error) {
+                       if (status !== 'ok') {
+                               showError(t('settings', errorMessage))
+                               this.logger.error(errorMessage, error)
+                       }
+               },
+
                updateFormValidity() {
                        this.isValidForm = this.$refs.form?.checkValidity()
                },