Study validation and errors watching

2025-12-12 23:35:58 +00:00 · 2021-02-04 10:04:59 +01:00 · 2021-02-04 10:04:59 +01:00 · 19180ed872
commit 19180ed872
parent 0aa3daf5c7
6 changed files with 282 additions and 47 deletions
--- 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;
    // }
--- 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 {
--- 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: {
--- 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
+          }
        }
      }
    },
--- a/webapp/components/Registration/WatchScopedSlotsCallback.vue
+++ 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>
--- 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))