Add team creation, team join and debug login screen

app/components/TeamAddModal.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { parseError } from '#shared/utils/error';
+
+const emits = defineEmits<{
+  update: [];
+}>();
+
+const props = defineProps<{
+  huntId: number;
+}>();
+
+const isOpen = ref(false);
+
+const data = reactive({
+  name: '',
+  description: ''
+});
+
+const pending = ref(false);
+
+const error = ref<string>();
+
+async function submit() {
+  if (data.name.length < 3 || pending.value) {
+    return;
+  }
+  pending.value = true;
+
+  try {
+    const result = await $fetch(`/api/hunt/${props.huntId}/team`, {
+      body: JSON.stringify(data),
+      method: 'POST'
+    });
+
+    data.name = '';
+    data.description = '';
+    emits('update');
+    isOpen.value = false;
+    error.value = undefined;
+  } catch (e) {
+    console.error(e);
+
+    error.value = parseError(e);
+  }
+  pending.value = false;
+}
+</script>
+
+<template>
+  <VaButton color="success" icon="group_add" @click="isOpen = true"
+    >Create a new team</VaButton
+  >
+  <VaModal v-model="isOpen" close-button hide-default-actions>
+    <h3 class="text-3xl">Create a new team</h3>
+    <div class="mt-4 flex flex-col gap-4">
+      <VaInput v-model="data.name" label="Name" placeholder="My cool team" />
+      <VaTextarea
+        max-rows="4"
+        min-rows="2"
+        v-model="data.description"
+        label="Description"
+        placeholder="The best team!"
+      />
+      <p>An invite code will be generated automatically.</p>
+      <VaAlert color="danger" v-if="error">{{ $t(error) }}</VaAlert>
+    </div>
+    <template #footer>
+      <VaButtonGroup :loading="pending" :disabled="pending">
+        <VaButton color="secondary" @click="isOpen = false">Cancel</VaButton>
+        <VaButton
+          color="success"
+          :disabled="data.name.length < 3 || pending"
+          @click="submit"
+          :loading="pending"
+          >Create</VaButton
+        >
+      </VaButtonGroup>
+    </template>
+  </VaModal>
+</template>
+
+<style scoped></style>

app/components/TeamJoinModal.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { parseError } from '#shared/utils/error';
+
+const emits = defineEmits<{
+  update: [];
+}>();
+
+const props = defineProps<{
+  huntId: number;
+}>();
+
+const isOpen = ref(false);
+
+const data = reactive({
+  team: null as number | null,
+  password: ''
+});
+
+const submitPending = ref(false);
+
+const {
+  data: teams,
+  pending,
+  refresh
+} = useFetch(`/api/hunt/${props.huntId}/teams`, {
+  lazy: true,
+  server: false,
+  immediate: false,
+  default: () => []
+});
+
+const error = ref<string>();
+
+async function openModal() {
+  isOpen.value = true;
+  await refresh();
+}
+
+async function submit() {
+  if (data.password.length < 3 || data.team === null || submitPending.value) {
+    return;
+  }
+  submitPending.value = true;
+
+  try {
+    const result = await $fetch(`/api/hunt/${props.huntId}/join`, {
+      body: JSON.stringify(data),
+      method: 'POST'
+    });
+
+    data.team = null;
+    data.password = '';
+    emits('update');
+    isOpen.value = false;
+    error.value = undefined;
+  } catch (e) {
+    console.error(e);
+
+    if (
+      e instanceof Error &&
+      e.name === 'FetchError' &&
+      'statusCode' in e &&
+      e.statusCode === 404
+    ) {
+      error.value = 'error.team_not_found';
+    } else {
+      error.value = parseError(e);
+    }
+  }
+  submitPending.value = false;
+}
+</script>
+
+<template>
+  <VaButton color="info" icon="search" @click="openModal">Join a team</VaButton>
+  <VaModal v-model="isOpen" close-button hide-default-actions>
+    <h3 class="text-3xl">Join a team</h3>
+    <div class="mt-4 flex flex-col gap-4">
+      <VaSelect
+        :options="teams"
+        v-model="data.team"
+        value-by="id"
+        track-by="id"
+        searchable
+        highlight-matched-text
+        placeholder="Select a team"
+        label="Select a team"
+        :text-by="
+          (team: (typeof teams)[number]) =>
+            `'${team.name}' of '${team.owner.name}', ${team._count.members} members`
+        "
+      >
+        <template #prependInner>
+          <VaIcon name="group" />
+        </template>
+      </VaSelect>
+      <p v-if="teams && teams.length <= 0">
+        No team has been created yet, be the first!
+      </p>
+      <VaInput v-model="data.password" label="Password" placeholder="abc123">
+        <template #prependInner>
+          <VaIcon name="password" />
+        </template>
+      </VaInput>
+
+      <VaAlert color="danger" v-if="error">{{ $t(error) }}</VaAlert>
+    </div>
+    <template #footer>
+      <VaButtonGroup
+        :loading="submitPending || pending"
+        :disabled="submitPending"
+      >
+        <VaButton color="secondary" @click="isOpen = false">Cancel</VaButton>
+        <VaButton
+          color="success"
+          :disabled="
+            data.password.length < 3 || data.team === null || submitPending
+          "
+          @click="submit"
+          :loading="submitPending || pending"
+          >Join</VaButton
+        >
+      </VaButtonGroup>
+    </template>
+  </VaModal>
+</template>
+
+<style scoped></style>

