Refactor to 'setSliderValuesCallback'

webapp/components/ComponentSlider/ComponentSlider.vue

@@ -36,7 +36,7 @@
           filled
           :loading="false"
           :disabled="!sliderData.sliders[sliderIndex].validated"
-          @click="sliderData.sliders[sliderIndex].button.callback"
+          @click="onClick"
         >
           {{ sliderData.sliders[sliderIndex].button.title }}
         </base-button>
@@ -58,6 +58,18 @@ export default {
       return this.sliderData.sliderIndex // have a shorter notation
     },
   },
+  methods: {
+    async onClick() {
+      let success = true
+      if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
+        success = await this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick()
+      }
+      // this.sliderData.sliders[this.sliderIndex].button.callback()
+      if (success && this.sliderIndex < this.sliderData.sliders.length - 1) {
+        this.sliderData.sliderSelectorCallback(this.sliderIndex + 1)
+      }
+    },
+  },
 }
 </script>
 

webapp/components/Registration/RegistrationItemCreateUserAccount.vue

@@ -226,6 +226,9 @@ export default {
         ? this.sliderData.collectedInputData.noPolitical
         : false
       this.sendValidation()
+
+      // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick)
     })
   },
   computed: {
@@ -271,7 +274,7 @@ export default {
         noPolitical,
       } = this
       const locale = this.$i18n.locale()
-      const value = {
+      const values = {
         name,
         about,
         password,
@@ -286,7 +289,7 @@ export default {
       }
       // Wolle validate in backend
       // toaster
-      this.sliderData.validateCallback(this.valid, value)
+      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values }, {})
     },
     async handleInput() {
       this.sendValidation()
@@ -324,6 +327,9 @@ export default {
         this.response = 'error'
       }
     },
+    onNextClick() {
+      return true
+    },
   },
 }
 </script>

webapp/components/Registration/RegistrationItemEnterEmail.vue

@@ -43,6 +43,21 @@
         {{ $t('components.registration.signup.form.submit') }}
       </base-button> -->
       <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>
   <div v-else margin="large">
@@ -108,6 +123,7 @@ export default {
           message: this.$t('common.validations.email'),
         },
       },
+      sendEmailAgain: false,
       // Wolle disabled: true,
       data: null,
       error: null,
@@ -120,6 +136,8 @@ export default {
         ? this.sliderData.collectedInputData.email
         : ''
       this.sendValidation()
+
+      this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick)
     })
   },
   computed: {
@@ -140,9 +158,9 @@ export default {
         this.formData.email = normalizeEmail(this.formData.email)
       }
       const { email } = this.formData
-      const value = { email }
+      const values = { email }
 
-      this.sliderData.validateCallback(this.validInput, value)
+      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values }, {})
     },
     async handleInput() {
       this.sendValidation()
@@ -150,30 +168,33 @@ export default {
     async handleInputValid() {
       this.sendValidation()
     },
-    async handleSubmitVerify() {
+    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.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.is(variables))
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
       ) {
-        this.sliderData.sliders[this.sliderIndex].data = {
+        // this.sliderData.sliders[this.sliderIndex].data = {
-          ...this.sliderData.sliders[this.sliderIndex].data,
+        //   ...this.sliderData.sliders[this.sliderIndex].data,
-          request: { variables },
+        //   request: { variables },
-        }
+        // }
+        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 = {
-            ...this.sliderData.sliders[this.sliderIndex].data,
+          //   ...this.sliderData.sliders[this.sliderIndex].data,
-            response: response.data,
+          //   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
@@ -184,8 +205,10 @@ export default {
               this.$t('components.registration.email.form.success', { email: respnseEmail }),
             )
           }
+          return true
         } catch (err) {
-          this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
+          // 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
 
           const { message } = err
@@ -203,6 +226,7 @@ export default {
           if (!this.error) {
             this.$toast.error(message)
           }
+          return false
         }
       }
     },

webapp/components/Registration/RegistrationItemEnterInvite.vue

@@ -56,6 +56,8 @@ export default {
         ? this.sliderData.collectedInputData.inviteCode
         : ''
       this.sendValidation()
+
+      this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick)
     })
   },
   computed: {
@@ -76,7 +78,7 @@ export default {
         await this.handleSubmitVerify()
         validated = this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode
       }
-      this.sliderData.validateCallback(validated, values)
+      this.sliderData.setSliderValuesCallback(validated, { collectedInputData: values })
     },
     async handleInput() {
       this.sendValidation()
@@ -90,17 +92,19 @@ export default {
 
       if (
         !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.is(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.sliders[this.sliderIndex].data.request = { variables }
+        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.sliders[this.sliderIndex].data.response = response.data
+          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } })
 
           if (
             this.sliderData.sliders[this.sliderIndex].data.response &&
@@ -111,13 +115,17 @@ export default {
             )
           }
         } catch (err) {
-          this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
+          // this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
+          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: { isValidInviteCode: false } } })
 
           const { message } = err
           this.$toast.error(message)
         }
       }
     },
+    onNextClick() {
+      return true
+    },
   },
 }
 </script>

webapp/components/Registration/RegistrationItemEnterNonce.vue

