Add enter e-mail, start

webapp/components/ComponentSlider/ComponentSlider.vue

@@ -5,29 +5,29 @@
     <ds-flex>
       <ds-flex-item>
         <div
-          v-for="componentName in sliderData.sliders"
+          v-for="slider in sliderData.sliders"
-          :key="componentName"
+          :key="slider.name"
           class="selection-button"
-          :class="[
+          :class="['Sliders__component-selection']"
-            'Sliders__component-selection',
-          ]"
         >
           <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="sliderIndexByName(componentName) >= sliderIndex"
+            :disabled="!(slider.confirmed || sliderIndexByName(slider.name) === sliderIndex)"
-            @click="sliderData.sliderSelectorCallback(componentName)"
+            @click="sliderData.sliderSelectorCallback(slider.name)"
           />
         </div>
       </ds-flex-item>
       <ds-flex-item>
         <base-button
           style="float: right"
-          icon="check"
+          :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
           type="submit"
           filled
           :loading="false"
@@ -54,7 +54,7 @@ export default {
   },
   methods: {
     sliderIndexByName(name) {
-      return this.sliderData.sliders.findIndex((sliderName) => sliderName === name)
+      return this.sliderData.sliders.findIndex((slider) => slider.name === name)
     },
   },
 }
@@ -88,12 +88,12 @@ export default {
     // &.--active {
     //   border-bottom: 2px solid #17b53f;
     // }
-    // &.--disabled {
+    &.--disabled {
-    //   opacity: $opacity-disabled;
+      opacity: $opacity-disabled;
-    //   &:hover {
+      // &:hover {
-    //     border-bottom: none;
+      //   border-bottom: none;
-    //   }
+      // }
-    // }
+    }
   }
 }
 </style>

webapp/components/Registration/RegistrationItemEnterInvite.vue

@@ -17,9 +17,6 @@
     <ds-text>
       {{ $t('components.enter-invite.form.description') }}
     </ds-text>
-    <!-- Wolle <base-button :disabled="disabled" filled name="submit" type="submit">
-      {{ $t('components.enter-invite.form.next') }}
-    </base-button> -->
     <slot></slot>
   </ds-form>
 </template>
@@ -29,12 +26,12 @@ export default {
   name: 'RegistrationItemEnterInvite',
   props: {
     sliderData: { type: Object, required: true },
-    email: { type: String, required: true },
+    inviteCode: { type: String, required: false },
   },
   data() {
     return {
       formData: {
-        inviteCode: '',
+        inviteCode: this.inviteCode ? this.inviteCode : '',
       },
       formSchema: {
         inviteCode: {
@@ -45,20 +42,17 @@ export default {
           message: this.$t('components.enter-invite.form.validations.length'),
         },
       },
-      disabled: true,
     }
   },
   methods: {
     async handleInput() {
       // Wolle console.log('handleInput !!!')
-      // console.log('email: ', this.email)
       this.sliderData.validateCallback(false)
     },
     async handleInputValid() {
       // Wolle console.log('handleInputValid !!!')
       const { inviteCode } = this.formData
-      const email = this.email
+      this.sliderData.validateCallback(true, { /* email, */inviteCode })
-      this.sliderData.validateCallback(true, { email, inviteCode })
     },
     handleSubmitVerify() {
       // Wolle const { nonce } = this.formData

webapp/components/Registration/RegistrationSlider.vue

@@ -6,15 +6,31 @@
           <img class="image" alt="Welcome" src="/img/custom/welcome.svg" />
         </a>
       </template>
+
       <h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
+
       <component-slider :sliderData="sliderData">
         <template #enter-invite>
-          <registration-item-enter-invite :sliderData="sliderData" :email="'user@example.org'">
+          <registration-item-enter-invite :sliderData="sliderData" :inviteCode="sliderData.collectedComponentData.inviteCode ? sliderData.collectedComponentData.inviteCode : ''" :email="sliderData.collectedComponentData.email ? sliderData.collectedComponentData.email : ''">
             <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>
+          <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
+          <signup v-if="publicRegistration" :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>
+            <hc-empty icon="events" :message="$t('components.registration.signup.unavailable')" />
+            <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+          </ds-space>
+        </template>
+
         <template #create-user-account>
           <registration-item-create-user-account
             :sliderData="sliderData"
@@ -23,6 +39,7 @@
           />
         </template>
       </component-slider>
+
       <template #topMenu>
         <locale-switch offset="5" />
       </template>
@@ -31,20 +48,24 @@
 </template>
 
 <script>
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
-import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
-import RegistrationItemEnterInvite from './RegistrationItemEnterInvite'
-import RegistrationItemCreateUserAccount from './RegistrationItemCreateUserAccount'
 import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
+import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import Signup from '~/components/Registration/Signup'
+import HcEmpty from '~/components/Empty/Empty'
+import RegistrationItemEnterInvite from './RegistrationItemEnterInvite'
+import RegistrationItemCreateUserAccount from './RegistrationItemCreateUserAccount'
 
 export default {
   name: 'RegistrationSlider',
   components: {
-    LocaleSwitch,
     ComponentSlider,
+    HcEmpty,
+    LocaleSwitch,
     RegistrationItemEnterInvite,
     RegistrationItemCreateUserAccount,
+    Signup,
   },
   // Wolle props: {
   //   id: { type: String },
@@ -56,8 +77,24 @@ export default {
       links,
       metadata,
       sliderData: {
-        collectedComponentData: {},
+        collectedComponentData: {
-        sliders: ['enter-invite', 'create-user-account'],
+          inviteCode: null,
+          email: null,
+        },
+        sliders: [
+          {
+            name: 'enter-invite',
+            active: true,
+            validated: false,
+            confirmed: false,
+          },
+          {
+            name: 'create-user-account',
+            active: false,
+            validated: false,
+            confirmed: false,
+          },
+        ],
         activeSliderName: 'enter-invite',
         sliderSelectorCallback: this.sliderSelectorCallback,
         validateCallback: this.validateCallback,
@@ -69,6 +106,11 @@ export default {
       },
     }
   },
+  asyncData({ app }) {
+    return {
+      publicRegistration: app.$env.PUBLIC_REGISTRATION === 'true',
+    }
+  },
   computed: {
     sliderIndex() {
       return this.sliderIndexByName(this.sliderData.activeSliderName)
@@ -76,9 +118,11 @@ export default {
   },
   methods: {
     sliderIndexByName(name) {
-      return this.sliderData.sliders.findIndex((sliderName) => sliderName === name)
+      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,
@@ -88,16 +132,26 @@ export default {
       this.sliderData.button.disabled = !is
     },
     sliderSelectorCallback(sliderName) {
-      if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
+      // 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) {
         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]
+          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) {