Hornwitser
e8226e0062
Add allowedAccountTypes page metadata which the authenticated middleware uses to further restrict the types of accounts that can access the page. If the account type is insufficent to access the page it will return an HTTP 403 Forbidden status, which is rendered using the error page.
57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template>
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<NuxtLink to="/">Home</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/schedule">Schedule</NuxtLink>
|
|
</li>
|
|
<li v-if="session?.account?.type === 'admin' || session?.account?.type === 'crew'">
|
|
<NuxtLink to="/edit">Edit</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="account">
|
|
<template v-if="session?.account">
|
|
{{ session.account.name }}
|
|
(s:{{ session.id }} a:{{ session.account.id }}{{ session.push ? " push" : null }})
|
|
{{ session.account.type }}
|
|
<NuxtLink to="/account/settings">Settings</NuxtLink>
|
|
<LogOutButton v-if="session.account.type !== 'anonymous'"/>
|
|
</template>
|
|
<template v-else>
|
|
<NuxtLink to="/login">Log In</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { data: session } = await useAccountSession();
|
|
</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;
|
|
list-style: none;
|
|
}
|
|
</style>
|