Fix team authorization, invite revocation, and slug handling

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>