Refactor and reduce create account checkboxes after Ulf's suggestions

webapp/components/Registration/RegistrationSlideCreate.vue

@@ -73,22 +73,41 @@
             :checked="termsAndConditionsConfirmed"
           />
           <label for="checkbox0">
-            {{ $t('termsAndConditions.termsAndConditionsConfirmed') }}
+            <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
+            {{ $t('components.registration.create-user-account.termsAndCondsEtcConfirmed') }}
             <br />
-            <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link>
+            <!-- Wolle <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link> -->
+            <a :href="'/terms-and-conditions'" target="_blank">
+              {{ $t('site.termsAndConditions') }}
+            </a>
+            <br />
+            <!-- Wolle <nuxt-link to="/data-privacy">{{ $t('site.data-privacy') }}</nuxt-link> -->
+            <a :href="'/data-privacy'" target="_blank">
+              {{ $t('site.data-privacy') }}
+            </a>
           </label>
         </ds-text>
         <ds-text>
-          <input id="checkbox1" type="checkbox" v-model="dataPrivacy" :checked="dataPrivacy" />
+          <input
+            id="checkbox1"
+            type="checkbox"
+            v-model="recieveCommunicationAsEmailsEtcConfirmed"
+            :checked="recieveCommunicationAsEmailsEtcConfirmed"
+          />
           <label for="checkbox1">
-            {{ $t('components.registration.signup.form.data-privacy') }}
-            <br />
+            <!-- Wolle {{ $t('components.registration.signup.form.data-privacy') }} -->
+            {{
+              $t(
+                'components.registration.create-user-account.recieveCommunicationAsEmailsEtcConfirmed',
+              )
+            }}
+            <!-- Wolle <br />
             <nuxt-link to="/data-privacy">
               {{ $t('site.data-privacy') }}
-            </nuxt-link>
+            </nuxt-link> -->
           </label>
         </ds-text>
-        <ds-text>
+        <!-- Wolle <ds-text>
           <input id="checkbox2" type="checkbox" v-model="minimumAge" :checked="minimumAge" />
           <label
             for="checkbox2"
@@ -108,7 +127,7 @@
             for="checkbox4"
             v-html="$t('components.registration.signup.form.no-political')"
           ></label>
-        </ds-text>
+        </ds-text> -->
       </template>
     </ds-form>
   </div>
