Implement first page to change email address

webapp/graphql/EmailAddress.js

@@ -0,0 +1,10 @@
+import gql from 'graphql-tag'
+
+export const AddEmailAddressMutation = gql`
+  mutation($email: String!) {
+    AddEmailAddress(email: $email) {
+      email
+      createdAt
+    }
+  }
+`

webapp/locales/de.json

@@ -158,6 +158,12 @@
       "labelBio": "Über dich",
       "success": "Deine Daten wurden erfolgreich aktualisiert!"
     },
+    "email": {
+      "name": "Deine E-Mail",
+      "labelEmail": "E-Mail Adresse ändern",
+      "success": "Eine neue E-Mail Addresse wurde registriert.",
+      "submitted": "Eine E-Mail zur Bestätigung deiner Adresse wurde an <b>{email}</b> gesendet."
+    },
     "validation": {
       "slug": {
         "regex": "Es sind nur Kleinbuchstaben, Zahlen, Unterstriche oder Bindestriche erlaubt.",

webapp/locales/en.json

@@ -159,6 +159,12 @@
       "labelBio": "About You",
       "success": "Your data was successfully updated!"
     },
+    "email": {
+      "name": "Your E-Mail",
+      "labelEmail": "Change your E-Mail address",
+      "success": "A new E-Mail address has been registered.",
+      "submitted": "An email to verify your address has been sent to <b>{email}</b>."
+    },
     "validation": {
       "slug": {
         "regex": "Allowed characters are only lowercase letters, numbers, underscores and hyphens.",

webapp/pages/settings.vue

@@ -23,6 +23,10 @@ export default {
           name: this.$t('settings.data.name'),
           path: `/settings`,
         },
+        {
+          name: this.$t('settings.email.name'),
+          path: `/settings/my-email-address`,
+        },
         {
           name: this.$t('settings.security.name'),
           path: `/settings/security`,

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

@@ -0,0 +1,80 @@
+<template>
+  <ds-card centered v-if="success">
+    <transition name="ds-transition-fade">
+      <sweetalert-icon icon="info" />
+    </transition>
+    <ds-text v-html="submitMessage" />
+  </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" :label="$t('settings.email.labelEmail')" />
+
+        <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 { mapGetters } from 'vuex'
+import { AddEmailAddressMutation } from '~/graphql/EmailAddress.js'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+
+export default {
+  components: {
+    SweetalertIcon,
+  },
+  data() {
+    return {
+      success: false,
+      formSchema: {
+        email: { type: 'email', required: true },
+      },
+    }
+  },
+  computed: {
+    submitMessage() {
+      const { email } = this.formData
+      return this.$t('settings.email.submitted', { email })
+    },
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
+    form: {
+      get: function() {
+        const { email } = this.currentUser
+        return { email }
+      },
+      set: function(formData) {
+        this.formData = formData
+      },
+    },
+  },
+  methods: {
+    async submit() {
+      const { email } = this.formData
+      try {
+        await this.$apollo.mutate({
+          mutation: AddEmailAddressMutation,
+          variables: { email },
+        })
+        this.$toast.success(this.$t('settings.email.success'))
+        this.success = true
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.submit-button {
+  float: right;
+}
+</style>