Translations and style adapted

webapp/locales/de.json

@@ -21,11 +21,11 @@
     }
   },
   "site": {
+    "thx": "Danke!",
     "made": "Mit ❤ gemacht",
     "imprint": "Impressum",
     "data-privacy": "Datenschutz",
     "termsAndConditions": "Nutzungsbedingungen",
-    "newTermsAndConditions": "Neue Nutzungsbedingungen",
     "changelog": "Änderungen & Verlauf",
     "contact": "Kontakt",
     "tribunal": "Registergericht",
@@ -35,9 +35,7 @@
     "responsible": "Verantwortlicher gemäß § 55 Abs. 2 RStV ",
     "bank": "Bankverbindung",
     "germany": "Deutschland",
-    "code-of-conduct": "Verhaltenscodex",
-    "termsAndConditionsConfirmed": "Ich habe die <a href=\"/terms-and-conditions\" target=\"_blank\">Nutzungsbedingungen</a> durchgelesen und stimme ihnen zu.",
-    "termsAndConditionsNewConfirm": "Bestätige bitte die neuen Nutzungsbedingungen"
+    "code-of-conduct": "Verhaltenscodex"
   },
   "sorting": {
     "newest": "Neuste",
@@ -571,6 +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!",
     "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

@@ -21,10 +21,10 @@
     }
   },
   "site": {
+    "thx": "Thanks!",
     "made": "Made with ❤",
     "imprint": "Imprint",
     "termsAndConditions": "Terms and conditions",
-    "newTermsAndConditions": "New Terms and conditions",
     "data-privacy": "Data privacy",
     "changelog": "Changes & History",
     "contact": "Contact",
@@ -35,9 +35,7 @@
     "responsible": "responsible for contents of this page (§ 55 Abs. 2 RStV)",
     "bank": "bank account",
     "germany": "Germany",
-    "code-of-conduct": "Code of Conduct",
-    "termsAndConditionsConfirmed": "I have read and confirmed the <a href=\"/terms-and-conditions\" target=\"_blank\">terms and conditions</a>.",
-    "termsAndConditionsNewConfirm": "Please confirm the new Terms and Conditions"
+    "code-of-conduct": "Code of Conduct"
   },
   "sorting": {
     "newest": "Newest",
@@ -571,6 +569,11 @@
     "get-help": "If you are subject to or witness unacceptable behavior, or have any other concerns, please notify a community organizer as soon as possible and link or refer to the corresponding content:"
   },
   "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",
+    "agree": "I agree!",
     "risk": {
       "title": "Risk of accident",
       "description": "This is a test version! All data, your profile and the server can be completely destroyed, wiped out, lost, burnt and eventually synchronised near Alpha Centauri at any time. Use on your own risk. Commercial effects are not likely though."

webapp/middleware/termsAndConditions.js

@@ -8,7 +8,7 @@ export default async ({ store, env, route, redirect }) => {
   }
   if (route.name === 'terms-and-conditions-confirm') return true // avoid endless loop
 
-  if(store.getters['auth/termsAndConditionsAgreed']) return true
+  if (store.getters['auth/termsAndConditionsAgreed']) return true
 
   let params = {}
   if (!isEmpty(route.path) && route.path !== '/') {

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

@@ -1,34 +1,17 @@
 <template>
-  <div>
-    <ds-space>
-      <ds-heading tag="h2">{{ $t(`site.newTermsAndConditions`) }}</ds-heading>
-    </ds-space>
-    <ds-container>
-      <div>
-        <ds-button secondary class="display:none" @click="submit">
-          {{ $t(`site.termsAndConditionsNewConfirm`) }}
+  <ds-container width="medium">
+    <ds-card icon="balance-scale" header=" " primary centered>
+      <ds-text
+        tag="h2"
+        v-html="$t(`termsAndConditions.termsAndConditionsNewConfirmText`)"
+      ></ds-text>
+      <template slot="footer">
+        <ds-button @click="submit">
+          {{ $t(`termsAndConditions.termsAndConditionsNewConfirm`) }}
         </ds-button>
-      </div>
-      <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>
-      <div>
-        <ds-button secondary class="display:none" @click="submit">
-          {{ $t(`site.termsAndConditionsNewConfirm`) }}
-        </ds-button>
-      </div>
-    </ds-container>
-  </div>
+      </template>
+    </ds-card>
+  </ds-container>
 </template>
 
 <script>
@@ -47,7 +30,7 @@ export default {
   layout: 'default',
   head() {
     return {
-      title: this.$t('site.newTermsAndConditions'),
+      title: this.$t('termsAndConditions.newTermsAndConditions'),
     }
   },
   computed: {
@@ -95,7 +78,7 @@ export default {
             })
           },
         })
-        this.$toast.success(this.$t('DANKE'))
+        this.$toast.success(this.$t('site.thx'))
         this.$router.replace(this.$route.query.path || '/')
       } catch (err) {
         this.$toast.error(err.message)

webapp/store/auth.js

@@ -45,7 +45,7 @@ export const getters = {
   },
   termsAndConditionsAgreed(state) {
     return state.user && state.user.termsAndConditionsAgreedVersion === VERSION
-  }
+  },
 }
 
 export const actions = {