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>