Files
onspot-frontend/src/App.vue
2020-11-26 04:44:55 +01:00

92 lines
1.6 KiB
Vue

<template>
<div id="app" v-if="$store.state.appReady">
<navbar/>
<div id="content">
<router-view/>
</div>
<div id="footer">
<footer-nav/>
</div>
</div>
<div id="app-loader" v-else>
<big-chungus-loader id="loading-screen"/>
</div>
</template>
<script>
import FooterNav from "@/components/FooterNav";
import Navbar from "@/components/Navbar";
import BigChungusLoader from "@/components/BigChungusLoader";
export default {
name: "Login",
components: {
Navbar,
FooterNav,
BigChungusLoader
},
created() {
// The basic app is created... Currently showing a loading screen (as soon as mounted)
if (this.$api.haveToken) {
this.$api.getMyInfo().then(({name}) => {
this.$store.dispatch('storeUserData', name).then(() => {
this.$router.push({name: "Collections"}).catch(() => {});
this.$store.dispatch('setAppReady');
});
}).catch(({status, text}) => {
if (status === 401) {
this.$api.clearTokenFromLocalStorage();
this.$router.push('/login').catch(() => {});
this.$store.dispatch('setAppReady');
} else {
this.$showToast(text);
}
});
} else {
this.$router.push('/login').catch(() => {});
this.$store.dispatch('setAppReady');
}
}
}
</script>
<style>
#content {
margin-top: 70px;
margin-bottom: 20px;
}
#app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#footer {
padding: 1em;
margin-top: auto;
background: #E9ECEF;
}
#app-loader {
height: 100%;
}
#loading-screen {
margin: 45vh auto 0 auto;
}
</style>