refactor: add new email, display server response

webapp/pages/settings/my-email-address/index.spec.js

@@ -31,7 +31,9 @@ describe('EmailSettingsIndexPage', () => {
         error: jest.fn(),
       },
       $apollo: {
-        mutate: jest.fn().mockResolvedValue(),
+        mutate: jest.fn().mockResolvedValue({
+          data: { AddEmailAddress: { email: 'yet-another-email@example.org' } },
+        }),
       },
       $router: {
         push: jest.fn(),
@@ -71,12 +73,15 @@ describe('EmailSettingsIndexPage', () => {
         describe('enter another email', () => {
           beforeEach(() => {
             wrapper = Wrapper()
-            wrapper.find('#email').setValue('yet-another-email@example.org')
+            wrapper.find('#email').setValue('yet-ANOTHER-email@example.org')
             wrapper.find('form').trigger('submit')
           })
 
-          it('calls $apollo.mutate', () => {
-            expect(mocks.$apollo.mutate).toHaveBeenCalled()
+          it('delivers email to backend', () => {
+            const expected = expect.objectContaining({
+              variables: { email: 'yet-ANOTHER-email@example.org' },
+            })
+            expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expected)
           })
 
           it('no form errors', () => {
@@ -87,7 +92,7 @@ describe('EmailSettingsIndexPage', () => {
           describe('after timeout', () => {
             beforeEach(jest.runAllTimers)
 
-            it('redirects to `my-email-address/enter-nonce`', () => {
+            it('redirects with response from backend', () => {
               expect(mocks.$router.push).toHaveBeenCalledWith({
                 path: 'my-email-address/enter-nonce',
                 query: { email: 'yet-another-email@example.org' },

webapp/pages/settings/my-email-address/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-card centered v-if="success">
+  <ds-card centered v-if="data">
     <transition name="ds-transition-fade">
       <sweetalert-icon icon="info" />
     </transition>
@@ -41,15 +41,12 @@ export default {
   data() {
     return {
       backendErrors: null,
-      success: false,
+      data: null,
     }
   },
   computed: {
-    email() {
-      return normalizeEmail(this.formData.email)
-    },
     submitMessage() {
-      const { email } = this
+      const { email } = this.data.AddEmailAddress
       return this.$t('settings.email.submitted', { email })
     },
     ...mapGetters({
@@ -65,7 +62,7 @@ export default {
       },
     },
     formSchema() {
-      const { email } = this.currentUser
+      const currentEmail = normalizeEmail(this.currentUser.email)
       const sameEmailValidationError = this.$t('settings.email.validation.same-email')
       return {
         email: [
@@ -73,7 +70,7 @@ export default {
           {
             validator(rule, value, callback, source, options) {
               const errors = []
-              if (email === normalizeEmail(value)) {
+              if (currentEmail === normalizeEmail(value)) {
                 errors.push(sameEmailValidationError)
               }
               return errors
@@ -85,19 +82,19 @@ export default {
   },
   methods: {
     async submit() {
-      const { email } = this
+      const { email } = this.formData
       try {
-        await this.$apollo.mutate({
+        const response = await this.$apollo.mutate({
           mutation: AddEmailAddressMutation,
           variables: { email },
         })
+        this.data = response.data
         this.$toast.success(this.$t('settings.email.success'))
-        this.success = true
 
         setTimeout(() => {
           this.$router.push({
             path: 'my-email-address/enter-nonce',
-            query: { email },
+            query: { email: this.data.AddEmailAddress.email },
           })
         }, 3000)
       } catch (err) {