vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Move not authenticated content to separate component

This commit is contained in:
kolaente 2020-11-01 17:13:45 +01:00
parent 64a2720ad0
commit 6bc16556cc
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.vue
View File

@ -1,27 +1,14 @@
<template>
<div>
<div v-if="online">
<template v-if="online">
<!-- 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)"/>
<content-auth v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)"/>
<content-link-share v-else-if="userAuthenticated && (userInfo && userInfo.type === authTypes.LINK_SHARE)"/>
<div v-else>
<div class="noauth-container">
<img alt="Vikunja" src="/images/logo-full.svg"/>
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>Info</p>
</div>
<div class="message-body">
{{ motd }}
</div>
</div>
<router-view/>
</div>
</div>
<content-no-auth v-else/>
<notification/>
</div>
</template>
<div class="app offline" v-else>
<div class="offline-message">
<h1>You are offline.</h1>
@ -48,10 +35,12 @@ import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
import TopNavigation from '@/components/home/topNavigation'
import ContentAuth from '@/components/home/contentAuth'
import ContentLinkShare from '@/components/home/contentLinkShare'
import ContentNoAuth from '@/components/home/contentNoAuth'
export default {
name: 'app',
components: {
ContentNoAuth,
ContentLinkShare,
ContentAuth,
TopNavigation,

25
src/components/home/contentNoAuth.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<div class="noauth-container">
<img alt="Vikunja" src="/images/logo-full.svg"/>
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>Info</p>
</div>
<div class="message-body">
{{ motd }}
</div>
</div>
<router-view/>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'contentNoAuth',
computed: mapState({
motd: state => state.config.motd,
}),
}
</script>