Team Invite

app/Http/Controllers/TeamController.php

@@ -130,42 +130,4 @@ class TeamController extends Controller
             'taken' => $this->isReserved($slug) || ($slug !== $ignoredSlug && Team::whereSlug($slug)->exists()),
         ]);
     }
-
-    public function invite(Request $request, Team $team)
-    {
-        $validated = $request->validate([
-            'email' => 'required|email|max:255',
-        ]);
-
-        abort_unless(auth()->user()->can('manage', $team), 403);
-
-        $team->invites()->create([
-            'invited_email' => Arr::get($validated, 'email'),
-            'invited_by_user_id' => auth()->user()->id,
-        ]);
-
-        Inertia::flash('success', 'User invited to your team.');
-    }
-
-    public function revokeInvite(Request $request, Team $team): RedirectResponse
-    {
-        $validated = $request->validate([
-            'email' => 'required|email|max:255',
-        ]);
-
-        $teamInvite = $team->invites()->whereInvitedEmail(Arr::get($validated, 'email'))->firstOrFail();
-
-        try {
-            $teamInvite->delete();
-        } catch (\Exception $exception) {
-            report($exception);
-            Inertia::flash('error', 'could not delete user invite.');
-
-            return to_route('teams.show', $team);
-        }
-
-        Inertia::flash('success', 'successfully deleted user invite.');
-
-        return to_route('teams.show', $team);
-    }
 }

app/Http/Controllers/TeamInviteController.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Team;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Arr;
+use Inertia\Inertia;
+
+class TeamInviteController extends Controller
+{
+
+    public function store(Request $request, Team $team)
+    {
+        $validated = $request->validate([
+            'email' => 'required|email|max:255',
+        ]);
+
+        abort_unless(auth()->user()->can('manage', $team), 403);
+
+        $team->invites()->create([
+            'invited_email' => Arr::get($validated, 'email'),
+            'invited_by_user_id' => auth()->user()->id,
+        ]);
+
+        Inertia::flash('success', 'User invited to your team.');
+    }
+
+    public function destroy(Request $request, Team $team): RedirectResponse
+    {
+        $validated = $request->validate([
+            'email' => 'required|email|max:255',
+        ]);
+
+        $teamInvite = $team->invites()->whereInvitedEmail(Arr::get($validated, 'email'))->firstOrFail();
+
+        try {
+            $teamInvite->delete();
+        } catch (\Exception $exception) {
+            report($exception);
+            Inertia::flash('error', 'could not delete user invite.');
+
+            return to_route('teams.show', $team);
+        }
+
+        Inertia::flash('success', 'successfully deleted user invite.');
+
+        return to_route('teams.show', $team);
+    }
+}

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>

routes/web.php

@@ -2,6 +2,7 @@
 
 use App\Http\Controllers\TeamController;
 use App\Http\Controllers\TeamInviteAcceptController;
+use App\Http\Controllers\TeamInviteController;
 use App\Models\Team;
 use Illuminate\Support\Facades\Route;
 
@@ -14,8 +15,8 @@ Route::middleware(['auth'])->group(function () {
         Route::name('invite.')->group(function () {
             Route::get('invite/accept', [TeamInviteAcceptController::class, 'create'])->name('create');
             Route::post('invite/accept', [TeamInviteAcceptController::class, 'store'])->name('store');
-            Route::post('{team:slug}/invite', [TeamController::class, 'invite'])->name('invite');
-            Route::post('{team:slug}/invite/revoke', [TeamController::class, 'revokeInvite'])->name('revoke')->can('manage', 'team');
+            Route::post('{team:slug}/invite', [TeamInviteController::class, 'store'])->name('invite');
+            Route::post('{team:slug}/invite/revoke', [TeamInviteController::class, 'destroy'])->name('revoke')->can('manage', 'team');
         });
 
         Route::get('/', 'index')->name('index');