Page MenuHomePhorge
Files F117768624

D2014.1775235417.diff
No OneTemporary
Actions

Authored By
Unknown
Size
16 KB
Referenced Files
None
Subscribers
None

D2014.1775235417.diff
View Options

diff --git a/src/app/Utils.php b/src/app/Utils.php
--- a/src/app/Utils.php
+++ b/src/app/Utils.php
@@ -382,10 +382,7 @@
$env['view'] = 'root';
$env['jsapp'] = 'user.js';
- if ($path == 'meet' || strpos($path, 'meet/') === 0) {
- $env['view'] = 'meet';
- $env['jsapp'] = 'meet.js';
- } elseif ($req_domain == "admin.$sys_domain") {
+ if ($req_domain == "admin.$sys_domain") {
$env['jsapp'] = 'admin.js';
}
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -13,6 +13,61 @@
const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="sr-only">Loading</span></div></div>'
+let isLoading = 0
+
+// Lock the UI with the 'loading...' element
+const startLoading = () => {
+ isLoading++
+ let loading = $('#app > .app-loader').removeClass('fadeOut')
+ if (!loading.length) {
+ $('#app').append($(loader))
+ }
+}
+
+// Hide "loading" overlay
+const stopLoading = () => {
+ if (isLoading > 0) {
+ $('#app > .app-loader').addClass('fadeOut')
+ isLoading--;
+ }
+}
+
+let loadingRoute
+
+// Note: This has to be before the app is created
+// Note: You cannot use app inside of the function
+window.router.beforeEach((to, from, next) => {
+ // check if the route requires authentication and user is not logged in
+ if (to.matched.some(route => route.meta.requiresAuth) && !store.state.isLoggedIn) {
+ // remember the original request, to use after login
+ store.state.afterLogin = to;
+
+ // redirect to login page
+ next({ name: 'login' })
+
+ return
+ }
+
+ if (to.meta.loading) {
+ startLoading()
+ loadingRoute = to.name
+ }
+
+ next()
+})
+
+window.router.afterEach((to, from) => {
+ if (to.name && loadingRoute === to.name) {
+ stopLoading()
+ loadingRoute = null
+ }
+
+ // When changing a page remove old:
+ // - error page
+ // - modal backdrop
+ $('#error-page,.modal-backdrop.show').remove()
+})
+
const app = new Vue({
el: '#app',
components: {
@@ -23,7 +78,6 @@
router: window.router,
data() {
return {
- isLoading: true,
isAdmin: window.isAdmin
}
},
@@ -119,18 +173,10 @@
removeLoader(elem) {
$(elem).find('.app-loader').remove()
},
- startLoading() {
- this.isLoading = true
- // Lock the UI with the 'loading...' element
- let loading = $('#app > .app-loader').removeClass('fadeOut')
- if (!loading.length) {
- $('#app').append($(loader))
- }
- },
- // Hide "loading" overlay
- stopLoading() {
- $('#app > .app-loader').addClass('fadeOut')
- this.isLoading = false
+ startLoading,
+ stopLoading,
+ isLoading() {
+ return isLoading > 0
},
errorPage(code, msg) {
// Until https://github.com/vuejs/vue-router/issues/977 is implemented
@@ -417,13 +463,3 @@
return Promise.reject(error)
}
)
-
-// TODO: Investigate if we can use App component's childMounted() method instead
-window.router.afterEach((to, from) => {
- // When changing a page remove old:
- // - error page
- // - modal backdrop
- $('#error-page,.modal-backdrop.show').remove()
-
- app.updateBodyClass()
-})
diff --git a/src/resources/js/bootstrap.js b/src/resources/js/bootstrap.js
--- a/src/resources/js/bootstrap.js
+++ b/src/resources/js/bootstrap.js
@@ -68,21 +68,6 @@
}
})
-router.beforeEach((to, from, next) => {
- // check if the route requires authentication and user is not logged in
- if (to.matched.some(route => route.meta.requiresAuth) && !store.state.isLoggedIn) {
- // remember the original request, to use after login
- store.state.afterLogin = to;
-
- // redirect to login page
- next({ name: 'login' })
-
- return
- }
-
- next()
-})
-
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
diff --git a/src/resources/js/meet.js b/src/resources/js/meet.js
deleted file mode 100644
--- a/src/resources/js/meet.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Application code for the Meet UI
- */
-
-import routes from './routes-meet.js'
-
-window.routes = routes
-window.isAdmin = false
-
-require('./app')
-
-// Register additional icons
-import { library } from '@fortawesome/fontawesome-svg-core'
-
-import {
- faAlignLeft,
- faCompress,
- faDesktop,
- faExpand,
- faMicrophone,
- faPowerOff,
- faUser,
- faShieldAlt,
- faVideo,
- faVolumeMute
-} from '@fortawesome/free-solid-svg-icons'
-
-// Register only these icons we need
-library.add(
- faAlignLeft,
- faCompress,
- faDesktop,
- faExpand,
- faMicrophone,
- faPowerOff,
- faUser,
- faShieldAlt,
- faVideo,
- faVolumeMute
-)
diff --git a/src/resources/js/routes-meet.js b/src/resources/js/routes-meet.js
deleted file mode 100644
--- a/src/resources/js/routes-meet.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import PageComponent from '../vue/Page'
-import LogoutComponent from '../vue/Logout'
-import RoomComponent from '../vue/Meet/Room'
-
-const routes = [
- {
- component: LogoutComponent,
- name: 'logout',
- path: '/logout'
- },
- {
- component: RoomComponent,
- name: 'room',
- path: '/meet/:room'
- },
- {
- component: PageComponent,
- name: '404',
- path: '*'
- }
-]
-
-export default routes
diff --git a/src/resources/js/routes-user.js b/src/resources/js/routes-user.js
--- a/src/resources/js/routes-user.js
+++ b/src/resources/js/routes-user.js
@@ -13,6 +13,11 @@
import UserProfileDeleteComponent from '../vue/User/ProfileDelete'
import WalletComponent from '../vue/Wallet'
+// Here's a list of lazy-loaded components
+// Note: you can pack multiple components into the same chunk, webpackChunkName
+// is also used to get a sensible file name instead of numbers
+const RoomComponent = () => import(/* webpackChunkName: "room" */ '../vue/Meet/Room.vue')
+
const routes = [
{
path: '/dashboard',
@@ -59,6 +64,12 @@
component: UserProfileDeleteComponent,
meta: { requiresAuth: true }
},
+ {
+ component: RoomComponent,
+ name: 'room',
+ path: '/meet/:room',
+ meta: { loading: true }
+ },
{
path: '/rooms',
name: 'rooms',
diff --git a/src/resources/views/meet.blade.php b/src/resources/views/meet.blade.php
deleted file mode 100644
--- a/src/resources/views/meet.blade.php
+++ /dev/null
@@ -1,10 +0,0 @@
-@extends('layouts.app')
-@section('title', "Meet")
-@section('content')
-<div id="app">
- <menu-component mode="header"></menu-component>
- <app-component></app-component>
- <div class="filler"></div>
- <menu-component mode="footer" footer="{{ config('app.company.footer') }}"></menu-component>
-</div>
-@endsection
diff --git a/src/resources/vue/Admin/Dashboard.vue b/src/resources/vue/Admin/Dashboard.vue
--- a/src/resources/vue/Admin/Dashboard.vue
+++ b/src/resources/vue/Admin/Dashboard.vue
@@ -1,5 +1,5 @@
<template>
- <div v-if="!$root.isLoading" class="container" dusk="dashboard-component">
+ <div class="container" dusk="dashboard-component">
<div id="search-box" class="card">
<div class="card-body">
<form @submit.prevent="searchUser" class="row justify-content-center">
@@ -58,20 +58,7 @@
}
},
mounted() {
- const authInfo = this.$store.state.isLoggedIn ? this.$store.state.authInfo : null
-
- if (authInfo) {
- $('#search-box input').focus()
- } else {
- this.$root.startLoading()
- axios.get('/api/auth/info')
- .then(response => {
- this.$store.state.authInfo = response.data
- this.$root.stopLoading()
- setTimeout(() => { $('#search-box input').focus() }, 10)
- })
- .catch(this.$root.errorHandler)
- }
+ $('#search-box input').focus()
},
methods: {
searchUser() {
diff --git a/src/resources/vue/App.vue b/src/resources/vue/App.vue
--- a/src/resources/vue/App.vue
+++ b/src/resources/vue/App.vue
@@ -32,13 +32,11 @@
})
.catch(error => {
// Release lock on the router-view, otherwise links (e.g. Logout) will not work
- // FIXME: This causes dashboard to call /api/auth/info again
this.isLoading = false
this.$root.logoutUser(false)
this.$root.errorHandler(error)
})
} else {
- this.$root.stopLoading()
this.isLoading = false
}
},
diff --git a/src/resources/vue/Meet/Room.vue b/src/resources/vue/Meet/Room.vue
--- a/src/resources/vue/Meet/Room.vue
+++ b/src/resources/vue/Meet/Room.vue
@@ -129,6 +129,36 @@
import LogonForm from '../Login'
import SessionSecurityOptions from './SessionSecurityOptions'
+// Register additional icons
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+import {
+ faAlignLeft,
+ faCompress,
+ faDesktop,
+ faExpand,
+ faMicrophone,
+ faPowerOff,
+ faUser,
+ faShieldAlt,
+ faVideo,
+ faVolumeMute
+} from '@fortawesome/free-solid-svg-icons'
+
+// Register only these icons we need
+library.add(
+ faAlignLeft,
+ faCompress,
+ faDesktop,
+ faExpand,
+ faMicrophone,
+ faPowerOff,
+ faUser,
+ faShieldAlt,
+ faVideo,
+ faVolumeMute
+)
+
let roomRequest
export default {
@@ -372,7 +402,7 @@
// FIXME: Where exactly the user should land? Currently he'll land
// on dashboard (if he's logged in) or login form (if he's not).
- window.location = window.config['app.url']
+ this.$router.push({ name: 'dashboard' })
}).modal()
}
}
@@ -389,7 +419,7 @@
const logout = () => {
this.meet.leaveRoom()
this.meet = null
- window.location = window.config['app.url']
+ this.$router.push({ name: 'dashboard' })
}
if (this.session.owner) {
diff --git a/src/resources/vue/Rooms.vue b/src/resources/vue/Rooms.vue
--- a/src/resources/vue/Rooms.vue
+++ b/src/resources/vue/Rooms.vue
@@ -12,7 +12,7 @@
attendance. Use this URL to invite people to join you.
</p>
<p>
- <a v-if="href" :href="href">{{ href }}</a>
+ <router-link v-if="href" :to="roomRoute">{{ href }}</router-link>
</p>
<p>
This is a work in progress and more features will be added over time. Current features include:
@@ -60,7 +60,8 @@
data() {
return {
rooms: [],
- href: ''
+ href: '',
+ roomRoute: ''
}
},
mounted() {
@@ -77,7 +78,8 @@
this.rooms = response.data.list
if (response.data.count) {
- this.href = window.config['app.url'] + '/meet/' + encodeURI(this.rooms[0].name)
+ this.roomRoute = '/meet/' + encodeURI(this.rooms[0].name)
+ this.href = window.config['app.url'] + this.roomRoute
}
})
.catch(this.$root.errorHandler)
diff --git a/src/resources/vue/Widgets/Menu.vue b/src/resources/vue/Widgets/Menu.vue
--- a/src/resources/vue/Widgets/Menu.vue
+++ b/src/resources/vue/Widgets/Menu.vue
@@ -23,19 +23,17 @@
{{ item.title }}
</router-link>
</li>
- <li class="nav-item" v-if="!loggedIn">
- <router-link v-if="!$root.isAdmin && $root.hasRoute('signup')" class="nav-link link-signup" active-class="active" :to="{name: 'signup'}">Signup</router-link>
- <a v-else class="nav-link link-signup" :href="appUrl + '/signup'">Signup</a>
+ <li class="nav-item" v-if="!loggedIn && !$root.isAdmin">
+ <router-link class="nav-link link-signup" active-class="active" :to="{name: 'signup'}">Signup</router-link>
</li>
<li class="nav-item" v-if="loggedIn">
- <router-link v-if="$root.hasRoute('dashboard')" class="nav-link link-dashboard" active-class="active" :to="{name: 'dashboard'}">Cockpit</router-link>
- <a v-else class="nav-link link-dashboard" :href="appUrl + '/dashboard'">Cockpit</a>
+ <router-link class="nav-link link-dashboard" active-class="active" :to="{name: 'dashboard'}">Cockpit</router-link>
</li>
<li class="nav-item" v-if="loggedIn">
<router-link class="nav-link menulogin link-logout" active-class="active" :to="{name: 'logout'}">Logout</router-link>
</li>
<li class="nav-item" v-if="!loggedIn">
- <a class="nav-link menulogin link-login" :href="appUrl + '/login'">Login</a>
+ <router-link class="nav-link menulogin link-login" :to="{name: 'login'}">Login</router-link>
</li>
</ul>
<div v-if="mode == 'footer'" class="footer">
@@ -57,8 +55,7 @@
return {
appName: window.config['app.name'],
appUrl: window.config['app.url'],
- themeDir: '/themes/' + window.config['app.theme'],
- webmailURL: window.config['app.webmail_url']
+ themeDir: '/themes/' + window.config['app.theme']
}
},
computed: {
diff --git a/src/tests/Browser/Admin/LogonTest.php b/src/tests/Browser/Admin/LogonTest.php
--- a/src/tests/Browser/Admin/LogonTest.php
+++ b/src/tests/Browser/Admin/LogonTest.php
@@ -29,7 +29,7 @@
$this->browse(function (Browser $browser) {
$browser->visit(new Home())
->with(new Menu(), function ($browser) {
- $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login']);
+ $browser->assertMenuItems(['explore', 'blog', 'support', 'login']);
})
->assertMissing('@second-factor-input')
->assertMissing('@forgot-password');
@@ -108,7 +108,7 @@
// with default menu
$browser->within(new Menu(), function ($browser) {
- $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login']);
+ $browser->assertMenuItems(['explore', 'blog', 'support', 'login']);
});
// Success toast message
@@ -135,7 +135,7 @@
// with default menu
$browser->within(new Menu(), function ($browser) {
- $browser->assertMenuItems(['signup', 'explore', 'blog', 'support', 'login']);
+ $browser->assertMenuItems(['explore', 'blog', 'support', 'login']);
});
// Success toast message
diff --git a/src/tests/Browser/Pages/Signup.php b/src/tests/Browser/Pages/Signup.php
--- a/src/tests/Browser/Pages/Signup.php
+++ b/src/tests/Browser/Pages/Signup.php
@@ -26,6 +26,7 @@
public function assert($browser)
{
$browser->assertPathIs('/signup')
+ ->waitUntilMissing('.app-loader')
->assertPresent('@step0')
->assertPresent('@step1')
->assertPresent('@step2')
diff --git a/src/webpack.mix.js b/src/webpack.mix.js
--- a/src/webpack.mix.js
+++ b/src/webpack.mix.js
@@ -16,7 +16,14 @@
mix.webpackConfig({
output: {
- publicPath: process.env.MIX_ASSET_PATH
+ publicPath: process.env.MIX_ASSET_PATH,
+ chunkFilename: "js/[name].js"
+ },
+ optimization: {
+ splitChunks: {
+ // disable chunking, so I want room.js include the (default) vendor~room.js
+ maxAsyncRequests: 1
+ }
},
resolve: {
alias: {
@@ -27,7 +34,6 @@
mix.js('resources/js/user.js', 'public/js')
.js('resources/js/admin.js', 'public/js')
- .js('resources/js/meet.js', 'public/js')
glob.sync('resources/themes/*/', {}).forEach(fromDir => {
const toDir = fromDir.replace('resources/themes/', 'public/themes/')

File Metadata

Mime Type
text/plain
Expires
Fri, Apr 3, 4:56 PM (5 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
18824921
Default Alt Text
D2014.1775235417.diff (16 KB)

Event Timeline