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,13 +264,15 @@
 
 <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';
-  return {
+
+  function initialData() {
+    return {
       prefix: 'Herr',
       lastname: '',
       firstname: '',
@@ -289,129 +293,131 @@ function initialData() {
       registrationError: '',
       acceptedTermsError: [],
       submitted: false,
-  };
+    };
-}
+  }
 
-export default {
+  export default {
-  components: {
-    LoadingButton,
-    Checkbox
-  },
 
-  data() {
+    mixins: [pageTitleMixin],
-    return Object.assign(
+    components: {
-      {
+      LoadingButton,
-        helloEmail: '',
+      Checkbox
-        loading: false,
+    },
-      },
-      initialData()
-    );
-  },
 
-  methods: {
+    data() {
-    validateBeforeSubmit() {
+      return Object.assign(
-      this.$validator.validate().then(result => {
+        {
-        this.submitted = true;
+          helloEmail: '',
-        if (result) {
+          loading: false,
-          this.loading = true;
+        },
-          const registrationData = {
+        initialData()
-            customer: {
+      );
-              prefix: this.prefix,
+    },
-              email: this.helloEmail,
+
-              firstname: this.firstname,
+    methods: {
-              lastname: this.lastname,
+      validateBeforeSubmit() {
-              gender: this.prefix === 'Herr' ? 1 : 2,
+        this.$validator.validate().then(result => {
-              addresses: [{
+          this.submitted = true;
-                street: [this.street],
+          if (result) {
-                postcode: this.postcode,
+            this.loading = true;
-                city: this.city,
+            const registrationData = {
-                country_id: 'CH',
+              customer: {
+                prefix: this.prefix,
+                email: this.helloEmail,
                 firstname: this.firstname,
                 lastname: this.lastname,
-                prefix: this.prefix,
+                gender: this.prefix === 'Herr' ? 1 : 2,
-                default_shipping: true,
+                addresses: [{
-                default_billing: true
+                  street: [this.street],
-              }]
+                  postcode: this.postcode,
-            },
+                  city: this.city,
-            password: this.password,
+                  country_id: 'CH',
-            accepted_terms: this.acceptedTerms
+                  firstname: this.firstname,
-          };
+                  lastname: this.lastname,
+                  prefix: this.prefix,
+                  default_shipping: true,
+                  default_billing: true
+                }]
+              },
+              password: this.password,
+              accepted_terms: this.acceptedTerms
+            };
 
-          register(registrationData).then((response) => {
+            register(registrationData).then((response) => {
-            this.loading = false;
+              this.loading = false;
-            if (response.data.id && response.data.id > 0) {
+              if (response.data.id && response.data.id > 0) {
-              this.$router.push({name: 'checkEmail'});
+                this.$router.push({name: 'checkEmail'});
-            }
-          })
-          .catch((error) => {
-            this.loading = false;
-            console.warn(error);
-            if (error.response.data.message) {
-              switch (error.response.data.message) {
-                case 'Ein Kunde mit der gleichen E-Mail-Adresse existiert bereits in einer zugeordneten Website.':
-                  this.emailErrors = ['Die angegebene E-Mail ist bereits registriert.'];
-                  break;
-                case 'Sie müssen hier zustimmen, damit Sie sich registrieren können.':
-                  this.acceptedTermsError = ['Sie müssen hier zustimmen, damit Sie sich registrieren können.'];
-                  break;
-                default:
-                  this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
               }
-            } else {
+            })
-              this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
+              .catch((error) => {
-            }
+                this.loading = false;
-          });
+                console.warn(error);
-        }
+                if (error.response.data.message) {
-      });
+                  switch (error.response.data.message) {
+                    case 'Ein Kunde mit der gleichen E-Mail-Adresse existiert bereits in einer zugeordneten Website.':
+                      this.emailErrors = ['Die angegebene E-Mail ist bereits registriert.'];
+                      break;
+                    case 'Sie müssen hier zustimmen, damit Sie sich registrieren können.':
+                      this.acceptedTermsError = ['Sie müssen hier zustimmen, damit Sie sich registrieren können.'];
+                      break;
+                    default:
+                      this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
+                  }
+                } else {
+                  this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
+                }
+              });
+          }
+        });
+      },
+      resetForm() {
+        Object.assign(this.$data, initialData());
+        this.$validator.reset();
+      }
     },
-    resetForm() {
-      Object.assign(this.$data, initialData());
-      this.$validator.reset();
-    }
-  },
 
-  apollo: {
+    apollo: {
-    helloEmail: {
+      helloEmail: {
-      query: HELLO_EMAIL,
+        query: HELLO_EMAIL,
-      result({data}) {
+        result({data}) {
-        if (data.helloEmail && data.helloEmail.email === '') {
+          if (data.helloEmail && data.helloEmail.email === '') {
+            this.$router.push({name: 'hello'});
+          }
+        },
+        update(data) {
+          return data.helloEmail.email;
+        },
+        error() {
+          console.log('error');
           this.$router.push({name: 'hello'});
         }
       },
-      update(data) {
-        return data.helloEmail.email;
-      },
-      error() {
-        console.log('error');
-        this.$router.push({name: 'hello'});
-      }
     },
-  },
 
-};
+  };
 </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 {
-  &__reset {
-    display: inline-block;
-    margin-left: $large-spacing;
-  }
-}
-
-.registration {
-  &__text {
     font-family: $sans-serif-font-family;
-    margin-bottom: $small-spacing;
+    color: $color-brand;
+  }
+
+  .actions {
+    &__reset {
+      display: inline-block;
+      margin-left: $large-spacing;
+    }
+  }
+
+  .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,