Added a query to the backend that calls the checkEmail service, added a spinner, and the routes for the new CheckEmail vue.

frontend/src/graphql/queries.js

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 
 export const login = gql`
-  query($email: String!, $password: String!) {
+  query ($email: String!, $password: String!) {
     login(email: $email, password: $password)
   }
 `
@@ -13,13 +13,13 @@ export const logout = gql`
 `
 
 export const resetPassword = gql`
-  query($sessionId: Float!, $email: String!, $password: String!) {
+  query ($sessionId: Float!, $email: String!, $password: String!) {
     resetPassword(sessionId: $sessionId, email: $email, password: $password)
   }
 `
 
 export const loginViaEmailVerificationCode = gql`
-  query($optin: String!) {
+  query ($optin: String!) {
     loginViaEmailVerificationCode(optin: $optin) {
       sessionId
       email
@@ -28,7 +28,7 @@ export const loginViaEmailVerificationCode = gql`
 `
 
 export const updateUserInfos = gql`
-  query(
+  query (
     $email: String!
     $firstName: String
     $lastName: String
@@ -54,7 +54,7 @@ export const updateUserInfos = gql`
 `
 
 export const transactionsQuery = gql`
-  query($firstPage: Int = 1, $items: Int = 25, $order: String = "DESC") {
+  query ($firstPage: Int = 1, $items: Int = 25, $order: String = "DESC") {
     transactionList(firstPage: $firstPage, items: $items, order: $order) {
       gdtSum
       count
@@ -85,7 +85,7 @@ export const transactionsQuery = gql`
 `
 
 export const resgisterUserQuery = gql`
-  query(
+  query (
     $firstName: String!
     $lastName: String!
     $email: String!
@@ -103,13 +103,13 @@ export const resgisterUserQuery = gql`
 `
 
 export const sendCoins = gql`
-  query($email: String!, $amount: Float!, $memo: String!) {
+  query ($email: String!, $amount: Float!, $memo: String!) {
     sendCoins(email: $email, amount: $amount, memo: $memo)
   }
 `
 
 export const sendResetPasswordEmail = gql`
-  query($email: String!) {
+  query ($email: String!) {
     sendResetPasswordEmail(email: $email) {
       state
     }
@@ -117,7 +117,7 @@ export const sendResetPasswordEmail = gql`
 `
 
 export const checkUsername = gql`
-  query($username: String!) {
+  query ($username: String!) {
     checkUsername(username: $username) {
       state
     }
@@ -125,7 +125,7 @@ export const checkUsername = gql`
 `
 
 export const listGDTEntriesQuery = gql`
-  query($currentPage: Int!, $pageSize: Int!) {
+  query ($currentPage: Int!, $pageSize: Int!) {
     listGDTEntries(currentPage: $currentPage, pageSize: $pageSize) {
       count
       gdtEntries {
@@ -141,3 +141,12 @@ export const listGDTEntriesQuery = gql`
     }
   }
 `
+
+export const checkEmailQuery = gql`
+  query ($optin: String!) {
+    checkEmail(option: $optin) {
+      email
+      sessionId
+    }
+  }
+`

frontend/src/locales/de.json

@@ -125,11 +125,16 @@
       "subtitle": "Wenn du dein Passwort vergessen hast, kannst du es hier zurücksetzen.",
       "send_now": "Jetzt senden"
     },
+    "checkEmail": {
+      "title": "Email wird verifiziert", 
+      "error-text": "Email konnte nicht verifiziert werden."
+    },
     "thx": {
       "title": "Danke!",
       "email": "Wir haben dir eine eMail gesendet.",
       "reset": "Dein Passwort wurde geändert.",
-      "register": "Du bist jetzt regisriert."      
+      "register": "Du bist jetzt regisriert.",
+      "checkEmail": "Deine Email würde erfolgreich verifiziert."
     },
     "overview":{
       "account_overview":"Kontoübersicht",

frontend/src/locales/en.json

@@ -125,11 +125,16 @@
       "subtitle": "If you have forgotten your password, you can reset it here.",
       "send_now": "Send now"
     },
+    "checkEmail": {
+      "title": "Verifing email", 
+      "error-text": "Could not verify the email."
+    },
     "thx": {
       "title": "Thank you!",
       "email": "We have sent you an email.",
       "reset": "Your password has been changed.",
-      "register": "You are registred now."      
+      "register": "You are registred now.",
+      "checkEmail": "Your email has been successfully verified."
     },
     "overview":{
       "account_overview":"Account overview",

frontend/src/routes/routes.js

@@ -52,6 +52,10 @@ const routes = [
     path: '/reset/:optin',
     component: () => import('../views/Pages/ResetPassword.vue'),
   },
+  {
+    path: '/checkEmail/:optin',
+    component: () => import('../views/Pages/CheckEmail.vue'),
+  },
   { path: '*', component: NotFound },
 ]
 

frontend/src/views/Pages/CheckEmail.spec.js

@@ -0,0 +1,105 @@
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import CheckEmail from './CheckEmail'
+
+const localVue = global.localVue
+
+const apolloQueryMock = jest.fn().mockRejectedValue({ message: 'error' })
+
+const toasterMock = jest.fn()
+const routerPushMock = jest.fn()
+
+describe('CheckEmail', () => {
+  let wrapper
+
+  const mocks = {
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $route: {
+      params: {
+        optin: '123',
+      },
+    },
+    $toasted: {
+      error: toasterMock,
+    },
+    $router: {
+      push: routerPushMock,
+    },
+    $loading: {
+      show: jest.fn(() => {
+        return { hide: jest.fn() }
+      }),
+    },
+    $apollo: {
+      query: apolloQueryMock,
+    },
+  }
+
+  const stubs = {
+    RouterLink: RouterLinkStub,
+  }
+
+  const Wrapper = () => {
+    return mount(CheckEmail, { localVue, mocks, stubs })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('calls the checkEmail when created', async () => {
+      expect(apolloQueryMock).toBeCalledWith(
+        expect.objectContaining({ variables: { optin: '123' } }),
+      )
+    })
+
+    describe('No valid optin', () => {
+      it('toasts an error when no valid optin is given', () => {
+        expect(toasterMock).toHaveBeenCalledWith('error')
+      })
+
+      it('has a message suggesting to contact the support', () => {
+        expect(wrapper.find('div.header').text()).toContain('check-email.title')
+        expect(wrapper.find('div.header').text()).toContain('check-email.error-text')
+      })
+    })
+
+    describe('is authenticated', () => {
+      beforeEach(() => {
+        apolloQueryMock.mockResolvedValue({
+          data: {
+            checkEmail: {
+              sessionId: 1,
+              email: 'user@example.org',
+              language: 'de',
+            },
+          },
+        })
+      })
+
+      it.skip('Has sessionId from API call', async () => {
+        await wrapper.vm.$nextTick()
+        expect(wrapper.vm.sessionId).toBe(1)
+      })
+
+      describe('Register header', () => {
+        it('has a welcome message', async () => {
+          expect(wrapper.find('div.header').text()).toContain('check-email.title')
+        })
+      })
+
+      describe('links', () => {
+        it('has a link "Back"', async () => {
+          expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
+        })
+
+        it('links to /login when clicking "Back"', async () => {
+          expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/Login')
+        })
+      })
+    })
+  })
+})

frontend/src/views/Pages/CheckEmail.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="checkemail-form">
+    <b-container>
+      <div class="header p-4" ref="header">
+        <div class="header-body text-center mb-7">
+          <b-row class="justify-content-center">
+            <b-col xl="5" lg="6" md="8" class="px-2">
+              <h1>{{ $t('check-email.title') }}</h1>
+              <div class="pb-4" v-if="!pending">
+                <span v-if="!authenticated">
+                  {{ $t('check-email.error-text') }}
+                </span>
+              </div>
+            </b-col>
+          </b-row>
+        </div>
+      </div>
+    </b-container>
+    <b-container class="mt--8 p-1">
+      <b-row>
+        <b-col class="text-center py-lg-4">
+          <router-link to="/Login" class="mt-3">{{ $t('back') }}</router-link>
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+<script>
+import { checkEmailQuery } from '../../graphql/queries'
+
+export default {
+  name: 'CheckEmail',
+  data() {
+    return {
+      authenticated: false,
+      sessionId: null,
+      email: null,
+      pending: true,
+    }
+  },
+  methods: {
+    async authenticate() {
+      const loader = this.$loading.show({
+        container: this.$refs.header,
+      })
+      const optin = this.$route.params.optin
+      this.$apollo
+        .query({
+          query: checkEmailQuery,
+          variables: {
+            optin: optin,
+          },
+        })
+        .then((result) => {
+          this.authenticated = true
+          this.sessionId = result.data.checkEmail.sessionId
+          this.email = result.data.checkEmail.email
+          this.$router.push('/thx/checkEmail')
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
+      loader.hide()
+      this.pending = false
+    },
+  },
+  mounted() {
+    this.authenticate()
+  },
+}
+</script>
+<style></style>

frontend/src/views/Pages/thx.vue

@@ -31,6 +31,11 @@ const textFields = {
     button: 'site.login.signin',
     linkTo: '/overview',
   },
+  checkEmail: {
+    subtitle: 'site.thx.checkEmail',
+    button: 'login',
+    linkTo: '/login',
+  },
 }
 
 export default {