update package

README.md

@@ -6,8 +6,15 @@ vue.js + express.js app starter
 ## Included
  - vue + vue-router with example components
  - express server with routes and api
+ - vue authenticated session with vuex integrated with express
+ - vue express routers integrated login api
+ - vue express integrated authentication,routes,session
  - simple json based database (lowdb)
+ - signup & login using mysql knex bookshelf passport express-session express-mysqlstore vuex axios
  - building\watching scripts and tools
+ - 
+ + Added to Login samples screen Express and Vue joined vuex store with express passport & express session sample using axios 
+ + Added links from  Express to Vue  and  Vue to Express & check if user is loggedin , getuser info
 
 ## Installation
 

template/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
-}
+    "presets": ["es2015", "stage-2"]
+}

template/client/src/client.js

@@ -1,9 +1,11 @@
 import Vue from 'vue';
 import router from './router/router.js';
 import App from './components/App.vue';
+import store  from './modules/store/';
 
 new Vue({
   el: '#vue-app',
+  store:store,
   router: router,
   render: createElement => createElement(App)
-});
+});

template/client/src/components/App.vue

@@ -3,6 +3,12 @@
     <nav>
       <span>Vue router links: </span>
       <router-link to="/" exact>Home</router-link>
+      <router-link to="/vuelogin">vuelogin</router-link>
+      <router-link to="/vueauth">vueauth</router-link>
+      <router-link to="/vueprofile">protectedlink</router-link>
+      <router-link to="/isLoggedIn">isLoggedIn</router-link>
+      <router-link to="/getUser">getUser</router-link>
+      <router-link to='/login'>explogin</router-link>
       <router-link to="/about">About</router-link>
       <router-link to="/contacts">Contacts</router-link>
       <router-link to="/!@#$%">404 page</router-link>
@@ -15,4 +21,4 @@
 export default {
   name: 'app'
 }
-</script>
+</script>

template/client/src/modules/store/actions.js

@@ -0,0 +1,153 @@
+import Vue from "vue";
+import axios from "axios";
+import { ADD_MESSAGE, ADD_NOTIFICATION, SET_USER, SESSION, LOGIN, LOGOUT, LOGIN_SUCCESS, LOGIN_ERROR, LOGIN_FAILED, ISLOGGEDIN} from "./types";
+
+export const NAMESPACE= "/api/session";
+export const VERSION="/v1";
+
+
+export const addMessage = ({ commit,state }, item) => {
+	commit(ADD_MESSAGE, item);
+};
+
+export const addNotification = ({ commit,state }, item) => {
+	commit(ADD_NOTIFICATION, item);
+};
+
+export default {
+
+/**
+   * Authenticates a new user with given email and password
+   * @param {object} store
+   * @param {object} email and password
+   */
+	  authenticate({ commit }, {email, password,router}) {
+			return new Promise(resolve => {
+        setTimeout(() => {
+	       commit(LOGIN); // show spinner
+				 let sr=this.$router
+					 let sdata={
+							 email: email,
+							 password: password
+						 }
+
+							 	axios.post('/loginvue',sdata) .then(function (response) {
+							 					let user =  response.data.user;
+												localStorage.setItem("token", "JWT");
+							 				 commit(SET_USER, user)
+							 				 if (user ) {
+							 					 commit('setDisplayName', user.displayName)
+							        	 commit(LOGIN_SUCCESS);
+												 commit(ISLOGGEDIN,1);
+											 }
+											 else {
+												 commit(LOGIN_FAILED);
+												 commit(ISLOGGEDIN,0);
+											 }
+							          resolve();
+												router.push(response.data.path,{params:{user:response.data.user,found:response.data.found}})
+
+			 })
+			 .catch(function (error) {
+				 commit(ISLOGGEDIN,0);
+				  commit(LOGIN_ERROR,error.message);
+			 })
+
+		 }, 1000);
+	 });
+   },
+	 /**
+		* checks if  the user is isLoggedIn the application
+		* @param {object} store
+		*/
+    isLoggedIn({ commit }) {
+			return new Promise(resolve => {
+				setTimeout(() => {
+			  localStorage.removeItem("token");
+		 localStorage.setItem("token", "JWT");
+		 axios.post('/isLoggedIn') .then(function (response) {
+			 commit(ISLOGGEDIN,response.data.isLoggedIn);
+			// return (response.isLoggedIn);
+  })
+ .catch(function (error) {
+	 commit(ISLOGGEDIN,0);
+	 commit(LOGIN_ERROR,error.message);
+	 //console.log(error);
+ resolve();
+})
+}, 1000);
+});
+
+},
+	 /**
+		* fetches the LoggedIn user of the application
+		* @param {object} store
+		*/
+    getLoggedInUser({ commit }) {
+			return new Promise(resolve => {
+        setTimeout(() => {
+ 			localStorage.removeItem("token");
+		 axios.post('/getLoggedInUser') .then(function (response) {
+			 let user =  response.data.user;
+ 			localStorage.setItem("token", "JWT");
+ 		 commit(SET_USER, user);
+ 		resolve();
+  })
+ .catch(function (error) {
+	 commit(LOGIN_ERROR,error.message);
+	 //console.log(error);
+ resolve();
+})
+}, 1000);
+});
+
+},
+	 /**
+		* FEtches the session of the user , probably not the best way to go  in
+		security terms,  better to add/find/remove/get/set api for items in session
+		usnig vuex && axios rather than sharing the session itself, just shown here for
+		simplicity...
+		* @param {object} store
+		*/
+    getUserSession({ commit }) {
+			return new Promise(resolve => {
+				setTimeout(() => {
+     localStorage.removeItem("token");
+		  axios.post('/getUserSession') .then(function (response) {
+				localStorage.setItem("token", response.data.session.sessId);
+			 commit(SESSION,response.data.session);
+resolve();
+  })
+ .catch(function (error) {
+	 commit(LOGIN_ERROR,error.message);
+ //console.log(error);
+ resolve();
+})
+}, 1000);
+});
+
+},
+
+	 /**
+	  * Logouts the user from the application
+	  * @param {object} store
+	  */
+	 logout({ commit }) {
+		 return new Promise(resolve => {
+		 	setTimeout(() => {
+		localStorage.removeItem("token");
+	 	axios.post('/logoutvue') .then(function (response) {
+	 	 commit(LOGOUT);
+		 resolve();
+	 })
+	 .catch(function (error) {
+	 commit(LOGOUT);
+	// console.log(error);
+	 resolve();
+	 })
+ }, 1000);
+});
+
+	 }
+
+};

