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/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,52 +42,64 @@ titleStore.title = data.value ? tKey(data.value, 'title').value : undefined;
 
 <template>
   <div>
-    <h1 class="my-4 text-3xl">Admin—{{ data?.title_de }}</h1>
-    <VaButtonGroup>
+    <div v-if="error">
+      <VaAlert color="danger" class="my-4">
+        {{ t(parseError(error)) }}
+      </VaAlert>
       <VaButton
         icon="arrow_back"
-        :to="
-          localePath(
-            `/hunt/${data ? tSluggy(data.hunt).value : sluggy(huntSlug!)}`
-          )
-        "
+        :to="localePath(`/hunt/${sluggy(huntSlug!)}`)"
         >{{ t('page.common.back_to_hunt') }}</VaButton
       >
-      <VaButton icon="replay" color="success" @click="refresh"
-        >Refresh</VaButton
-      >
-    </VaButtonGroup>
-    <div v-if="data" class="my-2 flex flex-col gap-2 p-4">
-      <p>{{ tKey(data, 'description') }}</p>
-      <p v-if="hasKey(data, 'question')">{{ tKey(data, 'question') }}</p>
     </div>
-    <div class="mb-4 grid grid-cols-2 gap-2 p-2 md:flex md:flex-row">
-      <VaChip outline>In progress</VaChip>
-      <VaChip color="primary">Reviewable</VaChip>
-      <VaChip color="danger">Review missing</VaChip>
-      <VaChip color="success">Reviewed</VaChip>
-    </div>
-    <div v-if="data">
-      <p class="text-xl">{{ data.points }} Points</p>
-      <p v-if="data.extraPoints" class="text-xl">
-        {{ data.extraPoints }} Extra points
-      </p>
-      <p v-if="hasKey(data, 'extraText')">
-        Extra: {{ tKey(data, 'extraText') }}
-      </p>
-    </div>
-    <div v-if="data && data.answers.length > 0">
-      <VaAccordion multiple stateful>
-        <AdminAnswer
-          v-for="answer in data.answers"
-          :key="answer.id"
-          :answer="answer"
-          :quest="data"
-          @update="refresh"
-        />
-      </VaAccordion>
-    </div>
-    <p v-else class="mt-4 text-lg">No answers yet</p>
+    <template v-else>
+      <h1 class="my-4 text-3xl">Admin—{{ data?.title_de }}</h1>
+      <VaButtonGroup>
+        <VaButton
+          icon="arrow_back"
+          :to="
+            localePath(
+              `/hunt/${data ? tSluggy(data.hunt).value : sluggy(huntSlug!)}`
+            )
+          "
+          >{{ t('page.common.back_to_hunt') }}</VaButton
+        >
+        <VaButton icon="replay" color="success" @click="refresh"
+          >Refresh</VaButton
+        >
+      </VaButtonGroup>
+      <div v-if="data" class="my-2 flex flex-col gap-2 p-4">
+        <p>{{ tKey(data, 'description') }}</p>
+        <p v-if="hasKey(data, 'question')">{{ tKey(data, 'question') }}</p>
+      </div>
+      <div class="mb-4 grid grid-cols-2 gap-2 p-2 md:flex md:flex-row">
+        <VaChip outline>In progress</VaChip>
+        <VaChip color="primary">Reviewable</VaChip>
+        <VaChip color="danger">Review missing</VaChip>
+        <VaChip color="success">Reviewed</VaChip>
+      </div>
+      <div v-if="data">
+        <p class="text-xl">{{ data.points }} Points</p>
+        <p v-if="data.extraPoints" class="text-xl">
+          {{ data.extraPoints }} Extra points
+        </p>
+        <p v-if="hasKey(data, 'extraText')">
+          Extra: {{ tKey(data, 'extraText') }}
+        </p>
+      </div>
+      <div v-if="data && data.answers.length > 0">
+        <VaAccordion multiple stateful>
+          <AdminAnswer
+            v-for="answer in data.answers"
+            :key="answer.id"
+            :answer="answer"
+            :quest="data"
+            @update="refresh"
+          />
+        </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'"
         >