From 67d7da5d9cd82c76376a6e4c8a9111100379734e Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 10 May 2022 12:18:09 +0200
Subject: [PATCH 1/5] Move "my-kv" values to seperate file

---
 client/config/prod-my-kv.env.js | 20 ++++++++++++++++++++
 client/config/prod.env.js       | 32 ++++++++++++++++++++++----------
 2 files changed, 42 insertions(+), 10 deletions(-)
 create mode 100644 client/config/prod-my-kv.env.js

diff --git a/client/config/prod-my-kv.env.js b/client/config/prod-my-kv.env.js
new file mode 100644
index 00000000..e5e9a958
--- /dev/null
+++ b/client/config/prod-my-kv.env.js
@@ -0,0 +1,20 @@
+'use strict'
+module.exports = {
+  /*
+  * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
+  * around strings
+  */
+  VUE_APP_LOGO: '"https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-logo.png"',
+  VUE_APP_ENABLE_PORTFOLIO: "true",
+  VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
+  VUE_APP_JS_TITLE: '"My KV"',
+  VUE_APP_ENABLE_FOOTER: "false",
+  /*
+   * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
+   */
+  // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
+  VUE_APP_FAVICON_32: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-fav.png',
+  VUE_APP_FAVICON_16: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-fav.png',
+  VUE_APP_TITLE: 'My KV'
+  // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
+}
diff --git a/client/config/prod.env.js b/client/config/prod.env.js
index af7e0a0b..67ac6e36 100644
--- a/client/config/prod.env.js
+++ b/client/config/prod.env.js
@@ -1,25 +1,37 @@
 'use strict'
