Mercurial > gemma
annotate client/src/components/Sidebar.vue @ 158:992e17912405
feat: Improve login against real db
In order to log into our real db, we need to consume
the new JSON document consuming experies, username, roles, etc.
Token is stored securly in browser session.
Other data is stored in vue store.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 03 Jul 2018 16:18:29 +0200 |
parents | 5e95c62a7e74 |
children | 061209505028 |
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> |
158
992e17912405
feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents:
117
diff
changeset
|
9 <div class="userinfo"> |
992e17912405
feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents:
117
diff
changeset
|
10 {{ userinfo }} |
992e17912405
feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents:
117
diff
changeset
|
11 </div> |
117
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
12 </div> |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
13 </template> |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
14 |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
15 <script> |
158
992e17912405
feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents:
117
diff
changeset
|
16 import { mapGetters } from "vuex"; |
992e17912405
feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents:
117
diff
changeset
|
17 |
117
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
18 export default { |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
19 name: "sidebar", |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
20 computed: { |
158
992e17912405
feat: Improve login against real db
Thomas Junk <thomas.junk@intevation.de>
parents:
117
diff
changeset
|
21 ...mapGetters("user", ["userinfo"]), |
117
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
22 sidebarStyle() { |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
23 return { |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
24 sidebarcollapsed: this.collapsed, |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 sidebarextended: this.collapsed |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 }; |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
27 } |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
28 }, |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
29 data() { |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
30 return { |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 collapsed: false |
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 } |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
34 }; |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
35 </script> |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
36 |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
37 <style lang="scss"> |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 @import "../assets/application.scss"; |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
40 $sidebar-full-width: 150px; |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
41 |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
42 $sidebar-collapsed-width: 80px; |
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 .sidebar { |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
45 padding-top: $large-offset; |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
46 } |
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 .sidebarcollapsed { |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
49 width: $sidebar-collapsed-width; |
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 |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
52 .sidebarextended { |
5e95c62a7e74
Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
53 width: $sidebar-full-width; |
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 </style> |