From 2068dd507bba76349ffa4e6cf4c29a696d76f4b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 28 Jan 2021 13:51:26 +0100
Subject: [PATCH] Play with callbacks

---
 .../ComponentSlider/ComponentSlider.vue       | 42 ++++++-------------
 .../RegistrationItemEnterInvite.vue           | 11 ++++-
 .../Registration/RegistrationSlider.vue       | 31 ++++++++------
 3 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 41bf9b1cb..80f5de462 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -1,19 +1,7 @@
 <template>
   <div class="Slider">
     <!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
-    <div
-      v-for="sliderName in sliders"
-      :key="sliderName"
-      :class="[
-        'Slider__component',
-        activeSliderName === sliderName && '--visible',
-        activeSliderName !== sliderName && '--hidden',
-      ]"
-      :data-test="sliderName + '-component'"
-      @validation="validation(sliderName)"
-    >
-      <slot :name="sliderName" />
-    </div>
+    <slot :name="activeSliderName" />
     <base-button
       style="float: right"
       icon="check"
@@ -52,10 +40,6 @@ export default {
     // },
   },
   methods: {
-    validation(sliderName) {
-      console.log('validation !!!')
-      disabled = false
-    },
     nextComponent() {
       if (this.sliderIndex < this.sliders.length - 1) {
         this.sliderIndex++
@@ -71,17 +55,17 @@ export default {
 //    cursor: pointer;
 //  }
 
-.Slider {
-  &__component {
-    // Wolle &:hover {
-    //   border-bottom: 2px solid #c9c6ce;
-    // }
+// .Slider {
+//   &__component {
+//     // Wolle &:hover {
+//     //   border-bottom: 2px solid #c9c6ce;
+//     // }
 
-    // Wolle &.--visible {
-    // }
-    &.--hidden {
-      display: none;
-    }
-  }
-}
+//     // Wolle &.--visible {
+//     // }
+//     // &.--hidden {
+//     //   display: none;
+//     // }
+//   }
+// }
 </style>
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index b2b294257..7a9835179 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -28,7 +28,9 @@
 export default {
   name: 'RegistrationItemEnterInvite',
   props: {
+    validateCallback: { type: Function, required: true },
     email: { type: String, required: true },
+    // test: { type: Boolean, required: true },
   },
   data() {
     return {
@@ -49,7 +51,11 @@ export default {
   },
   methods: {
     async handleInput() {
-      this.disabled = true
+      // Wolle this.disabled = true
+      console.log('handleInput !!!')
+      console.log('email: ', this.email)
+      // console.log('test: ', this.test)
+      this.validateCallback(false)
     },
     async handleInputValid() {
       console.log('handleInputValid !!!')
@@ -57,7 +63,8 @@ export default {
       const { nonce } = this.formData
       const email = this.email
       // Wolle this.$emit('nonceEntered', { email, nonce })
-      this.$emit('validation', { email, nonce })
+      // this.$emit('validation', { email, nonce })
+      this.validateCallback(true, { email, nonce })
     },
     handleSubmitVerify() {
       // const { nonce } = this.formData
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index a91b9dd0c..474d9b995 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -7,16 +7,24 @@
         </a>
       </template>
       <h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
-      <component-slider :sliders="sliders">
+      <component-slider :sliders="sliders" :submitCallback="submit">
+        <!-- <template #enter-nonce slot="{test}"> -->
         <template #enter-nonce>
-          <registration-item-enter-invite email="user@example.org">
+          <registration-item-enter-invite
+            :email="'user@example.org'"
+            :validateCallback="validation"
+          >
             <ds-space margin-bottom="xxx-small" margin-top="large" centered>
               <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
             </ds-space>
           </registration-item-enter-invite>
         </template>
         <template #create-user-account>
-          <registration-item-create-user-account nonce="AAAAAA" email="user@example.org" />
+          <registration-item-create-user-account
+            nonce="AAAAAA"
+            email="user@example.org"
+            :validateCallback="validation"
+          />
         </template>
       </component-slider>
       <template #topMenu>
@@ -60,16 +68,15 @@ export default {
     // },
   },
   methods: {
-    // Wolle clear() {
-    //   this.unprocessedSearchInput = ''
-    //   this.previousSearchTerm = ''
-    //   this.searchValue = ''
-    //   this.$emit('clearSearch')
-    //   clearTimeout(this.searchProcess)
-    // },
+    validation(is, data = null) {
+      console.log('validation: ', is, data)
+      // this.disabled = !is
+    },
+    submit() {
+      console.log('submit !!!')
+    },
   },
 }
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>