Mercurial > gemma

comparison 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
comparison
equal deleted inserted replaced
159:3d9341f6da4e 160:061209505028
4 <a class="nav-link active" href="#">Active</a> 4 <a class="nav-link active" href="#">Active</a>
5 <a class="nav-link" href="#">Link</a> 5 <a class="nav-link" href="#">Link</a>
6 <a class="nav-link" href="#">Link</a> 6 <a class="nav-link" href="#">Link</a>
7 <a class="nav-link disabled" href="#">Disabled</a> 7 <a class="nav-link disabled" href="#">Disabled</a>
8 </nav> 8 </nav>
9 <div class="userinfo"> 9 <div class="user d-flex justify-content-center">
10 <div class="userinfo">
10 {{ userinfo }} 11 {{ userinfo }}
12 </div>
13 <div class="logout">
14 <span @click="logoff"><i class="fa fa-power-off"></i></span>
15 </div>
11 </div> 16 </div>
12 </div> 17 </div>
13 </template> 18 </template>
14 19
15 <script> 20 <script>
22 sidebarStyle() { 27 sidebarStyle() {
23 return { 28 return {
24 sidebarcollapsed: this.collapsed, 29 sidebarcollapsed: this.collapsed,
25 sidebarextended: this.collapsed 30 sidebarextended: this.collapsed
26 }; 31 };
32 }
33 },
34 methods: {
35 logoff() {
36 this.$store.commit("user/clear_auth");
37 this.$router.push("/login");
27 } 38 }
28 }, 39 },
29 data() { 40 data() {
30 return { 41 return {
31 collapsed: false 42 collapsed: false
50 } 61 }
51 62
52 .sidebarextended { 63 .sidebarextended {
53 width: $sidebar-full-width; 64 width: $sidebar-full-width;
54 } 65 }
66
67 .user {
68 position: absolute;
69 left: 0;
70 bottom: $large-offset;
71 width: 90px;
72 }
73
74 .userinfo {
75 font-weight: bold;
76 }
77
78 .logout {
79 margin-left: $small-offset;
80 }
55 </style> 81 </style>