Add team creation, team join and debug login screen

2025-08-03 18:58:17 +02:00
parent facb07de5b
commit 36e8ef41bf
15 changed files with 735 additions and 11 deletions
@@ -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>
@@ -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>