refactor(hunt): replace admin middleware with auth and implement membership state

- Change middleware from 'admin' to 'auth' on hunt and quest admin pages
- Add global hunt store to track current hunt ID and membership status
- Use hunt store membership state to conditionally display admin UI elements
- Handle fetch errors gracefully with alerts and back navigation buttons
- Update admin UI logic to depend on membership state instead of user role
- Add membership state update after API calls in hunt, quest, teams, and admin pages
- Refactor UI templates to show error messages when fetch fails
- Centralize membership logic for better authorization control in frontend
This commit is contained in:
2026-07-30 22:33:47 +02:00
parent cfda014760
commit 370ba3406f
7 changed files with 351 additions and 261 deletions
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { parseError, sluggy } from '#imports';
import { parseError, sluggy, useHuntStore } from '#imports';
import { compressImage, createImageURL } from '#shared/utils/image';
import ClickableImage from '~/components/ClickableImage.vue';
import MultilineString from '~/components/MultilineString.vue';
@@ -22,6 +22,13 @@ const localePath = useLocalePath();
const { tKey, hasKey, tSluggy } = useI18nKey();
const titleStore = useTitleStore();
const huntStore = useHuntStore();
const isHuntAdmin = computed(
() =>
huntSlug !== undefined &&
huntStore.huntId === huntSlug.id &&
huntStore.isMember
);
const { data, pending, refresh, error } = await useFetch(
`/api/quest/${questSlug?.id}`
@@ -195,11 +202,11 @@ async function submit() {
>{{ t('layouts.refresh') }}</VaButton
>
<VaButton
v-if="user && user.role === 'ADMIN'"
v-if="user && isHuntAdmin"
color="danger"
:to="
localePath(
`/hunt/${data?.hunt ? tSluggy(data.hunt).value : sluggy(huntSlug!)}/${data ? tSluggy(data).value : sluggy(questSlug!)}}/admin`
`/hunt/${data?.hunt ? tSluggy(data.hunt).value : sluggy(huntSlug!)}/${data ? tSluggy(data).value : sluggy(questSlug!)}/admin`
)
"
>{{ t('page.common.admin') }}</VaButton
@@ -268,7 +275,7 @@ async function submit() {
</VaCardContent>
</VaCard>
<VaCard
v-if="user && user.role !== 'ADMIN' && data.teamId"
v-if="user && !isHuntAdmin && data.teamId"
stripe
:stripe-color="data.answer?.final ? 'success' : 'primary'"
>