@@ -156,10 +175,11 @@ export default {
       // Integrate termsAndConditionsConfirmed into `this.formData` once we
       // have checkmarks available.
       termsAndConditionsConfirmed: false,
-      dataPrivacy: false,
-      minimumAge: false,
-      noCommercial: false,
-      noPolitical: false,
+      recieveCommunicationAsEmailsEtcConfirmed: false,
+      // Wolle dataPrivacy: false,
+      // minimumAge: false,
+      // noCommercial: false,
+      // noPolitical: false,
     }
   },
   mounted: function () {
@@ -179,18 +199,22 @@ export default {
         .termsAndConditionsConfirmed
         ? this.sliderData.collectedInputData.termsAndConditionsConfirmed
         : false
-      this.dataPrivacy = this.sliderData.collectedInputData.dataPrivacy
-        ? this.sliderData.collectedInputData.dataPrivacy
-        : false
-      this.minimumAge = this.sliderData.collectedInputData.minimumAge
-        ? this.sliderData.collectedInputData.minimumAge
-        : false
-      this.noCommercial = this.sliderData.collectedInputData.noCommercial
-        ? this.sliderData.collectedInputData.noCommercial
-        : false
-      this.noPolitical = this.sliderData.collectedInputData.noPolitical
-        ? this.sliderData.collectedInputData.noPolitical
+      this.recieveCommunicationAsEmailsEtcConfirmed = this.sliderData.collectedInputData
+        .recieveCommunicationAsEmailsEtcConfirmed
+        ? this.sliderData.collectedInputData.recieveCommunicationAsEmailsEtcConfirmed
         : false
+      // Wolle this.dataPrivacy = this.sliderData.collectedInputData.dataPrivacy
+      //   ? this.sliderData.collectedInputData.dataPrivacy
+      //   : false
+      // this.minimumAge = this.sliderData.collectedInputData.minimumAge
+      //   ? this.sliderData.collectedInputData.minimumAge
+      //   : false
+      // this.noCommercial = this.sliderData.collectedInputData.noCommercial
+      //   ? this.sliderData.collectedInputData.noCommercial
+      //   : false
+      // this.noPolitical = this.sliderData.collectedInputData.noPolitical
+      //   ? this.sliderData.collectedInputData.noPolitical
+      //   : false
       this.sendValidation()
 
       this.sliderData.setSliderValuesCallback(this.validInput, {
@@ -205,10 +229,11 @@ export default {
         this.formData.password.length >= 1 &&
         this.formData.password === this.formData.passwordConfirmation &&
         this.termsAndConditionsConfirmed &&
-        this.dataPrivacy &&
-        this.minimumAge &&
-        this.noCommercial &&
-        this.noPolitical
+        this.recieveCommunicationAsEmailsEtcConfirmed
+        // Wolle this.dataPrivacy &&
+        // this.minimumAge &&
+        // this.noCommercial &&
+        // this.noPolitical
       )
     },
   },
@@ -216,28 +241,32 @@ export default {
     termsAndConditionsConfirmed() {
       this.sendValidation()
     },
-    dataPrivacy() {
-      this.sendValidation()
-    },
-    minimumAge() {
-      this.sendValidation()
-    },
-    noCommercial() {
-      this.sendValidation()
-    },
-    noPolitical() {
+    recieveCommunicationAsEmailsEtcConfirmed() {
       this.sendValidation()
     },
+    // Wolle dataPrivacy() {
+    //   this.sendValidation()
+    // },
+    // minimumAge() {
+    //   this.sendValidation()
+    // },
+    // noCommercial() {
+    //   this.sendValidation()
+    // },
+    // noPolitical() {
+    //   this.sendValidation()
+    // },
   },
   methods: {
     sendValidation() {
       const { name, password, passwordConfirmation } = this.formData
       const {
         termsAndConditionsConfirmed,
-        dataPrivacy,
-        minimumAge,
-        noCommercial,
-        noPolitical,
+        recieveCommunicationAsEmailsEtcConfirmed,
+        // Wolle dataPrivacy,
+        // minimumAge,
+        // noCommercial,
+        // noPolitical,
       } = this
 
       this.sliderData.setSliderValuesCallback(this.validInput, {
@@ -246,10 +275,11 @@ export default {
           password,
           passwordConfirmation,
           termsAndConditionsConfirmed,
-          dataPrivacy,
-          minimumAge,
-          noCommercial,
-          noPolitical,
+          recieveCommunicationAsEmailsEtcConfirmed,
+          // dataPrivacy,
+          // minimumAge,
+          // noCommercial,
+          // noPolitical,
         },
       })
     },

webapp/components/Registration/RegistrationSlideEmail.vue

@@ -35,7 +35,6 @@
     <ds-text v-if="sliderData.collectedInputData.emailSend">
       <input id="checkbox" type="checkbox" v-model="sendEmailAgain" :checked="sendEmailAgain" />
       <label for="checkbox0">
-        <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
         {{ $t('components.email.form.sendEmailAgain') }}
       </label>
     </ds-text>

webapp/components/Registration/RegistrationSlideInvite.vue

@@ -45,7 +45,7 @@ export default {
           // min: 6,
           // max: 6,
           required: true,
-          message: this.$t('components.enter-invite.form.validations.length'),
+          // Wolle don't mention the amount of chars (remove from locales) message: this.$t('components.enter-invite.form.validations.length'),
         },
       },
       dbRequestInProgress: false,

webapp/components/Registration/RegistrationSlider.story.js

@@ -101,10 +101,11 @@ storiesOf('RegistrationSlider', module)
           password: 'Hello',
           passwordConfirmation: 'Hello',
           termsAndConditionsConfirmed: true,
-          dataPrivacy: true,
-          minimumAge: true,
-          noCommercial: true,
-          noPolitical: true,
+          recieveCommunicationAsEmailsEtcConfirmed: true,
+          // Wolle dataPrivacy: true,
+          // minimumAge: true,
+          // noCommercial: true,
+          // noPolitical: true,
         },
       },
     }),
