Add home page component; fix user state issues
must be sure to keep "anonymous" user represented as {} instead of null, otherwise getting errors. this also fixes the menu upon user login; previously it wasn't showing most options
This commit is contained in:
parent
2a1f5764a1
commit
721600b12d
|
@ -42,7 +42,7 @@ export default {
|
||||||
this.$http.get('/api/session').then(response => {
|
this.$http.get('/api/session').then(response => {
|
||||||
|
|
||||||
// let all of app know who the user is(n't)
|
// let all of app know who the user is(n't)
|
||||||
this.$store.commit('SET_USER', response.data.user)
|
this.$store.commit('SET_USER', response.data.user || {})
|
||||||
this.$store.commit('SET_USER_IS_ADMIN', response.data.user ? response.data.user.is_admin : false)
|
this.$store.commit('SET_USER_IS_ADMIN', response.data.user ? response.data.user.is_admin : false)
|
||||||
this.$store.commit('SET_USER_IS_ROOT', response.data.user ? response.data.user.is_root : false)
|
this.$store.commit('SET_USER_IS_ROOT', response.data.user ? response.data.user.is_root : false)
|
||||||
|
|
||||||
|
|
55
src/components/home/ByjoveHome.vue
Normal file
55
src/components/home/ByjoveHome.vue
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<img :alt="`${appsettings.systemTitle} logo`" :src="appsettings.logo" />
|
||||||
|
<h1>Welcome to {{ appsettings.appTitle }}</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ByjoveHome',
|
||||||
|
props: {
|
||||||
|
appsettings: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
forceLogin: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inited: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'$store.state.session_established': 'init',
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
if (this.inited) return
|
||||||
|
|
||||||
|
// nothing to check, unless login is to be enforced
|
||||||
|
if (!this.forceLogin) {
|
||||||
|
this.inited = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// cannot init until session is established
|
||||||
|
if (!this.$store.state.session_established) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.inited = true
|
||||||
|
|
||||||
|
// send anonymous users to login page
|
||||||
|
if (!this.$store.state.user.uuid) {
|
||||||
|
this.$router.push('/login')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
28
src/components/home/index.js
Normal file
28
src/components/home/index.js
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
// Import vue component
|
||||||
|
import ByjoveHome from './ByjoveHome.vue'
|
||||||
|
|
||||||
|
// Declare install function executed by Vue.use()
|
||||||
|
export function install(Vue) {
|
||||||
|
if (install.installed) return;
|
||||||
|
install.installed = true;
|
||||||
|
Vue.component('ByjoveHome', ByjoveHome);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create module definition for Vue.use()
|
||||||
|
const plugin = {
|
||||||
|
install,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Auto-install when vue is found (eg. in browser via <script> tag)
|
||||||
|
let GlobalVue = null;
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
GlobalVue = window.Vue;
|
||||||
|
} else if (typeof global !== 'undefined') {
|
||||||
|
GlobalVue = global.Vue;
|
||||||
|
}
|
||||||
|
if (GlobalVue) {
|
||||||
|
GlobalVue.use(plugin);
|
||||||
|
}
|
||||||
|
|
||||||
|
// To allow use as module (npm/webpack/etc.) export component
|
||||||
|
export default ByjoveHome
|
|
@ -1,5 +1,6 @@
|
||||||
import ByjoveApp from './app'
|
import ByjoveApp from './app'
|
||||||
import ByjoveMenu from './menu'
|
import ByjoveMenu from './menu'
|
||||||
|
import ByjoveHome from './home'
|
||||||
import ByjoveLogo from './logo'
|
import ByjoveLogo from './logo'
|
||||||
import ByjoveFeedback from './feedback'
|
import ByjoveFeedback from './feedback'
|
||||||
import ByjoveLogin from './login'
|
import ByjoveLogin from './login'
|
||||||
|
@ -13,6 +14,7 @@ import ByjoveReceiving from './receiving'
|
||||||
export {
|
export {
|
||||||
ByjoveApp,
|
ByjoveApp,
|
||||||
ByjoveMenu,
|
ByjoveMenu,
|
||||||
|
ByjoveHome,
|
||||||
ByjoveLogo,
|
ByjoveLogo,
|
||||||
ByjoveFeedback,
|
ByjoveFeedback,
|
||||||
ByjoveLogin,
|
ByjoveLogin,
|
||||||
|
|
|
@ -80,7 +80,7 @@ export default {
|
||||||
this.inited = true
|
this.inited = true
|
||||||
|
|
||||||
// send logged-in users to "home" page
|
// send logged-in users to "home" page
|
||||||
if (this.$store.state.user) {
|
if (this.$store.state.user.uuid) {
|
||||||
this.$router.push('/')
|
this.$router.push('/')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -99,7 +99,8 @@ export default {
|
||||||
if (response.data.ok) {
|
if (response.data.ok) {
|
||||||
|
|
||||||
// login successful; let the app know
|
// login successful; let the app know
|
||||||
this.$loginUser(response.data.user)
|
this.$byjoveLoginUser(response.data.user,
|
||||||
|
response.data.permissions)
|
||||||
|
|
||||||
// send user to "home" page
|
// send user to "home" page
|
||||||
this.$router.push('/')
|
this.$router.push('/')
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<section>
|
<section>
|
||||||
<nav class="level is-mobile">
|
<nav class="level is-mobile">
|
||||||
|
|
||||||
<div v-if="user"
|
<div v-if="user.uuid"
|
||||||
class="level-item">
|
class="level-item">
|
||||||
|
|
||||||
<b-dropdown aria-role="menu">
|
<b-dropdown aria-role="menu">
|
||||||
|
@ -43,7 +43,7 @@
|
||||||
</b-dropdown>
|
</b-dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="!user && showLoginButton"
|
<div v-if="!user.uuid && showLoginButton"
|
||||||
class="level-item">
|
class="level-item">
|
||||||
<b-button type="is-primary"
|
<b-button type="is-primary"
|
||||||
tag="router-link" to="/login">
|
tag="router-link" to="/login">
|
||||||
|
@ -137,7 +137,7 @@ export default {
|
||||||
if (this.allowFeedback !== null) {
|
if (this.allowFeedback !== null) {
|
||||||
return this.allowFeedback
|
return this.allowFeedback
|
||||||
}
|
}
|
||||||
if (!this.allowAnonymousFeedback && !this.user) {
|
if (!this.allowAnonymousFeedback && !this.user.uuid) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
return true
|
return true
|
||||||
|
|
|
@ -25,7 +25,7 @@ export function ByjovePlugin(Vue) {
|
||||||
$byjoveLogoutUser() {
|
$byjoveLogoutUser() {
|
||||||
|
|
||||||
// remove user info from app store
|
// remove user info from app store
|
||||||
this.$store.commit('SET_USER', null)
|
this.$store.commit('SET_USER', {})
|
||||||
this.$store.commit('SET_USER_IS_ADMIN', false)
|
this.$store.commit('SET_USER_IS_ADMIN', false)
|
||||||
this.$store.commit('SET_USER_IS_ROOT', false)
|
this.$store.commit('SET_USER_IS_ROOT', false)
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue