Add team creation, team join and debug login screen

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import TeamAddModal from '~/components/TeamAddModal.vue';
 import { useTitleStore } from '~/stores/title';
 
 const app = useNuxtApp();
-const { user } = useUserSession();
+const { loggedIn } = useUserSession();
 const localePath = useLocalePath();
 const { t } = useI18n();
 
@@ -10,7 +11,7 @@ const { name, id } = app.$slugData.huntSlug!;
 
 const titleStore = useTitleStore();
 
-const { data, pending } = await useFetch(`/api/hunt/${id}`);
+const { data, pending, refresh } = await useFetch(`/api/hunt/${id}`);
 
 const hideAnswers = ref(true);
 
@@ -20,26 +21,92 @@ useHead({
   })
 });
 
+watch(loggedIn, () => refresh());
+
 titleStore.title = data.value?.name;
+
+async function invite() {
+  if (!data.value?.ownTeam) {
+    return;
+  }
+
+  const clipboardItemData = {
+    // TODO: add invite link
+    // 'text/plain': `https://pichunt.syma.dev/hunt/${id}/join?id=${data.value.ownTeam.id}&pw=${data.value.ownTeam.password}`
+    'text/plain': `Join team ${data.value.ownTeam.name} with code "${data.value.ownTeam.password}" on hunt "${data.value.name || name}"!`
+  };
+  const clipboardItem = new ClipboardItem(clipboardItemData);
+  await navigator.clipboard.write([clipboardItem]);
+}
 </script>
 
 <template>
   <h1 class="text-2xl">
     {{ data?.name || name }}
+    <VaChip color="danger" v-if="data?.isMember">Admin</VaChip>
     <VaChip v-if="data?.totalScore" class="float-right" color="success"
       >Total points: {{ data!!.totalScore }}</VaChip
     >
   </h1>
   <div v-if="data">
     <p>{{ data.description }}</p>
-    <p v-if="data.start">Start: {{ $d(data.start) }}</p>
-    <p v-if="data.end">End: {{ $d(data.end) }}</p>
+    <p v-if="data.start">
+      Start:
+      {{
+        $d(data.start, {
+          dateStyle: 'medium',
+          timeStyle: 'medium'
+        })
+      }}
+    </p>
+    <p v-if="data.end">
+      End:
+      {{
+        $d(data.end, {
+          dateStyle: 'medium',
+          timeStyle: 'medium'
+        })
+      }}
+    </p>
     <p>
       {{ data._count.teams }} teams joined{{
         data.ownTeam !== null ? ', just like you' : ', unlike you'
       }}!
     </p>
-    <div class="flex flex-row gap-2" v-if="data.ownTeam !== null">
+    <p v-if="data.ownTeam">
+      Your team: <span class="font-bold">{{ data.ownTeam.name }}</span>
+      <VaButton size="small" @click="invite" class="ml-2"
+        >Invite:
+        <span
+          class="font-mono font-bold text-white blur transition hover:blur-none active:blur-none"
+        >
+          {{ data.ownTeam.password }}</span
+        ></VaButton
+      >
+    </p>
+    <VaCard
+      v-if="data.ownTeam === null && !data.isMember"
+      color="primary"
+      class="mb-16 mt-8"
+    >
+      <VaCardTitle>Join this hunt!</VaCardTitle>
+      <VaCardContent class="text-2xl"
+        >To join this hunt you need to join or create a team:</VaCardContent
+      >
+      <VaCardActions v-if="data.loggedIn">
+        <TeamJoinModal @update="refresh" :hunt-id="data.id" />
+        <TeamAddModal @update="refresh" :hunt-id="data.id" />
+      </VaCardActions>
+      <VaCardActions v-else>
+        <VaButton
+          color="info"
+          icon="login"
+          :to="$localePath(`/login?to=/hunt/${sluggy(data)}`)"
+          >Login first</VaButton
+        >
+      </VaCardActions>
+    </VaCard>
+    <div class="flex flex-row gap-2" v-else>
       <VaSwitch v-model="hideAnswers" icon="image">Hide answers</VaSwitch>
     </div>
     <VaDivider />