Parameterize entire html of terms+conditions

webapp/constants/manifest.js

@@ -1,6 +1,9 @@
 import metadata from './metadata.js'
-const { name, short_name, description, theme_color } = metadata
+const { APPLICATION_NAME, APPLICATION_SHORT_NAME, APPLICATION_DESCRIPTION } = metadata
 export default {
-  name, short_name, description, theme_color,
+  name: APPLICATION_NAME,
+  short_name: APPLICATION_SHORT_NAME,
+  description: APPLICATION_DESCRIPTION,
+  theme_color: '#17b53f',
   lang: 'en',
 }

webapp/constants/metadata.js

@@ -1,7 +1,7 @@
 export default {
-  name: 'fyphe_O',
-  short_name: 'fyphe',
-  description: 'The Schools in Motion Network',
-  organization: 'Ensible e.V.',
-  theme_color: '#17b53f',
+  APPLICATION_NAME: 'fyphe_O',
+  APPLICATION_SHORT_NAME: 'fyphe',
+  APPLICATION_DESCRIPTION: 'The Schools in Motion Network',
+  ORGANIZATION_NAME: 'Ensible e.V.',
+  ORGANIZATION_JURISDICTION: 'Köln',
 }

webapp/locales/de.json

@@ -102,14 +102,14 @@
     },
     "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:",
     "preamble": {
-      "description": "{name} ist ein gemeinnütziges soziales Wissens- und Aktionsnetzwerk der nächsten Generation. Von Menschen – für Menschen. Open Source, fair und transparent. Für positiven lokalen und globalen Wandel in allen Lebensbereichen. Wir gestalten den öffentlichen Austausch von Wissen, Ideen und Projekten völlig neu. Die Funktionen von {name} bringen die Menschen zusammen – offline und online – so dass wir die Welt zu einem besseren Ort machen können.",
+      "description": "{APPLICATION_NAME} ist ein gemeinnütziges soziales Wissens- und Aktionsnetzwerk der nächsten Generation. Von Menschen – für Menschen. Open Source, fair und transparent. Für positiven lokalen und globalen Wandel in allen Lebensbereichen. Wir gestalten den öffentlichen Austausch von Wissen, Ideen und Projekten völlig neu. Die Funktionen von {APPLICATION_NAME} bringen die Menschen zusammen – offline und online – so dass wir die Welt zu einem besseren Ort machen können.",
       "title": "Präambel"
     },
     "purpose": {
-      "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 {name} Netzwerk aktiv ist, Beiträge verfasst, kommentiert oder mit anderen Nutzern, auch außerhalb des Netzwerkes, Kontakt aufnimmt, erkennt diese Verhaltensregeln als verbindlich an.",
+      "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 {APPLICATION_NAME} Netzwerk aktiv ist, Beiträge verfasst, kommentiert oder mit anderen Nutzern, auch außerhalb des Netzwerkes, Kontakt aufnimmt, erkennt diese Verhaltensregeln als verbindlich an.",
       "title": "Zweck"
     },
