Missing translations added + code checked with Lint

webapp/locales/de.json

@@ -569,11 +569,11 @@
     "get-help": "Wenn du einem inakzeptablen Verhalten ausgesetzt bist, es miterlebst oder andere Bedenken hast, benachrichtige bitte so schnell wie möglich einen Organisator der Gemeinschaft und verlinke oder verweise auf den entsprechenden Inhalt:"
   },
   "termsAndConditions": {
-    "newTermsAndConditions": "Neue Nutzungsbedingungen",
     "termsAndConditionsConfirmed": "Ich habe die <a href=\"/terms-and-conditions\" target=\"_blank\">Nutzungsbedingungen</a> durchgelesen und stimme ihnen zu.",
-    "termsAndConditionsNewConfirmText": "Unsere <a href=\"/terms-and-conditions\" target=\"_blank\"><span class=\"ds-chip ds-chip-size-large ds-chip-warning ds-chip-round\">Nutzungsbedingungen</span></a> haben sich geändert!",
-    "termsAndConditionsNewConfirm": "Ich bestätige die neuen Nutzungsbedingungen",
-    "agree": "Ich Stimme zu!",
+    "newTermsAndConditions": "Neue Nutzungsbedingungen",
+    "termsAndConditionsNewConfirmText": "Neue Nutzungsbedingungen jetzt lesen!",
+    "termsAndConditionsNewConfirm": "Ich habe die neuen Nutzungsbedingungen durchgelesen und stimme zu.",
+    "agree": "Ich stimme zu!",
     "risk": {
       "title": "Unfallgefahr",
       "description": "Das ist eine Testversion! Alle Daten, Dein Profil und die Server können jederzeit komplett vernichtet, verloren, verbrannt und vielleicht auch in der Nähe von Alpha Centauri synchronisiert werden. Die Benutzung läuft auf eigene Gefahr. Mit kommerziellen Nebenwirkungen ist jedoch nicht zu rechnen."

webapp/locales/en.json

@@ -571,8 +571,8 @@
   "termsAndConditions": {
     "newTermsAndConditions": "New Terms and Conditions",
     "termsAndConditionsConfirmed": "I have read and confirmed the <a href=\"/terms-and-conditions\" target=\"_blank\">Terms and Conditions</a>.",
-    "termsAndConditionsNewConfirmText": "Our <a href=\"/terms-and-conditions\" target=\"_blank\"><span class=\"ds-chip ds-chip-size-large ds-chip-warning ds-chip-round\">Terms and Conditions</span></a> have changed!",
-    "termsAndConditionsNewConfirm": "I confirm the new Terms and Conditions",
+    "termsAndConditionsNewConfirmText": "Read new terms of conditions now!",
+    "termsAndConditionsNewConfirm": "I have read and agree to the new terms of conditions.",
     "agree": "I agree!",
     "risk": {
       "title": "Risk of accident",

webapp/pages/terms-and-conditions-confirm.vue

@@ -1,16 +1,59 @@
 <template>
   <ds-container width="medium">
     <ds-card icon="balance-scale" header=" " primary centered>
-      <ds-text
-        tag="h2"
-        v-html="$t(`termsAndConditions.termsAndConditionsNewConfirmText`)"
-      ></ds-text>
+      <ds-text>
+        <input
+          id="checkbox"
+          type="checkbox"
+          v-model="termsAndConditionsConfirmed"
+          :checked="checked"
+        />
+        <label
+          for="checkbox"
+          v-html="$t('termsAndConditions.termsAndConditionsNewConfirm')"
+        ></label>
+
+        <ds-button ghost @click="isOpen = true">
+          {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
+        </ds-button>
+      </ds-text>
+
       <template slot="footer">
-        <ds-button @click="submit">
-          {{ $t(`termsAndConditions.termsAndConditionsNewConfirm`) }}
+        <ds-button
+          secondary
+          @click="submit"
+          :disabled="disabledSubmitButton && !termsAndConditionsConfirmed"
+        >
+          {{ $t(`actions.save`) }}
         </ds-button>
       </template>
     </ds-card>
+
+    <ds-modal
+      v-if="isOpen"
+      v-model="isOpen"
+      :title="$t('termsAndConditions.newTermsAndConditions')"
+      force
+      extended
+      :confirm-label="$t('termsAndConditions.agree')"
+      :cancel-label="$t('actions.cancel')"
+      v-on:confirm=";(disabledSubmitButton = false), (termsAndConditionsConfirmed = true)"
+      v-on:cancel="disabledSubmitButton = true"
+    >
+      <div>
+        <ol>
+          <li v-for="section in sections" :key="section">
+            <strong>{{ $t(`termsAndConditions.${section}.title`) }}:</strong>
+            <p v-html="$t(`termsAndConditions.${section}.description`)" />
+          </li>
+        </ol>
+        <p>{{ $t(`termsAndConditions.have-fun`) }}</p>
+        <br />
+        <p>
+          <strong v-html="$t(`termsAndConditions.closing`)" />
+        </p>
+      </div>
+    </ds-modal>
   </ds-container>
 </template>
 
@@ -37,10 +80,18 @@ export default {
     ...mapGetters({
       currentUser: 'auth/user',
     }),
+    compiledData() {
+      return {
+        template: `<p>${this.data}</p>`,
+      }
+    },
   },
   data() {
     return {
-      isOpen: false,
+      disabledSubmitButton: false,
+      isOpen: true,
+      termsAndConditionsConfirmed: false,
+      checked: false,
       sections: [
         'risk',
         'data-privacy',