diff --git a/src/baseui.js b/src/baseui.js new file mode 100644 index 0000000..c86b73b --- /dev/null +++ b/src/baseui.js @@ -0,0 +1,180 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import VueRouter from 'vue-router'; +import Axios from 'axios'; +import JwtDecode from 'jwt-decode'; + +import MyForm from 'components/my-form.vue'; +import MyInput from 'components/my-input.vue'; +import TextareaInput from 'components/textarea-input.vue'; +import MyTable from 'components/my-table.vue'; +import ScrollTable from 'components/scroll-table.vue'; + +Vue.use(VueRouter); +Vue.use(Vuex); + +Vue.component('my-form', MyForm); +Vue.component('my-input', MyInput); +Vue.component('textarea-input', TextareaInput); +Vue.component('my-table', MyTable); +Vue.component('scroll-table', ScrollTable); + +const Router = new VueRouter(); + +const Store = new Vuex.Store({ + state: { + ui: {}, + persist: { + login: {}, + authToken: '', + jwt: {}, + credentials: {} + } + }, + mutations: { + setUI(state, payload) { + state.ui = payload; + }, + setCredentials(state, payload) { + state.persist.credentials = { + username: payload.username, + password: payload.password + }; + objectToPersist(state.persist, 'persistantStore'); + }, + setLogin(state, payload) { + state.persist.login = payload.User; + state.persist.authToken = payload.AuthToken; + state.persist.jwt = JwtDecode(payload.AuthToken); + objectToPersist(state.persist, 'persistantStore'); + }, + clearLogin(state) { + state.persist.login = {}; + state.persist.authToken = ''; + state.persist.jwt = {}; + state.persist.credentials = {}; + objectToPersist(state.persist, 'persistantStore'); + } + }, + actions: { + apiRequest(context, payload) { + let doRequest = () => { + return new Promise((resolve, reject) => { + Axios({ + method: payload.method ? payload.method : 'get', + baseURL: context.state.ui.api.baseURL, + url: payload.endpoint, + params: payload.params, + data: payload.data, + headers: { + 'X-Auth-Token': context.state.persist.authToken + } + }) + .then(response => { + console.log(response); + resolve(response.data); + }) + .catch(error => { + console.dir(error); + reject(error); + }) + }); + }; + + if (payload.endpoint != 'login') { + // no jwt check for login call + + // empty username = not logged in + if (!context.state.persist.credentials.username) { + return new Promise((resolve, reject) => { + // show login page + Router.push('/login'); + reject(['not logged in']); + }); + } + + let now = Math.round(Date.now() / 1000); + if (context.state.persist.jwt.exp < (now + 300)) { + // too old jwt, logout + return new Promise((resolve, reject) => { + context.commit('clearLogin'); + Router.push('/login'); + reject(['jwt too old, logout']); + }); + } + + if ((context.state.persist.jwt.exp - 60) < now) { + // jwt near expire, get new one + console.log("getting new jwt"); + + return context.dispatch('login', context.state.persist.credentials) + .then(() => { + console.log("LOOOGIIIINNN"); + return doRequest(); + }) + .catch(error => { + throw error; + }) + } + } + + return doRequest(); + }, + login(context, payload) { + return new Promise((resolve, reject) => { + context.dispatch('apiRequest', { + method: 'post', + endpoint: 'login', + data: payload + }) + .then(data => { + context.commit('setCredentials', payload); + 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([]); + } + }); + }); + } + } +}); + +function objectToPersist(obj, key) { + try { + const serialized = JSON.stringify(obj); + localStorage.setItem(key ? key : 'persistant', serialized); + } catch (error) { + console.error(error); + } +} + +function persistToObject(key) { + try { + const serialized = localStorage.getItem(key ? key : 'persistant'); + if (serialized === null) { + return undefined; + } + return JSON.parse(serialized); + } catch (error) { + console.log(error); + return undefined; + } +} + +// get store persist part from localStorage +let persist = persistToObject('persistantStore'); +if (persist) { + Store.state.persist = persist; +} + +export default { + Vue, + Router, + Store, + Axios +}; \ No newline at end of file diff --git a/src/components/my-form.vue b/src/components/my-form.vue index e299e56..7bc2909 100644 --- a/src/components/my-form.vue +++ b/src/components/my-form.vue @@ -23,7 +23,6 @@