skillbox/client/src/components/LogoutWidget.vue

45 lines
890 B
Vue

<template>
<div class="logout-widget">
<button class="logout-widget__logout" @click="logout()">Logout</button>
</div>
</template>
<script>
import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
export default {
methods: {
logout() {
this.$apollo.mutate({
mutation: LOGOUT_MUTATION,
}).then(({data}) => {
if (data.logout.success) { location.replace('/') }
});
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.logout-widget {
color: $color-grey;
display: flex;
align-items: center;
&__logout {
font-family: $sans-serif-font-family;
line-height: 16px;
margin: 0 15px 0 20px;
background: none;
color: inherit;
border: none;
padding: 0;
cursor: pointer;
outline: inherit;
}
}
</style>