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

app/layouts/default.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { sluggy } from '#imports';
+import { useHuntStore } from '~/stores/hunt';
 import { useTitleStore } from '~/stores/title';
 
 const { loggedIn, clear, user } = useUserSession();
@@ -8,10 +9,18 @@ const localePath = useLocalePath();
 const route = useRoute();
 const breakpoints = useBreakpoint();
 const titleStore = useTitleStore();
+const huntStore = useHuntStore();
 
 const isSidebarVisible = ref(breakpoints.mdUp);
 
 const slugs = computed(() => checkSlug(route.params));
+
+const isHuntAdmin = computed(
+  () =>
+    slugs.value?.huntSlug !== undefined &&
+    huntStore.huntId === slugs.value.huntSlug.id &&
+    huntStore.isMember
+);
 </script>
 
 <template>
@@ -75,7 +84,7 @@ const slugs = computed(() => checkSlug(route.params));
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSidebarItem
-          v-if="slugs?.huntSlug && user?.role === 'ADMIN'"
+          v-if="slugs?.huntSlug && isHuntAdmin"
           text-color="danger"
           hover-color="danger"
           active-color="onDanger"
@@ -90,7 +99,7 @@ const slugs = computed(() => checkSlug(route.params));
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSidebarItem
-          v-if="slugs?.huntSlug && user?.role === 'ADMIN'"
+          v-if="slugs?.huntSlug && isHuntAdmin"
           text-color="danger"
           hover-color="danger"
           active-color="onDanger"
@@ -125,7 +134,7 @@ const slugs = computed(() => checkSlug(route.params));
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSidebarItem
-          v-if="slugs?.huntSlug && slugs?.questSlug && user?.role === 'ADMIN'"
+          v-if="slugs?.huntSlug && slugs?.questSlug && isHuntAdmin"
           text-color="danger"
           hover-color="danger"
           active-color="onDanger"

app/pages/hunt/[huntSlug]/[questSlug]/admin.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { sluggy } from '#imports';
+import { parseError, sluggy } from '#imports';
 import { useI18nKey } from '~/composables/useI18nKey';
+import { useHuntStore } from '~/stores/hunt';
 import { useTitleStore } from '~/stores/title';
 
 definePageMeta({
-  middleware: ['admin'],
+  middleware: ['auth'],
   keepalive: false
 });
 
@@ -18,8 +19,11 @@ const router = useRouter();
 const { huntSlug } = app.$slugData;
 const { name, id } = app.$slugData.questSlug!;
 const titleStore = useTitleStore();
+const huntStore = useHuntStore();
 
