From e062cbaa0c631c250486f7e55c67597f38f8f70e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 27 Jan 2021 17:14:36 +0100
Subject: [PATCH] Implement ResistrationEnterInvite.vue, start

---
 .../ComponentSlider/ComponentSlider.vue       | 176 +++++-------------
 .../RegistrationItemCreateUserAccount.vue     |   1 +
 .../RegistrationItemEnterInvite.vue           |  78 ++++++++
 .../Registration/RegistrationSlider.vue       | 173 ++---------------
 4 files changed, 146 insertions(+), 282 deletions(-)
 create mode 100644 webapp/components/Registration/RegistrationItemEnterInvite.vue

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 1d2c1b9bc..41bf9b1cb 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -1,12 +1,18 @@
 <template>
-  <div>
-    <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2>
-    <!-- <slot /> -->
-    <!-- <div v-for="(item, index) in $slots.default" :key="index" :slot="item"> -->
-    <div v-for="(item, index) in $slots.default" :key="item.id">
-      {{ index }}
-      <slot v-bind:person="item" />
-      <!-- <slot :slot="item" /> -->
+  <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>
     <base-button
       style="float: right"
@@ -14,9 +20,11 @@
       type="submit"
       filled
       :loading="false"
-      :disabled="false"
+      :disabled="disabled"
+      @click="nextComponent"
     >
       <!-- {{ $t('actions.save') }} -->
+      <!-- Wolle {{ $t('components.enter-nonce.form.next') }} -->
       Next
     </base-button>
   </div>
@@ -26,138 +34,54 @@
 export default {
   name: 'ComponentSlider',
   components: {
-    // LocaleSwitch,
+    // Wolle LocaleSwitch,
+  },
+  props: {
+    sliders: { type: Array, required: true },
   },
-  // props: {
-  //   id: { type: String },
-  //   loading: { type: Boolean, default: false },
-  //   options: { type: Array, default: () => [] },
-  // },
   data() {
     return {
-      // links,
-      // metadata,
-      // searchValue: '',
-      // value: '',
-      // unprocessedSearchInput: '',
-      // searchProcess: null,
-      // previousSearchTerm: '',
-      // delay: 300,
+      sliderIndex: 0,
+      activeSliderName: this.sliders[0],
+      disabled: true,
     }
   },
   computed: {
-    // emptyText() {
-    //   return this.isActive && !this.loading ? this.$t('search.failed') : this.$t('search.hint')
-    // },
-    // isActive() {
+    // Wolle isActive() {
     //   return !isEmpty(this.previousSearchTerm)
     // },
   },
   methods: {
-    // isFirstOfType(option) {
-    //   return (
-    //     this.options.findIndex((o) => o === option) ===
-    //     this.options.findIndex((o) => o.__typename === option.__typename)
-    //   )
-    // },
-    // onFocus(event) {
-    //   clearTimeout(this.searchProcess)
-    // },
-    // handleInput(event) {
-    //   clearTimeout(this.searchProcess)
-    //   this.value = event.target ? event.target.value.replace(/\s+/g, ' ').trim() : ''
-    //   this.unprocessedSearchInput = this.value
-    //   if (isEmpty(this.value) || this.value.replace(/\s+/g, '').length < 3) {
-    //     return
-    //   }
-    //   this.searchProcess = setTimeout(() => {
-    //     this.previousSearchTerm = this.value
-    //     this.$emit('query', this.value)
-    //   }, this.delay)
-    // },
-    // /**
-    //  * TODO: on enter we should go to a dedicated search page!?
-    //  */
-    // onEnter(event) {
-    //   clearTimeout(this.searchProcess)
-    //   if (!this.loading) {
-    //     this.previousSearchTerm = this.unprocessedSearchInput
-    //     this.$emit('query', this.unprocessedSearchInput)
-    //   }
-    // },
-    // onDelete(event) {
-    //   clearTimeout(this.searchProcess)
-    //   const value = event.target ? event.target.value.trim() : ''
-    //   if (isEmpty(value)) {
-    //     this.clear()
-    //   } else {
-    //     this.handleInput(event)
-    //   }
-    // },
-    // clear() {
-    //   this.unprocessedSearchInput = ''
-    //   this.previousSearchTerm = ''
-    //   this.searchValue = ''
-    //   this.$emit('clearSearch')
-    //   clearTimeout(this.searchProcess)
-    // },
-    // onBlur(event) {
-    //   this.searchValue = this.previousSearchTerm
-    //   clearTimeout(this.searchProcess)
-    // },
-    // onSelect(item) {
-    //   this.goToResource(item)
-    //   this.$nextTick(() => {
-    //     this.searchValue = this.previousSearchTerm
-    //   })
-    // },
-    // isPost(item) {
-    //   return item.__typename === 'Post'
-    // },
-    // isTag(item) {
-    //   return item.__typename === 'Tag'
-    // },
-    // goToResource(item) {
-    //   this.$nextTick(() => {
-    //     if (!this.isTag(item)) {
-    //       this.$router.push({
-    //         name: this.isPost(item) ? 'post-id-slug' : 'profile-id-slug',
-    //         params: { id: item.id, slug: item.slug },
-    //       })
-    //     } else {
-    //       this.$router.push('?hashtag=' + item.id)
-    //     }
-    //   })
-    // },
+    validation(sliderName) {
+      console.log('validation !!!')
+      disabled = false
+    },
+    nextComponent() {
+      if (this.sliderIndex < this.sliders.length - 1) {
+        this.sliderIndex++
+        this.activeSliderName = this.sliders[this.sliderIndex]
+      }
+    },
   },
 }
 </script>
 
 <style lang="scss">
