144 lines
3.9 KiB
Vue
144 lines
3.9 KiB
Vue
<template>
|
|
<div class="license-activation public-page">
|
|
<header class="info-header">
|
|
<p class="info-header__text small-emph">Für <span class="info-header__emph">{{me.email}}</span> haben wir keine gültige Lizenz gefunden</p>
|
|
</header>
|
|
<section class="coupon">
|
|
<form class="license-activation__form license-activation-form" novalidate @submit.prevent="validateBeforeSubmit">
|
|
<h2>Geben Sie einen Coupon-Code ein</h2>
|
|
<div class="change-form__field skillboxform-input">
|
|
<label for="coupon" class="skillboxform-input__label">Coupon-Code</label>
|
|
<input
|
|
id="coupon"
|
|
name="coupon"
|
|
type="coupon"
|
|
data-vv-as="Coupon"
|
|
v-model="coupon"
|
|
v-validate="'required'"
|
|
:class="{ 'skillboxform-input__input--error': errors.has('coupon') }"
|
|
class="change-form__new skillbox-input skillboxform-input__input"
|
|
autocomplete="off"
|
|
data-cy="coupon-input"
|
|
tabindex="0"
|
|
/>
|
|
<small
|
|
v-if="errors.has('coupon') && submitted"
|
|
class="skillboxform-input__error"
|
|
data-cy="coupon-local-errors"
|
|
>{{ errors.first('coupon') }}</small>
|
|
<small
|
|
v-for="error in couponErrors"
|
|
:key="error"
|
|
class="skillboxform-input__error"
|
|
data-cy="coupon-remote-errors"
|
|
>{{ error }}</small>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="button button--primary button--big actions__submit" data-cy="coupon-button">Coupon abschicken</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<section class="get-license">
|
|
<h2>Oder, kaufen Sie eine Lizenz</h2>
|
|
<ul>
|
|
<li><a href="https://www.hep-verlag.ch">mySkillobx für Lehrpersonen</a></li>
|
|
<li><a href="https://www.hep-verlag.ch">mySkillobx für Lernende</a></li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
|
|
import ME_QUERY from '@/graphql/gql/meQuery.gql';
|
|
|
|
export default {
|
|
components: {},
|
|
|
|
methods: {
|
|
validateBeforeSubmit() {
|
|
this.$validator.validate().then(result => {
|
|
this.submitted = true;
|
|
let that = this;
|
|
if (result) {
|
|
this.$apollo.mutate({
|
|
mutation: REDEEM_COUPON,
|
|
variables: {
|
|
input: {
|
|
couponCodeInput: this.coupon
|
|
}
|
|
},
|
|
update(
|
|
store,
|
|
{
|
|
data: {coupon}
|
|
}
|
|
) {
|
|
if (coupon.success) {
|
|
that.couponErrors = [];
|
|
that.$apollo.query({
|
|
query: ME_QUERY,
|
|
fetchPolicy: 'network-only',
|
|
}).then(() => that.$router.push('/'));
|
|
} else {
|
|
if (coupon.errors[0].field === 'invalid_coupon') {
|
|
that.couponErrors = ['Der angegebene Coupon-Code ist falsch.'];
|
|
} else {
|
|
that.couponErrors = ['Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.'];
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
resetForm() {
|
|
this.coupon = '';
|
|
this.submitted = false;
|
|
this.$validator.reset();
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
coupon: '',
|
|
couponErrors: [],
|
|
loginError: '',
|
|
submitted: false,
|
|
me: {
|
|
email: ''
|
|
}
|
|
};
|
|
},
|
|
|
|
apollo: {
|
|
me: {
|
|
query: ME_QUERY,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="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;
|
|
}
|
|
}
|
|
|
|
.get-license {
|
|
margin-top: $large-spacing
|
|
}
|
|
|
|
</style>
|