@@ -43,8 +43,8 @@ export default {
       formSchema: {
         nonce: {
           type: 'string',
-          min: 6,
+          // Wolle min: 6,
-          max: 6,
+          // max: 6,
           required: true,
           message: this.$t('components.enter-nonce.form.validations.length'),
         },
@@ -60,26 +60,28 @@ export default {
         ? this.sliderData.collectedInputData.nonce
         : ''
       this.sendValidation()
+
+      // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick)
     })
   },
   computed: {
     valid() {
-      const isValid = this.formData.nonce.length === 6
+      return this.formData.nonce.length === 6
-      return isValid
     },
   },
   methods: {
     sendValidation() {
       const { nonce } = this.formData
-      const value = {
+      const values = {
         nonce,
       }
       // console.log('sendValidation !!! value: ', value)
-      this.sliderData.validateCallback(this.valid, value)
+      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values })
     },
     async handleInput() {
       // this.disabled = true
-      // this.sliderData.validateCallback(false)
+      // this.sliderData.setSliderValuesCallback(false)
       this.sendValidation()
     },
     async handleInputValid() {
@@ -87,7 +89,7 @@ export default {
       // const { nonce } = this.formData
       // validate in backend?
       // toaster?
-      // this.sliderData.validateCallback(true, { nonce })
+      // this.sliderData.setSliderValuesCallback(true, { nonce })
       this.sendValidation()
     },
     handleSubmitVerify() {
@@ -95,6 +97,9 @@ export default {
       // const email = this.email
       // this.$emit('nonceEntered', { email, nonce })
     },
+    onNextClick() {
+      return true
+    },
   },
 }
 </script>

webapp/components/Registration/RegistrationSlider.story.js

@@ -87,7 +87,7 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: null,
           email: 'wolle.huss@pjannto.com',
-          emailSend: true,
+          emailSend: false,
           nonce: 'NTRSCZ',
           name: 'Wolle',
           password: 'Hello',

webapp/components/Registration/RegistrationSlider.vue

@@ -25,7 +25,6 @@
           <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
           <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
           <registration-item-enter-email
-            ref="RegistrationItemEnterEmail"
             :sliderData="sliderData"
             :invitation="false"
           />
@@ -96,6 +95,7 @@ export default {
           title: 'Next', // Wolle
           icon: 'arrow-right',
           callback: this.buttonCallback,
+          slotOnNextClick: null, // optional set by slot
         },
       },
       {
@@ -108,27 +108,32 @@ export default {
           title: this.enterEmailButtonTitle(this.overwriteSliderData.emailSend), // Wolle
           icon: 'envelope',
           callback: this.buttonCallback,
+          slotOnNextClick: null, // optional set by slot
         },
       },
       {
         name: 'enter-nonce',
         title: 'E-Mail Confirmation', // Wolle
         validated: false,
+        data: { request: null, response: null },
         button: {
           title: 'Confirm', // Wolle
           icon: 'arrow-right',
           callback: this.buttonCallback,
+          slotOnNextClick: null, // optional set by slot
         },
       },
       {
         name: 'create-user-account',
         title: this.$t('components.registration.create-user-account.title'),
         validated: false,
+        data: { request: null, response: null },
         button: {
           // title: this.$t('actions.save'), // Wolle
           title: 'Create', // Wolle
           icon: 'check',
           callback: this.buttonCallback,
+          slotOnNextClick: null, // optional set by slot
         },
       },
     ]
@@ -174,7 +179,7 @@ export default {
         sliderIndex: 0,
         sliders: sliders,
         sliderSelectorCallback: this.sliderSelectorCallback,
-        validateCallback: this.validateCallback,
+        setSliderValuesCallback: this.setSliderValuesCallback,
         ...this.overwriteSliderData,
       },
     }
@@ -186,40 +191,65 @@ export default {
   },
   methods: {
     enterEmailButtonTitle(emailSend) {
-      return emailSend ? 'Resend E-Mail' : 'Send E-Mail'
+      // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+      return emailSend ? 'Skip send' : 'Send e-mail'  // Wolle
     },
-    validateCallback(isValid, data = null) {
+    setSliderValuesCallback(isValid, { collectedInputData, sliderData, sliderSettings }, slotOnNextClick = null) {
       this.sliderData.sliders[this.sliderIndex].validated = isValid
-      if (data) {
+
+      if (collectedInputData) {
         this.sliderData.collectedInputData = {
           ...this.sliderData.collectedInputData,
-          ...data,
+          ...collectedInputData,
         }
       }
+      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,
+          }
+        }
+      }
+      if (sliderSettings) {
+        
+      }
+
+      if (slotOnNextClick) {
+        this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick = slotOnNextClick
+      }
     },
     sliderSelectorCallback(selectedIndex) {
-      if (selectedIndex < this.sliderIndex) {
+      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,
+          )
+        }
         this.sliderData.sliderIndex = selectedIndex
       }
     },
     buttonCallback() {
-      if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
+      // Wolle
-        this.$refs.RegistrationItemEnterEmail.handleSubmitVerify()
+      // if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-        this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
+      //   // if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
-          this.sliderData.collectedInputData.emailSend,
+      //   //   this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick()
-        )
+      //   // }
-      }
+      //   this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
+      //     this.sliderData.collectedInputData.emailSend,
+      //   )
+      // }
 
-      if (this.sliderIndex === this.sliderData.sliders.length - 1) {
+      // if (this.sliderIndex === this.sliderData.sliders.length - 1) {
-        // console.log('submit data: ', this.sliderData.collectedInputData)
+      //   // console.log('submit data: ', this.sliderData.collectedInputData)
-      } else {
+      // } else {
-        if (this.sliderIndex < this.sliderData.sliders.length - 1) {
+      //   if (this.sliderIndex < this.sliderData.sliders.length - 1) {
-          this.sliderData.sliderIndex++
+      //     this.sliderData.sliderIndex++
-          if (this.sliderData.sliders[this.sliderIndex] === 'create-user-account') {
+      //     if (this.sliderData.sliders[this.sliderIndex] === 'create-user-account') {
-            this.sliderData.sliders[this.sliderIndex].validated = false
+      //       this.sliderData.sliders[this.sliderIndex].validated = false
-          }
+      //     }
-        }
+      //   }
-      }
+      // }
     },
   },
 }