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:
Lance Edgar 2022-08-26 17:56:31 -05:00
parent 2a1f5764a1
commit 721600b12d
7 changed files with 93 additions and 7 deletions

View file

@ -42,7 +42,7 @@ export default {
this.$http.get('/api/session').then(response => {
// 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_ROOT', response.data.user ? response.data.user.is_root : false)

View 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>

View 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

View file

@ -1,5 +1,6 @@
import ByjoveApp from './app'
import ByjoveMenu from './menu'
import ByjoveHome from './home'
import ByjoveLogo from './logo'
import ByjoveFeedback from './feedback'
import ByjoveLogin from './login'
@ -13,6 +14,7 @@ import ByjoveReceiving from './receiving'
export {
ByjoveApp,
ByjoveMenu,
ByjoveHome,
ByjoveLogo,
ByjoveFeedback,
ByjoveLogin,

View file

@ -80,7 +80,7 @@ export default {
this.inited = true
// send logged-in users to "home" page
if (this.$store.state.user) {
if (this.$store.state.user.uuid) {
this.$router.push('/')
}
},
@ -99,7 +99,8 @@ export default {
if (response.data.ok) {
// login successful; let the app know
this.$loginUser(response.data.user)
this.$byjoveLoginUser(response.data.user,
response.data.permissions)
// send user to "home" page
this.$router.push('/')

View file

@ -2,7 +2,7 @@
<section>
<nav class="level is-mobile">
<div v-if="user"
<div v-if="user.uuid"
class="level-item">
<b-dropdown aria-role="menu">
@ -43,7 +43,7 @@
</b-dropdown>
</div>
<div v-if="!user && showLoginButton"
<div v-if="!user.uuid && showLoginButton"
class="level-item">
<b-button type="is-primary"
tag="router-link" to="/login">
@ -137,7 +137,7 @@ export default {
if (this.allowFeedback !== null) {
return this.allowFeedback
}
if (!this.allowAnonymousFeedback && !this.user) {
if (!this.allowAnonymousFeedback && !this.user.uuid) {
return false
}
return true

View file

@ -25,7 +25,7 @@ export function ByjovePlugin(Vue) {
$byjoveLogoutUser() {
// 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_ROOT', false)
},