77 lines
3.0 KiB
Vue
77 lines
3.0 KiB
Vue
<template>
|
||
<v-card class="bg-gradient" style="height: 100%" :class="isWide ? '' : 'd-flex justify-center align-center'">
|
||
<v-card-text class="d-flex justify-center align-center">
|
||
<v-card class="align-center justify-center h-auto w-66 card-bg" :class="isWide ? 'w-66' : 'w-100'">
|
||
<v-card-title class="d-flex justify-space-between" :class="isWide ? '' : 'text-subtitle-1'">
|
||
<div v-if="isWide">
|
||
<!-- Добро пожаловать в <router-link :to="isAuthenticated ? '/wishlist' : '/auth_options'" class="link-no-decor">Wishlist</router-link>, {{ isAuthenticated ? user['name'] : 'Гость' }}! -->
|
||
<span>Добро пожаловать в </span>
|
||
<span><router-link :to="isAuthenticated ? '/wishlist' : '/auth_options'" class="link-no-decor">Wishlist</router-link>, </span>
|
||
<span v-if="isAuthenticated">{{ this.user['name'] }}!</span>
|
||
<span v-else>Гость!</span>
|
||
</div>
|
||
<div v-if="!isWide">
|
||
<p>Добро пожаловать в</p>
|
||
<p><router-link :to="isAuthenticated ? '/wishlist' : '/auth_options'" class="link-no-decor">Wishlist</router-link>, {{ isAuthenticated ? user['name'] : 'Гость' }}!</p>
|
||
</div>
|
||
<span v-if="isAuthenticated" class="link-no-decor align-end" @click="logout">Выйти</span>
|
||
</v-card-title>
|
||
<v-card-text class="d-flex justify-center align-center">
|
||
<v-skeleton-loader class="w-100" color="grey-darken-4" type="card" v-if="fetchingUser"></v-skeleton-loader>
|
||
<router-view v-else/>
|
||
</v-card-text>
|
||
</v-card>
|
||
</v-card-text>
|
||
</v-card>
|
||
</template>
|
||
|
||
<script>
|
||
import {useUserStore} from "../store/user.js";
|
||
import {watch} from "vue";
|
||
export default {
|
||
name: "Welcome",
|
||
data: () => ({
|
||
isAuthenticated: false,
|
||
userStore: useUserStore(),
|
||
fetchingUser: false,
|
||
isWide: window.innerWidth >= 800
|
||
}),
|
||
computed: {
|
||
user() {
|
||
return this.userStore.user;
|
||
},
|
||
},
|
||
methods: {
|
||
async logout() {
|
||
this.userStore.logout();
|
||
this.$router.push('/auth_options');
|
||
}
|
||
},
|
||
mounted() {
|
||
this.fetchingUser = true;
|
||
this.$router.push('/auth_options');
|
||
watch(this.userStore, (newStore, oldStore)=>{
|
||
this.isAuthenticated = newStore.user !== null && newStore.user !== undefined;
|
||
this.fetchingUser = false;
|
||
if (this.isAuthenticated) {
|
||
this.$router.push('/wishlist');
|
||
} else {
|
||
this.$router.push('/auth_options');
|
||
}
|
||
});
|
||
this.userStore.checkUser();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped>
|
||
|
||
.bg-gradient {
|
||
background: linear-gradient(-45deg, #000610, #000f25, #00152f);
|
||
background-size: 100% 100%;
|
||
height: 100vh;
|
||
}
|
||
|
||
</style>
|