From e3bf47679e040df50773ebc8a89ef62db4040ec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 17:02:55 +0100
Subject: [PATCH] Implement e-mail resend functionality

---
 .../ComponentSlider/ComponentSlider.vue       |   2 +-
 .../RegistrationItemCreateUserAccount.vue     |   2 +-
 .../RegistrationItemEnterEmail.vue            | 192 +++++++++++-------
 .../RegistrationItemEnterInvite.vue           |  22 +-
 .../Registration/RegistrationSlider.story.js  |   4 +-
 .../Registration/RegistrationSlider.vue       |  61 ++++--
 6 files changed, 177 insertions(+), 106 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index eb9918565..d01520858 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -64,7 +64,7 @@ export default {
       if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
         success = await this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick()
       }
-      // this.sliderData.sliders[this.sliderIndex].button.callback()
+      success = success && this.sliderData.sliders[this.sliderIndex].button.callback(success)
       if (success && this.sliderIndex < this.sliderData.sliders.length - 1) {
         this.sliderData.sliderSelectorCallback(this.sliderIndex + 1)
       }
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index 1bc8c5a39..ed8ed8576 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -289,7 +289,7 @@ export default {
       }
       // Wolle validate in backend
       // toaster
-      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values }, {})
+      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values })
     },
     async handleInput() {
       this.sendValidation()
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index ae9431425..f15448a23 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -1,38 +1,38 @@
 <template>
-  <ds-space v-if="!data && !error" margin="large">
-    <ds-form
-      v-model="formData"
-      :schema="formSchema"
-      @input="handleInput"
-      @input-valid="handleInputValid"
-    >
-      <!-- Wolle <h1>
+  <!-- Wolle <ds-space v-if="!data && !error" margin="large"> -->
+  <ds-form
+    v-model="formData"
+    :schema="formSchema"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+  >
+    <!-- Wolle <h1>
         {{
           invitation
             ? $t('profile.invites.title', metadata)
             : $t('components.registration.signup.title', metadata)
         }}
       </h1> -->
-      <ds-text
-        v-if="token"
-        v-html="$t('registration.signup.form.invitation-code', { code: token })"
-      />
-      <ds-text>
-        {{
-          invitation
-            ? $t('profile.invites.description')
-            : $t('components.registration.signup.form.description')
-        }}
-      </ds-text>
-      <ds-input
-        :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
-        type="email"
-        id="email"
-        model="email"
-        name="email"
-        icon="envelope"
-      />
-      <!-- Wolle <base-button
+    <ds-text
+      v-if="token"
+      v-html="$t('registration.signup.form.invitation-code', { code: token })"
+    />
+    <ds-text>
+      {{
+        invitation
+          ? $t('profile.invites.description')
+          : $t('components.registration.signup.form.description')
+      }}
+    </ds-text>
+    <ds-input
+      :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
+      type="email"
+      id="email"
+      model="email"
+      name="email"
+      icon="envelope"
+    />
+    <!-- Wolle <base-button
         :disabled="disabled"
         :loading="$apollo.loading"
         filled
@@ -42,24 +42,17 @@
       >
         {{ $t('components.registration.signup.form.submit') }}
       </base-button> -->
-      <slot></slot>
-      <ds-text v-if="sliderData.collectedInputData.emailSend">
+    <slot></slot>
+    <ds-text v-if="sliderData.collectedInputData.emailSend">
       <!-- Wolle <ds-text v-if="sliderData.collectedInputData.emailSend"> -->
-        <input
-          id="checkbox"
-          type="checkbox"
-          v-model="sendEmailAgain"
-          :checked="sendEmailAgain"
-        />
-        <label for="checkbox0">
-          <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
-          Send e-mail again
-          <!-- <br />
-          <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link> -->
-        </label>
-      </ds-text>
-    </ds-form>
-  </ds-space>
+      <input id="checkbox" type="checkbox" v-model="sendEmailAgain" :checked="sendEmailAgain" />
+      <label for="checkbox0">
+        <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
+        {{ 'Send e-mail again' }}
+      </label>
+    </ds-text>
+  </ds-form>
+  <!-- Wolle </ds-space>
   <div v-else margin="large">
     <template v-if="!error">
       <transition name="ds-transition-fade">
@@ -76,7 +69,7 @@
         <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
       </ds-space>
     </template>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -84,7 +77,7 @@ import gql from 'graphql-tag'
 import metadata from '~/constants/metadata'
 import { isEmail } from 'validator'
 import normalizeEmail from '~/components/utils/NormalizeEmail'
-import { SweetalertIcon } from 'vue-sweetalert-icons'
+// Wolle import { SweetalertIcon } from 'vue-sweetalert-icons'
 
 export const SignupMutation = gql`
   mutation($email: String!) {
@@ -103,7 +96,7 @@ export const SignupByInvitationMutation = gql`
 export default {
   name: 'RegistrationItemEnterEmail',
   components: {
-    SweetalertIcon,
+    // Wolle SweetalertIcon,
   },
   props: {
     sliderData: { type: Object, required: true },
@@ -123,10 +116,13 @@ export default {
           message: this.$t('common.validations.email'),
         },
       },
+      // TODO: Our styleguide does not support checkmarks.
+      // Integrate termsAndConditionsConfirmed into `this.formData` once we
+      // have checkmarks available.
       sendEmailAgain: false,
       // Wolle disabled: true,
-      data: null,
-      error: null,
+      // Wolle data: null,
+      error: null, // Wolle
     }
   },
   mounted: function () {
@@ -137,17 +133,26 @@ export default {
         : ''
       this.sendValidation()
 
-      this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(
+        this.validInput,
+        this.buttonValues(),
+        this.onNextClick,
+      )
     })
   },
