Structure and clean Vuex store

resources/assets/js/app.js

@@ -6,7 +6,7 @@
 
 require('./bootstrap');
 
-import store from './store'
+import store from './vuex/store'
 import router from './routes'
 import Vue from 'vue'
 import VueRouter from 'vue-router'

resources/assets/js/layouts/Header.vue

@@ -44,7 +44,7 @@
                         </div>
                     </li>
                 </ul>
-                <ul v-if="isAuth()" class="navbar-nav mr-0 my-lg-0">
+                <ul v-if="isAuth() && !getTwoFactorCode() && !isScreenLocked()" class="navbar-nav mr-0 my-lg-0">
                     <li class="nav-item">
                         <router-link class="nav-link text-muted waves-effect waves-dark" :to="'/home'">
                             <i class="fas fa-home fa-fw"></i>
@@ -135,6 +135,12 @@
             getAuthUser(name) {
                 return helper.getAuthUser(name);
             },
+            getTwoFactorCode() {
+                return helper.getTwoFactorCode();
+            },
+            isScreenLocked() {
+                return helper.isScreenLocked();
+            },
             isAuth() {
                 return helper.isAuth();
             },

resources/assets/js/routes.js

@@ -1,5 +1,5 @@
 import VueRouter from 'vue-router'
-import store from './store'
+import store from './vuex/store'
 import helper from './services/helper'
 
 let appName = helper.getConfig('company_name');
