From ebef48ed993524b82ac3c2c8647c2d7e5d7f9c49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 11 Feb 2021 15:00:35 +0100
Subject: [PATCH] Implement inviteCode db request

---
 .../RegistrationItemEnterEmail.vue            |  7 +--
 .../RegistrationItemEnterInvite.vue           | 59 +++++++++++++++----
 .../Registration/RegistrationSlider.story.js  | 18 +++++-
 .../Registration/RegistrationSlider.vue       |  1 +
 webapp/locales/de.json                        |  7 ++-
 webapp/locales/en.json                        |  7 ++-
 6 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index b381f57a1..8d463e27e 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -129,9 +129,8 @@ export default {
       const { email } = this.data.Signup
       return this.$t('components.registration.signup.form.success', { email })
     },
-    valid() {
-      const isValid = isEmail(this.formData.email)
-      return isValid
+    validInput() {
+      return isEmail(this.formData.email)
     },
   },
   methods: {
@@ -143,7 +142,7 @@ export default {
       const value = {
         email,
       }
-      this.sliderData.validateCallback(this.valid, value)
+      this.sliderData.validateCallback(this.validInput, value)
     },
     handleInput() {
       // this.disabled = true
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index f0f0ccdfe..f24104eea 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -22,6 +22,13 @@
 </template>
 
 <script>
+import gql from 'graphql-tag'
+
+export const isValidInviteCodeQuery = gql`
+  query($code: ID!) {
+    isValidInviteCode(code: $code)
+  }
+`
 export default {
   name: 'RegistrationItemEnterInvite',
   props: {
@@ -35,8 +42,8 @@ export default {
       formSchema: {
         inviteCode: {
           type: 'string',
-          min: 6,
-          max: 6,
+          // Wolle min: 6,
+          // max: 6,
           required: true,
           message: this.$t('components.enter-invite.form.validations.length'),
         },
@@ -53,20 +60,25 @@ export default {
     })
   },
   computed: {
-    valid() {
-      const isValid = this.formData.inviteCode.length === 6
-      return isValid
+    sliderIndex() {
+      return this.sliderData.sliderIndex
+    },
+    validInput() {
+      return this.formData.inviteCode.length === 6
     },
   },
   methods: {
-    sendValidation() {
+    async sendValidation() {
       const { inviteCode } = this.formData
-      const value = {
+      const values = {
         inviteCode,
       }
-      // validate in backend
-      // toaster
-      this.sliderData.validateCallback(this.valid, value)
+      let validated = false
+      if (this.validInput) {
+        await this.handleSubmitVerify()
+        validated = this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode
+      }
+      this.sliderData.validateCallback(validated, values)
     },
     async handleInput() {
       this.sendValidation()
@@ -74,8 +86,31 @@ export default {
     async handleInputValid() {
       this.sendValidation()
     },
-    handleSubmitVerify() {
-      // Wolle const { nonce } = this.formData
+    async handleSubmitVerify() {
+      const { inviteCode } = this.formData
+      const variables = { code: inviteCode }
+
+      if (
+        !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
+        (this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+          this.sliderData.sliders[this.sliderIndex].data.request.variables.code !== variables.code)
+      ) {
+        this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
+
+        try {
+          const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
+          this.sliderData.sliders[this.sliderIndex].data.response = response.data
+          if (this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode) {
+            this.$toast.success(
+              this.$t('components.registration.inviteCode.form.success', { inviteCode }),
+            )
+          }
+        } catch (err) {
+          this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
+          const { message } = err
+          this.$toast.error(message)
+        }
+      }
     },
   },
 }
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index 25422b324..d290a8ade 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -2,8 +2,24 @@ import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import RegistrationSlider from './RegistrationSlider.vue'
 import helpers from '~/storybook/helpers'
+import Vue from 'vue'
 
-helpers.init()
+const plugins = [
+  (app = {}) => {
+    app.$apollo = {
+      mutate: () => {},
+      query: (data) => {
+        if (JSON.stringify(data).includes('isValidInviteCode')) {
+          return { data: { isValidInviteCode: true } }
+        }
+        throw new Error(`Query name not found!`)
+      },
+    }
+    Vue.prototype.$apollo = app.$apollo
+    return app
+  },
+]
+helpers.init({ plugins })
 
 storiesOf('RegistrationSlider', module)
   .addDecorator(withA11y)
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index d073c1132..387e35015 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -87,6 +87,7 @@ export default {
         // title: this.$t('components.registration.create-user-account.title'),
         title: 'Invitation', // Wolle
         validated: false,
+        data: { request: { variables: null }, response: { isValidInviteCode: false } },
         button: {
           title: 'Next', // Wolle
           icon: 'arrow-right',
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 044ea0a10..ce3d7f73b 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -125,7 +125,7 @@
         "invite-code": "Einladungs-Code eingeben",
         "next": "Weiter",
         "validations": {
-          "length": "muss genau 5 Buchstaben lang sein"
+          "length": "muss genau 6 Buchstaben lang sein"
         }
       }
     },
@@ -161,6 +161,11 @@
         "success": "Dein Benutzerkonto wurde erstellt!",
         "title": "Benutzerkonto anlegen"
       },
+      "inviteCode": {
+        "form": {
+          "success": "Gültiger Einladungs-Code <b>{inviteCode}</b>!"
+        }
+      },
       "signup": {
         "form": {
           "data-privacy": "Ich habe die Datenschutzerklärung gelesen und verstanden.",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 27e71e29d..8ce1f36f1 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -125,7 +125,7 @@
         "invite-code": "Enter your invite code",
         "next": "Continue",
         "validations": {
-          "length": "must be 5 characters long"
+          "length": "must be 6 characters long"
         }
       }
     },
@@ -161,6 +161,11 @@
         "success": "Your account has been created!",
         "title": "Create user account"
       },
+      "inviteCode": {
+        "form": {
+          "success": "Valid invite code <b>{inviteCode}</b>!"
+        }
+      },
       "signup": {
         "form": {
           "data-privacy": "I have read and understood the privacy statement.",