-const { data, refresh } = await useFetch(`/api/admin/quest/${id}`);
+const { data, refresh, error } = await useFetch(`/api/admin/quest/${id}`);
+
+huntStore.setMembership(huntSlug!.id, !error.value);
 
 useHead({
   title: t('layouts.title', {
@@ -38,6 +42,17 @@ titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
 
 <template>
   <div>
+    <div v-if="error">
+      <VaAlert color="danger" class="my-4">
+        {{ t(parseError(error)) }}
+      </VaAlert>
+      <VaButton
+        icon="arrow_back"
+        :to="localePath(`/hunt/${sluggy(huntSlug!)}`)"
+        >{{ t('page.common.back_to_hunt') }}</VaButton
+      >
+    </div>
+    <template v-else>
       <h1 class="my-4 text-3xl">Admin—{{ data?.title_de }}</h1>
       <VaButtonGroup>
         <VaButton
@@ -84,6 +99,7 @@ titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
         </VaAccordion>
       </div>
       <p v-else class="mt-4 text-lg">No answers yet</p>
+    </template>
   </div>
 </template>
 

app/pages/hunt/[huntSlug]/[questSlug]/index.vue

@@ -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'"
         >

app/pages/hunt/[huntSlug]/admin.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import { parseError, sluggy } from '#imports';
 import { createImageURL } from '#shared/utils/image';
 import superjson, { type SuperJSONResult } from 'superjson';
 import { useI18nKey } from '~/composables/useI18nKey';
+import { useHuntStore } from '~/stores/hunt';
 import { useTitleStore } from '~/stores/title';
 import { fullDate } from '~~/server/utils/date';
 
 definePageMeta({
-  middleware: ['admin'],
+  middleware: ['auth'],
   keepalive: false
 });
 
@@ -22,14 +24,20 @@ const { init } = useToast();
 
 const { name, id } = app.$slugData.huntSlug!;
 const titleStore = useTitleStore();
+const huntStore = useHuntStore();
 
-const { data, pending, refresh } = await useFetch(`/api/admin/hunt/${id}`, {
+const { data, pending, refresh, error } = await useFetch(
+  `/api/admin/hunt/${id}`,
+  {
     transform: (value) => {
       return superjson.deserialize(
         value as unknown as SuperJSONResult
       ) as unknown as typeof value;
     }
-});
+  }
+);
+
+huntStore.setMembership(id, !error.value);
 
 const formData = useCloned(data, {
   clone: (source) => superjson.deserialize(superjson.serialize(source))
@@ -204,7 +212,17 @@ async function deleteImage() {
 
 <template>
   <div>
-    <h1>admin</h1>
+    <div v-if="error">
+      <VaAlert color="danger" class="my-4">
+        {{ t(parseError(error)) }}
+      </VaAlert>
+      <VaButton
+        icon="arrow_back"
+        :to="localePath(`/hunt/${sluggy(app.$slugData.huntSlug!)}`)"
+        >{{ t('page.common.back_to_hunt') }}</VaButton
+      >
+    </div>
+    <template v-else>
       <VaForm v-if="formData.cloned.value && data" class="flex flex-col gap-4">
         <VaInput
           v-model="formData.cloned.value.name_de"
@@ -309,7 +327,9 @@ async function deleteImage() {
             @click.prevent="refresh()"
             >Refresh</VaButton
           >
-        <VaButton :disabled="!formData.isModified.value" @click.prevent="submit"
+          <VaButton
+            :disabled="!formData.isModified.value"
+            @click.prevent="submit"
             >Save</VaButton
           >
         </VaButtonGroup>
@@ -397,6 +417,7 @@ async function deleteImage() {
           >Add admin</VaButton
         >
       </div>
+    </template>
   </div>
 </template>
 

app/pages/hunt/[huntSlug]/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseError } from '#imports';
 import TeamAddModal from '~/components/TeamAddModal.vue';
+import { useHuntStore } from '~/stores/hunt';
 import { useSettingsStore } from '~/stores/settings';
 import { useTitleStore } from '~/stores/title';
 import { fullDate } from '~~/server/utils/date';
@@ -15,9 +16,12 @@ const { init } = useToast();
 const { name, id } = app.$slugData.huntSlug!;
 
 const titleStore = useTitleStore();
+const huntStore = useHuntStore();
 
 const { data, pending, refresh, error } = await useFetch(`/api/hunt/${id}`);
 
+huntStore.setMembership(id, data.value?.isMember ?? false);
+
 const settings = useSettingsStore();
 
 useHead({

app/pages/hunt/[huntSlug]/teams.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { parseError, sluggy } from '#imports';
 import Team from '~/components/admin/Team.vue';
+import { useHuntStore } from '~/stores/hunt';
 import { useTitleStore } from '~/stores/title';
 
 definePageMeta({
-  middleware: ['admin']
+  middleware: ['auth']
 });
 
 const app = useNuxtApp();
@@ -15,8 +17,11 @@ const router = useRouter();
 
 const { name, id } = app.$slugData.huntSlug!;
 const titleStore = useTitleStore();
+const huntStore = useHuntStore();
 
-const { data, refresh } = await useFetch(`/api/admin/hunt/${id}/teams`);
+const { data, refresh, error } = await useFetch(`/api/admin/hunt/${id}/teams`);
+
+huntStore.setMembership(id, !error.value);
 
 useHead({
   title: t('layouts.title', {
@@ -38,8 +43,21 @@ export type Team = Data['teams'][number];
 
 <template>
   <div>
+    <div v-if="error">
+      <VaAlert color="danger" class="my-4">
+        {{ t(parseError(error)) }}
+      </VaAlert>
+      <VaButton
+        icon="arrow_back"
+        :to="localePath(`/hunt/${sluggy(app.$slugData.huntSlug!)}`)"
+        >{{ t('page.common.back_to_hunt') }}</VaButton
+      >
+    </div>
+    <template v-else>
       <h1>teams</h1>
-    <VaButton color="success" icon="replay" @click="refresh">Refresh</VaButton>
+      <VaButton color="success" icon="replay" @click="refresh"
+        >Refresh</VaButton
+      >
       <VaAccordion v-if="data" stateful>
         <Team
           v-for="team in data.teams"
@@ -49,6 +67,7 @@ export type Team = Data['teams'][number];
           @refresh="refresh"
         />
       </VaAccordion>
+    </template>
   </div>
 </template>
 

app/stores/hunt.ts

@@ -0,0 +1,14 @@
+export const useHuntStore = defineStore('hunt', () => {
+  const huntId = ref<number>();
+  const isMember = ref(false);
+
+  function setMembership(id: number, member: boolean) {
+    huntId.value = id;
+    isMember.value = member;
+  }
+
+  return { huntId, isMember, setMembership };
+});
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useHuntStore, import.meta.hot));
+}