Move authenticated stuff to separate component
This commit is contained in:
parent
49dc828abe
commit
c7c8390d1f
35
src/App.vue
35
src/App.vue
|
@ -4,36 +4,7 @@
|
|||
<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
|
||||
<div class="offline" style="height: 0;width: 0;"></div>
|
||||
<top-navigation v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)"/>
|
||||
<div v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
|
||||
<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
|
||||
<icon icon="times"></icon>
|
||||
</a>
|
||||
<div
|
||||
:class="{'has-background': background}"
|
||||
:style="{'background-image': `url(${background})`}"
|
||||
class="app-container"
|
||||
>
|
||||
<navigation/>
|
||||
<div
|
||||
:class="[
|
||||
{
|
||||
'fullpage-overlay': fullpage,
|
||||
'is-menu-enabled': menuActive,
|
||||
},
|
||||
$route.name,
|
||||
]"
|
||||
class="app-content"
|
||||
>
|
||||
<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
|
||||
<transition name="fade">
|
||||
<router-view/>
|
||||
</transition>
|
||||
<a @click="$store.commit('keyboardShortcutsActive', true)" class="keyboard-shortcuts-button">
|
||||
<icon icon="keyboard"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<content-auth v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)"/>
|
||||
<div
|
||||
:class="{'has-background': background}"
|
||||
:style="{'background-image': `url(${background})`}"
|
||||
|
@ -102,12 +73,12 @@ import Notification from './components/misc/notification'
|
|||
import {CURRENT_LIST, IS_FULLPAGE, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE, ONLINE} from './store/mutation-types'
|
||||
import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
|
||||
import TopNavigation from '@/components/home/topNavigation'
|
||||
import Navigation from '@/components/home/navigation'
|
||||
import ContentAuth from '@/components/home/contentAuth'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
Navigation,
|
||||
ContentAuth,
|
||||
TopNavigation,
|
||||
KeyboardShortcuts,
|
||||
Notification,
|
||||
|
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<div>
|
||||
<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
|
||||
<icon icon="times"></icon>
|
||||
</a>
|
||||
<div
|
||||
:class="{'has-background': background}"
|
||||
:style="{'background-image': `url(${background})`}"
|
||||
class="app-container"
|
||||
>
|
||||
<navigation/>
|
||||
<div
|
||||
:class="[
|
||||
{
|
||||
'fullpage-overlay': fullpage,
|
||||
'is-menu-enabled': menuActive,
|
||||
},
|
||||
$route.name,
|
||||
]"
|
||||
class="app-content"
|
||||
>
|
||||
<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
|
||||
<transition name="fade">
|
||||
<router-view/>
|
||||
</transition>
|
||||
<a @click="$store.commit('keyboardShortcutsActive', true)" class="keyboard-shortcuts-button">
|
||||
<icon icon="keyboard"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
|
||||
import Navigation from '@/components/home/navigation'
|
||||
|
||||
export default {
|
||||
name: 'contentAuth',
|
||||
components: {Navigation},
|
||||
computed: mapState({
|
||||
fullpage: IS_FULLPAGE,
|
||||
namespaces(state) {
|
||||
return state.namespaces.namespaces.filter(n => !n.isArchived)
|
||||
},
|
||||
currentList: CURRENT_LIST,
|
||||
background: 'background',
|
||||
menuActive: MENU_ACTIVE,
|
||||
}),
|
||||
}
|
||||
</script>
|
Reference in New Issue