add app

pages/index.vue

@@ -1,53 +1,62 @@
 <template>
-  <section class="section">
-    <div class="columns is-mobile">
-      <card
-        title="Free"
-        icon="github"
-      >
-        Open source on <a href="https://github.com/buefy/buefy">
-          GitHub
-        </a>
-      </card>
+  <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>
 
-      <card
-        title="Responsive"
-        icon="cellphone-link"
-      >
-        <b class="has-text-grey">
-          Every
-        </b> component is responsive
-      </card>
+        <b-field>
+          <b-input v-model="apiKey" placeholder="WaniKani API key"></b-input>
+        </b-field>
 
-      <card
-        title="Modern"
-        icon="alert-decagram"
-      >
-        Built with <a href="https://vuejs.org/">
-          Vue.js
-        </a> and <a href="http://bulma.io/">
-          Bulma
-        </a>
-      </card>
-
-      <card
-        title="Lightweight"
-        icon="arrange-bring-to-front"
-      >
-        No other internal dependency
-      </card>
-    </div>
-  </section>
+        <b-button class="is-primary is-fullwidth" @click="login">
+          Login
+        </b-button>
+      </div>
+    </form>
+  </main>
 </template>
 
-<script>
-import Card from '~/components/Card'
+<script lang="ts">
+import { Vue, Component } from 'nuxt-property-decorator'
+import { api } from '~/assets/api'
 
-export default {
-  name: 'HomePage',
+@Component<HomePage>({
+  async mounted() {
+    if (await api.isAuthorized()) {
+      this.$router.replace('/app')
+    } else {
+      this.isReady = true
+    }
+  },
+})
+export default class HomePage extends Vue {
+  apiKey = ''
 
-  components: {
-    Card
+  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>