Split routes in two

So, to get a direct link it's better to have one route that calls a
mutation as soon as it is visited.

webapp/locales/de.json

@@ -165,7 +165,9 @@
       "labelNonce": "Bestätigungscode eingeben",
       "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-successful": "Deine E-Mail Adresse wurde erfolgreich geändert.",
+      "change-error": "Deine E-Mail Adresse konnte nicht verifiziert werden.",
+      "change-error-help": "Vielleicht ist der Bestätigungscode falsch oder diese E-Mail Adresse wurde nicht hinterlegt?"
     },
     "validation": {
       "slug": {

webapp/locales/en.json

@@ -166,7 +166,9 @@
       "labelNonce": "Enter your code",
       "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-successful": "Your E-Mail address has been changed successfully.",
+      "change-error": "Your E-Mail could not be changed.",
+      "change-error-help": "Maybe the code was invalid or you did not add a new E-Mail address before?"
     },
     "validation": {
       "slug": {

webapp/pages/settings/my-email-address/enter-nonce.vue

@@ -0,0 +1,59 @@
+<template>
+  <ds-form v-model="form" :schema="formSchema" @submit="submit">
+    <template slot-scope="{ errors }">
+      <ds-card :header="$t('settings.email.name')">
+        <ds-input
+          id="email"
+          model="email"
+          icon="at"
+          disabled
+          :label="$t('settings.email.labelNewEmail')"
+        />
+        <ds-input
+          id="nonce"
+          model="nonce"
+          icon="question-circle"
+          :label="$t('settings.email.labelNonce')"
+        />
+
+        <template slot="footer">
+          <ds-button class="submit-button" icon="check" :disabled="errors" type="submit" primary>
+            {{ $t('actions.save') }}
+          </ds-button>
+        </template>
+      </ds-card>
+    </template>
+  </ds-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formSchema: {
+        nonce: { type: 'string', required: true },
+      },
+    }
+  },
+  computed: {
+    form: {
+      get: function() {
+        const { email = '', nonce = '' } = this.$route.query
+        return { email, nonce }
+      },
+      set: function(formData) {
+        this.formData = formData
+      },
+    },
+  },
+  methods: {
+    async submit() {
+      const { email, nonce } = this.formData
+      this.$router.replace({
+        path: 'verify',
+        query: { email, nonce },
+      })
+    },
+  },
+}
+</script>

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

@@ -68,7 +68,7 @@ export default {
 
         setTimeout(() => {
           this.$router.push({
-            path: 'my-email-address/verify-email-address-change',
+            path: 'my-email-address/enter-nonce',
             query: { email },
           })
         }, 3000)

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

@@ -1,97 +0,0 @@
-<template>
-  <ds-card centered v-if="success">
-    <transition name="ds-transition-fade">
-      <sweetalert-icon icon="success" />
-    </transition>
-    <ds-text>
-      {{ $t(`settings.email.change-successful`) }}
-    </ds-text>
-  </ds-card>
-  <ds-form v-else v-model="form" :schema="formSchema" @submit="submit">
-    <template slot-scope="{ errors }">
-      <ds-card :header="$t('settings.email.name')">
-        <ds-input
-          id="email"
-          model="email"
-          icon="at"
-          disabled
-          :label="$t('settings.email.labelNewEmail')"
-        />
-        <ds-input
-          id="nonce"
-          model="nonce"
-          icon="question-circle"
-          :label="$t('settings.email.labelNonce')"
-        />
-
-        <template slot="footer">
-          <ds-button class="submit-button" icon="check" :disabled="errors" type="submit" primary>
-            {{ $t('actions.save') }}
-          </ds-button>
-        </template>
-      </ds-card>
-    </template>
-  </ds-form>
-</template>
-
-<script>
-import { VerifyEmailAddressMutation } from '~/graphql/EmailAddress.js'
-import { SweetalertIcon } from 'vue-sweetalert-icons'
-import { mapGetters, mapMutations } from 'vuex'
-
-export default {
-  components: {
-    SweetalertIcon,
-  },
-  data() {
-    return {
-      formSchema: {
-        nonce: { type: 'string', required: true },
-      },
-      success: false,
-    }
-  },
-  computed: {
-    ...mapGetters({
-      currentUser: 'auth/user',
-    }),
-    form: {
-      get: function() {
-        const { email = '', nonce = '' } = this.$route.query
-        return { email, nonce }
-      },
-      set: function(formData) {
-        this.formData = formData
-      },
-    },
-  },
-  methods: {
-    ...mapMutations({
-      setCurrentUser: 'auth/SET_USER',
-    }),
-    async submit() {
-      const { email, nonce } = this.formData
-      try {
-        const {
-          data: { VerifyEmailAddress },
-        } = await this.$apollo.mutate({
-          mutation: VerifyEmailAddressMutation,
-          variables: { email, nonce },
-        })
-        this.setCurrentUser({
-          ...this.currentUser,
-          email: VerifyEmailAddress.email,
-        })
-        this.$toast.success(this.$t('settings.email.change-successful'))
-        this.success = true
-
-        setTimeout(() => {
-          this.$router.push('/settings/my-email-address')
-        }, 3000)
-      } catch (err) {
-        this.$toast.error(err.message)
-      }
-    },
-  },
-}
-</script>

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

@@ -0,0 +1,59 @@
+<template>
+  <ds-card centered>
+    <client-only>
+      <transition name="ds-transition-fade">
+        <sweetalert-icon :icon="sweetAlertIcon" />
+      </transition>
+    </client-only>
+    <ds-text v-if="success">
+      {{ $t(`settings.email.change-successful`) }}
+    </ds-text>
+    <ds-text v-else>
+      {{ $t(`settings.email.change-error`) }}
+      <br />
+      {{ $t(`settings.email.change-error-help`) }}
+    </ds-text>
+  </ds-card>
+</template>
+
+<script>
+import { VerifyEmailAddressMutation } from '~/graphql/EmailAddress.js'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+
+export default {
+  components: {
+    SweetalertIcon,
+  },
+  computed: {
+    sweetAlertIcon() {
+      return this.success ? 'success' : 'error'
+    },
+  },
+  created() {
+    setTimeout(() => {
+      this.$router.replace({ name: 'settings-my-email-address' })
+    }, 3000)
+  },
+  async asyncData(context) {
+    const {
+      query,
+      app: { apolloProvider },
+    } = context
+    const client = apolloProvider.defaultClient
+    let success
+    const { email = '', nonce = '' } = query
+
+    try {
+      await client.mutate({
+        mutation: VerifyEmailAddressMutation,
+        variables: { email, nonce },
+      })
+      success = true
+    } catch (error) {
+      success = false
+    }
+
+    return { success }
+  },
+}
+</script>