Mercurial > gemma

diff client/src/components/Sidebar.vue @ 160:061209505028

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: Login and logout with session restoration implemented Login information stored in local storage for restoration after browser restart. If a non expired session is found, it is restored before entering the main area. Username and logout are located in the lower sidebar.
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 04 Jul 2018 17:21:10 +0200
parents 992e17912405
children b7ac2e4f9c5c
line wrap: on
line diff
--- a/client/src/components/Sidebar.vue	Tue Jul 03 17:46:06 2018 +0200
+++ b/client/src/components/Sidebar.vue	Wed Jul 04 17:21:10 2018 +0200
@@ -6,9 +6,14 @@
       <a class="nav-link" href="#">Link</a>
       <a class="nav-link disabled" href="#">Disabled</a>
     </nav>
-    <div class="userinfo">
+    <div class="user d-flex justify-content-center">
+      <div class="userinfo">
       {{ userinfo }}
     </div>
+    <div class="logout">
+      <span @click="logoff"><i class="fa fa-power-off"></i></span>
+    </div>
+    </div>
   </div>
 </template>
 
@@ -26,6 +31,12 @@
       };
     }
   },
+  methods: {
+    logoff() {
+      this.$store.commit("user/clear_auth");
+      this.$router.push("/login");
+    }
+  },
   data() {
     return {
       collapsed: false
@@ -52,4 +63,19 @@
 .sidebarextended {
   width: $sidebar-full-width;
 }
+
+.user {
+  position: absolute;
+  left: 0;
+  bottom: $large-offset;
+  width: 90px;
+}
+
+.userinfo {
+  font-weight: bold;
+}
+
+.logout {
+  margin-left: $small-offset;
+}
 </style>