-module.exports = {
+const { merge } = require('webpack-merge')
+
+const values = {
   NODE_ENV: '"production"',
   HEP_URL: JSON.stringify(process.env.HEP_URL),
   MATOMO_HOST: JSON.stringify(process.env.MATOMO_HOST),
   MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
   LOGOUT_REDIRECT_URL: JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
   /*
-  * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
-  * around strings
+  * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
+  * and JS needs quotes around strings
+  * see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
   */
-  VUE_APP_LOGO: JSON.stringify(process.env.VUE_APP_LOGO) || '"/static/logo.png"',
-  VUE_APP_ENABLE_PORTFOLIO: process.env.ENABLE_PORTFOLIO || "true",
+  VUE_APP_LOGO: '"/static/logo.png"',
+  VUE_APP_ENABLE_PORTFOLIO: "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-  VUE_APP_JS_TITLE: JSON.stringify(process.env.VUE_APP_TITLE) || '"mySkillbox"',
-  VUE_APP_ENABLE_FOOTER: process.env.ENABLE_FOOTER || "true",
+  VUE_APP_JS_TITLE: '"mySkillbox"',
+  VUE_APP_ENABLE_FOOTER: "true",
+
   /*
    * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
    */
   // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
-  VUE_APP_FAVICON_32: process.env.VUE_APP_FAVICON_32 || '/static/favicon-32x32.png',
-  VUE_APP_FAVICON_16: process.env.VUE_APP_FAVICON_16 || '/static/favicon-16x16.png',
-  VUE_APP_TITLE: process.env.VUE_APP_TITLE || 'mySkillbox'
+  VUE_APP_FAVICON_32: '/static/favicon-32x32.png',
+  VUE_APP_FAVICON_16: '/static/favicon-16x16.png',
+  VUE_APP_TITLE: 'mySkillbox'
   // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
 }
+
+if (process.env.APP_TYPE === 'my-kv') {
+  module.exports = merge(values, require('./prod-my-kv.env.js'));
+} else {
+  // we are on the skillbox APP_TYPE
+  module.exports = values;
+}
+

From 0d8c95013b9e3653eb6ad9176f25226ad21d4467 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 10 May 2022 12:33:47 +0200
Subject: [PATCH 2/5] MS-491: Make visibility of "Lernziele"-title configurable

---
 client/config/prod-my-kv.env.js          | 2 ++
 client/config/prod.env.js                | 2 ++
 client/src/components/modules/Module.vue | 5 ++++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/config/prod-my-kv.env.js b/client/config/prod-my-kv.env.js
index e5e9a958..ad0831fc 100644
--- a/client/config/prod-my-kv.env.js
+++ b/client/config/prod-my-kv.env.js
@@ -9,6 +9,8 @@ module.exports = {
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
   VUE_APP_JS_TITLE: '"My KV"',
   VUE_APP_ENABLE_FOOTER: "false",
+  VUE_APP_SHOW_OBJECTIVES_TITLE: "false",
+
   /*
    * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
    */
diff --git a/client/config/prod.env.js b/client/config/prod.env.js
index 67ac6e36..39d811c2 100644
--- a/client/config/prod.env.js
+++ b/client/config/prod.env.js
@@ -7,6 +7,7 @@ const values = {
   MATOMO_HOST: JSON.stringify(process.env.MATOMO_HOST),
   MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
   LOGOUT_REDIRECT_URL: JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
+  VUE_APP_TYPE: JSON.stringify(process.env.APP_TYPE),
   /*
   * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
   * and JS needs quotes around strings
@@ -17,6 +18,7 @@ const values = {
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
   VUE_APP_JS_TITLE: '"mySkillbox"',
   VUE_APP_ENABLE_FOOTER: "true",
+  VUE_APP_SHOW_OBJECTIVES_TITLE: "true",
 
   /*
    * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index a4d576e5..b84f57ac 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -40,7 +40,7 @@
     </div>
 
     <h3 id="objectives">
-      Lernziele
+      <span v-show="showObjectivesTitle">Lernziele</span>
     </h3>
 
     <div class="module__objective-groups">
@@ -99,6 +99,9 @@
         }
         return this.module.bookmark.note;
       },
+      showObjectivesTitle() {
+        return process.env.VUE_APP_SHOW_OBJECTIVES_TITLE;
+      }
     },
   };
 </script>

From 77c355d56982b36181f374e88342b0fa1625f9c9 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 10 May 2022 15:03:55 +0200
Subject: [PATCH 3/5] MS-474: Add myKV-specific terms

---
 client/config/prod-my-kv.env.js               |  1 -
 client/config/prod.env.js                     |  7 ++-
 .../components/AssignmentWithSubmissions.vue  |  6 ++-
 client/src/components/BackLink.vue            | 14 +++--
 client/src/components/ContentBlock.vue        | 14 ++---
 .../book-navigation/ContentNavigation.vue     |  7 +--
 .../content-blocks/InstrumentWidget.vue       |  7 ++-
 .../components/modules/SnapshotCreated.vue    |  6 ++-
 .../src/components/modules/SnapshotHeader.vue |  7 +--
 .../components/profile/DeactivatePerson.vue   |  5 +-
 .../components/toggle-menu/ToggleEditing.vue  | 10 ++--
 client/src/mixins/app-flavor-terms.js         | 52 +++++++++++++++++++
 client/src/mixins/page-title.js               |  7 ---
 client/src/pages/hello.vue                    |  6 +--
 client/src/pages/index.vue                    |  5 +-
 client/src/pages/license-activation.vue       | 10 ++--
 client/src/pages/module/moduleSettings.vue    |  5 +-
 client/src/pages/onboarding/start.vue         |  6 +--
 client/src/pages/onboarding/step1.vue         |  8 +--
 client/src/pages/snapshot/snapshots.vue       |  5 +-
 client/src/pages/start.vue                    | 17 +++---
 client/src/pages/topic-page.vue               |  6 ++-
 22 files changed, 142 insertions(+), 69 deletions(-)
 create mode 100644 client/src/mixins/app-flavor-terms.js
 delete mode 100644 client/src/mixins/page-title.js

diff --git a/client/config/prod-my-kv.env.js b/client/config/prod-my-kv.env.js
index ad0831fc..b6e3d76f 100644
--- a/client/config/prod-my-kv.env.js
+++ b/client/config/prod-my-kv.env.js
@@ -7,7 +7,6 @@ module.exports = {
   VUE_APP_LOGO: '"https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-logo.png"',
   VUE_APP_ENABLE_PORTFOLIO: "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-  VUE_APP_JS_TITLE: '"My KV"',
   VUE_APP_ENABLE_FOOTER: "false",
   VUE_APP_SHOW_OBJECTIVES_TITLE: "false",
 
diff --git a/client/config/prod.env.js b/client/config/prod.env.js
index 39d811c2..f70b3b7a 100644
--- a/client/config/prod.env.js
+++ b/client/config/prod.env.js
@@ -7,7 +7,7 @@ const values = {
   MATOMO_HOST: JSON.stringify(process.env.MATOMO_HOST),
   MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
   LOGOUT_REDIRECT_URL: JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
-  VUE_APP_TYPE: JSON.stringify(process.env.APP_TYPE),
+  VUE_APP_FLAVOR: JSON.stringify(process.env.APP_FLAVOR),
   /*
   * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
   * and JS needs quotes around strings
@@ -16,7 +16,6 @@ const values = {
   VUE_APP_LOGO: '"/static/logo.png"',
   VUE_APP_ENABLE_PORTFOLIO: "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-  VUE_APP_JS_TITLE: '"mySkillbox"',
   VUE_APP_ENABLE_FOOTER: "true",
   VUE_APP_SHOW_OBJECTIVES_TITLE: "true",
 
@@ -30,10 +29,10 @@ const values = {
   // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
 }
 
-if (process.env.APP_TYPE === 'my-kv') {
+if (process.env.APP_FLAVOR === 'my-kv') {
   module.exports = merge(values, require('./prod-my-kv.env.js'));
 } else {
-  // we are on the skillbox APP_TYPE
+  // we are on the skillbox APP_FLAVOR
   module.exports = values;
 }
 
diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
index f27a9181..944e0867 100644
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/client/src/components/AssignmentWithSubmissions.vue
@@ -9,7 +9,7 @@
       <a
         class="button button--primary submissions-page__back"
         @click="$emit('back')"
-      >Aufgabe im Modul anzeigen</a>
+      >Aufgabe im {{ flavorTextModul }} anzeigen</a>
     </div>
 
     <div
@@ -64,11 +64,13 @@
 
 <script>
   import StudentSubmission from '@/components/StudentSubmission';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
-  import {meQuery} from '@/graphql/queries';
+  import { meQuery } from '@/graphql/queries';
 
   export default {
     props: ['assignment'],
+    mixins: [appFlavorTermsMixin],
 
     components: {
       StudentSubmission
diff --git a/client/src/components/BackLink.vue b/client/src/components/BackLink.vue
index 377d2c35..0f490e79 100644
--- a/client/src/components/BackLink.vue
+++ b/client/src/components/BackLink.vue
@@ -9,9 +9,11 @@
 </template>
 
 <script>
-  import {MODULE_PAGE} from '@/router/module.names';
-  import {ROOMS_PAGE} from '@/router/room.names';
-  import {PROJECTS_PAGE} from '@/router/portfolio.names';
+  import { MODULE_PAGE } from '@/router/module.names';
+  import { ROOMS_PAGE } from '@/router/room.names';
+  import { PROJECTS_PAGE } from '@/router/portfolio.names';
+
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
 
@@ -31,6 +33,8 @@
       },
     },
 
+    mixins: [appFlavorTermsMixin],
+
     components: {
       ChevronLeft,
     },
@@ -51,9 +55,9 @@
       fullTitle() {
         switch (this.type) {
           case 'topic':
-            return `Thema: ${this.title}`;
+            return `${this.flavorTextThema}: ${this.title}`;
           case 'module':
-            return `Modul: ${this.title}`;
+            return `${this.flavorTextModul}: ${this.title}`;
           default:
             return this.title;
         }
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 7781d9d3..363c893c 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -81,11 +81,13 @@
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
   import me from '@/mixins/me';
-  import {hidden} from '@/helpers/visibility';
-  import {CONTENT_TYPE} from '@/consts/types';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
+
+  import { hidden } from '@/helpers/visibility';
+  import { CONTENT_TYPE } from '@/consts/types';
   import PopoverLink from '@/components/ui/PopoverLink';
-  import {removeAtIndex} from '@/graphql/immutable-operations';
-  import {EDIT_CONTENT_BLOCK_PAGE} from '@/router/module.names';
+  import { removeAtIndex } from '@/graphql/immutable-operations';
+  import { EDIT_CONTENT_BLOCK_PAGE } from '@/router/module.names';
 
   const ContentComponent = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent');
 
@@ -113,7 +115,7 @@
       },
     },
 
-    mixins: [me],
+    mixins: [me, appFlavorTermsMixin],
 
     components: {
       PopoverLink,
@@ -137,7 +139,7 @@
           return '';
         }
 
-        return `Instrument - ${instruments[contentType]}`;
+        return `${this.flavorTextInstrument} - ${instruments[contentType]}`;
       },
       canEditContentBlock() {
         return this.contentBlock.mine && !this.contentBlock.indent;
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
index 00984939..289e124f 100644
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@@ -12,7 +12,7 @@
           class="content-navigation__link"
           @click.native="close"
         >
-          Themen
+          {{ flavorTextThemen }}
         </router-link>
 
         <book-topic-navigation
@@ -27,7 +27,7 @@
           class="content-navigation__link"
           @click.native="close"
         >
-          Instrumente
+          {{ flavorTextInstrumente }}
         </router-link>
       </div>
 
@@ -99,6 +99,7 @@
 <script>
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
   import sidebarMixin from '@/mixins/sidebar';
   import meMixin from '@/mixins/me';
 
@@ -111,7 +112,7 @@
       }
     },
 
-    mixins: [sidebarMixin, meMixin],
+    mixins: [sidebarMixin, meMixin, appFlavorTermsMixin],
 
     components: {
       BookTopicNavigation,
diff --git a/client/src/components/content-blocks/InstrumentWidget.vue b/client/src/components/content-blocks/InstrumentWidget.vue
index 183df474..1470ac84 100644
--- a/client/src/components/content-blocks/InstrumentWidget.vue
+++ b/client/src/components/content-blocks/InstrumentWidget.vue
@@ -9,14 +9,17 @@
       :to="{name: 'instrument', params: { slug: value.slug }}"
       class="instrument-widget__button button"
     >
-      Instrument anzeigen
+      {{ flavorTextInstrument }} anzeigen
     </router-link>
   </div>
 </template>
 
 <script>
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
+
   export default {
-    props: ['value']
+    props: ['value'],
+    mixins: [appFlavorTermsMixin],
   };
 </script>
 
diff --git a/client/src/components/modules/SnapshotCreated.vue b/client/src/components/modules/SnapshotCreated.vue
index 687db00f..b63eb12f 100644
--- a/client/src/components/modules/SnapshotCreated.vue
+++ b/client/src/components/modules/SnapshotCreated.vue
@@ -25,7 +25,7 @@
         <a
           class="button"
           @click="close"
-        >Zurück zum Modul</a>
+        >Zurück zum {{ flavorTextModul }}</a>
       </div>
     </template>
   </modal>
@@ -33,10 +33,12 @@
 
 <script>
   import Modal from '@/components/Modal';
-  import {SNAPSHOT_LIST} from '@/router/module.names';
+  import { SNAPSHOT_LIST } from '@/router/module.names';
   import dateformat from '@/helpers/date-format';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
+    mixins: [appFlavorTermsMixin],
     components: {
       Modal,
     },
diff --git a/client/src/components/modules/SnapshotHeader.vue b/client/src/components/modules/SnapshotHeader.vue
index eb15a669..f913389b 100644
--- a/client/src/components/modules/SnapshotHeader.vue
+++ b/client/src/components/modules/SnapshotHeader.vue
@@ -37,7 +37,7 @@
         <checkbox
           :checked="agreement"
           data-cy="apply-checkbox"
-          label="Ich will die Anpassungen aus diesem Snapshot in das Modul kopieren."
+          :label="`Ich will die Anpassungen aus diesem Snapshot in das ${flavorTextModul} kopieren.`"
           @input="agreement = $event"
         />
       </div>
@@ -68,9 +68,10 @@
   import Checkbox from '@/components/ui/Checkbox';
 
   import me from '@/mixins/me';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   import APPLY_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/applySnapshot.gql';
-  import {MODULE_PAGE} from '@/router/module.names';
+  import { MODULE_PAGE } from '@/router/module.names';
 
   const _getChange = (snapshot, index) => {
     try {
@@ -88,7 +89,7 @@
       },
     },
 
-    mixins: [me],
+    mixins: [me, appFlavorTermsMixin],
 
     components: {
       Checkbox,
diff --git a/client/src/components/profile/DeactivatePerson.vue b/client/src/components/profile/DeactivatePerson.vue
index 0fbcb7f1..40a3be2b 100644
--- a/client/src/components/profile/DeactivatePerson.vue
+++ b/client/src/components/profile/DeactivatePerson.vue
@@ -46,7 +46,7 @@
         <template v-else>
           Diese Person kann
         </template>
-        weiterhin Module und Instrumente lesen.
+        weiterhin {{ flavorTextModule }} und {{ flavorTextInstrumente }} lesen.
       </li>
       <li class="deactivate-user__text deactivate-user__list-item">
         <template v-if="myself">
@@ -75,8 +75,11 @@
 
 <script>
   import Modal from '@/components/Modal';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
+    mixins: [appFlavorTermsMixin],
+
     components: {
       Modal
     },
diff --git a/client/src/components/toggle-menu/ToggleEditing.vue b/client/src/components/toggle-menu/ToggleEditing.vue
index 70afefed..ca977030 100644
--- a/client/src/components/toggle-menu/ToggleEditing.vue
+++ b/client/src/components/toggle-menu/ToggleEditing.vue
@@ -2,7 +2,7 @@
   <toggle
     :checked="module.inEditMode"
     data-cy="toggle-editing"
-    label="Modul anpassen"
+    :label="`${flavorTextModul} anpassen`"
     @input="toggle"
   />
 </template>
@@ -10,8 +10,10 @@
 <script>
   import Toggle from '@/components/ui/Toggle';
   // import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import {gql} from '@apollo/client/core';
-  import {setModuleEditMode} from '@/graphql/cache-operations';
+  import { gql } from '@apollo/client/core';
+  import { setModuleEditMode } from '@/graphql/cache-operations';
+
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   const QUERY = gql`
           query ModuleEditModeQuery ($slug: String) {
@@ -23,6 +25,8 @@
           `;
 
   export default {
+    mixins: [appFlavorTermsMixin],
+
     components: {
       Toggle
     },
diff --git a/client/src/mixins/app-flavor-terms.js b/client/src/mixins/app-flavor-terms.js
new file mode 100644
index 00000000..5ee66dd8
--- /dev/null
+++ b/client/src/mixins/app-flavor-terms.js
@@ -0,0 +1,52 @@
+export default {
+  computed: {
+    flavorPageTitle() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv': return 'My KV';
+      }
+      return 'my Skillbox';
+    },
+    flavorTextModul() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv':
+          return 'Lernfeld';
+      }
+      return 'Modul';
+    },
+    flavorTextModule() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv':
+          return 'Lernfelder';
+      }
+      return 'Module';
+    },
+    flavorTextThema() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv':
+          return 'HKB';
+      }
+      return 'Thema';
+    },
+    flavorTextThemen() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv':
+          return 'HKB';
+      }
+      return 'Themen';
+    },
+    flavorTextInstrument() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv':
+          return 'Grundlagenwissen';
+      }
+      return 'Instrument';
+    },
+    flavorTextInstrumente() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv':
+          return 'Grundlagenwissen';
+      }
+      return 'Instrumente';
+    },
+  }
+};
diff --git a/client/src/mixins/page-title.js b/client/src/mixins/page-title.js
deleted file mode 100644
index 502730d4..00000000
--- a/client/src/mixins/page-title.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  data() {
-    return {
-      pageTitle: process.env.VUE_APP_JS_TITLE
-    };
-  }
-};
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index 2bce19ba..15e66fc3 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -29,7 +29,7 @@
         class="login-actions__title"
         data-cy="hello-title"
       >
-        Wollen Sie {{ pageTitle }} im Unterricht verwenden?
+        Wollen Sie {{ flavorPageTitle }} im Unterricht verwenden?
       </h2>
       <a
         class="button button--primary button--big actions__submit"
@@ -71,13 +71,13 @@
 </template>
 
 <script>
-  import pageTitleMixin from '@/mixins/page-title';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
   const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim');
   const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
-    mixins: [pageTitleMixin],
+    mixins: [appFlavorTermsMixin],
     components: {
       HepLogoNoClaim,
       EhbLogo,
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 42778bef..4901a5cc 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -14,7 +14,7 @@
       </li>
       <li>
         <router-link to="/module">
-          Modul
+          {{ flavorTextModul }}
         </router-link>
       </li>
       <li>
@@ -28,8 +28,11 @@
 
 <script>
   import ALL_MODULES from '@/graphql/gql/queries/allModules.gql';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
+    mixins: [appFlavorTermsMixin],
+
     data() {
       return {
         modules: []
diff --git a/client/src/pages/license-activation.vue b/client/src/pages/license-activation.vue
index b9a71071..ade4a71f 100644
--- a/client/src/pages/license-activation.vue
+++ b/client/src/pages/license-activation.vue
@@ -50,13 +50,13 @@
           <a
             :href="teacherEditionUrl"
             class="hep-link"
-          >{{ pageTitle }} für Lehrpersonen</a>
+          >{{ flavorPageTitle }} für Lehrpersonen</a>
         </li>
         <li class="license-links__item">
           <a
             :href="studentEditionUrl"
             class="hep-link"
-          >{{ pageTitle }} für Lernende</a>
+          >{{ flavorPageTitle }} für Lernende</a>
         </li>
       </ul>
     </section>
@@ -68,16 +68,16 @@
   import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import LoadingButton from '@/components/LoadingButton';
-  import {ValidationObserver} from 'vee-validate';
+  import { ValidationObserver } from 'vee-validate';
 
   import me from '@/mixins/me';
   import logout from '@/mixins/logout';
-  import pageTitleMixin from '@/mixins/page-title';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   const ValidatedInput = () => import('@/components/validation/ValidatedInput');
 
   export default {
-    mixins: [me, logout, pageTitleMixin],
+    mixins: [me, logout, appFlavorTermsMixin],
     components: {
       LoadingButton,
       ValidationObserver,
diff --git a/client/src/pages/module/moduleSettings.vue b/client/src/pages/module/moduleSettings.vue
index 493929dd..85eb8fa0 100644
--- a/client/src/pages/module/moduleSettings.vue
+++ b/client/src/pages/module/moduleSettings.vue
@@ -8,7 +8,7 @@
         Lösungen
       </h2>
       <p class="module-settings__paragraph">
-        Wollen Sie die Lösungen in diesem Modul für die Lernenden der ausgewählten Klasse anzeigen?
+        Wollen Sie die Lösungen in diesem {{ flavorTextModul }} für die Lernenden der ausgewählten Klasse anzeigen?
       </p>
       <toggle-solutions-for-module />
     </section>
@@ -36,8 +36,11 @@
 
 <script>
   import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
+    mixins: [appFlavorTermsMixin],
+
     components: {
       ToggleSolutionsForModule,
     }
diff --git a/client/src/pages/onboarding/start.vue b/client/src/pages/onboarding/start.vue
index f847b2d9..9b97c8c5 100644
--- a/client/src/pages/onboarding/start.vue
+++ b/client/src/pages/onboarding/start.vue
@@ -6,19 +6,19 @@
     </h1>
 
     <p class="onboarding__claim">
-      Schauen Sie sich die Einführung an und lernen Sie {{ pageTitle }} kennen.
+      Schauen Sie sich die Einführung an und lernen Sie {{ flavorPageTitle }} kennen.
     </p>
   </div>
 </template>
 
 <script>
-  import pageTitleMixin from '@/mixins/page-title';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
 
-    mixins: [pageTitleMixin],
+    mixins: [appFlavorTermsMixin],
     components: {
       Logo
     },
diff --git a/client/src/pages/onboarding/step1.vue b/client/src/pages/onboarding/step1.vue
index 208de789..fa1ceec6 100644
--- a/client/src/pages/onboarding/step1.vue
+++ b/client/src/pages/onboarding/step1.vue
@@ -7,16 +7,16 @@
       Ihr Lernbereich
     </h1>
     <h2 class="onboarding__heading">
-      Themen
+      {{ flavorTextThemen }}
     </h2>
     <p class="onboarding__paragraph">
-      In den «Themen» finden Sie aktuelle Module mit Aufträgen und Situationen.
+      In den «{{ flavorTextThemen }}» finden Sie aktuelle {{ flavorTextModule }} mit Aufträgen und Situationen.
     </p>
     <h2 class="onboarding__heading">
-      Instrumente
+      {{ flavorTextInstrumente }}
     </h2>
     <p class="onboarding__paragraph">
-      Die «Instrumente» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen.
+      Die «{{ flavorTextInstrumente }}» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen.
     </p>
     <h2 class="onboarding__heading">
       News
diff --git a/client/src/pages/snapshot/snapshots.vue b/client/src/pages/snapshot/snapshots.vue
index 95a5e3b7..8448fc13 100644
--- a/client/src/pages/snapshot/snapshots.vue
+++ b/client/src/pages/snapshot/snapshots.vue
@@ -2,7 +2,7 @@
   <div class="snapshots">
     <h1>Snapshots</h1>
     <p class="snapshots__details">
-      Thema: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
+      {{ flavorTextThema }}: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
     </p>
     <snapshot-team-menu
       :selected="selectedLink"
@@ -24,13 +24,14 @@
 
 <script>
   import SnapshotListItem from '@/components/modules/SnapshotListItem';
-
   import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
   import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   const defaultModule = {topic: {}, snapshots: []};
 
   export default {
+    mixins: [appFlavorTermsMixin],
     components: {
       SnapshotTeamMenu,
       SnapshotListItem,
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index e7b33cff..c668aa9f 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -9,14 +9,14 @@
           class="start-page__heading"
           data-cy="start-page-heading"
         >
-          Letzte Module
+          Letzte {{ flavorTextModule }}
         </h2>
         <h3
           class="start-page__no-modules"
           data-cy="no-modules-yet"
           v-if="!me.recentModules.length"
         >
-          Sie haben sich noch kein Modul angeschaut. Legen Sie jetzt los!
+          Sie haben sich noch kein {{ flavorTextModul }} angeschaut. Legen Sie jetzt los!
         </h3>
         <div class="start-page__modules-list">
           <module-teaser
@@ -34,7 +34,7 @@
           tag="div"
           class="button"
         >
-          Alle Module anzeigen
+          Alle {{ flavorTextModule }} anzeigen
         </router-link>
       </div>
       <div
@@ -63,10 +63,10 @@
 
       <div class="start-page__onboarding">
         <h2 class="start-page__heading">
-          Kennen Sie schon alle Bereiche von {{ pageTitle }}?
+          Kennen Sie schon alle Bereiche von {{ flavorPageTitle }}?
         </h2>
         <p class="start-page__paragraph">
-          Schauen Sie sich jetzt die Einführung zu {{ pageTitle }} an.
+          Schauen Sie sich jetzt die Einführung zu {{ flavorPageTitle }} an.
         </p>
         <router-link
           :to="{name: 'onboarding-start'}"
@@ -82,15 +82,14 @@
   import NewsTeaser from '@/components/news/NewsTeaser.vue';
   import ModuleTeaser from '@/components/modules/ModuleTeaser';
 
-
   import meQuery from '@/mixins/me';
   import news from '@/mixins/news';
 
-  import pageTitleMixin from '@/mixins/page-title';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
 
-    mixins: [meQuery, news, pageTitleMixin],
+    mixins: [meQuery, news, appFlavorTermsMixin],
 
     components: {
       NewsTeaser,
@@ -106,7 +105,7 @@
       },
       moduleText() {
         if (this.me.lastModule && this.me.lastModule.slug) {
-          return 'Aktuelles Modul anzeigen';
+          return `Aktuelles ${this.flavorTextModul} anzeigen`;
         }
         return 'Alle Inhalte anzeigen';
       },
diff --git a/client/src/pages/topic-page.vue b/client/src/pages/topic-page.vue
index 79a92934..7d1ef1d7 100644
--- a/client/src/pages/topic-page.vue
+++ b/client/src/pages/topic-page.vue
@@ -30,7 +30,7 @@
           v-if="me.isTeacher && topic.instructions"
         >
           <bulb-icon class="topic__instruction-icon topic__link-icon" />
-          <span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
+          <span class="topic__link-description">Anweisungen zum {{ flavorTextThema }} anzeigen</span>
         </a>
       </div>
       <div class="topic__modules">
@@ -48,16 +48,18 @@
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
   import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
   import me from '@/mixins/me';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
   import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+
   const PlayIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/Play');
   const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');
 
   export default {
 
-    mixins: [me],
+    mixins: [me, appFlavorTermsMixin],
     components: {
       BookTopicNavigation,
       ModuleTeaser,

From c0b6ff6fa662d760cb454b63ae3da73aa117b1ca Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 10 May 2022 16:23:10 +0200
Subject: [PATCH 4/5] MS-475: My KV Instrumente/Grundlagenwissenseite

---
 client/config/prod-my-kv.env.js               |  2 --
 client/config/prod.env.js                     |  2 --
 .../instruments/InstrumentEntry.vue           | 11 +++++++--
 client/src/components/modules/Module.vue      |  7 +++---
 client/src/helpers/footer.js                  |  3 ---
 client/src/helpers/instrumentType.js          | 16 ++++++-------
 client/src/layouts/DefaultLayout.vue          |  5 ++--
 client/src/layouts/PublicLayout.vue           | 10 ++++----
 client/src/layouts/SimpleLayout.vue           |  6 +++--
 client/src/mixins/app-flavor-flags.js         | 24 +++++++++++++++++++
 client/src/pages/instrumentOverview.vue       |  4 ++++
 11 files changed, 59 insertions(+), 31 deletions(-)
 delete mode 100644 client/src/helpers/footer.js
 create mode 100644 client/src/mixins/app-flavor-flags.js

diff --git a/client/config/prod-my-kv.env.js b/client/config/prod-my-kv.env.js
index b6e3d76f..5f68581a 100644
--- a/client/config/prod-my-kv.env.js
+++ b/client/config/prod-my-kv.env.js
@@ -7,8 +7,6 @@ module.exports = {
   VUE_APP_LOGO: '"https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-logo.png"',
   VUE_APP_ENABLE_PORTFOLIO: "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-  VUE_APP_ENABLE_FOOTER: "false",
-  VUE_APP_SHOW_OBJECTIVES_TITLE: "false",
 
   /*
    * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
diff --git a/client/config/prod.env.js b/client/config/prod.env.js
index f70b3b7a..48704e7f 100644
--- a/client/config/prod.env.js
+++ b/client/config/prod.env.js
@@ -16,8 +16,6 @@ const values = {
   VUE_APP_LOGO: '"/static/logo.png"',
   VUE_APP_ENABLE_PORTFOLIO: "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-  VUE_APP_ENABLE_FOOTER: "true",
-  VUE_APP_SHOW_OBJECTIVES_TITLE: "true",
 
   /*
    * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
diff --git a/client/src/components/instruments/InstrumentEntry.vue b/client/src/components/instruments/InstrumentEntry.vue
index 6a3ec43b..f971362c 100644
--- a/client/src/components/instruments/InstrumentEntry.vue
+++ b/client/src/components/instruments/InstrumentEntry.vue
@@ -13,8 +13,9 @@
 </template>
 
 <script>
-  import {INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY} from '@/consts/instrument.consts';
+  import { INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY } from '@/consts/instrument.consts';
   import instrumentType from '@/helpers/instrumentType';
+  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
     props: {
@@ -25,6 +26,8 @@
       },
     },
 
+    mixins: [appFlavorTermsMixin],
+
     computed: {
       typeClass() {
         return {
@@ -34,7 +37,11 @@
         };
       },
       categoryName() {
-        return instrumentType(this.instrument);
+        if (process.env.VUE_APP_FLAVOR === 'my-kv') {
+          return this.flavorTextInstrumente;
+        } else {
+          return instrumentType(this.instrument);
+        }
       },
     },
   };
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index b84f57ac..a9c1a9b1 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -40,7 +40,7 @@
     </div>
 
     <h3 id="objectives">
-      <span v-show="showObjectivesTitle">Lernziele</span>
+      <span v-show="flavorShowObjectivesTitle">Lernziele</span>
     </h3>
 
     <div class="module__objective-groups">
@@ -65,6 +65,7 @@
   import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
   import Chapter from '@/components/Chapter.vue';
   import BookmarkActions from '@/components/notes/BookmarkActions';
+  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   export default {
 
@@ -74,6 +75,7 @@
         default: () => ({}),
       },
     },
+    mixins: [appFlavorFlagsMixin],
     components: {
       BookmarkActions,
       ObjectiveGroups,
@@ -99,9 +101,6 @@
         }
         return this.module.bookmark.note;
       },
-      showObjectivesTitle() {
-        return process.env.VUE_APP_SHOW_OBJECTIVES_TITLE;
-      }
     },
   };
 </script>
diff --git a/client/src/helpers/footer.js b/client/src/helpers/footer.js
deleted file mode 100644
index b946d62d..00000000
--- a/client/src/helpers/footer.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const enableFooter = () => process.env.VUE_APP_ENABLE_FOOTER;
-
-export default enableFooter;
diff --git a/client/src/helpers/instrumentType.js b/client/src/helpers/instrumentType.js
index 68f2d6d9..474b4cda 100644
--- a/client/src/helpers/instrumentType.js
+++ b/client/src/helpers/instrumentType.js
@@ -1,13 +1,13 @@
-import {LANGUAGE_COMMUNICATION, SOCIETY} from '@/consts/instrument.consts';
+import { LANGUAGE_COMMUNICATION, SOCIETY } from '@/consts/instrument.consts';
 
 const instrumentType = ({type: {category}}) => {
- if (category === LANGUAGE_COMMUNICATION) {
-   return 'Sprache & Kommunikation';
- } else if (category === SOCIETY) {
-   return 'Gesellschaft';
- } else {
-   return 'Überfachliches Instrument';
- }
+  if (category === LANGUAGE_COMMUNICATION) {
+    return 'Sprache & Kommunikation';
+  } else if (category === SOCIETY) {
+    return 'Gesellschaft';
+  } else {
+    return 'Überfachliches Instrument';
+  }
 };
 
 export default instrumentType;
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 2d10ec7c..08020cf0 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -26,9 +26,10 @@
   import ProfileSidebar from '@/components/profile/ProfileSidebar';
   import DefaultFooter from '@/layouts/DefaultFooter';
   import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
-  import enableFooter from '@/helpers/footer';
+  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   export default {
+    mixins: [appFlavorFlagsMixin],
     components: {
       HeaderBar,
       ProfileSidebar,
@@ -56,7 +57,7 @@
         return classes;
       },
       enableFooter() {
-        return enableFooter() && (!this.$route.meta || !this.$route.meta.hideFooter);
+        return this.flavorShowFooter && (!this.$route.meta || !this.$route.meta.hideFooter);
       }
     }
   };
diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index 88e9b444..c28b2a4c 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -11,24 +11,22 @@
     <router-view class="public__content layout__content" />
     <default-footer
       class="skillbox__footer public__footer footer"
-      v-if="enableFooter"
+      v-if="flavorShowFooter"
     />
   </div>
 </template>
 <script>
   import DefaultFooter from '@/layouts/DefaultFooter';
-  import enableFooter from '@/helpers/footer';
+  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
+
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
+    mixins: [appFlavorFlagsMixin],
     components: {
       Logo,
       DefaultFooter
     },
-
-    computed: {
-      enableFooter: enableFooter
-    }
   };
 </script>
 
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 8b897e35..28456fb5 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -19,10 +19,12 @@
 
 <script>
   import SimpleFooter from '@/layouts/SimpleFooter';
-  import enableFooter from '@/helpers/footer';
+  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
+
   const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
+    mixins: [appFlavorFlagsMixin],
     components: {
       Cross,
       SimpleFooter
@@ -33,7 +35,7 @@
         if (this.$route.meta.hideFooter) {
           return false;
         }
-        return enableFooter();
+        return this.flavorShowFooter;
       }
     },
 
diff --git a/client/src/mixins/app-flavor-flags.js b/client/src/mixins/app-flavor-flags.js
new file mode 100644
index 00000000..d73257e7
--- /dev/null
+++ b/client/src/mixins/app-flavor-flags.js
@@ -0,0 +1,24 @@
+export default {
+  computed: {
+    flavorShowObjectivesTitle() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv': return false;
+      }
+      return true;
+    },
+    flavorShowFooter() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv':
+          return false;
+      }
+      return true;
+    },
+    flavorShowInstrumentFilterSidebar() {
+      switch(process.env.VUE_APP_FLAVOR) {
+        case 'my-kv':
+          return false;
+      }
+      return true;
+    }
+  }
+};
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index c4edb598..78635a27 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -2,8 +2,10 @@
   <div class="instrument-overview">
     <instrument-filter
       class="instrument-overview__filter"
+      v-if="flavorShowInstrumentFilterSidebar"
       @filter="updateFilter"
     />
+    <div class="instrument-overview__filter" v-else />
     <div class="instrument-overview__list">
       <router-link
         :to="{name: 'instrument', params: {slug: instrument.slug}}"
@@ -23,8 +25,10 @@
   import InstrumentEntry from '@/components/instruments/InstrumentEntry';
   import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
   import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   export default {
+    mixins: [appFlavorFlagsMixin],
     components: {
       InstrumentFilter,
       InstrumentEntry,

From d7eaced8950b1b13de0ee8791ea355b28b6302dd Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 11 May 2022 11:46:27 +0200
Subject: [PATCH 5/5] Refactor from flavor mixin to ES6 module and plugin

---
 client/config/prod-my-kv.env.js               |  2 -
 client/config/prod.env.js                     |  2 -
 .../components/AssignmentWithSubmissions.vue  |  4 +-
 client/src/components/BackLink.vue            |  8 +--
 client/src/components/ContentBlock.vue        |  5 +-
 .../book-navigation/ContentNavigation.vue     |  9 ++--
 .../content-blocks/InstrumentWidget.vue       |  5 +-
 client/src/components/icons/Logo.vue          |  2 +-
 .../instruments/InstrumentEntry.vue           |  7 +--
 client/src/components/modules/Module.vue      |  5 +-
 .../components/modules/SnapshotCreated.vue    |  4 +-
 .../src/components/modules/SnapshotHeader.vue |  5 +-
 .../components/profile/DeactivatePerson.vue   |  5 +-
 .../components/toggle-menu/ToggleEditing.vue  |  6 +--
 client/src/helpers/app-flavor.js              | 45 ++++++++++++++++
 client/src/layouts/DefaultLayout.vue          |  4 +-
 client/src/layouts/PublicLayout.vue           |  4 +-
 client/src/layouts/SimpleLayout.vue           |  4 +-
 client/src/main.js                            |  7 ++-
 client/src/mixins/app-flavor-flags.js         | 24 ---------
 client/src/mixins/app-flavor-terms.js         | 52 -------------------
 client/src/pages/hello.vue                    |  6 +--
 client/src/pages/index.vue                    |  5 +-
 client/src/pages/instrumentOverview.vue       |  9 ++--
 client/src/pages/license-activation.vue       |  3 +-
 client/src/pages/module/moduleSettings.vue    |  5 +-
 client/src/pages/onboarding/start.vue         |  4 --
 client/src/pages/onboarding/step1.vue         |  8 +--
 client/src/pages/snapshot/snapshots.vue       |  4 +-
 client/src/pages/start.vue                    | 12 ++---
 client/src/pages/topic-page.vue               |  5 +-
 client/src/plugins/flavor.js                  |  7 +++
 client/src/router/portfolio.routes.js         |  6 ++-
 33 files changed, 106 insertions(+), 177 deletions(-)
 create mode 100644 client/src/helpers/app-flavor.js
 delete mode 100644 client/src/mixins/app-flavor-flags.js
 delete mode 100644 client/src/mixins/app-flavor-terms.js
 create mode 100644 client/src/plugins/flavor.js

diff --git a/client/config/prod-my-kv.env.js b/client/config/prod-my-kv.env.js
index 5f68581a..acdee143 100644
--- a/client/config/prod-my-kv.env.js
+++ b/client/config/prod-my-kv.env.js
@@ -4,8 +4,6 @@ module.exports = {
   * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
   * around strings
   */
-  VUE_APP_LOGO: '"https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-logo.png"',
-  VUE_APP_ENABLE_PORTFOLIO: "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
 
   /*
diff --git a/client/config/prod.env.js b/client/config/prod.env.js
index 48704e7f..9dcddc36 100644
--- a/client/config/prod.env.js
+++ b/client/config/prod.env.js
@@ -13,8 +13,6 @@ const values = {
   * and JS needs quotes around strings
   * see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
   */
-  VUE_APP_LOGO: '"/static/logo.png"',
-  VUE_APP_ENABLE_PORTFOLIO: "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
 
   /*
diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
index 944e0867..a335a799 100644
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/client/src/components/AssignmentWithSubmissions.vue
@@ -9,7 +9,7 @@
       <a
         class="button button--primary submissions-page__back"
         @click="$emit('back')"
-      >Aufgabe im {{ flavorTextModul }} anzeigen</a>
+      >Aufgabe im {{ $flavor.textModule }} anzeigen</a>
     </div>
 
     <div
@@ -64,13 +64,11 @@
 
 <script>
   import StudentSubmission from '@/components/StudentSubmission';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   import { meQuery } from '@/graphql/queries';
 
   export default {
     props: ['assignment'],
-    mixins: [appFlavorTermsMixin],
 
     components: {
       StudentSubmission
diff --git a/client/src/components/BackLink.vue b/client/src/components/BackLink.vue
index 0f490e79..86e10172 100644
--- a/client/src/components/BackLink.vue
+++ b/client/src/components/BackLink.vue
@@ -13,8 +13,6 @@
   import { ROOMS_PAGE } from '@/router/room.names';
   import { PROJECTS_PAGE } from '@/router/portfolio.names';
 
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
 
   export default {
@@ -33,8 +31,6 @@
       },
     },
 
-    mixins: [appFlavorTermsMixin],
-
     components: {
       ChevronLeft,
     },
@@ -55,9 +51,9 @@
       fullTitle() {
         switch (this.type) {
           case 'topic':
-            return `${this.flavorTextThema}: ${this.title}`;
+            return `${this.$flavor.textTopic}: ${this.title}`;
           case 'module':
-            return `${this.flavorTextModul}: ${this.title}`;
+            return `${this.$flavor.textModule}: ${this.title}`;
           default:
             return this.title;
         }
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 363c893c..30f91b67 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -81,7 +81,6 @@
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
   import me from '@/mixins/me';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   import { hidden } from '@/helpers/visibility';
   import { CONTENT_TYPE } from '@/consts/types';
@@ -115,7 +114,7 @@
       },
     },
 
-    mixins: [me, appFlavorTermsMixin],
+    mixins: [me],
 
     components: {
       PopoverLink,
@@ -139,7 +138,7 @@
           return '';
         }
 
-        return `${this.flavorTextInstrument} - ${instruments[contentType]}`;
+        return `${this.$flavor.textInstrument} - ${instruments[contentType]}`;
       },
       canEditContentBlock() {
         return this.contentBlock.mine && !this.contentBlock.indent;
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
index 289e124f..43ab0824 100644
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@@ -12,7 +12,7 @@
           class="content-navigation__link"
           @click.native="close"
         >
-          {{ flavorTextThemen }}
+          {{ $flavor.textTopics }}
         </router-link>
 
         <book-topic-navigation
@@ -27,7 +27,7 @@
           class="content-navigation__link"
           @click.native="close"
         >
-          {{ flavorTextInstrumente }}
+          {{ $flavor.textInstruments }}
         </router-link>
       </div>
 
@@ -99,7 +99,6 @@
 <script>
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
   import sidebarMixin from '@/mixins/sidebar';
   import meMixin from '@/mixins/me';
 
@@ -112,7 +111,7 @@
       }
     },
 
-    mixins: [sidebarMixin, meMixin, appFlavorTermsMixin],
+    mixins: [sidebarMixin, meMixin],
 
     components: {
       BookTopicNavigation,
@@ -121,7 +120,7 @@
 
     computed: {
       showPortfolio() {
-        return process.env.VUE_APP_ENABLE_PORTFOLIO;
+        return this.$flavor.showPortfolio;
       }
     },
 
diff --git a/client/src/components/content-blocks/InstrumentWidget.vue b/client/src/components/content-blocks/InstrumentWidget.vue
index 1470ac84..85c1e684 100644
--- a/client/src/components/content-blocks/InstrumentWidget.vue
+++ b/client/src/components/content-blocks/InstrumentWidget.vue
@@ -9,17 +9,14 @@
       :to="{name: 'instrument', params: { slug: value.slug }}"
       class="instrument-widget__button button"
     >
-      {{ flavorTextInstrument }} anzeigen
+      {{ $flavor.textInstrument }} anzeigen
     </router-link>
   </div>
 </template>
 
 <script>
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   export default {
     props: ['value'],
-    mixins: [appFlavorTermsMixin],
   };
 </script>
 
diff --git a/client/src/components/icons/Logo.vue b/client/src/components/icons/Logo.vue
index 7c0cbc50..cef4f43e 100644
--- a/client/src/components/icons/Logo.vue
+++ b/client/src/components/icons/Logo.vue
@@ -10,7 +10,7 @@
   export default {
     computed: {
       img() {
-        return process.env.VUE_APP_LOGO;
+        return this.$flavor.appLogo;
       }
     },
   };
diff --git a/client/src/components/instruments/InstrumentEntry.vue b/client/src/components/instruments/InstrumentEntry.vue
index f971362c..d023142b 100644
--- a/client/src/components/instruments/InstrumentEntry.vue
+++ b/client/src/components/instruments/InstrumentEntry.vue
@@ -15,7 +15,6 @@
 <script>
   import { INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY } from '@/consts/instrument.consts';
   import instrumentType from '@/helpers/instrumentType';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
     props: {
@@ -26,8 +25,6 @@
       },
     },
 
-    mixins: [appFlavorTermsMixin],
-
     computed: {
       typeClass() {
         return {
@@ -37,8 +34,8 @@
         };
       },
       categoryName() {
-        if (process.env.VUE_APP_FLAVOR === 'my-kv') {
-          return this.flavorTextInstrumente;
+        if (this.$flavor.appFlavor === 'my-kv') {
+          return this.$flavor.textInstruments;
         } else {
           return instrumentType(this.instrument);
         }
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index a9c1a9b1..82b1d921 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -40,7 +40,7 @@
     </div>
 
     <h3 id="objectives">
-      <span v-show="flavorShowObjectivesTitle">Lernziele</span>
+      <span v-show="$flavor.showObjectivesTitle">Lernziele</span>
     </h3>
 
     <div class="module__objective-groups">
@@ -65,7 +65,6 @@
   import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
   import Chapter from '@/components/Chapter.vue';
   import BookmarkActions from '@/components/notes/BookmarkActions';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   export default {
 
@@ -75,7 +74,7 @@
         default: () => ({}),
       },
     },
-    mixins: [appFlavorFlagsMixin],
+
     components: {
       BookmarkActions,
       ObjectiveGroups,
diff --git a/client/src/components/modules/SnapshotCreated.vue b/client/src/components/modules/SnapshotCreated.vue
index b63eb12f..5c947ffb 100644
--- a/client/src/components/modules/SnapshotCreated.vue
+++ b/client/src/components/modules/SnapshotCreated.vue
@@ -25,7 +25,7 @@
         <a
           class="button"
           @click="close"
-        >Zurück zum {{ flavorTextModul }}</a>
+        >Zurück zum {{ $flavor.textModule }}</a>
       </div>
     </template>
   </modal>
@@ -35,10 +35,8 @@
   import Modal from '@/components/Modal';
   import { SNAPSHOT_LIST } from '@/router/module.names';
   import dateformat from '@/helpers/date-format';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
-    mixins: [appFlavorTermsMixin],
     components: {
       Modal,
     },
diff --git a/client/src/components/modules/SnapshotHeader.vue b/client/src/components/modules/SnapshotHeader.vue
index f913389b..b3a741e3 100644
--- a/client/src/components/modules/SnapshotHeader.vue
+++ b/client/src/components/modules/SnapshotHeader.vue
@@ -37,7 +37,7 @@
         <checkbox
           :checked="agreement"
           data-cy="apply-checkbox"
-          :label="`Ich will die Anpassungen aus diesem Snapshot in das ${flavorTextModul} kopieren.`"
+          :label="`Ich will die Anpassungen aus diesem Snapshot in das ${$flavor.textModule} kopieren.`"
           @input="agreement = $event"
         />
       </div>
@@ -68,7 +68,6 @@
   import Checkbox from '@/components/ui/Checkbox';
 
   import me from '@/mixins/me';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   import APPLY_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/applySnapshot.gql';
   import { MODULE_PAGE } from '@/router/module.names';
@@ -89,7 +88,7 @@
       },
     },
 
-    mixins: [me, appFlavorTermsMixin],
+    mixins: [me],
 
     components: {
       Checkbox,
diff --git a/client/src/components/profile/DeactivatePerson.vue b/client/src/components/profile/DeactivatePerson.vue
index 40a3be2b..3029b55f 100644
--- a/client/src/components/profile/DeactivatePerson.vue
+++ b/client/src/components/profile/DeactivatePerson.vue
@@ -46,7 +46,7 @@
         <template v-else>
           Diese Person kann
         </template>
-        weiterhin {{ flavorTextModule }} und {{ flavorTextInstrumente }} lesen.
+        weiterhin {{ $flavor.textModules }} und {{ $flavor.textInstruments }} lesen.
       </li>
       <li class="deactivate-user__text deactivate-user__list-item">
         <template v-if="myself">
@@ -75,11 +75,8 @@
 
 <script>
   import Modal from '@/components/Modal';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
-    mixins: [appFlavorTermsMixin],
-
     components: {
       Modal
     },
diff --git a/client/src/components/toggle-menu/ToggleEditing.vue b/client/src/components/toggle-menu/ToggleEditing.vue
index ca977030..03af29d9 100644
--- a/client/src/components/toggle-menu/ToggleEditing.vue
+++ b/client/src/components/toggle-menu/ToggleEditing.vue
@@ -2,7 +2,7 @@
   <toggle
     :checked="module.inEditMode"
     data-cy="toggle-editing"
-    :label="`${flavorTextModul} anpassen`"
+    :label="`${$flavor.textModule} anpassen`"
     @input="toggle"
   />
 </template>
@@ -13,8 +13,6 @@
   import { gql } from '@apollo/client/core';
   import { setModuleEditMode } from '@/graphql/cache-operations';
 
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   const QUERY = gql`
           query ModuleEditModeQuery ($slug: String) {
               module(slug: $slug) {
@@ -25,8 +23,6 @@
           `;
 
   export default {
-    mixins: [appFlavorTermsMixin],
-
     components: {
       Toggle
     },
diff --git a/client/src/helpers/app-flavor.js b/client/src/helpers/app-flavor.js
new file mode 100644
index 00000000..933bf24b
--- /dev/null
+++ b/client/src/helpers/app-flavor.js
@@ -0,0 +1,45 @@
+const defaultFlavorValues = {
+  appFlavor: 'skillbox',
+  appLogo: '/static/logo.png',
+
+  // mySkillbox texts
+  textAppName: 'mySkillbox',
+  textTopic: 'Thema',
+  textTopics: 'Themen',
+  textModule: 'Modul',
+  textModules: 'Module',
+  textInstrument: 'Instrument',
+  textInstruments: 'Instrumente',
+
+  // mySkillbox flags
+  showFooter: true,
+  showObjectivesTitle: true,
+  showInstrumentFilterSidebar: true,
+  showPortfolio: true,
+};
+
+let flavorValues = Object.assign({}, defaultFlavorValues);
+
+if (process.env.VUE_APP_FLAVOR === 'my-kv') {
+  flavorValues = Object.assign({}, defaultFlavorValues, {
+    appFlavor: 'my-kv',
+    appLogo: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-logo.png',
+
+    // myKV texts
+    textAppName: 'myKV',
+    textTopic: 'HKB',
+    textTopics: 'HKB',
+    textModule: 'Lernfeld',
+    textModules: 'Lernfelder',
+    textInstrument: 'Grundlagenwissen',
+    textInstruments: 'Grundlagenwissen',
+
+    // myKV flags
+    showFooter: false,
+    showObjectivesTitle: false,
+    showInstrumentFilterSidebar: false,
+    showPortfolio: true,
+  });
+}
+
+export default flavorValues;
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 08020cf0..3de19670 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -26,10 +26,8 @@
   import ProfileSidebar from '@/components/profile/ProfileSidebar';
   import DefaultFooter from '@/layouts/DefaultFooter';
   import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   export default {
-    mixins: [appFlavorFlagsMixin],
     components: {
       HeaderBar,
       ProfileSidebar,
@@ -57,7 +55,7 @@
         return classes;
       },
       enableFooter() {
-        return this.flavorShowFooter && (!this.$route.meta || !this.$route.meta.hideFooter);
+        return this.$flavor.showFooter && (!this.$route.meta || !this.$route.meta.hideFooter);
       }
     }
   };
diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index c28b2a4c..ce2a7640 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -11,18 +11,16 @@
     <router-view class="public__content layout__content" />
     <default-footer
       class="skillbox__footer public__footer footer"
-      v-if="flavorShowFooter"
+      v-if="$flavor.showFooter"
     />
   </div>
 </template>
 <script>
   import DefaultFooter from '@/layouts/DefaultFooter';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
-    mixins: [appFlavorFlagsMixin],
     components: {
       Logo,
       DefaultFooter
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 28456fb5..2b5dd509 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -19,12 +19,10 @@
 
 <script>
   import SimpleFooter from '@/layouts/SimpleFooter';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
-    mixins: [appFlavorFlagsMixin],
     components: {
       Cross,
       SimpleFooter
@@ -35,7 +33,7 @@
         if (this.$route.meta.hideFooter) {
           return false;
         }
-        return this.flavorShowFooter;
+        return this.$flavor.showFooter;
       }
     },
 
diff --git a/client/src/main.js b/client/src/main.js
index c6ca7c72..2c4a3f20 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -4,7 +4,7 @@ import VueVimeoPlayer from 'vue-vimeo-player';
 import apolloClientFactory from './graphql/client';
 import VueApollo from 'vue-apollo';
 import App from './App.vue';
-import {postLoginRedirectUrlKey, router} from './router';
+import { postLoginRedirectUrlKey, router } from './router';
 import store from '@/store/index';
 import VueScrollTo from 'vue-scrollto';
 import autoGrow from '@/directives/auto-grow';
@@ -15,7 +15,8 @@ import VueRemoveEdges from '@/plugins/edges';
 import VueMatomo from 'vue-matomo';
 import VueToast from 'vue-toast-notification';
 import VueLogger from 'vuejs-logger';
-import {joiningClass, loginRequired, unauthorizedAccess} from "@/router/guards";
+import { joiningClass, loginRequired, unauthorizedAccess } from '@/router/guards';
+import flavorPlugin from '@/plugins/flavor';
 
 Vue.config.productionTip = false;
 const isProduction = process.env.NODE_ENV === 'production';
@@ -38,6 +39,8 @@ Vue.use(VueScrollTo, {
   offset: -50,
 });
 
+Vue.use(flavorPlugin);
+
 if (process.env.MATOMO_HOST) {
   Vue.use(VueMatomo, {
     host: process.env.MATOMO_HOST,
diff --git a/client/src/mixins/app-flavor-flags.js b/client/src/mixins/app-flavor-flags.js
deleted file mode 100644
index d73257e7..00000000
--- a/client/src/mixins/app-flavor-flags.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export default {
-  computed: {
-    flavorShowObjectivesTitle() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv': return false;
-      }
-      return true;
-    },
-    flavorShowFooter() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return false;
-      }
-      return true;
-    },
-    flavorShowInstrumentFilterSidebar() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return false;
-      }
-      return true;
-    }
-  }
-};
diff --git a/client/src/mixins/app-flavor-terms.js b/client/src/mixins/app-flavor-terms.js
deleted file mode 100644
index 5ee66dd8..00000000
--- a/client/src/mixins/app-flavor-terms.js
+++ /dev/null
@@ -1,52 +0,0 @@
-export default {
-  computed: {
-    flavorPageTitle() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv': return 'My KV';
-      }
-      return 'my Skillbox';
-    },
-    flavorTextModul() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'Lernfeld';
-      }
-      return 'Modul';
-    },
-    flavorTextModule() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'Lernfelder';
-      }
-      return 'Module';
-    },
-    flavorTextThema() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'HKB';
-      }
-      return 'Thema';
-    },
-    flavorTextThemen() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'HKB';
-      }
-      return 'Themen';
-    },
-    flavorTextInstrument() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'Grundlagenwissen';
-      }
-      return 'Instrument';
-    },
-    flavorTextInstrumente() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'Grundlagenwissen';
-      }
-      return 'Instrumente';
-    },
-  }
-};
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index 15e66fc3..cbf77f1f 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -19,7 +19,7 @@
         </a>
       </div>
       <p class="about__text">
-        mySkillbox ist ein Angebot des hep Verlags in
+        {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in
         Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB).
       </p>
     </div>
@@ -29,7 +29,7 @@
         class="login-actions__title"
         data-cy="hello-title"
       >
-        Wollen Sie {{ flavorPageTitle }} im Unterricht verwenden?
+        Wollen Sie {{ $flavor.textAppName }} im Unterricht verwenden?
       </h2>
       <a
         class="button button--primary button--big actions__submit"
@@ -71,13 +71,11 @@
 </template>
 
 <script>
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
   const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim');
   const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
-    mixins: [appFlavorTermsMixin],
     components: {
       HepLogoNoClaim,
       EhbLogo,
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 4901a5cc..754794f2 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -14,7 +14,7 @@
       </li>
       <li>
         <router-link to="/module">
-          {{ flavorTextModul }}
+          {{ $flavor.textModule }}
         </router-link>
       </li>
       <li>
@@ -28,11 +28,8 @@
 
 <script>
   import ALL_MODULES from '@/graphql/gql/queries/allModules.gql';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
-    mixins: [appFlavorTermsMixin],
-
     data() {
       return {
         modules: []
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index 78635a27..21eb7fdf 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -2,10 +2,13 @@
   <div class="instrument-overview">
     <instrument-filter
       class="instrument-overview__filter"
-      v-if="flavorShowInstrumentFilterSidebar"
+      v-if="$flavor.showInstrumentFilterSidebar"
       @filter="updateFilter"
     />
-    <div class="instrument-overview__filter" v-else />
+    <div
+      class="instrument-overview__filter"
+      v-else
+    />
     <div class="instrument-overview__list">
       <router-link
         :to="{name: 'instrument', params: {slug: instrument.slug}}"
@@ -25,10 +28,8 @@
   import InstrumentEntry from '@/components/instruments/InstrumentEntry';
   import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
   import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   export default {
-    mixins: [appFlavorFlagsMixin],
     components: {
       InstrumentFilter,
       InstrumentEntry,
diff --git a/client/src/pages/license-activation.vue b/client/src/pages/license-activation.vue
index ade4a71f..e55cfa87 100644
--- a/client/src/pages/license-activation.vue
+++ b/client/src/pages/license-activation.vue
@@ -72,12 +72,11 @@
 
   import me from '@/mixins/me';
   import logout from '@/mixins/logout';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   const ValidatedInput = () => import('@/components/validation/ValidatedInput');
 
   export default {
-    mixins: [me, logout, appFlavorTermsMixin],
+    mixins: [me, logout],
     components: {
       LoadingButton,
       ValidationObserver,
diff --git a/client/src/pages/module/moduleSettings.vue b/client/src/pages/module/moduleSettings.vue
index 85eb8fa0..2a5529a2 100644
--- a/client/src/pages/module/moduleSettings.vue
+++ b/client/src/pages/module/moduleSettings.vue
@@ -8,7 +8,7 @@
         Lösungen
       </h2>
       <p class="module-settings__paragraph">
-        Wollen Sie die Lösungen in diesem {{ flavorTextModul }} für die Lernenden der ausgewählten Klasse anzeigen?
+        Wollen Sie die Lösungen in diesem {{ $flavor.textModule }} für die Lernenden der ausgewählten Klasse anzeigen?
       </p>
       <toggle-solutions-for-module />
     </section>
@@ -36,11 +36,8 @@
 
 <script>
   import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
-    mixins: [appFlavorTermsMixin],
-
     components: {
       ToggleSolutionsForModule,
     }
diff --git a/client/src/pages/onboarding/start.vue b/client/src/pages/onboarding/start.vue
index 9b97c8c5..628543a8 100644
--- a/client/src/pages/onboarding/start.vue
+++ b/client/src/pages/onboarding/start.vue
@@ -12,13 +12,9 @@
 </template>
 
 <script>
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
-
-    mixins: [appFlavorTermsMixin],
     components: {
       Logo
     },
diff --git a/client/src/pages/onboarding/step1.vue b/client/src/pages/onboarding/step1.vue
index fa1ceec6..dd4abdd0 100644
--- a/client/src/pages/onboarding/step1.vue
+++ b/client/src/pages/onboarding/step1.vue
@@ -7,16 +7,16 @@
       Ihr Lernbereich
     </h1>
     <h2 class="onboarding__heading">
-      {{ flavorTextThemen }}
+      {{ $flavor.textTopics }}
     </h2>
     <p class="onboarding__paragraph">
-      In den «{{ flavorTextThemen }}» finden Sie aktuelle {{ flavorTextModule }} mit Aufträgen und Situationen.
+      In den «{{ $flavor.textTopics }}» finden Sie aktuelle {{ $flavor.textModules }} mit Aufträgen und Situationen.
     </p>
     <h2 class="onboarding__heading">
-      {{ flavorTextInstrumente }}
+      {{ $flavor.textInstruments }}
     </h2>
     <p class="onboarding__paragraph">
-      Die «{{ flavorTextInstrumente }}» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen.
+      Die «{{ $flavor.textInstruments }}» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen.
     </p>
     <h2 class="onboarding__heading">
       News
diff --git a/client/src/pages/snapshot/snapshots.vue b/client/src/pages/snapshot/snapshots.vue
index 8448fc13..2f015f07 100644
--- a/client/src/pages/snapshot/snapshots.vue
+++ b/client/src/pages/snapshot/snapshots.vue
@@ -2,7 +2,7 @@
   <div class="snapshots">
     <h1>Snapshots</h1>
     <p class="snapshots__details">
-      {{ flavorTextThema }}: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
+      {{ $flavor.textTopic }}: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
     </p>
     <snapshot-team-menu
       :selected="selectedLink"
@@ -26,12 +26,10 @@
   import SnapshotListItem from '@/components/modules/SnapshotListItem';
   import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
   import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   const defaultModule = {topic: {}, snapshots: []};
 
   export default {
-    mixins: [appFlavorTermsMixin],
     components: {
       SnapshotTeamMenu,
       SnapshotListItem,
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index c668aa9f..a4603e8b 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -9,14 +9,14 @@
           class="start-page__heading"
           data-cy="start-page-heading"
         >
-          Letzte {{ flavorTextModule }}
+          Letzte {{ $flavor.textModules }}
         </h2>
         <h3
           class="start-page__no-modules"
           data-cy="no-modules-yet"
           v-if="!me.recentModules.length"
         >
-          Sie haben sich noch kein {{ flavorTextModul }} angeschaut. Legen Sie jetzt los!
+          Sie haben sich noch kein {{ $flavor.textModule }} angeschaut. Legen Sie jetzt los!
         </h3>
         <div class="start-page__modules-list">
           <module-teaser
@@ -34,7 +34,7 @@
           tag="div"
           class="button"
         >
-          Alle {{ flavorTextModule }} anzeigen
+          Alle {{ $flavor.textModules }} anzeigen
         </router-link>
       </div>
       <div
@@ -85,11 +85,9 @@
   import meQuery from '@/mixins/me';
   import news from '@/mixins/news';
 
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   export default {
 
-    mixins: [meQuery, news, appFlavorTermsMixin],
+    mixins: [meQuery, news],
 
     components: {
       NewsTeaser,
@@ -105,7 +103,7 @@
       },
       moduleText() {
         if (this.me.lastModule && this.me.lastModule.slug) {
-          return `Aktuelles ${this.flavorTextModul} anzeigen`;
+          return `Aktuelles ${this.$flavor.textModule} anzeigen`;
         }
         return 'Alle Inhalte anzeigen';
       },
diff --git a/client/src/pages/topic-page.vue b/client/src/pages/topic-page.vue
index 7d1ef1d7..4bb85519 100644
--- a/client/src/pages/topic-page.vue
+++ b/client/src/pages/topic-page.vue
@@ -30,7 +30,7 @@
           v-if="me.isTeacher && topic.instructions"
         >
           <bulb-icon class="topic__instruction-icon topic__link-icon" />
-          <span class="topic__link-description">Anweisungen zum {{ flavorTextThema }} anzeigen</span>
+          <span class="topic__link-description">Anweisungen zum {{ $flavor.textTopic }} anzeigen</span>
         </a>
       </div>
       <div class="topic__modules">
@@ -48,7 +48,6 @@
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
   import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
   import me from '@/mixins/me';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
   import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
@@ -59,7 +58,7 @@
 
   export default {
 
-    mixins: [me, appFlavorTermsMixin],
+    mixins: [me],
     components: {
       BookTopicNavigation,
       ModuleTeaser,
diff --git a/client/src/plugins/flavor.js b/client/src/plugins/flavor.js
new file mode 100644
index 00000000..63e412bd
--- /dev/null
+++ b/client/src/plugins/flavor.js
@@ -0,0 +1,7 @@
+import flavorValues from '@/helpers/app-flavor';
+
+export default {
+  install: (Vue) => {
+    Vue.prototype.$flavor = Object.assign({}, flavorValues);
+  }
+};
diff --git a/client/src/router/portfolio.routes.js b/client/src/router/portfolio.routes.js
index 533a7e47..d03ab8c4 100644
--- a/client/src/router/portfolio.routes.js
+++ b/client/src/router/portfolio.routes.js
@@ -1,4 +1,6 @@
-import {NEW_PROJECT_PAGE, PROJECTS_PAGE} from '@/router/portfolio.names';
+import { NEW_PROJECT_PAGE, PROJECTS_PAGE } from '@/router/portfolio.names';
+import flavorValues from '@/helpers/app-flavor';
+
 const portfolio = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/portfolio');
 const project = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/project');
 const newProject = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/newProject');
@@ -11,6 +13,6 @@ const portfolioRoutes = [
   {path: '/edit-project/:slug', name: 'edit-project', component: editProject, props: true},
 ];
 
-const routes = process.env.VUE_APP_ENABLE_PORTFOLIO ? portfolioRoutes : [];
+const routes = flavorValues.showPortfolio ? portfolioRoutes : [];
 
 export default routes;