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">
-              {{ backendErrors.message }}
-            </ds-text>
+            <ds-text align="center" bold color="danger">{{ 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,23 +120,30 @@ export default {
     email: { type: String, required: true },
   },
   methods: {
+    checked: function() {
+      this.backendErrors = { message: '' }
+    },
     async submit() {
-      const { name, password, about } = this.formData
-      const { email, nonce } = this
-      try {
-        await this.$apollo.mutate({
-          mutation: SignupVerificationMutation,
-          variables: { name, password, about, email, nonce },
-        })
-        this.success = true
-        setTimeout(() => {
-          this.$emit('userCreated', {
-            email,
-            password,
+      if (this.checkedDefault) {
+        const { name, password, about } = this.formData
+        const { email, nonce } = this
+        try {
+          await this.$apollo.mutate({
+            mutation: SignupVerificationMutation,
+            variables: { name, password, about, email, nonce },
           })
-        }, 3000)
-      } catch (err) {
-        this.backendErrors = err
+          this.success = true
+          setTimeout(() => {
+            this.$emit('userCreated', {
+              email,
+              password,
+            })
+          }, 3000)
+        } 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:",
@@ -527,14 +528,14 @@
       "description": "Sollte Dir die Alphaversion unseres Netzwerks wider Erwarten, egal aus welchen Gründen, nicht gefallen, überweisen wir Dir Deine gespendeten Monatsbeiträge innerhalb der ersten 2 Monate gerne zurück. Einfach Mail an:  <a href=\"mailto:info@human-connection.org\" target=\"_blank\" s> info@human-connection.org </a> Achtung: Viele Funktionen werden erst nach und nach eingebaut."
     },
     "questions": {
-    "title": "Fragen",
-    "description": "Die Termine und Links zu den Zoom-Räumen findest Du hier: <a href=\"https://human-connection.org/events-und-news/\" target=\"_blank\" >https://human-connection.org/veranstaltungen/ </a>"
+      "title": "Fragen",
+      "description": "Die Termine und Links zu den Zoom-Räumen findest Du hier: <a href=\"https://human-connection.org/events-und-news/\" target=\"_blank\" >https://human-connection.org/veranstaltungen/ </a>"
     },
     "human-connection": {
-    "title": "Von Menschen für Menschen:",
-    "description": "Bitte hilf uns weitere monatlichen Spender für Human Connection zu bekommen, damit das Netzwerk so schnell wie möglich offiziell an den Start gehen kann. <a href=\"https://human-connection.org/\" target=\"_blank\"> https://human-connection.org </a>"
+      "title": "Von Menschen für Menschen:",
+      "description": "Bitte hilf uns weitere monatlichen Spender für Human Connection zu bekommen, damit das Netzwerk so schnell wie möglich offiziell an den Start gehen kann. <a href=\"https://human-connection.org/\" target=\"_blank\"> https://human-connection.org </a>"
     },
     "have-fun": "Jetzt aber viel Spaß mit der Alpha von Human Connection! Für den ersten Weltfrieden. ♥︎",
     "closing": "Herzlichst <br><br> Euer Human Connection Team"
   }
-}
+}

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",
@@ -536,4 +538,4 @@
     "have-fun": "Now have fun with the alpha version of Human Connection! For the first universal peace. ♥︎",
     "closing": "Thank you very much <br> <br> your Human Connection Team"
   }
-}
+}