Added login to the application to make authenticated api requests.

assets/js/api/user.js

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+export default {
+    login: function (email, password) {
+        return axios.post('/login_api', {
+            email: email,
+            password: password
+        });
+    },
+    getUserData: function (userIri) {
+        return axios.get(userIri);
+    },
+}

assets/js/components/loginform.vue

@@ -0,0 +1,47 @@
+<template>
+  <form v-on:submit.prevent="handleSubmit">
+    <div v-if="error" class="alert alert-danger">
+      {{ error }}
+    </div>
+    <div class="form-group">
+      <label for="exampleInputEmail1">Email address</label>
+      <input type="email" v-model="email" class="form-control" id="exampleInputEmail1"
+             aria-describedby="emailHelp" placeholder="Enter email">
+    </div>
+    <div class="form-group">
+      <label for="exampleInputPassword1">Password</label>
+      <input type="password" v-model="password" class="form-control"
+             id="exampleInputPassword1" placeholder="Password">
+    </div>
+    <div class="form-check">
+      <input type="checkbox" class="form-check-input" id="exampleCheck1">
+      <label class="form-check-label" for="exampleCheck1">I like cheese</label>
+    </div>
+    <button type="submit" class="btn btn-primary" v-bind:class="{ disabled: isLoading }">Log in</button>
+  </form>
+</template>
+
+<script>
+import {mapActions} from "vuex";
+
+export default {
+  data() {
+    return {
+      email: '',
+      password: '',
+      error: '',
+      isLoading: false
+    }
+  },
+  props: ['user'],
+  methods: {
+    ...mapActions('usermodule', ['login']),
+    handleSubmit() {
+      this.login({'email': this.email, 'password': this.password});
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+</style>

assets/js/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import booksmodule from './modules/books';
 import bookprogressmodule from './modules/bookprogress';
 import filemodule from './modules/filemodule';
+import usermodule from './modules/usermodule';
 
 Vue.use(Vuex)
 
@@ -10,7 +11,8 @@ export default new Vuex.Store({
     modules:{
         booksmodule,
         bookprogressmodule,
-        filemodule
+        filemodule,
+        usermodule
     }
 })
 

assets/js/store/modules/usermodule.js

@@ -0,0 +1,81 @@
+import UserApi from "../../api/user";
+import {
+    LOGIN_START,
+    LOGIN_SUCCESS,
+    LOGIN_ERROR,
+    STORE_USER_INFO,
+} from '../mutation-types.js'
+
+export default {
+    namespaced: true,
+    state: {
+        isLoading: false,
+        error: null,
+        user: null,
+        userUri: null,
+    },
+    getters: {
+        isLoading(state) {
+            return state.isLoading;
+        },
+        hasError(state) {
+            return state.error !== null;
+        },
+        error(state) {
+            return state.error;
+        }
+    },
+    mutations: {
+        [LOGIN_START](state) {
+            state.isLoading = true;
+            state.error = null;
+            state.user = null;
+        },
+        [LOGIN_SUCCESS](state, userUri) {
+            state.isLoading = false;
+            state.error = null;
+            state.userUri = userUri;
+        },
+        [STORE_USER_INFO](state, user) {
+            state.isLoading = false;
+            state.error = null;
+            state.user = user;
+        },
+        [LOGIN_ERROR](state, error) {
+            state.isLoading = false;
+            state.error = error;
+            state.user = null;
+        },
+    },
+    actions: {
+        async login({dispatch, commit}, data) {
+            console.info(data.email);
+            console.info(data.password);
+            commit(LOGIN_START);
+            let response = await UserApi.login(data.email, data.password)
+                .then(response => {
+                    console.log(response.data);
+                    console.log(response.headers.location);
+                    // commit(LOGIN_SUCCESS,response.data);
+                    dispatch('getUserInfo', response.headers.location)
+                    commit(LOGIN_SUCCESS, response.headers.location);
+                    //this.$emit('user-authenticated', userUri);
+                    //this.email = '';
+                    //this.password = '';
+                }).catch(error => {
+                    if (error.response.data.error) {
+
+                        commit(LOGIN_ERROR, error.response.data.error);
+                        console.log(error.response.data.error);
+                    }
+
+                }).finally(() => {
+                    // this.isLoading = false;
+                })
+        },
+        async getUserInfo({commit}, userUri) {
+            let userInfo = await UserApi.getUserData(userUri);
+            commit(STORE_USER_INFO, userInfo.data);
+        }
+    }
+};

assets/js/store/mutation-types.js

@@ -8,5 +8,10 @@ export const
     FETCHING_FILES = "FETCHING_FILES",
     FETCHING_FILES_SUCCESS = "FETCHING_FILES_SUCCESS",
     FETCHING_FILES_ERROR = "FETCHING_FILES_ERROR",
-    REMOVE_FILE_FROM_LIST = "REMOVE_FILE_FROM_LIST"
+    REMOVE_FILE_FROM_LIST = "REMOVE_FILE_FROM_LIST",
+
+    LOGIN_START = "LOGIN_START",
+    LOGIN_SUCCESS = "LOGIN_SUCCESS",
+    LOGIN_ERROR = "LOGIN_ERROR",
+    STORE_USER_INFO = "STORE_USER_INFO"
 ;

assets/js/user.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import Loginform from "./components/loginform";
+import store from "./store/index";
+
+Vue.component('Loginform', Loginform);
+new Vue({store}).$mount('#app');