invite team member

resources/js/pages/team/Create.vue

@@ -9,6 +9,7 @@ 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";
 
 defineOptions({
   layout: {
@@ -42,33 +43,37 @@ watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
 </script>
 
 <template>
-  <Head title="Teams" />
+  <Head title="Teams"/>
 
   <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 items-start">
-        <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" />
-        </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"
-            v-model="form.require_2fa"
-            name="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" />
-          Erstellen
-        </Button>
-      </div>
-    </form>
+    <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 items-start gap-3">
+              <Label for="name">Name</Label>
+              <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"/>
+            <div class="grid items-start gap-3">
+              <Label for="require_2fa">Require 2FA</Label>
+              <Checkbox
+                id="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 :disabled="form.processing || slugTaken" class="w-fit" type="submit">
+              <component :is="Save"/>
+              Erstellen
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
   </div>
 </template>

resources/js/pages/team/Edit.vue

@@ -10,6 +10,7 @@ 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";
 
 const props = defineProps<{
   team: Team;
@@ -48,30 +49,35 @@ watch(() => (form.errors as any).slug, (newError) => slugError.value = newError)
   <Head title="Teams"/>
 
   <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 items-start">
-        <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"/>
-        </div>
-        <TeamSlug :ignored-slug="team.slug" :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"
-            v-model="form.require_2fa"
-            name="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"/>
-          Speichern
-        </Button>
-      </div>
-    </form>
+    <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 items-start gap-3">
+              <Label for="name">Name</Label>
+              <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"/>
+            <div class="grid items-start gap-3">
+              <Label for="require_2fa">Require 2FA</Label>
+              <Checkbox
+                id="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 :disabled="form.processing || slugTaken" class="w-fit" type="submit">
+              <component :is="Save"/>
+              Speichern
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
   </div>
 </template>

resources/js/pages/team/invite/Create.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import teamRoutes from '@/routes/teams';
+import {Form, Head, useForm} from '@inertiajs/vue3';
+import {Card, CardContent} from "@/components/ui/card";
+import {Input} from "@/components/ui/input";
+import InputError from "@/components/InputError.vue";
+import {Button} from "@/components/ui/button";
+
+defineOptions({
+  layout: {
+    breadcrumbs: [
+      {
+        title: 'Teams',
+        href: teamRoutes.index(),
+      },
+      {
+        title: 'Invite',
+        href: teamRoutes.invite.create(),
+      },
+    ],
+  },
+});
+
+const props = defineProps<{
+  inviteToken?: string,
+}>()
+
+const form = useForm({
+  inviteToken: props.inviteToken
+})
+
+const submit = () => form.post(teamRoutes.invite.store().url)
+
+</script>
+
+<template>
+  <Head title="Team Invite"/>
+
+  <div class="flex flex-col justify-center p-16">
+    <Card class="w-full">
+      <CardContent>
+        <h1 class="font-bold text-2xl">Team Einladung</h1>
+        <form class="grid gap-y-3" @submit.prevent="submit">
+          <div class="grid items-start gap-3">
+            <Input id="inviteToken" v-model="form.inviteToken" name="inviteToken" placeholder="Token"/>
+            <InputError :message="form.errors.inviteToken"/>
+          </div>
+          <div class="w-full flex justify-end">
+
+            <Button :disabled="form.processing" type="submit">Team Beitreten</Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  </div>
+</template>