app/lang/de.json

@@ -14,6 +14,12 @@
     "switch_lang": "Sprache ändern zu {locale}",
     "refresh": "Aktualisieren"
   },
+  "error": {
+    "401": "Bitte melde dich vorher an!",
+    "404": "Nicht gefunden",
+    "default": "Unbekannter Fehler",
+    "team_not_found": "Team nicht gefunden oder Passwort inkorrekt!"
+  },
   "vuestic": {
     "search": "Search",
     "noOptions": "Items not found",

app/lang/en.json

@@ -14,6 +14,12 @@
     "switch_lang": "Switch locale to {locale}",
     "refresh": "Refresh"
   },
+  "error": {
+    "401": "Please login!",
+    "404": "Not found",
+    "default": "Unkown error",
+    "team_not_found": "Team not found or password incorrect!"
+  },
   "vuestic": {
     "search": "Search",
     "noOptions": "Items not found",

app/layouts/default.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTitleStore } from '~/stores/title';
 
-const { loggedIn, clear } = useUserSession();
+const { loggedIn, clear, user } = useUserSession();
 
 const route = useRoute();
 const breakpoints = useBreakpoint();
@@ -88,6 +88,24 @@ const slugs = computed(() => checkSlug(route.params));
           </VaSidebarItemContent>
         </VaSidebarItem>
         <VaSpacer />
+        <VaSidebarItem
+          v-if="user"
+          :hover-color="user.role === 'ADMIN' ? 'danger' : undefined"
+          :text-color="user.role === 'ADMIN' ? 'danger' : undefined"
+        >
+          <VaSidebarItemContent>
+            <VaIcon
+              :name="
+                user.role === 'ADMIN'
+                  ? 'admin_panel_settings'
+                  : 'account_circle'
+              "
+            />
+            <VaSidebarItemTitle>
+              {{ user.name }}
+            </VaSidebarItemTitle>
+          </VaSidebarItemContent>
+        </VaSidebarItem>
         <VaSidebarItem v-if="loggedIn" @click="clear">
           <VaSidebarItemContent>
             <VaIcon name="logout" />

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 />

app/pages/index.vue

@@ -1,8 +1,109 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { loggedIn } = useUserSession();
+const { data, pending, refresh } = await useFetch('/api/home');
+
+watch(loggedIn, () => refresh());
+</script>
 
 <template>
   <h1 class="text-primary text-3xl">{{ $t('hello') }}</h1>
