73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<b-navbar toggleable="sm" type="dark" variant="dark" fixed="top">
|
|
|
|
<b-navbar-brand>
|
|
<b>onSpot</b>
|
|
</b-navbar-brand>
|
|
|
|
|
|
<b-navbar-toggle target="nav-text-collapse"></b-navbar-toggle>
|
|
|
|
<b-collapse id="nav-text-collapse" is-nav>
|
|
|
|
<b-navbar-nav>
|
|
<b-nav-item v-if="$store.getters.isLoggedIn" to="/">My Collections</b-nav-item>
|
|
<b-nav-item v-else to="/login">Login</b-nav-item>
|
|
<b-nav-item to="/about">About</b-nav-item>
|
|
</b-navbar-nav>
|
|
|
|
|
|
<b-navbar-nav class="ml-auto" v-if="$store.getters.isLoggedIn">
|
|
<b-nav-item-dropdown right no-caret>
|
|
<template #button-content>
|
|
<b-icon icon="person-fill"/>
|
|
{{ $store.state.userdata.name }}
|
|
</template>
|
|
<b-overlay :show="logoutProcessing">
|
|
|
|
<b-dropdown-text>Logged in to...</b-dropdown-text>
|
|
<b-dropdown-text>
|
|
<b-img src="@/assets/musicbrainz.svg" width="200px"/>
|
|
</b-dropdown-text>
|
|
<b-dropdown-divider></b-dropdown-divider>
|
|
<b-dropdown-item @click="performLogout">Logout</b-dropdown-item>
|
|
|
|
</b-overlay>
|
|
</b-nav-item-dropdown>
|
|
</b-navbar-nav>
|
|
|
|
|
|
</b-collapse>
|
|
</b-navbar>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Navbar",
|
|
data() {
|
|
return {
|
|
logoutProcessing: false
|
|
}
|
|
},
|
|
methods: {
|
|
performLogout() {
|
|
this.logoutProcessing = true;
|
|
this.$api.performLogout().then(() => {
|
|
this.$store.dispatch('storeUserData', null).then(() => {
|
|
this.$router.push('/login').catch(() => {
|
|
});
|
|
|
|
this.logoutProcessing = false;
|
|
})
|
|
}).catch(({text}) => {
|
|
this.$showToast(text);
|
|
this.logoutProcessing = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |