Hornwitser
52dfde95d1
If a user logs out from a device the expectation should be that device no longer having any association with the user's account. Any existing push notifications should thefore be removed on server. For this reason tie push notifications to a session, and remove them when the session is deleted.
64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<template>
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<NuxtLink to="/">Home</NuxtLink>
|
|
<NuxtLink to="/schedule">Schedule</NuxtLink>
|
|
</ul>
|
|
</nav>
|
|
<div class="account">
|
|
<template v-if="session?.account">
|
|
{{ session.account.name || "anonymous" }}
|
|
(s:{{ session.id }} a:{{ session.account.id }}{{ session.push ? " push" : null }})
|
|
{{ session.account.type }}
|
|
<button type="button" @click="logOut">Log out</button>
|
|
</template>
|
|
<template v-else>
|
|
<NuxtLink to="/login">Log In</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { data: session, refresh: sessionRefresh } = useAccountSession();
|
|
|
|
async function logOut() {
|
|
try {
|
|
const res = await $fetch.raw("/api/auth/session", {
|
|
method: "DELETE",
|
|
});
|
|
await sessionRefresh();
|
|
|
|
} catch (err: any) {
|
|
alert(`Log out failed: ${err.statusCode} ${err.statusMessage}`);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
line-height: 1.5; /* Prevent layout shift from log out button */
|
|
display: flex;
|
|
column-gap: 1em;
|
|
flex-wrap: wrap;
|
|
border-bottom: 1px solid var(--foreground);
|
|
margin-block-start: 1rem;
|
|
}
|
|
.account {
|
|
display: flex;
|
|
justify-content: end;
|
|
flex-grow: 1;
|
|
column-gap: 0.5em;
|
|
flex-wrap: wrap;
|
|
}
|
|
nav ul {
|
|
padding: 0;
|
|
display: flex;
|
|
column-gap: 0.5em;
|
|
}
|
|
button {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
</style>
|