template/client/src/modules/store/getters.js

@@ -0,0 +1,10 @@
+export default {
+ me:state=> state.user,
+  getSession: state => state.session,
+  getUser: state => state.user,
+  getDisplayName: state => state.displayName,
+  getMessages: state => state.messages,
+  getNotifications: state => state.notifications,
+	isLoggedIn: state => state.isLoggedIn&&state.user,
+	getErrorMesg: state => state.errormesg
+}

template/client/src/modules/store/index.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import state from './state'
+import getters from './getters'
+import mutations from './mutations'
+import actions from './actions'
+import types from "./types";
+Vue.use(Vuex)
+
+
+export default new Vuex.Store({
+	namespaced: true,
+     state: {
+    ...state
+
+  },
+  getters,
+  mutations: {
+    ...mutations,
+  },
+  actions,
+	types
+})

template/client/src/modules/store/mutations.js

@@ -0,0 +1,48 @@
+import { ADD_MESSAGE, ADD_NOTIFICATION, SET_USER, SESSION, LOGIN, LOGOUT, LOGIN_SUCCESS, LOGIN_ERROR, LOGIN_FAILED, ISLOGGEDIN} from "./types";
+export default {
+
+	    [LOGIN] (state) {
+	      state.pending = true;
+	    },
+			[LOGIN_SUCCESS] (state) {
+	      state.isLoggedIn = 1;
+	      state.pending = false;
+	    },
+			[LOGIN_ERROR] (state,value) {
+	      state.pending = false;
+				state.errormesg = value;
+	    },
+			[LOGIN_FAILED] (state) {
+	      state.isLoggedIn = 0;
+	      state.pending = false;
+	    },
+			[LOGIN_SUCCESS] (state) {
+	      state.isLoggedIn = 1;
+	      state.pending = false;
+	    },
+
+			[ISLOGGEDIN] (state,value) {
+	      state.isLoggedIn = value;
+	     },
+	    [LOGOUT](state) {
+	      state.isLoggedIn = 0;
+	    },
+
+	[ADD_MESSAGE] (state, item) {
+		state.messages.splice(0);
+		state.messages.push(item);
+	},
+
+	[ADD_NOTIFICATION] (state, item) {
+		state.notifications.splice(0);
+		state.notifications.push(item);
+	},
+
+	[SET_USER] (state, user) {
+		state.user = user;
+	},
+	[SESSION]  (state, session) {
+		state.session = session;
+	},
+
+}

template/client/src/modules/store/state.js

@@ -0,0 +1,18 @@
+const user = null
+const session =null
+const isLoggedIn=0
+const displayName = ''
+const notifications= [
+		{ id: 1, text: "Something happened!", time: 1, user: null }
+	]
+const messages= []
+const errormesg = null
+export default {
+  user,
+	errormesg,
+  session,
+	isLoggedIn,
+  displayName,
+  notifications,
+  messages
+}

template/client/src/modules/store/types.js

@@ -0,0 +1,10 @@
+export const ADD_NOTIFICATION 	= "ADD_NOTIFICATION";
+export const ADD_MESSAGE 				= "ADD_MESSAGE";
+export const SET_USER	 				  = "SET_SESSION_USER";
+export const SESSION	 				  = "SESSION";
+export const ISLOGGEDIN         = "ISLOGGEDIN";
+export const LOGIN              = "LOGIN";
+export const LOGIN_SUCCESS      = "LOGIN_SUCCESS";
+export const LOGIN_FAILED       = "LOGIN_FAILED";
+export const LOGIN_ERROR        = "LOGIN_ERROR";
+export const LOGOUT             = "LOGOUT";

template/client/src/pages/ContactsPage.vue

@@ -14,4 +14,4 @@ export default {
   }
 
 }
-</script>
+</script>