From d008eccf6839deae90e6f62aa70e8e6e6d645dd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 24 Feb 2021 16:08:17 +0100
Subject: [PATCH] Implement enterEmail db request

---
 .../RegistrationItemEnterEmail.vue            | 95 +++++++++++--------
 .../RegistrationItemEnterInvite.vue           | 15 +--
 .../RegistrationItemEnterNonce.vue            |  2 +-
 .../Registration/RegistrationSlider.story.js  | 10 +-
 .../Registration/RegistrationSlider.vue       |  5 +-
 webapp/locales/de.json                        |  7 +-
 webapp/locales/en.json                        |  7 +-
 7 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index 8d463e27e..17f42a554 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -5,7 +5,6 @@
       :schema="formSchema"
       @input="handleInput"
       @input-valid="handleInputValid"
-      @submit="handleSubmit"
     >
       <!-- Wolle <h1>
         {{
@@ -109,7 +108,7 @@ export default {
           message: this.$t('common.validations.email'),
         },
       },
-      // disabled: true,
+      // Wolle disabled: true,
       data: null,
       error: null,
     }
@@ -117,7 +116,6 @@ export default {
   mounted: function () {
     this.$nextTick(function () {
       // Code that will run only after the entire view has been rendered
-      // console.log('mounted !!! ')
       this.formData.email = this.sliderData.collectedInputData.email
         ? this.sliderData.collectedInputData.email
         : ''
@@ -129,61 +127,80 @@ export default {
       const { email } = this.data.Signup
       return this.$t('components.registration.signup.form.success', { email })
     },
+    sliderIndex() {
+      return this.sliderData.sliderIndex
+    },
     validInput() {
       return isEmail(this.formData.email)
     },
   },
   methods: {
-    sendValidation() {
+    async sendValidation() {
       if (this.formData.email && isEmail(this.formData.email)) {
         this.formData.email = normalizeEmail(this.formData.email)
       }
       const { email } = this.formData
-      const value = {
-        email,
+      const value = { email }
+
+      let validated = false
+      if (this.validInput) {
+        await this.handleSubmitVerify()
+        if (this.sliderData.sliders[this.sliderIndex].data.response) {
+          const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
+          validated = (email === respnseEmail)
+        }
       }
-      this.sliderData.validateCallback(this.validInput, value)
+      this.sliderData.validateCallback(validated, value)
     },
-    handleInput() {
-      // this.disabled = true
-      // this.sliderData.validateCallback(false)
+    async handleInput() {
       this.sendValidation()
     },
-    handleInputValid() {
-      // this.disabemailled = false
-      // const { email } = this.formData
-      // validate in backend?
-      // toaster?
-      // console.log('sendValidation !!! email: ', email)
-      // this.sliderData.validateCallback(true, { email })
+    async handleInputValid() {
       this.sendValidation()
     },
-    async handleSubmit() {
+    async handleSubmitVerify() {
       const mutation = this.token ? SignupByInvitationMutation : SignupMutation
       const { token } = this
       const { email } = this.formData
+      const variables = { email, token }
 
-      try {
-        const response = await this.$apollo.mutate({ mutation, variables: { email, token } })
-        this.data = response.data
-        setTimeout(() => {
-          this.$emit('submit', { email: this.data.Signup.email })
-        }, 3000)
-      } catch (err) {
-        const { message } = err
-        const mapping = {
-          'A user account with this email already exists': 'email-exists',
-          'Invitation code already used or does not exist': 'invalid-invitation-token',
-        }
-        for (const [pattern, key] of Object.entries(mapping)) {
-          if (message.includes(pattern))
-            this.error = {
-              key,
-              message: this.$t(`components.registration.signup.form.errors.${key}`),
-            }
-        }
-        if (!this.error) {
-          this.$toast.error(message)
+      if (
+        !this.sliderData.sliders[this.sliderIndex].data.request ||
+        !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
+        (this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
+      )
+      {
+        this.sliderData.sliders[this.sliderIndex].data.request = { variables }
+
+        try {
+          const response = await this.$apollo.mutate({ mutation, variables })
+          this.sliderData.sliders[this.sliderIndex].data.response = response.data
+
+          if (this.sliderData.sliders[this.sliderIndex].data.response) {
+            const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
+            this.$toast.success(
+              this.$t('components.registration.email.form.success', { email: respnseEmail }),
+            )
+          }
+        } catch (err) {
+          this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
+
+          const { message } = err
+          const mapping = {
+            'A user account with this email already exists': 'email-exists',
+            'Invitation code already used or does not exist': 'invalid-invitation-token',
+          }
+          for (const [pattern, key] of Object.entries(mapping)) {
+            if (message.includes(pattern))
+              this.error = {
+                key,
+                message: this.$t(`components.registration.signup.form.errors.${key}`),
+              }
+          }
+          if (!this.error) {
+            this.$toast.error(message)
+          }
         }
       }
     },
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index f24104eea..14b2a10ca 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -5,7 +5,6 @@
     :schema="formSchema"
     @input="handleInput"
     @input-valid="handleInputValid"
-    @submit="handleSubmitVerify"
   >
     <ds-input
       :placeholder="$t('components.enter-invite.form.invite-code')"
@@ -70,9 +69,8 @@ export default {
   methods: {
     async sendValidation() {
       const { inviteCode } = this.formData
-      const values = {
-        inviteCode,
-      }
+      const values = { inviteCode }
+
       let validated = false
       if (this.validInput) {
         await this.handleSubmitVerify()
@@ -91,22 +89,25 @@ export default {
       const variables = { code: inviteCode }
 
       if (
+        !this.sliderData.sliders[this.sliderIndex].data.request ||
         !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.is(variables))
       ) {
         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) {
+
+          if (this.sliderData.sliders[this.sliderIndex].data.response && this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode) {
             this.$toast.success(
-              this.$t('components.registration.inviteCode.form.success', { inviteCode }),
+              this.$t('components.registration.invite-code.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/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index 367d0fc17..9debdebe4 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -49,7 +49,7 @@ export default {
           message: this.$t('components.enter-nonce.form.validations.length'),
         },
       },
-      // disabled: true,
+      // Wolle disabled: true,
     }
   },
   mounted: function () {
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index d290a8ade..f19465369 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -7,7 +7,15 @@ import Vue from 'vue'
 const plugins = [
   (app = {}) => {
     app.$apollo = {
-      mutate: () => {},
+      mutate: (data) => {
+        if (JSON.stringify(data).includes('Signup')) {
+          return { data: { Signup: { email: data.variables.email } } }
+        }
+        if (JSON.stringify(data).includes('SignupByInvitation')) {
+          return { data: { SignupByInvitation: { email: data.variables.email } } }
+        }
+        throw new Error(`Mutation name not found!`)
+      },
       query: (data) => {
         if (JSON.stringify(data).includes('isValidInviteCode')) {
           return { data: { isValidInviteCode: true } }
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 387e35015..d5e8afe22 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -87,7 +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 } },
+        data: { request: /* Wolle */{ variables: null }, response: { isValidInviteCode: false } },
         button: {
           title: 'Next', // Wolle
           icon: 'arrow-right',
@@ -98,8 +98,8 @@ export default {
         name: 'enter-email',
         title: 'E-Mail', // Wolle
         validated: false,
+        data: { request: null, response: null },
         button: {
-          // title: this.sliderData.collectedInputData.emailSend ? 'Resend E-Mail' : 'Send E-Mail', // Wolle
           title: 'Send E-Mail', // Wolle
           icon: 'envelope',
           callback: this.buttonCallback,
@@ -144,7 +144,6 @@ export default {
         sliders = [slidersPortfolio[2], slidersPortfolio[3]]
         break
     }
-    // let sliders = slidersPortfolio
 
     return {
       links,
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index ce3d7f73b..a3f6561d3 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -161,7 +161,12 @@
         "success": "Dein Benutzerkonto wurde erstellt!",
         "title": "Benutzerkonto anlegen"
       },
-      "inviteCode": {
+      "email": {
+        "form": {
+          "success": "Gültige E-Mail Adresse <b>{email}</b>!"
+        }
+      },
+      "invite-code": {
         "form": {
           "success": "Gültiger Einladungs-Code <b>{inviteCode}</b>!"
         }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 8ce1f36f1..184578c77 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -161,7 +161,12 @@
         "success": "Your account has been created!",
         "title": "Create user account"
       },
-      "inviteCode": {
+      "email": {
+        "form": {
+          "success": "Valid e-mail address <b>{email}</b>!"
+        }
+      },
+      "invite-code": {
         "form": {
           "success": "Valid invite code <b>{inviteCode}</b>!"
         }