-    "subheader": "für das Soziale Netzwerk von {organization}",
+    "subheader": "für das Soziale Netzwerk von {ORGANIZATION_NAME}",
     "unacceptable-behaviour": {
       "description": "Die folgenden Verhaltensweisen sind in unserer Community inakzeptabel:",
       "list": {
@@ -785,7 +785,7 @@
     },
     "agree": "Ich stimme zu!",
     "code-of-conduct": {
-      "description": "Unser Verhaltenskodex dient als Leitfaden für das persönliche Auftreten und den Umgang miteinander. 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. <a href=\"https://alpha.human-connection.org/code-of-conduct\" target=\"_blank\">https://alpha.human-connection.org/code-of-conduct</a>",
+      "description": "Unser Verhaltenskodex dient als Leitfaden für das persönliche Auftreten und den Umgang miteinander. Wer als Nutzer im {APPLICATION_NAME}-Netzwerk aktiv ist, Beiträge verfasst, kommentiert oder mit anderen Nutzern, auch außerhalb des Netzwerkes, Kontakt aufnimmt, erkennt diese Verhaltensregeln als verbindlich an. <a href=\"https://alpha.human-connection.org/code-of-conduct\" target=\"_blank\">https://alpha.human-connection.org/code-of-conduct</a>",
       "title": "Verhaltenscodex"
     },
     "errors-and-feedback": {
@@ -802,7 +802,7 @@
     },
     "newTermsAndConditions": "Neue Nutzungsbedingungen",
     "no-commercial-use": {
-      "description": "Die Nutzung des Human Connection Netzwerkes ist nicht gestattet für kommerzielle Nutzung. Darunter fällt unter anderem das Bewerben von Produkten mit kommerzieller Absicht, das Einstellen von Affiliate-Links (Geschäftspartner-Links), direkter Aufruf zu Spenden oder finanzieller Unterstützung für Zwecke, die steuerlich nicht als gemeinnützig anerkannt sind.",
+      "description": "Die Nutzung des {APPLICATION_NAME} Netzwerkes ist nicht gestattet für kommerzielle Nutzung. Darunter fällt unter anderem das Bewerben von Produkten mit kommerzieller Absicht, das Einstellen von Affiliate-Links (Geschäftspartner-Links), direkter Aufruf zu Spenden oder finanzieller Unterstützung für Zwecke, die steuerlich nicht als gemeinnützig anerkannt sind.",
       "title": "Keine kommerzielle Nutzung"
     },
     "no-parties": {
@@ -814,7 +814,7 @@
       "title": "Datenschutz"
     },
     "terms-of-service": {
-      "description": "Die folgenden Nutzungsbedingungen sind Basis für die Nutzung unseres Netzwerkes. Beim Registrieren musst Du sie anerkennen und wir werden Dich auch später über ggf. stattfindende Änderungen informieren. Das Human Connection Netzwerk wird in Deutschland betrieben und unterliegt daher deutschem Recht. Gerichtsstand ist Kirchheim / Teck. Zu Details schau in unser Impressum: <a href=\"https://human-connection.org/impressum/\" target=\"_blank\" >https://human-connection.org/impressum/</a>",
+      "description": "Die folgenden Nutzungsbedingungen sind Basis für die Nutzung unseres Netzwerkes. Beim Registrieren musst Du sie anerkennen und wir werden Dich auch später über ggf. stattfindende Änderungen informieren. Das {APPLICATION_NAME} Netzwerk wird in Deutschland betrieben und unterliegt daher deutschem Recht. Gerichtsstand ist {ORGANIZATION_JURISDICTION}. Zu Details schau in unser Impressum.",
       "title": "Nutzungsbedingungen"
     },
     "termsAndConditionsConfirmed": "Ich habe die Nutzungsbedingungen durchgelesen und stimme ihnen zu.",

webapp/locales/html/de/termsAndConditions.html

@@ -0,0 +1 @@
+<p>Ich bin der Inhalt der Seite "Nutzungsbedingungen"</p>

webapp/locales/html/en/termsAndConditions.html

@@ -0,0 +1 @@
+<p>I am the content of the page "terms and conditions"<p>

webapp/nuxt.config.js

@@ -279,6 +279,13 @@ export default {
           },
         ],
       })
+      config.module.rules.push({
+        enforce: 'pre',
+        test: /\.html$/,
+        loader: 'raw-loader',
+        exclude: /(node_modules)/,
+      })
+
       const tagAttributesForTesting = ['data-test', ':data-test', 'v-bind:data-test']
       ctx.loaders.vue.compilerOptions = {
         modules: [

webapp/pages/terms-and-conditions.vue

@@ -4,14 +4,7 @@
       <ds-heading tag="h2">{{ $t('site.termsAndConditions') }}</ds-heading>
     </ds-space>
     <ds-container>
-      <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>
-      </div>
+      <div v-html="translatedTermsAndConditions" />
     </ds-container>
   </div>
 </template>
@@ -24,22 +17,10 @@ export default {
       title: this.$t('site.termsAndConditions'),
     }
   },
-  data() {
-    return {
-      // if you change terms and conditions please change also version in file "webapp/constants/terms-and-conditions-version.js"
-      sections: [
-        'terms-of-service',
-        'use-and-license',
-        'privacy-statement',
-        'code-of-conduct',
-        'moderation',
-        'errors-and-feedback',
-        'no-commercial-use',
-        'no-parties',
-        'help-and-questions',
-        'addition',
-      ],
-    }
+  computed: {
+    translatedTermsAndConditions() {
+      return this.$t('html.termsAndConditions')
+    },
   },
 }
 </script>

webapp/plugins/i18n.js

@@ -3,6 +3,17 @@ import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
 import { isEmpty, find } from 'lodash'
 import locales from '~/locales'
 
+const registerTranslation = ({ Vue, locale }) => {
+  const translation = require(`~/locales/${locale}.json`)
+  try {
+    const {
+      default: termsAndConditions,
+    } = require(`~/locales/html/${locale}/termsAndConditions.html`)
+    translation.html = { termsAndConditions }
+  } catch (ex) {}
+  Vue.i18n.add(locale, translation)
+}
+
 /**
  * TODO: Refactor and simplify browser detection
  * and implement the user preference logic
@@ -53,9 +64,6 @@ export default ({ app, req, cookie, store }) => {
     },
   })
 
-  // register the fallback locales
-  Vue.i18n.add('en', require('~/locales/en.json'))
-
   let userLocale = 'en'
   const localeCookie = app.$cookies.get(key)
   /* const userSettings = store.getters['auth/userSettings']
@@ -80,8 +88,10 @@ export default ({ app, req, cookie, store }) => {
   const availableLocales = locales.filter((lang) => !!lang.enabled)
   const locale = find(availableLocales, ['code', userLocale]) ? userLocale : 'en'
 
+  // register the fallback locales
+  registerTranslation({ Vue, locale: 'en' })
   if (locale !== 'en') {
-    Vue.i18n.add(locale, require(`~/locales/${locale}.json`))
+    registerTranslation({ Vue, locale })
   }
 
   // Set the start locale to use