-  <VaButton icon="home" :to="$localePath('/hunt/bremer-stadtrallye-1')" />
+  <VaButton icon="refresh" @click="refresh" :disabled="pending" />
+
+  <div v-if="data">
+    <div v-if="data.own !== null">
+      <h2 class="my-4 text-2xl font-bold">Joined hunts:</h2>
+      <div class="lg-grid-cols-3 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <VaCard
+          v-for="hunt in data.own"
+          :key="hunt.id"
+          stripe
+          :to="$localePath(`/hunt/${sluggy(hunt)}`)"
+        >
+          <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+          <VaCardContent>
+            <h3 class="text-xl">{{ hunt.name }}</h3>
+            {{ hunt.description }}
+            <VaDivider />
+            <div class="flex flex-col gap-2">
+              <p>{{ hunt._count.quests }} Quests</p>
+              <p v-if="hunt.start">
+                Start:
+                {{
+                  $d(hunt.start, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p v-if="hunt.end">
+                End:
+                {{
+                  $d(hunt.end, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p>{{ hunt._count.teams }} teams joined!</p>
+            </div>
+          </VaCardContent>
+        </VaCard>
+        <VaCard v-if="data.own.length <= 0">
+          <VaCardTitle>No hunt joined yet</VaCardTitle>
+          <VaCardContent>Click on a hunt below and join them!</VaCardContent>
+        </VaCard>
+      </div>
+    </div>
+    <div v-else>
+      <VaButton color="info" icon="login" :to="$localePath(`/login`)"
+        >Login first</VaButton
+      >
+    </div>
+    <div class="mt-8">
+      <VaDivider />
+      <h2 class="my-4 text-2xl font-bold">Open to join hunts:</h2>
+      <div class="lg-grid-cols-3 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <VaCard
+          v-for="hunt in data.others"
+          :key="hunt.id"
+          :to="$localePath(`/hunt/${sluggy(hunt)}`)"
+        >
+          <VaCardTitle>{{ hunt.name }}</VaCardTitle>
+          <VaCardContent>
+            <h3 class="text-xl">{{ hunt.name }}</h3>
+            {{ hunt.description }}
+            <VaDivider />
+            <div class="flex flex-col gap-2">
+              <p>{{ hunt._count.quests }} Quests</p>
+              <p v-if="hunt.start">
+                Start:
+                {{
+                  $d(hunt.start, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p v-if="hunt.end">
+                End:
+                {{
+                  $d(hunt.end, {
+                    dateStyle: 'medium',
+                    timeStyle: 'medium'
+                  })
+                }}
+              </p>
+              <p>{{ hunt._count.teams }} teams joined!</p>
+            </div>
+          </VaCardContent>
+        </VaCard>
+        <VaCard v-if="data.others.length <= 0">
+          <VaCardTitle>No hunt created yet</VaCardTitle>
+          <VaCardContent>New hunts will appear soon!</VaCardContent>
+        </VaCard>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>

app/pages/login.vue

@@ -1,9 +1,38 @@
 <script setup lang="ts">
+import { useRouter } from '#app';
+
 definePageMeta({
   middleware: ['guest']
 });
+
+const { fetch } = useUserSession();
+const router = useRouter();
+const route = useRoute();
+// TODO: remove this lol
+const { data } = await useFetch('/api/auth/test-list');
+
+async function login(id: number) {
+  await $fetch(`/api/auth/test?id=${id}`);
+
+  await fetch();
+
+  await router.push(
+    (route.query.to
+      ? typeof route.query.to === 'string'
+        ? route.query.to
+        : route.query.to[0]
+      : '/') || '/'
+  );
+}
 </script>
 
-<template><h1>login</h1></template>
+<template>
+  <h1>login</h1>
+  <div class="flex flex-col gap-2" v-if="data">
+    <VaButton v-for="user in data" :key="user.id" @click="login(user.id)"
+      >Login as "{{ user.name }}" {{ user.email }}</VaButton
+    >
+  </div>
+</template>
 
 <style scoped></style>