@@ -265,7 +265,14 @@ router.beforeEach((to, from, next) => {
     helper.authCheck()
         .then(response => {
             helper.notification();
-            if (!helper.hasRole('admin') && helper.getConfig('maintenance_mode') && to.fullPath !== '/maintenance' && to.fullPath !== '/login') {
+            if (
+                !helper.hasRole('admin') &&
+                helper.getConfig('maintenance_mode') &&
+                to.fullPath !== '/maintenance' &&
+                to.fullPath !== '/login' &&
+                to.fullPath !== '/auth/security' &&
+                to.fullPath !== '/auth/lock'
+            ) {
                 return next({path: '/maintenance'});
             }
             if (to.matched.some(m => m.meta.validate)) {

resources/assets/js/services/helper.js

@@ -1,4 +1,4 @@
-import store from '../store'
+import store from '../vuex/store'
 import router from '../routes'
 
 export default {
@@ -11,17 +11,6 @@ export default {
             });
     },
 
-    authUser() {
-        return axios.get('/api/auth/user')
-            .then(response => response.data)
-            .then(response => {
-                return response;
-            })
-            .catch(error => {
-                this.showDataErrorMsg(error);
-            });
-    },
-
     authCheck() {
         return axios.post('/api/auth/check')
             .then(response => response.data)
@@ -143,13 +132,6 @@ export default {
         return store.getters.getSearchQuery;
     },
 
-    hasAdminRole() {
-        if (this.hasRole('admin')) {
-            return 1;
-        }
-        return 0;
-    },
-
     userHasRole(user, roleName) {
         if (!user.roles) {
             return false;
@@ -197,14 +179,6 @@ export default {
         return form;
     },
 
-    ucword(value) {
-        if (!value) return;
-
-        return value.toLowerCase().replace(/\b[a-z]/g, function (value) {
-            return value.toUpperCase();
-        });
-    },
-
     toWord(value) {
         if (!value) return;
 

resources/assets/js/views/auth/Security.vue

@@ -49,11 +49,9 @@
             }
         },
         mounted() {
-            if (!helper.getConfig('two_factor_security') || !helper.getTwoFactorCode())
+            if (!helper.getConfig('two_factor_security') || !helper.getTwoFactorCode()) {
                 this.$router.push('/home');
-
-            if (!helper.getConfig('mode'))
-                this.twoFactorForm.two_factor_code = helper.getTwoFactorCode();
+            }
         },
         computed: {
             getBackground() {

resources/assets/js/vuex/actions.js

@@ -0,0 +1,47 @@
+export const setAuthStatus = ({commit}) => {
+    commit('setAuthStatus');
+};
+export const setAuthUserDetail = ({commit}, auth) => {
+    commit('setAuthUserDetail', auth);
+};
+export const resetAuthUserDetail = ({commit}) => {
+    commit('resetAuthUserDetail');
+};
+export const setConfig = ({commit}, data) => {
+    commit('setConfig', data);
+};
+export const setPermission = ({commit}, data) => {
+    commit('setPermission', data);
+};
+export const resetConfig = ({commit}) => {
+    commit('resetConfig', data);
+};
+export const setTwoFactorCode = ({commit}, data) => {
+    commit('setTwoFactorCode', data);
+};
+export const resetTwoFactorCode = ({commit}) => {
+    commit('resetTwoFactorCode');
+};
+export const setLastActivity = ({commit}) => {
+    commit('setLastActivity');
+};
+export const setDefaultRole = ({commit}, data) => {
+    commit('setDefaultRole', data)
+};
+export const setSearchQuery = ({commit}, data) => {
+    commit('setSearchQuery', data)
+};
+
+export default {
+    setAuthStatus,
+    setAuthUserDetail,
+    resetAuthUserDetail,
+    setConfig,
+    setPermission,
+    resetConfig,
+    setTwoFactorCode,
+    resetTwoFactorCode,
+    setLastActivity,
+    setDefaultRole,
+    setSearchQuery
+};

resources/assets/js/vuex/getters.js

@@ -0,0 +1,47 @@
+export const getAuthUser = (state) => (name) => {
+    return state.auth[name];
+};
+
+export const getAuthStatus = (state) => {
+    return state.is_auth;
+};
+
+export const hasRole = (state) => (name) => {
+    return state.auth.roles.indexOf(name) >= 0
+};
+
+export const getConfig = (state) => (name) => {
+    return state.config[name];
+};
+
+export const hasPermission = (state) => (name) => {
+    return state.permissions.indexOf(name) > -1;
+};
+
+export const getTwoFactorCode = (state) => {
+    return state.two_factor_code;
+};
+
+export const getLastActivity = (state) => {
+    return state.last_activity;
+};
+
+export const getDefaultRole = (state) => (name) => {
+    return state.default_role[name];
+};
+
+export const getSearchQuery = (state) => {
+    return state.search_query;
+};
+
+export default {
+    getAuthUser,
+    getAuthStatus,
+    hasRole,
+    getConfig,
+    hasPermission,
+    getTwoFactorCode,
+    getLastActivity,
+    getDefaultRole,
+    getSearchQuery,
+};

resources/assets/js/store.js → resources/assets/js/vuex/store.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import getters from './getters'
+import actions from './actions'
 import createPersistedState from 'vuex-persistedstate'
 
 Vue.use(Vuex);
@@ -78,73 +80,8 @@ const store = new Vuex.Store({
             state.search_query = data;
         },
     },
-    actions: {
-        setAuthStatus({commit}) {
-            commit('setAuthStatus');
-        },
-        setAuthUserDetail({commit}, auth) {
-            commit('setAuthUserDetail', auth);
-        },
-        resetAuthUserDetail({commit}) {
-            commit('resetAuthUserDetail');
-        },
-        setConfig({commit}, data) {
-            commit('setConfig', data);
-        },
-        setPermission({commit}, data) {
-            commit('setPermission', data);
-        },
-        resetConfig({commit}) {
-            commit('resetConfig', data);
-        },
-        setTwoFactorCode({commit}, data) {
-            commit('setTwoFactorCode', data);
-        },
-        resetTwoFactorCode({commit}) {
-            commit('resetTwoFactorCode');
-        },
-        setLastActivity({commit}) {
-            commit('setLastActivity');
-        },
-        setDefaultRole({commit}, data) {
-            commit('setDefaultRole', data)
-        },
-        setSearchQuery({commit}, data) {
-            commit('setSearchQuery', data)
-        }
-    },
-    getters: {
-        getAuthUser: (state) => (name) => {
-            return state.auth[name];
-        },
-        getAuthUserFullName: (state) => {
-            return state.auth['first_name'] + ' ' + state.auth['last_name'];
-        },
-        getAuthStatus: (state) => {
-            return state.is_auth;
-        },
-        hasRole: (state) => (name) => {
-            return state.auth.roles.indexOf(name) >= 0
-        },
-        getConfig: (state) => (name) => {
-            return state.config[name];
-        },
-        hasPermission: (state) => (name) => {
-            return state.permissions.indexOf(name) > -1;
-        },
-        getTwoFactorCode: (state) => {
-            return state.two_factor_code;
-        },
-        getLastActivity: (state) => {
-            return state.last_activity;
-        },
-        getDefaultRole: (state) => (name) => {
-            return state.default_role[name];
-        },
-        getSearchQuery: (state) => {
-            return state.search_query;
-        }
-    },
+    actions,
+    getters,
     plugins: [
         createPersistedState({storage: window.sessionStorage})
     ]