Refines slider functions

- Co-Authored-By: Mogge <moriz.wahl@gmx.de>

webapp/components/ComponentSlider/ComponentSlider.vue

@@ -5,21 +5,22 @@
     <ds-flex>
       <ds-flex-item>
         <div
-          v-for="slider in sliderData.sliders"
+          v-for="(slider, index) in sliderData.sliders"
           :key="slider.name"
           class="selection-button"
-          :class="['Sliders__component-selection']"
+          :class="[
+            'Sliders__component-selection',
+            sliderIndexByName(slider.name) < sliderIndex && '--confirmed',
+          ]"
         >
           <base-button
-            :class="[sliderIndexByName(slider.name) >= sliderIndex && '--disabled']"
             style="float: left"
-            :icon="slider.validated && slider.confirmed && 'check'"
             :circle="true"
             size="small"
             type="submit"
             filled
             :loading="false"
-            :disabled="!(slider.confirmed || sliderIndexByName(slider.name) === sliderIndex)"
+            :disabled="index > sliderIndex"
             @click="sliderData.sliderSelectorCallback(slider.name)"
           />
         </div>
@@ -31,10 +32,10 @@
           type="submit"
           filled
           :loading="false"
-          :disabled="sliderData.button.disabled"
-          @click="sliderData.button.callback"
+          :disabled="!sliderData.sliders[sliderIndex].validated"
+          @click="sliderData.sliders[sliderIndex].button.callback"
         >
-          {{ sliderData.button.title }}
+          {{ sliderData.sliders[sliderIndex].button.title }}
         </base-button>
       </ds-flex-item>
     </ds-flex>
