114 lines
2.3 KiB
Vue
114 lines
2.3 KiB
Vue
<template>
|
|
<div
|
|
class="read-only-banner"
|
|
data-cy="read-only-banner"
|
|
v-if="me.readOnly || me.selectedClass.readOnly"
|
|
>
|
|
<div class="read-only-banner__content">
|
|
<p class="read-only-banner__text">
|
|
{{ readOnlyText }} Sie können Inhalte lesen, aber nicht
|
|
bearbeiten.
|
|
</p>
|
|
<div class="read-only-banner__buttons">
|
|
<router-link
|
|
:to="licenseActivationLink"
|
|
data-cy="license-activation-link"
|
|
class="read-only-banner__link button button--primary"
|
|
v-if="me.readOnly"
|
|
>
|
|
Neuen Lizenzcode eingeben
|
|
</router-link>
|
|
<a
|
|
target="_blank"
|
|
href="https://myskillbox.ch/lesemodus"
|
|
class="button button--secondary"
|
|
>Mehr Informationen zum Lesemodus</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import gql from 'graphql-tag';
|
|
import {LICENSE_ACTIVATION} from '@/router/auth.names';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
me: {
|
|
readOnly: false,
|
|
selectedClass: {
|
|
readOnly: false,
|
|
},
|
|
},
|
|
licenseActivationLink: {
|
|
name: LICENSE_ACTIVATION,
|
|
},
|
|
};
|
|
},
|
|
|
|
apollo: {
|
|
me: {
|
|
query: gql`
|
|
query {
|
|
me {
|
|
readOnly
|
|
selectedClass {
|
|
readOnly
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
fetchPolicy: 'cache-only',
|
|
update({me}) {
|
|
if (!me) {
|
|
return {
|
|
readOnly: false,
|
|
selectedClass: {
|
|
readOnly: false,
|
|
},
|
|
};
|
|
}
|
|
return me;
|
|
},
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
readOnlyText() {
|
|
return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~styles/helpers';
|
|
|
|
.read-only-banner {
|
|
background-color: $color-brand-light;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: $small-spacing 0;
|
|
|
|
&__content {
|
|
max-width: $screen-width;
|
|
}
|
|
|
|
&__text {
|
|
padding: 0;
|
|
@include regular-text;
|
|
margin-bottom: $small-spacing;
|
|
}
|
|
|
|
&__buttons {
|
|
|
|
}
|
|
|
|
&__link {
|
|
@include default-link;
|
|
margin-right: $small-spacing;
|
|
}
|
|
}
|
|
</style>
|