made a new login screen, fix small router error, content can now be shown or hidden based on login

src/App.vue

@@ -1,14 +1,17 @@
 <template>
   <div id="app">
 
+    <div id="auth_login" v-if="isAuth == false">
+      <router-view></router-view>
+    </div>
 
-    <div id="content" :class="{ collapsed: isCollapsed }">
+    <div id="content" :class="{ collapsed: isCollapsed }" v-if="isAuth">
       <Header></Header>
       <div>
         <router-view></router-view>
       </div>
     </div>
-    <div id="side-menu">
+    <div id="side-menu" v-if="isAuth">
         <Menu @e-iscollapsed='setCollapsed'></Menu>
     </div>
   </div>
@@ -18,6 +21,8 @@
 
 import Menu from './components/layout/Menu';
 import Header from './components/layout/Header';
+import store from './store'
+
 
 
 export default {
@@ -25,6 +30,7 @@ export default {
   data(){
     return {
       isCollapsed: false,
+      store
     }
   },
   components:{
@@ -42,6 +48,10 @@ export default {
       type: String,
       default: '250px'
     }
+  }, computed: {
+    isAuth () {
+      return this.$store.state.authenticated
+    }
   }
   }
 </script>

src/components/Login.vue

@@ -1,43 +1,37 @@
 <template>
-  <div>
+<!--   <div>
     <h1>Login Page</h1>
     <input type="text" name="username" v-model="input.username" placeholder="Username">
     <input type="password" name="password" v-model="input.password" placeholder="Password">
     <button type="button" v-on:click="login()">Login</button>
-  </div>
+  </div> -->
 
-<!-- <section class="hero is-primary is-fullheight">
+<section class="hero is-dark is-fullheight">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-centered">
-        <div class="column is-5-tablet is-4-desktop is-3-widescreen">
+        <div class="column is-5-tablet is-4-desktop is-4-widescreen">
           <form action="" class="box">
             <div class="field">
-              <label for="" class="label">Email</label>
+              <label for="" class="label">Username</label>
               <div class="control has-icons-left">
-                <input type="email" placeholder="e.g. bobsmith@gmail.com" class="input" required>
+                <input type="text" placeholder="admin" class="input is-dark" v-model="input.username" required>
                 <span class="icon is-small is-left">
-                  <i class="fa fa-envelope"></i>
+                  <i class="fa fa-user"></i>
                 </span>
               </div>
             </div>
             <div class="field">
               <label for="" class="label">Password</label>
               <div class="control has-icons-left">
-                <input type="password" placeholder="*******" class="input" required>
+                <input type="password" placeholder="1234" class="input is-dark" v-model="input.password" required>
                 <span class="icon is-small is-left">
                   <i class="fa fa-lock"></i>
                 </span>
               </div>
             </div>
             <div class="field">
-              <label for="" class="checkbox">
-                <input type="checkbox">
-               Remember me
-              </label>
-            </div>
-            <div class="field">
-              <button class="button is-success">
+              <button type="button" class="button is-success" v-on:click="login()">
                 Login
               </button>
             </div>
@@ -46,7 +40,7 @@
       </div>
     </div>
   </div>
-</section> -->
+</section>
 
 </template>
 

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Login from '../components/Login.vue'
 import Home from '../components/Home.vue'
-import store from '../store/index.js'
+import Store from '../store/index.js'
 Vue.use(VueRouter)
 
   const router = new VueRouter({
@@ -11,7 +11,7 @@ Vue.use(VueRouter)
     routes: [
   {
     path: '/',
-    name: "home",
+    name: "/",
     component: Home,
     meta: {requiresAuth: true}
   },
@@ -30,7 +30,7 @@ Vue.use(VueRouter)
 ]});
 
 router.beforeEach( (to,from,next) => {
-  let routerAuthCheck = store.state.authenticated;
+  let routerAuthCheck = Store.state.authenticated;
 
   if (to.matched.some(record => record.meta.requiresAuth)) {
     if(routerAuthCheck){