show slug in form

resources/js/pages/team/Create.vue

@@ -1,12 +1,14 @@
-<script setup lang="ts">
+<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 {Checkbox} from '@/components/ui/checkbox';
+import {ref, watch} from "vue";
+import TeamSlug from "@/components/TeamSlug.vue";
 
 defineOptions({
   layout: {
@@ -23,6 +25,10 @@ defineOptions({
   },
 });
 
+const slug = ref('');
+const slugTaken = ref(false);
+const slugError = ref<string>('');
+
 const form = useForm({
   name: '',
   require_2fa: false,
@@ -31,6 +37,8 @@ const form = useForm({
 function submit(): void {
   form.submit(teamRoutes.store());
 }
+
+watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
 </script>
 
 <template>
@@ -38,25 +46,25 @@ function submit(): void {
 
   <div class="flex flex-col justify-center p-16">
     <form class="grid w-full gap-5 py-4" @submit.prevent="submit">
-      <div class="grid grid-cols-2 gap-5">
+      <div class="grid grid-cols-2 gap-5 items-start">
         <div class="grid items-start gap-3">
           <Label for="name">Name</Label>
-          <Input id="name" name="name" v-model="form.name" />
+          <Input id="name" v-model="form.name" name="name" />
           <InputError :message="form.errors.name" />
-          <InputError :message="(form.errors as any).slug" />
         </div>
+        <TeamSlug :name="form.name" :slug="slug" :slug-error="slugError" :slug-taken="slugTaken" />
         <div class="grid items-start gap-3">
           <Label for="require_2fa">Require 2FA</Label>
           <Checkbox
             id="require_2fa"
-            name="require_2fa"
             v-model="form.require_2fa"
+            name="require_2fa"
           />
           <InputError :message="form.errors.require_2fa" />
         </div>
       </div>
       <div class="flex w-full justify-end">
-        <Button type="submit" class="w-fit" :disabled="form.processing">
+        <Button :disabled="form.processing || slugTaken" class="w-fit" type="submit">
           <component :is="Save" />
           Erstellen
         </Button>