Team Invite

resources/js/pages/team/Show.vue

@@ -1,19 +1,14 @@
 <script lang="ts" setup>
 import teamRoutes from '@/routes/teams';
-import { Head, Link, setLayoutProps, useForm } from '@inertiajs/vue3';
-import type { Team, TeamInvite } from '@/types/models';
+import {Form, Head, Link, setLayoutProps, useForm} from '@inertiajs/vue3';
+import type {Team, TeamInvite} from '@/types/models';
 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';
+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, Plus, Trash} from '@lucide/vue';
+import {Input} from "@/components/ui/input";
+import {Label} from "@/components/ui/label";
 
 const props = defineProps<{
   team: Team;
@@ -34,7 +29,7 @@ setLayoutProps({
   ],
 });
 
-const revokeForm = useForm({ email: '' });
+const revokeForm = useForm({email: ''});
 
 function revokeInvite(invite: TeamInvite): void {
   if (revokeForm.processing) {
@@ -42,7 +37,7 @@ function revokeInvite(invite: TeamInvite): void {
   }
 
   revokeForm.email = invite.invitedEmail;
-  revokeForm.submit(teamRoutes.invite.revoke({ team: props.team.slug }), {
+  revokeForm.submit(teamRoutes.invite.revoke({team: props.team.slug}), {
     preserveScroll: true,
   });
 }
@@ -50,11 +45,11 @@ function revokeInvite(invite: TeamInvite): void {
 
 <template>
   <div class="flex flex-col justify-center p-16">
-    <Head title="Teams" />
+    <Head title="Teams"/>
     <div v-if="canManageTeam" class="flex w-full justify-end py-4">
       <Link :href="teamRoutes.edit({ team: team.slug })">
         <Button>
-          <component :is="Pencil" />
+          <component :is="Pencil"/>
           Bearbeiten
         </Button>
       </Link>
@@ -72,8 +67,9 @@ function revokeInvite(invite: TeamInvite): void {
             <TableRow>
               <TableCell class="font-bold">Erfordert 2FA:</TableCell>
               <TableCell>{{
-                team.multi_factor_required ? 'Ja' : 'Nein'
-              }}</TableCell>
+                  team.multi_factor_required ? 'Ja' : 'Nein'
+                }}
+              </TableCell>
             </TableRow>
             <TableRow>
               <TableCell class="font-bold">Erstellt am:</TableCell>
@@ -101,8 +97,9 @@ function revokeInvite(invite: TeamInvite): void {
               <TableCell>{{ member.name }}</TableCell>
               <TableCell>{{ member.email }}</TableCell>
               <TableCell>{{
-                member.has_multi_factor ? 'Ja' : 'Nein'
-              }}</TableCell>
+                  member.has_multi_factor ? 'Ja' : 'Nein'
+                }}
+              </TableCell>
               <TableCell>{{ member.role }}</TableCell>
               <TableCell>{{ member.joined_at }}</TableCell>
             </TableRow>
@@ -112,8 +109,28 @@ function revokeInvite(invite: TeamInvite): void {
     </Card>
     <Card v-if="teamInvites" class="mb-8 w-full">
       <CardContent>
-        <h2 class="text-lg font-semibold">Ausstehende Invites</h2>
-        <InputError :message="revokeForm.errors.email" />
+        <div class="flex justify-between">
+          <h2 class="text-lg font-semibold">Ausstehende Invites</h2>
+          <Card class="border-neutral-500 b-2">
+            <CardContent>
+              <Form v-slot="{ errors, processing }" :action="teamRoutes.invite.invite({team: team.slug})"
+                    class="flex gap-2 justify-end items-end"
+                    method="POST"
+              >
+                <div class="grid gap-y-2">
+                  <Label for="email">Email:</Label>
+                  <Input id="email" name="email" placeholder="user@example.com" type="email"/>
+                  <InputError :message="errors.email"/>
+                </div>
+                <Button :disabled="processing" type="submit" variant="secondary">
+                  <component :is="Plus"/>
+                  Einladen
+                </Button>
+              </Form>
+            </CardContent>
+          </Card>
+        </div>
+        <InputError :message="revokeForm.errors.email"/>
         <Table>
           <TableHeader>
             <TableRow>
@@ -129,14 +146,14 @@ function revokeInvite(invite: TeamInvite): void {
               <TableCell>{{ invite.invitedAt }}</TableCell>
               <TableCell>
                 <Button
+                  :aria-label="`Einladung für ${invite.invitedEmail} widerrufen`"
+                  :disabled="revokeForm.processing"
+                  size="icon"
                   type="button"
                   variant="ghost"
-                  size="icon"
-                  :disabled="revokeForm.processing"
-                  :aria-label="`Einladung für ${invite.invitedEmail} widerrufen`"
                   @click="revokeInvite(invite)"
                 >
-                  <Trash :size="18" />
+                  <Trash :size="18"/>
                 </Button>
               </TableCell>
             </TableRow>