Get page title from env variable

This commit is contained in:
Ramon Wenger 2021-01-25 17:48:20 +01:00
parent 9791d2d587
commit 651cc1d67d
7 changed files with 145 additions and 122 deletions

View File

@ -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
*/

View File

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

View File

@ -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
},

View File

@ -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() {

View File

@ -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>

View File

@ -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 HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
import Checkbox from '@/components/Checkbox';
import LoadingButton from '@/components/LoadingButton';
import {register} from '../hep-client/index';
import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
import Checkbox from '@/components/Checkbox';
import LoadingButton from '@/components/LoadingButton';
function initialData() {
return {
import pageTitleMixin from '@/mixins/page-title';
function initialData() {
return {
prefix: 'Herr',
lastname: '',
firstname: '',
@ -289,129 +293,131 @@ function initialData() {
registrationError: '',
acceptedTermsError: [],
submitted: false,
};
}
};
}
export default {
components: {
LoadingButton,
Checkbox
},
export default {
data() {
return Object.assign(
{
helloEmail: '',
loading: false,
},
initialData()
);
},
mixins: [pageTitleMixin],
components: {
LoadingButton,
Checkbox
},
methods: {
validateBeforeSubmit() {
this.$validator.validate().then(result => {
this.submitted = true;
if (result) {
this.loading = true;
const registrationData = {
customer: {
prefix: this.prefix,
email: this.helloEmail,
firstname: this.firstname,
lastname: this.lastname,
gender: this.prefix === 'Herr' ? 1 : 2,
addresses: [{
street: [this.street],
postcode: this.postcode,
city: this.city,
country_id: 'CH',
data() {
return Object.assign(
{
helloEmail: '',
loading: false,
},
initialData()
);
},
methods: {
validateBeforeSubmit() {
this.$validator.validate().then(result => {
this.submitted = true;
if (result) {
this.loading = true;
const registrationData = {
customer: {
prefix: this.prefix,
email: this.helloEmail,
firstname: this.firstname,
lastname: this.lastname,
prefix: this.prefix,
default_shipping: true,
default_billing: true
}]
},
password: this.password,
accepted_terms: this.acceptedTerms
};
gender: this.prefix === 'Herr' ? 1 : 2,
addresses: [{
street: [this.street],
postcode: this.postcode,
city: this.city,
country_id: 'CH',
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) => {
this.loading = false;
if (response.data.id && response.data.id > 0) {
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.';
register(registrationData).then((response) => {
this.loading = false;
if (response.data.id && response.data.id > 0) {
this.$router.push({name: 'checkEmail'});
}
} 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: {
helloEmail: {
query: HELLO_EMAIL,
result({data}) {
if (data.helloEmail && data.helloEmail.email === '') {
apollo: {
helloEmail: {
query: HELLO_EMAIL,
result({data}) {
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/_mixins.scss";
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.text-link {
font-family: $sans-serif-font-family;
color: $color-brand;
}
.actions {
&__reset {
display: inline-block;
margin-left: $large-spacing;
}
}
.registration {
&__text {
.text-link {
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>

View File

@ -42,8 +42,8 @@
</div>
<div class="start-page__onboarding">
<h2 class="start-page__heading">Kennen Sie schon alle Bereiche von mySkillbox?</h2>
<p class="start-page__paragraph">Schauen Sie sich jetzt die Einführung zu mySkillbox an.</p>
<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 {{ 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,