Merge pull request #1224 from Human-Connection/A-1208-Registration-without-user-condition-confirmation

🍰 Registration confirmation of terms of use added II

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').setChecked()
             await wrapper.find('form').trigger('submit')
             await wrapper.html()
           }

webapp/components/Registration/CreateUserAccount.vue

@@ -1,71 +1,82 @@
 <template>
-  <ds-card v-if="success" class="success">
-    <ds-space>
-      <sweetalert-icon icon="success" />
-      <ds-text align="center" bold color="success">
-        {{ $t('registration.create-user-account.success') }}
-      </ds-text>
-    </ds-space>
-  </ds-card>
-  <ds-form
-    v-else
-    class="create-user-account"
-    v-model="formData"
-    :schema="formSchema"
-    @submit="submit"
-  >
-    <template slot-scope="{ errors }">
-      <ds-card :header="$t('registration.create-user-account.title')">
-        <ds-input
-          id="name"
-          model="name"
-          icon="user"
-          :label="$t('settings.data.labelName')"
-          :placeholder="$t('settings.data.namePlaceholder')"
-        />
-        <ds-input
-          id="bio"
-          model="about"
-          type="textarea"
-          rows="3"
-          :label="$t('settings.data.labelBio')"
-          :placeholder="$t('settings.data.labelBio')"
-        />
-        <ds-input
-          id="password"
-          model="password"
-          type="password"
-          autocomplete="off"
-          :label="$t('settings.security.change-password.label-new-password')"
-        />
-        <ds-input
-          id="passwordConfirmation"
-          model="passwordConfirmation"
-          type="password"
-          autocomplete="off"
-          :label="$t('settings.security.change-password.label-new-password-confirm')"
-        />
-        <password-strength :password="formData.password" />
-        <template slot="footer">
-          <ds-space class="backendErrors" v-if="backendErrors">
-            <ds-text align="center" bold color="danger">
-              {{ backendErrors.message }}
-            </ds-text>
-          </ds-space>
-          <ds-button
-            style="float: right;"
-            icon="check"
-            type="submit"
-            :loading="$apollo.loading"
-            :disabled="errors"
-            primary
-          >
-            {{ $t('actions.save') }}
-          </ds-button>
-        </template>
-      </ds-card>
-    </template>
-  </ds-form>
+  <ds-container width="small">
+    <ds-card v-if="success" class="success">
+      <ds-space>
+        <sweetalert-icon icon="success" />
+        <ds-text align="center" bold color="success">
+          {{ $t('registration.create-user-account.success') }}
+        </ds-text>
+      </ds-space>
+    </ds-card>
+    <ds-form
+      v-else
+      class="create-user-account"
+      v-model="formData"
+      :schema="formSchema"
+      @submit="submit"
+    >
+      <template slot-scope="{ errors }">
+        <ds-card :header="$t('registration.create-user-account.title')">
+          <ds-input
+            id="name"
+            model="name"
+            icon="user"
+            :label="$t('settings.data.labelName')"
+            :placeholder="$t('settings.data.namePlaceholder')"
+          />
+          <ds-input
+            id="bio"
+            model="about"
+            type="textarea"
+            rows="3"
+            :label="$t('settings.data.labelBio')"
+            :placeholder="$t('settings.data.labelBio')"
+          />
+          <ds-input
+            id="password"
+            model="password"
+            type="password"
+            autocomplete="off"
+            :label="$t('settings.security.change-password.label-new-password')"
+          />
+          <ds-input
+            id="passwordConfirmation"
+            model="passwordConfirmation"
+            type="password"
+            autocomplete="off"
+            :label="$t('settings.security.change-password.label-new-password-confirm')"
+          />
+          <password-strength :password="formData.password" />
+
+          <ds-text>
+            <input
+              id="checkbox"
+              type="checkbox"
+              v-model="termsAndConditionsConfirmed"
+              :checked="termsAndConditionsConfirmed"
+            />
+            <label for="checkbox" v-html="$t('site.termsAndConditionsConfirmed')"></label>
+          </ds-text>
+
+          <template slot="footer">
+            <ds-space class="backendErrors" v-if="backendErrors">
+              <ds-text align="center" bold color="danger">{{ backendErrors.message }}</ds-text>
+            </ds-space>
+            <ds-button
+              style="float: right;"
+              icon="check"
+              type="submit"
+              :loading="$apollo.loading"
+              :disabled="errors || !termsAndConditionsConfirmed"
+              primary
+            >
+              {{ $t('actions.save') }}
+            </ds-button>
+          </template>
+        </ds-card>
+      </template>
+    </ds-form>
+  </ds-container>
 </template>
 
 <script>
@@ -73,7 +84,6 @@ import gql from 'graphql-tag'
 import PasswordStrength from '../Password/Strength'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 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) {
@@ -111,6 +121,10 @@ export default {
       disabled: true,
       success: null,
       backendErrors: null,
+      // TODO: Our styleguide does not support checkmarks.
+      // Integrate termsAndConditionsConfirmed into `this.formData` once we
+      // have checkmarks available.
+      termsAndConditionsConfirmed: false,
     }
   },
   props: {

webapp/locales/de.json

@@ -30,7 +30,8 @@
     "responsible": "Verantwortlicher gemäß § 55 Abs. 2 RStV ",
     "bank": "Bankverbindung",
     "germany": "Deutschland",
-    "code-of-conduct": "Verhaltenscodex"
+    "code-of-conduct": "Verhaltenscodex",
+    "termsAndConditionsConfirmed": "Ich habe die <a href=\"/terms-and-conditions\" target=\"_blank\">Nutzungsbedingungen</a> durchgelesen und stimme ihnen zu."
   },
   "sorting": {
     "newest": "Neuste",
@@ -522,7 +523,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

@@ -30,7 +30,8 @@
     "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",
+    "termsAndConditionsConfirmed": "I have read and confirmed the <a href=\"/terms-and-conditions\" target=\"_blank\">terms and conditions</a>."
   },
   "sorting": {
     "newest": "Newest",