Changeset View
Changeset View
Standalone View
Standalone View
src/resources/js/app.js
| /** | /** | ||||
| * First we will load all of this project's JavaScript dependencies which | * First we will load all of this project's JavaScript dependencies which | ||||
| * includes Vue and other libraries. It is a great starting point when | * includes Vue and other libraries. It is a great starting point when | ||||
| * building robust, powerful web applications using Vue and Laravel. | * building robust, powerful web applications using Vue and Laravel. | ||||
| */ | */ | ||||
| require('./bootstrap') | require('./bootstrap') | ||||
| import AppComponent from '../vue/App' | import AppComponent from '../vue/App' | ||||
| import MenuComponent from '../vue/Widgets/Menu' | import MenuComponent from '../vue/Widgets/Menu' | ||||
| import SupportForm from '../vue/Widgets/SupportForm' | import SupportForm from '../vue/Widgets/SupportForm' | ||||
| import store from './store' | |||||
| import { Tab } from 'bootstrap' | import { Tab } from 'bootstrap' | ||||
| import { loadLangAsync, i18n } from './locale' | import { loadLangAsync, i18n } from './locale' | ||||
| const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="visually-hidden">Loading</span></div></div>' | const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="visually-hidden">Loading</span></div></div>' | ||||
| const routerState = { | |||||
| afterLogin: null, | |||||
| isLoggedIn: !!localStorage.getItem('token') | |||||
| } | |||||
| let isLoading = 0 | let isLoading = 0 | ||||
| // Lock the UI with the 'loading...' element | // Lock the UI with the 'loading...' element | ||||
| const startLoading = () => { | const startLoading = () => { | ||||
| isLoading++ | isLoading++ | ||||
| let loading = $('#app > .app-loader').removeClass('fadeOut') | let loading = $('#app > .app-loader').removeClass('fadeOut') | ||||
| if (!loading.length) { | if (!loading.length) { | ||||
| $('#app').append($(loader)) | $('#app').append($(loader)) | ||||
| Show All 9 Lines | |||||
| } | } | ||||
| let loadingRoute | let loadingRoute | ||||
| // Note: This has to be before the app is created | // Note: This has to be before the app is created | ||||
| // Note: You cannot use app inside of the function | // Note: You cannot use app inside of the function | ||||
| window.router.beforeEach((to, from, next) => { | window.router.beforeEach((to, from, next) => { | ||||
| // check if the route requires authentication and user is not logged in | // check if the route requires authentication and user is not logged in | ||||
| if (to.meta.requiresAuth && !store.state.isLoggedIn) { | if (to.meta.requiresAuth && !routerState.isLoggedIn) { | ||||
| // remember the original request, to use after login | // remember the original request, to use after login | ||||
| store.state.afterLogin = to; | routerState.afterLogin = to; | ||||
| // redirect to login page | // redirect to login page | ||||
| next({ name: 'login' }) | next({ name: 'login' }) | ||||
| return | return | ||||
| } | } | ||||
| if (to.meta.loading) { | if (to.meta.loading) { | ||||
| Show All 23 Lines | |||||
| }) | }) | ||||
| const app = new Vue({ | const app = new Vue({ | ||||
| components: { | components: { | ||||
| AppComponent, | AppComponent, | ||||
| MenuComponent, | MenuComponent, | ||||
| }, | }, | ||||
| i18n, | i18n, | ||||
| store, | |||||
| router: window.router, | router: window.router, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| authInfo: null, | |||||
| isUser: !window.isAdmin && !window.isReseller, | isUser: !window.isAdmin && !window.isReseller, | ||||
| appName: window.config['app.name'], | appName: window.config['app.name'], | ||||
| appUrl: window.config['app.url'], | appUrl: window.config['app.url'], | ||||
| themeDir: '/themes/' + window.config['app.theme'] | themeDir: '/themes/' + window.config['app.theme'] | ||||
| } | } | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| // Clear (bootstrap) form validation state | // Clear (bootstrap) form validation state | ||||
| clearFormValidation(form) { | clearFormValidation(form) { | ||||
| $(form).find('.is-invalid').removeClass('is-invalid') | $(form).find('.is-invalid').removeClass('is-invalid') | ||||
| $(form).find('.invalid-feedback').remove() | $(form).find('.invalid-feedback').remove() | ||||
| }, | }, | ||||
| hasPermission(type) { | hasPermission(type) { | ||||
| const authInfo = store.state.authInfo | |||||
| const key = 'enable' + type.charAt(0).toUpperCase() + type.slice(1) | const key = 'enable' + type.charAt(0).toUpperCase() + type.slice(1) | ||||
| return !!(authInfo && authInfo.statusInfo[key]) | return !!(this.authInfo && this.authInfo.statusInfo[key]) | ||||
| }, | }, | ||||
| hasRoute(name) { | hasRoute(name) { | ||||
| return this.$router.resolve({ name: name }).resolved.matched.length > 0 | return this.$router.resolve({ name: name }).resolved.matched.length > 0 | ||||
| }, | }, | ||||
| hasSKU(name) { | hasSKU(name) { | ||||
| const authInfo = store.state.authInfo | return this.authInfo.statusInfo.skus && this.authInfo.statusInfo.skus.indexOf(name) != -1 | ||||
| return authInfo.statusInfo.skus && authInfo.statusInfo.skus.indexOf(name) != -1 | |||||
| }, | }, | ||||
| isController(wallet_id) { | isController(wallet_id) { | ||||
| if (wallet_id && store.state.authInfo) { | if (wallet_id && this.authInfo) { | ||||
| let i | let i | ||||
| for (i = 0; i < store.state.authInfo.wallets.length; i++) { | for (i = 0; i < this.authInfo.wallets.length; i++) { | ||||
| if (wallet_id == store.state.authInfo.wallets[i].id) { | if (wallet_id == this.authInfo.wallets[i].id) { | ||||
| return true | return true | ||||
| } | } | ||||
| } | } | ||||
| for (i = 0; i < store.state.authInfo.accounts.length; i++) { | for (i = 0; i < this.authInfo.accounts.length; i++) { | ||||
| if (wallet_id == store.state.authInfo.accounts[i].id) { | if (wallet_id == this.authInfo.accounts[i].id) { | ||||
| return true | return true | ||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| return false | return false | ||||
| }, | }, | ||||
| // Set user state to "logged in" | // Set user state to "logged in" | ||||
| loginUser(response, dashboard, update) { | loginUser(response, dashboard, update) { | ||||
| if (!update) { | if (!update) { | ||||
| store.commit('logoutUser') // destroy old state data | routerState.isLoggedIn = true | ||||
| store.commit('loginUser') | this.authInfo = null | ||||
| } | } | ||||
| localStorage.setItem('token', response.access_token) | localStorage.setItem('token', response.access_token) | ||||
| localStorage.setItem('refreshToken', response.refresh_token) | localStorage.setItem('refreshToken', response.refresh_token) | ||||
| axios.defaults.headers.common.Authorization = 'Bearer ' + response.access_token | axios.defaults.headers.common.Authorization = 'Bearer ' + response.access_token | ||||
| if (response.email) { | if (response.email) { | ||||
| store.state.authInfo = response | this.authInfo = response | ||||
| } | } | ||||
| if (dashboard !== false) { | if (dashboard !== false) { | ||||
| this.$router.push(store.state.afterLogin || { name: 'dashboard' }) | this.$router.push(routerState.afterLogin || { name: 'dashboard' }) | ||||
| } | } | ||||
| store.state.afterLogin = null | routerState.afterLogin = null | ||||
| // Refresh the token before it expires | // Refresh the token before it expires | ||||
| let timeout = response.expires_in || 0 | let timeout = response.expires_in || 0 | ||||
| // We'll refresh 60 seconds before the token expires | // We'll refresh 60 seconds before the token expires | ||||
| if (timeout > 60) { | if (timeout > 60) { | ||||
| timeout -= 60 | timeout -= 60 | ||||
| } | } | ||||
| // TODO: We probably should try a few times in case of an error | // TODO: We probably should try a few times in case of an error | ||||
| // TODO: We probably should prevent axios from doing any requests | // TODO: We probably should prevent axios from doing any requests | ||||
| // while the token is being refreshed | // while the token is being refreshed | ||||
| this.refreshTimeout = setTimeout(() => { | this.refreshTimeout = setTimeout(() => { | ||||
| axios.post('api/auth/refresh', { refresh_token: response.refresh_token }).then(response => { | axios.post('api/auth/refresh', { refresh_token: response.refresh_token }).then(response => { | ||||
| this.loginUser(response.data, false, true) | this.loginUser(response.data, false, true) | ||||
| }) | }) | ||||
| }, timeout * 1000) | }, timeout * 1000) | ||||
| }, | }, | ||||
| // Set user state to "not logged in" | // Set user state to "not logged in" | ||||
| logoutUser(redirect) { | logoutUser(redirect) { | ||||
| store.commit('logoutUser') | routerState.isLoggedIn = true | ||||
| this.authInfo = null | |||||
| localStorage.setItem('token', '') | localStorage.setItem('token', '') | ||||
| localStorage.setItem('refreshToken', '') | localStorage.setItem('refreshToken', '') | ||||
| delete axios.defaults.headers.common.Authorization | delete axios.defaults.headers.common.Authorization | ||||
| if (redirect !== false) { | if (redirect !== false) { | ||||
| this.$router.push({ name: 'login' }) | this.$router.push({ name: 'login' }) | ||||
| } | } | ||||
| ▲ Show 20 Lines • Show All 61 Lines • ▼ Show 20 Lines | methods: { | ||||
| this.stopLoading() | this.stopLoading() | ||||
| const status = error.response ? error.response.status : 500 | const status = error.response ? error.response.status : 500 | ||||
| const message = error.response ? error.response.statusText : '' | const message = error.response ? error.response.statusText : '' | ||||
| if (status == 401) { | if (status == 401) { | ||||
| // Remember requested route to come back to it after log in | // Remember requested route to come back to it after log in | ||||
| if (this.$route.meta.requiresAuth) { | if (this.$route.meta.requiresAuth) { | ||||
| store.state.afterLogin = this.$route | routerState.afterLogin = this.$route | ||||
| this.logoutUser() | this.logoutUser() | ||||
| } else { | } else { | ||||
| this.logoutUser(false) | this.logoutUser(false) | ||||
| } | } | ||||
| } else { | } else { | ||||
| this.errorPage(status, message) | this.errorPage(status, message) | ||||
| } | } | ||||
| }, | }, | ||||
| Show All 38 Lines | methods: { | ||||
| return this.price(cost, currency) + '/' + this.$t('wallet.month') + index | return this.price(cost, currency) + '/' + this.$t('wallet.month') + index | ||||
| }, | }, | ||||
| clickRecord(event) { | clickRecord(event) { | ||||
| if (!/^(a|button|svg|path)$/i.test(event.target.nodeName)) { | if (!/^(a|button|svg|path)$/i.test(event.target.nodeName)) { | ||||
| $(event.target).closest('tr').find('a').trigger('click') | $(event.target).closest('tr').find('a').trigger('click') | ||||
| } | } | ||||
| }, | }, | ||||
| isDegraded() { | isDegraded() { | ||||
| return store.state.authInfo && store.state.authInfo.isAccountDegraded | return this.authInfo && this.authInfo.isAccountDegraded | ||||
| }, | }, | ||||
| pageName(path) { | pageName(path) { | ||||
| let page = this.$route.path | let page = this.$route.path | ||||
| // check if it is a "menu page", find the page name | // check if it is a "menu page", find the page name | ||||
| // otherwise we'll use the real path as page name | // otherwise we'll use the real path as page name | ||||
| window.config.menu.every(item => { | window.config.menu.every(item => { | ||||
| if (item.location == page && item.page) { | if (item.location == page && item.page) { | ||||
| ▲ Show 20 Lines • Show All 52 Lines • ▼ Show 20 Lines | methods: { | ||||
| if (obj.isImapReady === false || obj.isLdapReady === false || obj.isVerified === false || obj.isConfirmed === false) { | if (obj.isImapReady === false || obj.isLdapReady === false || obj.isVerified === false || obj.isConfirmed === false) { | ||||
| return this.$t('status.notready') | return this.$t('status.notready') | ||||
| } | } | ||||
| return this.$t('status.active') | return this.$t('status.active') | ||||
| }, | }, | ||||
| // Append some wallet properties to the object | // Append some wallet properties to the object | ||||
| userWalletProps(object) { | userWalletProps(object) { | ||||
| let wallet = store.state.authInfo.accounts[0] | let wallet = this.authInfo.accounts[0] | ||||
| if (!wallet) { | if (!wallet) { | ||||
| wallet = store.state.authInfo.wallets[0] | wallet = this.authInfo.wallets[0] | ||||
| } | } | ||||
| if (wallet) { | if (wallet) { | ||||
| object.currency = wallet.currency | object.currency = wallet.currency | ||||
| if (wallet.discount) { | if (wallet.discount) { | ||||
| object.discount = wallet.discount | object.discount = wallet.discount | ||||
| object.discount_description = wallet.discount_description | object.discount_description = wallet.discount_description | ||||
| } | } | ||||
| ▲ Show 20 Lines • Show All 131 Lines • Show Last 20 Lines | |||||