From 0592f685f6c6575fe085d80bd7a4a55dda095769 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Tue, 24 Sep 2019 19:20:18 +0200
Subject: [PATCH] Basic email change works

---
 webapp/graphql/EmailAddress.js                | 10 ++
 webapp/locales/de.json                        |  5 +-
 webapp/locales/en.json                        |  5 +-
 .../pages/settings/my-email-address/index.vue |  7 ++
 .../verify-email-address-change.vue           | 97 +++++++++++++++++++
 5 files changed, 122 insertions(+), 2 deletions(-)

diff --git a/webapp/graphql/EmailAddress.js b/webapp/graphql/EmailAddress.js
index 2385440bb..675ec6bed 100644
--- a/webapp/graphql/EmailAddress.js
+++ b/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
+    }
+  }
+`
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 82dd00c74..dad3474a6 100644
--- a/webapp/locales/de.json
+++ b/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": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7d806debf..83a27bf59 100644
--- a/webapp/locales/en.json
+++ b/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": {
diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue
index 87a59136b..08c894498 100644
--- a/webapp/pages/settings/my-email-address/index.vue
+++ b/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)
       }
diff --git a/webapp/pages/settings/my-email-address/verify-email-address-change.vue b/webapp/pages/settings/my-email-address/verify-email-address-change.vue
index e69de29bb..5b43c7fdf 100644
--- a/webapp/pages/settings/my-email-address/verify-email-address-change.vue
+++ b/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>