✨ (login) save login

src/views/Home.vue

@@ -3,11 +3,8 @@
     <welcome-world />
   </div>
   <div v-else-if="notFound">
-    <hr />
-    <div class="columns is-centered">
-      <div class="column is-one-third notification is-warning" v-if="notFound">
-        Not found.
-      </div>
+    <div class="notification is-warning">
+      Not found.
     </div>
   </div>
   <div class="home content note-container" v-else>

src/views/Login.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="login">
+    <button class="button is-primary" @click="back">
+      <img src="@/assets/icons/left-arrow.svg" alt="back" />
+    </button>
+    <div class="columns is-centered">
+      <div class="column is-one-third">
+        <form @submit.prevent>
+          <div class="field">
+            <label class="label">Username</label>
+            <div class="control">
+              <input class="input" type="text" v-model="user" />
+            </div>
+          </div>
+          <div class="field">
+            <label class="label">Token</label>
+            <div class="control">
+              <input
+                class="input"
+                type="text"
+                placeholder="Personal Access Token"
+                v-model="token"
+              />
+            </div>
+          </div>
+          <button
+            class="button is-primary"
+            type="submit"
+            @click="saveCredentials(user, token)"
+          >
+            register token
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'Login',
+  setup() {
+    const { go } = useRouter()
+    const user = ref('')
+    const token = ref('')
+
+    return { ...useGitHubLogin(), user, token, back: () => go(-1) }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.login {
+  flex: 1;
+}
+</style>

src/views/RepoList.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="repo-list">
+    <h1>Repositories</h1>
+    <span v-if="!isReady">loading...</span>
+    <ul>
+      <li v-for="repo in repos" :key="repo">
+        <router-link
+          :to="{ name: 'Home', params: { user: username, repo: repo } }"
+        >
+          {{ repo }}
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRepos } from '@/hooks/useRepos.hook'
+import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+
+export default defineComponent({
+  name: 'RepoList',
+  setup() {
+    const { username } = useGitHubLogin()
+
+    return {
+      ...useRepos(),
+      username
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.repo-list {
+  flex: 1;
+  text-align: center;
+}
+</style>