Handle validation of create user account and submit

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

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 })

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
+        }
       }
     },
   },