Basic email change works

webapp/graphql/EmailAddress.js

@@ -8,3 +8,13 @@ export const AddEmailAddressMutation = gql`
     }
   }
 `
+
+export const VerifyEmailAddressMutation = gql`
+  mutation($email: String!, $nonce: String!) {
+    VerifyEmailAddress(email: $email, nonce: $nonce) {
+      email
+      verifiedAt
+      createdAt
+    }
+  }
+`

webapp/locales/de.json

@@ -161,8 +161,11 @@
     "email": {
       "name": "Deine E-Mail",
       "labelEmail": "E-Mail Adresse ändern",
+      "labelNewEmail": "Neue E-Mail Adresse",
+      "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."
+      "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."
     },
     "validation": {
       "slug": {

webapp/locales/en.json

@@ -162,8 +162,11 @@
     "email": {
       "name": "Your E-Mail",
       "labelEmail": "Change your E-Mail address",
+      "labelNewEmail": "New E-Mail Address",
+      "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>."
+      "submitted": "An email to verify your address has been sent to <b>{email}</b>.",
+      "change-successful": "Your E-Mail address has been changed successfully."
     },
     "validation": {
       "slug": {

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

@@ -65,6 +65,13 @@ export default {
         })
         this.$toast.success(this.$t('settings.email.success'))
         this.success = true
+
+        setTimeout(() => {
+          this.$router.push({
+            path: 'my-email-address/verify-email-address-change',
+            query: { email },
+          })
+        }, 3000)
       } catch (err) {
         this.$toast.error(err.message)
       }

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

@@ -0,0 +1,97 @@
+<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>