From fde511817997ab91e1e0939234e7214657229dc1 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sun, 4 Apr 2021 09:57:54 +0200
Subject: [PATCH] :lipstick: (login) better login experience.

---
 src/views/Login.vue | 104 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 78 insertions(+), 26 deletions(-)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index 4b0318f..9ebf71e 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,38 +1,66 @@
 <template>
-  <div class="login">
-    <button class="button is-primary" @click="back">
-      <img src="@/assets/icons/left-arrow.svg" alt="back" />
+  <div class="login content">
+    <button class="button is-white go-back" @click="back">
+      <img src="@/assets/icons/dark-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 class="field is-horizontal">
+            <div class="field-label">
+              <label class="label">Username</label>
+            </div>
+            <div class="field-body">
+              <div class="control">
+                <input
+                  class="input"
+                  type="text"
+                  placeholder="GitHub username"
+                  v-model="user"
+                />
+              </div>
             </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 class="field is-horizontal">
+            <div class="field-label">
+              <label class="label">Token</label>
+            </div>
+            <div class="field-body">
+              <div class="control">
+                <input
+                  class="input"
+                  type="password"
+                  placeholder="Personal Access Token"
+                  v-model="token"
+                />
+              </div>
             </div>
           </div>
-          <button
-            class="button is-primary"
-            type="submit"
-            @click="saveCredentials(user, token)"
-          >
-            register token
-          </button>
+          <div class="action-container">
+            <button
+              class="button is-primary"
+              type="submit"
+              @click="saveCredentials(user, token)"
+            >
+              register token
+            </button>
+          </div>
         </form>
       </div>
     </div>
+    <div class="columns is-centered">
+      <div class="column is-one-third">
+        <p>
+          Want to know how to login with a personal access token? Take a look at
+          <a
+            href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token"
+            target="_blank"
+            rel="noopener noreferrer"
+            >GitHub documentation</a
+          >.
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -45,10 +73,11 @@ export default defineComponent({
   name: 'Login',
   setup() {
     const { go } = useRouter()
-    const user = ref('')
-    const token = ref('')
+    const { username, accessToken, ...form } = useGitHubLogin()
+    const user = ref(username.value ?? '')
+    const token = ref(accessToken.value ?? '')
 
-    return { ...useGitHubLogin(), user, token, back: () => go(-1) }
+    return { ...form, user, token, back: () => go(-1) }
   }
 })
 </script>
@@ -56,5 +85,28 @@ export default defineComponent({
 <style lang="scss" scoped>
 .login {
   flex: 1;
+
+  .go-back {
+    margin: 10px 0;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+
+    .field-label {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    .field-body {
+      flex: 1;
+    }
+
+    .action-container {
+      margin: auto;
+    }
+  }
 }
 </style>