Confirm, privacy policy, minimum age at registration

webapp/components/Registration/CreateUserAccount.spec.js

@@ -61,7 +61,9 @@ describe('CreateUserAccount', () => {
             wrapper.find('input#password').setValue('hellopassword')
             wrapper.find('textarea#about').setValue('Hello I am the `about` attribute')
             wrapper.find('input#passwordConfirmation').setValue('hellopassword')
-            wrapper.find('input#checkbox').setChecked()
+            wrapper.find('input#checkbox0').setChecked()
+            wrapper.find('input#checkbox1').setChecked()
+            wrapper.find('input#checkbox2').setChecked()
             await wrapper.find('form').trigger('submit')
             await wrapper.html()
           }

webapp/components/Registration/CreateUserAccount.vue

@@ -64,7 +64,7 @@
 
         <ds-text>
           <input
-            id="checkbox"
+            id="checkbox0"
             type="checkbox"
             v-model="termsAndConditionsConfirmed"
             :checked="termsAndConditionsConfirmed"
@@ -74,12 +74,24 @@
             v-html="$t('termsAndConditions.termsAndConditionsConfirmed')"
           ></label>
         </ds-text>
+        <p>
+          <label>
+            <input id="checkbox1" type="checkbox" v-model="dataPrivacy" :checked="dataPrivacy" />
+            <span v-html="$t('components.registration.signup.form.data-privacy')"></span>
+          </label>
+        </p>
+        <p>
+          <label>
+            <input id="checkbox2" type="checkbox" v-model="minimumAge" :checked="minimumAge" />
+            <span v-html="$t('components.registration.signup.form.minimum-age')"></span>
+          </label>
+        </p>
         <ds-button
           style="float: right;"
           icon="check"
           type="submit"
           :loading="$apollo.loading"
-          :disabled="errors || !termsAndConditionsConfirmed"
+          :disabled="errors || !termsAndConditionsConfirmed || !dataPrivacy || !minimumAge"
           primary
         >
           {{ $t('actions.save') }}
@@ -129,6 +141,8 @@ export default {
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
       // have checkmarks available.
       termsAndConditionsConfirmed: false,
+      dataPrivacy: false,
+      minimumAge: false,
     }
   },
   props: {

webapp/components/Registration/Signup.vue

@@ -30,25 +30,6 @@
         name="email"
         icon="envelope"
       />
-      <p>
-        <label class="add-checkbox">
-          <input @change="handleInputValid" type="checkbox" v-model="checkbox1" />
-          <span v-html="$t('components.registration.signup.form.terms-and-condition')"></span>
-        </label>
-      </p>
-      <p>
-        <label class="add-checkbox">
-          <input@change="handleInputValid" type="checkbox" v-model="checkbox2"/>
-          <span v-html="$t('components.registration.signup.form.data-privacy')"></span>
-        </label>
-      </p>
-      <p>
-        <label class="add-checkbox">
-          <input @change="handleInputValid" type="checkbox" v-model="checkbox3" />
-          <span v-html="$t('components.registration.signup.form.minimum-age')"></span>
-        </label>
-      </p>
-
       <ds-button
         :disabled="disabled"
         :loading="$apollo.loading"
@@ -121,9 +102,6 @@ export default {
       disabled: true,
       success: false,
       error: null,
-      checkbox1: false,
-      checkbox2: false,
-      checkbox3: false,
     }
   },
   computed: {
@@ -137,11 +115,7 @@ export default {
       this.disabled = true
     },
     handleInputValid() {
-      if (this.checkbox1 && this.checkbox2 && this.checkbox3) {
+      this.disabled = false
-        this.disabled = false
-      } else {
-        this.disabled = true
-      }
     },
     async handleSubmit() {
       const mutation = this.token ? SignupByInvitationMutation : SignupMutation

webapp/locales/de.json

@@ -30,7 +30,7 @@
         "title": "Mach mit bei Human Connection!",
         "form": {
           "description": "Um loszulegen, gib deine E-Mail Adresse ein:",
-          "terms-and-condition": "Ich stimme den <a href=\"/terms-and-conditions\"><ds-text bold color=\"primary\" > Nutzungsbedingungen!</ds-text></a>zu.",
+          "terms-and-condition": "Ich stimme den <a href=\"/terms-and-conditions\"><ds-text bold color=\"primary\" > Nutzungsbedingungen</ds-text></a>zu.",
           "data-privacy": "Ich habe die  <a href=\"https://human-connection.org/datenschutz/\" target=\"_blank\"><ds-text bold color=\"primary\" >Datenschutzerklärungen!</ds-text></a> gelesen und verstanden",
           "minimum-age": "Ich bin 18 Jahre oder älter.",
           "invitation-code": "Dein Einladungscode lautet: <b>{code}</b>",