Mercurial > gemma

annotate 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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
2 <div class="sidebar">
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
3 <nav class="nav flex-column">
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
4 <a class="nav-link active" href="#">Active</a>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
5 <a class="nav-link" href="#">Link</a>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
6 <a class="nav-link" href="#">Link</a>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
7 <a class="nav-link disabled" href="#">Disabled</a>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8 </nav>
160
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
9 <div class="user d-flex justify-content-center">
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
10 <div class="userinfo">
158
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
11 {{ userinfo }}
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
12 </div>
160
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
13 <div class="logout">
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
14 <span @click="logoff"><i class="fa fa-power-off"></i></span>
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
15 </div>
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
16 </div>
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 </div>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 </template>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 <script>
158
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
21 import { mapGetters } from "vuex";
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
22
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 export default {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 name: "sidebar",
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 computed: {
158
992e17912405 feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
26 ...mapGetters("user", ["userinfo"]),
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 sidebarStyle() {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 return {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 sidebarcollapsed: this.collapsed,
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
30 sidebarextended: this.collapsed
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 };
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 },
160
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
34 methods: {
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
35 logoff() {
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
36 this.$store.commit("user/clear_auth");
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
37 this.$router.push("/login");
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
38 }
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
39 },
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 data() {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 return {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
42 collapsed: false
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 };
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 };
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 </script>
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 <style lang="scss">
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 @import "../assets/application.scss";
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 $sidebar-full-width: 150px;
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 $sidebar-collapsed-width: 80px;
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 .sidebar {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 padding-top: $large-offset;
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 .sidebarcollapsed {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 width: $sidebar-collapsed-width;
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 .sidebarextended {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 width: $sidebar-full-width;
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65 }
160
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
66
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
67 .user {
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
68 position: absolute;
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
69 left: 0;
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
70 bottom: $large-offset;
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
71 width: 90px;
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
72 }
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
73
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
74 .userinfo {
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
75 font-weight: bold;
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
76 }
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
77
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
78 .logout {
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
79 margin-left: $small-offset;
061209505028 feat: Login and logout with session restoration implemented
Thomas Junk <thomas.junk@intevation.de>
parents: 158
diff changeset
80 }
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 </style>