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>