Fix team authorization, invite revocation, and slug handling

resources/js/components/TeamSlug.vue

@@ -1,53 +1,70 @@
 <script lang="ts" setup>
-import teamRoutes from '@/routes/teams';
+import { useHttp } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+import InputError from '@/components/InputError.vue';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { nameToSlug } from '@/routes/teams';
+import type {
+  TeamSlugProps,
+  TeamSlugRequest,
+  TeamSlugResponse,
+} from '@/types/team';
 
-import InputError from "@/components/InputError.vue";
-import {Label} from "@/components/ui/label";
-import {Input} from "@/components/ui/input";
-import {watch} from "vue";
-
-type nameToSlugResponse = {
-  name: string;
-  slug: string;
-  taken: boolean;
-}
-
-const props = defineProps<{ name: string, ignoredSlug?: string }>()
-
-const slug = defineModel<string>('slug', {
-  required: true,
-});
-const slugTaken = defineModel<boolean>('slugTaken', {
-  required: true,
-});
-const slugError = defineModel<string>('slugError', {
-  required: true,
+const props = defineProps<TeamSlugProps>();
+const slug = defineModel<string>('slug', { required: true });
+const slugTaken = defineModel<boolean>('slugTaken', { required: true });
+const previewError = ref('');
+const http = useHttp<TeamSlugRequest, TeamSlugResponse>({
+  name: '',
+  ignored_slug: null,
 });
 
-watch(() => props.name, (newName) => fetch(teamRoutes.nameToSlug().url, {
-    method: 'POST',
-    headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({name: newName, ignored_slug: props.ignoredSlug})
-  }).then(async (response) => {
-    slugError.value = ''
-    console.info(response)
-    const body = (await response.json()) as unknown as nameToSlugResponse;
-    console.info(body)
-    slug.value = body.slug;
-    slugTaken.value = body.taken;
-    if (slugTaken.value) {
-      slugError.value = 'Der Slug ist bereits vergeben.'
-    }
-  }).catch(() => slugError.value = 'Failed to Fetch new slug')
-)
+watch(
+  () => props.name,
+  (name, _previous, onCleanup) => {
+    let active = true;
+    slugTaken.value = false;
+    previewError.value = '';
 
+    const timer = setTimeout(async () => {
+      if (!name.trim()) {
+        slug.value = '';
+        return;
+      }
+
+      http.name = name;
+      http.ignored_slug = props.ignoredSlug ?? null;
+
+      try {
+        const response = await http.submit(nameToSlug());
+        if (active) {
+          slug.value = response.slug;
+          slugTaken.value = response.taken;
+          previewError.value = response.taken
+            ? 'Der Slug ist bereits vergeben.'
+            : '';
+        }
+      } catch {
+        if (active) {
+          previewError.value = 'Die Slug-Vorschau konnte nicht geladen werden.';
+        }
+      }
+    }, 250);
+
+    onCleanup(() => {
+      active = false;
+      clearTimeout(timer);
+      http.cancel();
+    });
+  },
+);
 </script>
 
 <template>
   <div class="grid items-start gap-3">
     <Label for="slug">Slug</Label>
-    <Input id="slug" v-model="slug" disabled name="slug"/>
-    <InputError :message="slugError"/>
+    <Input id="slug" :model-value="slug" disabled name="slug" />
+    <InputError :message="error || previewError" />
   </div>
 </template>
-

resources/js/pages/team/Create.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import teamRoutes from '@/routes/teams';
-import {Save} from '@lucide/vue';
-import {Head, useForm} from '@inertiajs/vue3';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
+import { Save } from '@lucide/vue';
+import { Head, useForm } from '@inertiajs/vue3';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import InputError from '@/components/InputError.vue';
-import {Checkbox} from '@/components/ui/checkbox';
-import {ref, watch} from "vue";
-import TeamSlug from "@/components/TeamSlug.vue";
-import {Card, CardContent} from "@/components/ui/card";
+import { Checkbox } from '@/components/ui/checkbox';
+import { ref } from 'vue';
+import TeamSlug from '@/components/TeamSlug.vue';
+import { Card, CardContent } from '@/components/ui/card';
 
 defineOptions({
   layout: {
@@ -26,36 +26,37 @@ defineOptions({
   },
 });
 
-const slug = ref('');
 const slugTaken = ref(false);
-const slugError = ref<string>('');
 
 const form = useForm({
   name: '',
+  slug: '',
   require_2fa: false,
 });
 
 function submit(): void {
   form.submit(teamRoutes.store());
 }
-
-watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
 </script>
 
 <template>
-  <Head title="Teams"/>
-
   <div class="flex flex-col justify-center p-16">
+    <Head title="Teams" />
     <Card class="w-full">
       <CardContent>
         <form class="grid w-full gap-5 py-4" @submit.prevent="submit">
-          <div class="grid grid-cols-2 gap-5 items-start">
+          <div class="grid grid-cols-2 items-start gap-5">
             <div class="grid items-start gap-3">
               <Label for="name">Name</Label>
-              <Input id="name" v-model="form.name" name="name"/>
-              <InputError :message="form.errors.name"/>
+              <Input id="name" v-model="form.name" name="name" />
+              <InputError :message="form.errors.name" />
             </div>
-            <TeamSlug :name="form.name" :slug="slug" :slug-error="slugError" :slug-taken="slugTaken"/>
+            <TeamSlug
+              :name="form.name"
+              v-model:slug="form.slug"
+              :error="form.errors.slug"
+              v-model:slug-taken="slugTaken"
+            />
             <div class="grid items-start gap-3">
               <Label for="require_2fa">Require 2FA</Label>
               <Checkbox
@@ -63,12 +64,16 @@ watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
                 v-model="form.require_2fa"
                 name="require_2fa"
               />
-              <InputError :message="form.errors.require_2fa"/>
+              <InputError :message="form.errors.require_2fa" />
             </div>
           </div>
           <div class="flex w-full justify-end">
-            <Button :disabled="form.processing || slugTaken" class="w-fit" type="submit">
-              <component :is="Save"/>
+            <Button
+              :disabled="form.processing || slugTaken"
+              class="w-fit"
+              type="submit"
+            >
+              <component :is="Save" />
               Erstellen
             </Button>
           </div>

resources/js/pages/team/Edit.vue

@@ -1,20 +1,18 @@
 <script lang="ts" setup>
 import teamRoutes from '@/routes/teams';
-import {Save} from '@lucide/vue';
-import {Head, setLayoutProps, useForm} from '@inertiajs/vue3';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
+import { Save } from '@lucide/vue';
+import { Head, setLayoutProps, useForm } from '@inertiajs/vue3';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import InputError from '@/components/InputError.vue';
-import {Checkbox} from '@/components/ui/checkbox';
-import {Team} from '@/types/models';
-import {ref, watch} from "vue";
-import TeamSlug from "@/components/TeamSlug.vue";
-import {Card, CardContent} from "@/components/ui/card";
+import { Checkbox } from '@/components/ui/checkbox';
+import type { TeamEditPageProps } from '@/types/page-props';
+import { ref } from 'vue';
+import TeamSlug from '@/components/TeamSlug.vue';
+import { Card, CardContent } from '@/components/ui/card';
 
-const props = defineProps<{
-  team: Team;
-}>();
+const props = defineProps<TeamEditPageProps>();
 
 setLayoutProps({
   breadcrumbs: [
@@ -24,42 +22,43 @@ setLayoutProps({
     },
     {
       title: props.team.name,
-      href: teamRoutes.create(),
+      href: teamRoutes.show({ team: props.team.slug }),
     },
   ],
 });
 
-const slug = ref(props.team.slug);
 const slugTaken = ref(false);
-const slugError = ref<string>('');
 
 const form = useForm({
   name: props.team.name,
+  slug: props.team.slug,
   require_2fa: props.team.multi_factor_required,
 });
 
 function submit(): void {
-  form.patch(teamRoutes.update({team: props.team.slug}).url);
+  form.patch(teamRoutes.update({ team: props.team.slug }).url);
 }
-
-watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
 </script>
 
 <template>
-  <Head title="Teams"/>
-
   <div class="flex flex-col justify-center p-16">
+    <Head title="Teams" />
     <Card class="w-full">
       <CardContent>
         <form class="grid w-full gap-5 py-4" @submit.prevent="submit">
-          <div class="grid grid-cols-2 gap-5 items-start">
+          <div class="grid grid-cols-2 items-start gap-5">
             <div class="grid items-start gap-3">
               <Label for="name">Name</Label>
-              <Input id="name" v-model="form.name" name="name"/>
-              <InputError :message="form.errors.name"/>
+              <Input id="name" v-model="form.name" name="name" />
+              <InputError :message="form.errors.name" />
             </div>
-            <TeamSlug :ignored-slug="team.slug" :name="form.name" :slug="slug" :slug-error="slugError"
-                      :slug-taken="slugTaken"/>
+            <TeamSlug
+              :ignored-slug="team.slug"
+              :name="form.name"
+              v-model:slug="form.slug"
+              :error="form.errors.slug"
+              v-model:slug-taken="slugTaken"
+            />
             <div class="grid items-start gap-3">
               <Label for="require_2fa">Require 2FA</Label>
               <Checkbox
@@ -67,12 +66,16 @@ watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
                 v-model="form.require_2fa"
                 name="require_2fa"
               />
-              <InputError :message="form.errors.require_2fa"/>
+              <InputError :message="form.errors.require_2fa" />
             </div>
           </div>
           <div class="flex w-full justify-end">
-            <Button :disabled="form.processing || slugTaken" class="w-fit" type="submit">
-              <component :is="Save"/>
+            <Button
+              :disabled="form.processing || slugTaken"
+              class="w-fit"
+              type="submit"
+            >
+              <component :is="Save" />
               Speichern
             </Button>
           </div>

resources/js/pages/team/Index.vue

@@ -1,12 +1,21 @@
 <script lang="ts" setup>
 import teamRoutes from '@/routes/teams';
-import {Head, Link, router, usePage} from '@inertiajs/vue3';
-import type {Team} from '@/types/models';
+import { Head, Link, router, usePage } from '@inertiajs/vue3';
+import type { Team } from '@/types/models';
+import type { TeamIndexPageProps } from '@/types/page-props';
 import TextLink from '@/components/TextLink.vue';
-import {Card, CardContent} from '@/components/ui/card';
-import {Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
-import {Button} from '@/components/ui/button';
-import {Eye, Pencil, Plus} from '@lucide/vue';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Eye, Pencil, Plus } from '@lucide/vue';
 
 defineOptions({
   layout: {
@@ -19,27 +28,24 @@ defineOptions({
   },
 });
 
-defineProps<{
-  teams: Team[];
-}>();
+defineProps<TeamIndexPageProps>();
 
 const user = usePage().props.auth.user;
 
 const openTeam = (team: Team) =>
-  router.visit(teamRoutes.show({team: team.slug}).url);
+  router.visit(teamRoutes.show({ team: team.slug }).url);
 
 const canManageTeam = (team: Team) =>
   team.members.find((member) => member.email === user.email)?.role === 'admin';
 </script>
 
 <template>
-  <Head title="Teams"/>
-
   <div class="flex flex-col justify-center p-16">
+    <Head title="Teams" />
     <div class="flex w-full justify-end py-4">
       <Link :href="teamRoutes.create()">
         <Button>
-          <component :is="Plus"/>
+          <component :is="Plus" />
           Erstellen
         </Button>
       </Link>
@@ -59,25 +65,34 @@ const canManageTeam = (team: Team) =>
           <TableBody>
             <TableRow
               v-for="team in teams"
-              v-if="teams.length > 0"
               :key="team.slug"
               role="link"
               tabindex="0"
               @click="openTeam(team)"
+              @keydown.enter.self="openTeam(team)"
             >
               <TableCell>{{ team.name }}</TableCell>
               <TableCell>{{ team.slug }}</TableCell>
               <TableCell>{{ team.members.length }}</TableCell>
-              <TableCell>{{ team.multi_factor_required ? 'Ja' : 'Nein' }}</TableCell>
-              <Link
-                :href="(canManageTeam(team) ? teamRoutes.edit : teamRoutes.show)({ team: team.slug })"
-                class="cursor-pointer"
-                @click.stop
-              >
-                <TableCell>
-                  <component :is="canManageTeam(team) ? Pencil : Eye" size="18"/>
-                </TableCell>
-              </Link>
+              <TableCell>{{
+                team.multi_factor_required ? 'Ja' : 'Nein'
+              }}</TableCell>
+              <TableCell>
+                <Link
+                  :href="
+                    (canManageTeam(team) ? teamRoutes.edit : teamRoutes.show)({
+                      team: team.slug,
+                    })
+                  "
+                  class="cursor-pointer"
+                  @click.stop
+                >
+                  <component
+                    :is="canManageTeam(team) ? Pencil : Eye"
+                    size="18"
+                  />
+                </Link>
+              </TableCell>
             </TableRow>
           </TableBody>
           <TableCaption v-if="teams.length <= 0">

resources/js/pages/team/Show.vue

@@ -1,17 +1,22 @@
 <script lang="ts" setup>
 import teamRoutes from '@/routes/teams';
-import {Head, Link, setLayoutProps} from '@inertiajs/vue3';
-import type {Team, TeamInvite} from '@/types/models';
-import {Card, CardContent} from '@/components/ui/card';
-import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from '@/components/ui/table';
-import {Button} from '@/components/ui/button';
-import {Pencil, Trash} from '@lucide/vue';
+import { Head, Link, setLayoutProps, useForm } from '@inertiajs/vue3';
+import type { TeamInvite } from '@/types/models';
+import type { TeamShowPageProps } from '@/types/page-props';
+import InputError from '@/components/InputError.vue';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import { Pencil, Trash } from '@lucide/vue';
 
-const props = defineProps<{
-  team: Team;
-  canManageTeam: boolean;
-  teamInvites?: TeamInvite[];
-}>();
+const props = defineProps<TeamShowPageProps>();
 
 setLayoutProps({
   breadcrumbs: [
@@ -26,51 +31,58 @@ setLayoutProps({
   ],
 });
 
-const revokeInvite = (teamInvite: TeamInvite) => fetch(teamRoutes.invite.revoke(teamInvite.team.slug).url, {
-  method: 'POST',
-  headers: {'Content-Type': 'application/json'},
-  body: JSON.stringify({email: teamInvite.invitedEmail})
-})
+const revokeForm = useForm({ email: '' });
 
+function revokeInvite(invite: TeamInvite): void {
+  if (revokeForm.processing) {
+    return;
+  }
+
+  revokeForm.email = invite.invitedEmail;
+  revokeForm.submit(teamRoutes.invite.revoke({ team: props.team.slug }), {
+    preserveScroll: true,
+  });
+}
 </script>
 
 <template>
-  <Head title="Teams"/>
-
   <div class="flex flex-col justify-center p-16">
+    <Head title="Teams" />
     <div v-if="canManageTeam" class="flex w-full justify-end py-4">
-      <Link :href="teamRoutes.edit({team: team.slug})">
+      <Link :href="teamRoutes.edit({ team: team.slug })">
         <Button>
-          <component :is="Pencil"/>
+          <component :is="Pencil" />
           Bearbeiten
         </Button>
       </Link>
     </div>
 
-    <Card class="w-full mb-8">
+    <Card class="mb-8 w-full">
       <CardContent class="flex flex-col">
-        <h1 class="font-semibold text-2xl">{{ team.name }}</h1>
+        <h1 class="text-2xl font-semibold">{{ team.name }}</h1>
         <Table>
-          <TableBody class="[&_td]:py-0 [&_tr]:border-0 text-gray-500 text-sm">
+          <TableBody class="text-sm text-gray-500 [&_td]:py-0 [&_tr]:border-0">
             <TableRow>
-              <TableCell class="font-bold ">Slug:</TableCell>
+              <TableCell class="font-bold">Slug:</TableCell>
               <TableCell>{{ team.slug }}</TableCell>
             </TableRow>
             <TableRow>
-              <TableCell class="font-bold ">Erfordert 2FA:</TableCell>
-              <TableCell>{{ team.multi_factor_required ? 'Ja' : 'Nein' }}</TableCell>
+              <TableCell class="font-bold">Erfordert 2FA:</TableCell>
+              <TableCell>{{
+                team.multi_factor_required ? 'Ja' : 'Nein'
+              }}</TableCell>
             </TableRow>
             <TableRow>
-              <TableCell class="font-bold ">Erstellt am:</TableCell>
+              <TableCell class="font-bold">Erstellt am:</TableCell>
               <TableCell>{{ team.created_at }}</TableCell>
             </TableRow>
           </TableBody>
         </Table>
       </CardContent>
     </Card>
-    <Card class="w-full mb-8">
+    <Card class="mb-8 w-full">
       <CardContent>
-        <h2 class="font-semibold text-lg">Mitglieder</h2>
+        <h2 class="text-lg font-semibold">Mitglieder</h2>
         <Table>
           <TableHeader>
             <TableRow>
@@ -82,10 +94,12 @@ const revokeInvite = (teamInvite: TeamInvite) => fetch(teamRoutes.invite.revoke(
             </TableRow>
           </TableHeader>
           <TableBody>
-            <TableRow v-for="member in team.members">
+            <TableRow v-for="member in team.members" :key="member.email">
               <TableCell>{{ member.name }}</TableCell>
               <TableCell>{{ member.email }}</TableCell>
-              <TableCell>{{ member.has_multi_factor ? 'Ja' : 'Nein' }}</TableCell>
+              <TableCell>{{
+                member.has_multi_factor ? 'Ja' : 'Nein'
+              }}</TableCell>
               <TableCell>{{ member.role }}</TableCell>
               <TableCell>{{ member.joined_at }}</TableCell>
             </TableRow>
@@ -93,9 +107,10 @@ const revokeInvite = (teamInvite: TeamInvite) => fetch(teamRoutes.invite.revoke(
         </Table>
       </CardContent>
     </Card>
-    <Card v-if="teamInvites" class="w-full mb-8">
+    <Card v-if="teamInvites" class="mb-8 w-full">
       <CardContent>
-        <h2 class="font-semibold text-lg">Ausstehende Invites</h2>
+        <h2 class="text-lg font-semibold">Ausstehende Invites</h2>
+        <InputError :message="revokeForm.errors.email" />
         <Table>
           <TableHeader>
             <TableRow>
@@ -105,19 +120,22 @@ const revokeInvite = (teamInvite: TeamInvite) => fetch(teamRoutes.invite.revoke(
             </TableRow>
           </TableHeader>
           <TableBody>
-            <TableRow v-for="invite in teamInvites">
+            <TableRow v-for="invite in teamInvites" :key="invite.invitedEmail">
               <TableCell>{{ invite.invitedEmail }}</TableCell>
               <TableCell>{{ invite.invitedBy.name }}</TableCell>
               <TableCell>{{ invite.invitedAt }}</TableCell>
-              <Link
-                :href="teamRoutes.invite.revoke({team: invite.team.slug})"
-                class="cursor-pointer"
-                @click="revokeInvite(invite)"
-              >
-                <TableCell>
-                  <component :is="Trash" size="18"/>
-                </TableCell>
-              </Link>
+              <TableCell>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  :disabled="revokeForm.processing"
+                  :aria-label="`Einladung für ${invite.invitedEmail} widerrufen`"
+                  @click="revokeInvite(invite)"
+                >
+                  <Trash :size="18" />
+                </Button>
+              </TableCell>
             </TableRow>
           </TableBody>
         </Table>

resources/js/types/models.ts

@@ -3,7 +3,7 @@ export interface Team {
   slug: string;
   members: TeamMember[];
   multi_factor_required: boolean;
-  created_at: string
+  created_at: string;
 }
 
 export type TeamMemberRole = 'admin' | 'member';
@@ -21,7 +21,6 @@ export interface TeamMember extends User {
 
 export interface TeamInvite {
   invitedEmail: string;
-  team: Team;
   invitedBy: User;
   invitedAt: string;
 }

resources/js/types/page-props.ts

@@ -0,0 +1,15 @@
+import type { Team, TeamInvite } from '@/types/models';
+
+export type TeamEditPageProps = {
+  team: Team;
+};
+
+export type TeamShowPageProps = {
+  team: Team;
+  canManageTeam: boolean;
+  teamInvites?: TeamInvite[];
+};
+
+export type TeamIndexPageProps = {
+  teams: Team[];
+};

resources/js/types/team.ts

@@ -0,0 +1,16 @@
+export type TeamSlugProps = {
+  name: string;
+  ignoredSlug?: string;
+  error?: string;
+};
+
+export type TeamSlugRequest = {
+  name: string;
+  ignored_slug: string | null;
+};
+
+export type TeamSlugResponse = {
+  name: string;
+  slug: string;
+  taken: boolean;
+};