feat: add error handling when calling the api failed
This commit is contained in:
parent
dc30de9176
commit
e2cc505564
|
@ -1,40 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="no-auth-wrapper">
|
<no-auth-wrapper>
|
||||||
<div class="noauth-container">
|
<router-view/>
|
||||||
<img alt="Vikunja" :src="logoUrl" width="400" height="117" />
|
</no-auth-wrapper>
|
||||||
<div class="message is-info" v-if="motd !== ''">
|
|
||||||
<div class="message-header">
|
|
||||||
<p>{{ $t('misc.info') }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="message-body">
|
|
||||||
{{ motd }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<router-view/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from 'vuex'
|
import {saveLastVisited} from '@/helpers/saveLastVisited'
|
||||||
|
import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
|
||||||
import logoUrl from '@/assets/logo-full.svg'
|
|
||||||
import { saveLastVisited } from '@/helpers/saveLastVisited'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'contentNoAuth',
|
name: 'contentNoAuth',
|
||||||
data() {
|
components: {NoAuthWrapper},
|
||||||
return {
|
|
||||||
logoUrl,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
routeName() {
|
routeName() {
|
||||||
return this.$route.name
|
return this.$route.name
|
||||||
},
|
},
|
||||||
...mapState({
|
|
||||||
motd: state => state.config.motd,
|
|
||||||
}),
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
routeName: {
|
routeName: {
|
||||||
|
@ -65,17 +45,3 @@ export default {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.no-auth-wrapper {
|
|
||||||
background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noauth-container {
|
|
||||||
max-width: 450px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -70,30 +70,45 @@ export default {
|
||||||
return parseURL(this.apiUrl).host
|
return parseURL(this.apiUrl).host
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
props: {
|
||||||
|
configureOpen: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
configureOpen: {
|
||||||
|
handler(value) {
|
||||||
|
this.configureApi = value
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setApiUrl() {
|
async setApiUrl() {
|
||||||
if (this.apiUrl === '') {
|
if (this.apiUrl === '') {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
checkAndSetApiUrl(this.apiUrl, () => this.$store.dispatch('config/update'))
|
try {
|
||||||
.catch(() => {
|
const url = await checkAndSetApiUrl(this.apiUrl, () => this.$store.dispatch('config/update'))
|
||||||
// Still not found, url is still invalid
|
|
||||||
this.successMsg = ''
|
|
||||||
this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain})
|
|
||||||
})
|
|
||||||
.then(url => {
|
|
||||||
if (url === '') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set it + save it to local storage to save us the hoops
|
if (url === '') {
|
||||||
this.errorMsg = ''
|
return
|
||||||
this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain})
|
}
|
||||||
this.configureApi = false
|
|
||||||
this.apiUrl = url
|
// Set it + save it to local storage to save us the hoops
|
||||||
this.$emit('foundApi', this.apiUrl)
|
this.errorMsg = ''
|
||||||
})
|
this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain})
|
||||||
|
this.configureApi = false
|
||||||
|
this.apiUrl = url
|
||||||
|
this.$emit('foundApi', this.apiUrl)
|
||||||
|
} catch (e) {
|
||||||
|
// Still not found, url is still invalid
|
||||||
|
this.successMsg = ''
|
||||||
|
this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
47
src/components/misc/no-auth-wrapper.vue
Normal file
47
src/components/misc/no-auth-wrapper.vue
Normal file
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<div class="no-auth-wrapper">
|
||||||
|
<div class="noauth-container">
|
||||||
|
<img alt="Vikunja" :src="logoUrl" width="400" height="117"/>
|
||||||
|
<div class="message is-info" v-if="motd !== ''">
|
||||||
|
<div class="message-header">
|
||||||
|
<p>{{ $t('misc.info') }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="message-body">
|
||||||
|
{{ motd }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import logoUrl from '@/assets/logo-full.svg'
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'no-auth-wrapper',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
logoUrl,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: mapState({
|
||||||
|
motd: state => state.config.motd,
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.no-auth-wrapper {
|
||||||
|
background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noauth-container {
|
||||||
|
max-width: 450px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -3,23 +3,41 @@
|
||||||
<slot/>
|
<slot/>
|
||||||
</template>
|
</template>
|
||||||
<section v-else-if="error !== ''">
|
<section v-else-if="error !== ''">
|
||||||
{{ error }}
|
<no-auth-wrapper>
|
||||||
|
<card>
|
||||||
|
<div class="notification is-danger">
|
||||||
|
<p>
|
||||||
|
{{ $t('ready.errorOccured') }}<br/>
|
||||||
|
{{ error }}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{{ $t('ready.checkApiUrl') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<api-config :configure-open="true" @found-api="load"/>
|
||||||
|
</card>
|
||||||
|
</no-auth-wrapper>
|
||||||
</section>
|
</section>
|
||||||
<section class="vikunja-loading" v-else>
|
<section class="vikunja-loading" v-else>
|
||||||
<img alt="Vikunja" :src="logoUrl" width="100" height="100"/>
|
<img alt="Vikunja" :src="logoUrl" width="100" height="100"/>
|
||||||
<p>
|
<p>
|
||||||
<span class="loader-container is-loading-small is-loading"></span>
|
<span class="loader-container is-loading-small is-loading"></span>
|
||||||
{{ $t('home.vikunjaLoading') }}
|
{{ $t('ready.loading') }}
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import logoUrl from '@/assets/logo.svg'
|
import logoUrl from '@/assets/logo.svg'
|
||||||
import {setLanguage} from '@/i18n'
|
import ApiConfig from '@/components/misc/api-config'
|
||||||
|
import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ready',
|
name: 'ready',
|
||||||
|
components: {
|
||||||
|
NoAuthWrapper,
|
||||||
|
ApiConfig,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
logoUrl,
|
logoUrl,
|
||||||
|
@ -27,16 +45,21 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.dispatch('loadApp')
|
this.load()
|
||||||
.catch(e => {
|
|
||||||
this.error = e
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
ready() {
|
ready() {
|
||||||
return this.$store.state.vikunjaReady
|
return this.$store.state.vikunjaReady
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
load() {
|
||||||
|
this.$store.dispatch('loadApp')
|
||||||
|
.catch(e => {
|
||||||
|
this.error = e
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
{
|
{
|
||||||
"home": {
|
"home": {
|
||||||
"vikunjaLoading": "Vikunja is loading…",
|
|
||||||
"welcomeNight": "Good Night {username}",
|
"welcomeNight": "Good Night {username}",
|
||||||
"welcomeMorning": "Good Morning {username}",
|
"welcomeMorning": "Good Morning {username}",
|
||||||
"welcomeDay": "Hi {username}",
|
"welcomeDay": "Hi {username}",
|
||||||
|
@ -17,6 +16,11 @@
|
||||||
"title": "Not found",
|
"title": "Not found",
|
||||||
"text": "The page you requested does not exist."
|
"text": "The page you requested does not exist."
|
||||||
},
|
},
|
||||||
|
"ready": {
|
||||||
|
"loading": "Vikunja is loading…",
|
||||||
|
"errorOccured": "An error occured:",
|
||||||
|
"checkApiUrl": "Please check if the api url is correct below."
|
||||||
|
},
|
||||||
"user": {
|
"user": {
|
||||||
"auth": {
|
"auth": {
|
||||||
"username": "Username",
|
"username": "Username",
|
||||||
|
@ -777,7 +781,7 @@
|
||||||
"urlPlaceholder": "eg. https://localhost:3456",
|
"urlPlaceholder": "eg. https://localhost:3456",
|
||||||
"change": "change",
|
"change": "change",
|
||||||
"signInOn": "Sign in to your Vikunja account on {0}",
|
"signInOn": "Sign in to your Vikunja account on {0}",
|
||||||
"error": "Could not find or use Vikunja installation at \"{domain}\".",
|
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
|
||||||
"success": "Using Vikunja installation at \"{domain}\"."
|
"success": "Using Vikunja installation at \"{domain}\"."
|
||||||
},
|
},
|
||||||
"loadingError": {
|
"loadingError": {
|
||||||
|
|
Reference in New Issue
Block a user