63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<main class="HomePage">
|
|
<b-loading v-if="!isReady" active is-full-page></b-loading>
|
|
<form v-else class="card login-card" @submit.prevent="login">
|
|
<div class="card-content">
|
|
<h2 class="title is-4">Login with WaniKani API key</h2>
|
|
|
|
<b-field>
|
|
<b-input v-model="apiKey" placeholder="WaniKani API key"></b-input>
|
|
</b-field>
|
|
|
|
<b-button class="is-primary is-fullwidth" @click="login">
|
|
Login
|
|
</b-button>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component } from 'nuxt-property-decorator'
|
|
import { api } from '~/assets/api'
|
|
|
|
@Component<HomePage>({
|
|
async mounted() {
|
|
if (await api.isAuthorized()) {
|
|
this.$router.replace('/app')
|
|
} else {
|
|
this.isReady = true
|
|
}
|
|
},
|
|
})
|
|
export default class HomePage extends Vue {
|
|
apiKey = ''
|
|
|
|
isReady = false
|
|
|
|
async login() {
|
|
if (await api.setWanikaniApiKey(this.apiKey)) {
|
|
this.$router.push('/app')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.HomePage {
|
|
background-color: rgba(211, 211, 211, 0.3);
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.login-card {
|
|
position: absolute;
|
|
max-width: 500px;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
overflow: visible;
|
|
}
|
|
</style>
|