Move authenticated stuff to separate component

This commit is contained in:
kolaente 2020-11-01 17:06:37 +01:00
parent 49dc828abe
commit c7c8390d1f
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 55 additions and 32 deletions

View File

@ -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,

View File

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