151 lines
3.3 KiB
Vue
151 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="!$fetchState.pending" class="playbutton">
|
|
<template v-if="user && user.name">
|
|
<div class="playbutton__greeting">
|
|
{{ $t('hi') }}
|
|
{{ user.name }}!
|
|
</div>
|
|
<Button @click="$router.push('/play')">{{ $t('play-button') }}</Button>
|
|
<div class="playbutton__logout" @click="logout">
|
|
{{ $t('logout') }}
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<input
|
|
v-model="authCode"
|
|
class="playbutton__authinput"
|
|
type="text"
|
|
size="6"
|
|
maxlength="6"
|
|
:placeholder="$t('auth-code')"
|
|
/>
|
|
<Button :disabled="loginDisabled" @click="login">{{ $t('login-go') }}</Button>
|
|
<div class="playbutton__errormessage" v-if="errorMessage">
|
|
{{ errorMessage }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
beforeMount() {
|
|
this.$i18n.map({
|
|
'hi': { de: 'Hallo', en: 'Hi' },
|
|
'auth-code': { de: 'Code', en: 'code' },
|
|
'login-go': { de: 'Los', en: 'Go' },
|
|
'play-button': { de: 'Spielen!', en: 'Play!' },
|
|
'logout': { de: 'Ausloggen/Sitzung wechseln', en: 'logout/switch session' },
|
|
})
|
|
},
|
|
data() {
|
|
return {
|
|
authCode: '',
|
|
errorMessage: '',
|
|
}
|
|
},
|
|
async fetch() {
|
|
this.$engine.fetchUserInfo()
|
|
},
|
|
computed: {
|
|
loginDisabled() {
|
|
return this.authCode.length < 6
|
|
},
|
|
user() {
|
|
return this.$store.state.engine.user
|
|
},
|
|
},
|
|
methods: {
|
|
async login(e) {
|
|
try {
|
|
await this.$axios.$get(`/api/login?code=${this.authCode}`)
|
|
this.$fetch()
|
|
} catch(e) {
|
|
this.errorMessage = 'login failed'
|
|
}
|
|
this.authCode = ''
|
|
},
|
|
async logout() {
|
|
this.authCode = ''
|
|
try {
|
|
await this.$axios.$get('/api/logout')
|
|
window.location.reload()
|
|
} catch(e) {
|
|
this.errorMessage = 'logout failed'
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~/assets/css/components';
|
|
|
|
.playbutton {
|
|
font-family: $secondary-font;
|
|
font-weight: 800;
|
|
font-size: 36px;
|
|
text-align: center;
|
|
|
|
&__greeting {
|
|
color: $button-text-color;
|
|
font-size: 18px;
|
|
margin: 0 0 1em 0;
|
|
}
|
|
|
|
&__playbutton {
|
|
width: 200px;
|
|
height: 48px;
|
|
padding: 4px 36px;
|
|
border: 4px solid $button-border-color;
|
|
border-radius: 8px;
|
|
background-color: $button-background-color;
|
|
color: $button-text-color;
|
|
|
|
&:hover {
|
|
background-color: $button-hover-background-color;
|
|
border-color: $button-hover-border-color;
|
|
color: $button-hover-text-color;
|
|
}
|
|
}
|
|
|
|
&__logout {
|
|
margin-top: 64px;
|
|
font-size: 24px;
|
|
color: $button-secondary-text-color;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $button-secondary-hover-text-color;
|
|
}
|
|
}
|
|
|
|
&__authinput {
|
|
display: inline;
|
|
height: 36px;
|
|
border: 1px solid $input-inactive-border-color;
|
|
border-radius: 8px;
|
|
font-family: $secondary-font;
|
|
font-weight: 800;
|
|
font-size: 24px;
|
|
background-color: $input-inactive-background-color;
|
|
color: $input-inactive-text-color;
|
|
outline: none;
|
|
|
|
&:focus {
|
|
border: 1px solid $input-border-color;
|
|
background-color: $input-background-color;
|
|
color: $input-text-color;
|
|
}
|
|
}
|
|
|
|
&__errormessage {
|
|
padding: 8px;
|
|
font-size: 18px;
|
|
color: $error-text-color;
|
|
}
|
|
}
|
|
</style>
|