Graphical changes

webapp/locales/de.json

@@ -571,7 +571,7 @@
   "termsAndConditions": {
     "termsAndConditionsConfirmed": "Ich habe die <a href=\"/terms-and-conditions\" target=\"_blank\">Nutzungsbedingungen</a> durchgelesen und stimme ihnen zu.",
     "newTermsAndConditions": "Neue Nutzungsbedingungen",
-    "termsAndConditionsNewConfirmText": "Neue Nutzungsbedingungen jetzt lesen!",
+    "termsAndConditionsNewConfirmText": "Bitte lies dir die neue Nutzungsbedingungen jetzt durch!",
     "termsAndConditionsNewConfirm": "Ich habe die neuen Nutzungsbedingungen durchgelesen und stimme zu.",
     "agree": "Ich stimme zu!",
     "risk": {

webapp/locales/en.json

@@ -571,7 +571,7 @@
   "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": "Read new terms of conditions now!",
+    "termsAndConditionsNewConfirmText": "Please read the new terms of use now!",
     "termsAndConditionsNewConfirm": "I have read and agree to the new terms of conditions.",
     "agree": "I agree!",
     "risk": {

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

@@ -1,59 +1,25 @@
 <template>
   <ds-container width="medium">
-    <ds-card icon="balance-scale" header=" " primary centered>
+    <ds-card icon="balance-scale" :header="$t(`termsAndConditions.newTermsAndConditions`)" centered>
+      <p>
+        <ds-button>
+          <nuxt-link class="post-link" :to="{ name: 'terms-and-conditions' }" target="_blank">
+            {{ $t(`termsAndConditions.termsAndConditionsNewConfirmText`) }}
+          </nuxt-link>
+        </ds-button>
+      </p>
       <ds-text>
-        <input
-          id="checkbox"
-          type="checkbox"
-          v-model="termsAndConditionsConfirmed"
-          :checked="checked"
-        />
+        <input id="checkbox" type="checkbox" v-model="checked" :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
-          secondary
-          @click="submit"
-          :disabled="disabledSubmitButton && !termsAndConditionsConfirmed"
-        >
-          {{ $t(`actions.save`) }}
-        </ds-button>
+        <ds-button primary @click="submit" :disabled="!checked">{{ $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>
 
@@ -80,17 +46,9 @@ export default {
     ...mapGetters({
       currentUser: 'auth/user',
     }),
-    compiledData() {
-      return {
-        template: `<p>${this.data}</p>`,
-      }
-    },
   },
   data() {
     return {
-      disabledSubmitButton: false,
-      isOpen: true,
-      termsAndConditionsConfirmed: false,
       checked: false,
       sections: [
         'risk',