skillbox/client/src/pages/email-verification.vue

93 lines
2.3 KiB
Vue

<template>
<div class="emailconfirmation public-page">
<h1 class="emailconfirmation__title public-page__title">Überprüfung der E-Mail Adresse</h1>
<p v-if="loading">Der Verifikationscode wird überprüft.</p>
<p v-if="showOkMessage" data-cy="code-ok-msg">Der Verifikationscode ist gültig. Sie werden weitergeleitet.</p>
<p v-if="showErrorMessage" data-cy="code-nok-msg">{{errorMessage}}</p>
</div>
</template>
<script>
import REGISTRATION_MUTATION from '@/graphql/gql/mutations/registration.gql';
export default {
data() {
return {
loading: true,
keyValid: false,
errorMessage: ''
};
},
computed: {
showOkMessage() {
return !this.loading && this.keyValid;
},
showErrorMessage() {
return !this.loading && !this.keyValid;
}
},
mounted() {
this.$apollo.mutate({
mutation: REGISTRATION_MUTATION,
client: 'publicClient',
variables: {
input: {
confirmationKey: this.$route.query.confirmation,
userId: this.$route.query.id
}
},
fetchPolicy: 'no-cache'
}).then(({data}) => {
this.loading = false;
if (data.registration.success) {
this.keyValid = true;
if (data.registration.message === 'no_valid_license') {
this.$router.push({name: 'licenseActivation'});
} else {
this.$router.push('/');
}
} else {
switch (data.registration.message) {
case 'invalid_key':
this.errorMessage = 'Der angegebene Verifizierungscode ist ungültig oder abgelaufen.';
break;
case 'no_valid_license':
this.$router.push({name: 'licenseActivation'});
break;
default:
this.errorMessage = 'Ein Fehler ist aufgetreten. Bitte kontaktieren Sie den Administrator.';
}
}
})
.catch(() => {
this.errorMessage = 'Ein Fehler ist aufgetreten. Bitte kontaktieren Sie den Administrator.'
});
},
};
</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;
}
}
</style>