-// .searchable-input {
-//   position: relative;
-//   display: flex;
-//   align-items: center;
-//   width: 100%;
+// Wolle .pointer {
+//    cursor: pointer;
+//  }
 
-//   .ds-form-item {
-//     flex-basis: 100%;
-//     margin-bottom: 0;
-//   }
+.Slider {
+  &__component {
+    // Wolle &:hover {
+    //   border-bottom: 2px solid #c9c6ce;
+    // }
 
-//   .ds-select-dropdown {
-//     max-height: 70vh;
-//     box-shadow: $box-shadow-x-large;
-//   }
-
-//   .option-with-heading {
-//     margin-top: $space-x-small;
-//     padding-top: $space-xx-small;
-//   }
-
-//   .base-button {
-//     position: absolute;
-//     right: $space-xx-small;
-//   }
-// }
+    // Wolle &.--visible {
+    // }
+    &.--hidden {
+      display: none;
+    }
+  }
+}
 </style>
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index fb855017a..611fdcebb 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -138,6 +138,7 @@ import { SignupVerificationMutation } from '~/graphql/Registration.js'
 import emails from '~/constants/emails'
 
 export default {
+  name: 'RegistrationItemCreateUserAccount',
   components: {
     PasswordStrength,
     SweetalertIcon,
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
new file mode 100644
index 000000000..b2b294257
--- /dev/null
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -0,0 +1,78 @@
+<template>
+  <ds-form
+    class="enter-nonce"
+    v-model="formData"
+    :schema="formSchema"
+    @submit="handleSubmitVerify"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+  >
+    <ds-input
+      :placeholder="$t('components.enter-nonce.form.nonce')"
+      model="nonce"
+      name="nonce"
+      id="nonce"
+      icon="question-circle"
+    />
+    <ds-text>
+      {{ $t('components.enter-nonce.form.description') }}
+    </ds-text>
+    <!-- Wolle <base-button :disabled="disabled" filled name="submit" type="submit">
+      {{ $t('components.enter-nonce.form.next') }}
+    </base-button> -->
+    <slot></slot>
+  </ds-form>
+</template>
+
+<script>
+export default {
+  name: 'RegistrationItemEnterInvite',
+  props: {
+    email: { type: String, required: true },
+  },
+  data() {
+    return {
+      formData: {
+        nonce: '',
+      },
+      formSchema: {
+        nonce: {
+          type: 'string',
+          min: 6,
+          max: 6,
+          required: true,
+          message: this.$t('components.enter-nonce.form.validations.length'),
+        },
+      },
+      disabled: true,
+    }
+  },
+  methods: {
+    async handleInput() {
+      this.disabled = true
+    },
+    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 })
+    },
+    handleSubmitVerify() {
+      // const { nonce } = this.formData
+      // const email = this.email
+      // Wolle this.$emit('nonceEntered', { email, nonce })
+      // this.$emit('validation', { email, nonce })
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.enter-nonce {
+  display: flex;
+  flex-direction: column;
+  margin: $space-large 0 $space-xxx-small 0;
+}
+</style>
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 3cb248931..a91b9dd0c 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -7,57 +7,18 @@
         </a>
       </template>
       <h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
-      <component-slider>
-        <registration-item-create-user-account />
-        <!-- <registration-item-create-user-account /> -->
-        <base-button
-          style="float: right"
-          icon="check"
-          type="submit"
-          filled
-          :loading="false"
-          :disabled="false"
-        >
-          Test!!!
-        </base-button>
+      <component-slider :sliders="sliders">
+        <template #enter-nonce>
+          <registration-item-enter-invite 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>
+          </registration-item-enter-invite>
+        </template>
+        <template #create-user-account>
+          <registration-item-create-user-account nonce="AAAAAA" email="user@example.org" />
+        </template>
       </component-slider>
-      <!-- <form :disabled="pending" @submit.prevent="onSubmit">
-        <ds-input
-          v-model="form.email"
-          :disabled="pending"
-          :placeholder="$t('login.email')"
-          type="email"
-          name="email"
-          icon="envelope"
-        />
-        <div class="password-wrapper">
-          <ds-input
-            v-model="form.password"
-            :disabled="pending"
-            :placeholder="$t('login.password')"
-            icon="lock"
-            name="password"
-            class="password-field"
-            ref="password"
-            :type="showPassword ? 'text' : 'password'"
-          />
-          <span class="click-wrapper" @click="toggleShowPassword">
-            <span class="icon-wrapper" :data-test="iconName">
-              <base-icon class="toggle-icon" :name="iconName" />
-            </span>
-          </span>
-        </div>
-        <nuxt-link to="/password-reset/request">
-          {{ $t('login.forgotPassword') }}
-        </nuxt-link>
-        <base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
-          {{ $t('login.login') }}
-        </base-button>
-        <p>
-          {{ $t('login.no-account') }}
-          <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
-        </p>
-      </form> -->
       <template #topMenu>
         <locale-switch offset="5" />
       </template>
@@ -68,6 +29,7 @@
 <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'
@@ -77,9 +39,10 @@ export default {
   components: {
     LocaleSwitch,
     ComponentSlider,
+    RegistrationItemEnterInvite,
     RegistrationItemCreateUserAccount,
   },
-  // props: {
+  // Wolle props: {
   //   id: { type: String },
   //   loading: { type: Boolean, default: false },
   //   options: { type: Array, default: () => [] },
@@ -88,127 +51,25 @@ export default {
     return {
       links,
       metadata,
-      // searchValue: '',
-      // value: '',
-      // unprocessedSearchInput: '',
-      // searchProcess: null,
-      // previousSearchTerm: '',
-      // delay: 300,
+      sliders: ['enter-nonce', 'create-user-account'],
     }
   },
   computed: {
-    // emptyText() {
+    // Wolle emptyText() {
     //   return this.isActive && !this.loading ? this.$t('search.failed') : this.$t('search.hint')
     // },
-    // isActive() {
-    //   return !isEmpty(this.previousSearchTerm)
-    // },
   },
   methods: {
-    // isFirstOfType(option) {
-    //   return (
-    //     this.options.findIndex((o) => o === option) ===
-    //     this.options.findIndex((o) => o.__typename === option.__typename)
-    //   )
-    // },
-    // onFocus(event) {
-    //   clearTimeout(this.searchProcess)
-    // },
-    // handleInput(event) {
-    //   clearTimeout(this.searchProcess)
-    //   this.value = event.target ? event.target.value.replace(/\s+/g, ' ').trim() : ''
-    //   this.unprocessedSearchInput = this.value
-    //   if (isEmpty(this.value) || this.value.replace(/\s+/g, '').length < 3) {
-    //     return
-    //   }
-    //   this.searchProcess = setTimeout(() => {
-    //     this.previousSearchTerm = this.value
-    //     this.$emit('query', this.value)
-    //   }, this.delay)
-    // },
-    // /**
-    //  * TODO: on enter we should go to a dedicated search page!?
-    //  */
-    // onEnter(event) {
-    //   clearTimeout(this.searchProcess)
-    //   if (!this.loading) {
-    //     this.previousSearchTerm = this.unprocessedSearchInput
-    //     this.$emit('query', this.unprocessedSearchInput)
-    //   }
-    // },
-    // onDelete(event) {
-    //   clearTimeout(this.searchProcess)
-    //   const value = event.target ? event.target.value.trim() : ''
-    //   if (isEmpty(value)) {
-    //     this.clear()
-    //   } else {
-    //     this.handleInput(event)
-    //   }
-    // },
-    // clear() {
+    // Wolle clear() {
     //   this.unprocessedSearchInput = ''
     //   this.previousSearchTerm = ''
     //   this.searchValue = ''
     //   this.$emit('clearSearch')
     //   clearTimeout(this.searchProcess)
     // },
-    // onBlur(event) {
-    //   this.searchValue = this.previousSearchTerm
-    //   clearTimeout(this.searchProcess)
-    // },
-    // onSelect(item) {
-    //   this.goToResource(item)
-    //   this.$nextTick(() => {
-    //     this.searchValue = this.previousSearchTerm
-    //   })
-    // },
-    // isPost(item) {
-    //   return item.__typename === 'Post'
-    // },
-    // isTag(item) {
-    //   return item.__typename === 'Tag'
-    // },
-    // goToResource(item) {
-    //   this.$nextTick(() => {
-    //     if (!this.isTag(item)) {
-    //       this.$router.push({
-    //         name: this.isPost(item) ? 'post-id-slug' : 'profile-id-slug',
-    //         params: { id: item.id, slug: item.slug },
-    //       })
-    //     } else {
-    //       this.$router.push('?hashtag=' + item.id)
-    //     }
-    //   })
-    // },
   },
 }
 </script>
 
 <style lang="scss">
-// .searchable-input {
-//   position: relative;
-//   display: flex;
-//   align-items: center;
-//   width: 100%;
-
-//   .ds-form-item {
-//     flex-basis: 100%;
-//     margin-bottom: 0;
-//   }
-
-//   .ds-select-dropdown {
-//     max-height: 70vh;
-//     box-shadow: $box-shadow-x-large;
-//   }
-
-//   .option-with-heading {
-//     margin-top: $space-x-small;
-//     padding-top: $space-xx-small;
-//   }
-
-//   .base-button {
-//     position: absolute;
-//     right: $space-xx-small;
-//   }
-// }
 </style>