+  watch: {
+    sendEmailAgain() {
+      this.setButtonValues()
+    },
+  },
   computed: {
     sliderIndex() {
       return this.sliderData.sliderIndex
     },
-    submitMessage() {
-      const { email } = this.data.Signup
-      return this.$t('components.registration.signup.form.success', { email })
-    },
+    // Wolle submitMessage() {
+    //   const { email } = this.data.Signup
+    //   return this.$t('components.registration.signup.form.success', { email })
+    // },
     validInput() {
       return isEmail(this.formData.email)
     },
@@ -160,7 +165,7 @@ export default {
       const { email } = this.formData
       const values = { email }
 
-      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values }, {})
+      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values })
     },
     async handleInput() {
       this.sendValidation()
@@ -168,36 +173,73 @@ export default {
     async handleInputValid() {
       this.sendValidation()
     },
+    // enterEmailButtonTitle(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? (this.sendEmailAgain ? 'Resend e-mail' : 'Skip resend') : 'Send e-mail' // Wolle
+    // },
+    // enterEmailButtonIcon(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? (this.sendEmailAgain ? 'envelope' : 'arrow-right') : 'envelope' // Wolle
+    // },
+    buttonValues() {
+      return {
+        sliderSettings: {
+          // buttonTitle: this.enterEmailButtonTitle(this.sliderData.collectedInputData.emailSend),
+          // buttonIcon: this.enterEmailButtonIcon(this.sliderData.collectedInputData.emailSend),
+          buttonTitle: this.sliderData.collectedInputData.emailSend
+            ? this.sendEmailAgain
+              ? 'Resend e-mail'
+              : 'Skip resend'
+            : 'Send e-mail', // Wolle
+          buttonIcon: this.sliderData.collectedInputData.emailSend
+            ? this.sendEmailAgain
+              ? 'envelope'
+              : 'arrow-right'
+            : 'envelope', // Wolle
+        },
+      }
+    },
+    setButtonValues() {
+      this.sliderData.setSliderValuesCallback(this.validInput, this.buttonValues())
+    },
     async onNextClick() {
       const mutation = this.token ? SignupByInvitationMutation : SignupMutation
       const { token } = this
       const { email } = this.formData
       const variables = { email, token }
 
-      // Wolle test for resend
+      if (!this.sendEmailAgain && this.sliderData.collectedInputData.emailSend) {
+        return true
+      }
+
       if (
+        this.sendEmailAgain ||
         !this.sliderData.sliders[this.sliderIndex].data.request ||
-        (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
+        (this.sliderData.sliders[this.sliderIndex].data.request &&
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
         (this.sliderData.sliders[this.sliderIndex].data.request &&
           this.sliderData.sliders[this.sliderIndex].data.request.variables &&
           !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
       ) {
-        // this.sliderData.sliders[this.sliderIndex].data = {
-        //   ...this.sliderData.sliders[this.sliderIndex].data,
-        //   request: { variables },
-        // }
-        this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } })
+        this.sliderData.setSliderValuesCallback(
+          this.sliderData.sliders[this.sliderIndex].validated,
+          { sliderData: { request: { variables }, response: null } },
+        )
 
         try {
           const response = await this.$apollo.mutate({ mutation, variables }) // e-mail is send in emailMiddleware of backend
-          // this.sliderData.sliders[this.sliderIndex].data = {
-          //   ...this.sliderData.sliders[this.sliderIndex].data,
-          //   response: response.data,
-          // }
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } })
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { response: response.data } },
+          )
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
-            this.sliderData.collectedInputData.emailSend = true
+            // this.sliderData.collectedInputData.emailSend = true
+            this.sliderData.setSliderValuesCallback(this.validInput, {
+              collectedInputData: { emailSend: true },
+            })
+            this.setButtonValues()
+
             const { email: respnseEmail } =
               this.sliderData.sliders[this.sliderIndex].data.response.Signup ||
               this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