@@ -134,10 +135,11 @@ storiesOf('RegistrationSlider', module)
           password: 'Hello',
           passwordConfirmation: 'Hello',
           termsAndConditionsConfirmed: true,
-          dataPrivacy: true,
-          minimumAge: true,
-          noCommercial: true,
-          noPolitical: true,
+          recieveCommunicationAsEmailsEtcConfirmed: true,
+          // Wolle dataPrivacy: true,
+          // minimumAge: true,
+          // noCommercial: true,
+          // noPolitical: true,
         },
       },
     }),
@@ -159,10 +161,11 @@ storiesOf('RegistrationSlider', module)
           password: null,
           passwordConfirmation: null,
           termsAndConditionsConfirmed: null,
-          dataPrivacy: null,
-          minimumAge: null,
-          noCommercial: null,
-          noPolitical: null,
+          recieveCommunicationAsEmailsEtcConfirmed: null,
+          // Wolle dataPrivacy: null,
+          // minimumAge: null,
+          // noCommercial: null,
+          // noPolitical: null,
         },
       },
     }),
@@ -184,10 +187,11 @@ storiesOf('RegistrationSlider', module)
           password: 'Hello',
           passwordConfirmation: 'Hello',
           termsAndConditionsConfirmed: true,
-          dataPrivacy: true,
-          minimumAge: true,
-          noCommercial: true,
-          noPolitical: true,
+          recieveCommunicationAsEmailsEtcConfirmed: true,
+          // Wolle dataPrivacy: true,
+          // minimumAge: true,
+          // noCommercial: true,
+          // noPolitical: true,
         },
       },
     }),

webapp/components/Registration/RegistrationSlider.vue

@@ -176,10 +176,11 @@ export default {
           password: null,
           passwordConfirmation: null,
           termsAndConditionsConfirmed: null,
-          dataPrivacy: null,
-          minimumAge: null,
-          noCommercial: null,
-          noPolitical: null,
+          recieveCommunicationAsEmailsEtcConfirmed: null,
+          // Wolle dataPrivacy: null,
+          // minimumAge: null,
+          // noCommercial: null,
+          // noPolitical: null,
         },
         sliderIndex: 0,
         sliders: sliders,

webapp/locales/de.json

@@ -170,7 +170,9 @@
         "buttonTitle": "Erstellen",
         "error": "Es konnte kein Benutzerkonto erstellt werden!",
         "help": "Vielleicht war der Bestätigungscode falsch oder abgelaufen? Wenn das Problem weiterhin besteht, schicke uns gerne eine E-Mail an:",
+        "recieveCommunicationAsEmailsEtcConfirmed": "Ich stimme auch dem Erhalt von E-Mails und anderen Formen der Kommunikation (z.B. Push-Benachrichtigungen) zu.",
         "success": "Dein Benutzerkonto wurde erstellt!",
+        "termsAndCondsEtcConfirmed": "Ich habe folgendes gelesen, verstanden und stimme zu:",
         "title": "Benutzerkonto anlegen"
       },
       "email": {

webapp/locales/en.json

@@ -170,7 +170,9 @@
         "buttonTitle": "Create",
         "error": "No user account could be created!",
         "help": " Maybe the confirmation was invalid? In case of problems, feel free to ask for help by sending us a mail to:",
+        "recieveCommunicationAsEmailsEtcConfirmed": "I also agree to receive e-mails and other forms of communication (e.g. push notifications).",
         "success": "Your account has been created!",
+        "termsAndCondsEtcConfirmed": "I have read, understand and agree to the following:",
         "title": "Create user account"
       },
       "email": {