Simplifycomponent, improve texts

@ogerly there is a difference between read and confirm: You can read but
don't have to confirm the terms and conditions. Therefore it's quite
important that the user also confirms the terms and conditions.

webapp/components/Registration/CreateUserAccount.vue

@@ -52,11 +52,10 @@
             <input
               id="checkbox"
               type="checkbox"
-              v-model="checkedConfimed"
-              @change="checked"
-              :checked="checkedConfimed"
+              v-model="termsAndConditionsConfirmed"
+              :checked="termsAndConditionsConfirmed"
             />
-            <label for="checkbox" v-html="$t('site.termsAndConditionsRead')"></label>
+            <label for="checkbox" v-html="$t('site.termsAndConditionsConfirmed')"></label>
           </ds-text>
 
           <template slot="footer">
@@ -68,7 +67,7 @@
               icon="check"
               type="submit"
               :loading="$apollo.loading"
-              :disabled="errors"
+              :disabled="errors || !termsAndConditionsConfirmed"
               primary
             >
               {{ $t('actions.save') }}
@@ -120,7 +119,10 @@ export default {
       disabled: true,
       success: null,
       backendErrors: null,
-      checkedConfimed: false,
+      // TODO: Our styleguide does not support checkmarks.
+      // Integrate termsAndConditionsConfirmed into `this.formData` once we
+      // have checkmarks available.
+      termsAndConditionsConfirmed: false,
     }
   },
   props: {
@@ -128,30 +130,23 @@ export default {
     email: { type: String, required: true },
   },
   methods: {
-    checked: function() {
-      this.backendErrors = { message: null }
-    },
     async submit() {
-      if (this.checkedConfimed) {
-        const { name, password, about } = this.formData
-        const { email, nonce } = this
-        try {
-          await this.$apollo.mutate({
-            mutation: SignupVerificationMutation,
-            variables: { name, password, about, email, nonce },
+      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,
           })
-          this.success = true
-          setTimeout(() => {
-            this.$emit('userCreated', {
-              email,
-              password,
-            })
-          }, 3000)
-        } catch (err) {
-          this.backendErrors = err
-        }
-      } else {
-        this.backendErrors = { message: this.$t(`site.confirmTermsAndConditions`) }
+        }, 3000)
+      } catch (err) {
+        this.backendErrors = err
       }
     },
   },

webapp/locales/de.json

@@ -23,8 +23,7 @@
     "bank": "Bankverbindung",
     "germany": "Deutschland",
     "code-of-conduct": "Verhaltenscodex",
-    "termsAndConditionsRead": "<a href=\"/terms-and-conditions\" target=\"_blank\">Nutzungsbedingungen</a> gelesen und verstanden",
-    "confirmTermsAndConditions": "Bitte lies und bestätige die Nutzungsbednigungen!"
+    "termsAndConditionsConfirmed": "Ich habe die <a href=\"/terms-and-conditions\" target=\"_blank\">Nutzungsbedingungen</a> durchgelesen und stimme ihnen zu."
   },
   "sorting": {
     "newest": "Neuste",
@@ -538,4 +537,4 @@
     "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

@@ -23,8 +23,7 @@
     "bank": "bank account",
     "germany": "Germany",
     "code-of-conduct": "Code of Conduct",
-    "termsAndConditionsRead": "<a href=\"/terms-and-conditions\" target=\"_blank\">Terms and conditions</a> read and understood",
-    "confirmTermsAndConditions": "Please read and confirm the Terms and conditions!"
+    "termsAndConditionsConfirmed": "I have read and confirmed the <a href=\"/terms-and-conditions\" target=\"_blank\">terms and conditions</a>."
   },
   "sorting": {
     "newest": "Newest",
@@ -538,4 +537,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"
   }
-}
+}