add ceckbox, confirmed terms of use

webapp/components/Registration/CreateUserAccount.spec.js

@@ -56,6 +56,7 @@ describe('CreateUserAccount', () => {
             wrapper.find('input#name').setValue('John Doe')
             wrapper.find('input#password').setValue('hellopassword')
             wrapper.find('input#passwordConfirmation').setValue('hellopassword')
+            wrapper.find('input#checkbox').simulate('change')
             await wrapper.find('form').trigger('submit')
             await wrapper.html()
           }

webapp/components/Registration/CreateUserAccount.vue

@@ -46,11 +46,15 @@
           :label="$t('settings.security.change-password.label-new-password-confirm')"
         />
         <password-strength :password="formData.password" />
+        <ds-section>
+          <ds-text>
+            <input id="checkbox" type="checkbox" v-model="checkedDefault" @change="checked" />
+            <label for="checkbox" v-html="$t('site.termsAndConditionsCeckbox')"></label>
+          </ds-text>
+        </ds-section>
         <template slot="footer">
           <ds-space class="backendErrors" v-if="backendErrors">
-            <ds-text align="center" bold color="danger">
+            <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
-              {{ backendErrors.message }}
-            </ds-text>
           </ds-space>
           <ds-button
             style="float: right;"
@@ -72,7 +76,6 @@
 import gql from 'graphql-tag'
 import PasswordStrength from '../Password/Strength'
 import PasswordForm from '~/components/utils/PasswordFormHelper'
-
 export const SignupVerificationMutation = gql`
   mutation($nonce: String!, $name: String!, $email: String!, $password: String!) {
     SignupVerification(nonce: $nonce, email: $email, name: $name, password: $password) {
@@ -109,6 +112,7 @@ export default {
       disabled: true,
       success: null,
       backendErrors: null,
+      checkedDefault: false,
     }
   },
   props: {
@@ -116,7 +120,11 @@ export default {
     email: { type: String, required: true },
   },
   methods: {
+    checked: function() {
+      this.backendErrors = { message: '' }
+    },
     async submit() {
+      if (this.checkedDefault) {
         const { name, password, about } = this.formData
         const { email, nonce } = this
         try {
@@ -134,6 +142,9 @@ export default {
         } catch (err) {
           this.backendErrors = err
         }
+      } else {
+        this.backendErrors = { message: this.$t(`site.termsAndConditionsNoChecked`) }
+      }
     },
   },
 }

webapp/locales/de.json

@@ -22,7 +22,9 @@
     "responsible": "Verantwortlicher gemäß § 55 Abs. 2 RStV ",
     "bank": "Bankverbindung",
     "germany": "Deutschland",
-    "code-of-conduct": "Verhaltenscodex"
+    "code-of-conduct": "Verhaltenscodex",
+    "termsAndConditionsCeckbox": "<a href=\"/terms-and-conditions\" target=\"_blank\">Nutzungsbedingungen</a> gelesen und verstanden",
+    "termsAndConditionsNoChecked": "Bitte lies und bestätige die Nutzungsbednigungen!"
   },
   "sorting": {
     "newest": "Neuste",
@@ -459,7 +461,6 @@
       "title": "Zweck",
       "description": "Mit diesen Verhaltensregeln regeln wir die wesentlichen Grundsätze für das Verhalten in unserem Sozialen Netzwerk. Dabei ist die Menschenrechtscharta der Vereinten Nationen unsere Orientierung und bildet das Herz unseres Werteverständnisses. Die Verhaltensregeln dienen als Leitsätze für den persönlichen Auftritt und den Umgang untereinander. Wer als Nutzer im Human Connection Netzwerk aktiv ist, Beiträge verfasst, kommentiert oder mit anderen Nutzern, auch außerhalb des Netzwerkes, Kontakt aufnimmt, erkennt diese Verhaltensregeln als verbindlich an."
     },
-
     "expected-behaviour": {
       "title": "Erwartetes Verhalten",
       "description": "Die folgenden Verhaltensweisen werden von allen Community-Mitgliedern erwartet und gefordert:",

webapp/locales/en.json

@@ -22,7 +22,9 @@
     "responsible": "responsible for contents of this page (§ 55 Abs. 2 RStV)",
     "bank": "bank account",
     "germany": "Germany",
-    "code-of-conduct": "Code of Conduct"
+    "code-of-conduct": "Code of Conduct",
+    "termsAndConditionsCeckbox": "<a href=\"/terms-and-conditions\" target=\"_blank\">Terms and conditions</a> read and understood",
+    "termsAndConditionsNoChecked": "Please read and confirm the Terms and conditions!"
   },
   "sorting": {
     "newest": "Newest",