apiRequest

conf/init.json

@@ -1,9 +1,13 @@
 {
-    "baseURL": "https://cx20.basispanel.de/api/v1/",
-    "APItargets": {
-        "login": "login"
+    "api": {
+        "baseURL": "https://cx20.basehosts.de/api/v1/"
     },
     "navigation": [
+        {
+            "name": "Login",
+            "to": "/login",
+            "icon": "fa-home"
+        },
         {
             "name": "Dashboard",
             "to": "/",

src/components/forms/login.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="LoginForm">
+        <h2>Login</h2>
+        <form @submit.prevent="login">
+            <label>Username:</label><input type="text" v-model="username"><br>
+            <label>Password:</label><input type="password" v-model="password"><br>
+            <input type="submit" value="login">
+        </form>
+    </div>
+</template>
+
+<script>
+import Axios from 'axios';
+
+export default {
+  name: 'LoginForm',
+  data() {
+      return {
+          username: '',
+          password: ''
+      }
+  },
+  methods: {
+      login() {
+          this.$store.dispatch("login", this.$data)
+            .then(user => {
+                console.log("---- user login --------");
+                console.log(user);
+            })
+            .catch(error => {
+                console.log("---- login error -------");
+                console.log(error);
+            });
+      }
+  }
+}
+</script>

src/components/userlist.vue

@@ -18,30 +18,26 @@ export default {
         return {
            columns: [
                {
-                   heading: 'col1',
-                   prop: 'prop1'
+                   heading: 'ID',
+                   prop: 'ID'
                },
                {
-                   heading: 'col2',
-                   prop: 'prop2'
-               },
-               {
-                   heading: 'col3',
-                   prop: 'prop3'
-               },
+                   heading: 'Benutzername',
+                   prop: 'Username'
+               }
            ],
            rows: [
-               {prop1: 'r1p1', prop2: 'r1p2', prop3: 'r1p3'},
-               {prop1: 'r2p1', prop2: 'r2p2', prop3: 'r2p3'},
-               {prop1: 'r3p1', prop2: 'r3p2', prop3: 'r3p3'},
-               {prop1: 'r4p1', prop2: 'r4p2', prop3: 'r4p3'},
            ]
         }
     },
-    methods: {
-        add() {
-            this.rows.push({'prop1': 'test'});
-        }
+    created() {
+        this.$store.dispatch('apiRequest', {
+            endpoint: 'users'
+        })
+            .then(rows => this.rows = rows)
+            .catch(error => {
+                console.log(error);
+            });
     }
 }
 </script>

src/main.js

@@ -5,6 +5,7 @@ import Axios from 'axios';
 
 import App from './app.vue';
 import Dashboard from './components/dashboard.vue';
+import LoginForm from './components/forms/login.vue';
 import Userlist from './components/userlist.vue';
 
 Vue.use(VueRouter);
@@ -12,12 +13,85 @@ Vue.use(Vuex);
 
 const store = new Vuex.Store({
   state: {
+    api: {},
+    navigation: [],
+    login: {},
+    authToken: '',
+    credentials: {}
   },
   mutations: {
+    setAPI(state, payload) {
+      state.api = payload;
+    },
+    setNavigation(state, payload) {
+      for (var i=0; i<payload.length; i++) {
+        state.navigation.push(payload[i]); // = payload;
+      }
+    },
+    setCredentials(state, payload) {
+      state.credentials = {
+        username: payload.username,
+        password: payload.password
+      }
+    },
+    setLogin(state, payload) {
+      state.login = payload.User;
+      state.authToken = payload.AuthToken;
+    }
+  },
+  actions: {
+    apiRequest(context, payload) {
+      return new Promise((resolve, reject) => {
+        let endpoint = context.state.api.baseURL + payload.endpoint;
+        
+        Axios({
+          method: payload.method ? payload.method : 'get',
+          url: endpoint,
+          data: payload.data,
+          headers: {
+            'X-Auth-Token': context.state.authToken
+          }
+        })
+          .then(response => {
+              console.log(response);
+              resolve(response.data);
+          })
+          .catch(error => {
+              console.dir(error);
+              reject(error);
+          })
+      });
+    },
+    login(context, payload) {
+      context.commit('setCredentials', payload);
+      return new Promise((resolve, reject) => {
+        context.dispatch('apiRequest', {
+          method: 'post',
+          endpoint: 'login',
+          data: payload
+        })
+          .then(data => {
+            context.commit('setLogin', data);
+            resolve(data.User);
+          })
+          .catch(error => {
+              if (error.response && error.response.data && error.response.data.error) {
+                reject(error.response.data.error);
+              } else {
+                reject([]);
+              }
+          });
+      });
+    }
   }
-})
+});
+
 
 const routes = [
+  {
+    path: '/login',
+    component: LoginForm
+  },
   {
     path: '/',
     component: Dashboard
@@ -32,31 +106,32 @@ const router = new VueRouter({
   routes
 });
 
-new Vue({
-  el: '#vue-app',
-  components: {
-    App
-  },
-  data: {
-    navItems: [ ]
-  },
-  router,
-  store,
-  created() {
-    // load init
-    Axios.get('conf/init.json')
-        .then(results => {
-            if ( !Array.isArray(results.data.navigation) ) {
-                alert('invalid data in: ' + this.src);
-                return;
-            }
-            // add routes
+// load init
+Axios.get('conf/init.json')
+    .then(results => {
+        // set navigation
+        if ( !Array.isArray(results.data.navigation) ) {
+            alert('invalid data in: ' + this.src);
+            return;
+        }
+        store.commit("setNavigation", results.data.navigation);
 
-            this.navItems = results.data.navigation;
-        })
-        .catch(error => {
-            alert('error loading ' + this.src + ': ' + error.message);
+        // set api config in store
+        store.commit("setAPI", results.data.api);
+
+        // load app, when init finishs
+        new Vue({
+          el: '#vue-app',
+          components: {
+            App
+          },
+          data: {
+            navItems: store.state.navigation
+          },
+          router,
+          store
         });
-    
-  }
-});
+    })
+    .catch(error => {
+        alert('error loading: ' + error.message);
+    });