From da041db83af82f1599fcbb5d30aecd3b68fd38f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 27 Jan 2021 11:08:11 +0100
Subject: [PATCH 01/44] Add Story for CreateUserAccount.vue, as well for
 experimenting with storybook

---
 .../Registration/CreateUserAccount.story.js   | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 webapp/components/Registration/CreateUserAccount.story.js

diff --git a/webapp/components/Registration/CreateUserAccount.story.js b/webapp/components/Registration/CreateUserAccount.story.js
new file mode 100644
index 000000000..054ee71b4
--- /dev/null
+++ b/webapp/components/Registration/CreateUserAccount.story.js
@@ -0,0 +1,84 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import { action } from '@storybook/addon-actions'
+import Vuex from 'vuex'
+import helpers from '~/storybook/helpers'
+import links from '~/constants/links.js'
+import metadata from '~/constants/metadata.js'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import CreateUserAccount from './CreateUserAccount.vue'
+
+helpers.init()
+
+const createStore = ({ loginSuccess }) => {
+  return new Vuex.Store({
+    modules: {
+      auth: {
+        namespaced: true,
+        state: () => ({
+          pending: false,
+        }),
+        mutations: {
+          SET_PENDING(state, pending) {
+            state.pending = pending
+          },
+        },
+        getters: {
+          pending(state) {
+            return !!state.pending
+          },
+        },
+        actions: {
+          async login({ commit, dispatch }, args) {
+            action('Vuex action `auth/login`')(args)
+            return new Promise((resolve, reject) => {
+              commit('SET_PENDING', true)
+              setTimeout(() => {
+                commit('SET_PENDING', false)
+                if (loginSuccess) {
+                  resolve(loginSuccess)
+                } else {
+                  reject(new Error('Login unsuccessful'))
+                }
+              }, 1000)
+            })
+          },
+        },
+      },
+    },
+  })
+}
+
+storiesOf('CreateUserAccount', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('standard', () => ({
+    components: { LocaleSwitch, CreateUserAccount },
+    store: createStore({ loginSuccess: true }),
+    data: () => ({
+      links,
+      metadata,
+      nonce: 'A34RB56',
+      email: 'user@example.org',
+    }),
+    methods: {
+      handleSuccess() {
+        action('You are logged in!')()
+      },
+    },
+    template: `
+      <ds-container width="small">
+        <base-card>
+          <template #imageColumn>
+            <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+              <img class="image" alt="Sign up" src="/img/custom/sign-up.svg" />
+            </a>
+          </template>
+          <create-user-account @userCreated="handleSuccess" :email="email" :nonce="nonce" />
+          <template #topMenu>
+            <locale-switch offset="5" />
+          </template>
+        </base-card>
+      </ds-container>
+    `,
+  }))

From 1ffcb0f077355f3a2c3f7d9f3fc13c8295458b33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 27 Jan 2021 11:11:35 +0100
Subject: [PATCH 02/44] Add ComponentSlider and RegistrationSlider, as well as
 story, starting

---
 .../ComponentSlider/ComponentSlider.story.js  | 128 ++++++++++
 .../ComponentSlider/ComponentSlider.vue       | 163 +++++++++++++
 .../RegistrationItemCreateUserAccount.vue     | 222 ++++++++++++++++++
 .../Registration/RegistrationSlider.story.js  | 127 ++++++++++
 .../Registration/RegistrationSlider.vue       | 214 +++++++++++++++++
 5 files changed, 854 insertions(+)
 create mode 100644 webapp/components/ComponentSlider/ComponentSlider.story.js
 create mode 100644 webapp/components/ComponentSlider/ComponentSlider.vue
 create mode 100644 webapp/components/Registration/RegistrationItemCreateUserAccount.vue
 create mode 100644 webapp/components/Registration/RegistrationSlider.story.js
 create mode 100644 webapp/components/Registration/RegistrationSlider.vue

diff --git a/webapp/components/ComponentSlider/ComponentSlider.story.js b/webapp/components/ComponentSlider/ComponentSlider.story.js
new file mode 100644
index 000000000..8a7bac923
--- /dev/null
+++ b/webapp/components/ComponentSlider/ComponentSlider.story.js
@@ -0,0 +1,128 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import ComponentSlider from './ComponentSlider.vue'
+import helpers from '~/storybook/helpers'
+
+helpers.init()
+
+// export const searchResults = [
+//   {
+//     id: 'post-by-jenny',
+//     __typename: 'Post',
+//     slug: 'user-post-by-jenny',
+//     title: 'User Post by Jenny',
+//     value: 'User Post by Jenny',
+//     shoutedCount: 0,
+//     commentsCount: 4,
+//     createdAt: '2019-11-13T03:03:16.155Z',
+//     author: {
+//       id: 'u3',
+//       name: 'Jenny Rostock',
+//       slug: 'jenny-rostock',
+//     },
+//   },
+//   {
+//     id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
+//     __typename: 'Post',
+//     slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
+//     title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+//     value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+//     shoutedCount: 0,
+//     commentsCount: 0,
+//     createdAt: '2019-11-13T03:00:45.478Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'p7',
+//     __typename: 'Post',
+//     slug: 'this-is-post-7',
+//     title: 'This is post #7',
+//     value: 'This is post #7',
+//     shoutedCount: 1,
+//     commentsCount: 1,
+//     createdAt: '2019-11-13T03:00:23.098Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'p12',
+//     __typename: 'Post',
+//     slug: 'this-is-post-12',
+//     title: 'This is post #12',
+//     value: 'This is post #12',
+//     shoutedCount: 0,
+//     commentsCount: 12,
+//     createdAt: '2019-11-13T03:00:23.098Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'u1',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Peter Lustig',
+//     slug: 'peter-lustig',
+//   },
+//   {
+//     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Herbert Schultz',
+//     slug: 'herbert-schultz',
+//   },
+//   {
+//     id: 'u2',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Bob der Baumeister',
+//     slug: 'bob-der-baumeister',
+//   },
+//   {
+//     id: '7b654f72-f4da-4315-8bed-39de0859754b',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Tonya Mohr',
+//     slug: 'tonya-mohr',
+//   },
+//   {
+//     id: 'Hashtag',
+//     __typename: 'Tag',
+//   },
+// ]
+
+storiesOf('ComponentSlider', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('standard', () => ({
+    components: { ComponentSlider },
+    store: helpers.store,
+    data: () => ({
+      // searchResults,
+    }),
+    template: `
+      <component-slider>
+      </component-slider>
+    `,
+  }))
diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
new file mode 100644
index 000000000..1d2c1b9bc
--- /dev/null
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -0,0 +1,163 @@
+<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>
+    <base-button
+      style="float: right"
+      icon="check"
+      type="submit"
+      filled
+      :loading="false"
+      :disabled="false"
+    >
+      <!-- {{ $t('actions.save') }} -->
+      Next
+    </base-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ComponentSlider',
+  components: {
+    // LocaleSwitch,
+  },
+  // 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,
+    }
+  },
+  computed: {
+    // 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() {
+    //   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>
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
new file mode 100644
index 000000000..fb855017a
--- /dev/null
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -0,0 +1,222 @@
+<template>
+  <div v-if="response === 'success'">
+    <transition name="ds-transition-fade">
+      <sweetalert-icon icon="success" />
+    </transition>
+    <ds-text align="center" bold color="success">
+      {{ $t('components.registration.create-user-account.success') }}
+    </ds-text>
+  </div>
+  <div v-else-if="response === 'error'">
+    <transition name="ds-transition-fade">
+      <sweetalert-icon icon="error" />
+    </transition>
+    <ds-text align="center" bold color="danger">
+      {{ $t('components.registration.create-user-account.error') }}
+    </ds-text>
+    <ds-text align="center">
+      {{ $t('components.registration.create-user-account.help') }}
+      <a :href="'mailto:' + supportEmail">{{ supportEmail }}</a>
+    </ds-text>
+    <ds-space centered>
+      <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+    </ds-space>
+  </div>
+  <div v-else class="create-account-card">
+    <ds-space margin-top="large">
+      <ds-heading size="h3">
+        {{ $t('components.registration.create-user-account.title') }}
+      </ds-heading>
+    </ds-space>
+
+    <ds-form class="create-user-account" v-model="formData" :schema="formSchema" @submit="submit">
+      <template v-slot="{ errors }">
+        <ds-input
+          id="name"
+          model="name"
+          icon="user"
+          :label="$t('settings.data.labelName')"
+          :placeholder="$t('settings.data.namePlaceholder')"
+        />
+        <ds-input
+          id="about"
+          model="about"
+          type="textarea"
+          rows="3"
+          :label="$t('settings.data.labelBio')"
+          :placeholder="$t('settings.data.labelBio')"
+        />
+        <ds-input
+          id="password"
+          model="password"
+          type="password"
+          autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password')"
+        />
+        <ds-input
+          id="passwordConfirmation"
+          model="passwordConfirmation"
+          type="password"
+          autocomplete="off"
+          :label="$t('settings.security.change-password.label-new-password-confirm')"
+        />
+        <password-strength :password="formData.password" />
+
+        <ds-text>
+          <input
+            id="checkbox0"
+            type="checkbox"
+            v-model="termsAndConditionsConfirmed"
+            :checked="termsAndConditionsConfirmed"
+          />
+          <label for="checkbox0">
+            {{ $t('termsAndConditions.termsAndConditionsConfirmed') }}
+            <br />
+            <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link>
+          </label>
+        </ds-text>
+        <ds-text>
+          <input id="checkbox1" type="checkbox" v-model="dataPrivacy" :checked="dataPrivacy" />
+          <label for="checkbox1">
+            {{ $t('components.registration.signup.form.data-privacy') }}
+            <br />
+            <nuxt-link to="/data-privacy">
+              {{ $t('site.data-privacy') }}
+            </nuxt-link>
+          </label>
+        </ds-text>
+        <ds-text>
+          <input id="checkbox2" type="checkbox" v-model="minimumAge" :checked="minimumAge" />
+          <label
+            for="checkbox2"
+            v-html="$t('components.registration.signup.form.minimum-age')"
+          ></label>
+        </ds-text>
+        <ds-text>
+          <input id="checkbox3" type="checkbox" v-model="noCommercial" :checked="noCommercial" />
+          <label
+            for="checkbox3"
+            v-html="$t('components.registration.signup.form.no-commercial')"
+          ></label>
+        </ds-text>
+        <ds-text>
+          <input id="checkbox4" type="checkbox" v-model="noPolitical" :checked="noPolitical" />
+          <label
+            for="checkbox4"
+            v-html="$t('components.registration.signup.form.no-political')"
+          ></label>
+        </ds-text>
+        <base-button
+          style="float: right"
+          icon="check"
+          type="submit"
+          filled
+          :loading="$apollo.loading"
+          :disabled="
+            errors ||
+            !termsAndConditionsConfirmed ||
+            !dataPrivacy ||
+            !minimumAge ||
+            !noCommercial ||
+            !noPolitical
+          "
+        >
+          {{ $t('actions.save') }}
+        </base-button>
+      </template>
+    </ds-form>
+  </div>
+</template>
+
+<script>
+import links from '~/constants/links'
+import PasswordStrength from '../Password/Strength'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+import PasswordForm from '~/components/utils/PasswordFormHelper'
+import { VERSION } from '~/constants/terms-and-conditions-version.js'
+import { SignupVerificationMutation } from '~/graphql/Registration.js'
+import emails from '~/constants/emails'
+
+export default {
+  components: {
+    PasswordStrength,
+    SweetalertIcon,
+  },
+  data() {
+    const passwordForm = PasswordForm({ translate: this.$t })
+    return {
+      links,
+      supportEmail: emails.SUPPORT,
+      formData: {
+        name: '',
+        about: '',
+        ...passwordForm.formData,
+      },
+      formSchema: {
+        name: {
+          type: 'string',
+          required: true,
+          min: 3,
+        },
+        about: {
+          type: 'string',
+          required: false,
+        },
+        ...passwordForm.formSchema,
+      },
+      disabled: true,
+      response: null,
+      // TODO: Our styleguide does not support checkmarks.
+      // Integrate termsAndConditionsConfirmed into `this.formData` once we
+      // have checkmarks available.
+      termsAndConditionsConfirmed: false,
+      dataPrivacy: false,
+      minimumAge: false,
+      noCommercial: false,
+      noPolitical: false,
+    }
+  },
+  props: {
+    nonce: { type: String, required: true },
+    email: { type: String, required: true },
+  },
+  methods: {
+    async submit() {
+      const { name, password, about } = this.formData
+      const { email, nonce } = this
+      const termsAndConditionsAgreedVersion = VERSION
+      const locale = this.$i18n.locale()
+      try {
+        await this.$apollo.mutate({
+          mutation: SignupVerificationMutation,
+          variables: {
+            name,
+            password,
+            about,
+            email,
+            nonce,
+            termsAndConditionsAgreedVersion,
+            locale,
+          },
+        })
+        this.response = 'success'
+        setTimeout(() => {
+          this.$emit('userCreated', {
+            email,
+            password,
+          })
+        }, 3000)
+      } catch (err) {
+        this.response = 'error'
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.create-account-image {
+  width: 50%;
+  max-width: 200px;
+}
+</style>
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
new file mode 100644
index 000000000..7acce0bf0
--- /dev/null
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -0,0 +1,127 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import RegistrationSlider from './RegistrationSlider.vue'
+import helpers from '~/storybook/helpers'
+
+helpers.init()
+
+// export const searchResults = [
+//   {
+//     id: 'post-by-jenny',
+//     __typename: 'Post',
+//     slug: 'user-post-by-jenny',
+//     title: 'User Post by Jenny',
+//     value: 'User Post by Jenny',
+//     shoutedCount: 0,
+//     commentsCount: 4,
+//     createdAt: '2019-11-13T03:03:16.155Z',
+//     author: {
+//       id: 'u3',
+//       name: 'Jenny Rostock',
+//       slug: 'jenny-rostock',
+//     },
+//   },
+//   {
+//     id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
+//     __typename: 'Post',
+//     slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
+//     title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+//     value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
+//     shoutedCount: 0,
+//     commentsCount: 0,
+//     createdAt: '2019-11-13T03:00:45.478Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'p7',
+//     __typename: 'Post',
+//     slug: 'this-is-post-7',
+//     title: 'This is post #7',
+//     value: 'This is post #7',
+//     shoutedCount: 1,
+//     commentsCount: 1,
+//     createdAt: '2019-11-13T03:00:23.098Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'p12',
+//     __typename: 'Post',
+//     slug: 'this-is-post-12',
+//     title: 'This is post #12',
+//     value: 'This is post #12',
+//     shoutedCount: 0,
+//     commentsCount: 12,
+//     createdAt: '2019-11-13T03:00:23.098Z',
+//     author: {
+//       id: 'u6',
+//       name: 'Louie',
+//       slug: 'louie',
+//     },
+//   },
+//   {
+//     id: 'u1',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Peter Lustig',
+//     slug: 'peter-lustig',
+//   },
+//   {
+//     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Herbert Schultz',
+//     slug: 'herbert-schultz',
+//   },
+//   {
+//     id: 'u2',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Bob der Baumeister',
+//     slug: 'bob-der-baumeister',
+//   },
+//   {
+//     id: '7b654f72-f4da-4315-8bed-39de0859754b',
+//     __typename: 'User',
+//     avatar: {
+//       url:
+//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+//     },
+//     name: 'Tonya Mohr',
+//     slug: 'tonya-mohr',
+//   },
+//   {
+//     id: 'Hashtag',
+//     __typename: 'Tag',
+//   },
+// ]
+
+storiesOf('RegistrationSlider', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('standard', () => ({
+    components: { RegistrationSlider },
+    store: helpers.store,
+    data: () => ({
+      // searchResults,
+    }),
+    template: `
+      <registration-slider />
+    `,
+  }))
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
new file mode 100644
index 000000000..3cb248931
--- /dev/null
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -0,0 +1,214 @@
+<template>
+  <section class="login-form">
+    <base-card>
+      <template #imageColumn>
+        <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+          <img class="image" alt="Welcome" src="/img/custom/welcome.svg" />
+        </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>
+      <!-- <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>
+    </base-card>
+  </section>
+</template>
+
+<script>
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
+import RegistrationItemCreateUserAccount from './RegistrationItemCreateUserAccount'
+import links from '~/constants/links.js'
+import metadata from '~/constants/metadata.js'
+
+export default {
+  name: 'RegistrationSlider',
+  components: {
+    LocaleSwitch,
+    ComponentSlider,
+    RegistrationItemCreateUserAccount,
+  },
+  // 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,
+    }
+  },
+  computed: {
+    // 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() {
+    //   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>

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 03/44] 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>

From 2068dd507bba76349ffa4e6cf4c29a696d76f4b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 28 Jan 2021 13:51:26 +0100
Subject: [PATCH 04/44] Play with callbacks

---
 .../ComponentSlider/ComponentSlider.vue       | 42 ++++++-------------
 .../RegistrationItemEnterInvite.vue           | 11 ++++-
 .../Registration/RegistrationSlider.vue       | 31 ++++++++------
 3 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 41bf9b1cb..80f5de462 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -1,19 +1,7 @@
 <template>
   <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>
+    <slot :name="activeSliderName" />
     <base-button
       style="float: right"
       icon="check"
@@ -52,10 +40,6 @@ export default {
     // },
   },
   methods: {
-    validation(sliderName) {
-      console.log('validation !!!')
-      disabled = false
-    },
     nextComponent() {
       if (this.sliderIndex < this.sliders.length - 1) {
         this.sliderIndex++
@@ -71,17 +55,17 @@ export default {
 //    cursor: pointer;
 //  }
 
-.Slider {
-  &__component {
-    // Wolle &:hover {
-    //   border-bottom: 2px solid #c9c6ce;
-    // }
+// .Slider {
+//   &__component {
+//     // Wolle &:hover {
+//     //   border-bottom: 2px solid #c9c6ce;
+//     // }
 
-    // Wolle &.--visible {
-    // }
-    &.--hidden {
-      display: none;
-    }
-  }
-}
+//     // Wolle &.--visible {
+//     // }
+//     // &.--hidden {
+//     //   display: none;
+//     // }
+//   }
+// }
 </style>
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index b2b294257..7a9835179 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -28,7 +28,9 @@
 export default {
   name: 'RegistrationItemEnterInvite',
   props: {
+    validateCallback: { type: Function, required: true },
     email: { type: String, required: true },
+    // test: { type: Boolean, required: true },
   },
   data() {
     return {
@@ -49,7 +51,11 @@ export default {
   },
   methods: {
     async handleInput() {
-      this.disabled = true
+      // Wolle this.disabled = true
+      console.log('handleInput !!!')
+      console.log('email: ', this.email)
+      // console.log('test: ', this.test)
+      this.validateCallback(false)
     },
     async handleInputValid() {
       console.log('handleInputValid !!!')
@@ -57,7 +63,8 @@ export default {
       const { nonce } = this.formData
       const email = this.email
       // Wolle this.$emit('nonceEntered', { email, nonce })
-      this.$emit('validation', { email, nonce })
+      // this.$emit('validation', { email, nonce })
+      this.validateCallback(true, { email, nonce })
     },
     handleSubmitVerify() {
       // const { nonce } = this.formData
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index a91b9dd0c..474d9b995 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -7,16 +7,24 @@
         </a>
       </template>
       <h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
-      <component-slider :sliders="sliders">
+      <component-slider :sliders="sliders" :submitCallback="submit">
+        <!-- <template #enter-nonce slot="{test}"> -->
         <template #enter-nonce>
-          <registration-item-enter-invite email="user@example.org">
+          <registration-item-enter-invite
+            :email="'user@example.org'"
+            :validateCallback="validation"
+          >
             <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" />
+          <registration-item-create-user-account
+            nonce="AAAAAA"
+            email="user@example.org"
+            :validateCallback="validation"
+          />
         </template>
       </component-slider>
       <template #topMenu>
@@ -60,16 +68,15 @@ export default {
     // },
   },
   methods: {
-    // Wolle clear() {
-    //   this.unprocessedSearchInput = ''
-    //   this.previousSearchTerm = ''
-    //   this.searchValue = ''
-    //   this.$emit('clearSearch')
-    //   clearTimeout(this.searchProcess)
-    // },
+    validation(is, data = null) {
+      console.log('validation: ', is, data)
+      // this.disabled = !is
+    },
+    submit() {
+      console.log('submit !!!')
+    },
   },
 }
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

From 5601821c88fcc8e52deb7bbfb0d65b56527e9427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 28 Jan 2021 13:56:50 +0100
Subject: [PATCH 05/44] Change 'enter-nonce' to 'enter-invite'

---
 webapp/components/Registration/RegistrationSlider.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 474d9b995..eb31bf03c 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -8,8 +8,7 @@
       </template>
       <h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
       <component-slider :sliders="sliders" :submitCallback="submit">
-        <!-- <template #enter-nonce slot="{test}"> -->
-        <template #enter-nonce>
+        <template #enter-invite>
           <registration-item-enter-invite
             :email="'user@example.org'"
             :validateCallback="validation"
@@ -59,7 +58,7 @@ export default {
     return {
       links,
       metadata,
-      sliders: ['enter-nonce', 'create-user-account'],
+      sliders: ['enter-invite', 'create-user-account'],
     }
   },
   computed: {

From 61666fbd74b253454fd6abc0393bba4222846855 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 28 Jan 2021 15:50:23 +0100
Subject: [PATCH 06/44] Introduced 'sliderData'

---
 .../ComponentSlider/ComponentSlider.vue       | 49 ++-----------------
 .../RegistrationItemEnterInvite.vue           | 16 ++----
 .../Registration/RegistrationSlider.vue       | 39 ++++++++++-----
 3 files changed, 37 insertions(+), 67 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 80f5de462..c14c7eb60 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/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>
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 7a9835179..a4902ebd0 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/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 })
     },
   },
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index eb31bf03c..2dfe4e989 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/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>

From 963fb234b35e7bd0b23fbd67cb62f5869d47f1a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 28 Jan 2021 20:00:19 +0100
Subject: [PATCH 07/44] Handle validation of create user account and submit

---
 .../RegistrationItemCreateUserAccount.vue     | 46 +++++++++++++++++--
 .../RegistrationItemEnterInvite.vue           |  6 +--
 .../Registration/RegistrationSlider.vue       | 27 +++++++----
 3 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index 611fdcebb..d599361ef 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -30,7 +30,8 @@
     </ds-space>
 
     <ds-form class="create-user-account" v-model="formData" :schema="formSchema" @submit="submit">
-      <template v-slot="{ errors }">
+      <!-- Wolle <template v-slot="{ errors }"> -->
+      <template>
         <ds-input
           id="name"
           model="name"
@@ -106,7 +107,7 @@
             v-html="$t('components.registration.signup.form.no-political')"
           ></label>
         </ds-text>
-        <base-button
+        <!-- <base-button
           style="float: right"
           icon="check"
           type="submit"
@@ -122,7 +123,7 @@
           "
         >
           {{ $t('actions.save') }}
-        </base-button>
+        </base-button> -->
       </template>
     </ds-form>
   </div>
@@ -165,7 +166,7 @@ export default {
         },
         ...passwordForm.formSchema,
       },
-      disabled: true,
+      // Wolle disabled: true,
       response: null,
       // TODO: Our styleguide does not support checkmarks.
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
@@ -178,9 +179,46 @@ export default {
     }
   },
   props: {
+    sliderData: { type: Object, required: true },
     nonce: { type: String, required: true },
     email: { type: String, required: true },
   },
+  computed: {
+    valid() {
+      return (
+        this.errors ||
+        !this.termsAndConditionsConfirmed ||
+        !this.dataPrivacy ||
+        !this.minimumAge ||
+        !this.noCommercial ||
+        !this.noPolitical
+      )
+    },
+  },
+  watch: {
+    valid(newVal, _oldVal) {
+      // Wolle const [oldPropertyA, oldProvertyB] = oldVal.split('|');
+      // const [newPropertyA, newProvertyB] = newVal.split('|');
+      // doSomething
+      if (newVal) {
+        this.sliderData.validateCallback(false)
+      } else {
+        const { name, password, about } = this.formData
+        const { email, nonce } = this
+        const termsAndConditionsAgreedVersion = VERSION
+        const locale = this.$i18n.locale()
+        this.sliderData.validateCallback(true, {
+          name,
+          password,
+          about,
+          email,
+          nonce,
+          termsAndConditionsAgreedVersion,
+          locale,
+        })
+      }
+    },
+  },
   methods: {
     async submit() {
       const { name, password, about } = this.formData
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index a4902ebd0..83c44dc66 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -50,12 +50,12 @@ export default {
   },
   methods: {
     async handleInput() {
-      console.log('handleInput !!!')
-      console.log('email: ', this.email)
+      // Wolle console.log('handleInput !!!')
+      // console.log('email: ', this.email)
       this.sliderData.validateCallback(false)
     },
     async handleInputValid() {
-      console.log('handleInputValid !!!')
+      // Wolle console.log('handleInputValid !!!')
       const { nonce } = this.formData
       const email = this.email
       this.sliderData.validateCallback(true, { email, nonce })
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 2dfe4e989..ba1f8d7b5 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -57,10 +57,11 @@ export default {
       metadata,
       sliders: ['enter-invite', 'create-user-account'],
       sliderData: {
+        collectedComponentData: {},
         sliders: ['enter-invite', 'create-user-account'],
         activeSliderName: 'enter-invite',
         validateCallback: this.validateCallback,
-        submitCallback: this.submitCallback,
+        // submitCallback: this.submitCallback,
         button: {
           title: 'Next', // Wolle
           // title: 'Submit', // Wolle
@@ -77,16 +78,26 @@ export default {
   },
   methods: {
     validateCallback(is, data = null) {
-      console.log('validation: ', is, data)
+      if (is) {
+        this.sliderData.collectedComponentData = { ...this.sliderData.collectedComponentData, ...data }
+      }
       this.sliderData.button.disabled = !is
     },
-    submitCallback() {
-      console.log('submit !!!')
-    },
+    // submitCallback() {
+    //   // Wolle console.log('submit !!!') // Wolle
+    // },
     buttonCallback() {
-      console.log('buttonCallback !!!')
-      if (this.sliderIndex < this.sliderData.sliders.length - 1) {
-        this.sliderData.activeSliderName = this.sliderData.sliders[this.sliderIndex + 1]
+      if (this.sliderIndex === this.sliderData.sliders.length - 1) {
+        // Wolle submit this.sliderData.collectedComponentData
+        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.button.disabled = true
+        }
+        if (this.sliderIndex === this.sliderData.sliders.length - 1) {
+          this.sliderData.button.title = this.$t('actions.save') // Wolle
+        }
       }
     },
   },

From d77e0fc0b607bd30b0efdaeeec872c682e8fc1eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 28 Jan 2021 20:05:07 +0100
Subject: [PATCH 08/44] Delete console.log

---
 webapp/components/Registration/RegistrationSlider.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index ba1f8d7b5..fdd80d421 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -88,8 +88,7 @@ export default {
     // },
     buttonCallback() {
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {
-        // Wolle submit this.sliderData.collectedComponentData
-        console.log('submit data: ', this.sliderData.collectedComponentData)
+        // 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]

From 3d1e07a40fef0de27b4c8761e7b3992781f1f56f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 28 Jan 2021 20:24:22 +0100
Subject: [PATCH 09/44] Collect submit data

---
 webapp/components/Registration/RegistrationSlider.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index fdd80d421..3c00148b6 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -79,7 +79,10 @@ export default {
   methods: {
     validateCallback(is, data = null) {
       if (is) {
-        this.sliderData.collectedComponentData = { ...this.sliderData.collectedComponentData, ...data }
+        this.sliderData.collectedComponentData = {
+          ...this.sliderData.collectedComponentData,
+          ...data,
+        }
       }
       this.sliderData.button.disabled = !is
     },

From 9757ce46eb5244d4bec66c8e13d4ed3f24a9f4bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 1 Feb 2021 10:55:45 +0100
Subject: [PATCH 10/44] Refine ComponentSlider

---
 .../ComponentSlider/ComponentSlider.vue       | 44 ++++++++++++++-----
 .../RegistrationItemEnterInvite.vue           | 30 ++++++-------
 .../Registration/RegistrationSlider.story.js  |  4 +-
 webapp/locales/de.json                        | 10 +++++
 webapp/locales/en.json                        | 10 +++++
 5 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index c14c7eb60..53ad43c6d 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/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>
 
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 83c44dc66..6016c19e4 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/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;
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index 7acce0bf0..0bf6d5932 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/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 />
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index def3bd0b7..6d9cffed3 100644
--- a/webapp/locales/de.json
+++ b/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.",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7d0f6cf3a..f918a6aa1 100644
--- a/webapp/locales/en.json
+++ b/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.",

From 8a8a3832f4db4fe6296661ab2d7dbeb94079abea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 1 Feb 2021 17:35:20 +0100
Subject: [PATCH 11/44] Added slider selector dots

---
 .../ComponentSlider/ComponentSlider.vue       | 51 +++++++++++++++++--
 .../Registration/RegistrationSlider.vue       | 17 ++++---
 2 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 53ad43c6d..e98c44e9d 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="Slider">
+  <div class="Sliders">
     <!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
     <slot :name="sliderData.activeSliderName" />
     <ds-flex>
@@ -8,6 +8,9 @@
           v-for="componentName in sliderData.sliders"
           :key="componentName"
           class="selection-button"
+          :class="[
+            'Sliders__component-selection',
+          ]"
         >
           <base-button
             style="float: left"
@@ -16,8 +19,8 @@
             type="submit"
             filled
             :loading="false"
-            :disabled="false"
-            @click="sliderData.button.callback"
+            :disabled="sliderIndexByName(componentName) >= sliderIndex"
+            @click="sliderData.sliderSelectorCallback(componentName)"
           />
         </div>
       </ds-flex-item>
@@ -44,6 +47,16 @@ export default {
   props: {
     sliderData: { type: Object, required: true },
   },
+  computed: {
+    sliderIndex() {
+      return this.sliderIndexByName(this.sliderData.activeSliderName)
+    },
+  },
+  methods: {
+    sliderIndexByName(name) {
+      return this.sliderData.sliders.findIndex((sliderName) => sliderName === name)
+    },
+  },
 }
 </script>
 
@@ -51,4 +64,36 @@ export default {
 // Wolle .pointer {
 //    cursor: pointer;
 //  }
+
+.Sliders {
+  // Wolle position: relative;
+  // background-color: #fff;
+  // height: 100%;
+  // display: flex;
+  // margin: 0;
+  // padding: 0;
+  // list-style: none;
+
+  &__component-selection {
+    padding-right: 10px;
+
+    // text-align: center;
+    // height: 100%;
+    // flex-grow: 1;
+
+    // &:hover {
+    //   border-bottom: 2px solid #c9c6ce;
+    // }
+
+    // &.--active {
+    //   border-bottom: 2px solid #17b53f;
+    // }
+    // &.--disabled {
+    //   opacity: $opacity-disabled;
+    //   &:hover {
+    //     border-bottom: none;
+    //   }
+    // }
+  }
+}
 </style>
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 3c00148b6..20f25fde3 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -55,16 +55,14 @@ export default {
     return {
       links,
       metadata,
-      sliders: ['enter-invite', 'create-user-account'],
       sliderData: {
         collectedComponentData: {},
         sliders: ['enter-invite', 'create-user-account'],
         activeSliderName: 'enter-invite',
+        sliderSelectorCallback: this.sliderSelectorCallback,
         validateCallback: this.validateCallback,
-        // submitCallback: this.submitCallback,
         button: {
           title: 'Next', // Wolle
-          // title: 'Submit', // Wolle
           disabled: true,
           callback: this.buttonCallback,
         },
@@ -73,10 +71,13 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderData.sliders.findIndex((name) => name === this.sliderData.activeSliderName)
+      return this.sliderIndexByName(this.sliderData.activeSliderName)
     },
   },
   methods: {
+    sliderIndexByName(name) {
+      return this.sliderData.sliders.findIndex((sliderName) => sliderName === name)
+    },
     validateCallback(is, data = null) {
       if (is) {
         this.sliderData.collectedComponentData = {
@@ -86,9 +87,11 @@ export default {
       }
       this.sliderData.button.disabled = !is
     },
-    // submitCallback() {
-    //   // Wolle console.log('submit !!!') // Wolle
-    // },
+    sliderSelectorCallback(sliderName) {
+      if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
+        this.sliderData.activeSliderName = sliderName
+      }
+    },
     buttonCallback() {
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {
         // console.log('submit data: ', this.sliderData.collectedComponentData)

From e57533fcecf9e36cfbf58ef1f0f60f602dc6b1ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 2 Feb 2021 09:48:10 +0100
Subject: [PATCH 12/44] Add enter e-mail, start

---
 .../ComponentSlider/ComponentSlider.vue       | 30 ++++----
 .../RegistrationItemEnterInvite.vue           | 12 +--
 .../Registration/RegistrationSlider.vue       | 76 ++++++++++++++++---
 3 files changed, 83 insertions(+), 35 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index e98c44e9d..3494c00fd 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -5,29 +5,29 @@
     <ds-flex>
       <ds-flex-item>
         <div
-          v-for="componentName in sliderData.sliders"
-          :key="componentName"
+          v-for="slider in sliderData.sliders"
+          :key="slider.name"
           class="selection-button"
-          :class="[
-            'Sliders__component-selection',
-          ]"
+          :class="['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"
-            @click="sliderData.sliderSelectorCallback(componentName)"
+            :disabled="!(slider.confirmed || sliderIndexByName(slider.name) === sliderIndex)"
+            @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 {
-    //   opacity: $opacity-disabled;
-    //   &:hover {
-    //     border-bottom: none;
-    //   }
-    // }
+    &.--disabled {
+      opacity: $opacity-disabled;
+      // &:hover {
+      //   border-bottom: none;
+      // }
+    }
   }
 }
 </style>
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 6016c19e4..f033af2c2 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/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
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 20f25fde3..47070f0b2 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/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: {},
-        sliders: ['enter-invite', 'create-user-account'],
+        collectedComponentData: {
+          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) {

From e50728e4db3a13d8136eb799a811a5c1706e0e78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 3 Feb 2021 08:01:53 +0100
Subject: [PATCH 13/44] Refines slider functions

- Co-Authored-By: Mogge <moriz.wahl@gmx.de>
---
 .../ComponentSlider/ComponentSlider.vue       | 23 +++----
 .../RegistrationItemEnterInvite.vue           | 15 +++-
 .../Registration/RegistrationSlider.vue       | 69 +++++++------------
 3 files changed, 49 insertions(+), 58 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 3494c00fd..c06fea5bc 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/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;
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index f033af2c2..41742544f 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/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>
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 47070f0b2..b493027a9 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/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
         }
       }
     },

From ab1b624eb24ecf21807a328a8c4ac6904a38e209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 3 Feb 2021 08:27:01 +0100
Subject: [PATCH 14/44] Changed to central slider index and individual button
 icon

---
 .../ComponentSlider/ComponentSlider.vue          |  8 ++++----
 .../Registration/RegistrationSlider.vue          | 16 +++++++++-------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index c06fea5bc..117138f80 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="Sliders">
     <!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
-    <slot :name="sliderData.activeSliderName" />
+    <slot :name="sliderData.sliders[sliderIndex].name" />
     <ds-flex>
       <ds-flex-item>
         <div
@@ -21,14 +21,14 @@
             filled
             :loading="false"
             :disabled="index > sliderIndex"
-            @click="sliderData.sliderSelectorCallback(slider.name)"
+            @click="sliderData.sliderSelectorCallback(index)"
           />
         </div>
       </ds-flex-item>
       <ds-flex-item>
         <base-button
           style="float: right"
-          :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
+          :icon="sliderData.sliders[sliderIndex].button.icon"
           type="submit"
           filled
           :loading="false"
@@ -50,7 +50,7 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderIndexByName(this.sliderData.activeSliderName)
+      return this.sliderData.sliderIndex
     },
   },
   methods: {
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index b493027a9..e99578c1b 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -77,13 +77,14 @@ export default {
           inviteCode: null,
           email: null,
         },
-        // sliderIndex: 0,
+        sliderIndex: 0,
         sliders: [
           {
             name: 'enter-invite',
             validated: false,
             button: {
               title: 'Next', // Wolle
+              icon: 'arrow-right',
               callback: this.buttonCallback,
             },
           },
@@ -92,6 +93,7 @@ export default {
             // validated: false,
             // button: {
             //   title: 'Next', // Wolle
+              // icon:           :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
             //   callback: this.buttonCallback,
             // },
           // },
@@ -100,11 +102,11 @@ export default {
             validated: false,
             button: {
               title: this.$t('actions.save'), // Wolle
+              icon: 'check',
               callback: this.buttonCallback,
             },
           },
         ],
-        activeSliderName: 'enter-invite',
         sliderSelectorCallback: this.sliderSelectorCallback,
         validateCallback: this.validateCallback,
       },
@@ -112,7 +114,7 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderIndexByName(this.sliderData.activeSliderName)
+      return this.sliderData.sliderIndex
     },
   },
   methods: {
@@ -128,9 +130,9 @@ export default {
       }
       this.sliderData.sliders[this.sliderIndex].validated = is
     },
-    sliderSelectorCallback(sliderName) {
-      if (this.sliderIndexByName(sliderName) < this.sliderIndex) {
-        this.sliderData.activeSliderName = sliderName
+    sliderSelectorCallback(selectedIndex) {
+      if (selectedIndex < this.sliderIndex) {
+        this.sliderData.sliderIndex = selectedIndex
       }
     },
     buttonCallback() {
@@ -138,7 +140,7 @@ export default {
         // 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.sliderIndex++
         }
       }
     },

From 4457b733d97ac685b85e0ebe379e0e38c793484f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 3 Feb 2021 08:30:56 +0100
Subject: [PATCH 15/44] Removed method 'sliderIndexByName'

---
 webapp/components/ComponentSlider/ComponentSlider.vue | 10 +++++-----
 webapp/components/Registration/RegistrationSlider.vue |  3 ---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 117138f80..ecb334d7c 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -10,7 +10,7 @@
           class="selection-button"
           :class="[
             'Sliders__component-selection',
-            sliderIndexByName(slider.name) < sliderIndex && '--confirmed',
+            index < sliderIndex && '--confirmed',
           ]"
         >
           <base-button
@@ -50,13 +50,13 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderData.sliderIndex
+      return this.sliderData.sliderIndex // have a shorter notation
     },
   },
   methods: {
-    sliderIndexByName(name) {
-      return this.sliderData.sliders.findIndex((slider) => slider.name === name)
-    },
+    // Wolle sliderIndexByName(name) {
+    //   return this.sliderData.sliders.findIndex((slider) => slider.name === name)
+    // },
   },
 }
 </script>
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index e99578c1b..c6066a4b8 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -118,9 +118,6 @@ export default {
     },
   },
   methods: {
-    sliderIndexByName(name) {
-      return this.sliderData.sliders.findIndex((slider) => slider.name === name)
-    },
     validateCallback(is, data = null) {
       if (is) {
         this.sliderData.collectedComponentData = {

From 0aa3daf5c762b43660e1ef7541d5a334a729008e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 3 Feb 2021 09:10:56 +0100
Subject: [PATCH 16/44] Add header, footer, and centered selection dots

---
 .../ComponentSlider/ComponentSlider.vue       | 22 ++++++++++++-----
 .../Registration/RegistrationSlider.vue       | 24 +++++++++++++------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index ecb334d7c..edf9ec272 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -1,19 +1,26 @@
 <template>
   <div class="Sliders">
-    <!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
+    <slot :name="'header'" />
+
+    <ds-heading v-if="sliderData.sliders[sliderIndex].title" size="h3">
+      {{ sliderData.sliders[sliderIndex].title }}
+    </ds-heading>
+
     <slot :name="sliderData.sliders[sliderIndex].name" />
+
     <ds-flex>
-      <ds-flex-item>
+      <ds-flex-item :centered="true">
         <div
           v-for="(slider, index) in sliderData.sliders"
           :key="slider.name"
-          class="selection-button"
           :class="[
-            'Sliders__component-selection',
             index < sliderIndex && '--confirmed',
           ]"
         >
           <base-button
+            :class="[
+              'Sliders__slider-selection',
+            ]"
             style="float: left"
             :circle="true"
             size="small"
@@ -39,6 +46,8 @@
         </base-button>
       </ds-flex-item>
     </ds-flex>
+
+    <slot :name="'footer'" />
   </div>
 </template>
 
@@ -71,8 +80,9 @@ export default {
   // padding: 0;
   // list-style: none;
 
-  &__component-selection {
-    padding-right: 10px;
+  &__slider-selection {
+    // padding-top: 5px;
+    margin-right: 5px;
 
     // text-align: center;
     // height: 100%;
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index c6066a4b8..7d6af908a 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -7,15 +7,15 @@
         </a>
       </template>
 
-      <h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
-
       <component-slider :sliderData="sliderData">
+        <template #header>
+          <ds-heading size="h2">
+            {{ $t('components.registration.signup.title', metadata) }}
+          </ds-heading>
+        </template>
+
         <template #enter-invite>
-          <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>
+          <registration-item-enter-invite :sliderData="sliderData" :inviteCode="sliderData.collectedComponentData.inviteCode ? sliderData.collectedComponentData.inviteCode : ''" :email="sliderData.collectedComponentData.email ? sliderData.collectedComponentData.email : ''" />
         </template>
 
         <!-- <template #enter-email> -->
@@ -39,6 +39,12 @@
             email="user@example.org"
           />
         </template>
+
+        <template #footer>
+            <ds-space margin-bottom="xxx-small" margin-top="small" centered>
+              <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+            </ds-space>
+        </template>
       </component-slider>
 
       <template #topMenu>
@@ -81,6 +87,8 @@ export default {
         sliders: [
           {
             name: 'enter-invite',
+            // title: this.$t('components.registration.create-user-account.title'),
+            title: 'Invitation', // Wolle
             validated: false,
             button: {
               title: 'Next', // Wolle
@@ -91,6 +99,7 @@ export default {
           // {
           //   name: 'enter-email',
             // validated: false,
+            // title: 'E-Mail', // Wolle
             // button: {
             //   title: 'Next', // Wolle
               // icon:           :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
@@ -99,6 +108,7 @@ export default {
           // },
           {
             name: 'create-user-account',
+            title: this.$t('components.registration.create-user-account.title'),
             validated: false,
             button: {
               title: this.$t('actions.save'), // Wolle

From 19180ed872cbc6733a62a656fd56ac7760fd7c7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 4 Feb 2021 10:04:59 +0100
Subject: [PATCH 17/44] Study validation and errors watching

---
 .../ComponentSlider/ComponentSlider.vue       |  14 +-
 .../RegistrationItemCreateUserAccount.vue     | 244 +++++++++++++++---
 .../RegistrationItemEnterInvite.vue           |   6 +-
 .../Registration/RegistrationSlider.vue       |  29 ++-
 .../Registration/WatchScopedSlotsCallback.vue |  34 +++
 webapp/components/utils/PasswordFormHelper.js |   2 +-
 6 files changed, 282 insertions(+), 47 deletions(-)
 create mode 100644 webapp/components/Registration/WatchScopedSlotsCallback.vue

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index edf9ec272..7b324f763 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -14,12 +14,13 @@
           v-for="(slider, index) in sliderData.sliders"
           :key="slider.name"
           :class="[
+            'Sliders__slider-selection',
             index < sliderIndex && '--confirmed',
           ]"
         >
           <base-button
             :class="[
-              'Sliders__slider-selection',
+              'selection-dot',
             ]"
             style="float: left"
             :circle="true"
@@ -79,10 +80,16 @@ export default {
   // margin: 0;
   // padding: 0;
   // list-style: none;
+  // .selection-dot {
+  //   margin-right: 5px;
+  //   // &:hover {
+  //   //   border-bottom: none;
+  //   // }
+  // }
 
   &__slider-selection {
     // padding-top: 5px;
-    margin-right: 5px;
+    // margin-right: 5px;
 
     // text-align: center;
     // height: 100%;
@@ -92,6 +99,9 @@ export default {
     //   border-bottom: 2px solid #c9c6ce;
     // }
 
+    .selection-dot {
+      margin-right: 2px;
+    }
     // &.--active {
     //   border-bottom: 2px solid #17b53f;
     // }
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index d599361ef..cd3814984 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -23,15 +23,15 @@
     </ds-space>
   </div>
   <div v-else class="create-account-card">
-    <ds-space margin-top="large">
+    <!-- <ds-space margin-top="large">
       <ds-heading size="h3">
         {{ $t('components.registration.create-user-account.title') }}
       </ds-heading>
-    </ds-space>
+    </ds-space> -->
 
     <ds-form class="create-user-account" v-model="formData" :schema="formSchema" @submit="submit">
-      <!-- Wolle <template v-slot="{ errors }"> -->
-      <template>
+      <template v-slot="{ errors }">
+      <!-- <template> -->
         <ds-input
           id="name"
           model="name"
@@ -107,6 +107,8 @@
             v-html="$t('components.registration.signup.form.no-political')"
           ></label>
         </ds-text>
+        <!-- this is neccessary to have the 'errors' status as 'formErrors' in Javascript. I didn't found another way yet -->
+        <watch-scoped-slots-callback :scopedData="{ errors }" :changeCallback="watchScopedSlotsCallback"></watch-scoped-slots-callback>
         <!-- <base-button
           style="float: right"
           icon="check"
@@ -130,19 +132,26 @@
 </template>
 
 <script>
+import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import links from '~/constants/links'
+import emails from '~/constants/emails'
+import WatchScopedSlotsCallback from './WatchScopedSlotsCallback'
 import PasswordStrength from '../Password/Strength'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 import PasswordForm from '~/components/utils/PasswordFormHelper'
-import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import { SignupVerificationMutation } from '~/graphql/Registration.js'
-import emails from '~/constants/emails'
 
 export default {
   name: 'RegistrationItemCreateUserAccount',
   components: {
     PasswordStrength,
     SweetalertIcon,
+    WatchScopedSlotsCallback,
+  },
+  props: {
+    sliderData: { type: Object, required: true },
+    // nonce: { type: String, required: true },
+    // email: { type: String, required: true },
   },
   data() {
     const passwordForm = PasswordForm({ translate: this.$t })
@@ -151,7 +160,9 @@ export default {
       supportEmail: emails.SUPPORT,
       formData: {
         name: '',
-        about: '',
+        // about: '',
+        // Wolle name: this.sliderData.collectedInputData.name ? this.sliderData.collectedInputData.name : '',
+        about: this.sliderData.collectedInputData.about ? this.sliderData.collectedInputData.about : '',
         ...passwordForm.formData,
       },
       formSchema: {
@@ -166,63 +177,228 @@ export default {
         },
         ...passwordForm.formSchema,
       },
+      formErrors: null,
       // Wolle disabled: true,
       response: null,
       // TODO: Our styleguide does not support checkmarks.
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
       // have checkmarks available.
-      termsAndConditionsConfirmed: false,
-      dataPrivacy: false,
-      minimumAge: false,
-      noCommercial: false,
-      noPolitical: false,
+      // termsAndConditionsConfirmed: false,
+      // dataPrivacy: false,
+      // minimumAge: false,
+      // noCommercial: false,
+      // noPolitical: false,
+      // TODO: Our styleguide does not support checkmarks.
+      // Integrate termsAndConditionsConfirmed into `this.formData` once we
+      // have checkmarks available.
+      termsAndConditionsConfirmed: this.sliderData.collectedInputData.termsAndConditionsConfirmed ? this.sliderData.collectedInputData.termsAndConditionsConfirmed : false,
+      dataPrivacy: this.sliderData.collectedInputData.dataPrivacy ? this.sliderData.collectedInputData.dataPrivacy : false,
+      minimumAge: this.sliderData.collectedInputData.minimumAge ? this.sliderData.collectedInputData.minimumAge : false,
+      noCommercial: this.sliderData.collectedInputData.noCommercial ? this.sliderData.collectedInputData.noCommercial : false,
+      noPolitical: this.sliderData.collectedInputData.noPolitical ? this.sliderData.collectedInputData.noPolitical : false,
     }
   },
-  props: {
-    sliderData: { type: Object, required: true },
-    nonce: { type: String, required: true },
-    email: { type: String, required: true },
-  },
   computed: {
     valid() {
-      return (
-        this.errors ||
-        !this.termsAndConditionsConfirmed ||
-        !this.dataPrivacy ||
-        !this.minimumAge ||
-        !this.noCommercial ||
-        !this.noPolitical
-      )
+      // console.log('valid !!! this.formErrors: ', this.formErrors)
+      // console.log('valid !!! this.$slots: ', this.$slots)
+      // console.log('valid !!! this.$scopedSlots: ', this.$scopedSlots)
+      // console.log('this.formSchema: ', this.formSchema)
+      // console.log('this.formData: ', this.formData)
+      // return (this.formErrors ||
+      //   !this.termsAndConditionsConfirmed ||
+      //   !this.dataPrivacy ||
+      //   !this.minimumAge ||
+      //   !this.noCommercial ||
+      //   !this.noPolitical)
+      // const isNotValid = 
+      //   // this.formErrors ||
+      //   this.formErrors ||
+      //   !this.termsAndConditionsConfirmed ||
+      //   !this.dataPrivacy ||
+      //   !this.minimumAge ||
+      //   !this.noCommercial ||
+      //   !this.noPolitical
+      const isValid = 
+        !this.formErrors &&
+        this.formData.name.lenght >= 3 &&
+        this.termsAndConditionsConfirmed &&
+        this.dataPrivacy &&
+        this.minimumAge &&
+        this.noCommercial &&
+        this.noPolitical
+      // console.log('valid : ', !isNotValid)
+      console.log('valid : ', isValid)
+      // const { name, about } = this.formData
+      // // const { email, nonce } = this
+      // // const { email, nonce } = this.sliderData.collectedInputData
+      // const termsAndConditionsAgreedVersion = VERSION
+      // const {
+      //   termsAndConditionsConfirmed,
+      //   dataPrivacy,
+      //   minimumAge,
+      //   noCommercial,
+      //   noPolitical,
+      // } = this
+      // // const locale = this.$i18n.locale()
+      // // this.sliderData.validateCallback(true, {
+      // this.sliderData.validateCallback(!isNotValid, {
+      //   name,
+      //   // password,
+      //   about,
+      //   // email,
+      //   // nonce,
+      //   termsAndConditionsAgreedVersion,
+      //   termsAndConditionsConfirmed,
+      //   dataPrivacy,
+      //   minimumAge,
+      //   noCommercial,
+      //   noPolitical,
+      //   // locale,
+      // })
+      // return !isNotValid
+      return isValid
     },
   },
   watch: {
-    valid(newVal, _oldVal) {
+    // notValid(newVal, _oldVal) {
+    //   // Wolle const [oldPropertyA, oldProvertyB] = oldVal.split('|');
+    //   // const [newPropertyA, newProvertyB] = newVal.split('|');
+    //   // doSomething
+    //   if (newVal) {
+    //     this.sliderData.validateCallback(false)
+    //   } else {
+    //     const { name, about } = this.formData
+    //     // const { email, nonce } = this
+    //     // const { email, nonce } = this.sliderData.collectedInputData
+    //     const termsAndConditionsAgreedVersion = VERSION
+    //     const {
+    //       termsAndConditionsConfirmed,
+    //       dataPrivacy,
+    //       minimumAge,
+    //       noCommercial,
+    //       noPolitical,
+    //     } = this
+    //     // const locale = this.$i18n.locale()
+    //     // this.sliderData.validateCallback(true, {
+    //     this.sliderData.validateCallback(true, {
+    //       name,
+    //       // password,
+    //       about,
+    //       // email,
+    //       // nonce,
+    //       termsAndConditionsAgreedVersion,
+    //       termsAndConditionsConfirmed,
+    //       dataPrivacy,
+    //       minimumAge,
+    //       noCommercial,
+    //       noPolitical,
+    //       // locale,
+    //     })
+    //   }
+    // },
+    valid(newVal) {
       // Wolle const [oldPropertyA, oldProvertyB] = oldVal.split('|');
       // const [newPropertyA, newProvertyB] = newVal.split('|');
       // doSomething
       if (newVal) {
         this.sliderData.validateCallback(false)
       } else {
-        const { name, password, about } = this.formData
-        const { email, nonce } = this
+        const { name, about } = this.formData
+        // const { email, nonce } = this
+        // const { email, nonce } = this.sliderData.collectedInputData
         const termsAndConditionsAgreedVersion = VERSION
-        const locale = this.$i18n.locale()
+        const {
+          termsAndConditionsConfirmed,
+          dataPrivacy,
+          minimumAge,
+          noCommercial,
+          noPolitical,
+        } = this
+        // const locale = this.$i18n.locale()
+        // this.sliderData.validateCallback(true, {
         this.sliderData.validateCallback(true, {
           name,
-          password,
+          // password,
           about,
-          email,
-          nonce,
+          // email,
+          // nonce,
           termsAndConditionsAgreedVersion,
-          locale,
+          termsAndConditionsConfirmed,
+          dataPrivacy,
+          minimumAge,
+          noCommercial,
+          noPolitical,
+          // locale,
         })
       }
     },
+    formData: {
+      handler(newValue) {
+        this.sendValidation(newValue)
+      },
+      deep: true,
+      immediate: true,
+    },
+    termsAndConditionsConfirmed(newValue) {
+      this.sendValidation({termsAndConditionsConfirmed: newValue})
+    },
+    dataPrivacy(newValue) {
+      this.sendValidation({dataPrivacy: newValue})
+    },
+    minimumAge(newValue) {
+      this.sendValidation({minimumAge: newValue})
+    },
+    noCommercial(newValue) {
+      this.sendValidation({noCommercial: newValue})
+    },
+    noPolitical(newValue) {
+      this.sendValidation({noPolitical: newValue})
+    },
   },
   methods: {
+    // setErrors(errors) {
+    //   this.formErrors = errors
+    //   // console.log('setErrors !!! this.formErrors: ', this.formErrors)
+    //   return errors
+    // },
+    watchScopedSlotsCallback({errors}) {
+      this.formErrors = errors
+      console.log('watchScopedSlotsCallback !!! this.formErrors: ', this.formErrors)
+    },
+    sendValidation(newValues) {
+      const { name, about } = this.formData
+      // const { email, nonce } = this
+      // const { email, nonce } = this.sliderData.collectedInputData
+      const termsAndConditionsAgreedVersion = VERSION
+      const {
+        termsAndConditionsConfirmed,
+        dataPrivacy,
+        minimumAge,
+        noCommercial,
+        noPolitical,
+      } = this
+      // const locale = this.$i18n.locale()
+      const nowValues = {
+        name,
+        // password,
+        about,
+        // email,
+        // nonce,
+        termsAndConditionsAgreedVersion,
+        termsAndConditionsConfirmed,
+        dataPrivacy,
+        minimumAge,
+        noCommercial,
+        noPolitical,
+        // locale,
+      }
+      this.sliderData.validateCallback(this.valid, {...nowValues, ...newValues})
+    },
     async submit() {
       const { name, password, about } = this.formData
-      const { email, nonce } = this
+      // const { email, nonce } = this
+      const { email, nonce } = this.sliderData.collectedInputData
       const termsAndConditionsAgreedVersion = VERSION
       const locale = this.$i18n.locale()
       try {
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 41742544f..65d102f4f 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -26,13 +26,13 @@ export default {
   name: 'RegistrationItemEnterInvite',
   props: {
     sliderData: { type: Object, required: true },
-    inviteCode: { type: String, required: false },
+    // inviteCode: { type: String, required: false },
   },
   data() {
     return {
       formData: {
-        // inviteCode: this.handleInputOnStart(this.inviteCode),
-        inviteCode: this.inviteCode ? this.inviteCode : '',
+        // inviteCode: this.inviteCode ? this.inviteCode : '',
+        inviteCode: this.sliderData.collectedInputData.inviteCode ? this.sliderData.collectedInputData.inviteCode : '',
       },
       formSchema: {
         inviteCode: {
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 7d6af908a..51902a205 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -15,7 +15,7 @@
         </template>
 
         <template #enter-invite>
-          <registration-item-enter-invite :sliderData="sliderData" :inviteCode="sliderData.collectedComponentData.inviteCode ? sliderData.collectedComponentData.inviteCode : ''" :email="sliderData.collectedComponentData.email ? sliderData.collectedComponentData.email : ''" />
+          <registration-item-enter-invite :sliderData="sliderData" />
         </template>
 
         <!-- <template #enter-email> -->
@@ -79,9 +79,20 @@ export default {
       links,
       metadata,
       sliderData: {
-        collectedComponentData: {
+        collectedInputData: {
           inviteCode: null,
           email: null,
+          nonce: null,
+          name: null,
+          // password: null,
+          about: null,
+          termsAndConditionsAgreedVersion: null,
+          termsAndConditionsConfirmed: null,
+          dataPrivacy: null,
+          minimumAge: null,
+          noCommercial: null,
+          noPolitical: null,
+          // locale: null, // Wolle: what to do? Is collected in the last slider?! and gets stored in the database …
         },
         sliderIndex: 0,
         sliders: [
@@ -129,13 +140,14 @@ export default {
   },
   methods: {
     validateCallback(is, data = null) {
-      if (is) {
-        this.sliderData.collectedComponentData = {
-          ...this.sliderData.collectedComponentData,
+      this.sliderData.sliders[this.sliderIndex].validated = is
+      // if (is) {
+      if (data) {
+        this.sliderData.collectedInputData = {
+          ...this.sliderData.collectedInputData,
           ...data,
         }
       }
-      this.sliderData.sliders[this.sliderIndex].validated = is
     },
     sliderSelectorCallback(selectedIndex) {
       if (selectedIndex < this.sliderIndex) {
@@ -144,10 +156,13 @@ export default {
     },
     buttonCallback() {
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {
-        // console.log('submit data: ', this.sliderData.collectedComponentData)
+        // console.log('submit data: ', this.sliderData.collectedInputData)
       } else {
         if (this.sliderIndex < this.sliderData.sliders.length - 1) {
           this.sliderData.sliderIndex++
+          if (this.sliderData.sliders[this.sliderIndex] === 'create-user-account') {
+            this.sliderData.sliders[this.sliderIndex].validated = false
+          }
         }
       }
     },
diff --git a/webapp/components/Registration/WatchScopedSlotsCallback.vue b/webapp/components/Registration/WatchScopedSlotsCallback.vue
new file mode 100644
index 000000000..c23f618ce
--- /dev/null
+++ b/webapp/components/Registration/WatchScopedSlotsCallback.vue
@@ -0,0 +1,34 @@
+<template>
+</template>
+
+<script>
+export default {
+  name: 'WatchScopedSlotsCallback',
+  props: {
+    scopedData: { type: Object, required: true },
+    changeCallback: { type: Function, required: true },
+  },
+  data() {
+    // Wolle
+    return {}
+  },
+  computed: {
+    // Wolle
+  },
+  watch: {
+    scopedData: {
+      handler(value) {
+        this.changeCallback(value)
+      },
+      deep: true,
+      immediate: true,
+    }
+  },
+  methods: {
+    // Wolle
+  },
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/webapp/components/utils/PasswordFormHelper.js b/webapp/components/utils/PasswordFormHelper.js
index 578238aca..da6cead90 100644
--- a/webapp/components/utils/PasswordFormHelper.js
+++ b/webapp/components/utils/PasswordFormHelper.js
@@ -15,7 +15,7 @@ export default function PasswordForm({ translate }) {
       },
       passwordConfirmation: [
         {
-          validator(rule, value, callback, source, options) {
+          validator(_rule, value, callback, source, _options) {
             var errors = []
             if (source.password !== value) {
               errors.push(new Error(passwordMismatchMessage))

From a93d70b2d646f5d15a382af324d2987a4220f58f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 4 Feb 2021 15:33:17 +0100
Subject: [PATCH 18/44] Add experimental own validators and set values on
 mounted

---
 .../RegistrationItemCreateUserAccount.vue     | 226 +++++-------------
 .../Registration/RegistrationSlider.vue       |   5 +-
 2 files changed, 68 insertions(+), 163 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index cd3814984..e63f24c3c 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -160,10 +160,14 @@ export default {
       supportEmail: emails.SUPPORT,
       formData: {
         name: '',
-        // about: '',
-        // Wolle name: this.sliderData.collectedInputData.name ? this.sliderData.collectedInputData.name : '',
-        about: this.sliderData.collectedInputData.about ? this.sliderData.collectedInputData.about : '',
+        about: '',
+        // name: this.sliderData.collectedInputData.name ? this.sliderData.collectedInputData.name : '',
+        // about: this.sliderData.collectedInputData.about ? this.sliderData.collectedInputData.about : '',
         ...passwordForm.formData,
+        // ...{
+        //   password: this.sliderData.collectedInputData.password ? this.sliderData.collectedInputData.password : '',
+        //   passwordConfirmation: this.sliderData.collectedInputData.passwordConfirmation ? this.sliderData.collectedInputData.passwordConfirmation : '',
+        // }
       },
       formSchema: {
         name: {
@@ -183,191 +187,91 @@ export default {
       // TODO: Our styleguide does not support checkmarks.
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
       // have checkmarks available.
-      // termsAndConditionsConfirmed: false,
-      // dataPrivacy: false,
-      // minimumAge: false,
-      // noCommercial: false,
-      // noPolitical: false,
+      termsAndConditionsConfirmed: false,
+      dataPrivacy: false,
+      minimumAge: false,
+      noCommercial: false,
+      noPolitical: false,
       // TODO: Our styleguide does not support checkmarks.
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
       // have checkmarks available.
-      termsAndConditionsConfirmed: this.sliderData.collectedInputData.termsAndConditionsConfirmed ? this.sliderData.collectedInputData.termsAndConditionsConfirmed : false,
-      dataPrivacy: this.sliderData.collectedInputData.dataPrivacy ? this.sliderData.collectedInputData.dataPrivacy : false,
-      minimumAge: this.sliderData.collectedInputData.minimumAge ? this.sliderData.collectedInputData.minimumAge : false,
-      noCommercial: this.sliderData.collectedInputData.noCommercial ? this.sliderData.collectedInputData.noCommercial : false,
-      noPolitical: this.sliderData.collectedInputData.noPolitical ? this.sliderData.collectedInputData.noPolitical : false,
+      // termsAndConditionsConfirmed: this.sliderData.collectedInputData.termsAndConditionsConfirmed ? this.sliderData.collectedInputData.termsAndConditionsConfirmed : false,
+      // dataPrivacy: this.sliderData.collectedInputData.dataPrivacy ? this.sliderData.collectedInputData.dataPrivacy : false,
+      // minimumAge: this.sliderData.collectedInputData.minimumAge ? this.sliderData.collectedInputData.minimumAge : false,
+      // noCommercial: this.sliderData.collectedInputData.noCommercial ? this.sliderData.collectedInputData.noCommercial : false,
+      // noPolitical: this.sliderData.collectedInputData.noPolitical ? this.sliderData.collectedInputData.noPolitical : false,
     }
   },
+  mounted: function () {
+    this.$nextTick(function () {
+      // Code that will run only after the
+      // entire view has been rendered
+      console.log('mounted !!! ')
+      this.formData.name = this.sliderData.collectedInputData.name ? this.sliderData.collectedInputData.name : '',
+      this.formData.about = this.sliderData.collectedInputData.about ? this.sliderData.collectedInputData.about : '',
+      this.formData.password = this.sliderData.collectedInputData.password ? this.sliderData.collectedInputData.password : ''
+      this.formData.passwordConfirmation = this.sliderData.collectedInputData.passwordConfirmation ? this.sliderData.collectedInputData.passwordConfirmation : ''
+      this.termsAndConditionsConfirmed = this.sliderData.collectedInputData.termsAndConditionsConfirmed ? this.sliderData.collectedInputData.termsAndConditionsConfirmed : false
+      this.dataPrivacy = this.sliderData.collectedInputData.dataPrivacy ? this.sliderData.collectedInputData.dataPrivacy : false
+      this.minimumAge = this.sliderData.collectedInputData.minimumAge ? this.sliderData.collectedInputData.minimumAge : false
+      this.noCommercial = this.sliderData.collectedInputData.noCommercial ? this.sliderData.collectedInputData.noCommercial : false
+      this.noPolitical = this.sliderData.collectedInputData.noPolitical ? this.sliderData.collectedInputData.noPolitical : false
+    })
+  },
   computed: {
     valid() {
-      // console.log('valid !!! this.formErrors: ', this.formErrors)
-      // console.log('valid !!! this.$slots: ', this.$slots)
-      // console.log('valid !!! this.$scopedSlots: ', this.$scopedSlots)
-      // console.log('this.formSchema: ', this.formSchema)
-      // console.log('this.formData: ', this.formData)
-      // return (this.formErrors ||
-      //   !this.termsAndConditionsConfirmed ||
-      //   !this.dataPrivacy ||
-      //   !this.minimumAge ||
-      //   !this.noCommercial ||
-      //   !this.noPolitical)
-      // const isNotValid = 
-      //   // this.formErrors ||
-      //   this.formErrors ||
-      //   !this.termsAndConditionsConfirmed ||
-      //   !this.dataPrivacy ||
-      //   !this.minimumAge ||
-      //   !this.noCommercial ||
-      //   !this.noPolitical
+      // console.log('valid !!! this.formData: ', this.formData, ' this.formData.password === this.formData.passwordConfirmation: ', this.formData.password === this.formData.passwordConfirmation)
+      // console.log('this.formData.name.length: ', this.formData.name.length, ' this.formData.password.length: ', this.formData.password.length)
       const isValid = 
-        !this.formErrors &&
-        this.formData.name.lenght >= 3 &&
+        // !this.formErrors &&
+        (this.formData.name.length >= 3) &&
+        (this.formData.password.length >= 1) &&
+        (this.formData.password === this.formData.passwordConfirmation) &&
         this.termsAndConditionsConfirmed &&
         this.dataPrivacy &&
         this.minimumAge &&
         this.noCommercial &&
         this.noPolitical
-      // console.log('valid : ', !isNotValid)
       console.log('valid : ', isValid)
-      // const { name, about } = this.formData
-      // // const { email, nonce } = this
-      // // const { email, nonce } = this.sliderData.collectedInputData
-      // const termsAndConditionsAgreedVersion = VERSION
-      // const {
-      //   termsAndConditionsConfirmed,
-      //   dataPrivacy,
-      //   minimumAge,
-      //   noCommercial,
-      //   noPolitical,
-      // } = this
-      // // const locale = this.$i18n.locale()
-      // // this.sliderData.validateCallback(true, {
-      // this.sliderData.validateCallback(!isNotValid, {
-      //   name,
-      //   // password,
-      //   about,
-      //   // email,
-      //   // nonce,
-      //   termsAndConditionsAgreedVersion,
-      //   termsAndConditionsConfirmed,
-      //   dataPrivacy,
-      //   minimumAge,
-      //   noCommercial,
-      //   noPolitical,
-      //   // locale,
-      // })
-      // return !isNotValid
       return isValid
     },
   },
   watch: {
-    // notValid(newVal, _oldVal) {
-    //   // Wolle const [oldPropertyA, oldProvertyB] = oldVal.split('|');
-    //   // const [newPropertyA, newProvertyB] = newVal.split('|');
-    //   // doSomething
-    //   if (newVal) {
-    //     this.sliderData.validateCallback(false)
-    //   } else {
-    //     const { name, about } = this.formData
-    //     // const { email, nonce } = this
-    //     // const { email, nonce } = this.sliderData.collectedInputData
-    //     const termsAndConditionsAgreedVersion = VERSION
-    //     const {
-    //       termsAndConditionsConfirmed,
-    //       dataPrivacy,
-    //       minimumAge,
-    //       noCommercial,
-    //       noPolitical,
-    //     } = this
-    //     // const locale = this.$i18n.locale()
-    //     // this.sliderData.validateCallback(true, {
-    //     this.sliderData.validateCallback(true, {
-    //       name,
-    //       // password,
-    //       about,
-    //       // email,
-    //       // nonce,
-    //       termsAndConditionsAgreedVersion,
-    //       termsAndConditionsConfirmed,
-    //       dataPrivacy,
-    //       minimumAge,
-    //       noCommercial,
-    //       noPolitical,
-    //       // locale,
-    //     })
-    //   }
+    // formData: {
+    //   handler() {
+    //     console.log('formData: ', this.formData)
+    //     this.sendValidation()
+    //   },
+    //   deep: true,
+    //   immediate: true,
     // },
-    valid(newVal) {
-      // Wolle const [oldPropertyA, oldProvertyB] = oldVal.split('|');
-      // const [newPropertyA, newProvertyB] = newVal.split('|');
-      // doSomething
-      if (newVal) {
-        this.sliderData.validateCallback(false)
-      } else {
-        const { name, about } = this.formData
-        // const { email, nonce } = this
-        // const { email, nonce } = this.sliderData.collectedInputData
-        const termsAndConditionsAgreedVersion = VERSION
-        const {
-          termsAndConditionsConfirmed,
-          dataPrivacy,
-          minimumAge,
-          noCommercial,
-          noPolitical,
-        } = this
-        // const locale = this.$i18n.locale()
-        // this.sliderData.validateCallback(true, {
-        this.sliderData.validateCallback(true, {
-          name,
-          // password,
-          about,
-          // email,
-          // nonce,
-          termsAndConditionsAgreedVersion,
-          termsAndConditionsConfirmed,
-          dataPrivacy,
-          minimumAge,
-          noCommercial,
-          noPolitical,
-          // locale,
-        })
-      }
+    formData() {
+      console.log('formData: ', this.formData)
+      this.sendValidation()
     },
-    formData: {
-      handler(newValue) {
-        this.sendValidation(newValue)
-      },
-      deep: true,
-      immediate: true,
+    termsAndConditionsConfirmed() {
+      this.sendValidation()
     },
-    termsAndConditionsConfirmed(newValue) {
-      this.sendValidation({termsAndConditionsConfirmed: newValue})
+    dataPrivacy() {
+      this.sendValidation()
     },
-    dataPrivacy(newValue) {
-      this.sendValidation({dataPrivacy: newValue})
+    minimumAge() {
+      this.sendValidation()
     },
-    minimumAge(newValue) {
-      this.sendValidation({minimumAge: newValue})
+    noCommercial() {
+      this.sendValidation()
     },
-    noCommercial(newValue) {
-      this.sendValidation({noCommercial: newValue})
-    },
-    noPolitical(newValue) {
-      this.sendValidation({noPolitical: newValue})
+    noPolitical() {
+      this.sendValidation()
     },
   },
   methods: {
-    // setErrors(errors) {
-    //   this.formErrors = errors
-    //   // console.log('setErrors !!! this.formErrors: ', this.formErrors)
-    //   return errors
-    // },
     watchScopedSlotsCallback({errors}) {
       this.formErrors = errors
       console.log('watchScopedSlotsCallback !!! this.formErrors: ', this.formErrors)
     },
-    sendValidation(newValues) {
-      const { name, about } = this.formData
+    sendValidation() {
+      const { name, about, password, passwordConfirmation } = this.formData
       // const { email, nonce } = this
       // const { email, nonce } = this.sliderData.collectedInputData
       const termsAndConditionsAgreedVersion = VERSION
@@ -379,10 +283,11 @@ export default {
         noPolitical,
       } = this
       // const locale = this.$i18n.locale()
-      const nowValues = {
+      const value = {
         name,
-        // password,
         about,
+        password,
+        passwordConfirmation,
         // email,
         // nonce,
         termsAndConditionsAgreedVersion,
@@ -393,7 +298,8 @@ export default {
         noPolitical,
         // locale,
       }
-      this.sliderData.validateCallback(this.valid, {...nowValues, ...newValues})
+      console.log('sendValidation !!!', ' this.valid: ', this.valid, ' value: ', value)
+      this.sliderData.validateCallback(this.valid, value)
     },
     async submit() {
       const { name, password, about } = this.formData
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 51902a205..1fed20045 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -139,9 +139,8 @@ export default {
     },
   },
   methods: {
-    validateCallback(is, data = null) {
-      this.sliderData.sliders[this.sliderIndex].validated = is
-      // if (is) {
+    validateCallback(isValid, data = null) {
+      this.sliderData.sliders[this.sliderIndex].validated = isValid
       if (data) {
         this.sliderData.collectedInputData = {
           ...this.sliderData.collectedInputData,

From d9e65597ceadc2b0740464405574d52ca2889b46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 4 Feb 2021 15:45:29 +0100
Subject: [PATCH 19/44] Fix lint

---
 .../ComponentSlider/ComponentSlider.vue       |  9 +-
 .../RegistrationItemCreateUserAccount.vue     | 82 +++++++++----------
 .../RegistrationItemEnterInvite.vue           |  6 +-
 .../Registration/RegistrationSlider.vue       | 28 +++----
 .../Registration/WatchScopedSlotsCallback.vue |  8 +-
 5 files changed, 62 insertions(+), 71 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 7b324f763..1be5c1371 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -13,15 +13,10 @@
         <div
           v-for="(slider, index) in sliderData.sliders"
           :key="slider.name"
-          :class="[
-            'Sliders__slider-selection',
-            index < sliderIndex && '--confirmed',
-          ]"
+          :class="['Sliders__slider-selection', index < sliderIndex && '--confirmed']"
         >
           <base-button
-            :class="[
-              'selection-dot',
-            ]"
+            :class="['selection-dot']"
             style="float: left"
             :circle="true"
             size="small"
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index e63f24c3c..d4b7b8ff4 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -31,7 +31,7 @@
 
     <ds-form class="create-user-account" v-model="formData" :schema="formSchema" @submit="submit">
       <template v-slot="{ errors }">
-      <!-- <template> -->
+        <!-- <template> -->
         <ds-input
           id="name"
           model="name"
@@ -108,7 +108,10 @@
           ></label>
         </ds-text>
         <!-- this is neccessary to have the 'errors' status as 'formErrors' in Javascript. I didn't found another way yet -->
-        <watch-scoped-slots-callback :scopedData="{ errors }" :changeCallback="watchScopedSlotsCallback"></watch-scoped-slots-callback>
+        <watch-scoped-slots-callback
+          :scopedData="{ errors }"
+          :changeCallback="watchScopedSlotsCallback"
+        ></watch-scoped-slots-callback>
         <!-- <base-button
           style="float: right"
           icon="check"
@@ -150,8 +153,6 @@ export default {
   },
   props: {
     sliderData: { type: Object, required: true },
-    // nonce: { type: String, required: true },
-    // email: { type: String, required: true },
   },
   data() {
     const passwordForm = PasswordForm({ translate: this.$t })
@@ -161,13 +162,7 @@ export default {
       formData: {
         name: '',
         about: '',
-        // name: this.sliderData.collectedInputData.name ? this.sliderData.collectedInputData.name : '',
-        // about: this.sliderData.collectedInputData.about ? this.sliderData.collectedInputData.about : '',
         ...passwordForm.formData,
-        // ...{
-        //   password: this.sliderData.collectedInputData.password ? this.sliderData.collectedInputData.password : '',
-        //   passwordConfirmation: this.sliderData.collectedInputData.passwordConfirmation ? this.sliderData.collectedInputData.passwordConfirmation : '',
-        // }
       },
       formSchema: {
         name: {
@@ -182,7 +177,6 @@ export default {
         ...passwordForm.formSchema,
       },
       formErrors: null,
-      // Wolle disabled: true,
       response: null,
       // TODO: Our styleguide does not support checkmarks.
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
@@ -192,41 +186,51 @@ export default {
       minimumAge: false,
       noCommercial: false,
       noPolitical: false,
-      // TODO: Our styleguide does not support checkmarks.
-      // Integrate termsAndConditionsConfirmed into `this.formData` once we
-      // have checkmarks available.
-      // termsAndConditionsConfirmed: this.sliderData.collectedInputData.termsAndConditionsConfirmed ? this.sliderData.collectedInputData.termsAndConditionsConfirmed : false,
-      // dataPrivacy: this.sliderData.collectedInputData.dataPrivacy ? this.sliderData.collectedInputData.dataPrivacy : false,
-      // minimumAge: this.sliderData.collectedInputData.minimumAge ? this.sliderData.collectedInputData.minimumAge : false,
-      // noCommercial: this.sliderData.collectedInputData.noCommercial ? this.sliderData.collectedInputData.noCommercial : false,
-      // noPolitical: this.sliderData.collectedInputData.noPolitical ? this.sliderData.collectedInputData.noPolitical : false,
     }
   },
   mounted: function () {
     this.$nextTick(function () {
-      // Code that will run only after the
-      // entire view has been rendered
+      // Code that will run only after the entire view has been rendered
       console.log('mounted !!! ')
-      this.formData.name = this.sliderData.collectedInputData.name ? this.sliderData.collectedInputData.name : '',
-      this.formData.about = this.sliderData.collectedInputData.about ? this.sliderData.collectedInputData.about : '',
-      this.formData.password = this.sliderData.collectedInputData.password ? this.sliderData.collectedInputData.password : ''
-      this.formData.passwordConfirmation = this.sliderData.collectedInputData.passwordConfirmation ? this.sliderData.collectedInputData.passwordConfirmation : ''
-      this.termsAndConditionsConfirmed = this.sliderData.collectedInputData.termsAndConditionsConfirmed ? this.sliderData.collectedInputData.termsAndConditionsConfirmed : false
-      this.dataPrivacy = this.sliderData.collectedInputData.dataPrivacy ? this.sliderData.collectedInputData.dataPrivacy : false
-      this.minimumAge = this.sliderData.collectedInputData.minimumAge ? this.sliderData.collectedInputData.minimumAge : false
-      this.noCommercial = this.sliderData.collectedInputData.noCommercial ? this.sliderData.collectedInputData.noCommercial : false
-      this.noPolitical = this.sliderData.collectedInputData.noPolitical ? this.sliderData.collectedInputData.noPolitical : false
+      ;(this.formData.name = this.sliderData.collectedInputData.name
+        ? this.sliderData.collectedInputData.name
+        : ''),
+        (this.formData.about = this.sliderData.collectedInputData.about
+          ? this.sliderData.collectedInputData.about
+          : ''),
+        (this.formData.password = this.sliderData.collectedInputData.password
+          ? this.sliderData.collectedInputData.password
+          : '')
+      this.formData.passwordConfirmation = this.sliderData.collectedInputData.passwordConfirmation
+        ? this.sliderData.collectedInputData.passwordConfirmation
+        : ''
+      this.termsAndConditionsConfirmed = this.sliderData.collectedInputData
+        .termsAndConditionsConfirmed
+        ? this.sliderData.collectedInputData.termsAndConditionsConfirmed
+        : false
+      this.dataPrivacy = this.sliderData.collectedInputData.dataPrivacy
+        ? this.sliderData.collectedInputData.dataPrivacy
+        : false
+      this.minimumAge = this.sliderData.collectedInputData.minimumAge
+        ? this.sliderData.collectedInputData.minimumAge
+        : false
+      this.noCommercial = this.sliderData.collectedInputData.noCommercial
+        ? this.sliderData.collectedInputData.noCommercial
+        : false
+      this.noPolitical = this.sliderData.collectedInputData.noPolitical
+        ? this.sliderData.collectedInputData.noPolitical
+        : false
     })
   },
   computed: {
     valid() {
       // console.log('valid !!! this.formData: ', this.formData, ' this.formData.password === this.formData.passwordConfirmation: ', this.formData.password === this.formData.passwordConfirmation)
       // console.log('this.formData.name.length: ', this.formData.name.length, ' this.formData.password.length: ', this.formData.password.length)
-      const isValid = 
+      const isValid =
         // !this.formErrors &&
-        (this.formData.name.length >= 3) &&
-        (this.formData.password.length >= 1) &&
-        (this.formData.password === this.formData.passwordConfirmation) &&
+        this.formData.name.length >= 3 &&
+        this.formData.password.length >= 1 &&
+        this.formData.password === this.formData.passwordConfirmation &&
         this.termsAndConditionsConfirmed &&
         this.dataPrivacy &&
         this.minimumAge &&
@@ -237,14 +241,6 @@ export default {
     },
   },
   watch: {
-    // formData: {
-    //   handler() {
-    //     console.log('formData: ', this.formData)
-    //     this.sendValidation()
-    //   },
-    //   deep: true,
-    //   immediate: true,
-    // },
     formData() {
       console.log('formData: ', this.formData)
       this.sendValidation()
@@ -266,7 +262,7 @@ export default {
     },
   },
   methods: {
-    watchScopedSlotsCallback({errors}) {
+    watchScopedSlotsCallback({ errors }) {
       this.formErrors = errors
       console.log('watchScopedSlotsCallback !!! this.formErrors: ', this.formErrors)
     },
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 65d102f4f..4c6b1113b 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -32,7 +32,9 @@ export default {
     return {
       formData: {
         // inviteCode: this.inviteCode ? this.inviteCode : '',
-        inviteCode: this.sliderData.collectedInputData.inviteCode ? this.sliderData.collectedInputData.inviteCode : '',
+        inviteCode: this.sliderData.collectedInputData.inviteCode
+          ? this.sliderData.collectedInputData.inviteCode
+          : '',
       },
       formSchema: {
         inviteCode: {
@@ -55,7 +57,7 @@ export default {
       const { inviteCode } = this.formData
       // validate in backend
       // toaster
-      this.sliderData.validateCallback(true, { /* email, */inviteCode })
+      this.sliderData.validateCallback(true, { /* email, */ inviteCode })
     },
     handleSubmitVerify() {
       // Wolle const { nonce } = this.formData
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 1fed20045..61c4164d2 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -19,14 +19,14 @@
         </template>
 
         <!-- <template #enter-email> -->
-          <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
-          <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
-          <!-- <signup :invitation="false" @submit="handleSubmitted">
+        <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
+        <!-- <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>
+        <!-- <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> -->
@@ -41,9 +41,9 @@
         </template>
 
         <template #footer>
-            <ds-space margin-bottom="xxx-small" margin-top="small" centered>
-              <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
-            </ds-space>
+          <ds-space margin-bottom="xxx-small" margin-top="small" centered>
+            <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+          </ds-space>
         </template>
       </component-slider>
 
@@ -109,13 +109,13 @@ export default {
           },
           // {
           //   name: 'enter-email',
-            // validated: false,
-            // title: 'E-Mail', // Wolle
-            // button: {
-            //   title: 'Next', // Wolle
-              // icon:           :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
-            //   callback: this.buttonCallback,
-            // },
+          // validated: false,
+          // title: 'E-Mail', // Wolle
+          // button: {
+          //   title: 'Next', // Wolle
+          // icon:           :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
+          //   callback: this.buttonCallback,
+          // },
           // },
           {
             name: 'create-user-account',
diff --git a/webapp/components/Registration/WatchScopedSlotsCallback.vue b/webapp/components/Registration/WatchScopedSlotsCallback.vue
index c23f618ce..7a06d70dd 100644
--- a/webapp/components/Registration/WatchScopedSlotsCallback.vue
+++ b/webapp/components/Registration/WatchScopedSlotsCallback.vue
@@ -1,5 +1,4 @@
-<template>
-</template>
+<template></template>
 
 <script>
 export default {
@@ -22,7 +21,7 @@ export default {
       },
       deep: true,
       immediate: true,
-    }
+    },
   },
   methods: {
     // Wolle
@@ -30,5 +29,4 @@ export default {
 }
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

From fc82f0d29c3da081051659f2e9b6b7f5e45e6867 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 4 Feb 2021 16:18:43 +0100
Subject: [PATCH 20/44] Add input and input-valid events in
 RegistionItemCreateUserAccount

---
 .../RegistrationItemCreateUserAccount.vue     | 65 ++++++++++++-------
 .../RegistrationItemEnterInvite.vue           | 26 +++-----
 .../Registration/WatchScopedSlotsCallback.vue |  4 +-
 3 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index d4b7b8ff4..ce7548699 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -29,9 +29,15 @@
       </ds-heading>
     </ds-space> -->
 
-    <ds-form class="create-user-account" v-model="formData" :schema="formSchema" @submit="submit">
-      <template v-slot="{ errors }">
-        <!-- <template> -->
+    <ds-form class="create-user-account"
+      v-model="formData"
+      :schema="formSchema"
+      @submit="submit"     
+      @input="handleInput"
+      @input-valid="handleInputValid"
+    >
+      <!-- Wolle <template v-slot="{ errors }"> -->
+      <template>
         <ds-input
           id="name"
           model="name"
@@ -108,10 +114,10 @@
           ></label>
         </ds-text>
         <!-- this is neccessary to have the 'errors' status as 'formErrors' in Javascript. I didn't found another way yet -->
-        <watch-scoped-slots-callback
+        <!-- Wolle <watch-scoped-slots-callback
           :scopedData="{ errors }"
           :changeCallback="watchScopedSlotsCallback"
-        ></watch-scoped-slots-callback>
+        ></watch-scoped-slots-callback> -->
         <!-- <base-button
           style="float: right"
           icon="check"
@@ -176,7 +182,7 @@ export default {
         },
         ...passwordForm.formSchema,
       },
-      formErrors: null,
+      // Wolle formErrors: null,
       response: null,
       // TODO: Our styleguide does not support checkmarks.
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
@@ -191,16 +197,16 @@ export default {
   mounted: function () {
     this.$nextTick(function () {
       // Code that will run only after the entire view has been rendered
-      console.log('mounted !!! ')
-      ;(this.formData.name = this.sliderData.collectedInputData.name
+      // console.log('mounted !!! ')
+      this.formData.name = this.sliderData.collectedInputData.name
         ? this.sliderData.collectedInputData.name
-        : ''),
-        (this.formData.about = this.sliderData.collectedInputData.about
-          ? this.sliderData.collectedInputData.about
-          : ''),
-        (this.formData.password = this.sliderData.collectedInputData.password
-          ? this.sliderData.collectedInputData.password
-          : '')
+        : ''
+      this.formData.about = this.sliderData.collectedInputData.about
+        ? this.sliderData.collectedInputData.about
+        : ''
+      this.formData.password = this.sliderData.collectedInputData.password
+        ? this.sliderData.collectedInputData.password
+        : ''
       this.formData.passwordConfirmation = this.sliderData.collectedInputData.passwordConfirmation
         ? this.sliderData.collectedInputData.passwordConfirmation
         : ''
@@ -241,10 +247,10 @@ export default {
     },
   },
   watch: {
-    formData() {
-      console.log('formData: ', this.formData)
-      this.sendValidation()
-    },
+    // formData() {
+    //   console.log('formData: ', this.formData)
+    //   this.sendValidation()
+    // },
     termsAndConditionsConfirmed() {
       this.sendValidation()
     },
@@ -262,10 +268,10 @@ export default {
     },
   },
   methods: {
-    watchScopedSlotsCallback({ errors }) {
-      this.formErrors = errors
-      console.log('watchScopedSlotsCallback !!! this.formErrors: ', this.formErrors)
-    },
+    // Wolle watchScopedSlotsCallback({ errors }) {
+    //   this.formErrors = errors
+    //   console.log('watchScopedSlotsCallback !!! this.formErrors: ', this.formErrors)
+    // },
     sendValidation() {
       const { name, about, password, passwordConfirmation } = this.formData
       // const { email, nonce } = this
@@ -297,6 +303,19 @@ export default {
       console.log('sendValidation !!!', ' this.valid: ', this.valid, ' value: ', value)
       this.sliderData.validateCallback(this.valid, value)
     },
+    async handleInput() {
+      // Wolle console.log('handleInput !!!')
+      // this.sliderData.validateCallback(false)
+      this.sendValidation()
+    },
+    async handleInputValid() {
+      // Wolle console.log('handleInputValid !!!')
+      // const { inviteCode } = this.formData
+      // validate in backend
+      // toaster
+      // this.sliderData.validateCallback(true, { /* email, */ inviteCode })
+      this.sendValidation()
+    },
     async submit() {
       const { name, password, about } = this.formData
       // const { email, nonce } = this
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 4c6b1113b..0e0f186f7 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -26,15 +26,11 @@ export default {
   name: 'RegistrationItemEnterInvite',
   props: {
     sliderData: { type: Object, required: true },
-    // inviteCode: { type: String, required: false },
   },
   data() {
     return {
       formData: {
-        // inviteCode: this.inviteCode ? this.inviteCode : '',
-        inviteCode: this.sliderData.collectedInputData.inviteCode
-          ? this.sliderData.collectedInputData.inviteCode
-          : '',
+        inviteCode: '',
       },
       formSchema: {
         inviteCode: {
@@ -47,6 +43,15 @@ export default {
       },
     }
   },
+  mounted: function () {
+    this.$nextTick(function () {
+      // Code that will run only after the entire view has been rendered
+      // console.log('mounted !!! ')
+      this.formData.inviteCode = this.sliderData.collectedInputData.inviteCode
+        ? this.sliderData.collectedInputData.inviteCode
+        : ''
+    })
+  },
   methods: {
     async handleInput() {
       // Wolle console.log('handleInput !!!')
@@ -61,18 +66,7 @@ export default {
     },
     handleSubmitVerify() {
       // Wolle const { nonce } = this.formData
-      // const email = this.email
-      // this.$emit('nonceEntered', { email, nonce })
-      // this.$emit('validation', { email, nonce })
     },
-    // async handleInputOnStart(inviteCode) {
-    //   if (inviteCode) {
-    //     await this.handleInputValid()
-    //     return inviteCode
-    //   } else {
-    //     return ''
-    //   }
-    // },
   },
 }
 </script>
diff --git a/webapp/components/Registration/WatchScopedSlotsCallback.vue b/webapp/components/Registration/WatchScopedSlotsCallback.vue
index 7a06d70dd..844f7b24b 100644
--- a/webapp/components/Registration/WatchScopedSlotsCallback.vue
+++ b/webapp/components/Registration/WatchScopedSlotsCallback.vue
@@ -1,4 +1,6 @@
-<template></template>
+<template>
+  <div></div>
+</template>
 
 <script>
 export default {

From 9086f9986229c346846636276104210b8f42c48f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 9 Feb 2021 13:31:59 +0100
Subject: [PATCH 21/44] Implement registration slider e-mail, nonce, and
 storybook with preset data

---
 .../RegistrationItemCreateUserAccount.vue     |  10 +-
 .../RegistrationItemEnterEmail.vue            | 197 ++++++++++++++++++
 .../RegistrationItemEnterInvite.vue           |  28 ++-
 .../RegistrationItemEnterNonce.vue            |  86 ++++++++
 .../Registration/RegistrationSlider.story.js  | 158 +++++---------
 .../Registration/RegistrationSlider.vue       | 150 ++++++++-----
 6 files changed, 457 insertions(+), 172 deletions(-)
 create mode 100644 webapp/components/Registration/RegistrationItemEnterEmail.vue
 create mode 100644 webapp/components/Registration/RegistrationItemEnterNonce.vue

diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index ce7548699..420a783f3 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -29,10 +29,11 @@
       </ds-heading>
     </ds-space> -->
 
-    <ds-form class="create-user-account"
+    <ds-form
+      class="create-user-account"
       v-model="formData"
       :schema="formSchema"
-      @submit="submit"     
+      @submit="submit"
       @input="handleInput"
       @input-valid="handleInputValid"
     >
@@ -226,6 +227,7 @@ export default {
       this.noPolitical = this.sliderData.collectedInputData.noPolitical
         ? this.sliderData.collectedInputData.noPolitical
         : false
+      this.sendValidation()
     })
   },
   computed: {
@@ -284,7 +286,7 @@ export default {
         noCommercial,
         noPolitical,
       } = this
-      // const locale = this.$i18n.locale()
+      const locale = this.$i18n.locale()
       const value = {
         name,
         about,
@@ -298,7 +300,7 @@ export default {
         minimumAge,
         noCommercial,
         noPolitical,
-        // locale,
+        locale,
       }
       console.log('sendValidation !!!', ' this.valid: ', this.valid, ' value: ', value)
       this.sliderData.validateCallback(this.valid, value)
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
new file mode 100644
index 000000000..fb4fc4f7e
--- /dev/null
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -0,0 +1,197 @@
+<template>
+  <ds-space v-if="!data && !error" margin="large">
+    <ds-form
+      v-model="formData"
+      :schema="formSchema"
+      @input="handleInput"
+      @input-valid="handleInputValid"
+      @submit="handleSubmit"
+    >
+      <!-- Wolle <h1>
+        {{
+          invitation
+            ? $t('profile.invites.title', metadata)
+            : $t('components.registration.signup.title', metadata)
+        }}
+      </h1> -->
+      <ds-space v-if="token" margin-botton="large">
+        <ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
+      </ds-space>
+      <ds-space margin-botton="large">
+        <ds-text>
+          {{
+            invitation
+              ? $t('profile.invites.description')
+              : $t('components.registration.signup.form.description')
+          }}
+        </ds-text>
+      </ds-space>
+      <ds-input
+        :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
+        type="email"
+        id="email"
+        model="email"
+        name="email"
+        icon="envelope"
+      />
+      <!-- <base-button
+        :disabled="disabled"
+        :loading="$apollo.loading"
+        filled
+        name="submit"
+        type="submit"
+        icon="envelope"
+      >
+        {{ $t('components.registration.signup.form.submit') }}
+      </base-button> -->
+      <slot></slot>
+    </ds-form>
+  </ds-space>
+  <div v-else margin="large">
+    <template v-if="!error">
+      <transition name="ds-transition-fade">
+        <sweetalert-icon icon="info" />
+      </transition>
+      <ds-text align="center" v-html="submitMessage" />
+    </template>
+    <template v-else>
+      <transition name="ds-transition-fade">
+        <sweetalert-icon icon="error" />
+      </transition>
+      <ds-text align="center">{{ error.message }}</ds-text>
+      <ds-space centered class="space-top">
+        <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+      </ds-space>
+    </template>
+  </div>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import metadata from '~/constants/metadata'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
+
+export const SignupMutation = gql`
+  mutation($email: String!) {
+    Signup(email: $email) {
+      email
+    }
+  }
+`
+export const SignupByInvitationMutation = gql`
+  mutation($email: String!, $token: String!) {
+    SignupByInvitation(email: $email, token: $token) {
+      email
+    }
+  }
+`
+export default {
+  name: 'RegistrationItemEnterEmail',
+  components: {
+    SweetalertIcon,
+  },
+  props: {
+    sliderData: { type: Object, required: true },
+    token: { type: String, default: null }, // Wolle not used???
+    invitation: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      metadata,
+      formData: {
+        email: '',
+      },
+      formSchema: {
+        email: {
+          type: 'email',
+          required: true,
+          message: this.$t('common.validations.email'),
+        },
+        // email: [
+        //   { type: 'email', required: true },
+        //   {
+        //     validator(rule, value, callback, source, options) {
+        //       const errors = []
+        //       if (currentEmail === normalizeEmail(value)) {
+        //         errors.push(this.$t('common.validations.email'))
+        //       }
+        //       return errors
+        //     },
+        //   },
+        // ],
+      },
+      // disabled: true,
+      data: null,
+      error: null,
+    }
+  },
+  mounted: function () {
+    this.$nextTick(function () {
+      // Code that will run only after the entire view has been rendered
+      // console.log('mounted !!! ')
+      this.formData.email = this.sliderData.collectedInputData.email
+        ? this.sliderData.collectedInputData.email
+        : ''
+    })
+  },
+  computed: {
+    submitMessage() {
+      const { email } = this.data.Signup
+      return this.$t('components.registration.signup.form.success', { email })
+    },
+    // valid() {
+    //   const isValid =
+    //     this.formData.email.XXX === XXX
+    //   return isValid
+    // },
+  },
+  methods: {
+    handleInput() {
+      // this.disabled = true
+      this.sliderData.validateCallback(false)
+    },
+    handleInputValid() {
+      // this.disabemailled = false
+      const { email } = this.formData
+      // validate in backend?
+      // toaster?
+      console.log('sendValidation !!! email: ', email)
+      this.sliderData.validateCallback(true, { email })
+    },
+    async handleSubmit() {
+      const mutation = this.token ? SignupByInvitationMutation : SignupMutation
+      const { token } = this
+      const { email } = this.formData
+
+      try {
+        const response = await this.$apollo.mutate({ mutation, variables: { email, token } })
+        this.data = response.data
+        setTimeout(() => {
+          this.$emit('submit', { email: this.data.Signup.email })
+        }, 3000)
+      } catch (err) {
+        const { message } = err
+        const mapping = {
+          'A user account with this email already exists': 'email-exists',
+          'Invitation code already used or does not exist': 'invalid-invitation-token',
+        }
+        for (const [pattern, key] of Object.entries(mapping)) {
+          if (message.includes(pattern))
+            this.error = {
+              key,
+              message: this.$t(`components.registration.signup.form.errors.${key}`),
+            }
+        }
+        if (!this.error) {
+          this.$toast.error(message)
+        }
+      }
+    },
+  },
+}
+</script>
+<style>
+.space-top {
+  margin-top: 6ex;
+}
+</style>
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 0e0f186f7..15215b569 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -3,9 +3,9 @@
     class="enter-invite"
     v-model="formData"
     :schema="formSchema"
-    @submit="handleSubmitVerify"
     @input="handleInput"
     @input-valid="handleInputValid"
+    @submit="handleSubmitVerify"
   >
     <ds-input
       :placeholder="$t('components.enter-invite.form.invite-code')"
@@ -46,23 +46,41 @@ export default {
   mounted: function () {
     this.$nextTick(function () {
       // Code that will run only after the entire view has been rendered
-      // console.log('mounted !!! ')
+      console.log('mounted !!! this.sliderData.collectedInputData.inviteCode: ', this.sliderData.collectedInputData.inviteCode)
       this.formData.inviteCode = this.sliderData.collectedInputData.inviteCode
         ? this.sliderData.collectedInputData.inviteCode
         : ''
+      this.sendValidation()
     })
   },
+  computed: {
+    valid() {
+      const isValid =
+        this.formData.inviteCode.length === 6
+      return isValid
+    },
+  },
   methods: {
+    sendValidation() {
+      const { inviteCode } = this.formData
+      const value = {
+        inviteCode,
+      }
+      console.log('sendValidation !!! value: ', value)
+      this.sliderData.validateCallback(this.valid, value)
+    },
     async handleInput() {
       // Wolle console.log('handleInput !!!')
-      this.sliderData.validateCallback(false)
+      // this.sliderData.validateCallback(false)
+      this.sendValidation()
     },
     async handleInputValid() {
       // Wolle console.log('handleInputValid !!!')
-      const { inviteCode } = this.formData
+      // const { inviteCode } = this.formData
       // validate in backend
       // toaster
-      this.sliderData.validateCallback(true, { /* email, */ inviteCode })
+      // this.sliderData.validateCallback(true, { /* email, */ inviteCode })
+      this.sendValidation()
     },
     handleSubmitVerify() {
       // Wolle const { nonce } = this.formData
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
new file mode 100644
index 000000000..3e95c8d03
--- /dev/null
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -0,0 +1,86 @@
+<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>
+    <!-- <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: 'RegistrationItemEnterNonce',
+  props: {
+    sliderData: { type: Object, 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,
+    }
+  },
+  mounted: function () {
+    this.$nextTick(function () {
+      // Code that will run only after the entire view has been rendered
+      // console.log('mounted !!! ')
+      this.formData.nonce = this.sliderData.collectedInputData.nonce
+        ? this.sliderData.collectedInputData.nonce
+        : ''
+    })
+  },
+  methods: {
+    async handleInput() {
+      // this.disabled = true
+      this.sliderData.validateCallback(false)
+    },
+    async handleInputValid() {
+      // this.disabled = false
+      const { nonce } = this.formData
+      // validate in backend?
+      // toaster?
+      this.sliderData.validateCallback(true, { nonce })
+    },
+    handleSubmitVerify() {
+      // const { nonce } = this.formData
+      // const email = this.email
+      // this.$emit('nonceEntered', { 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.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index 0bf6d5932..56990cccf 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -5,123 +5,63 @@ import helpers from '~/storybook/helpers'
 
 helpers.init()
 
-// Wolle export const searchResults = [
-//   {
-//     id: 'post-by-jenny',
-//     __typename: 'Post',
-//     slug: 'user-post-by-jenny',
-//     title: 'User Post by Jenny',
-//     value: 'User Post by Jenny',
-//     shoutedCount: 0,
-//     commentsCount: 4,
-//     createdAt: '2019-11-13T03:03:16.155Z',
-//     author: {
-//       id: 'u3',
-//       name: 'Jenny Rostock',
-//       slug: 'jenny-rostock',
-//     },
-//   },
-//   {
-//     id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
-//     __typename: 'Post',
-//     slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
-//     title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
-//     value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
-//     shoutedCount: 0,
-//     commentsCount: 0,
-//     createdAt: '2019-11-13T03:00:45.478Z',
-//     author: {
-//       id: 'u6',
-//       name: 'Louie',
-//       slug: 'louie',
-//     },
-//   },
-//   {
-//     id: 'p7',
-//     __typename: 'Post',
-//     slug: 'this-is-post-7',
-//     title: 'This is post #7',
-//     value: 'This is post #7',
-//     shoutedCount: 1,
-//     commentsCount: 1,
-//     createdAt: '2019-11-13T03:00:23.098Z',
-//     author: {
-//       id: 'u6',
-//       name: 'Louie',
-//       slug: 'louie',
-//     },
-//   },
-//   {
-//     id: 'p12',
-//     __typename: 'Post',
-//     slug: 'this-is-post-12',
-//     title: 'This is post #12',
-//     value: 'This is post #12',
-//     shoutedCount: 0,
-//     commentsCount: 12,
-//     createdAt: '2019-11-13T03:00:23.098Z',
-//     author: {
-//       id: 'u6',
-//       name: 'Louie',
-//       slug: 'louie',
-//     },
-//   },
-//   {
-//     id: 'u1',
-//     __typename: 'User',
-//     avatar: {
-//       url:
-//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
-//     },
-//     name: 'Peter Lustig',
-//     slug: 'peter-lustig',
-//   },
-//   {
-//     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
-//     __typename: 'User',
-//     avatar: {
-//       url:
-//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
-//     },
-//     name: 'Herbert Schultz',
-//     slug: 'herbert-schultz',
-//   },
-//   {
-//     id: 'u2',
-//     __typename: 'User',
-//     avatar: {
-//       url:
-//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
-//     },
-//     name: 'Bob der Baumeister',
-//     slug: 'bob-der-baumeister',
-//   },
-//   {
-//     id: '7b654f72-f4da-4315-8bed-39de0859754b',
-//     __typename: 'User',
-//     avatar: {
-//       url:
-//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
-//     },
-//     name: 'Tonya Mohr',
-//     slug: 'tonya-mohr',
-//   },
-//   {
-//     id: 'Hashtag',
-//     __typename: 'Tag',
-//   },
-// ]
-
 storiesOf('RegistrationSlider', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
-  .add('standard', () => ({
+  .add('invite-code empty', () => ({
     components: { RegistrationSlider },
     store: helpers.store,
     data: () => ({
       // Wolle searchResults,
     }),
     template: `
-      <registration-slider />
+      <registration-slider registrationType="invite-code" />
+    `,
+  }))
+  .add('invite-code with data', () => ({
+    components: { RegistrationSlider },
+    store: helpers.store,
+    data: () => ({
+      overwriteSliderData: {
+        collectedInputData: {
+          inviteCode: 'IN1T6Y',
+          email: 'wolle.huss@pjannto.com',
+          nonce: 'NTRSCZ',
+          name: 'Wolle',
+          password: 'Hello',
+          passwordConfirmation: 'Hello',
+          about: `Hey`,
+          termsAndConditionsAgreedVersion: null,
+          termsAndConditionsConfirmed: true,
+          dataPrivacy: true,
+          minimumAge: true,
+          noCommercial: true,
+          noPolitical: true,
+          locale: null,
+        },
+      },
+    }),
+    template: `
+      <registration-slider registrationType="invite-code" :overwriteSliderData="overwriteSliderData" />
+    `,
+  }))
+  .add('public-registration', () => ({
+    components: { RegistrationSlider },
+    store: helpers.store,
+    data: () => ({
+      // Wolle searchResults,
+    }),
+    template: `
+      <registration-slider registrationType="public-registration" />
+    `,
+  }))
+  .add('invite-mail', () => ({
+    components: { RegistrationSlider },
+    store: helpers.store,
+    data: () => ({
+      // Wolle searchResults,
+    }),
+    template: `
+      <registration-slider registrationType="invite-mail" />
     `,
   }))
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 61c4164d2..c77f4b8d2 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -14,23 +14,25 @@
           </ds-heading>
         </template>
 
-        <template #enter-invite>
+        <template v-if="['invite-code'].includes(registrationType)" #enter-invite>
           <registration-item-enter-invite :sliderData="sliderData" />
         </template>
 
-        <!-- <template #enter-email> -->
-        <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
-        <!-- <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>
-            <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
+          v-if="['invite-code', 'public-registration'].includes(registrationType)"
+          #enter-email
+        >
+          <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
+          <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
+          <registration-item-enter-email :invitation="false" :sliderData="sliderData" />
+        </template>
+
+        <template
+          v-if="['invite-code', 'public-registration', 'invite-mail'].includes(registrationType)"
+          #enter-nonce
+        >
+          <registration-item-enter-nonce :sliderData="sliderData" />
+        </template>
 
         <template #create-user-account>
           <registration-item-create-user-account
@@ -58,11 +60,12 @@
 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 LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import RegistrationItemCreateUserAccount from './RegistrationItemCreateUserAccount'
+import RegistrationItemEnterEmail from '~/components/Registration/RegistrationItemEnterEmail'
+import RegistrationItemEnterInvite from './RegistrationItemEnterInvite'
+import RegistrationItemEnterNonce from './RegistrationItemEnterNonce'
 
 export default {
   name: 'RegistrationSlider',
@@ -70,11 +73,80 @@ export default {
     ComponentSlider,
     HcEmpty,
     LocaleSwitch,
-    RegistrationItemEnterInvite,
     RegistrationItemCreateUserAccount,
-    Signup,
+    RegistrationItemEnterEmail,
+    RegistrationItemEnterInvite,
+    RegistrationItemEnterNonce,
+  },
+  props: {
+    registrationType: { type: String, required: true },
+    overwriteSliderData: { type: Object, default: () => {} },
   },
   data() {
+    const slidersPortfolio = [
+      {
+        name: 'enter-invite',
+        // title: this.$t('components.registration.create-user-account.title'),
+        title: 'Invitation', // Wolle
+        validated: false,
+        button: {
+          title: 'Next', // Wolle
+          icon: 'arrow-right',
+          callback: this.buttonCallback,
+        },
+      },
+      {
+        name: 'enter-email',
+        title: 'E-Mail', // Wolle
+        validated: false,
+        button: {
+          title: 'Send E-Mail', // Wolle
+          icon: 'envelope',
+          callback: this.buttonCallback,
+        },
+      },
+      {
+        name: 'enter-nonce',
+        title: 'E-Mail Confirmation', // Wolle
+        validated: false,
+        button: {
+          title: 'Confirm', // Wolle
+          icon: 'arrow-right',
+          callback: this.buttonCallback,
+        },
+      },
+      {
+        name: 'create-user-account',
+        title: this.$t('components.registration.create-user-account.title'),
+        validated: false,
+        button: {
+          // title: this.$t('actions.save'), // Wolle
+          title: 'Create', // Wolle
+          icon: 'check',
+          callback: this.buttonCallback,
+        },
+      },
+    ]
+    // Wolle console.log('this.registrationType: ', this.registrationType)
+    let sliders = []
+    switch (this.registrationType) {
+      case 'invite-code':
+        sliders = [
+          slidersPortfolio[0],
+          slidersPortfolio[1],
+          slidersPortfolio[2],
+          slidersPortfolio[3],
+        ]
+        break
+      case 'public-registration':
+        sliders = [slidersPortfolio[1], slidersPortfolio[2], slidersPortfolio[3]]
+        break
+      case 'invite-mail':
+        sliders = [slidersPortfolio[2], slidersPortfolio[3]]
+        break
+    }
+    // let sliders = slidersPortfolio
+
     return {
       links,
       metadata,
@@ -84,7 +156,8 @@ export default {
           email: null,
           nonce: null,
           name: null,
-          // password: null,
+          password: null,
+          passwordConfirmation: null,
           about: null,
           termsAndConditionsAgreedVersion: null,
           termsAndConditionsConfirmed: null,
@@ -92,44 +165,13 @@ export default {
           minimumAge: null,
           noCommercial: null,
           noPolitical: null,
-          // locale: null, // Wolle: what to do? Is collected in the last slider?! and gets stored in the database …
+          locale: null, // Wolle: what to do? Is collected in the last slider?! and gets stored in the database …
         },
         sliderIndex: 0,
-        sliders: [
-          {
-            name: 'enter-invite',
-            // title: this.$t('components.registration.create-user-account.title'),
-            title: 'Invitation', // Wolle
-            validated: false,
-            button: {
-              title: 'Next', // Wolle
-              icon: 'arrow-right',
-              callback: this.buttonCallback,
-            },
-          },
-          // {
-          //   name: 'enter-email',
-          // validated: false,
-          // title: 'E-Mail', // Wolle
-          // button: {
-          //   title: 'Next', // Wolle
-          // icon:           :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
-          //   callback: this.buttonCallback,
-          // },
-          // },
-          {
-            name: 'create-user-account',
-            title: this.$t('components.registration.create-user-account.title'),
-            validated: false,
-            button: {
-              title: this.$t('actions.save'), // Wolle
-              icon: 'check',
-              callback: this.buttonCallback,
-            },
-          },
-        ],
+        sliders: sliders,
         sliderSelectorCallback: this.sliderSelectorCallback,
         validateCallback: this.validateCallback,
+        ...this.overwriteSliderData,
       },
     }
   },

From 756def9cf99c7f05248969535ceacf71f8c96b6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 9 Feb 2021 15:10:11 +0100
Subject: [PATCH 22/44] Add explicit validations for preset values

- Show e-mail address.
---
 .../RegistrationItemCreateUserAccount.vue     | 13 ++--
 .../RegistrationItemEnterEmail.vue            | 48 ++++++++-------
 .../RegistrationItemEnterInvite.vue           |  2 +-
 .../RegistrationItemEnterNonce.vue            | 29 ++++++++-
 .../Registration/RegistrationSlider.story.js  | 61 ++++++++++++++++++-
 .../Registration/RegistrationSlider.vue       |  8 +++
 6 files changed, 130 insertions(+), 31 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index 420a783f3..e7e7f8384 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -68,7 +68,13 @@
           autocomplete="off"
           :label="$t('settings.security.change-password.label-new-password-confirm')"
         />
-        <password-strength :password="formData.password" />
+        <password-strength class="password-strength" :password="formData.password" />
+
+        <ds-text>
+          <!-- Wolle {{ $t('components.enter-nonce.form.description') }} -->
+          Your e-mail address:
+          <b>{{ this.sliderData.collectedInputData.email }}</b>
+        </ds-text>
 
         <ds-text>
           <input
@@ -353,8 +359,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.create-account-image {
-  width: 50%;
-  max-width: 200px;
+.password-strength {
+  margin-bottom: 14px;
 }
 </style>
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index fb4fc4f7e..247216a2e 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -69,6 +69,8 @@
 <script>
 import gql from 'graphql-tag'
 import metadata from '~/constants/metadata'
+import { isEmail } from 'validator'
+import normalizeEmail from '~/components/utils/NormalizeEmail'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 
 export const SignupMutation = gql`
@@ -107,18 +109,6 @@ export default {
           required: true,
           message: this.$t('common.validations.email'),
         },
-        // email: [
-        //   { type: 'email', required: true },
-        //   {
-        //     validator(rule, value, callback, source, options) {
-        //       const errors = []
-        //       if (currentEmail === normalizeEmail(value)) {
-        //         errors.push(this.$t('common.validations.email'))
-        //       }
-        //       return errors
-        //     },
-        //   },
-        // ],
       },
       // disabled: true,
       data: null,
@@ -132,6 +122,7 @@ export default {
       this.formData.email = this.sliderData.collectedInputData.email
         ? this.sliderData.collectedInputData.email
         : ''
+      this.sendValidation()
     })
   },
   computed: {
@@ -139,24 +130,39 @@ export default {
       const { email } = this.data.Signup
       return this.$t('components.registration.signup.form.success', { email })
     },
-    // valid() {
-    //   const isValid =
-    //     this.formData.email.XXX === XXX
-    //   return isValid
-    // },
+    valid() {
+      let isValid
+      if (isEmail(this.formData.email)) {
+        this.formData.email = normalizeEmail(this.formData.email)
+        isValid = true
+      } else {
+        isValid = false
+      }
+      return isValid
+    },
   },
   methods: {
+    sendValidation() {
+      const { email } = this.formData
+      const value = {
+        email,
+      }
+      // console.log('sendValidation !!! value: ', value)
+      this.sliderData.validateCallback(this.valid, value)
+    },
     handleInput() {
       // this.disabled = true
-      this.sliderData.validateCallback(false)
+      // this.sliderData.validateCallback(false)
+      this.sendValidation()
     },
     handleInputValid() {
       // this.disabemailled = false
-      const { email } = this.formData
+      // const { email } = this.formData
       // validate in backend?
       // toaster?
-      console.log('sendValidation !!! email: ', email)
-      this.sliderData.validateCallback(true, { email })
+      // console.log('sendValidation !!! email: ', email)
+      // this.sliderData.validateCallback(true, { email })
+      this.sendValidation()
     },
     async handleSubmit() {
       const mutation = this.token ? SignupByInvitationMutation : SignupMutation
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 15215b569..0218ecd4f 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -66,7 +66,7 @@ export default {
       const value = {
         inviteCode,
       }
-      console.log('sendValidation !!! value: ', value)
+      // console.log('sendValidation !!! value: ', value)
       this.sliderData.validateCallback(this.valid, value)
     },
     async handleInput() {
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index 3e95c8d03..c1c7c6875 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -7,6 +7,11 @@
     @input="handleInput"
     @input-valid="handleInputValid"
   >
+    <ds-text>
+      <!-- Wolle {{ $t('components.enter-nonce.form.description') }} -->
+      Your e-mail address:
+      <b>{{ this.sliderData.collectedInputData.email }}</b>
+    </ds-text>
     <ds-input
       :placeholder="$t('components.enter-nonce.form.nonce')"
       model="nonce"
@@ -54,19 +59,37 @@ export default {
       this.formData.nonce = this.sliderData.collectedInputData.nonce
         ? this.sliderData.collectedInputData.nonce
         : ''
+      this.sendValidation()
     })
   },
+  computed: {
+    valid() {
+      const isValid =
+        this.formData.nonce.length === 6
+      return isValid
+    },
+  },
   methods: {
+    sendValidation() {
+      const { nonce } = this.formData
+      const value = {
+        nonce,
+      }
+      // console.log('sendValidation !!! value: ', value)
+      this.sliderData.validateCallback(this.valid, value)
+    },
     async handleInput() {
       // this.disabled = true
-      this.sliderData.validateCallback(false)
+      // this.sliderData.validateCallback(false)
+      this.sendValidation()
     },
     async handleInputValid() {
       // this.disabled = false
-      const { nonce } = this.formData
+      // const { nonce } = this.formData
       // validate in backend?
       // toaster?
-      this.sliderData.validateCallback(true, { nonce })
+      // this.sliderData.validateCallback(true, { nonce })
+      this.sendValidation()
     },
     handleSubmitVerify() {
       // const { nonce } = this.formData
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index 56990cccf..1ddf471b0 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -26,6 +26,7 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: 'IN1T6Y',
           email: 'wolle.huss@pjannto.com',
+          emailSend: true,
           nonce: 'NTRSCZ',
           name: 'Wolle',
           password: 'Hello',
@@ -45,7 +46,7 @@ storiesOf('RegistrationSlider', module)
       <registration-slider registrationType="invite-code" :overwriteSliderData="overwriteSliderData" />
     `,
   }))
-  .add('public-registration', () => ({
+  .add('public-registration empty', () => ({
     components: { RegistrationSlider },
     store: helpers.store,
     data: () => ({
@@ -55,7 +56,35 @@ storiesOf('RegistrationSlider', module)
       <registration-slider registrationType="public-registration" />
     `,
   }))
-  .add('invite-mail', () => ({
+  .add('public-registration with data', () => ({
+    components: { RegistrationSlider },
+    store: helpers.store,
+    data: () => ({
+      overwriteSliderData: {
+        collectedInputData: {
+          inviteCode: null,
+          email: 'wolle.huss@pjannto.com',
+          emailSend: false,
+          nonce: 'NTRSCZ',
+          name: 'Wolle',
+          password: 'Hello',
+          passwordConfirmation: 'Hello',
+          about: `Hey`,
+          termsAndConditionsAgreedVersion: null,
+          termsAndConditionsConfirmed: true,
+          dataPrivacy: true,
+          minimumAge: true,
+          noCommercial: true,
+          noPolitical: true,
+          locale: null,
+        },
+      },
+    }),
+    template: `
+      <registration-slider registrationType="public-registration" :overwriteSliderData="overwriteSliderData" />
+    `,
+  }))
+  .add('invite-mail empty', () => ({
     components: { RegistrationSlider },
     store: helpers.store,
     data: () => ({
@@ -65,3 +94,31 @@ storiesOf('RegistrationSlider', module)
       <registration-slider registrationType="invite-mail" />
     `,
   }))
+  .add('invite-mail with data', () => ({
+    components: { RegistrationSlider },
+    store: helpers.store,
+    data: () => ({
+      overwriteSliderData: {
+        collectedInputData: {
+          inviteCode: null,
+          email: 'wolle.huss@pjannto.com',
+          emailSend: null,
+          nonce: 'NTRSCZ',
+          name: 'Wolle',
+          password: 'Hello',
+          passwordConfirmation: 'Hello',
+          about: `Hey`,
+          termsAndConditionsAgreedVersion: null,
+          termsAndConditionsConfirmed: true,
+          dataPrivacy: true,
+          minimumAge: true,
+          noCommercial: true,
+          noPolitical: true,
+          locale: null,
+        },
+      },
+    }),
+    template: `
+      <registration-slider registrationType="invite-mail" :overwriteSliderData="overwriteSliderData" />
+    `,
+  }))
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index c77f4b8d2..621318a4c 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -100,6 +100,7 @@ export default {
         title: 'E-Mail', // Wolle
         validated: false,
         button: {
+          // title: this.sliderData.collectedInputData.emailSend ? 'Resend E-Mail' : 'Send E-Mail', // Wolle
           title: 'Send E-Mail', // Wolle
           icon: 'envelope',
           callback: this.buttonCallback,
@@ -154,6 +155,7 @@ export default {
         collectedInputData: {
           inviteCode: null,
           email: null,
+          emailSend: null,
           nonce: null,
           name: null,
           password: null,
@@ -196,6 +198,12 @@ export default {
       }
     },
     buttonCallback() {
+      if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
+        console.log('buttonCallback !!! enter-email')
+        this.sliderData.collectedInputData.emailSend = true
+        this.sliderData.sliders[this.sliderIndex].button.title = 'Resend E-Mail' // Wolle
+      }
+
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {
         // console.log('submit data: ', this.sliderData.collectedInputData)
       } else {

From 92e34a3bb1609f051d4dd53f1f7344165638342d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 9 Feb 2021 15:20:51 +0100
Subject: [PATCH 23/44] Fix terms and conditions, and data privacy

---
 webapp/locales/de.json | 4 ++--
 webapp/locales/en.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 077b8002c..044ea0a10 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -163,7 +163,7 @@
       },
       "signup": {
         "form": {
-          "data-privacy": "Ich habe die <a href=\"/data-privacy\" target=\"_blank\"><ds-text bold color=\"primary\">Datenschutzerklärung</ds-text></a> gelesen und verstanden",
+          "data-privacy": "Ich habe die Datenschutzerklärung gelesen und verstanden.",
           "description": "Um loszulegen, kannst Du Dich hier kostenfrei registrieren:",
           "errors": {
             "email-exists": "Es gibt schon ein Benutzerkonto mit dieser E-Mail-Adresse!",
@@ -738,7 +738,7 @@
     "bank": "Bankverbindung",
     "code-of-conduct": "Verhaltenscodex",
     "contact": "Kontakt",
-    "data-privacy": "Datenschutz",
+    "data-privacy": "Datenschutzerklärung",
     "director": "Geschäftsführer",
     "error-occurred": "Ein Fehler ist aufgetreten.",
     "faq": "FAQ",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index fda12c740..27e71e29d 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -163,7 +163,7 @@
       },
       "signup": {
         "form": {
-          "data-privacy": "I have read and understood the <a href=\"/data-privacy\" target=\"_blank\"><ds-text bold color=\"primary\">Privacy Statement</ds-text></a>.",
+          "data-privacy": "I have read and understood the privacy statement.",
           "description": "To get started, you can register here for free:",
           "errors": {
             "email-exists": "There is already a user account with this e-mail address!",
@@ -767,7 +767,7 @@
   "termsAndConditions": {
     "agree": "I agree!",
     "newTermsAndConditions": "New Terms and Conditions",
-    "termsAndConditionsConfirmed": "I have read and confirmed the Terms and Conditions.",
+    "termsAndConditionsConfirmed": "I have read and confirmed the terms and conditions.",
     "termsAndConditionsNewConfirm": "I have read and agree to the new terms of conditions.",
     "termsAndConditionsNewConfirmText": "Please read the new terms of use now!"
   },

From 220dba24ff0a13a5092c323fcca1a98ac5788d86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 9 Feb 2021 15:41:11 +0100
Subject: [PATCH 24/44] Clean up

---
 .../ComponentSlider/ComponentSlider.vue       | 34 -------------------
 .../RegistrationItemEnterEmail.vue            | 20 +++++------
 .../Registration/RegistrationSlider.story.js  | 24 +++++++++++--
 3 files changed, 29 insertions(+), 49 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 1be5c1371..ececc1aa8 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -59,52 +59,18 @@ export default {
     },
   },
   methods: {
-    // Wolle sliderIndexByName(name) {
-    //   return this.sliderData.sliders.findIndex((slider) => slider.name === name)
-    // },
   },
 }
 </script>
 
 <style lang="scss">
 .Sliders {
-  // Wolle position: relative;
-  // background-color: #fff;
-  // height: 100%;
-  // display: flex;
-  // margin: 0;
-  // padding: 0;
-  // list-style: none;
-  // .selection-dot {
-  //   margin-right: 5px;
-  //   // &:hover {
-  //   //   border-bottom: none;
-  //   // }
-  // }
-
   &__slider-selection {
-    // padding-top: 5px;
-    // margin-right: 5px;
-
-    // text-align: center;
-    // height: 100%;
-    // flex-grow: 1;
-
-    // &:hover {
-    //   border-bottom: 2px solid #c9c6ce;
-    // }
-
     .selection-dot {
       margin-right: 2px;
     }
-    // &.--active {
-    //   border-bottom: 2px solid #17b53f;
-    // }
     &.--confirmed {
       opacity: $opacity-disabled;
-      // &:hover {
-      //   border-bottom: none;
-      // }
     }
   }
 }
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index 247216a2e..b43519200 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -14,18 +14,14 @@
             : $t('components.registration.signup.title', metadata)
         }}
       </h1> -->
-      <ds-space v-if="token" margin-botton="large">
-        <ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
-      </ds-space>
-      <ds-space margin-botton="large">
-        <ds-text>
-          {{
-            invitation
-              ? $t('profile.invites.description')
-              : $t('components.registration.signup.form.description')
-          }}
-        </ds-text>
-      </ds-space>
+      <ds-text v-if="token" v-html="$t('registration.signup.form.invitation-code', { code: token })" />
+      <ds-text>
+        {{
+          invitation
+            ? $t('profile.invites.description')
+            : $t('components.registration.signup.form.description')
+        }}
+      </ds-text>
       <ds-input
         :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
         type="email"
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index 1ddf471b0..579158388 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -64,7 +64,7 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: null,
           email: 'wolle.huss@pjannto.com',
-          emailSend: false,
+          emailSend: true,
           nonce: 'NTRSCZ',
           name: 'Wolle',
           password: 'Hello',
@@ -88,10 +88,28 @@ storiesOf('RegistrationSlider', module)
     components: { RegistrationSlider },
     store: helpers.store,
     data: () => ({
-      // Wolle searchResults,
+      overwriteSliderData: {
+        collectedInputData: {
+          inviteCode: null,
+          email: 'wolle.huss@pjannto.com',
+          emailSend: true,
+          nonce: null,
+          name: null,
+          password: null,
+          passwordConfirmation: null,
+          about: null,
+          termsAndConditionsAgreedVersion: null,
+          termsAndConditionsConfirmed: null,
+          dataPrivacy: null,
+          minimumAge: null,
+          noCommercial: null,
+          noPolitical: null,
+          locale: null,
+        },
+      },
     }),
     template: `
-      <registration-slider registrationType="invite-mail" />
+      <registration-slider registrationType="invite-mail" :overwriteSliderData="overwriteSliderData" />
     `,
   }))
   .add('invite-mail with data', () => ({

From 97aa5ea07c4ba79cdf96272d3fc2bc03bb149ec8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 9 Feb 2021 16:59:33 +0100
Subject: [PATCH 25/44] Fix flaky reward backend test

---
 backend/src/schema/resolvers/rewards.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/backend/src/schema/resolvers/rewards.spec.js b/backend/src/schema/resolvers/rewards.spec.js
index a20472243..eaaa852ec 100644
--- a/backend/src/schema/resolvers/rewards.spec.js
+++ b/backend/src/schema/resolvers/rewards.spec.js
@@ -16,6 +16,7 @@ describe('rewards', () => {
   }
 
   beforeAll(async () => {
+    await cleanDatabase()
     const { server } = createServer({
       context: () => {
         return {

From 197e6ab6d78914e5d08f11dd99594031e1fdbe1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 10 Feb 2021 14:55:25 +0100
Subject: [PATCH 26/44] Clean up

---
 .../RegistrationItemCreateUserAccount.vue     | 40 +++----------------
 .../RegistrationItemEnterEmail.vue            |  2 +-
 .../RegistrationItemEnterInvite.vue           | 10 +----
 .../RegistrationItemEnterNonce.vue            |  2 +-
 .../Registration/RegistrationSlider.story.js  |  2 -
 .../Registration/RegistrationSlider.vue       |  1 -
 .../Registration/WatchScopedSlotsCallback.vue | 34 ----------------
 7 files changed, 9 insertions(+), 82 deletions(-)
 delete mode 100644 webapp/components/Registration/WatchScopedSlotsCallback.vue

diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index e7e7f8384..3c945c7d2 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -37,7 +37,7 @@
       @input="handleInput"
       @input-valid="handleInputValid"
     >
-      <!-- Wolle <template v-slot="{ errors }"> -->
+      <!-- <template v-slot="{ errors }"> --> <!-- leave this here in case the scoped variable is needed in the future nobody would remember this -->
       <template>
         <ds-input
           id="name"
@@ -120,12 +120,7 @@
             v-html="$t('components.registration.signup.form.no-political')"
           ></label>
         </ds-text>
-        <!-- this is neccessary to have the 'errors' status as 'formErrors' in Javascript. I didn't found another way yet -->
-        <!-- Wolle <watch-scoped-slots-callback
-          :scopedData="{ errors }"
-          :changeCallback="watchScopedSlotsCallback"
-        ></watch-scoped-slots-callback> -->
-        <!-- <base-button
+        <!-- Wolle <base-button
           style="float: right"
           icon="check"
           type="submit"
@@ -151,7 +146,6 @@
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import links from '~/constants/links'
 import emails from '~/constants/emails'
-import WatchScopedSlotsCallback from './WatchScopedSlotsCallback'
 import PasswordStrength from '../Password/Strength'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 import PasswordForm from '~/components/utils/PasswordFormHelper'
@@ -162,7 +156,6 @@ export default {
   components: {
     PasswordStrength,
     SweetalertIcon,
-    WatchScopedSlotsCallback,
   },
   props: {
     sliderData: { type: Object, required: true },
@@ -189,7 +182,6 @@ export default {
         },
         ...passwordForm.formSchema,
       },
-      // Wolle formErrors: null,
       response: null,
       // TODO: Our styleguide does not support checkmarks.
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
@@ -204,7 +196,6 @@ export default {
   mounted: function () {
     this.$nextTick(function () {
       // Code that will run only after the entire view has been rendered
-      // console.log('mounted !!! ')
       this.formData.name = this.sliderData.collectedInputData.name
         ? this.sliderData.collectedInputData.name
         : ''
@@ -238,10 +229,7 @@ export default {
   },
   computed: {
     valid() {
-      // console.log('valid !!! this.formData: ', this.formData, ' this.formData.password === this.formData.passwordConfirmation: ', this.formData.password === this.formData.passwordConfirmation)
-      // console.log('this.formData.name.length: ', this.formData.name.length, ' this.formData.password.length: ', this.formData.password.length)
       const isValid =
-        // !this.formErrors &&
         this.formData.name.length >= 3 &&
         this.formData.password.length >= 1 &&
         this.formData.password === this.formData.passwordConfirmation &&
@@ -255,10 +243,6 @@ export default {
     },
   },
   watch: {
-    // formData() {
-    //   console.log('formData: ', this.formData)
-    //   this.sendValidation()
-    // },
     termsAndConditionsConfirmed() {
       this.sendValidation()
     },
@@ -276,14 +260,8 @@ export default {
     },
   },
   methods: {
-    // Wolle watchScopedSlotsCallback({ errors }) {
-    //   this.formErrors = errors
-    //   console.log('watchScopedSlotsCallback !!! this.formErrors: ', this.formErrors)
-    // },
     sendValidation() {
       const { name, about, password, passwordConfirmation } = this.formData
-      // const { email, nonce } = this
-      // const { email, nonce } = this.sliderData.collectedInputData
       const termsAndConditionsAgreedVersion = VERSION
       const {
         termsAndConditionsConfirmed,
@@ -298,8 +276,6 @@ export default {
         about,
         password,
         passwordConfirmation,
-        // email,
-        // nonce,
         termsAndConditionsAgreedVersion,
         termsAndConditionsConfirmed,
         dataPrivacy,
@@ -308,25 +284,19 @@ export default {
         noPolitical,
         locale,
       }
-      console.log('sendValidation !!!', ' this.valid: ', this.valid, ' value: ', value)
+      // Wolle validate in backend
+      // toaster
       this.sliderData.validateCallback(this.valid, value)
     },
     async handleInput() {
-      // Wolle console.log('handleInput !!!')
-      // this.sliderData.validateCallback(false)
       this.sendValidation()
     },
     async handleInputValid() {
-      // Wolle console.log('handleInputValid !!!')
-      // const { inviteCode } = this.formData
-      // validate in backend
-      // toaster
-      // this.sliderData.validateCallback(true, { /* email, */ inviteCode })
       this.sendValidation()
     },
     async submit() {
       const { name, password, about } = this.formData
-      // const { email, nonce } = this
+      // Wolle const { email, nonce } = this
       const { email, nonce } = this.sliderData.collectedInputData
       const termsAndConditionsAgreedVersion = VERSION
       const locale = this.$i18n.locale()
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index b43519200..30daea695 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -30,7 +30,7 @@
         name="email"
         icon="envelope"
       />
-      <!-- <base-button
+      <!-- Wolle <base-button
         :disabled="disabled"
         :loading="$apollo.loading"
         filled
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 0218ecd4f..b2848ad81 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -66,20 +66,14 @@ export default {
       const value = {
         inviteCode,
       }
-      // console.log('sendValidation !!! value: ', value)
+      // validate in backend
+      // toaster
       this.sliderData.validateCallback(this.valid, value)
     },
     async handleInput() {
-      // Wolle console.log('handleInput !!!')
-      // this.sliderData.validateCallback(false)
       this.sendValidation()
     },
     async handleInputValid() {
-      // Wolle console.log('handleInputValid !!!')
-      // const { inviteCode } = this.formData
-      // validate in backend
-      // toaster
-      // this.sliderData.validateCallback(true, { /* email, */ inviteCode })
       this.sendValidation()
     },
     handleSubmitVerify() {
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index c1c7c6875..25006779c 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -22,7 +22,7 @@
     <ds-text>
       {{ $t('components.enter-nonce.form.description') }}
     </ds-text>
-    <!-- <base-button :disabled="disabled" filled name="submit" type="submit">
+    <!-- Wolle <base-button :disabled="disabled" filled name="submit" type="submit">
       {{ $t('components.enter-nonce.form.next') }}
     </base-button> -->
     <slot></slot>
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index 579158388..fe5ad9b5d 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -12,7 +12,6 @@ storiesOf('RegistrationSlider', module)
     components: { RegistrationSlider },
     store: helpers.store,
     data: () => ({
-      // Wolle searchResults,
     }),
     template: `
       <registration-slider registrationType="invite-code" />
@@ -50,7 +49,6 @@ storiesOf('RegistrationSlider', module)
     components: { RegistrationSlider },
     store: helpers.store,
     data: () => ({
-      // Wolle searchResults,
     }),
     template: `
       <registration-slider registrationType="public-registration" />
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 621318a4c..0a639145b 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -128,7 +128,6 @@ export default {
         },
       },
     ]
-    // Wolle console.log('this.registrationType: ', this.registrationType)
     let sliders = []
     switch (this.registrationType) {
       case 'invite-code':
diff --git a/webapp/components/Registration/WatchScopedSlotsCallback.vue b/webapp/components/Registration/WatchScopedSlotsCallback.vue
deleted file mode 100644
index 844f7b24b..000000000
--- a/webapp/components/Registration/WatchScopedSlotsCallback.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-export default {
-  name: 'WatchScopedSlotsCallback',
-  props: {
-    scopedData: { type: Object, required: true },
-    changeCallback: { type: Function, required: true },
-  },
-  data() {
-    // Wolle
-    return {}
-  },
-  computed: {
-    // Wolle
-  },
-  watch: {
-    scopedData: {
-      handler(value) {
-        this.changeCallback(value)
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  methods: {
-    // Wolle
-  },
-}
-</script>
-
-<style lang="scss"></style>

From b09766a0a2c0e722e2f15cbc61a7da0457e728f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 10 Feb 2021 18:23:33 +0100
Subject: [PATCH 27/44] Fix linting and clean up

---
 .../ComponentSlider/ComponentSlider.vue         |  2 --
 .../RegistrationItemCreateUserAccount.vue       |  4 ++--
 .../Registration/RegistrationItemEnterEmail.vue | 17 ++++++++---------
 .../RegistrationItemEnterInvite.vue             |  4 +---
 .../Registration/RegistrationItemEnterNonce.vue |  3 +--
 .../Registration/RegistrationSlider.story.js    |  6 ++----
 .../Registration/RegistrationSlider.vue         |  3 ---
 7 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index ececc1aa8..6a1111f54 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -58,8 +58,6 @@ export default {
       return this.sliderData.sliderIndex // have a shorter notation
     },
   },
-  methods: {
-  },
 }
 </script>
 
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index 3c945c7d2..f76dfba98 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -37,7 +37,8 @@
       @input="handleInput"
       @input-valid="handleInputValid"
     >
-      <!-- <template v-slot="{ errors }"> --> <!-- leave this here in case the scoped variable is needed in the future nobody would remember this -->
+      <!-- leave this here in case the scoped variable is needed in the future nobody would remember this -->
+      <!-- <template v-slot="{ errors }"> -->
       <template>
         <ds-input
           id="name"
@@ -238,7 +239,6 @@ export default {
         this.minimumAge &&
         this.noCommercial &&
         this.noPolitical
-      console.log('valid : ', isValid)
       return isValid
     },
   },
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index 30daea695..b381f57a1 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -14,7 +14,10 @@
             : $t('components.registration.signup.title', metadata)
         }}
       </h1> -->
-      <ds-text v-if="token" v-html="$t('registration.signup.form.invitation-code', { code: token })" />
+      <ds-text
+        v-if="token"
+        v-html="$t('registration.signup.form.invitation-code', { code: token })"
+      />
       <ds-text>
         {{
           invitation
@@ -127,23 +130,19 @@ export default {
       return this.$t('components.registration.signup.form.success', { email })
     },
     valid() {
-      let isValid
-      if (isEmail(this.formData.email)) {
-        this.formData.email = normalizeEmail(this.formData.email)
-        isValid = true
-      } else {
-        isValid = false
-      }
+      const isValid = isEmail(this.formData.email)
       return isValid
     },
   },
   methods: {
     sendValidation() {
+      if (this.formData.email && isEmail(this.formData.email)) {
+        this.formData.email = normalizeEmail(this.formData.email)
+      }
       const { email } = this.formData
       const value = {
         email,
       }
-      // console.log('sendValidation !!! value: ', value)
       this.sliderData.validateCallback(this.valid, value)
     },
     handleInput() {
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index b2848ad81..f0f0ccdfe 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -46,7 +46,6 @@ export default {
   mounted: function () {
     this.$nextTick(function () {
       // Code that will run only after the entire view has been rendered
-      console.log('mounted !!! this.sliderData.collectedInputData.inviteCode: ', this.sliderData.collectedInputData.inviteCode)
       this.formData.inviteCode = this.sliderData.collectedInputData.inviteCode
         ? this.sliderData.collectedInputData.inviteCode
         : ''
@@ -55,8 +54,7 @@ export default {
   },
   computed: {
     valid() {
-      const isValid =
-        this.formData.inviteCode.length === 6
+      const isValid = this.formData.inviteCode.length === 6
       return isValid
     },
   },
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index 25006779c..367d0fc17 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -64,8 +64,7 @@ export default {
   },
   computed: {
     valid() {
-      const isValid =
-        this.formData.nonce.length === 6
+      const isValid = this.formData.nonce.length === 6
       return isValid
     },
   },
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index fe5ad9b5d..25422b324 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -11,8 +11,7 @@ storiesOf('RegistrationSlider', module)
   .add('invite-code empty', () => ({
     components: { RegistrationSlider },
     store: helpers.store,
-    data: () => ({
-    }),
+    data: () => ({}),
     template: `
       <registration-slider registrationType="invite-code" />
     `,
@@ -48,8 +47,7 @@ storiesOf('RegistrationSlider', module)
   .add('public-registration empty', () => ({
     components: { RegistrationSlider },
     store: helpers.store,
-    data: () => ({
-    }),
+    data: () => ({}),
     template: `
       <registration-slider registrationType="public-registration" />
     `,
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 0a639145b..d073c1132 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -60,7 +60,6 @@
 import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
 import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
-import HcEmpty from '~/components/Empty/Empty'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import RegistrationItemCreateUserAccount from './RegistrationItemCreateUserAccount'
 import RegistrationItemEnterEmail from '~/components/Registration/RegistrationItemEnterEmail'
@@ -71,7 +70,6 @@ export default {
   name: 'RegistrationSlider',
   components: {
     ComponentSlider,
-    HcEmpty,
     LocaleSwitch,
     RegistrationItemCreateUserAccount,
     RegistrationItemEnterEmail,
@@ -198,7 +196,6 @@ export default {
     },
     buttonCallback() {
       if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-        console.log('buttonCallback !!! enter-email')
         this.sliderData.collectedInputData.emailSend = true
         this.sliderData.sliders[this.sliderIndex].button.title = 'Resend E-Mail' // Wolle
       }

From ebef48ed993524b82ac3c2c8647c2d7e5d7f9c49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 11 Feb 2021 15:00:35 +0100
Subject: [PATCH 28/44] Implement inviteCode db request

---
 .../RegistrationItemEnterEmail.vue            |  7 +--
 .../RegistrationItemEnterInvite.vue           | 59 +++++++++++++++----
 .../Registration/RegistrationSlider.story.js  | 18 +++++-
 .../Registration/RegistrationSlider.vue       |  1 +
 webapp/locales/de.json                        |  7 ++-
 webapp/locales/en.json                        |  7 ++-
 6 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index b381f57a1..8d463e27e 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -129,9 +129,8 @@ export default {
       const { email } = this.data.Signup
       return this.$t('components.registration.signup.form.success', { email })
     },
-    valid() {
-      const isValid = isEmail(this.formData.email)
-      return isValid
+    validInput() {
+      return isEmail(this.formData.email)
     },
   },
   methods: {
@@ -143,7 +142,7 @@ export default {
       const value = {
         email,
       }
-      this.sliderData.validateCallback(this.valid, value)
+      this.sliderData.validateCallback(this.validInput, value)
     },
     handleInput() {
       // this.disabled = true
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index f0f0ccdfe..f24104eea 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -22,6 +22,13 @@
 </template>
 
 <script>
+import gql from 'graphql-tag'
+
+export const isValidInviteCodeQuery = gql`
+  query($code: ID!) {
+    isValidInviteCode(code: $code)
+  }
+`
 export default {
   name: 'RegistrationItemEnterInvite',
   props: {
@@ -35,8 +42,8 @@ export default {
       formSchema: {
         inviteCode: {
           type: 'string',
-          min: 6,
-          max: 6,
+          // Wolle min: 6,
+          // max: 6,
           required: true,
           message: this.$t('components.enter-invite.form.validations.length'),
         },
@@ -53,20 +60,25 @@ export default {
     })
   },
   computed: {
-    valid() {
-      const isValid = this.formData.inviteCode.length === 6
-      return isValid
+    sliderIndex() {
+      return this.sliderData.sliderIndex
+    },
+    validInput() {
+      return this.formData.inviteCode.length === 6
     },
   },
   methods: {
-    sendValidation() {
+    async sendValidation() {
       const { inviteCode } = this.formData
-      const value = {
+      const values = {
         inviteCode,
       }
-      // validate in backend
-      // toaster
-      this.sliderData.validateCallback(this.valid, value)
+      let validated = false
+      if (this.validInput) {
+        await this.handleSubmitVerify()
+        validated = this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode
+      }
+      this.sliderData.validateCallback(validated, values)
     },
     async handleInput() {
       this.sendValidation()
@@ -74,8 +86,31 @@ export default {
     async handleInputValid() {
       this.sendValidation()
     },
-    handleSubmitVerify() {
-      // Wolle const { nonce } = this.formData
+    async handleSubmitVerify() {
+      const { inviteCode } = this.formData
+      const variables = { code: inviteCode }
+
+      if (
+        !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
+        (this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+          this.sliderData.sliders[this.sliderIndex].data.request.variables.code !== variables.code)
+      ) {
+        this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
+
+        try {
+          const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
+          this.sliderData.sliders[this.sliderIndex].data.response = response.data
+          if (this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode) {
+            this.$toast.success(
+              this.$t('components.registration.inviteCode.form.success', { inviteCode }),
+            )
+          }
+        } catch (err) {
+          this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
+          const { message } = err
+          this.$toast.error(message)
+        }
+      }
     },
   },
 }
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index 25422b324..d290a8ade 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -2,8 +2,24 @@ import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import RegistrationSlider from './RegistrationSlider.vue'
 import helpers from '~/storybook/helpers'
+import Vue from 'vue'
 
-helpers.init()
+const plugins = [
+  (app = {}) => {
+    app.$apollo = {
+      mutate: () => {},
+      query: (data) => {
+        if (JSON.stringify(data).includes('isValidInviteCode')) {
+          return { data: { isValidInviteCode: true } }
+        }
+        throw new Error(`Query name not found!`)
+      },
+    }
+    Vue.prototype.$apollo = app.$apollo
+    return app
+  },
+]
+helpers.init({ plugins })
 
 storiesOf('RegistrationSlider', module)
   .addDecorator(withA11y)
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index d073c1132..387e35015 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -87,6 +87,7 @@ export default {
         // title: this.$t('components.registration.create-user-account.title'),
         title: 'Invitation', // Wolle
         validated: false,
+        data: { request: { variables: null }, response: { isValidInviteCode: false } },
         button: {
           title: 'Next', // Wolle
           icon: 'arrow-right',
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 044ea0a10..ce3d7f73b 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -125,7 +125,7 @@
         "invite-code": "Einladungs-Code eingeben",
         "next": "Weiter",
         "validations": {
-          "length": "muss genau 5 Buchstaben lang sein"
+          "length": "muss genau 6 Buchstaben lang sein"
         }
       }
     },
@@ -161,6 +161,11 @@
         "success": "Dein Benutzerkonto wurde erstellt!",
         "title": "Benutzerkonto anlegen"
       },
+      "inviteCode": {
+        "form": {
+          "success": "Gültiger Einladungs-Code <b>{inviteCode}</b>!"
+        }
+      },
       "signup": {
         "form": {
           "data-privacy": "Ich habe die Datenschutzerklärung gelesen und verstanden.",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 27e71e29d..8ce1f36f1 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -125,7 +125,7 @@
         "invite-code": "Enter your invite code",
         "next": "Continue",
         "validations": {
-          "length": "must be 5 characters long"
+          "length": "must be 6 characters long"
         }
       }
     },
@@ -161,6 +161,11 @@
         "success": "Your account has been created!",
         "title": "Create user account"
       },
+      "inviteCode": {
+        "form": {
+          "success": "Valid invite code <b>{inviteCode}</b>!"
+        }
+      },
       "signup": {
         "form": {
           "data-privacy": "I have read and understood the privacy statement.",

From d008eccf6839deae90e6f62aa70e8e6e6d645dd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 24 Feb 2021 16:08:17 +0100
Subject: [PATCH 29/44] Implement enterEmail db request

---
 .../RegistrationItemEnterEmail.vue            | 95 +++++++++++--------
 .../RegistrationItemEnterInvite.vue           | 15 +--
 .../RegistrationItemEnterNonce.vue            |  2 +-
 .../Registration/RegistrationSlider.story.js  | 10 +-
 .../Registration/RegistrationSlider.vue       |  5 +-
 webapp/locales/de.json                        |  7 +-
 webapp/locales/en.json                        |  7 +-
 7 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index 8d463e27e..17f42a554 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -5,7 +5,6 @@
       :schema="formSchema"
       @input="handleInput"
       @input-valid="handleInputValid"
-      @submit="handleSubmit"
     >
       <!-- Wolle <h1>
         {{
@@ -109,7 +108,7 @@ export default {
           message: this.$t('common.validations.email'),
         },
       },
-      // disabled: true,
+      // Wolle disabled: true,
       data: null,
       error: null,
     }
@@ -117,7 +116,6 @@ export default {
   mounted: function () {
     this.$nextTick(function () {
       // Code that will run only after the entire view has been rendered
-      // console.log('mounted !!! ')
       this.formData.email = this.sliderData.collectedInputData.email
         ? this.sliderData.collectedInputData.email
         : ''
@@ -129,61 +127,80 @@ export default {
       const { email } = this.data.Signup
       return this.$t('components.registration.signup.form.success', { email })
     },
+    sliderIndex() {
+      return this.sliderData.sliderIndex
+    },
     validInput() {
       return isEmail(this.formData.email)
     },
   },
   methods: {
-    sendValidation() {
+    async sendValidation() {
       if (this.formData.email && isEmail(this.formData.email)) {
         this.formData.email = normalizeEmail(this.formData.email)
       }
       const { email } = this.formData
-      const value = {
-        email,
+      const value = { email }
+
+      let validated = false
+      if (this.validInput) {
+        await this.handleSubmitVerify()
+        if (this.sliderData.sliders[this.sliderIndex].data.response) {
+          const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
+          validated = (email === respnseEmail)
+        }
       }
-      this.sliderData.validateCallback(this.validInput, value)
+      this.sliderData.validateCallback(validated, value)
     },
-    handleInput() {
-      // this.disabled = true
-      // this.sliderData.validateCallback(false)
+    async handleInput() {
       this.sendValidation()
     },
-    handleInputValid() {
-      // this.disabemailled = false
-      // const { email } = this.formData
-      // validate in backend?
-      // toaster?
-      // console.log('sendValidation !!! email: ', email)
-      // this.sliderData.validateCallback(true, { email })
+    async handleInputValid() {
       this.sendValidation()
     },
-    async handleSubmit() {
+    async handleSubmitVerify() {
       const mutation = this.token ? SignupByInvitationMutation : SignupMutation
       const { token } = this
       const { email } = this.formData
+      const variables = { email, token }
 
-      try {
-        const response = await this.$apollo.mutate({ mutation, variables: { email, token } })
-        this.data = response.data
-        setTimeout(() => {
-          this.$emit('submit', { email: this.data.Signup.email })
-        }, 3000)
-      } catch (err) {
-        const { message } = err
-        const mapping = {
-          'A user account with this email already exists': 'email-exists',
-          'Invitation code already used or does not exist': 'invalid-invitation-token',
-        }
-        for (const [pattern, key] of Object.entries(mapping)) {
-          if (message.includes(pattern))
-            this.error = {
-              key,
-              message: this.$t(`components.registration.signup.form.errors.${key}`),
-            }
-        }
-        if (!this.error) {
-          this.$toast.error(message)
+      if (
+        !this.sliderData.sliders[this.sliderIndex].data.request ||
+        !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
+        (this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
+      )
+      {
+        this.sliderData.sliders[this.sliderIndex].data.request = { variables }
+
+        try {
+          const response = await this.$apollo.mutate({ mutation, variables })
+          this.sliderData.sliders[this.sliderIndex].data.response = response.data
+
+          if (this.sliderData.sliders[this.sliderIndex].data.response) {
+            const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
+            this.$toast.success(
+              this.$t('components.registration.email.form.success', { email: respnseEmail }),
+            )
+          }
+        } catch (err) {
+          this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
+
+          const { message } = err
+          const mapping = {
+            'A user account with this email already exists': 'email-exists',
+            'Invitation code already used or does not exist': 'invalid-invitation-token',
+          }
+          for (const [pattern, key] of Object.entries(mapping)) {
+            if (message.includes(pattern))
+              this.error = {
+                key,
+                message: this.$t(`components.registration.signup.form.errors.${key}`),
+              }
+          }
+          if (!this.error) {
+            this.$toast.error(message)
+          }
         }
       }
     },
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index f24104eea..14b2a10ca 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -5,7 +5,6 @@
     :schema="formSchema"
     @input="handleInput"
     @input-valid="handleInputValid"
-    @submit="handleSubmitVerify"
   >
     <ds-input
       :placeholder="$t('components.enter-invite.form.invite-code')"
@@ -70,9 +69,8 @@ export default {
   methods: {
     async sendValidation() {
       const { inviteCode } = this.formData
-      const values = {
-        inviteCode,
-      }
+      const values = { inviteCode }
+
       let validated = false
       if (this.validInput) {
         await this.handleSubmitVerify()
@@ -91,22 +89,25 @@ export default {
       const variables = { code: inviteCode }
 
       if (
+        !this.sliderData.sliders[this.sliderIndex].data.request ||
         !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
         (this.sliderData.sliders[this.sliderIndex].data.request.variables &&
-          this.sliderData.sliders[this.sliderIndex].data.request.variables.code !== variables.code)
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
       ) {
         this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
 
         try {
           const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
           this.sliderData.sliders[this.sliderIndex].data.response = response.data
-          if (this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode) {
+
+          if (this.sliderData.sliders[this.sliderIndex].data.response && this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode) {
             this.$toast.success(
-              this.$t('components.registration.inviteCode.form.success', { inviteCode }),
+              this.$t('components.registration.invite-code.form.success', { inviteCode }),
             )
           }
         } catch (err) {
           this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
+          
           const { message } = err
           this.$toast.error(message)
         }
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index 367d0fc17..9debdebe4 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -49,7 +49,7 @@ export default {
           message: this.$t('components.enter-nonce.form.validations.length'),
         },
       },
-      // disabled: true,
+      // Wolle disabled: true,
     }
   },
   mounted: function () {
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index d290a8ade..f19465369 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -7,7 +7,15 @@ import Vue from 'vue'
 const plugins = [
   (app = {}) => {
     app.$apollo = {
-      mutate: () => {},
+      mutate: (data) => {
+        if (JSON.stringify(data).includes('Signup')) {
+          return { data: { Signup: { email: data.variables.email } } }
+        }
+        if (JSON.stringify(data).includes('SignupByInvitation')) {
+          return { data: { SignupByInvitation: { email: data.variables.email } } }
+        }
+        throw new Error(`Mutation name not found!`)
+      },
       query: (data) => {
         if (JSON.stringify(data).includes('isValidInviteCode')) {
           return { data: { isValidInviteCode: true } }
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 387e35015..d5e8afe22 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -87,7 +87,7 @@ export default {
         // title: this.$t('components.registration.create-user-account.title'),
         title: 'Invitation', // Wolle
         validated: false,
-        data: { request: { variables: null }, response: { isValidInviteCode: false } },
+        data: { request: /* Wolle */{ variables: null }, response: { isValidInviteCode: false } },
         button: {
           title: 'Next', // Wolle
           icon: 'arrow-right',
@@ -98,8 +98,8 @@ export default {
         name: 'enter-email',
         title: 'E-Mail', // Wolle
         validated: false,
+        data: { request: null, response: null },
         button: {
-          // title: this.sliderData.collectedInputData.emailSend ? 'Resend E-Mail' : 'Send E-Mail', // Wolle
           title: 'Send E-Mail', // Wolle
           icon: 'envelope',
           callback: this.buttonCallback,
@@ -144,7 +144,6 @@ export default {
         sliders = [slidersPortfolio[2], slidersPortfolio[3]]
         break
     }
-    // let sliders = slidersPortfolio
 
     return {
       links,
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index ce3d7f73b..a3f6561d3 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -161,7 +161,12 @@
         "success": "Dein Benutzerkonto wurde erstellt!",
         "title": "Benutzerkonto anlegen"
       },
-      "inviteCode": {
+      "email": {
+        "form": {
+          "success": "Gültige E-Mail Adresse <b>{email}</b>!"
+        }
+      },
+      "invite-code": {
         "form": {
           "success": "Gültiger Einladungs-Code <b>{inviteCode}</b>!"
         }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 8ce1f36f1..184578c77 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -161,7 +161,12 @@
         "success": "Your account has been created!",
         "title": "Create user account"
       },
-      "inviteCode": {
+      "email": {
+        "form": {
+          "success": "Valid e-mail address <b>{email}</b>!"
+        }
+      },
+      "invite-code": {
         "form": {
           "success": "Valid invite code <b>{inviteCode}</b>!"
         }

From 1a9c8f22a606ceebf71bf6589b319f6cba080d3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 25 Feb 2021 11:12:09 +0100
Subject: [PATCH 30/44] Change to try to trigger email db mutation on click
 'Send Mail'

---
 .../RegistrationItemEnterEmail.vue            | 64 +++++++++++++++----
 .../RegistrationItemEnterInvite.vue           |  5 +-
 .../Registration/RegistrationSlider.vue       | 27 ++++++--
 3 files changed, 75 insertions(+), 21 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index 17f42a554..7b4dda4d4 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -92,6 +92,7 @@ export default {
   },
   props: {
     sliderData: { type: Object, required: true },
+    sendEmail: { type: Boolean, required: true },
     token: { type: String, default: null }, // Wolle not used???
     invitation: { type: Boolean, default: false },
   },
@@ -120,20 +121,51 @@ export default {
         ? this.sliderData.collectedInputData.email
         : ''
       this.sendValidation()
+
+      // this.sliderData.sliders[this.sliderIndex].button.clickCallback = this.handleSubmitVerify
+      // this.sliderData.sliders[this.sliderIndex].button.installClickCallback(this.handleSubmitVerify)
     })
   },
   computed: {
+    sliderIndex() {
+      return this.sliderData.sliderIndex
+    },
     submitMessage() {
       const { email } = this.data.Signup
       return this.$t('components.registration.signup.form.success', { email })
     },
-    sliderIndex() {
-      return this.sliderData.sliderIndex
-    },
     validInput() {
       return isEmail(this.formData.email)
     },
   },
+  watch: {
+    sendEmail(value) {
+      console.log('sendEmail !!!')
+      if (value) {
+        console.log('value: ', value)
+        this.handleSubmitVerify()
+        this.sendEmail = false
+      }
+    },
+    // sliderData(sliderData) {
+    //   console.log('sliderData !!! clicked: ', sliderData.sliders[this.sliderIndex].button.clicked)
+    //   if (sliderData.sliders[this.sliderIndex].button.clicked) {
+    //     this.handleSubmitVerify()
+    //   }
+    // },
+    // sliderData: {
+    //   handler(sliderData) {
+    //     console.log('sliderData handler !!!')
+    //     if (sliderData.sliders[this.sliderIndex].button.clicked) {
+    //       console.log('sliderData handler !!! clicked: ', sliderData.sliders[this.sliderIndex].button.clicked)
+    //       this.sliderData.sliders[this.sliderIndex].button.clicked = false
+    //       this.handleSubmitVerify()
+    //     }
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
+  },
   methods: {
     async sendValidation() {
       if (this.formData.email && isEmail(this.formData.email)) {
@@ -142,15 +174,16 @@ export default {
       const { email } = this.formData
       const value = { email }
 
-      let validated = false
-      if (this.validInput) {
-        await this.handleSubmitVerify()
-        if (this.sliderData.sliders[this.sliderIndex].data.response) {
-          const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
-          validated = (email === respnseEmail)
-        }
-      }
-      this.sliderData.validateCallback(validated, value)
+      // let validated = false
+      // if (this.validInput) {
+      //   await this.handleSubmitVerify()
+      //   if (this.sliderData.sliders[this.sliderIndex].data.response) {
+      //     const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
+      //     validated = (email === respnseEmail)
+      //   }
+      // }
+      // this.sliderData.validateCallback(validated, value)
+      this.sliderData.validateCallback(this.validInput, value)
     },
     async handleInput() {
       this.sendValidation()
@@ -167,17 +200,19 @@ export default {
       if (
         !this.sliderData.sliders[this.sliderIndex].data.request ||
         !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
-        (this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+        (this.sliderData.sliders[this.sliderIndex].data.request && this.sliderData.sliders[this.sliderIndex].data.request.variables &&
           !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
       )
       {
         this.sliderData.sliders[this.sliderIndex].data.request = { variables }
 
         try {
-          const response = await this.$apollo.mutate({ mutation, variables })
+          const response = await this.$apollo.mutate({ mutation, variables })  // e-mail is send in emailMiddleware of backend
+          console.log('handleSubmitVerify !!! response: ', response, ' this.sliderData.sliders[this.sliderIndex]: ', this.sliderData.sliders[this.sliderIndex])
           this.sliderData.sliders[this.sliderIndex].data.response = response.data
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
+            this.sliderData.collectedInputData.emailSend = true
             const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
             this.$toast.success(
               this.$t('components.registration.email.form.success', { email: respnseEmail }),
@@ -185,6 +220,7 @@ export default {
           }
         } catch (err) {
           this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
+          this.sliderData.collectedInputData.emailSend = false
 
           const { message } = err
           const mapping = {
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 14b2a10ca..c9cb7f537 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -91,10 +91,11 @@ export default {
       if (
         !this.sliderData.sliders[this.sliderIndex].data.request ||
         !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
-        (this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+        (this.sliderData.sliders[this.sliderIndex].data.request && this.sliderData.sliders[this.sliderIndex].data.request.variables &&
           !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
       ) {
-        this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
+        // this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
+        this.sliderData.sliders[this.sliderIndex].data.request = { variables }
 
         try {
           const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index d5e8afe22..5b3440e13 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -24,7 +24,7 @@
         >
           <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
           <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
-          <registration-item-enter-email :invitation="false" :sliderData="sliderData" />
+          <registration-item-enter-email :sliderData="sliderData" :sendEmail="sendEmail" :invitation="false" />
         </template>
 
         <template
@@ -87,7 +87,7 @@ export default {
         // title: this.$t('components.registration.create-user-account.title'),
         title: 'Invitation', // Wolle
         validated: false,
-        data: { request: /* Wolle */{ variables: null }, response: { isValidInviteCode: false } },
+        data: { request: null, response: { isValidInviteCode: false } },
         button: {
           title: 'Next', // Wolle
           icon: 'arrow-right',
@@ -100,9 +100,13 @@ export default {
         validated: false,
         data: { request: null, response: null },
         button: {
-          title: 'Send E-Mail', // Wolle
+          // title: 'Send E-Mail', // Wolle
+          title: this.enterEmailButtonTitle(this.overwriteSliderData.emailSend), // Wolle
           icon: 'envelope',
           callback: this.buttonCallback,
+          // clicked: false,
+          installClickCallback: this.installClickCallback,  // set by component
+          clickCallback: null,  // set by component
         },
       },
       {
@@ -172,6 +176,7 @@ export default {
         validateCallback: this.validateCallback,
         ...this.overwriteSliderData,
       },
+      sendEmail: false,
     }
   },
   computed: {
@@ -180,6 +185,12 @@ export default {
     },
   },
   methods: {
+    enterEmailButtonTitle(emailSend) {
+      return emailSend ? 'Resend E-Mail' : 'Send E-Mail'
+    },
+    installClickCallback(clickCallback) {
+      this.sliderData.sliders[this.sliderIndex].button.clickCallback = clickCallback
+    },
     validateCallback(isValid, data = null) {
       this.sliderData.sliders[this.sliderIndex].validated = isValid
       if (data) {
@@ -196,8 +207,14 @@ export default {
     },
     buttonCallback() {
       if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-        this.sliderData.collectedInputData.emailSend = true
-        this.sliderData.sliders[this.sliderIndex].button.title = 'Resend E-Mail' // Wolle
+        // this.sliderData.sliders[this.sliderIndex].button.clicked = true
+        this.sendEmail = true
+        console.log('buttonCallback !!! this.sendEmail', this.sendEmail)
+        // if (this.sliderData.sliders[this.sliderIndex].button.clickCallback) {
+        //   console.log('buttonCallback !!! clicked')
+        //   this.sliderData.sliders[this.sliderIndex].button.clickCallback()
+        // }
+        this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(this.sliderData.collectedInputData.emailSend)
       }
 
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {

From 57fec436da1a396a2df1d99255051c3bec7a73e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 25 Feb 2021 19:27:15 +0100
Subject: [PATCH 31/44] Trigger email db mutation on click 'Send Mail'

---
 .../components/Registration/RegistrationItemEnterEmail.vue   | 5 +++--
 webapp/components/Registration/RegistrationSlider.story.js   | 3 +++
 webapp/components/Registration/RegistrationSlider.vue        | 5 +++--
 webapp/locales/de.json                                       | 2 +-
 webapp/locales/en.json                                       | 2 +-
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index 7b4dda4d4..da8c308db 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -208,8 +208,9 @@ export default {
 
         try {
           const response = await this.$apollo.mutate({ mutation, variables })  // e-mail is send in emailMiddleware of backend
-          console.log('handleSubmitVerify !!! response: ', response, ' this.sliderData.sliders[this.sliderIndex]: ', this.sliderData.sliders[this.sliderIndex])
-          this.sliderData.sliders[this.sliderIndex].data.response = response.data
+          // this.sliderData.sliders[this.sliderIndex].data.response = response.data
+          // this.sliderData.sliders[this.sliderIndex].data.response = { Signup: { email } }
+          this.sliderData.sliders[this.sliderIndex].data = {...this.sliderData.sliders[this.sliderIndex].data, response: response.data}
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
             this.sliderData.collectedInputData.emailSend = true
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index f19465369..f749760e0 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -8,6 +8,9 @@ const plugins = [
   (app = {}) => {
     app.$apollo = {
       mutate: (data) => {
+        if (JSON.stringify(data).includes('UpdateUser')) {
+          return { data: { UpdateUser: { id: data.variables.id, locale: data.variables.locale } } }
+        }
         if (JSON.stringify(data).includes('Signup')) {
           return { data: { Signup: { email: data.variables.email } } }
         }
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 5b3440e13..8c8ef2d9c 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -24,7 +24,7 @@
         >
           <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
           <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
-          <registration-item-enter-email :sliderData="sliderData" :sendEmail="sendEmail" :invitation="false" />
+          <registration-item-enter-email  ref="RegistrationItemEnterEmail" :sliderData="sliderData" :sendEmail="sendEmail" :invitation="false" />
         </template>
 
         <template
@@ -209,7 +209,8 @@ export default {
       if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
         // this.sliderData.sliders[this.sliderIndex].button.clicked = true
         this.sendEmail = true
-        console.log('buttonCallback !!! this.sendEmail', this.sendEmail)
+        console.log('buttonCallback !!! ', this.sliderData.sliders[this.sliderIndex].data)
+        this.$refs.RegistrationItemEnterEmail.handleSubmitVerify()
         // if (this.sliderData.sliders[this.sliderIndex].button.clickCallback) {
         //   console.log('buttonCallback !!! clicked')
         //   this.sliderData.sliders[this.sliderIndex].button.clickCallback()
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index a3f6561d3..e15855983 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -163,7 +163,7 @@
       },
       "email": {
         "form": {
-          "success": "Gültige E-Mail Adresse <b>{email}</b>!"
+          "success": "Verifikations-E-Mail gesendet an <b>{email}</b>!"
         }
       },
       "invite-code": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 184578c77..1526d1290 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -163,7 +163,7 @@
       },
       "email": {
         "form": {
-          "success": "Valid e-mail address <b>{email}</b>!"
+          "success": "Verification e-mail send to <b>{email}</b>!"
         }
       },
       "invite-code": {

From b747c1ca42f156091a4c814343e92557362a7ab6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 25 Feb 2021 20:56:08 +0100
Subject: [PATCH 32/44] Cleanup

---
 .../RegistrationItemEnterEmail.vue            | 45 +------------------
 .../Registration/RegistrationSlider.vue       | 16 +------
 2 files changed, 2 insertions(+), 59 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index da8c308db..cff86790f 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -92,7 +92,6 @@ export default {
   },
   props: {
     sliderData: { type: Object, required: true },
-    sendEmail: { type: Boolean, required: true },
     token: { type: String, default: null }, // Wolle not used???
     invitation: { type: Boolean, default: false },
   },
@@ -121,9 +120,6 @@ export default {
         ? this.sliderData.collectedInputData.email
         : ''
       this.sendValidation()
-
-      // this.sliderData.sliders[this.sliderIndex].button.clickCallback = this.handleSubmitVerify
-      // this.sliderData.sliders[this.sliderIndex].button.installClickCallback(this.handleSubmitVerify)
     })
   },
   computed: {
@@ -138,34 +134,6 @@ export default {
       return isEmail(this.formData.email)
     },
   },
-  watch: {
-    sendEmail(value) {
-      console.log('sendEmail !!!')
-      if (value) {
-        console.log('value: ', value)
-        this.handleSubmitVerify()
-        this.sendEmail = false
-      }
-    },
-    // sliderData(sliderData) {
-    //   console.log('sliderData !!! clicked: ', sliderData.sliders[this.sliderIndex].button.clicked)
-    //   if (sliderData.sliders[this.sliderIndex].button.clicked) {
-    //     this.handleSubmitVerify()
-    //   }
-    // },
-    // sliderData: {
-    //   handler(sliderData) {
-    //     console.log('sliderData handler !!!')
-    //     if (sliderData.sliders[this.sliderIndex].button.clicked) {
-    //       console.log('sliderData handler !!! clicked: ', sliderData.sliders[this.sliderIndex].button.clicked)
-    //       this.sliderData.sliders[this.sliderIndex].button.clicked = false
-    //       this.handleSubmitVerify()
-    //     }
-    //   },
-    //   deep: true,
-    //   immediate: true,
-    // },
-  },
   methods: {
     async sendValidation() {
       if (this.formData.email && isEmail(this.formData.email)) {
@@ -174,15 +142,6 @@ export default {
       const { email } = this.formData
       const value = { email }
 
-      // let validated = false
-      // if (this.validInput) {
-      //   await this.handleSubmitVerify()
-      //   if (this.sliderData.sliders[this.sliderIndex].data.response) {
-      //     const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
-      //     validated = (email === respnseEmail)
-      //   }
-      // }
-      // this.sliderData.validateCallback(validated, value)
       this.sliderData.validateCallback(this.validInput, value)
     },
     async handleInput() {
@@ -204,12 +163,10 @@ export default {
           !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
       )
       {
-        this.sliderData.sliders[this.sliderIndex].data.request = { variables }
+        this.sliderData.sliders[this.sliderIndex].data = {...this.sliderData.sliders[this.sliderIndex].data, request: { variables }}
 
         try {
           const response = await this.$apollo.mutate({ mutation, variables })  // e-mail is send in emailMiddleware of backend
-          // this.sliderData.sliders[this.sliderIndex].data.response = response.data
-          // this.sliderData.sliders[this.sliderIndex].data.response = { Signup: { email } }
           this.sliderData.sliders[this.sliderIndex].data = {...this.sliderData.sliders[this.sliderIndex].data, response: response.data}
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 8c8ef2d9c..b30bd0519 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -24,7 +24,7 @@
         >
           <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
           <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
-          <registration-item-enter-email  ref="RegistrationItemEnterEmail" :sliderData="sliderData" :sendEmail="sendEmail" :invitation="false" />
+          <registration-item-enter-email  ref="RegistrationItemEnterEmail" :sliderData="sliderData" :invitation="false" />
         </template>
 
         <template
@@ -104,9 +104,6 @@ export default {
           title: this.enterEmailButtonTitle(this.overwriteSliderData.emailSend), // Wolle
           icon: 'envelope',
           callback: this.buttonCallback,
-          // clicked: false,
-          installClickCallback: this.installClickCallback,  // set by component
-          clickCallback: null,  // set by component
         },
       },
       {
@@ -176,7 +173,6 @@ export default {
         validateCallback: this.validateCallback,
         ...this.overwriteSliderData,
       },
-      sendEmail: false,
     }
   },
   computed: {
@@ -188,9 +184,6 @@ export default {
     enterEmailButtonTitle(emailSend) {
       return emailSend ? 'Resend E-Mail' : 'Send E-Mail'
     },
-    installClickCallback(clickCallback) {
-      this.sliderData.sliders[this.sliderIndex].button.clickCallback = clickCallback
-    },
     validateCallback(isValid, data = null) {
       this.sliderData.sliders[this.sliderIndex].validated = isValid
       if (data) {
@@ -207,14 +200,7 @@ export default {
     },
     buttonCallback() {
       if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-        // this.sliderData.sliders[this.sliderIndex].button.clicked = true
-        this.sendEmail = true
-        console.log('buttonCallback !!! ', this.sliderData.sliders[this.sliderIndex].data)
         this.$refs.RegistrationItemEnterEmail.handleSubmitVerify()
-        // if (this.sliderData.sliders[this.sliderIndex].button.clickCallback) {
-        //   console.log('buttonCallback !!! clicked')
-        //   this.sliderData.sliders[this.sliderIndex].button.clickCallback()
-        // }
         this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(this.sliderData.collectedInputData.emailSend)
       }
 

From 68f4c271afbf243d5a97c4b5bda040eebef60f0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 25 Feb 2021 20:58:25 +0100
Subject: [PATCH 33/44] Fix lint

---
 .../RegistrationItemEnterEmail.vue            | 22 +++++++++++++------
 .../RegistrationItemEnterInvite.vue           | 10 ++++++---
 .../Registration/RegistrationSlider.vue       | 10 +++++++--
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index cff86790f..12219633e 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -159,19 +159,27 @@ export default {
       if (
         !this.sliderData.sliders[this.sliderIndex].data.request ||
         !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
-        (this.sliderData.sliders[this.sliderIndex].data.request && this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+        (this.sliderData.sliders[this.sliderIndex].data.request &&
+          this.sliderData.sliders[this.sliderIndex].data.request.variables &&
           !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
-      )
-      {
-        this.sliderData.sliders[this.sliderIndex].data = {...this.sliderData.sliders[this.sliderIndex].data, request: { variables }}
+      ) {
+        this.sliderData.sliders[this.sliderIndex].data = {
+          ...this.sliderData.sliders[this.sliderIndex].data,
+          request: { variables },
+        }
 
         try {
-          const response = await this.$apollo.mutate({ mutation, variables })  // e-mail is send in emailMiddleware of backend
-          this.sliderData.sliders[this.sliderIndex].data = {...this.sliderData.sliders[this.sliderIndex].data, response: response.data}
+          const response = await this.$apollo.mutate({ mutation, variables }) // e-mail is send in emailMiddleware of backend
+          this.sliderData.sliders[this.sliderIndex].data = {
+            ...this.sliderData.sliders[this.sliderIndex].data,
+            response: response.data,
+          }
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
             this.sliderData.collectedInputData.emailSend = true
-            const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
+            const { email: respnseEmail } =
+              this.sliderData.sliders[this.sliderIndex].data.response.Signup ||
+              this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
             this.$toast.success(
               this.$t('components.registration.email.form.success', { email: respnseEmail }),
             )
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index c9cb7f537..6ee90c02c 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -91,7 +91,8 @@ export default {
       if (
         !this.sliderData.sliders[this.sliderIndex].data.request ||
         !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
-        (this.sliderData.sliders[this.sliderIndex].data.request && this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+        (this.sliderData.sliders[this.sliderIndex].data.request &&
+          this.sliderData.sliders[this.sliderIndex].data.request.variables &&
           !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
       ) {
         // this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
@@ -101,14 +102,17 @@ export default {
           const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
           this.sliderData.sliders[this.sliderIndex].data.response = response.data
 
-          if (this.sliderData.sliders[this.sliderIndex].data.response && this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode) {
+          if (
+            this.sliderData.sliders[this.sliderIndex].data.response &&
+            this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode
+          ) {
             this.$toast.success(
               this.$t('components.registration.invite-code.form.success', { inviteCode }),
             )
           }
         } catch (err) {
           this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
-          
+
           const { message } = err
           this.$toast.error(message)
         }
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index b30bd0519..562f65955 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -24,7 +24,11 @@
         >
           <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
           <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
-          <registration-item-enter-email  ref="RegistrationItemEnterEmail" :sliderData="sliderData" :invitation="false" />
+          <registration-item-enter-email
+            ref="RegistrationItemEnterEmail"
+            :sliderData="sliderData"
+            :invitation="false"
+          />
         </template>
 
         <template
@@ -201,7 +205,9 @@ export default {
     buttonCallback() {
       if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
         this.$refs.RegistrationItemEnterEmail.handleSubmitVerify()
-        this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(this.sliderData.collectedInputData.emailSend)
+        this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
+          this.sliderData.collectedInputData.emailSend,
+        )
       }
 
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {

From 091ed52b5468d0d12a332f0cdfcefb8b10cb0bc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 15:39:05 +0100
Subject: [PATCH 34/44] Refactor to 'setSliderValuesCallback'

---
 .../ComponentSlider/ComponentSlider.vue       | 14 +++-
 .../RegistrationItemCreateUserAccount.vue     | 10 ++-
 .../RegistrationItemEnterEmail.vue            | 52 +++++++++----
 .../RegistrationItemEnterInvite.vue           | 20 +++--
 .../RegistrationItemEnterNonce.vue            | 21 +++--
 .../Registration/RegistrationSlider.story.js  |  2 +-
 .../Registration/RegistrationSlider.vue       | 76 +++++++++++++------
 7 files changed, 140 insertions(+), 55 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index 6a1111f54..eb9918565 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -36,7 +36,7 @@
           filled
           :loading="false"
           :disabled="!sliderData.sliders[sliderIndex].validated"
-          @click="sliderData.sliders[sliderIndex].button.callback"
+          @click="onClick"
         >
           {{ sliderData.sliders[sliderIndex].button.title }}
         </base-button>
@@ -58,6 +58,18 @@ export default {
       return this.sliderData.sliderIndex // have a shorter notation
     },
   },
+  methods: {
+    async onClick() {
+      let success = true
+      if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
+        success = await this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick()
+      }
+      // this.sliderData.sliders[this.sliderIndex].button.callback()
+      if (success && this.sliderIndex < this.sliderData.sliders.length - 1) {
+        this.sliderData.sliderSelectorCallback(this.sliderIndex + 1)
+      }
+    },
+  },
 }
 </script>
 
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index f76dfba98..1bc8c5a39 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -226,6 +226,9 @@ export default {
         ? this.sliderData.collectedInputData.noPolitical
         : false
       this.sendValidation()
+
+      // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick)
     })
   },
   computed: {
@@ -271,7 +274,7 @@ export default {
         noPolitical,
       } = this
       const locale = this.$i18n.locale()
-      const value = {
+      const values = {
         name,
         about,
         password,
@@ -286,7 +289,7 @@ export default {
       }
       // Wolle validate in backend
       // toaster
-      this.sliderData.validateCallback(this.valid, value)
+      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values }, {})
     },
     async handleInput() {
       this.sendValidation()
@@ -324,6 +327,9 @@ export default {
         this.response = 'error'
       }
     },
+    onNextClick() {
+      return true
+    },
   },
 }
 </script>
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index 12219633e..ae9431425 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -43,6 +43,21 @@
         {{ $t('components.registration.signup.form.submit') }}
       </base-button> -->
       <slot></slot>
+      <ds-text v-if="sliderData.collectedInputData.emailSend">
+      <!-- Wolle <ds-text v-if="sliderData.collectedInputData.emailSend"> -->
+        <input
+          id="checkbox"
+          type="checkbox"
+          v-model="sendEmailAgain"
+          :checked="sendEmailAgain"
+        />
+        <label for="checkbox0">
+          <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
+          Send e-mail again
+          <!-- <br />
+          <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link> -->
+        </label>
+      </ds-text>
     </ds-form>
   </ds-space>
   <div v-else margin="large">
@@ -108,6 +123,7 @@ export default {
           message: this.$t('common.validations.email'),
         },
       },
+      sendEmailAgain: false,
       // Wolle disabled: true,
       data: null,
       error: null,
@@ -120,6 +136,8 @@ export default {
         ? this.sliderData.collectedInputData.email
         : ''
       this.sendValidation()
+
+      this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick)
     })
   },
   computed: {
@@ -140,9 +158,9 @@ export default {
         this.formData.email = normalizeEmail(this.formData.email)
       }
       const { email } = this.formData
-      const value = { email }
+      const values = { email }
 
-      this.sliderData.validateCallback(this.validInput, value)
+      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values }, {})
     },
     async handleInput() {
       this.sendValidation()
@@ -150,30 +168,33 @@ export default {
     async handleInputValid() {
       this.sendValidation()
     },
-    async handleSubmitVerify() {
+    async onNextClick() {
       const mutation = this.token ? SignupByInvitationMutation : SignupMutation
       const { token } = this
       const { email } = this.formData
       const variables = { email, token }
 
+      // Wolle test for resend
       if (
         !this.sliderData.sliders[this.sliderIndex].data.request ||
-        !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
+        (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
         (this.sliderData.sliders[this.sliderIndex].data.request &&
           this.sliderData.sliders[this.sliderIndex].data.request.variables &&
-          !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
       ) {
-        this.sliderData.sliders[this.sliderIndex].data = {
-          ...this.sliderData.sliders[this.sliderIndex].data,
-          request: { variables },
-        }
+        // this.sliderData.sliders[this.sliderIndex].data = {
+        //   ...this.sliderData.sliders[this.sliderIndex].data,
+        //   request: { variables },
+        // }
+        this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } })
 
         try {
           const response = await this.$apollo.mutate({ mutation, variables }) // e-mail is send in emailMiddleware of backend
-          this.sliderData.sliders[this.sliderIndex].data = {
-            ...this.sliderData.sliders[this.sliderIndex].data,
-            response: response.data,
-          }
+          // this.sliderData.sliders[this.sliderIndex].data = {
+          //   ...this.sliderData.sliders[this.sliderIndex].data,
+          //   response: response.data,
+          // }
+          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } })
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
             this.sliderData.collectedInputData.emailSend = true
@@ -184,8 +205,10 @@ export default {
               this.$t('components.registration.email.form.success', { email: respnseEmail }),
             )
           }
+          return true
         } catch (err) {
-          this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
+          // this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
+          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: null, response: null } })
           this.sliderData.collectedInputData.emailSend = false
 
           const { message } = err
@@ -203,6 +226,7 @@ export default {
           if (!this.error) {
             this.$toast.error(message)
           }
+          return false
         }
       }
     },
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 6ee90c02c..7ed4541bd 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -56,6 +56,8 @@ export default {
         ? this.sliderData.collectedInputData.inviteCode
         : ''
       this.sendValidation()
+
+      this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick)
     })
   },
   computed: {
@@ -76,7 +78,7 @@ export default {
         await this.handleSubmitVerify()
         validated = this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode
       }
-      this.sliderData.validateCallback(validated, values)
+      this.sliderData.setSliderValuesCallback(validated, { collectedInputData: values })
     },
     async handleInput() {
       this.sendValidation()
@@ -90,17 +92,19 @@ export default {
 
       if (
         !this.sliderData.sliders[this.sliderIndex].data.request ||
-        !this.sliderData.sliders[this.sliderIndex].data.request.variables ||
+        (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
         (this.sliderData.sliders[this.sliderIndex].data.request &&
           this.sliderData.sliders[this.sliderIndex].data.request.variables &&
-          !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
       ) {
         // this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
-        this.sliderData.sliders[this.sliderIndex].data.request = { variables }
+        // this.sliderData.sliders[this.sliderIndex].data.request = { variables }
+        this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } })
 
         try {
           const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
-          this.sliderData.sliders[this.sliderIndex].data.response = response.data
+          // this.sliderData.sliders[this.sliderIndex].data.response = response.data
+          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } })
 
           if (
             this.sliderData.sliders[this.sliderIndex].data.response &&
@@ -111,13 +115,17 @@ export default {
             )
           }
         } catch (err) {
-          this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
+          // this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
+          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: { isValidInviteCode: false } } })
 
           const { message } = err
           this.$toast.error(message)
         }
       }
     },
+    onNextClick() {
+      return true
+    },
   },
 }
 </script>
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index 9debdebe4..9acc70baf 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -43,8 +43,8 @@ export default {
       formSchema: {
         nonce: {
           type: 'string',
-          min: 6,
-          max: 6,
+          // Wolle min: 6,
+          // max: 6,
           required: true,
           message: this.$t('components.enter-nonce.form.validations.length'),
         },
@@ -60,26 +60,28 @@ export default {
         ? this.sliderData.collectedInputData.nonce
         : ''
       this.sendValidation()
+
+      // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick)
     })
   },
   computed: {
     valid() {
-      const isValid = this.formData.nonce.length === 6
-      return isValid
+      return this.formData.nonce.length === 6
     },
   },
   methods: {
     sendValidation() {
       const { nonce } = this.formData
-      const value = {
+      const values = {
         nonce,
       }
       // console.log('sendValidation !!! value: ', value)
-      this.sliderData.validateCallback(this.valid, value)
+      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values })
     },
     async handleInput() {
       // this.disabled = true
-      // this.sliderData.validateCallback(false)
+      // this.sliderData.setSliderValuesCallback(false)
       this.sendValidation()
     },
     async handleInputValid() {
@@ -87,7 +89,7 @@ export default {
       // const { nonce } = this.formData
       // validate in backend?
       // toaster?
-      // this.sliderData.validateCallback(true, { nonce })
+      // this.sliderData.setSliderValuesCallback(true, { nonce })
       this.sendValidation()
     },
     handleSubmitVerify() {
@@ -95,6 +97,9 @@ export default {
       // const email = this.email
       // this.$emit('nonceEntered', { email, nonce })
     },
+    onNextClick() {
+      return true
+    },
   },
 }
 </script>
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index f749760e0..be7d4e232 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -87,7 +87,7 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: null,
           email: 'wolle.huss@pjannto.com',
-          emailSend: true,
+          emailSend: false,
           nonce: 'NTRSCZ',
           name: 'Wolle',
           password: 'Hello',
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 562f65955..5978f6b47 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -25,7 +25,6 @@
           <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
           <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
           <registration-item-enter-email
-            ref="RegistrationItemEnterEmail"
             :sliderData="sliderData"
             :invitation="false"
           />
@@ -96,6 +95,7 @@ export default {
           title: 'Next', // Wolle
           icon: 'arrow-right',
           callback: this.buttonCallback,
+          slotOnNextClick: null, // optional set by slot
         },
       },
       {
@@ -108,27 +108,32 @@ export default {
           title: this.enterEmailButtonTitle(this.overwriteSliderData.emailSend), // Wolle
           icon: 'envelope',
           callback: this.buttonCallback,
+          slotOnNextClick: null, // optional set by slot
         },
       },
       {
         name: 'enter-nonce',
         title: 'E-Mail Confirmation', // Wolle
         validated: false,
+        data: { request: null, response: null },
         button: {
           title: 'Confirm', // Wolle
           icon: 'arrow-right',
           callback: this.buttonCallback,
+          slotOnNextClick: null, // optional set by slot
         },
       },
       {
         name: 'create-user-account',
         title: this.$t('components.registration.create-user-account.title'),
         validated: false,
+        data: { request: null, response: null },
         button: {
           // title: this.$t('actions.save'), // Wolle
           title: 'Create', // Wolle
           icon: 'check',
           callback: this.buttonCallback,
+          slotOnNextClick: null, // optional set by slot
         },
       },
     ]
@@ -174,7 +179,7 @@ export default {
         sliderIndex: 0,
         sliders: sliders,
         sliderSelectorCallback: this.sliderSelectorCallback,
-        validateCallback: this.validateCallback,
+        setSliderValuesCallback: this.setSliderValuesCallback,
         ...this.overwriteSliderData,
       },
     }
@@ -186,40 +191,65 @@ export default {
   },
   methods: {
     enterEmailButtonTitle(emailSend) {
-      return emailSend ? 'Resend E-Mail' : 'Send E-Mail'
+      // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+      return emailSend ? 'Skip send' : 'Send e-mail'  // Wolle
     },
-    validateCallback(isValid, data = null) {
+    setSliderValuesCallback(isValid, { collectedInputData, sliderData, sliderSettings }, slotOnNextClick = null) {
       this.sliderData.sliders[this.sliderIndex].validated = isValid
-      if (data) {
+
+      if (collectedInputData) {
         this.sliderData.collectedInputData = {
           ...this.sliderData.collectedInputData,
-          ...data,
+          ...collectedInputData,
         }
       }
+      if (sliderData) {
+        if (this.sliderData.sliders[this.sliderIndex].data) {
+          this.sliderData.sliders[this.sliderIndex].data = {
+            request: sliderData.request ? sliderData.request : this.sliderData.sliders[this.sliderIndex].data.request,
+            response: sliderData.response ? sliderData.response : this.sliderData.sliders[this.sliderIndex].data.response,
+          }
+        }
+      }
+      if (sliderSettings) {
+        
+      }
+
+      if (slotOnNextClick) {
+        this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick = slotOnNextClick
+      }
     },
     sliderSelectorCallback(selectedIndex) {
-      if (selectedIndex < this.sliderIndex) {
+      if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) {
+        if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
+          this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
+            this.sliderData.collectedInputData.emailSend,
+          )
+        }
         this.sliderData.sliderIndex = selectedIndex
       }
     },
     buttonCallback() {
-      if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-        this.$refs.RegistrationItemEnterEmail.handleSubmitVerify()
-        this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
-          this.sliderData.collectedInputData.emailSend,
-        )
-      }
+      // Wolle
+      // if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
+      //   // if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
+      //   //   this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick()
+      //   // }
+      //   this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
+      //     this.sliderData.collectedInputData.emailSend,
+      //   )
+      // }
 
-      if (this.sliderIndex === this.sliderData.sliders.length - 1) {
-        // console.log('submit data: ', this.sliderData.collectedInputData)
-      } else {
-        if (this.sliderIndex < this.sliderData.sliders.length - 1) {
-          this.sliderData.sliderIndex++
-          if (this.sliderData.sliders[this.sliderIndex] === 'create-user-account') {
-            this.sliderData.sliders[this.sliderIndex].validated = false
-          }
-        }
-      }
+      // if (this.sliderIndex === this.sliderData.sliders.length - 1) {
+      //   // console.log('submit data: ', this.sliderData.collectedInputData)
+      // } else {
+      //   if (this.sliderIndex < this.sliderData.sliders.length - 1) {
+      //     this.sliderData.sliderIndex++
+      //     if (this.sliderData.sliders[this.sliderIndex] === 'create-user-account') {
+      //       this.sliderData.sliders[this.sliderIndex].validated = false
+      //     }
+      //   }
+      // }
     },
   },
 }

From e3bf47679e040df50773ebc8a89ef62db4040ec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 17:02:55 +0100
Subject: [PATCH 35/44] Implement e-mail resend functionality

---
 .../ComponentSlider/ComponentSlider.vue       |   2 +-
 .../RegistrationItemCreateUserAccount.vue     |   2 +-
 .../RegistrationItemEnterEmail.vue            | 192 +++++++++++-------
 .../RegistrationItemEnterInvite.vue           |  22 +-
 .../Registration/RegistrationSlider.story.js  |   4 +-
 .../Registration/RegistrationSlider.vue       |  61 ++++--
 6 files changed, 177 insertions(+), 106 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index eb9918565..d01520858 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -64,7 +64,7 @@ export default {
       if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
         success = await this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick()
       }
-      // this.sliderData.sliders[this.sliderIndex].button.callback()
+      success = success && this.sliderData.sliders[this.sliderIndex].button.callback(success)
       if (success && this.sliderIndex < this.sliderData.sliders.length - 1) {
         this.sliderData.sliderSelectorCallback(this.sliderIndex + 1)
       }
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index 1bc8c5a39..ed8ed8576 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -289,7 +289,7 @@ export default {
       }
       // Wolle validate in backend
       // toaster
-      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values }, {})
+      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values })
     },
     async handleInput() {
       this.sendValidation()
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index ae9431425..f15448a23 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -1,38 +1,38 @@
 <template>
-  <ds-space v-if="!data && !error" margin="large">
-    <ds-form
-      v-model="formData"
-      :schema="formSchema"
-      @input="handleInput"
-      @input-valid="handleInputValid"
-    >
-      <!-- Wolle <h1>
+  <!-- Wolle <ds-space v-if="!data && !error" margin="large"> -->
+  <ds-form
+    v-model="formData"
+    :schema="formSchema"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+  >
+    <!-- Wolle <h1>
         {{
           invitation
             ? $t('profile.invites.title', metadata)
             : $t('components.registration.signup.title', metadata)
         }}
       </h1> -->
-      <ds-text
-        v-if="token"
-        v-html="$t('registration.signup.form.invitation-code', { code: token })"
-      />
-      <ds-text>
-        {{
-          invitation
-            ? $t('profile.invites.description')
-            : $t('components.registration.signup.form.description')
-        }}
-      </ds-text>
-      <ds-input
-        :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
-        type="email"
-        id="email"
-        model="email"
-        name="email"
-        icon="envelope"
-      />
-      <!-- Wolle <base-button
+    <ds-text
+      v-if="token"
+      v-html="$t('registration.signup.form.invitation-code', { code: token })"
+    />
+    <ds-text>
+      {{
+        invitation
+          ? $t('profile.invites.description')
+          : $t('components.registration.signup.form.description')
+      }}
+    </ds-text>
+    <ds-input
+      :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
+      type="email"
+      id="email"
+      model="email"
+      name="email"
+      icon="envelope"
+    />
+    <!-- Wolle <base-button
         :disabled="disabled"
         :loading="$apollo.loading"
         filled
@@ -42,24 +42,17 @@
       >
         {{ $t('components.registration.signup.form.submit') }}
       </base-button> -->
-      <slot></slot>
-      <ds-text v-if="sliderData.collectedInputData.emailSend">
+    <slot></slot>
+    <ds-text v-if="sliderData.collectedInputData.emailSend">
       <!-- Wolle <ds-text v-if="sliderData.collectedInputData.emailSend"> -->
-        <input
-          id="checkbox"
-          type="checkbox"
-          v-model="sendEmailAgain"
-          :checked="sendEmailAgain"
-        />
-        <label for="checkbox0">
-          <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
-          Send e-mail again
-          <!-- <br />
-          <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link> -->
-        </label>
-      </ds-text>
-    </ds-form>
-  </ds-space>
+      <input id="checkbox" type="checkbox" v-model="sendEmailAgain" :checked="sendEmailAgain" />
+      <label for="checkbox0">
+        <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
+        {{ 'Send e-mail again' }}
+      </label>
+    </ds-text>
+  </ds-form>
+  <!-- Wolle </ds-space>
   <div v-else margin="large">
     <template v-if="!error">
       <transition name="ds-transition-fade">
@@ -76,7 +69,7 @@
         <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
       </ds-space>
     </template>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -84,7 +77,7 @@ import gql from 'graphql-tag'
 import metadata from '~/constants/metadata'
 import { isEmail } from 'validator'
 import normalizeEmail from '~/components/utils/NormalizeEmail'
-import { SweetalertIcon } from 'vue-sweetalert-icons'
+// Wolle import { SweetalertIcon } from 'vue-sweetalert-icons'
 
 export const SignupMutation = gql`
   mutation($email: String!) {
@@ -103,7 +96,7 @@ export const SignupByInvitationMutation = gql`
 export default {
   name: 'RegistrationItemEnterEmail',
   components: {
-    SweetalertIcon,
+    // Wolle SweetalertIcon,
   },
   props: {
     sliderData: { type: Object, required: true },
@@ -123,10 +116,13 @@ export default {
           message: this.$t('common.validations.email'),
         },
       },
+      // TODO: Our styleguide does not support checkmarks.
+      // Integrate termsAndConditionsConfirmed into `this.formData` once we
+      // have checkmarks available.
       sendEmailAgain: false,
       // Wolle disabled: true,
-      data: null,
-      error: null,
+      // Wolle data: null,
+      error: null, // Wolle
     }
   },
   mounted: function () {
@@ -137,17 +133,26 @@ export default {
         : ''
       this.sendValidation()
 
-      this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(
+        this.validInput,
+        this.buttonValues(),
+        this.onNextClick,
+      )
     })
   },
+  watch: {
+    sendEmailAgain() {
+      this.setButtonValues()
+    },
+  },
   computed: {
     sliderIndex() {
       return this.sliderData.sliderIndex
     },
-    submitMessage() {
-      const { email } = this.data.Signup
-      return this.$t('components.registration.signup.form.success', { email })
-    },
+    // Wolle submitMessage() {
+    //   const { email } = this.data.Signup
+    //   return this.$t('components.registration.signup.form.success', { email })
+    // },
     validInput() {
       return isEmail(this.formData.email)
     },
@@ -160,7 +165,7 @@ export default {
       const { email } = this.formData
       const values = { email }
 
-      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values }, {})
+      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values })
     },
     async handleInput() {
       this.sendValidation()
@@ -168,36 +173,73 @@ export default {
     async handleInputValid() {
       this.sendValidation()
     },
+    // enterEmailButtonTitle(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? (this.sendEmailAgain ? 'Resend e-mail' : 'Skip resend') : 'Send e-mail' // Wolle
+    // },
+    // enterEmailButtonIcon(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? (this.sendEmailAgain ? 'envelope' : 'arrow-right') : 'envelope' // Wolle
+    // },
+    buttonValues() {
+      return {
+        sliderSettings: {
+          // buttonTitle: this.enterEmailButtonTitle(this.sliderData.collectedInputData.emailSend),
+          // buttonIcon: this.enterEmailButtonIcon(this.sliderData.collectedInputData.emailSend),
+          buttonTitle: this.sliderData.collectedInputData.emailSend
+            ? this.sendEmailAgain
+              ? 'Resend e-mail'
+              : 'Skip resend'
+            : 'Send e-mail', // Wolle
+          buttonIcon: this.sliderData.collectedInputData.emailSend
+            ? this.sendEmailAgain
+              ? 'envelope'
+              : 'arrow-right'
+            : 'envelope', // Wolle
+        },
+      }
+    },
+    setButtonValues() {
+      this.sliderData.setSliderValuesCallback(this.validInput, this.buttonValues())
+    },
     async onNextClick() {
       const mutation = this.token ? SignupByInvitationMutation : SignupMutation
       const { token } = this
       const { email } = this.formData
       const variables = { email, token }
 
-      // Wolle test for resend
+      if (!this.sendEmailAgain && this.sliderData.collectedInputData.emailSend) {
+        return true
+      }
+
       if (
+        this.sendEmailAgain ||
         !this.sliderData.sliders[this.sliderIndex].data.request ||
-        (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
+        (this.sliderData.sliders[this.sliderIndex].data.request &&
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
         (this.sliderData.sliders[this.sliderIndex].data.request &&
           this.sliderData.sliders[this.sliderIndex].data.request.variables &&
           !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
       ) {
-        // this.sliderData.sliders[this.sliderIndex].data = {
-        //   ...this.sliderData.sliders[this.sliderIndex].data,
-        //   request: { variables },
-        // }
-        this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } })
+        this.sliderData.setSliderValuesCallback(
+          this.sliderData.sliders[this.sliderIndex].validated,
+          { sliderData: { request: { variables }, response: null } },
+        )
 
         try {
           const response = await this.$apollo.mutate({ mutation, variables }) // e-mail is send in emailMiddleware of backend
-          // this.sliderData.sliders[this.sliderIndex].data = {
-          //   ...this.sliderData.sliders[this.sliderIndex].data,
-          //   response: response.data,
-          // }
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } })
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { response: response.data } },
+          )
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
-            this.sliderData.collectedInputData.emailSend = true
+            // this.sliderData.collectedInputData.emailSend = true
+            this.sliderData.setSliderValuesCallback(this.validInput, {
+              collectedInputData: { emailSend: true },
+            })
+            this.setButtonValues()
+
             const { email: respnseEmail } =
               this.sliderData.sliders[this.sliderIndex].data.response.Signup ||
               this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
@@ -207,9 +249,15 @@ export default {
           }
           return true
         } catch (err) {
-          // this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: null, response: null } })
-          this.sliderData.collectedInputData.emailSend = false
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { request: null, response: null } },
+          )
+          // this.sliderData.collectedInputData.emailSend = false
+          this.sliderData.setSliderValuesCallback(this.validInput, {
+            collectedInputData: { emailSend: false },
+          })
+          this.setButtonValues()
 
           const { message } = err
           const mapping = {
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 7ed4541bd..cb5e1deb5 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -92,19 +92,23 @@ export default {
 
       if (
         !this.sliderData.sliders[this.sliderIndex].data.request ||
-        (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
+        (this.sliderData.sliders[this.sliderIndex].data.request &&
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
         (this.sliderData.sliders[this.sliderIndex].data.request &&
           this.sliderData.sliders[this.sliderIndex].data.request.variables &&
           !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
       ) {
-        // this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
-        // this.sliderData.sliders[this.sliderIndex].data.request = { variables }
-        this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } })
+        this.sliderData.setSliderValuesCallback(
+          this.sliderData.sliders[this.sliderIndex].validated,
+          { sliderData: { request: { variables }, response: null } },
+        )
 
         try {
           const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
-          // this.sliderData.sliders[this.sliderIndex].data.response = response.data
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } })
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { response: response.data } },
+          )
 
           if (
             this.sliderData.sliders[this.sliderIndex].data.response &&
@@ -115,8 +119,10 @@ export default {
             )
           }
         } catch (err) {
-          // this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: { isValidInviteCode: false } } })
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { response: { isValidInviteCode: false } } },
+          )
 
           const { message } = err
           this.$toast.error(message)
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index be7d4e232..28d0ea5b3 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -51,7 +51,7 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: 'IN1T6Y',
           email: 'wolle.huss@pjannto.com',
-          emailSend: true,
+          emailSend: false,
           nonce: 'NTRSCZ',
           name: 'Wolle',
           password: 'Hello',
@@ -115,7 +115,7 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: null,
           email: 'wolle.huss@pjannto.com',
-          emailSend: true,
+          emailSend: false,
           nonce: null,
           name: null,
           password: null,
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 5978f6b47..466409462 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -24,10 +24,7 @@
         >
           <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
           <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
-          <registration-item-enter-email
-            :sliderData="sliderData"
-            :invitation="false"
-          />
+          <registration-item-enter-email :sliderData="sliderData" :invitation="false" />
         </template>
 
         <template
@@ -104,9 +101,8 @@ export default {
         validated: false,
         data: { request: null, response: null },
         button: {
-          // title: 'Send E-Mail', // Wolle
-          title: this.enterEmailButtonTitle(this.overwriteSliderData.emailSend), // Wolle
-          icon: 'envelope',
+          title: '', // set by slider component
+          icon: '', // set by slider component
           callback: this.buttonCallback,
           slotOnNextClick: null, // optional set by slot
         },
@@ -190,11 +186,19 @@ export default {
     },
   },
   methods: {
-    enterEmailButtonTitle(emailSend) {
-      // return emailSend ? 'Resend e-mail' : 'Send e-mail'
-      return emailSend ? 'Skip send' : 'Send e-mail'  // Wolle
-    },
-    setSliderValuesCallback(isValid, { collectedInputData, sliderData, sliderSettings }, slotOnNextClick = null) {
+    // Wolle enterEmailButtonTitle(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? 'Skip resend' : 'Send e-mail' // Wolle
+    // },
+    // enterEmailButtonIcon(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? 'arrow-right' : 'envelope' // Wolle
+    // },
+    setSliderValuesCallback(
+      isValid,
+      { collectedInputData, sliderData, sliderSettings },
+      slotOnNextClick = null,
+    ) {
       this.sliderData.sliders[this.sliderIndex].validated = isValid
 
       if (collectedInputData) {
@@ -206,13 +210,23 @@ export default {
       if (sliderData) {
         if (this.sliderData.sliders[this.sliderIndex].data) {
           this.sliderData.sliders[this.sliderIndex].data = {
-            request: sliderData.request ? sliderData.request : this.sliderData.sliders[this.sliderIndex].data.request,
-            response: sliderData.response ? sliderData.response : this.sliderData.sliders[this.sliderIndex].data.response,
+            request: sliderData.request
+              ? sliderData.request
+              : this.sliderData.sliders[this.sliderIndex].data.request,
+            response: sliderData.response
+              ? sliderData.response
+              : this.sliderData.sliders[this.sliderIndex].data.response,
           }
         }
       }
       if (sliderSettings) {
-        
+        const { buttonTitle, buttonIcon } = sliderSettings
+        if (buttonTitle) {
+          this.sliderData.sliders[this.sliderIndex].button.title = buttonTitle
+        }
+        if (buttonIcon) {
+          this.sliderData.sliders[this.sliderIndex].button.icon = buttonIcon
+        }
       }
 
       if (slotOnNextClick) {
@@ -221,15 +235,18 @@ export default {
     },
     sliderSelectorCallback(selectedIndex) {
       if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) {
-        if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-          this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
-            this.sliderData.collectedInputData.emailSend,
-          )
-        }
+        // Wolle if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
+        //   this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
+        //     this.sliderData.collectedInputData.emailSend,
+        //   )
+        //   this.sliderData.sliders[this.sliderIndex].button.icon = this.enterEmailButtonIcon(
+        //     this.sliderData.collectedInputData.emailSend,
+        //   )
+        // }
         this.sliderData.sliderIndex = selectedIndex
       }
     },
-    buttonCallback() {
+    buttonCallback(success) {
       // Wolle
       // if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
       //   // if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
@@ -239,7 +256,6 @@ export default {
       //     this.sliderData.collectedInputData.emailSend,
       //   )
       // }
-
       // if (this.sliderIndex === this.sliderData.sliders.length - 1) {
       //   // console.log('submit data: ', this.sliderData.collectedInputData)
       // } else {
@@ -250,6 +266,7 @@ export default {
       //     }
       //   }
       // }
+      return success
     },
   },
 }

From 0022ea73653ba464c58f0949c481d920b6042056 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 18:04:23 +0100
Subject: [PATCH 36/44] Move in 'setSliderValuesCallback' 'slotOnNextClick' as
 'buttonSliderCallback' into 'sliderSettings'

---
 .../ComponentSlider/ComponentSlider.vue       |  8 ++--
 .../RegistrationItemCreateUserAccount.vue     |  5 ++-
 .../RegistrationItemEnterEmail.vue            | 11 ++---
 .../RegistrationItemEnterInvite.vue           |  4 +-
 .../RegistrationItemEnterNonce.vue            |  4 +-
 .../Registration/RegistrationSlider.vue       | 42 +++++++------------
 6 files changed, 33 insertions(+), 41 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index d01520858..ce5000d53 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -36,7 +36,7 @@
           filled
           :loading="false"
           :disabled="!sliderData.sliders[sliderIndex].validated"
-          @click="onClick"
+          @click="onNextClick"
         >
           {{ sliderData.sliders[sliderIndex].button.title }}
         </base-button>
@@ -59,10 +59,10 @@ export default {
     },
   },
   methods: {
-    async onClick() {
+    async onNextClick() {
       let success = true
-      if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
-        success = await this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick()
+      if (this.sliderData.sliders[this.sliderIndex].button.sliderCallback) {
+        success = await this.sliderData.sliders[this.sliderIndex].button.sliderCallback()
       }
       success = success && this.sliderData.sliders[this.sliderIndex].button.callback(success)
       if (success && this.sliderIndex < this.sliderData.sliders.length - 1) {
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index ed8ed8576..a8608f817 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -227,8 +227,9 @@ export default {
         : false
       this.sendValidation()
 
-      // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick)
-      this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(this.valid, {
+        sliderSettings: { buttonSliderCallback: this.onNextClick },
+      })
     })
   },
   computed: {
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index f15448a23..0130d2dcc 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -133,11 +133,12 @@ export default {
         : ''
       this.sendValidation()
 
-      this.sliderData.setSliderValuesCallback(
-        this.validInput,
-        this.buttonValues(),
-        this.onNextClick,
-      )
+      this.sliderData.setSliderValuesCallback(this.validInput, {
+        sliderSettings: {
+          ...this.buttonValues().sliderSettings,
+          buttonSliderCallback: this.onNextClick,
+        },
+      })
     })
   },
   watch: {
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index cb5e1deb5..e0548315b 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -57,7 +57,9 @@ export default {
         : ''
       this.sendValidation()
 
-      this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(this.validInput, {
+        sliderSettings: { buttonSliderCallback: this.onNextClick },
+      })
     })
   },
   computed: {
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index 9acc70baf..b93f36be7 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -62,7 +62,9 @@ export default {
       this.sendValidation()
 
       // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick)
-      this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(this.valid, {
+        sliderSettings: { buttonSliderCallback: this.onNextClick },
+      })
     })
   },
   computed: {
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 466409462..d58e6b809 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -92,7 +92,7 @@ export default {
           title: 'Next', // Wolle
           icon: 'arrow-right',
           callback: this.buttonCallback,
-          slotOnNextClick: null, // optional set by slot
+          sliderCallback: null, // optional set by slot
         },
       },
       {
@@ -104,7 +104,7 @@ export default {
           title: '', // set by slider component
           icon: '', // set by slider component
           callback: this.buttonCallback,
-          slotOnNextClick: null, // optional set by slot
+          sliderCallback: null, // optional set by slot
         },
       },
       {
@@ -116,7 +116,7 @@ export default {
           title: 'Confirm', // Wolle
           icon: 'arrow-right',
           callback: this.buttonCallback,
-          slotOnNextClick: null, // optional set by slot
+          sliderCallback: null, // optional set by slot
         },
       },
       {
@@ -129,7 +129,7 @@ export default {
           title: 'Create', // Wolle
           icon: 'check',
           callback: this.buttonCallback,
-          slotOnNextClick: null, // optional set by slot
+          sliderCallback: null, // optional set by slot
         },
       },
     ]
@@ -186,18 +186,9 @@ export default {
     },
   },
   methods: {
-    // Wolle enterEmailButtonTitle(emailSend) {
-    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
-    //   return emailSend ? 'Skip resend' : 'Send e-mail' // Wolle
-    // },
-    // enterEmailButtonIcon(emailSend) {
-    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
-    //   return emailSend ? 'arrow-right' : 'envelope' // Wolle
-    // },
     setSliderValuesCallback(
       isValid,
-      { collectedInputData, sliderData, sliderSettings },
-      slotOnNextClick = null,
+      { collectedInputData, sliderData, sliderSettings }, // sliderCallback = null,
     ) {
       this.sliderData.sliders[this.sliderIndex].validated = isValid
 
@@ -220,37 +211,32 @@ export default {
         }
       }
       if (sliderSettings) {
-        const { buttonTitle, buttonIcon } = sliderSettings
+        const { buttonTitle, buttonIcon, buttonSliderCallback } = sliderSettings
         if (buttonTitle) {
           this.sliderData.sliders[this.sliderIndex].button.title = buttonTitle
         }
         if (buttonIcon) {
           this.sliderData.sliders[this.sliderIndex].button.icon = buttonIcon
         }
+        if (buttonSliderCallback) {
+          this.sliderData.sliders[this.sliderIndex].button.sliderCallback = buttonSliderCallback
+        }
       }
 
-      if (slotOnNextClick) {
-        this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick = slotOnNextClick
-      }
+      // Wolle if (sliderCallback) {
+      //   this.sliderData.sliders[this.sliderIndex].button.sliderCallback = sliderCallback
+      // }
     },
     sliderSelectorCallback(selectedIndex) {
       if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) {
-        // Wolle if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-        //   this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
-        //     this.sliderData.collectedInputData.emailSend,
-        //   )
-        //   this.sliderData.sliders[this.sliderIndex].button.icon = this.enterEmailButtonIcon(
-        //     this.sliderData.collectedInputData.emailSend,
-        //   )
-        // }
         this.sliderData.sliderIndex = selectedIndex
       }
     },
     buttonCallback(success) {
       // Wolle
       // if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-      //   // if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
-      //   //   this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick()
+      //   // if (this.sliderData.sliders[this.sliderIndex].button.sliderCallback) {
+      //   //   this.sliderData.sliders[this.sliderIndex].button.sliderCallback()
       //   // }
       //   this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
       //     this.sliderData.collectedInputData.emailSend,

From eeb5006e247567373749183da357eff8c2612675 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 18:16:01 +0100
Subject: [PATCH 37/44] Cleanup

---
 .../RegistrationItemEnterEmail.vue            | 19 +++------------
 .../RegistrationItemEnterInvite.vue           |  7 +++---
 .../Registration/RegistrationSlider.vue       | 23 -------------------
 3 files changed, 6 insertions(+), 43 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index 0130d2dcc..f6e485b4c 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -174,19 +174,9 @@ export default {
     async handleInputValid() {
       this.sendValidation()
     },
-    // enterEmailButtonTitle(emailSend) {
-    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
-    //   return emailSend ? (this.sendEmailAgain ? 'Resend e-mail' : 'Skip resend') : 'Send e-mail' // Wolle
-    // },
-    // enterEmailButtonIcon(emailSend) {
-    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
-    //   return emailSend ? (this.sendEmailAgain ? 'envelope' : 'arrow-right') : 'envelope' // Wolle
-    // },
     buttonValues() {
       return {
         sliderSettings: {
-          // buttonTitle: this.enterEmailButtonTitle(this.sliderData.collectedInputData.emailSend),
-          // buttonIcon: this.enterEmailButtonIcon(this.sliderData.collectedInputData.emailSend),
           buttonTitle: this.sliderData.collectedInputData.emailSend
             ? this.sendEmailAgain
               ? 'Resend e-mail'
@@ -217,10 +207,9 @@ export default {
         this.sendEmailAgain ||
         !this.sliderData.sliders[this.sliderIndex].data.request ||
         (this.sliderData.sliders[this.sliderIndex].data.request &&
-          !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
-        (this.sliderData.sliders[this.sliderIndex].data.request &&
-          this.sliderData.sliders[this.sliderIndex].data.request.variables &&
-          !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
+          (!this.sliderData.sliders[this.sliderIndex].data.request.variables ||
+            (this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+              !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)))
       ) {
         this.sliderData.setSliderValuesCallback(
           this.sliderData.sliders[this.sliderIndex].validated,
@@ -235,7 +224,6 @@ export default {
           )
 
           if (this.sliderData.sliders[this.sliderIndex].data.response) {
-            // this.sliderData.collectedInputData.emailSend = true
             this.sliderData.setSliderValuesCallback(this.validInput, {
               collectedInputData: { emailSend: true },
             })
@@ -254,7 +242,6 @@ export default {
             this.sliderData.sliders[this.sliderIndex].validated,
             { sliderData: { request: null, response: null } },
           )
-          // this.sliderData.collectedInputData.emailSend = false
           this.sliderData.setSliderValuesCallback(this.validInput, {
             collectedInputData: { emailSend: false },
           })
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index e0548315b..e133c2fba 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -95,10 +95,9 @@ export default {
       if (
         !this.sliderData.sliders[this.sliderIndex].data.request ||
         (this.sliderData.sliders[this.sliderIndex].data.request &&
-          !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
-        (this.sliderData.sliders[this.sliderIndex].data.request &&
-          this.sliderData.sliders[this.sliderIndex].data.request.variables &&
-          !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
+          (!this.sliderData.sliders[this.sliderIndex].data.request.variables ||
+            (this.sliderData.sliders[this.sliderIndex].data.request.variables &&
+              !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)))
       ) {
         this.sliderData.setSliderValuesCallback(
           this.sliderData.sliders[this.sliderIndex].validated,
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index d58e6b809..5bafc39a3 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -222,10 +222,6 @@ export default {
           this.sliderData.sliders[this.sliderIndex].button.sliderCallback = buttonSliderCallback
         }
       }
-
-      // Wolle if (sliderCallback) {
-      //   this.sliderData.sliders[this.sliderIndex].button.sliderCallback = sliderCallback
-      // }
     },
     sliderSelectorCallback(selectedIndex) {
       if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) {
@@ -233,25 +229,6 @@ export default {
       }
     },
     buttonCallback(success) {
-      // Wolle
-      // if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-      //   // if (this.sliderData.sliders[this.sliderIndex].button.sliderCallback) {
-      //   //   this.sliderData.sliders[this.sliderIndex].button.sliderCallback()
-      //   // }
-      //   this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
-      //     this.sliderData.collectedInputData.emailSend,
-      //   )
-      // }
-      // if (this.sliderIndex === this.sliderData.sliders.length - 1) {
-      //   // console.log('submit data: ', this.sliderData.collectedInputData)
-      // } else {
-      //   if (this.sliderIndex < this.sliderData.sliders.length - 1) {
-      //     this.sliderData.sliderIndex++
-      //     if (this.sliderData.sliders[this.sliderIndex] === 'create-user-account') {
-      //       this.sliderData.sliders[this.sliderIndex].validated = false
-      //     }
-      //   }
-      // }
       return success
     },
   },

From f4fc22563312be36d1de824e1f1ed742130497ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 18:28:32 +0100
Subject: [PATCH 38/44] Cleanup #2

---
 .../RegistrationItemCreateUserAccount.vue     | 37 ++++++++++---------
 .../RegistrationItemEnterEmail.vue            |  3 +-
 .../RegistrationItemEnterInvite.vue           |  3 +-
 .../RegistrationItemEnterNonce.vue            | 14 +++----
 4 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index a8608f817..861cb4310 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -227,14 +227,14 @@ export default {
         : false
       this.sendValidation()
 
-      this.sliderData.setSliderValuesCallback(this.valid, {
+      this.sliderData.setSliderValuesCallback(this.validInput, {
         sliderSettings: { buttonSliderCallback: this.onNextClick },
       })
     })
   },
   computed: {
-    valid() {
-      const isValid =
+    validInput() {
+      return (
         this.formData.name.length >= 3 &&
         this.formData.password.length >= 1 &&
         this.formData.password === this.formData.passwordConfirmation &&
@@ -243,7 +243,7 @@ export default {
         this.minimumAge &&
         this.noCommercial &&
         this.noPolitical
-      return isValid
+      )
     },
   },
   watch: {
@@ -275,22 +275,23 @@ export default {
         noPolitical,
       } = this
       const locale = this.$i18n.locale()
-      const values = {
-        name,
-        about,
-        password,
-        passwordConfirmation,
-        termsAndConditionsAgreedVersion,
-        termsAndConditionsConfirmed,
-        dataPrivacy,
-        minimumAge,
-        noCommercial,
-        noPolitical,
-        locale,
-      }
       // Wolle validate in backend
       // toaster
-      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values })
+      this.sliderData.setSliderValuesCallback(this.validInput, {
+        collectedInputData: {
+          name,
+          about,
+          password,
+          passwordConfirmation,
+          termsAndConditionsAgreedVersion,
+          termsAndConditionsConfirmed,
+          dataPrivacy,
+          minimumAge,
+          noCommercial,
+          noPolitical,
+          locale,
+        },
+      })
     },
     async handleInput() {
       this.sendValidation()
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index f6e485b4c..156140104 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -164,9 +164,8 @@ export default {
         this.formData.email = normalizeEmail(this.formData.email)
       }
       const { email } = this.formData
-      const values = { email }
 
-      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values })
+      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: { email } })
     },
     async handleInput() {
       this.sendValidation()
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index e133c2fba..524b46bbe 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -73,14 +73,13 @@ export default {
   methods: {
     async sendValidation() {
       const { inviteCode } = this.formData
-      const values = { inviteCode }
 
       let validated = false
       if (this.validInput) {
         await this.handleSubmitVerify()
         validated = this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode
       }
-      this.sliderData.setSliderValuesCallback(validated, { collectedInputData: values })
+      this.sliderData.setSliderValuesCallback(validated, { collectedInputData: { inviteCode } })
     },
     async handleInput() {
       this.sendValidation()
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index b93f36be7..924bebde3 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -62,24 +62,24 @@ export default {
       this.sendValidation()
 
       // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick)
-      this.sliderData.setSliderValuesCallback(this.valid, {
+      this.sliderData.setSliderValuesCallback(this.validInput, {
         sliderSettings: { buttonSliderCallback: this.onNextClick },
       })
     })
   },
   computed: {
-    valid() {
+    validInput() {
       return this.formData.nonce.length === 6
     },
   },
   methods: {
     sendValidation() {
       const { nonce } = this.formData
-      const values = {
-        nonce,
-      }
-      // console.log('sendValidation !!! value: ', value)
-      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values })
+      this.sliderData.setSliderValuesCallback(this.validInput, {
+        collectedInputData: {
+          nonce,
+        },
+      })
     },
     async handleInput() {
       // this.disabled = true

From 1add3bde866199d8ac5995ddc5098f9d6e440fba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 18:43:34 +0100
Subject: [PATCH 39/44] Prepare db validation in enterNonce

---
 .../Registration/RegistrationItemEnterInvite.vue         | 6 +++---
 .../Registration/RegistrationItemEnterNonce.vue          | 9 ++++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 524b46bbe..5b901131b 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -74,12 +74,12 @@ export default {
     async sendValidation() {
       const { inviteCode } = this.formData
 
-      let validated = false
+      let dbValidated = false
       if (this.validInput) {
         await this.handleSubmitVerify()
-        validated = this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode
+        dbValidated = this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode
       }
-      this.sliderData.setSliderValuesCallback(validated, { collectedInputData: { inviteCode } })
+      this.sliderData.setSliderValuesCallback(dbValidated, { collectedInputData: { inviteCode } })
     },
     async handleInput() {
       this.sendValidation()
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index 924bebde3..ecf7a8710 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -61,7 +61,6 @@ export default {
         : ''
       this.sendValidation()
 
-      // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick)
       this.sliderData.setSliderValuesCallback(this.validInput, {
         sliderSettings: { buttonSliderCallback: this.onNextClick },
       })
@@ -75,6 +74,14 @@ export default {
   methods: {
     sendValidation() {
       const { nonce } = this.formData
+
+      // Wolle shall the nonce be validated in the database?
+      // let dbValidated = false
+      // if (this.validInput) {
+      //   await this.handleSubmitVerify()
+      //   dbValidated = this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode
+      // }
+      // this.sliderData.setSliderValuesCallback(dbValidated, {
       this.sliderData.setSliderValuesCallback(this.validInput, {
         collectedInputData: {
           nonce,

From ac3a1685b21e7828572566abcb9e1d1ea7f64db3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 19:04:12 +0100
Subject: [PATCH 40/44] Implement db mutation in createUserAccount and cleanup

---
 .../RegistrationItemCreateUserAccount.vue     | 23 +++----------------
 .../RegistrationItemEnterEmail.vue            | 13 -----------
 .../RegistrationItemEnterNonce.vue            | 14 -----------
 .../Registration/RegistrationSlider.story.js  |  3 +++
 4 files changed, 6 insertions(+), 47 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index 861cb4310..8af73c98a 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -23,7 +23,7 @@
     </ds-space>
   </div>
   <div v-else class="create-account-card">
-    <!-- <ds-space margin-top="large">
+    <!-- Wolle <ds-space margin-top="large">
       <ds-heading size="h3">
         {{ $t('components.registration.create-user-account.title') }}
       </ds-heading>
@@ -121,23 +121,6 @@
             v-html="$t('components.registration.signup.form.no-political')"
           ></label>
         </ds-text>
-        <!-- Wolle <base-button
-          style="float: right"
-          icon="check"
-          type="submit"
-          filled
-          :loading="$apollo.loading"
-          :disabled="
-            errors ||
-            !termsAndConditionsConfirmed ||
-            !dataPrivacy ||
-            !minimumAge ||
-            !noCommercial ||
-            !noPolitical
-          "
-        >
-          {{ $t('actions.save') }}
-        </base-button> -->
       </template>
     </ds-form>
   </div>
@@ -183,7 +166,7 @@ export default {
         },
         ...passwordForm.formSchema,
       },
-      response: null,
+      response: null, // Wolle
       // TODO: Our styleguide does not support checkmarks.
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
       // have checkmarks available.
@@ -301,7 +284,6 @@ export default {
     },
     async submit() {
       const { name, password, about } = this.formData
-      // Wolle const { email, nonce } = this
       const { email, nonce } = this.sliderData.collectedInputData
       const termsAndConditionsAgreedVersion = VERSION
       const locale = this.$i18n.locale()
@@ -330,6 +312,7 @@ export default {
       }
     },
     onNextClick() {
+      this.submit()
       return true
     },
   },
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index 156140104..df96bc93c 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -32,19 +32,8 @@
       name="email"
       icon="envelope"
     />
-    <!-- Wolle <base-button
-        :disabled="disabled"
-        :loading="$apollo.loading"
-        filled
-        name="submit"
-        type="submit"
-        icon="envelope"
-      >
-        {{ $t('components.registration.signup.form.submit') }}
-      </base-button> -->
     <slot></slot>
     <ds-text v-if="sliderData.collectedInputData.emailSend">
-      <!-- Wolle <ds-text v-if="sliderData.collectedInputData.emailSend"> -->
       <input id="checkbox" type="checkbox" v-model="sendEmailAgain" :checked="sendEmailAgain" />
       <label for="checkbox0">
         <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
@@ -120,8 +109,6 @@ export default {
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
       // have checkmarks available.
       sendEmailAgain: false,
-      // Wolle disabled: true,
-      // Wolle data: null,
       error: null, // Wolle
     }
   },
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index ecf7a8710..3fcaeeb4f 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -22,9 +22,6 @@
     <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>
@@ -49,7 +46,6 @@ export default {
           message: this.$t('components.enter-nonce.form.validations.length'),
         },
       },
-      // Wolle disabled: true,
     }
   },
   mounted: function () {
@@ -89,22 +85,12 @@ export default {
       })
     },
     async handleInput() {
-      // this.disabled = true
-      // this.sliderData.setSliderValuesCallback(false)
       this.sendValidation()
     },
     async handleInputValid() {
-      // this.disabled = false
-      // const { nonce } = this.formData
-      // validate in backend?
-      // toaster?
-      // this.sliderData.setSliderValuesCallback(true, { nonce })
       this.sendValidation()
     },
     handleSubmitVerify() {
-      // const { nonce } = this.formData
-      // const email = this.email
-      // this.$emit('nonceEntered', { email, nonce })
     },
     onNextClick() {
       return true
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index 28d0ea5b3..a7a0c80da 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -17,6 +17,9 @@ const plugins = [
         if (JSON.stringify(data).includes('SignupByInvitation')) {
           return { data: { SignupByInvitation: { email: data.variables.email } } }
         }
+        if (JSON.stringify(data).includes('SignupVerification')) {
+          return { data: { SignupByInvitation: { ...data.variables } } }
+        }
         throw new Error(`Mutation name not found!`)
       },
       query: (data) => {

From c12491d2aa5c064769e9fb6b7a472352ff091275 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 19:08:48 +0100
Subject: [PATCH 41/44] Fix linting

---
 webapp/components/Registration/RegistrationItemEnterNonce.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index 3fcaeeb4f..52ec572c2 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -90,8 +90,7 @@ export default {
     async handleInputValid() {
       this.sendValidation()
     },
-    handleSubmitVerify() {
-    },
+    handleSubmitVerify() {},
     onNextClick() {
       return true
     },

From 5b4724086ce59527df7321262e2e1d4cf735ec4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 19:28:21 +0100
Subject: [PATCH 42/44] Remove 'locale' and agreed terms and conditions version
 from slider data collection

---
 .../ComponentSlider/ComponentSlider.vue       |  2 +-
 .../RegistrationItemCreateUserAccount.vue     | 19 +++++++------------
 .../RegistrationItemEnterEmail.vue            |  2 +-
 .../RegistrationItemEnterInvite.vue           |  2 +-
 .../Registration/RegistrationSlider.story.js  | 12 ++----------
 .../Registration/RegistrationSlider.vue       | 10 ++--------
 6 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue
index ce5000d53..9ecaa5711 100644
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@@ -55,7 +55,7 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderData.sliderIndex // have a shorter notation
+      return this.sliderData.sliderIndex // to have a shorter notation
     },
   },
   methods: {
diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index 8af73c98a..c76e6f71e 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -249,7 +249,6 @@ export default {
   methods: {
     sendValidation() {
       const { name, about, password, passwordConfirmation } = this.formData
-      const termsAndConditionsAgreedVersion = VERSION
       const {
         termsAndConditionsConfirmed,
         dataPrivacy,
@@ -257,22 +256,18 @@ export default {
         noCommercial,
         noPolitical,
       } = this
-      const locale = this.$i18n.locale()
-      // Wolle validate in backend
-      // toaster
+
       this.sliderData.setSliderValuesCallback(this.validInput, {
         collectedInputData: {
           name,
           about,
           password,
           passwordConfirmation,
-          termsAndConditionsAgreedVersion,
           termsAndConditionsConfirmed,
           dataPrivacy,
           minimumAge,
           noCommercial,
           noPolitical,
-          locale,
         },
       })
     },
@@ -301,12 +296,12 @@ export default {
           },
         })
         this.response = 'success'
-        setTimeout(() => {
-          this.$emit('userCreated', {
-            email,
-            password,
-          })
-        }, 3000)
+        // Wolle setTimeout(() => {
+        //   this.$emit('userCreated', {
+        //     email,
+        //     password,
+        //   })
+        // }, 3000)
       } catch (err) {
         this.response = 'error'
       }
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index df96bc93c..d2b886fc5 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -135,7 +135,7 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderData.sliderIndex
+      return this.sliderData.sliderIndex // to have a shorter notation
     },
     // Wolle submitMessage() {
     //   const { email } = this.data.Signup
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 5b901131b..b52704224 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -64,7 +64,7 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderData.sliderIndex
+      return this.sliderData.sliderIndex // to have a shorter notation
     },
     validInput() {
       return this.formData.inviteCode.length === 6
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index a7a0c80da..fc6dd3e32 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -60,13 +60,11 @@ storiesOf('RegistrationSlider', module)
           password: 'Hello',
           passwordConfirmation: 'Hello',
           about: `Hey`,
-          termsAndConditionsAgreedVersion: null,
           termsAndConditionsConfirmed: true,
           dataPrivacy: true,
           minimumAge: true,
           noCommercial: true,
           noPolitical: true,
-          locale: null,
         },
       },
     }),
@@ -96,13 +94,11 @@ storiesOf('RegistrationSlider', module)
           password: 'Hello',
           passwordConfirmation: 'Hello',
           about: `Hey`,
-          termsAndConditionsAgreedVersion: null,
           termsAndConditionsConfirmed: true,
           dataPrivacy: true,
           minimumAge: true,
           noCommercial: true,
           noPolitical: true,
-          locale: null,
         },
       },
     }),
@@ -118,19 +114,17 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: null,
           email: 'wolle.huss@pjannto.com',
-          emailSend: false,
+          emailSend: true,
           nonce: null,
           name: null,
           password: null,
           passwordConfirmation: null,
           about: null,
-          termsAndConditionsAgreedVersion: null,
           termsAndConditionsConfirmed: null,
           dataPrivacy: null,
           minimumAge: null,
           noCommercial: null,
           noPolitical: null,
-          locale: null,
         },
       },
     }),
@@ -146,19 +140,17 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: null,
           email: 'wolle.huss@pjannto.com',
-          emailSend: null,
+          emailSend: true,
           nonce: 'NTRSCZ',
           name: 'Wolle',
           password: 'Hello',
           passwordConfirmation: 'Hello',
           about: `Hey`,
-          termsAndConditionsAgreedVersion: null,
           termsAndConditionsConfirmed: true,
           dataPrivacy: true,
           minimumAge: true,
           noCommercial: true,
           noPolitical: true,
-          locale: null,
         },
       },
     }),
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 5bafc39a3..25af74e05 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -35,11 +35,7 @@
         </template>
 
         <template #create-user-account>
-          <registration-item-create-user-account
-            :sliderData="sliderData"
-            nonce="AAAAAA"
-            email="user@example.org"
-          />
+          <registration-item-create-user-account :sliderData="sliderData" />
         </template>
 
         <template #footer>
@@ -164,13 +160,11 @@ export default {
           password: null,
           passwordConfirmation: null,
           about: null,
-          termsAndConditionsAgreedVersion: null,
           termsAndConditionsConfirmed: null,
           dataPrivacy: null,
           minimumAge: null,
           noCommercial: null,
           noPolitical: null,
-          locale: null, // Wolle: what to do? Is collected in the last slider?! and gets stored in the database …
         },
         sliderIndex: 0,
         sliders: sliders,
@@ -182,7 +176,7 @@ export default {
   },
   computed: {
     sliderIndex() {
-      return this.sliderData.sliderIndex
+      return this.sliderData.sliderIndex // to have a shorter notation
     },
   },
   methods: {

From 9d617f3cbb826854643769d992b809d419f9753f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sat, 27 Feb 2021 19:55:16 +0100
Subject: [PATCH 43/44] Remove ComponentSlider story

---
 .../ComponentSlider/ComponentSlider.story.js  | 128 ------------------
 1 file changed, 128 deletions(-)
 delete mode 100644 webapp/components/ComponentSlider/ComponentSlider.story.js

diff --git a/webapp/components/ComponentSlider/ComponentSlider.story.js b/webapp/components/ComponentSlider/ComponentSlider.story.js
deleted file mode 100644
index 8a7bac923..000000000
--- a/webapp/components/ComponentSlider/ComponentSlider.story.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import { storiesOf } from '@storybook/vue'
-import { withA11y } from '@storybook/addon-a11y'
-import ComponentSlider from './ComponentSlider.vue'
-import helpers from '~/storybook/helpers'
-
-helpers.init()
-
-// export const searchResults = [
-//   {
-//     id: 'post-by-jenny',
-//     __typename: 'Post',
-//     slug: 'user-post-by-jenny',
-//     title: 'User Post by Jenny',
-//     value: 'User Post by Jenny',
-//     shoutedCount: 0,
-//     commentsCount: 4,
-//     createdAt: '2019-11-13T03:03:16.155Z',
-//     author: {
-//       id: 'u3',
-//       name: 'Jenny Rostock',
-//       slug: 'jenny-rostock',
-//     },
-//   },
-//   {
-//     id: 'f48f00a0-c412-432f-8334-4276a4e15d1c',
-//     __typename: 'Post',
-//     slug: 'eum-quos-est-molestiae-enim-magni-consequuntur-sed-commodi-eos',
-//     title: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
-//     value: 'Eum quos est molestiae enim magni consequuntur sed commodi eos.',
-//     shoutedCount: 0,
-//     commentsCount: 0,
-//     createdAt: '2019-11-13T03:00:45.478Z',
-//     author: {
-//       id: 'u6',
-//       name: 'Louie',
-//       slug: 'louie',
-//     },
-//   },
-//   {
-//     id: 'p7',
-//     __typename: 'Post',
-//     slug: 'this-is-post-7',
-//     title: 'This is post #7',
-//     value: 'This is post #7',
-//     shoutedCount: 1,
-//     commentsCount: 1,
-//     createdAt: '2019-11-13T03:00:23.098Z',
-//     author: {
-//       id: 'u6',
-//       name: 'Louie',
-//       slug: 'louie',
-//     },
-//   },
-//   {
-//     id: 'p12',
-//     __typename: 'Post',
-//     slug: 'this-is-post-12',
-//     title: 'This is post #12',
-//     value: 'This is post #12',
-//     shoutedCount: 0,
-//     commentsCount: 12,
-//     createdAt: '2019-11-13T03:00:23.098Z',
-//     author: {
-//       id: 'u6',
-//       name: 'Louie',
-//       slug: 'louie',
-//     },
-//   },
-//   {
-//     id: 'u1',
-//     __typename: 'User',
-//     avatar: {
-//       url:
-//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
-//     },
-//     name: 'Peter Lustig',
-//     slug: 'peter-lustig',
-//   },
-//   {
-//     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
-//     __typename: 'User',
-//     avatar: {
-//       url:
-//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
-//     },
-//     name: 'Herbert Schultz',
-//     slug: 'herbert-schultz',
-//   },
-//   {
-//     id: 'u2',
-//     __typename: 'User',
-//     avatar: {
-//       url:
-//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
-//     },
-//     name: 'Bob der Baumeister',
-//     slug: 'bob-der-baumeister',
-//   },
-//   {
-//     id: '7b654f72-f4da-4315-8bed-39de0859754b',
-//     __typename: 'User',
-//     avatar: {
-//       url:
-//         'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
-//     },
-//     name: 'Tonya Mohr',
-//     slug: 'tonya-mohr',
-//   },
-//   {
-//     id: 'Hashtag',
-//     __typename: 'Tag',
-//   },
-// ]
-
-storiesOf('ComponentSlider', module)
-  .addDecorator(withA11y)
-  .addDecorator(helpers.layout)
-  .add('standard', () => ({
-    components: { ComponentSlider },
-    store: helpers.store,
-    data: () => ({
-      // searchResults,
-    }),
-    template: `
-      <component-slider>
-      </component-slider>
-    `,
-  }))

From 77c45529bd1e23f29b5450adfd2d3ac9ef2f46e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Sun, 28 Feb 2021 16:48:30 +0100
Subject: [PATCH 44/44] Refine small things

---
 webapp/components/Registration/RegistrationSlider.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 25af74e05..e69231c78 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -180,10 +180,9 @@ export default {
     },
   },
   methods: {
-    setSliderValuesCallback(
-      isValid,
-      { collectedInputData, sliderData, sliderSettings }, // sliderCallback = null,
-    ) {
+    setSliderValuesCallback(isValid, { collectedInputData, sliderData, sliderSettings }) {
+      // all changes of 'this.sliders' has to be filled in from the top to be spread to the component slider and all slider components in the slot
+
       this.sliderData.sliders[this.sliderIndex].validated = isValid
 
       if (collectedInputData) {
@@ -218,11 +217,15 @@ export default {
       }
     },
     sliderSelectorCallback(selectedIndex) {
+      // all changes of 'this.sliders' has to be filled in from the top to be spread to the component slider and all slider components in the slot
+
       if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) {
         this.sliderData.sliderIndex = selectedIndex
       }
     },
     buttonCallback(success) {
+      // all changes of 'this.sliders' has to be filled in from the top to be spread to the component slider and all slider components in the slot
+
       return success
     },
   },