feat(team): add team settings with edit, leave, and kick functionality

app/components/TeamAddModal.vue

@@ -55,7 +55,7 @@ async function submit() {
     t('comp.team_add.create_a_new_team')
   }}</VaButton>
   <VaModal v-model="isOpen" close-button hide-default-actions>
-    <h3 class="mt-16 text-3xl">{{ t('comp.team_add.create_a_new_team') }}</h3>
+    <h3 class="mt-4 text-3xl">{{ t('comp.team_add.create_a_new_team') }}</h3>
     <div class="mt-4 flex flex-col gap-4">
       <VaInput
         v-model="data.name"

app/components/TeamJoinModal.vue

@@ -77,7 +77,7 @@ async function submit() {
     t('comp.team_join.join_a_team')
   }}</VaButton>
   <VaModal v-model="isOpen" close-button hide-default-actions>
-    <h3 class="mt-16 text-3xl">{{ t('comp.team_join.join_a_team') }}</h3>
+    <h3 class="mt-4 text-3xl">{{ t('comp.team_join.join_a_team') }}</h3>
     <div class="mt-4 flex flex-col gap-4">
       <!-- @vue-ignore more specific than vuestic-->
       <VaSelect

app/components/TeamSettingsModal.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { parseError } from '#shared/utils/error';
+
+const props = defineProps<{
+  huntId: number;
+}>();
+
+const emit = defineEmits<{
+  update: [];
+}>();
+
+const { t } = useI18n();
+const { init } = useToast();
+const { confirm } = useModal();
+const validation = useValidation();
+const { user } = useUserSession();
+
+const isOpen = defineModel<boolean>('modelValue', { default: false });
+
+type TeamMember = {
+  member: {
+    id: number;
+    name: string;
+  };
+};
+
+type TeamDetails = {
+  id: number;
+  name: string;
+  description: string;
+  password: string;
+  ownerId: number;
+  owner: { id: number; name: string };
+  members: TeamMember[];
+};
+
+const team = ref<TeamDetails | null>(null);
+const loading = ref(false);
+const pending = ref(false);
+const error = ref('');
+
+const form = reactive({
+  name: '',
+  description: '',
+  password: ''
+});
+
+const isOwner = computed(
+  () => !!team.value && !!user.value && team.value.ownerId === user.value.id
+);
+
+watch(isOpen, async (visible) => {
+  if (visible) {
+    await loadTeam();
+  }
+});
+
+async function loadTeam() {
+  loading.value = true;
+  error.value = '';
+  try {
+    team.value = await $fetch<TeamDetails>(`/api/hunt/${props.huntId}/team`);
+    form.name = team.value!.name;
+    form.description = team.value!.description;
+    form.password = team.value!.password;
+  } catch (e) {
+    error.value = parseError(e);
+  }
+  loading.value = false;
+}
+
+async function save() {
+  if (!team.value || pending.value) {
+    return;
+  }
+  pending.value = true;
+  error.value = '';
+  try {
+    await $fetch(`/api/hunt/${props.huntId}/team/${team.value.id}`, {
+      method: 'PUT',
+      body: {
+        name: form.name,
+        description: form.description,
+        password: form.password
+      }
+    });
+    init({ message: t('comp.team_settings.saved'), color: 'success' });
+    await loadTeam();
+    emit('update');
+  } catch (e) {
+    error.value = parseError(e);
+  }
+  pending.value = false;
+}
+
+async function leaveTeam() {
+  const ok = await confirm({
+    title: t('comp.team_settings.leave_title'),
+    message: t('comp.team_settings.leave_confirm'),
+    okText: t('auth.accept')
+  });
+  if (!ok) {
+    return;
+  }
+  pending.value = true;
+  error.value = '';
+  try {
+    await $fetch(`/api/hunt/${props.huntId}/team/leave`, {
+      method: 'DELETE'
+    });
+    init({ message: t('comp.team_settings.left'), color: 'success' });
+    isOpen.value = false;
+    emit('update');
+  } catch (e) {
+    error.value = parseError(e);
+  }
+  pending.value = false;
+}
+
+async function kickMember(member: TeamMember) {
+  const ok = await confirm({
+    title: t('comp.team_settings.kick_title'),
+    message: t('comp.team_settings.kick_confirm', {
+      name: member.member.name
+    }),
+    okText: t('auth.accept')
+  });
+  if (!ok) {
+    return;
+  }
+  pending.value = true;
+  error.value = '';
+  try {
+    await $fetch(`/api/hunt/${props.huntId}/team/${team.value!.id}/kick`, {
+      method: 'POST',
+      body: { userId: member.member.id }
+    });
+    init({ message: t('comp.team_settings.kicked'), color: 'success' });
+    await loadTeam();
+    emit('update');
+  } catch (e) {
+    error.value = parseError(e);
+  }
+  pending.value = false;
+}
+</script>
+
+<template>
+  <VaModal
+    v-model="isOpen"
+    :title="t('comp.team_settings.title')"
+    size="large"
+    hide-default-actions
+    close-button
+  >
+    <template #footer>
+      <VaButton preset="secondary" color="secondary" @click="isOpen = false">{{
+        t('page.common.cancel')
+      }}</VaButton>
+    </template>
+
+    <div v-if="!team" class="flex justify-center py-8">
+      <VaProgressCircle indeterminate />
+    </div>
+
+    <div v-else class="flex flex-col gap-4">
+      <!-- Owner: edit form -->
+      <template v-if="isOwner">
+        <VaInput
+          v-model="form.name"
+          :label="t('comp.team_settings.team_name')"
+          :rules="[
+            validation.required(t('comp.team_settings.team_name')),
+            validation.min(t('comp.team_settings.team_name'), 3),
+            validation.max(t('comp.team_settings.team_name'), 256)
+          ]"
+        />
+        <VaTextarea
+          v-model="form.description"
+          :label="t('comp.team_settings.description')"
+          max-rows="4"
+          min-rows="2"
+          max-length="256"
+          counter
+          :rules="[
+            validation.maxOptional(t('comp.team_settings.description'), 256)
+          ]"
+        />
+        <VaInput
+          v-model="form.password"
+          :label="t('comp.team_settings.invite_code')"
+          :rules="[validation.required(t('comp.team_settings.invite_code'))]"
+        />
+        <VaButton
+          color="primary"
+          :loading="pending"
+          :disabled="form.name.length < 3 || form.password.length < 1"
+          @click="save"
+          >{{ t('page.common.update_btn') }}</VaButton
+        >
+      </template>
+
+      <!-- Non-owner: read-only info -->
+      <template v-else>
+        <p>
+          <span class="font-bold"
+            >{{ t('comp.team_settings.team_name') }}:</span
+          >
+          {{ team.name }}
+        </p>
+        <p v-if="team.description">
+          <span class="font-bold"
+            >{{ t('comp.team_settings.description') }}:</span
+          >
+          {{ team.description }}
+        </p>
+        <p>
+          <span class="font-bold">{{ t('comp.team_settings.owner') }}:</span>
+          {{ team.owner.name }}
+        </p>
+      </template>
+
+      <VaDivider />
+
+      <!-- Members list -->
+      <div>
+        <h3 class="mb-2 text-lg font-bold">
+          {{ t('comp.team_settings.members') }}
+        </h3>
+        <div class="flex flex-col gap-2">
+          <div
+            v-for="member in team.members"
+            :key="member.member.id"
+            class="flex items-center justify-between gap-2"
+          >
+            <span>
+              {{ member.member.name }}
+              <VaChip
+                v-if="member.member.id === team.ownerId"
+                size="small"
+                color="primary"
+                >{{ t('comp.team_settings.owner') }}</VaChip
+              >
+            </span>
+            <VaButton
+              v-if="isOwner && member.member.id !== team.ownerId"
+              icon="person_remove"
+              size="small"
+              color="danger"
+              preset="secondary"
+              :loading="pending"
+              @click="kickMember(member)"
+              >{{ t('comp.team_settings.kick') }}</VaButton
+            >
+          </div>
+        </div>
+      </div>
+
+      <VaAlert v-if="error" color="danger" class="w-full text-center">{{
+        t(error)
+      }}</VaAlert>
+
+      <!-- Non-owner: leave team -->
+      <VaDivider v-if="!isOwner" />
+      <VaButton
+        v-if="!isOwner"
+        color="danger"
+        icon="logout"
+        :loading="pending"
+        @click="leaveTeam"
+        >{{ t('comp.team_settings.leave') }}</VaButton
+      >
+    </div>
+  </VaModal>
+</template>
+
+<style scoped></style>

