Translate backend error and avoid $toast

webapp/locales/de.json

@@ -169,7 +169,7 @@
       "success": "Eine neue E-Mail Addresse wurde registriert.",
       "submitted": "Eine E-Mail zur Bestätigung deiner Adresse wurde an <b>{email}</b> gesendet.",
       "change-successful": "Deine E-Mail Adresse wurde erfolgreich geändert.",
-      "change-error": {
+      "verification-error": {
         "message": "Deine E-Mail Adresse konnte nicht verifiziert werden.",
         "support": "Wenn das Problem weiterhin besteht, kontaktiere uns gerne per E-Mail an",
         "explanation": "Das kann verschiedene Ursachen haben:",

webapp/locales/en.json

@@ -170,7 +170,7 @@
       "success": "A new E-Mail address has been registered.",
       "submitted": "An email to verify your address has been sent to <b>{email}</b>.",
       "change-successful": "Your E-Mail address has been changed successfully.",
-      "change-error": {
+      "verification-error": {
         "message": "Your E-Mail could not be changed.",
         "explanation": "This can have different causes:",
         "reason": {

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

@@ -95,6 +95,21 @@ describe('EmailSettingsIndexPage', () => {
             })
           })
         })
+
+        describe('if backend responds with unique constraint violation', () => {
+          beforeEach(() => {
+            mocks.$apollo.mutate = jest.fn().mockRejectedValue({
+              message: 'User account already exists',
+            })
+            wrapper = Wrapper()
+            wrapper.find('#email').setValue('already-taken@example.org')
+            wrapper.find('form').trigger('submit')
+          })
+
+          it('translates error message', () => {
+            expect(wrapper.text()).toContain('registration.signup.form.errors.email-exists')
+          })
+        })
       })
     })
   })

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

@@ -11,6 +11,9 @@
         <ds-input id="email" model="email" icon="at" :label="$t('settings.email.labelEmail')" />
 
         <template slot="footer">
+          <ds-space class="backendErrors" v-if="backendErrors">
+            <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
+          </ds-space>
           <ds-button class="submit-button" icon="check" :disabled="errors" type="submit" primary>
             {{ $t('actions.save') }}
           </ds-button>
@@ -31,6 +34,7 @@ export default {
   },
   data() {
     return {
+      backendErrors: null,
       success: false,
     }
   },
@@ -88,6 +92,14 @@ export default {
           })
         }, 3000)
       } catch (err) {
+        if (err.message.includes('exists')) {
+          // We cannot use form validation errors here, the backend does not
+          // have a query to filter for email addresses. This is a privacy
+          // consideration. We could implement a dedicated query to check that
+          // but I think it's too much effort for this feature.
+          this.backendErrors = { message: this.$t('registration.signup.form.errors.email-exists') }
+          return
+        }
         this.$toast.error(err.message)
       }
     },

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

@@ -149,7 +149,7 @@ describe('EmailVerifyPage', () => {
       })
 
       it('shows success message', () => {
-        expect(wrapper.text()).toContain('settings.email.change-error')
+        expect(wrapper.text()).toContain('settings.email.verification-error')
       })
 
       describe('after timeout', () => {

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

@@ -12,26 +12,26 @@
     </ds-space>
     <template v-else>
       <ds-text bold align="center">
-        {{ $t(`settings.email.change-error.message`) }}
+        {{ $t(`settings.email.verification-error.message`) }}
       </ds-text>
       <ds-space class="message">
         <client-only>
           <ds-text>
             <ds-space margin-top="large" margin-bottom="small">
-              {{ $t(`settings.email.change-error.explanation`) }}
+              {{ $t(`settings.email.verification-error.explanation`) }}
             </ds-space>
             <ds-list>
               <ds-list-item>
-                {{ $t(`settings.email.change-error.reason.invalid-nonce`) }}
+                {{ $t(`settings.email.verification-error.reason.invalid-nonce`) }}
               </ds-list-item>
               <ds-list-item>
-                {{ $t(`settings.email.change-error.reason.no-email-request`) }}
+                {{ $t(`settings.email.verification-error.reason.no-email-request`) }}
               </ds-list-item>
               <ds-list-item>
-                {{ $t(`settings.email.change-error.reason.email-address-taken`) }}
+                {{ $t(`settings.email.verification-error.reason.email-address-taken`) }}
               </ds-list-item>
             </ds-list>
-            {{ $t('settings.email.change-error.support') }}
+            {{ $t('settings.email.verification-error.support') }}
             <a href="mailto:support@human-connection.org">support@human-connection.org</a>
           </ds-text>
         </client-only>