diff --git a/src/App-main.vue b/src/App-main.vue
index e9e8e9a..b55d260 100644
--- a/src/App-main.vue
+++ b/src/App-main.vue
@@ -4,8 +4,24 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { LoginModule } from "./store/modules/login";
+import { generalInfo } from "./store/modules/generalApp";
+import { DrawingModule } from "./store/modules/userDrawing";
 @Component
-export default class AppMain extends Vue {}
+export default class AppMain extends Vue {
+  // declare module
+  public get isLogged() {
+    return LoginModule.isLogged;
+  }
+
+  public get listNodes() {
+    return DrawingModule.listNodes;
+  }
+
+  public get isCollapseMenu() {
+    return generalInfo.isCollapse;
+  }
+}
 </script>
 
 <style scoped></style>
diff --git a/src/assets/style/general/_general.scss b/src/assets/style/general/_general.scss
index fa97b4b..33e7a32 100644
--- a/src/assets/style/general/_general.scss
+++ b/src/assets/style/general/_general.scss
@@ -78,105 +78,105 @@
   width: 100%;
   height: calc(100vh - 48px);
   position: relative;
-}
 
-.pPopupDetail {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 0;
-  max-width: 240px;
-  @include size(100%, 100%);
-  background-color: var(--color-light-2);
-  border-left: 1px solid hsla(240, 1%, 85%, 0.5);
-  box-shadow: 12px 0 24px rgba(0, 0, 0, 0.1);
-  z-index: 10;
-
-  &-title {
-    margin: 4px 0 0;
-  }
+  .pPopupDetail {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 0;
+    max-width: 240px;
+    @include size(100%, 100%);
+    background-color: var(--color-light-2);
+    border-left: 1px solid hsla(240, 1%, 85%, 0.5);
+    box-shadow: 12px 0 24px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+
+    &-title {
+      margin: 4px 0 0;
+    }
 
-  &-header {
-    position: relative;
-  }
+    &-header {
+      position: relative;
+    }
 
-  &-iClose {
-    color: var(--color-dark);
-    background: var(--color-light);
-    @include size(24px, 24px);
-    border-radius: 8px;
-    transition: all 0.15s ease-out;
+    &-iClose {
+      color: var(--color-dark);
+      background: var(--color-light);
+      @include size(24px, 24px);
+      border-radius: 8px;
+      transition: all 0.15s ease-out;
 
-    &:hover {
-      color: var(--color-red);
-      background: white;
+      &:hover {
+        color: var(--color-red);
+        background: white;
+      }
     }
-  }
 
-  .form {
-    height: calc(100% - 98px);
-    border-bottom: 1px solid var(--color-light);
-    padding: 0 8px 8px;
+    .form {
+      height: calc(100% - 98px);
+      border-bottom: 1px solid var(--color-light);
+      padding: 0 8px 8px;
 
-    .el-form-item {
-      margin-bottom: 0;
+      .el-form-item {
+        margin-bottom: 0;
+      }
     }
-  }
 
-  .header {
-    margin: 12px 8px;
-    color: var(--color-dark);
-    @extend .flex-row__between;
-  }
+    .header {
+      margin: 12px 8px;
+      color: var(--color-dark);
+      @extend .flex-row__between;
+    }
 
-  .el-form-item__content {
-    line-height: initial;
-    border-bottom: 1px solid var(--color-light);
-    padding: 4px 0 12px;
+    .el-form-item__content {
+      line-height: initial;
+      border-bottom: 1px solid var(--color-light);
+      padding: 4px 0 12px;
 
-    .label {
-      width: 100%;
-      font-size: 13px;
-      margin-bottom: 4px;
-      display: block;
-    }
+      .label {
+        width: 100%;
+        font-size: 13px;
+        margin-bottom: 4px;
+        display: block;
+      }
 
-    .el-input__inner {
-      border-radius: 4px;
-      height: 32px;
-      line-height: 32px;
-      padding: 0 8px;
+      .el-input__inner {
+        border-radius: 4px;
+        height: 32px;
+        line-height: 32px;
+        padding: 0 8px;
 
-      &:focus {
-        background: white !important;
-        border-color: transparent !important;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
+        &:focus {
+          background: white !important;
+          border-color: transparent !important;
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
+        }
       }
     }
-  }
 
-  .actions {
-    padding: 8px;
-    background-color: white;
-    @extend .flex-row__between;
-
-    button {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-      border: none;
-      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
-    }
+    .actions {
+      padding: 8px;
+      background-color: white;
+      @extend .flex-row__between;
+
+      button {
+        height: 32px;
+        display: flex;
+        align-items: center;
+        padding: 0 20px;
+        border: none;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+      }
 
-    .btnSave {
-      background: var(--color-blue);
-    }
+      .btnSave {
+        background: var(--color-blue);
+      }
 
-    .btnDelete {
-      background: rgba(229, 77, 66, 0.2);
-      color: var(--color-red);
-      box-shadow: none;
+      .btnDelete {
+        background: rgba(229, 77, 66, 0.2);
+        color: var(--color-red);
+        box-shadow: none;
+      }
     }
   }
 }
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
index 1d37500..6b5a766 100644
--- a/src/assets/style/index.scss
+++ b/src/assets/style/index.scss
@@ -1,7 +1,9 @@
 @import "./mixins/variable";
-@import "./mixins/_mixin";
+@import "./mixins/mixin";
 @import "./mixins/animation";
 
 @import "./general/base";
 @import "./general/layout";
 @import "./general/general";
+
+@import "./page/login";
diff --git a/src/assets/style/page/_login.scss b/src/assets/style/page/_login.scss
new file mode 100644
index 0000000..a51c8e3
--- /dev/null
+++ b/src/assets/style/page/_login.scss
@@ -0,0 +1,67 @@
+.pLogin {
+  height: 100vh;
+  width: 100%;
+  background: #20a8d8 !important;
+  font-family: "Nunito", sans-serif;
+
+  .pHeader {
+    font-size: 55px;
+    font-family: "Nunito", sans-serif;
+    font-weight: 700;
+  }
+
+  &-scroll {
+    width: 100%;
+    height: calc(100% - 20px);
+    padding: 50px 38px 125px 38px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .leftSection {
+    color: #ffffff;
+
+    .logo-lv1 {
+      width: 200px;
+    }
+
+    .tt-2 {
+      font-size: 20px;
+      opacity: 0.8;
+      width: 80%;
+    }
+  }
+
+  .rightSection {
+    max-width: 500px;
+    width: 40%;
+    height: 100%;
+    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
+      0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
+    background-color: #fff;
+    min-width: 350px;
+    position: relative;
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+    border-radius: 8px 0 0px 8px;
+
+    .logo-lv2 {
+      width: 150px;
+      margin-top: -25px;
+    }
+
+    .title {
+      font-size: 18px;
+      text-align: center;
+      margin: 20px 0 10px 0;
+      margin-top: -15px;
+    }
+
+    .btnSubmit {
+      width: 100%;
+      background-color: #039be5;
+    }
+  }
+}
diff --git a/src/config/auth.ts b/src/config/auth.ts
index 8c45097..2bc2f3c 100644
--- a/src/config/auth.ts
+++ b/src/config/auth.ts
@@ -1,19 +1,19 @@
 export default {
   saveToken(token: string) {
-    return localStorage.setItem("bus_token", token);
+    return localStorage.setItem("aquaDraw_token", token);
   },
 
   removeToken() {
-    return localStorage.removeItem("bus_token");
+    return localStorage.removeItem("aquaDraw_token");
   },
 
   checkIsAuthenticated: function() {
-    let tokenDataStr = localStorage.getItem("bus_token");
+    let tokenDataStr = localStorage.getItem("aquaDraw_token");
     return Promise.resolve(tokenDataStr);
   },
 
   getToken() {
-    let tokenStr = localStorage.getItem("bus_token");
+    let tokenStr = localStorage.getItem("aquaDraw_token");
     return tokenStr || null;
   },
 
diff --git a/src/config/axios.ts b/src/config/axios.ts
index 5f87d92..f871bfe 100644
--- a/src/config/axios.ts
+++ b/src/config/axios.ts
@@ -19,7 +19,7 @@ axios.interceptors.request.use(
         : store.dispatch("LOGOUT");
     });
     // config progressbar start
-    temp === 0 && new Vue().$Progress.start();
+    temp === 0 && app.$Progress.start();
     temp++;
     // config data not auto convert to json data that convert to type object[key]=value
     config.paramsSerializer = (params: any) => {
@@ -39,13 +39,13 @@ axios.interceptors.response.use(
   (response: any) => {
     // config progressbar finish
     temp--;
-    temp === 0 && new Vue().$Progress.finish();
+    temp === 0 && app.$Progress.finish();
 
     return response.data;
   },
   (error: any) => {
     temp--;
-    temp === 0 && new Vue().$Progress.fail();
+    temp === 0 && app.$Progress.fail();
 
     if (error.response.status === 500) {
       new Vue().$messageError("Server errors! Try again!");
diff --git a/src/mixin/mixins.ts b/src/mixin/mixins.ts
index 8dd81e0..6d61f58 100644
--- a/src/mixin/mixins.ts
+++ b/src/mixin/mixins.ts
@@ -1,4 +1,5 @@
 import { Vue, Component } from "vue-property-decorator";
+import { objInstance } from "../store/types/index";
 import {
   checkNotSpecialCharacter,
   allowOnlyTypeNumber,
@@ -79,42 +80,43 @@ export default class Mixin extends Vue {
   }
 
   public $messageSuccess(message: string) {
-    this.$message.success(message);
+    this.$message({
+      message: message,
+      type: "success",
+      showClose: true
+    });
   }
 
   public $messageError(message: string) {
-    this.$message.error(message);
+    this.$message({
+      message: message,
+      type: "error",
+      showClose: true
+    });
   }
 
   private hasKey<O>(obj: O, key: string | number | symbol): key is keyof O {
     return key in obj;
   }
 
-  // public $notify(message: string, type: string, content: string) {
-  //   let config: any = {
-  //     message: message,
-  //     description: content,
-  //     duration: 3.5
-  //   };
-  //   if (this.hasKey(this.$notification, type)) {
-  //     this.$notification[type](config);
-  //   }
-  // }
+  public $notification(message: string, type: string, content: string) {
+    let config: any = {
+      title: message,
+      message: content,
+      type: type
+    };
+    this.$notify(config);
+  }
 
   public $confirmPopup(title: string, content: string, callback?: any) {
-    let config: any = {
-      title: title,
-      content: content,
-      okText: "Submit",
-      okType: "danger",
-      cancelText: "Cancel",
-      onOk() {
+    this.$confirm(content, title, {
+      confirmButtonText: "Xác nhận",
+      cancelButtonText: "Huỷ bỏ",
+      type: "warning"
+    })
+      .then(() => {
         callback();
-      },
-      onCancel() {
-        () => {};
-      }
-    };
-    this.$confirm(config);
+      })
+      .catch(() => {});
   }
 }
diff --git a/src/mixins.d.ts b/src/mixins.d.ts
index 466ee00..e7a1c69 100644
--- a/src/mixins.d.ts
+++ b/src/mixins.d.ts
@@ -7,11 +7,12 @@ declare module "vue/types/vue" {
     widthClient: number;
     heightClient: number;
     validationRules: object;
+
     getNumberRandom(min: number, max: number): number;
     getRandomColor(): void;
     $messageSuccess(message: string): void;
     $messageError(message: string): void;
-    // $notify(message: string, type: string, content: string): void;
+    $notification(message: string, type: string, content: string): void;
     $confirmPopup(title: string, content: string, callback?: any): void;
 
     $post(key: string, params?: any): any;
diff --git a/src/router/index.ts b/src/router/index.ts
index c33eed2..9b6dc94 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Router from "vue-router";
 import { concat } from "lodash";
+import auth from "@/config/auth";
 Vue.use(Router);
 
 const routerInstance: any = new Router({
@@ -13,8 +14,7 @@ const routerInstance: any = new Router({
         children: concat([
           {
             path: "home",
-            component: () =>
-              import(/* webpackChunkName: "home" */ "@/views/home/index.vue"),
+            component: () => import("../views/home/index.vue"),
             name: "home"
           },
           {
@@ -35,7 +35,7 @@ const routerInstance: any = new Router({
     ],
     [
       {
-        path: "/*",
+        path: "*",
         redirect: {
           name: "home"
         }
@@ -44,14 +44,14 @@ const routerInstance: any = new Router({
   )
 });
 
-// routerInstance.beforeEach((to: any, from: any, next: any) => {
-//   auth.checkIsAuthenticated().then((valid: any) => {
-//     if (valid) {
-//       to.name === "login" ? next({ name: "home" }) : next();
-//     } else {
-//       to.name !== "login" ? next({ name: "login" }) : next();
-//     }
-//   });
-// });
+routerInstance.beforeEach((to: any, from: any, next: any) => {
+  auth.checkIsAuthenticated().then((valid: any) => {
+    if (valid) {
+      to.name === "login" ? next({ name: "home" }) : next();
+    } else {
+      to.name !== "login" ? next({ name: "login" }) : next();
+    }
+  });
+});
 
 export default routerInstance;
diff --git a/src/store/modules/generalApp.ts b/src/store/modules/generalApp.ts
index 5ba172f..0ece47c 100644
--- a/src/store/modules/generalApp.ts
+++ b/src/store/modules/generalApp.ts
@@ -7,21 +7,16 @@ import {
 } from "vuex-module-decorators";
 import { Vue } from "vue-property-decorator";
 import store from "@/store";
-import auth from "@/config/auth";
-import router from "@/router";
-import { objInstance } from "../types";
 
 export interface IGeneralApp {
   flagLoading: number;
   isCollapse: boolean;
-  infoUser: object;
 }
 
 @Module({ dynamic: true, store, name: "generalInfo" })
 class General extends VuexModule implements IGeneralApp {
   public flagLoading: number = 0;
   public isCollapse: boolean = false;
-  public infoUser: object = {};
   public vm: Vue = new Vue();
 
   @Mutation
@@ -39,11 +34,6 @@ class General extends VuexModule implements IGeneralApp {
     this.isCollapse = !this.isCollapse;
   }
 
-  @Mutation
-  private setInfoUser(payload: objInstance) {
-    this.infoUser = payload;
-  }
-
   @Action
   public SET_START_LOADING() {
     this.context.commit("startLoading");
@@ -58,11 +48,6 @@ class General extends VuexModule implements IGeneralApp {
   public SET_COLLAPSE() {
     this.context.commit("setCollapse");
   }
-
-  @Action
-  public SET_INFO_USER(payload: objInstance) {
-    this.context.commit("setInfoUser", payload);
-  }
 }
 
 export const generalInfo = getModule(General);
diff --git a/src/store/modules/login.ts b/src/store/modules/login.ts
index 5b2322f..ac14f75 100644
--- a/src/store/modules/login.ts
+++ b/src/store/modules/login.ts
@@ -1,63 +1,88 @@
-import { VuexModule, Module, Mutation, Action, getModule } from "vuex-module-decorators";
-import {Vue} from 'vue-property-decorator';
-import store from '@/store';
-import { objInstance } from '../types/index';
-import auth from '@/config/auth';
-import router from '@/router';
-
+import {
+  VuexModule,
+  Module,
+  Mutation,
+  Action,
+  getModule
+} from "vuex-module-decorators";
+import { Vue } from "vue-property-decorator";
+import store from "@/store";
+import { objInstance } from "../types/index";
+import auth from "@/config/auth";
+import router from "@/router";
 
 export interface ILogin {
-  isLogged: boolean
+  isLogged: boolean;
+  infoUser: object;
 }
 
-
-@Module({dynamic: true, store, name: "login"});
+@Module({ dynamic: true, store, name: "login" })
 class Login extends VuexModule implements ILogin {
   public isLogged: boolean = false;
+  public infoUser: object = {};
+
   public vm = new Vue();
 
   @Mutation
-  setLogged(payload: boolean) {
+  private setLogged(payload: boolean) {
     this.isLogged = payload;
   }
 
   @Mutation
-  logout() {
+  private logout() {
     auth.removeToken();
-    router.push({name: "login"})
+    router.push({ name: "login" });
+  }
+
+  @Mutation
+  private setInfoUser(payload: objInstance) {
+    this.infoUser = payload;
   }
 
   @Action
-  SET_LOGGED(payload: boolean) {
-    this.context.commit("setLogged", payload)
+  public SET_LOGGED(payload: boolean) {
+    this.context.commit("setLogged", payload);
   }
 
-  @Action({rawError: true})
-  LOGIN(payload: objInstance) {
+  @Action({ rawError: true })
+  public LOGIN(payload: objInstance) {
     return this.vm.$post("Account/Login", JSON.stringify(payload));
   }
 
+  @Action({ rawError: true })
+  public CHANGE_PW(payload: objInstance) {
+    return this.vm.$post("Account/UserChangePassword", JSON.stringify(payload));
+  }
 
-  @Action({rawError: true})
-  CHANGE_PW(payload: objInstance) {
-    return this.vm.$post('Account/UserChangePassword', JSON.stringify(payload));
+  @Action({ rawError: true })
+  public CREATE_USER(payload: objInstance) {
+    return this.vm.$post("Account/CreateUser", JSON.stringify(payload));
   }
 
-  @Action({rawError: true})
-  CREATE_USER(payload: objInstance) {
-    return this.vm.$post('Account/CreateUser', JSON.stringify(payload));
+  @Action({ rawError: true })
+  public REMOVE_USER(payload: objInstance) {
+    return this.vm.$post("Account/RemoveUser", JSON.stringify(payload));
   }
 
-  @Action({rawError: true})
-  REMOVE_USER(payload: objInstance) {
-    return this.vm.$post('Account/RemoveUser', JSON.stringify(payload));
+  @Action({ rawError: true })
+  public VIEW_ALL_ACCOUNT_ADMIN(payload: objInstance) {
+    return this.vm.$post(
+      "Account/ViewAll",
+      JSON.stringify({
+        tokenkey: auth.getToken()
+      })
+    );
   }
 
   @Action
-  LOGOUT() {
+  public LOGOUT() {
     this.context.commit("logout");
   }
-}
 
+  @Action
+  public SET_INFO_USER(payload: objInstance) {
+    this.context.commit("setInfoUser", payload);
+  }
+}
 
 export const LoginModule = getModule(Login);
diff --git a/src/store/modules/userDrawing.ts b/src/store/modules/userDrawing.ts
index b39c173..40e8ecc 100644
--- a/src/store/modules/userDrawing.ts
+++ b/src/store/modules/userDrawing.ts
@@ -6,84 +6,99 @@ import {
   Mutation
 } from "vuex-module-decorators";
 import { Vue } from "vue-property-decorator";
-import store from '@/store';
-import { objInstance } from '../types';
+import store from "@/store";
+import { objInstance } from "../types";
 
 export interface IDrawing {
   listNodes: Array<objInstance>;
   listLines: Array<objInstance>;
+  isShowPopupDetail: boolean;
 }
 
-@Module({dynamic: true, store, name: 'Drawing'});
+@Module({ dynamic: true, store, name: "Drawing" })
 class Drawing extends VuexModule implements IDrawing {
   public listNodes: Array<objInstance> = [];
   public listLines: Array<objInstance> = [];
+  public isShowPopupDetail: boolean = false;
   public vm = new Vue();
 
   @Mutation
-  setListNodes(payload: Array<objInstance>) {
+  private setListNodes(payload: Array<objInstance>) {
     this.listNodes = payload;
   }
 
   @Mutation
-  setListLines(payload: Array<objInstance>) {
+  private setListLines(payload: Array<objInstance>) {
     this.listLines = payload;
   }
 
-  @Action({rawError: true})
+  @Mutation
+  private setIsShowPopupDetail(payload: boolean) {
+    this.isShowPopupDetail = payload;
+  }
+
+  @Action({ rawError: true })
   GET_LIST_NODES(payload: objInstance) {
-    this.vm.$post("Draw/ViewAllNode", JSON.stringify(payload)).then((res: any) => {
-      this.context.commit("setListNodes", res);
-    })
+    this.vm
+      .$post("Draw/ViewAllNode", JSON.stringify(payload))
+      .then((res: any) => {
+        this.context.commit("setListNodes", res);
+      });
   }
 
-  @Action({rawError: true})
+  @Action({ rawError: true })
   ADD_NODE(payload: objInstance) {
     return this.vm.$post("Draw/AddNode", JSON.stringify(payload));
   }
 
-  @Action({rawError: true})
+  @Action({ rawError: true })
   REMOVE_NODE(payload: objInstance) {
     return this.vm.$post("Draw/RemoveNode", JSON.stringify(payload));
   }
 
-  @Action({rawError: true})
+  @Action({ rawError: true })
   DETAIL_NODE(payload: objInstance) {
     return this.vm.$post("Draw/ViewNode", JSON.stringify(payload));
   }
 
-  @Action({rawError: true})
+  @Action({ rawError: true })
   UPDATE_NODE(payload: objInstance) {
     return this.vm.$post("Draw/EditNode", JSON.stringify(payload));
   }
 
-  @Action({rawError: true})
+  @Action({ rawError: true })
   GET_LIST_LINES(payload: objInstance) {
-    this.vm.$post("Draw/ViewAllLine", JSON.stringify(payload)).then((res: any) => {
-      this.context.commit("setListLines", res);
-    })
+    this.vm
+      .$post("Draw/ViewAllLine", JSON.stringify(payload))
+      .then((res: any) => {
+        this.context.commit("setListLines", res);
+      });
   }
 
-  @Action({rawError: true})
+  @Action({ rawError: true })
   ADD_LINE(payload: objInstance) {
     return this.vm.$post("Draw/AddLine", JSON.stringify(payload));
   }
 
-  @Action({rawError: true})
+  @Action({ rawError: true })
   REMOVE_LINE(payload: objInstance) {
     return this.vm.$post("Draw/RemoveLine", JSON.stringify(payload));
   }
 
-  @Action({rawError: true})
+  @Action({ rawError: true })
   DETAIL_LINE(payload: objInstance) {
     return this.vm.$post("/Draw/ViewLine", JSON.stringify(payload));
   }
 
-  @Action({rawError: true})
+  @Action({ rawError: true })
   UPDATE_LINE(payload: objInstance) {
     return this.vm.$post("Draw/EditLine", JSON.stringify(payload));
   }
-}
 
+  @Action
+  SET_IS_SHOW_POPUP_DETAIL(payload: boolean) {
+    this.context.commit("setIsShowPopupDetail", payload);
+  }
+}
 
 export const DrawingModule = getModule(Drawing);
diff --git a/src/store/types/index.ts b/src/store/types/index.ts
index f09ef8b..44feaba 100644
--- a/src/store/types/index.ts
+++ b/src/store/types/index.ts
@@ -1,3 +1,4 @@
+import Vue from "vue";
 export interface objInstance {
   [key: string]: any;
 }
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 0761f0a..7804a46 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -89,8 +89,6 @@ export default class Dashboard extends Vue {
     lat: 21.15648895639665,
     lng: 105.5981367021484
   };
-
-  public mounted() {}
 }
 </script>
 
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index d832e26..7fe6569 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -21,7 +21,7 @@
     </div>
     <div class="rightSection">
       <VuePerfectScrollbar
-        class="scroll-pLogin"
+        class="pLogin-scroll"
         :settings="perfectScrollbarSetting"
       >
         <img
@@ -77,9 +77,14 @@
               </el-input>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" class="btnSubmit margin-top-10"
-                >Đăng nhập</el-button
+              <el-button
+                type="primary"
+                class="btnSubmit margin-top-10"
+                :disabled="!isValidForm"
+                @click="login"
               >
+                Đăng nhập
+              </el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -90,6 +95,8 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { LoginModule } from "../../store/modules/login";
+import auth from "@/config/auth";
 
 @Component({
   components: {
@@ -98,84 +105,44 @@ import { Component, Vue } from "vue-property-decorator";
 })
 export default class element extends Vue {
   public isShowPassword: boolean = false;
+  public isValidForm: boolean = false;
   public form: object = {};
   public ruleForm: object = {
     username: [
       {
         required: true,
         message: "Trường này là bắt buộc",
-        trigger: "blur"
+        trigger: ["blur", "change"]
       }
     ]
   };
-}
-</script>
-<style lang="scss" scoped>
-.pLogin {
-  height: 100vh;
-  width: 100%;
-  background: #20a8d8 !important;
-  font-family: "Nunito", sans-serif;
-}
-
-.pLogin .pHeader {
-  font-size: 55px;
-  font-family: "Nunito", sans-serif;
-  font-weight: 700;
-}
-
-.tt-2 {
-  font-size: 20px;
-  opacity: 0.8;
-  width: 80%;
-}
-
-.leftSection {
-  color: #ffffff;
-}
-
-.logo-lv1 {
-  width: 200px;
-}
 
-.logo-lv2 {
-  width: 150px;
-  margin-top: -25px;
-}
-
-.rightSection {
-  max-width: 500px;
-  width: 40%;
-  height: 100%;
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
-    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
-  background-color: #fff;
-  min-width: 350px;
-  position: relative;
-  overflow: hidden;
-  -webkit-overflow-scrolling: touch;
-  border-radius: 8px 0 0px 8px;
-}
+  public checkValidationForms(formName: string) {
+    (this.$refs.form as any).validate((valid: boolean) => {
+      this.isValidForm = valid;
+    });
+  }
 
-.scroll-pLogin {
-  width: 100%;
-  height: calc(100% - 20px);
-  padding: 50px 38px 125px 38px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+  public saveToLocalStorage(res: any) {
+    auth.saveToken(res.tokenkey);
+    auth.set("aquaDraw_username", res.username);
+    auth.set("aquaDraw_info", res.info);
+  }
 
-.title {
-  font-size: 18px;
-  text-align: center;
-  margin: 20px 0 10px 0;
-  margin-top: -15px;
-}
+  public redirectToHome() {
+    this.$messageSuccess("Đăng nhập thành công!");
+    this.$router.push({ name: "home" });
+  }
 
-.btnSubmit {
-  width: 100%;
-  background-color: #039be5;
+  public login() {
+    this.$store.dispatch("LOGIN", this.form).then((res: any) => {
+      if (res.hasOwnProperty("tokenkey")) {
+        this.saveToLocalStorage(res);
+        LoginModule.SET_INFO_USER(res);
+        this.redirectToHome();
+      }
+    });
+  }
 }
-</style>
+</script>
+<style lang="scss" scoped></style>