Fix team authorization, invite revocation, and slug handling

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>