77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
<template>
|
|
<v-app>
|
|
<!--<v-navigation-drawer app></v-navigation-drawer>-->
|
|
<v-toolbar app>
|
|
<v-toolbar-title>
|
|
<span v-if="!hasUser"><span @click="() => { doLogin(); }">Login</span></span>
|
|
<v-menu v-if="hasUser" offset-y>
|
|
<v-btn flat slot="activator" color="primary">
|
|
<v-avatar size="24" class="mr-2"><v-img :src="user.picture" /></v-avatar>
|
|
<span>{{user.name}}</span>
|
|
</v-btn>
|
|
<v-list>
|
|
<v-list-tile>
|
|
<v-list-tile-title flat><nuxt-link to="/logout/">Logga ut</nuxt-link></v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
</v-toolbar>
|
|
<v-content>
|
|
<v-container fluid>
|
|
<nuxt />
|
|
</v-container>
|
|
</v-content>
|
|
<v-footer app></v-footer>
|
|
</v-app>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
// We need this line to import all global styling
|
|
@import "assets/scss/global.scss";
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.layout {
|
|
background-color: white;
|
|
|
|
.log-out {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import auth from "~/utils/auth";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
user: undefined
|
|
};
|
|
},
|
|
computed: {
|
|
hasUser() {
|
|
return this.user;
|
|
}
|
|
},
|
|
watch: {
|
|
"$route.path"() {
|
|
this.fetchUser();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchUser();
|
|
},
|
|
methods: {
|
|
fetchUser() {
|
|
this.user = auth.getUserInfo();
|
|
},
|
|
doLogin() {
|
|
auth.triggerLogin({ returnUrl: this.$route.fullPath });
|
|
}
|
|
}
|
|
};
|
|
</script>
|