settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

refactoring, logout

Browse Source
This commit is contained in:
Settel 2021-08-04 23:35:41 +02:00
parent b9886c3775
commit 914e412a51
3 changed files with 154 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
client/src/components/PlayButton.vue Normal file
View File

@ -0,0 +1,149 @@
<template>
<div>
<div v-if="!$fetchState.pending" class="playbutton">
<template v-if="user && user.name">
<NuxtLink class="playbutton__playbutton" to="/play">
Play!
</NuxtLink>
<div class="playbutton__logout" @click="logout">
Logout
</div>
</template>
<form v-else v-on:submit="login">
<input
v-model="authCode"
class="playbutton__authinput"
type="text"
size="6"
maxlength="6"
placeholder="code"
/>
<input
type="submit"
value="Go"
:class="[ 'playbutton__authbutton', { disabled: loginDisabled }]"
/>
<div class="playbutton__errormessage" v-if="errorMessage">
{{ errorMessage }}
</div>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {},
authCode: '',
errorMessage: '',
}
},
async fetch() {
try {
this.user = await this.$axios.$get('/api/userinfo')
} catch(e) {
// nop
}
},
computed: {
loginDisabled() {
return this.authCode.length < 6
},
},
methods: {
async login(e) {
e.preventDefault()
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">
.playbutton {
font-family: Dosis;
font-weight: 800;
font-size: 36px;
text-align: center;
&__playbutton {
width: 200px;
height: 48px;
padding: 16px 24px;
border: 4px solid #c0c060;
border-radius: 8px;
background-color: #40a020;
color: #ffff80;
&:hover {
border-color: #ffffc0;
background-color: #60c040;
color: #ffffc0;
}
}
&__logout {
margin-top: 36px;
font-size: 24px;
cursor: pointer;
&:hover {
color: #c0c080;
}
}
&__authinput {
display: inline;
height: 36px;
border: 4px solid #c0c060;
border-radius: 8px;
font-family: Dosis;
font-weight: 800;
font-size: 24px;
}
&__authbutton {
display: inline;
width: 80px;
height: 48px;
border: 4px solid #c0c060;
border-radius: 8px;
background-color: #40a020;
color: #ffff80;
font-size: 24px;
&.disabled,
&:hover.disabled {
border-color: #808030;
background-color: #406020;
color: #808060;
}
&:hover {
background-color: #60c040;
color: #ffffc0;
}
}
&__errormessage {
padding: 8px;
color: #ff8080;
}
}
</style>

4
client/src/layouts/default.vue
View File

@ -38,4 +38,8 @@ html, body {
body {
background-color: #402080;
}
a {
text-decoration: none;
}
</style>

126
client/src/pages/index.vue
View File

@ -2,32 +2,7 @@
<div class="startpage">
<TitleBox />
<div class="startpage__buttonline">
<template v-if="!$fetchState.pending">
<template v-if="user && user.name">
<NuxtLink class="startpage__playbutton" to="/play">
Play!
</NuxtLink>
</template>
<form v-else v-on:submit="login">
<input
v-model="authCode"
class="startpage__authinput"
type="text"
value=""
size="6"
maxlength="6"
placeholder="code"
/>
<input
type="submit"
value="Go"
:class="[ 'startpage__authbutton', { disabled: loginDisabled }]"
/>
<div class="startpage__errormessage" v-if="errorMessage">
{{ errorMessage }}
</div>
</form>
</template>
<PlayButton />
</div>
<div class="startpage__copyright">
© 2021, Settel
@ -35,111 +10,12 @@
</div>
</template>
<script>
export default {
data() {
return {
user: {},
authCode: '',
errorMessage: '',
}
},
async fetch() {
try {
this.user = await this.$axios.$get('/api/userinfo')
} catch(e) {
// nop
}
},
computed: {
loginDisabled() {
return this.authCode.length < 6
},
},
methods: {
async login(e) {
e.preventDefault()
try {
await this.$axios.$get(`/api/login?code=${this.authCode}`)
this.$fetch()
} catch(e) {
this.authCode = ''
this.errorMessage = 'login failed'
}
},
},
}
</script>
<style lang="scss">
.startpage {
&__buttonline {
display: flex;
justify-content: center;
}
&__playbutton {
width: 200px;
height: 48px;
padding: 16px 24px;
border: 4px solid #c0c060;
border-radius: 8px;
background-color: #40a020;
color: #ffff80;
font-family: Dosis;
font-weight: 800;
font-size: 36px;
text-align: center;
text-decoration: none;
&:hover {
border-color: #ffffc0;
background-color: #60c040;
color: #ffffc0;
}
}
&__authinput {
display: inline;
height: 36px;
border: 4px solid #c0c060;
border-radius: 8px;
font-family: Dosis;
font-weight: 800;
font-size: 24px;
}
&__authbutton {
display: inline;
width: 80px;
height: 48px;
border: 4px solid #c0c060;
border-radius: 8px;
background-color: #40a020;
color: #ffff80;
font-family: Dosis;
font-weight: 800;
font-size: 24px;
text-align: center;
text-decoration: none;
&.disabled,
&:hover.disabled {
border-color: #808030;
background-color: #406020;
color: #808060;
}
&:hover {
background-color: #60c040;
color: #ffffc0;
}
}
&__errormessage {
padding: 8px;
font-family: Dosis;
font-weight: 800;
color: #ff8080;
}
&__copyright {
position: absolute;
right: 1em;