Get page title from env variable

client/config/prod.env.js

@@ -11,6 +11,7 @@ module.exports = {
   VUE_APP_LOGO: JSON.stringify(process.env.VUE_APP_LOGO) || '"/static/logo.png"',
   VUE_APP_ENABLE_PORTFOLIO: process.env.ENABLE_PORTFOLIO || "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
+  VUE_APP_JS_TITLE: JSON.stringify(process.env.VUE_APP_TITLE) || '"mySkillbox"',
   /*
    * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
    */

client/src/mixins/page-title.js

@@ -0,0 +1,7 @@
+export default {
+  data() {
+    return {
+      pageTitle: process.env.VUE_APP_JS_TITLE
+    };
+  }
+};

client/src/pages/hello.vue

@@ -2,7 +2,7 @@
   <div class="hello public-page">
     <h1
       class="hello__title public-page__title"
-      data-cy="hello-title">Wollen Sie mySkillbox jetzt im Unterricht verwenden?</h1>
+      data-cy="hello-title">Wollen Sie {{ pageTitle }} jetzt im Unterricht verwenden?</h1>
     <form
       class="hello__form hello-form"
       novalidate
@@ -48,8 +48,10 @@
   import {emailExists} from '../hep-client/index';
   import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
   import LoadingButton from '@/components/LoadingButton';
+  import pageTitleMixin from '@/mixins/page-title';
 
   export default {
+    mixins: [pageTitleMixin],
     components: {
       LoadingButton
     },

client/src/pages/license-activation.vue

@@ -58,10 +58,10 @@
       <ul class="license-links">
         <li class="license-links__item"><a
           :href="teacherEditionUrl"
-          class="hep-link">mySkillbox für Lehrpersonen</a></li>
+          class="hep-link">{{ pageTitle }} für Lehrpersonen</a></li>
         <li class="license-links__item"><a
           :href="studentEditionUrl"
-          class="hep-link">mySkillbox für Lernende</a></li>
+          class="hep-link">{{ pageTitle }} für Lernende</a></li>
       </ul>
     </section>
   </div>
@@ -75,9 +75,10 @@ import LoadingButton from '@/components/LoadingButton';
 
 import me from '@/mixins/me';
 import logout from '@/mixins/logout';
+import pageTitleMixin from '@/mixins/page-title';
 
 export default {
-  mixins: [me, logout],
+  mixins: [me, logout, pageTitleMixin],
   components: {LoadingButton},
 
   data() {

client/src/pages/onboarding/start.vue

@@ -4,7 +4,7 @@
     <h1 class="onboarding__heading">Herzlich willkommen!</h1>
 
     <p class="onboarding__claim">
-      Schauen Sie sich die Einführung an und lernen Sie mySkillbox kennen.
+      Schauen Sie sich die Einführung an und lernen Sie {{ pageTitle }} kennen.
     </p>
   </div>
 </template>
@@ -12,9 +12,13 @@
 <script>
   import Logo from '@/components/icons/Logo';
 
+  import pageTitleMixin from '@/mixins/page-title';
+
   export default {
+
+    mixins: [pageTitleMixin],
     components: {
       Logo
-    }
+    },
   };
 </script>

client/src/pages/registration.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="registration public-page">
     <header class="info-header">
-      <p class="info-header__text small-emph">Für <span class="info-header__emph">{{ helloEmail }}</span> haben wir kein Hep Konto gefunden.</p>
+      <p class="info-header__text small-emph">Für <span class="info-header__emph">{{ helloEmail }}</span> haben wir kein
+      Hep Konto gefunden.</p>
       <h1
         class="registration__title public-page__title"
-        data-cy="registration-title">Damit Sie mySkillbox verwenden können, müssen Sie ein Konto erstellen.</h1>
+        data-cy="registration-title">Damit Sie {{ pageTitle }} verwenden können, müssen Sie ein Konto erstellen.</h1>
     </header>
     <form
       class="registration__form registration-form"
@@ -28,7 +29,8 @@
           >
             <option
               value="Herr"
-              selected>Herr</option>
+              selected>Herr
+            </option>
             <option value="Frau">Frau</option>
           </select>
         </div>
@@ -262,12 +264,14 @@
 
 <script>
 
-import {register} from '../hep-client/index';
+  import {register} from '../hep-client/index';
-import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
+  import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
-import Checkbox from '@/components/Checkbox';
+  import Checkbox from '@/components/Checkbox';
-import LoadingButton from '@/components/LoadingButton';
+  import LoadingButton from '@/components/LoadingButton';
 
-function initialData() {
+  import pageTitleMixin from '@/mixins/page-title';
+
+  function initialData() {
     return {
       prefix: 'Herr',
       lastname: '',
@@ -290,9 +294,11 @@ function initialData() {
       acceptedTermsError: [],
       submitted: false,
     };
-}
+  }
 
-export default {
+  export default {
+
+    mixins: [pageTitleMixin],
     components: {
       LoadingButton,
       Checkbox
@@ -388,30 +394,30 @@ export default {
       },
     },
 
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/_variables.scss";
+  @import "@/styles/_variables.scss";
-@import "@/styles/_mixins.scss";
+  @import "@/styles/_mixins.scss";
 
-.text-link {
+  .text-link {
     font-family: $sans-serif-font-family;
     color: $color-brand;
-}
+  }
 
-.actions {
+  .actions {
     &__reset {
       display: inline-block;
       margin-left: $large-spacing;
     }
-}
+  }
 
-.registration {
+  .registration {
     &__text {
       font-family: $sans-serif-font-family;
       margin-bottom: $small-spacing;
     }
-}
+  }
 
 </style>

client/src/pages/start.vue

@@ -42,8 +42,8 @@
       </div>
 
       <div class="start-page__onboarding">
-        <h2 class="start-page__heading">Kennen Sie schon alle Bereiche von mySkillbox?</h2>
+        <h2 class="start-page__heading">Kennen Sie schon alle Bereiche von {{ pageTitle }}?</h2>
-        <p class="start-page__paragraph">Schauen Sie sich jetzt die Einführung zu mySkillbox an.</p>
+        <p class="start-page__paragraph">Schauen Sie sich jetzt die Einführung zu {{ pageTitle }} an.</p>
         <router-link
           :to="{name: 'onboarding-start'}"
           class="button button--primary">Los geht's
@@ -69,9 +69,11 @@
   import meQuery from '@/mixins/me';
   import news from '@/mixins/news';
 
+  import pageTitleMixin from '@/mixins/page-title';
+
   export default {
 
-    mixins: [meQuery, news],
+    mixins: [meQuery, news, pageTitleMixin],
 
     components: {
       MobileHeader,