Merge pull request #2 from ZorgCC/develop

header and login page

package.json

@@ -25,6 +25,8 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "prettier": "^2.4.1",
+    "sass": "^1.49.8",
+    "sass-loader": "^12.6.0",
     "vue-template-compiler": "^2.6.14"
   }
 }

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>dog.png">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
     <title><%= htmlWebpackPlugin.options.title %></title>

src/App.vue

@@ -1 +1 @@
-<template>
  <div id="app">
    <div class="container">
      <b-navbar>
        <template #start>
          <b-navbar-item href="#"> Home </b-navbar-item>
          <b-navbar-dropdown label="Info">
            <b-navbar-item href="#"> About </b-navbar-item>
            <b-navbar-item href="#"> Contact </b-navbar-item>
          </b-navbar-dropdown>
        </template>

        <template #end>
          <b-navbar-item tag="div">
            <div class="buttons">
              <a class="button is-light">
                <strong>Sign up</strong>
              </a>
              <a class="button is-light"> Log in </a>
            </div>
          </b-navbar-item>
        </template>
      </b-navbar>
      <div class="notification is-primary">
        This container is <strong>centered</strong> on desktop and larger
        viewports.
      </div>
      <div class="card">
        <div class="card-content">
          <div class="content">
            Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros.
            Donec id elit non mi porta gravida at eget metus. Cum sociis
            natoquаe penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, sequi.
          </div>
          <footer class="card-footer">
            <a href="#" class="card-footer-item">Save</a>
            <a href="#" class="card-footer-item">Edit</a>
            <a href="#" class="card-footer-item">Delete</a>
          </footer>
        </div>
      </div>
      <b-table :data="data" :columns="columns"></b-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          first_name: 'Jesse',
          last_name: 'Simmons',
          date: '2016-10-15 13:43:27',
          gender: 'Male',
        },
        {
          id: 2,
          first_name: 'John',
          last_name: 'Jacobs',
          date: '2016-12-15 06:00:53',
          gender: 'Male',
        },
        {
          id: 3,
          first_name: 'Tina',
          last_name: 'Gilbert',
          date: '2016-04-26 06:26:28',
          gender: 'Female',
        },
        {
          id: 4,
          first_name: 'Clarence',
          last_name: 'Flores',
          date: '2016-04-10 10:28:46',
          gender: 'Male',
        },
        {
          id: 5,
          first_name: 'Anne',
          last_name: 'Lee',
          date: '2016-12-06 14:38:38',
          gender: 'Female',
        },
      ],
      columns: [
        {
          field: 'id',
          label: 'ID',
          width: '40',
          numeric: true,
        },
        {
          field: 'first_name',
          label: 'First Name',
        },
        {
          field: 'last_name',
          label: 'Last Name',
        },
        {
          field: 'date',
          label: 'Date',
          centered: true,
        },
        {
          field: 'gender',
          label: 'Gender',
        },
      ],
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
+<template>
  <div id="app">
    <div class="container">
      <HeaderComponent />
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent'

export default {
  components: { HeaderComponent },
  data() {
    return {}
  },
}
</script>

src/assets/scss/main.scss

@@ -0,0 +1,11 @@
+@import "~bulma/sass/utilities/_all";
+
+$navbar-item-hover-color: orange;
+$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

@@ -0,0 +1,91 @@
+<template>
+  <b-navbar transparent shadow active>
+    <template #brand>
+      <b-navbar-item tag="router-link" :to="{ name: 'home' }" class="p-0">
+        <img src="../assets/dog.png" alt="psina" />
+      </b-navbar-item>
+    </template>
+    <template #start>
+      <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="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
+          </router-link>
+        </div>
+      </b-navbar-item>
+    </template>
+  </b-navbar>
+</template>
+<script>
+export default {
+  name: 'HeaderComponent',
+  data() {
+    return {
+      isAuth: false,
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.home-active {
+  color: orange;
+}
+.login-active {
+  border-color: orange !important;
+}
+.settings-hover:hover {
+  color: orange;
+}
+</style>

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import Buefy from 'buefy'
-import 'buefy/dist/buefy.css'
+import './assets/scss/main.scss'
 
 Vue.config.productionTip = false
 Vue.use(Buefy)

src/router/index.js

@@ -4,24 +4,25 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
-  // {
+  {
-  //   path: '/',
+    path: '/',
-  //   name: 'home',
+    name: 'home',
-  //   component: HomeView,
+    component: () => import('../views/HomeView'),
-  // },
+  },
-  // {
+  {
-  //   path: '/about',
+    path: '/login',
-  //   name: 'about',
+    name: 'login',
-  //   // route level code-splitting
+    component: () => import('../views/LoginView.vue'),
-  //   // this generates a separate chunk (about.[hash].js) for this route
+  },
-  //   // which is lazy-loaded when the route is visited.
-  //   component: () =>
-  //     import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
-  // },
 ]
 
 const router = new VueRouter({
   routes,
 })
 
+// router.beforeEach((to, from, next) => {
+//   if (to.name !== 'login') next({ name: 'login' })
+//   else next()
+// })
+
 export default router

src/views/HomeView.vue

@@ -0,0 +1,11 @@
+<template>
+  <h2>home</h2>
+</template>
+
+<script>
+export default {
+  name: 'HomeView',
+}
+</script>
+
+<style scoped></style>

src/views/LoginView.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="columns is-centered">
+    <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 lang="scss"></style>

webpack.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+}

yarn.lock

@@ -2096,7 +2096,7 @@ charcodes@^0.2.0:
   resolved "https://registry.npmmirror.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
   integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
 
-chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3538,6 +3538,11 @@ ignore@^5.2.0:
   resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+immutable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
+  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3854,7 +3859,7 @@ kind-of@^6.0.2:
   resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-klona@^2.0.5:
+klona@^2.0.4, klona@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmmirror.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
@@ -5133,6 +5138,23 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0,
   resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-loader@^12.6.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
+  integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
+sass@^1.49.8:
+  version "1.49.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828"
+  integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
@@ -5327,7 +5349,7 @@ sockjs@^0.3.21:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==