app/lang/de.json

@@ -32,6 +32,23 @@
       "no_team_yet": "Es wurde noch kein Team erstellt, gründe das erste!",
       "select_a_team": "Wähle ein Team aus",
       "team_preview": "'{team}' von '{owner}', {members} Mitglieder"
+    },
+    "team_settings": {
+      "description": "Beschreibung",
+      "invite_code": "Einladungscode",
+      "kick": "Entfernen",
+      "kick_confirm": "Möchtest du {name} wirklich aus dem Team entfernen?",
+      "kick_title": "Mitglied entfernen",
+      "kicked": "Mitglied entfernt!",
+      "leave": "Team verlassen",
+      "leave_confirm": "Möchtest du das Team wirklich verlassen?",
+      "leave_title": "Team verlassen",
+      "left": "Du hast das Team verlassen!",
+      "members": "Mitglieder",
+      "owner": "Eigentümer",
+      "saved": "Team aktualisiert!",
+      "team_name": "Teamname",
+      "title": "Team-Einstellungen"
     }
   },
   "enums": {
@@ -143,6 +160,7 @@
       "showcase": "Showcase",
       "team_count": "Keine Teams beigetreten, so wie du! | Ein Team ist beigetreten, du noch nicht! | {count} Teams sind beigetreten, du noch nicht!",
       "team_count_joined": "Keine Teams beigetreten, so wie du! | Ein Team ist beigetreten, du auch! | {count} Teams sind beigetreten, du auch!",
+      "team_settings": "Team-Einstellungen",
       "teams": "Teams",
       "total_points": "Punktestand: {score}",
       "your_team": "Dein Team:"

app/lang/en.json

@@ -32,6 +32,23 @@
       "no_team_yet": " No team has been created yet, be the first!",
       "select_a_team": "Select a team",
       "team_preview": "'{team}' of '{owner}', {members} members"
+    },
+    "team_settings": {
+      "description": "Description",
+      "invite_code": "Invite code",
+      "kick": "Remove",
+      "kick_confirm": "Do you really want to remove {name} from the team?",
+      "kick_title": "Remove member",
+      "kicked": "Member removed!",
+      "leave": "Leave team",
+      "leave_confirm": "Do you really want to leave the team?",
+      "leave_title": "Leave team",
+      "left": "You left the team!",
+      "members": "Members",
+      "owner": "Owner",
+      "saved": "Team updated!",
+      "team_name": "Team name",
+      "title": "Team settings"
     }
   },
   "enums": {
@@ -143,6 +160,7 @@
       "showcase": "Showcase",
       "team_count": "No teams joined, just like you! | One team joined, unlike you! | {count} teams joined, unlike you!",
       "team_count_joined": "No teams joined, just like you! | One team joined, just like you! | {count} teams joined, just like you!",
+      "team_settings": "Team settings",
       "teams": "Teams",
       "total_points": "Total points: {score}",
       "your_team": "Your team:"

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { parseError } from '#imports';
 import TeamAddModal from '~/components/TeamAddModal.vue';
+import TeamSettingsModal from '~/components/TeamSettingsModal.vue';
 import { useHuntStore } from '~/stores/hunt';
 import { useSettingsStore } from '~/stores/settings';
 import { useTitleStore } from '~/stores/title';
@@ -18,6 +19,8 @@ const { name, id } = app.$slugData.huntSlug!;
 const titleStore = useTitleStore();
 const huntStore = useHuntStore();
 
+const teamSettingsOpen = ref(false);
+
 const { data, pending, refresh, error } = await useFetch(`/api/hunt/${id}`);
 
 huntStore.setMembership(id, data.value?.isMember ?? false);
@@ -176,14 +179,28 @@ ${document.location.href}`
               {{ t('page.hunt.your_team') }}
               <span class="text-xl font-bold">{{ data.ownTeam.name }}</span>
             </p>
-            <VaButton size="small" class="group" @click="invite"
-              >{{ t('page.hunt.invite') }}
-              <span
-                class="font-mono font-bold text-white blur transition hover:blur-none active:blur-none group-hover:blur-none"
+            <div class="flex flex-wrap items-center gap-2">
+              <VaButton size="small" class="group" @click="invite"
+                >{{ t('page.hunt.invite') }}
+                <span
+                  class="font-mono font-bold text-white blur transition hover:blur-none active:blur-none group-hover:blur-none"
+                >
+                  {{ data.ownTeam.password }}</span
+                ></VaButton
               >
-                {{ data.ownTeam.password }}</span
-              ></VaButton
-            >
+              <VaButton
+                size="small"
+                icon="settings"
+                preset="secondary"
+                @click="teamSettingsOpen = true"
+                >{{ t('page.hunt.team_settings') }}</VaButton
+              >
+            </div>
+            <TeamSettingsModal
+              v-model="teamSettingsOpen"
+              :hunt-id="data.id"
+              @update="refresh"
+            />
           </div>
         </VaCardContent>
       </VaCard>

server/api/hunt/[huntId]/team/[teamId]/index.put.ts

@@ -0,0 +1,57 @@
+import { useValidatedBody, useValidatedParams, z, zh } from 'h3-zod';
+import prisma from '~~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  const user = await requireUserSession(event);
+  const userId = user.user.id;
+
+  const { huntId, teamId } = await useValidatedParams(
+    event,
+    z.object({
+      huntId: zh.numAsString,
+      teamId: zh.numAsString
+    })
+  );
+
+  const body = await useValidatedBody(
+    event,
+    z.object({
+      name: z.string().min(3).max(256).trim(),
+      description: z.string().max(256).trim().default(''),
+      password: z.string().min(1).max(256).trim()
+    })
+  );
+
+  // Only the team owner may edit the team
+  const team = await prisma.huntTeam.findFirst({
+    where: {
+      id: teamId,
+      huntId,
+      ownerId: userId
+    },
+    select: {
+      id: true
+    }
+  });
+
+  if (!team) {
+    throw createError({ status: 403, statusText: 'Not allowed!' });
+  }
+
+  return await prisma.huntTeam.update({
+    where: {
+      id: teamId
+    },
+    data: {
+      name: body.name,
+      description: body.description,
+      password: body.password
+    },
+    select: {
+      id: true,
+      name: true,
+      description: true,
+      password: true
+    }
+  });
+});

server/api/hunt/[huntId]/team/[teamId]/kick.post.ts

@@ -0,0 +1,60 @@
+import { useValidatedBody, useValidatedParams, z, zh } from 'h3-zod';
+import prisma from '~~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  const user = await requireUserSession(event);
+  const userId = user.user.id;
+
+  const { huntId, teamId } = await useValidatedParams(
+    event,
+    z.object({
+      huntId: zh.numAsString,
+      teamId: zh.numAsString
+    })
+  );
+
+  const { userId: memberId } = await useValidatedBody(
+    event,
+    z.object({
+      userId: z.int().gt(0)
+    })
+  );
+
+  // Only the team owner may remove members
+  const team = await prisma.huntTeam.findFirst({
+    where: {
+      id: teamId,
+      huntId,
+      ownerId: userId
+    },
+    select: {
+      id: true
+    }
+  });
+
+  if (!team) {
+    throw createError({ status: 403, statusText: 'Not allowed!' });
+  }
+
+  if (memberId === userId) {
+    throw createError({
+      status: 400,
+      statusText: 'Owner cannot kick themselves!'
+    });
+  }
+
+  try {
+    await prisma.teamMember.delete({
+      where: {
+        memberId_teamId: {
+          memberId,
+          teamId
+        }
+      }
+    });
+  } catch (e) {
+    throw createError({ status: 404, statusText: 'Not found!', cause: e });
+  }
+
+  return { success: true };
+});

server/api/hunt/[huntId]/team/index.get.ts

@@ -0,0 +1,65 @@
+import { useValidatedParams, z, zh } from 'h3-zod';
+import prisma from '~~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  const user = await requireUserSession(event);
+  const userId = user.user.id;
+
+  const { huntId } = await useValidatedParams(
+    event,
+    z.object({
+      huntId: zh.numAsString
+    })
+  );
+
+  const team = await prisma.huntTeam.findFirst({
+    where: {
+      huntId,
+      OR: [
+        {
+          ownerId: userId
+        },
+        {
+          members: {
+            some: {
+              memberId: userId
+            }
+          }
+        }
+      ]
+    },
+    select: {
+      id: true,
+      name: true,
+      description: true,
+      password: true,
+      ownerId: true,
+      createdAt: true,
+      owner: {
+        select: {
+          id: true,
+          name: true
+        }
+      },
+      members: {
+        select: {
+          member: {
+            select: {
+              id: true,
+              name: true
+            }
+          }
+        },
+        orderBy: {
+          createdAt: 'asc'
+        }
+      }
+    }
+  });
+
+  if (!team) {
+    throw createError({ status: 404, statusText: 'Not found!' });
+  }
+
+  return team;
+});

server/api/hunt/[huntId]/team/leave.delete.ts

@@ -0,0 +1,58 @@
+import { useValidatedParams, z, zh } from 'h3-zod';
+import prisma from '~~/lib/prisma';
+
+export default defineEventHandler(async (event) => {
+  const user = await requireUserSession(event);
+  const userId = user.user.id;
+
+  const { huntId } = await useValidatedParams(
+    event,
+    z.object({
+      huntId: zh.numAsString
+    })
+  );
+
+  // Find the team the user is a member of (but not the owner)
+  const membership = await prisma.teamMember.findFirst({
+    where: {
+      memberId: userId,
+      team: {
+        huntId,
+        ownerId: {
+          not: userId
+        }
+      }
+    },
+    select: {
+      memberId: true,
+      teamId: true
+    }
+  });
+
+  if (!membership) {
+    // Either the user has no team in this hunt, or they are the owner.
+    // Owners cannot leave their own team (they must delete it instead).
+    const isOwner = await prisma.huntTeam.findFirst({
+      where: {
+        huntId,
+        ownerId: userId
+      },
+      select: {
+        id: true
+      }
+    });
+
+    throw createError({
+      status: isOwner ? 403 : 404,
+      statusText: isOwner ? 'Owner cannot leave the team!' : 'Not found!'
+    });
+  }
+
+  await prisma.teamMember.delete({
+    where: {
+      memberId_teamId: membership
+    }
+  });
+
+  return { success: true };
+});