@@ -207,9 +249,15 @@ export default {
           }
           return true
         } catch (err) {
-          // this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: null, response: null } })
-          this.sliderData.collectedInputData.emailSend = false
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { request: null, response: null } },
+          )
+          // this.sliderData.collectedInputData.emailSend = false
+          this.sliderData.setSliderValuesCallback(this.validInput, {
+            collectedInputData: { emailSend: false },
+          })
+          this.setButtonValues()
 
           const { message } = err
           const mapping = {
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 7ed4541bd..cb5e1deb5 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -92,19 +92,23 @@ export default {
 
       if (
         !this.sliderData.sliders[this.sliderIndex].data.request ||
-        (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
+        (this.sliderData.sliders[this.sliderIndex].data.request &&
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
         (this.sliderData.sliders[this.sliderIndex].data.request &&
           this.sliderData.sliders[this.sliderIndex].data.request.variables &&
           !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
       ) {
-        // this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
-        // this.sliderData.sliders[this.sliderIndex].data.request = { variables }
-        this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } })
+        this.sliderData.setSliderValuesCallback(
+          this.sliderData.sliders[this.sliderIndex].validated,
+          { sliderData: { request: { variables }, response: null } },
+        )
 
         try {
           const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
-          // this.sliderData.sliders[this.sliderIndex].data.response = response.data
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } })
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { response: response.data } },
+          )
 
           if (
             this.sliderData.sliders[this.sliderIndex].data.response &&
@@ -115,8 +119,10 @@ export default {
             )
           }
         } catch (err) {
-          // this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: { isValidInviteCode: false } } })
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { 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 be7d4e232..28d0ea5b3 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -51,7 +51,7 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: 'IN1T6Y',
           email: 'wolle.huss@pjannto.com',
-          emailSend: true,
+          emailSend: false,
           nonce: 'NTRSCZ',
           name: 'Wolle',
           password: 'Hello',
@@ -115,7 +115,7 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: null,
           email: 'wolle.huss@pjannto.com',
-          emailSend: true,
+          emailSend: false,
           nonce: null,
           name: null,
           password: null,
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 5978f6b47..466409462 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -24,10 +24,7 @@
         >
           <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
           <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
-          <registration-item-enter-email
-            :sliderData="sliderData"
-            :invitation="false"
-          />
+          <registration-item-enter-email :sliderData="sliderData" :invitation="false" />
         </template>
 
         <template
@@ -104,9 +101,8 @@ export default {
         validated: false,
         data: { request: null, response: null },
         button: {
-          // title: 'Send E-Mail', // Wolle
-          title: this.enterEmailButtonTitle(this.overwriteSliderData.emailSend), // Wolle
-          icon: 'envelope',
+          title: '', // set by slider component
+          icon: '', // set by slider component
           callback: this.buttonCallback,
           slotOnNextClick: null, // optional set by slot
         },
@@ -190,11 +186,19 @@ export default {
     },
   },
   methods: {
-    enterEmailButtonTitle(emailSend) {
-      // return emailSend ? 'Resend e-mail' : 'Send e-mail'
-      return emailSend ? 'Skip send' : 'Send e-mail'  // Wolle
-    },
-    setSliderValuesCallback(isValid, { collectedInputData, sliderData, sliderSettings }, slotOnNextClick = null) {
+    // Wolle enterEmailButtonTitle(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? 'Skip resend' : 'Send e-mail' // Wolle
+    // },
+    // enterEmailButtonIcon(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? 'arrow-right' : 'envelope' // Wolle
+    // },
+    setSliderValuesCallback(
+      isValid,
+      { collectedInputData, sliderData, sliderSettings },
+      slotOnNextClick = null,
+    ) {
       this.sliderData.sliders[this.sliderIndex].validated = isValid
 
       if (collectedInputData) {
@@ -206,13 +210,23 @@ export default {
       if (sliderData) {
         if (this.sliderData.sliders[this.sliderIndex].data) {
           this.sliderData.sliders[this.sliderIndex].data = {
-            request: sliderData.request ? sliderData.request : this.sliderData.sliders[this.sliderIndex].data.request,
-            response: sliderData.response ? sliderData.response : this.sliderData.sliders[this.sliderIndex].data.response,
+            request: sliderData.request
+              ? sliderData.request
+              : this.sliderData.sliders[this.sliderIndex].data.request,
+            response: sliderData.response
+              ? sliderData.response
+              : this.sliderData.sliders[this.sliderIndex].data.response,
           }
         }
       }
       if (sliderSettings) {
-        
+        const { buttonTitle, buttonIcon } = sliderSettings
+        if (buttonTitle) {
+          this.sliderData.sliders[this.sliderIndex].button.title = buttonTitle
+        }
+        if (buttonIcon) {
+          this.sliderData.sliders[this.sliderIndex].button.icon = buttonIcon
+        }
       }
 
       if (slotOnNextClick) {
@@ -221,15 +235,18 @@ export default {
     },
     sliderSelectorCallback(selectedIndex) {
       if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) {
-        if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-          this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
-            this.sliderData.collectedInputData.emailSend,
-          )
-        }
+        // Wolle if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
+        //   this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
+        //     this.sliderData.collectedInputData.emailSend,
+        //   )
+        //   this.sliderData.sliders[this.sliderIndex].button.icon = this.enterEmailButtonIcon(
+        //     this.sliderData.collectedInputData.emailSend,
+        //   )
+        // }
         this.sliderData.sliderIndex = selectedIndex
       }
     },
-    buttonCallback() {
+    buttonCallback(success) {
       // Wolle
       // if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
       //   // if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
@@ -239,7 +256,6 @@ export default {
       //     this.sliderData.collectedInputData.emailSend,
       //   )
       // }
-
       // if (this.sliderIndex === this.sliderData.sliders.length - 1) {
       //   // console.log('submit data: ', this.sliderData.collectedInputData)
       // } else {
@@ -250,6 +266,7 @@ export default {
       //     }
       //   }
       // }
+      return success
     },
   },
 }