Refine ComponentSlider

webapp/components/ComponentSlider/ComponentSlider.vue

@@ -2,17 +2,39 @@
   <div class="Slider">
     <!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
     <slot :name="sliderData.activeSliderName" />
-    <base-button
-      style="float: right"
-      icon="check"
-      type="submit"
-      filled
-      :loading="false"
-      :disabled="sliderData.button.disabled"
-      @click="sliderData.button.callback"
-    >
-      {{ sliderData.button.title }}
-    </base-button>
+    <ds-flex>
+      <ds-flex-item>
+        <div
+          v-for="componentName in sliderData.sliders"
+          :key="componentName"
+          class="selection-button"
+        >
+          <base-button
+            style="float: left"
+            :circle="true"
+            size="small"
+            type="submit"
+            filled
+            :loading="false"
+            :disabled="false"
+            @click="sliderData.button.callback"
+          />
+        </div>
+      </ds-flex-item>
+      <ds-flex-item>
+        <base-button
+          style="float: right"
+          icon="check"
+          type="submit"
+          filled
+          :loading="false"
+          :disabled="sliderData.button.disabled"
+          @click="sliderData.button.callback"
+        >
+          {{ sliderData.button.title }}
+        </base-button>
+      </ds-flex-item>
+    </ds-flex>
   </div>
 </template>
 

webapp/components/Registration/RegistrationItemEnterInvite.vue

@@ -1,6 +1,6 @@
 <template>
   <ds-form
-    class="enter-nonce"
+    class="enter-invite"
     v-model="formData"
     :schema="formSchema"
     @submit="handleSubmitVerify"
@@ -8,17 +8,17 @@
     @input-valid="handleInputValid"
   >
     <ds-input
-      :placeholder="$t('components.enter-nonce.form.nonce')"
-      model="nonce"
-      name="nonce"
-      id="nonce"
+      :placeholder="$t('components.enter-invite.form.invite-code')"
+      model="inviteCode"
+      name="inviteCode"
+      id="inviteCode"
       icon="question-circle"
     />
     <ds-text>
-      {{ $t('components.enter-nonce.form.description') }}
+      {{ $t('components.enter-invite.form.description') }}
     </ds-text>
     <!-- Wolle <base-button :disabled="disabled" filled name="submit" type="submit">
-      {{ $t('components.enter-nonce.form.next') }}
+      {{ $t('components.enter-invite.form.next') }}
     </base-button> -->
     <slot></slot>
   </ds-form>
@@ -34,15 +34,15 @@ export default {
   data() {
     return {
       formData: {
-        nonce: '',
+        inviteCode: '',
       },
       formSchema: {
-        nonce: {
+        inviteCode: {
           type: 'string',
-          min: 6,
-          max: 6,
+          min: 5,
+          max: 5,
           required: true,
-          message: this.$t('components.enter-nonce.form.validations.length'),
+          message: this.$t('components.enter-invite.form.validations.length'),
         },
       },
       disabled: true,
@@ -56,9 +56,9 @@ export default {
     },
     async handleInputValid() {
       // Wolle console.log('handleInputValid !!!')
-      const { nonce } = this.formData
+      const { inviteCode } = this.formData
       const email = this.email
-      this.sliderData.validateCallback(true, { email, nonce })
+      this.sliderData.validateCallback(true, { email, inviteCode })
     },
     handleSubmitVerify() {
       // Wolle const { nonce } = this.formData
@@ -71,7 +71,7 @@ export default {
 </script>
 
 <style lang="scss">
-.enter-nonce {
+.enter-invite {
   display: flex;
   flex-direction: column;
   margin: $space-large 0 $space-xxx-small 0;

webapp/components/Registration/RegistrationSlider.story.js

@@ -5,7 +5,7 @@ import helpers from '~/storybook/helpers'
 
 helpers.init()
 
-// export const searchResults = [
+// Wolle export const searchResults = [
 //   {
 //     id: 'post-by-jenny',
 //     __typename: 'Post',
@@ -119,7 +119,7 @@ storiesOf('RegistrationSlider', module)
     components: { RegistrationSlider },
     store: helpers.store,
     data: () => ({
-      // searchResults,
+      // Wolle searchResults,
     }),
     template: `
       <registration-slider />

webapp/locales/de.json

@@ -116,6 +116,16 @@
     "versus": "Versus"
   },
   "components": {
+    "enter-invite": {
+      "form": {
+        "description": "Gib den Einladungs-Code ein, den du bekommen hast.",
+        "invite-code": "Einladungs-Code eingeben",
+        "next": "Weiter",
+        "validations": {
+          "length": "muss genau 5 Buchstaben lang sein"
+        }
+      }
+    },
     "enter-nonce": {
       "form": {
         "description": "Öffne Dein E-Mail Postfach und gib den Code ein, den wir geschickt haben.",

webapp/locales/en.json

@@ -116,6 +116,16 @@
     "versus": "Versus"
   },
   "components": {
+    "enter-invite": {
+      "form": {
+        "description": "Enter the invitation code you received.",
+        "invite-code": "Enter your invite code",
+        "next": "Continue",
+        "validations": {
+          "length": "must be 5 characters long"
+        }
+      }
+    },
     "enter-nonce": {
       "form": {
         "description": "Open your inbox and enter the code that we've sent to you.",