@@ -61,10 +62,6 @@ export default {
 </script>
 
 <style lang="scss">
-// Wolle .pointer {
-//    cursor: pointer;
-//  }
-
 .Sliders {
   // Wolle position: relative;
   // background-color: #fff;
@@ -88,7 +85,7 @@ export default {
     // &.--active {
     //   border-bottom: 2px solid #17b53f;
     // }
-    &.--disabled {
+    &.--confirmed {
       opacity: $opacity-disabled;
       // &:hover {
       //   border-bottom: none;

webapp/components/Registration/RegistrationItemEnterInvite.vue

@@ -31,13 +31,14 @@ export default {
   data() {
     return {
       formData: {
+        // inviteCode: this.handleInputOnStart(this.inviteCode),
         inviteCode: this.inviteCode ? this.inviteCode : '',
       },
       formSchema: {
         inviteCode: {
           type: 'string',
-          min: 5,
-          max: 5,
+          min: 6,
+          max: 6,
           required: true,
           message: this.$t('components.enter-invite.form.validations.length'),
         },
@@ -52,6 +53,8 @@ export default {
     async handleInputValid() {
       // Wolle console.log('handleInputValid !!!')
       const { inviteCode } = this.formData
+      // validate in backend
+      // toaster
       this.sliderData.validateCallback(true, { /* email, */inviteCode })
     },
     handleSubmitVerify() {
@@ -60,6 +63,14 @@ export default {
       // this.$emit('nonceEntered', { email, nonce })
       // this.$emit('validation', { email, nonce })
     },
+    // async handleInputOnStart(inviteCode) {
+    //   if (inviteCode) {
+    //     await this.handleInputValid()
+    //     return inviteCode
+    //   } else {
+    //     return ''
+    //   }
+    // },
   },
 }
 </script>

webapp/components/Registration/RegistrationSlider.vue

@@ -18,18 +18,19 @@
           </registration-item-enter-invite>
         </template>
 
-        <template #create-user-account>
+        <!-- <template #enter-email> -->
           <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
-          <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted">
+          <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
+          <!-- <signup :invitation="false" @submit="handleSubmitted">
             <ds-space centered margin-top="large">
               <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
             </ds-space>
-          </signup>
-          <ds-space v-else centered>
+          </signup> -->
+          <!-- <ds-space v-else centered>
             <hc-empty icon="events" :message="$t('components.registration.signup.unavailable')" />
             <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
-          </ds-space>
-        </template>
+          </ds-space> -->
+        <!-- </template> -->
 
         <template #create-user-account>
           <registration-item-create-user-account
@@ -67,11 +68,6 @@ export default {
     RegistrationItemCreateUserAccount,
     Signup,
   },
-  // Wolle props: {
-  //   id: { type: String },
-  //   loading: { type: Boolean, default: false },
-  //   options: { type: Array, default: () => [] },
-  // },
   data() {
     return {
       links,
@@ -81,36 +77,39 @@ export default {
           inviteCode: null,
           email: null,
         },
+        // sliderIndex: 0,
         sliders: [
           {
             name: 'enter-invite',
-            active: true,
             validated: false,
-            confirmed: false,
+            button: {
+              title: 'Next', // Wolle
+              callback: this.buttonCallback,
+            },
           },
+          // {
+          //   name: 'enter-email',
+            // validated: false,
+            // button: {
+            //   title: 'Next', // Wolle
+            //   callback: this.buttonCallback,
+            // },
+          // },
           {
             name: 'create-user-account',
-            active: false,
             validated: false,
-            confirmed: false,
+            button: {
+              title: this.$t('actions.save'), // Wolle
+              callback: this.buttonCallback,
+            },
           },
         ],
         activeSliderName: 'enter-invite',
         sliderSelectorCallback: this.sliderSelectorCallback,
         validateCallback: this.validateCallback,
-        button: {
-          title: 'Next', // Wolle
-          disabled: true,
-          callback: this.buttonCallback,
-        },
       },
     }
   },
-  asyncData({ app }) {
-    return {
-      publicRegistration: app.$env.PUBLIC_REGISTRATION === 'true',
-    }
-  },
   computed: {
     sliderIndex() {
       return this.sliderIndexByName(this.sliderData.activeSliderName)
@@ -121,41 +120,25 @@ export default {
       return this.sliderData.sliders.findIndex((slider) => slider.name === name)
     },
     validateCallback(is, data = null) {
-      this.sliderData.sliders[this.sliderIndex].validated = is
-
       if (is) {
         this.sliderData.collectedComponentData = {
           ...this.sliderData.collectedComponentData,
           ...data,
         }
       }
-      this.sliderData.button.disabled = !is
+      this.sliderData.sliders[this.sliderIndex].validated = is
     },
     sliderSelectorCallback(sliderName) {
-      // if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
-      //   this.sliderData.activeSliderName = sliderName
-      // }
-      // console.log('sliderName: ', sliderName)
-      // console.log('this.sliderIndexByName(sliderName): ', this.sliderIndexByName(sliderName))
-      // console.log('this.sliderData.sliders[this.sliderIndexByName(sliderName)].active: ', this.sliderData.sliders[this.sliderIndexByName(sliderName)].active)
-      if (this.sliderData.sliders[this.sliderIndexByName(sliderName)].active) {
+      if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
         this.sliderData.activeSliderName = sliderName
       }
     },
     buttonCallback() {
-      this.sliderData.sliders[this.sliderIndex].confirmed = true
-      // this.sliderData.sliders[this.sliderIndex].active = true
-      
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {
         // console.log('submit data: ', this.sliderData.collectedComponentData)
       } else {
         if (this.sliderIndex < this.sliderData.sliders.length - 1) {
           this.sliderData.activeSliderName = this.sliderData.sliders[this.sliderIndex + 1].name
-          this.sliderData.sliders[this.sliderIndex].active = true
-          this.sliderData.button.disabled = true
-        }
-        if (this.sliderIndex === this.sliderData.sliders.length - 1) {
-          this.sliderData.button.title = this.$t('actions.save') // Wolle
         }
       }
     },