Add confirmation field

client/cypress/integration/registration.spec.js

@@ -144,6 +144,18 @@ describe('Registration', () => {
     cy.get('[data-cy="passwordConfirmation-local-errors"]').contains('Die Bestätigung von Passwort wiederholen stimmt nicht überein');
   });
 
+  it('displays error if terms are not accepted', () => {
+    cy.route('POST', isEmailAvailableUrl, "true");
+    cy.route('POST', registerUrl, registrationResponse);
+
+    cy.visit('/hello');
+    cy.checkEmailAvailable(registrationResponse.email);
+
+    cy.get('[data-cy="registration-title"]').contains('Damit Sie mySkillbox verwenden können, müssen Sie ein Konto erstellen.');
+    cy.register(registrationResponse.gender, registrationResponse.firstname, registrationResponse.lastname, 'Weg 1', 'Bern', '3001', 'Abcd1234!', 'Abcd1234!', false);
+    cy.get('[data-cy="acceptedTerms-local-errors"]').contains('Die AGBs und die Datenschutzbestimmungen müssen akzeptiert werden');
+  });
+
   it('redirects to hello if email is missing', () => {
     cy.visit('/register');
     cy.get('[data-cy="hello-title"]').contains('Wollen sie mySkillbox jetzt im Unterricht verwenden?');

client/cypress/support/commands.js

@@ -121,7 +121,7 @@ Cypress.Commands.add('enterPassword', (password) => {
   cy.get('[data-cy="login-button"]').click();
 });
 
-Cypress.Commands.add('register', (prefix, firstname, lastname, street, city, postcode, password, passwordConfirmation) => {
+Cypress.Commands.add('register', (prefix, firstname, lastname, street, city, postcode, password, passwordConfirmation, acceptTerms=true) => {
 
   let selection = prefix === 1 ? 'Herr' : 'Frau';
 
@@ -150,6 +150,10 @@ Cypress.Commands.add('register', (prefix, firstname, lastname, street, city, pos
     cy.get('[data-cy="password-input"]').type(password);
   }
 
+  if (acceptTerms) {
+    cy.get('[data-cy="acceptedTerms-input"]').click();
+  }
+
   cy.get('[data-cy="passwordConfirmation-input"]').type(passwordConfirmation);
   cy.get('[data-cy="register-button"]').click();
 });

client/src/components/Checkbox.vue

@@ -5,7 +5,9 @@
     :item="item"
     :type="'checkbox'"
     @input="passOn"
-  />
+  >
+    <slot></slot>
+  </base-input>
 </template>
 
 <script>

client/src/components/inputs/BaseInput.vue

@@ -12,7 +12,9 @@
       <tick v-if="type === 'checkbox'"/>
       <circle-icon v-if="type === 'radiobutton'"/>
     </span>
-    <span class="base-input-container__label">{{ label }}</span>
+    <span v-if="label" class="base-input-container__label">{{ label }}</span>
+    <slot v-if="!label" class="base-input-container__label">
+    </slot>
   </label>
 </template>
 

client/src/pages/registration.vue

@@ -216,6 +216,26 @@
           v-if="errors.has('passwordConfirmation') && submitted"
         >{{ errors.first('passwordConfirmation') }}</small>
       </div>
+      <div class="change-form__field skillboxform-input">
+        <checkbox
+          id="acceptedTerms"
+          name="acceptedTerms"
+          v-model="acceptedTerms"
+          class="skillboxform-input__checkbox"
+          :checked="acceptedTerms"
+          v-validate="'required:true'"
+          :class="{ 'skillboxform-input__input--error': errors.has('acceptedTerms') && submitted}"
+          data-cy="acceptedTerms-input"
+        >
+          <span>Hiermit akzeptiere ich die <a href="https://www.hep-verlag.ch/agb" target="_blank" class="hep-link">AGB</a> und
+          <a href="https://www.hep-verlag.ch/datenschutz" target="_blank" class="hep-link">Datenschutzbestimmungen</a></span>
+        </checkbox>
+        <small
+          v-if="errors.has('acceptedTerms') && submitted"
+          class="skillboxform-input__error"
+          data-cy="acceptedTerms-local-errors"
+        >Die AGBs und die Datenschutzbestimmungen müssen akzeptiert werden</small>
+      </div>
       <div class="skillboxform-input">
         <small
           class="skillboxform-input__error"
@@ -236,6 +256,7 @@
 
 import {register} from '../hep-client/index'
 import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
+import Checkbox from '@/components/Checkbox';
 
 function initialData() {
   return {
@@ -247,6 +268,7 @@ function initialData() {
       street: '',
       postcode: '',
       city: '',
+      acceptedTerms: false,
       firstnameErrors: '',
       lastnameErrors: '',
       emailErrors: '',
@@ -256,12 +278,15 @@ function initialData() {
       cityErrors: [],
       postcodeErrors: [],
       registrationError: '',
+      acceptedTermsError: [],
       submitted: false,
   }
 }
 
 export default {
-  components: {},
+  components: {
+    Checkbox
+  },
 
   data() {
     return Object.assign(