# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1530627509 -7200
# Node ID 992e179124058fb1d2fc9984371bfdfb99749ffe
# Parent  a85c44438d487212fd4984d79e7bd4213413dea0
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.

diff -r a85c44438d48 -r 992e17912405 client/src/components/Sidebar.vue
--- a/client/src/components/Sidebar.vue	Tue Jul 03 11:43:55 2018 +0200
+++ b/client/src/components/Sidebar.vue	Tue Jul 03 16:18:29 2018 +0200
@@ -6,13 +6,19 @@
       <a class="nav-link" href="#">Link</a>
       <a class="nav-link disabled" href="#">Disabled</a>
     </nav>
+    <div class="userinfo">
+      {{ userinfo }}
+    </div>
   </div>
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+
 export default {
   name: "sidebar",
   computed: {
+    ...mapGetters("user", ["userinfo"]),
     sidebarStyle() {
       return {
         sidebarcollapsed: this.collapsed,
diff -r a85c44438d48 -r 992e17912405 client/src/stores/user.js
--- a/client/src/stores/user.js	Tue Jul 03 11:43:55 2018 +0200
+++ b/client/src/stores/user.js	Tue Jul 03 16:18:29 2018 +0200
@@ -3,16 +3,26 @@
 const User = {
   namespaced: true,
   state: {
-    authenticated: false
+    user: "",
+    authenticated: false,
+    expires: null,
+    roles: []
   },
   getters: {
     authenticated: state => {
       return state.authenticated;
+    },
+    userinfo: state => {
+      return state.user;
     }
   },
   mutations: {
-    auth_success: (state, token) => {
+    auth_success: (state, data) => {
       state.authenticated = true;
+      const { token, user, expires, roles } = data;
+      state.user = user;
+      state.expires = expires;
+      state.roles = roles;
       sessionStorage.setItem("token", token);
     },
     auth_failure: state => {
@@ -23,10 +33,9 @@
   actions: {
     login({ commit }, user) {
       return new Promise((resolve, reject) => {
-        HTTP.post("/token", user)
+        HTTP.get("/token", { params: user })
           .then(response => {
-            let token = response.data;
-            commit("auth_success", token);
+            commit("auth_success", response.data);
             resolve(response);
           })
           .catch(error => {
diff -r a85c44438d48 -r 992e17912405 client/src/views/Login.vue
--- a/client/src/views/Login.vue	Tue Jul 03 11:43:55 2018 +0200
+++ b/client/src/views/Login.vue	Tue Jul 03 16:18:29 2018 +0200
@@ -12,10 +12,10 @@
              <span class="loginerror"><translate>Login failed</translate></span>
            </div>
         <div class="input-group mb-3 emailgroup">
-          <input type="text" v-model="username" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
+          <input type="text" v-model="user" id="inputEmail" class="form-control" :placeholder="emailLabel" required autofocus>
         </div>
         <div class="input-group mb-3 passwordgroup">
-          <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control" :placeholder="passwordLabel" required>
+          <input :type="isPasswordVisible" v-model="password" id="inputPassword" class="form-control" :placeholder='passwordLabel' required>
           <div class="input-group-append">
             <span class="input-group-text" id="basic-addon2" @click="showPassword"><i :class="eyeIcon"></i></span>
           </div>
@@ -103,7 +103,7 @@
   name: "login",
   data() {
     return {
-      username: "",
+      user: "",
       password: "",
       submitted: false,
       loginFailed: false,
@@ -141,9 +141,9 @@
   methods: {
     login() {
       this.submitted = true;
-      const { username, password } = this;
+      const { user, password } = this;
       this.$store
-        .dispatch("user/login", { username, password })
+        .dispatch("user/login", { user, password })
         .then(() => {
           this.loginFailed = false;
           this.$router.push("/");