74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
<template>
|
|
<main>
|
|
<Layout class="layout">
|
|
<Menu theme="light" mode="horizontal">
|
|
<MenuItem v-if="!hasUser" name="user">
|
|
<span @click="() => { doLogin(); }">Login</span>
|
|
</MenuItem>
|
|
<Submenu v-if="hasUser" name="user">
|
|
<template slot="title">
|
|
<Avatar :src="user.picture" />
|
|
{{ user.name }}
|
|
</template>
|
|
<nuxt-link to="/logout/">
|
|
<DropdownItem>
|
|
Log out
|
|
</DropdownItem>
|
|
</nuxt-link>
|
|
</Submenu>
|
|
</Menu>
|
|
<Content>
|
|
<nuxt />
|
|
</Content>
|
|
</Layout>
|
|
</main>
|
|
</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>
|