Study validation and errors watching

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;
     // }

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 v-slot="{ errors }">
-      <template>
+      <!-- <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,
+      // termsAndConditionsConfirmed: false,
-      dataPrivacy: false,
+      // dataPrivacy: false,
-      minimumAge: false,
+      // minimumAge: false,
-      noCommercial: false,
+      // noCommercial: false,
-      noPolitical: 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 (
+      // console.log('valid !!! this.formErrors: ', this.formErrors)
-        this.errors ||
+      // console.log('valid !!! this.$slots: ', this.$slots)
-        !this.termsAndConditionsConfirmed ||
+      // console.log('valid !!! this.$scopedSlots: ', this.$scopedSlots)
-        !this.dataPrivacy ||
+      // console.log('this.formSchema: ', this.formSchema)
-        !this.minimumAge ||
+      // console.log('this.formData: ', this.formData)
-        !this.noCommercial ||
+      // return (this.formErrors ||
-        !this.noPolitical
+      //   !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 { name, 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()
+        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,
+          // email,
-          nonce,
+          // 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 {

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: {

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.sliders[this.sliderIndex].validated = is
-        this.sliderData.collectedComponentData = {
+      // if (is) {
-          ...this.sliderData.collectedComponentData,
+      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
+          }
         }
       }
     },

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>

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