Change to try to trigger email db mutation on click 'Send Mail'

webapp/components/Registration/RegistrationItemEnterEmail.vue

@@ -92,6 +92,7 @@ export default {
   },
   props: {
     sliderData: { type: Object, required: true },
+    sendEmail: { type: Boolean, required: true },
     token: { type: String, default: null }, // Wolle not used???
     invitation: { type: Boolean, default: false },
   },
@@ -120,20 +121,51 @@ export default {
         ? this.sliderData.collectedInputData.email
         : ''
       this.sendValidation()
+
+      // this.sliderData.sliders[this.sliderIndex].button.clickCallback = this.handleSubmitVerify
+      // this.sliderData.sliders[this.sliderIndex].button.installClickCallback(this.handleSubmitVerify)
     })
   },
   computed: {
+    sliderIndex() {
+      return this.sliderData.sliderIndex
+    },
     submitMessage() {
       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)
     },
   },
+  watch: {
+    sendEmail(value) {
+      console.log('sendEmail !!!')
+      if (value) {
+        console.log('value: ', value)
+        this.handleSubmitVerify()
+        this.sendEmail = false
+      }
+    },
+    // sliderData(sliderData) {
+    //   console.log('sliderData !!! clicked: ', sliderData.sliders[this.sliderIndex].button.clicked)
+    //   if (sliderData.sliders[this.sliderIndex].button.clicked) {
+    //     this.handleSubmitVerify()
+    //   }
+    // },
+    // sliderData: {
+    //   handler(sliderData) {
+    //     console.log('sliderData handler !!!')
+    //     if (sliderData.sliders[this.sliderIndex].button.clicked) {
+    //       console.log('sliderData handler !!! clicked: ', sliderData.sliders[this.sliderIndex].button.clicked)
+    //       this.sliderData.sliders[this.sliderIndex].button.clicked = false
+    //       this.handleSubmitVerify()
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
+  },
   methods: {
     async sendValidation() {
       if (this.formData.email && isEmail(this.formData.email)) {
@@ -142,15 +174,16 @@ export default {
       const { email } = this.formData
       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(validated, value)
+      // 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(validated, value)
+      this.sliderData.validateCallback(this.validInput, value)
     },
     async handleInput() {
       this.sendValidation()
@@ -167,17 +200,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.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 }
 
         try {
-          const response = await this.$apollo.mutate({ mutation, variables })
+          const response = await this.$apollo.mutate({ mutation, variables })  // e-mail is send in emailMiddleware of backend
+          console.log('handleSubmitVerify !!! response: ', response, ' this.sliderData.sliders[this.sliderIndex]: ', this.sliderData.sliders[this.sliderIndex])
           this.sliderData.sliders[this.sliderIndex].data.response = response.data
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
+            this.sliderData.collectedInputData.emailSend = true
             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 }),
@@ -185,6 +220,7 @@ export default {
           }
         } catch (err) {
           this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
+          this.sliderData.collectedInputData.emailSend = false
 
           const { message } = err
           const mapping = {

webapp/components/Registration/RegistrationItemEnterInvite.vue

@@ -91,10 +91,11 @@ 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.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 }
 
         try {
           const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })

webapp/components/Registration/RegistrationSlider.vue

@@ -24,7 +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 :invitation="false" :sliderData="sliderData" />
+          <registration-item-enter-email :sliderData="sliderData" :sendEmail="sendEmail" :invitation="false" />
         </template>
 
         <template
@@ -87,7 +87,7 @@ export default {
         // title: this.$t('components.registration.create-user-account.title'),
         title: 'Invitation', // Wolle
         validated: false,
-        data: { request: /* Wolle */{ variables: null }, response: { isValidInviteCode: false } },
+        data: { request: null, response: { isValidInviteCode: false } },
         button: {
           title: 'Next', // Wolle
           icon: 'arrow-right',
@@ -100,9 +100,13 @@ export default {
         validated: false,
         data: { request: null, response: null },
         button: {
-          title: 'Send E-Mail', // Wolle
+          // title: 'Send E-Mail', // Wolle
+          title: this.enterEmailButtonTitle(this.overwriteSliderData.emailSend), // Wolle
           icon: 'envelope',
           callback: this.buttonCallback,
+          // clicked: false,
+          installClickCallback: this.installClickCallback,  // set by component
+          clickCallback: null,  // set by component
         },
       },
       {
@@ -172,6 +176,7 @@ export default {
         validateCallback: this.validateCallback,
         ...this.overwriteSliderData,
       },
+      sendEmail: false,
     }
   },
   computed: {
@@ -180,6 +185,12 @@ export default {
     },
   },
   methods: {
+    enterEmailButtonTitle(emailSend) {
+      return emailSend ? 'Resend E-Mail' : 'Send E-Mail'
+    },
+    installClickCallback(clickCallback) {
+      this.sliderData.sliders[this.sliderIndex].button.clickCallback = clickCallback
+    },
     validateCallback(isValid, data = null) {
       this.sliderData.sliders[this.sliderIndex].validated = isValid
       if (data) {
@@ -196,8 +207,14 @@ export default {
     },
     buttonCallback() {
       if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-        this.sliderData.collectedInputData.emailSend = true
-        this.sliderData.sliders[this.sliderIndex].button.title = 'Resend E-Mail' // Wolle
+        // this.sliderData.sliders[this.sliderIndex].button.clicked = true
+        this.sendEmail = true
+        console.log('buttonCallback !!! this.sendEmail', this.sendEmail)
+        // if (this.sliderData.sliders[this.sliderIndex].button.clickCallback) {
+        //   console.log('buttonCallback !!! clicked')
+        //   this.sliderData.sliders[this.sliderIndex].button.clickCallback()
+        // }
+        this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(this.sliderData.collectedInputData.emailSend)
       }
 
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {