feature: header, login page

src/assets/scss/main.scss

@@ -1,7 +1,11 @@
 @import "~bulma/sass/utilities/_all";
 
 $navbar-item-hover-color: orange;
-$navbar-height: 4rem;
+$navbar-height: 4.5rem;
+$navbar-item-img-max-height: 4rem;
+$input-focus-border-color: orange;
+$button-focus-border-color: orange;
+$button-hover-border-color: orange;
 
 @import "~bulma";
 @import "~buefy/src/scss/buefy";

src/components/HeaderComponent.vue

@@ -6,18 +6,59 @@
       </b-navbar-item>
     </template>
     <template #start>
-      <b-navbar-item class="is-link" tag="router-link" :to="{ name: 'home' }">
+      <b-navbar-item
+        class="is-link"
+        exact-active-class="home-active"
+        tag="router-link"
+        :to="{ name: 'home' }"
+        onclick="this.blur()"
+      >
         Home
       </b-navbar-item>
-      <b-navbar-item href="#"> Docs</b-navbar-item>
+      <b-navbar-item
-      <b-navbar-item href="#"> Source</b-navbar-item>
+        href="https://github.com/ZorgCC/psina-avatar-server/wiki"
+        rel="noopener noreferrer"
+        target="_blank"
+        onclick="this.blur()"
+      >
+        Docs
+      </b-navbar-item>
+      <b-navbar-item
+        href="https://github.com/ZorgCC/psina-avatar-server"
+        rel="noopener noreferrer"
+        target="_blank"
+        onclick="this.blur()"
+      >
+        Source</b-navbar-item
+      >
     </template>
 
     <template #end>
       <b-navbar-item tag="div">
         <div class="buttons">
           <router-link
+            class="button is-light has-background-white is-rounded"
+            :to="{ name: 'settings' }"
+          >
+            <!-- TODO create route setting -->
+            <b-icon
+              :class="{ 'home-active': isAuth }"
+              class="settings-hover"
+              icon="cog"
+            ></b-icon>
+          </router-link>
+          <b-button
+            v-if="isAuth"
             class="button is-light is-rounded"
+            active-class="login-active"
+            @click="isAuth = false"
+          >
+            Log out
+          </b-button>
+          <router-link
+            v-else
+            class="button is-light is-rounded"
+            active-class="login-active"
             :to="{ name: 'login' }"
           >
             Log in
@@ -30,6 +71,21 @@
 <script>
 export default {
   name: 'HeaderComponent',
+  data() {
+    return {
+      isAuth: false,
+    }
+  },
 }
 </script>
-<style lang="scss"></style>
+<style lang="scss" scoped>
+.home-active {
+  color: orange;
+}
+.login-active {
+  border-color: orange !important;
+}
+.settings-hover:hover {
+  color: orange;
+}
+</style>

src/views/LoginView.vue

@@ -1,13 +1,70 @@
 <template>
-  <div class="container">
+  <div class="columns is-centered">
-    <h1>LOGIN</h1>
+    <div class="column is-two-fifths">
+      <div class="hero is-fullheight-with-navbar">
+        <div class="hero-body">
+          <form
+            class="content"
+            style="width: 100%; transform: translateY(-50%)"
+          >
+            <p v-if="!isValid" class="has-text-danger has-text-centered">
+              Incorrect username or password! Please try again!
+            </p>
+            <b-field
+              label-position="on-border"
+              :type="{ 'is-danger': !isValid }"
+            >
+              <template #label>
+                <span class="has-text-grey">Username</span>
+              </template>
+              <b-input
+                rounded
+                icon="account"
+                value="johnsilver"
+                @focus="isValid = true"
+              ></b-input>
+            </b-field>
+            <b-field
+              label-position="on-border"
+              :type="{ 'is-danger': !isValid }"
+            >
+              <template #label>
+                <span class="has-text-grey">Password</span>
+              </template>
+              <b-input
+                rounded
+                icon="lock"
+                value="123"
+                type="password"
+                @focus="isValid = true"
+              ></b-input>
+            </b-field>
+            <div class="buttons is-right">
+              <b-button
+                class="m-0"
+                rounded
+                onclick="this.blur()"
+                @click.prevent="isValid = !isValid"
+              >
+                Log in
+              </b-button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'LoginView',
+  data() {
+    return {
+      isValid: true,
+    }
+  },
 }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss"></style>