Introduced 'sliderData'

webapp/components/ComponentSlider/ComponentSlider.vue

@@ -1,19 +1,17 @@
 <template>
   <div class="Slider">
     <!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
-    <slot :name="activeSliderName" />
+    <slot :name="sliderData.activeSliderName" />
     <base-button
       style="float: right"
       icon="check"
       type="submit"
       filled
       :loading="false"
-      :disabled="disabled"
-      @click="nextComponent"
+      :disabled="sliderData.button.disabled"
+      @click="sliderData.button.callback"
     >
-      <!-- {{ $t('actions.save') }} -->
-      <!-- Wolle {{ $t('components.enter-nonce.form.next') }} -->
-      Next
+      {{ sliderData.button.title }}
     </base-button>
   </div>
 </template>
@@ -21,31 +19,8 @@
 <script>
 export default {
   name: 'ComponentSlider',
-  components: {
-    // Wolle LocaleSwitch,
-  },
   props: {
-    sliders: { type: Array, required: true },
-  },
-  data() {
-    return {
-      sliderIndex: 0,
-      activeSliderName: this.sliders[0],
-      disabled: true,
-    }
-  },
-  computed: {
-    // Wolle isActive() {
-    //   return !isEmpty(this.previousSearchTerm)
-    // },
-  },
-  methods: {
-    nextComponent() {
-      if (this.sliderIndex < this.sliders.length - 1) {
-        this.sliderIndex++
-        this.activeSliderName = this.sliders[this.sliderIndex]
-      }
-    },
+    sliderData: { type: Object, required: true },
   },
 }
 </script>
@@ -54,18 +29,4 @@ export default {
 // Wolle .pointer {
 //    cursor: pointer;
 //  }
-
-// .Slider {
-//   &__component {
-//     // Wolle &:hover {
-//     //   border-bottom: 2px solid #c9c6ce;
-//     // }
-
-//     // Wolle &.--visible {
-//     // }
-//     // &.--hidden {
-//     //   display: none;
-//     // }
-//   }
-// }
 </style>

webapp/components/Registration/RegistrationItemEnterInvite.vue

@@ -28,9 +28,8 @@
 export default {
   name: 'RegistrationItemEnterInvite',
   props: {
-    validateCallback: { type: Function, required: true },
+    sliderData: { type: Object, required: true },
     email: { type: String, required: true },
-    // test: { type: Boolean, required: true },
   },
   data() {
     return {
@@ -51,25 +50,20 @@ export default {
   },
   methods: {
     async handleInput() {
-      // Wolle this.disabled = true
       console.log('handleInput !!!')
       console.log('email: ', this.email)
-      // console.log('test: ', this.test)
-      this.validateCallback(false)
+      this.sliderData.validateCallback(false)
     },
     async handleInputValid() {
       console.log('handleInputValid !!!')
-      // Wolle this.disabled = false
       const { nonce } = this.formData
       const email = this.email
-      // Wolle this.$emit('nonceEntered', { email, nonce })
-      // this.$emit('validation', { email, nonce })
-      this.validateCallback(true, { email, nonce })
+      this.sliderData.validateCallback(true, { email, nonce })
     },
     handleSubmitVerify() {
-      // const { nonce } = this.formData
+      // Wolle const { nonce } = this.formData
       // const email = this.email
-      // Wolle this.$emit('nonceEntered', { email, nonce })
+      // this.$emit('nonceEntered', { email, nonce })
       // this.$emit('validation', { email, nonce })
     },
   },

webapp/components/Registration/RegistrationSlider.vue

@@ -7,12 +7,9 @@
         </a>
       </template>
       <h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
-      <component-slider :sliders="sliders" :submitCallback="submit">
+      <component-slider :sliderData="sliderData">
         <template #enter-invite>
-          <registration-item-enter-invite
-            :email="'user@example.org'"
-            :validateCallback="validation"
-          >
+          <registration-item-enter-invite :sliderData="sliderData" :email="'user@example.org'">
             <ds-space margin-bottom="xxx-small" margin-top="large" centered>
               <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
             </ds-space>
@@ -20,9 +17,9 @@
         </template>
         <template #create-user-account>
           <registration-item-create-user-account
+            :sliderData="sliderData"
             nonce="AAAAAA"
             email="user@example.org"
-            :validateCallback="validation"
           />
         </template>
       </component-slider>
@@ -59,21 +56,39 @@ export default {
       links,
       metadata,
       sliders: ['enter-invite', 'create-user-account'],
+      sliderData: {
+        sliders: ['enter-invite', 'create-user-account'],
+        activeSliderName: 'enter-invite',
+        validateCallback: this.validateCallback,
+        submitCallback: this.submitCallback,
+        button: {
+          title: 'Next', // Wolle
+          // title: 'Submit', // Wolle
+          disabled: true,
+          callback: this.buttonCallback,
+        },
+      },
     }
   },
   computed: {
-    // Wolle emptyText() {
-    //   return this.isActive && !this.loading ? this.$t('search.failed') : this.$t('search.hint')
-    // },
+    sliderIndex() {
+      return this.sliderData.sliders.findIndex((name) => name === this.sliderData.activeSliderName)
+    },
   },
   methods: {
-    validation(is, data = null) {
+    validateCallback(is, data = null) {
       console.log('validation: ', is, data)
-      // this.disabled = !is
+      this.sliderData.button.disabled = !is
     },
-    submit() {
+    submitCallback() {
       console.log('submit !!!')
     },
+    buttonCallback() {
+      console.log('buttonCallback !!!')
+      if (this.sliderIndex < this.sliderData.sliders.length - 1) {
+        this.sliderData.activeSliderName = this.sliderData.sliders[this.sliderIndex + 1]
+      }
+    },
   },
 }
 </script>