#591 - api keys

app/Http/Controllers/ApiKeyController.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Resources\ApiKeyResource;
+use App\Models\PersonalAccessToken;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+use Spatie\RouteAttributes\Attributes\Delete;
+use Spatie\RouteAttributes\Attributes\Get;
+use Spatie\RouteAttributes\Attributes\Middleware;
+use Spatie\RouteAttributes\Attributes\Post;
+use Spatie\RouteAttributes\Attributes\Prefix;
+
+#[Prefix('settings/api-keys')]
+#[Middleware(['auth'])]
+class ApiKeyController extends Controller
+{
+    #[Get('/', name: 'api-keys')]
+    public function index(): Response
+    {
+        $this->authorize('viewAny', PersonalAccessToken::class);
+
+        return Inertia::render('api-keys/index', [
+            'apiKeys' => ApiKeyResource::collection(user()->tokens()->simplePaginate(config('web.pagination_size'))),
+        ]);
+    }
+
+    #[Post('/', name: 'api-keys.store')]
+    public function store(Request $request): RedirectResponse
+    {
+        $this->authorize('create', PersonalAccessToken::class);
+
+        $this->validate($request, [
+            'name' => 'required|string|max:255',
+            'permission' => 'required|in:read,write',
+        ]);
+
+        $permissions = ['read'];
+        if ($request->input('permission') === 'write') {
+            $permissions[] = 'write';
+        }
+        $token = user()->createToken($request->input('name'), $permissions);
+
+        return back()
+            ->with('success', 'Api key created.')
+            ->with('data', [
+                'token' => $token->plainTextToken,
+            ]);
+    }
+
+    #[Delete('/{apiKey}', name: 'api-keys.destroy')]
+    public function destroy(PersonalAccessToken $apiKey): RedirectResponse
+    {
+        $this->authorize('delete', $apiKey);
+
+        $apiKey->delete();
+
+        return back()->with('success', 'Api Key deleted.');
+    }
+}

app/Http/Middleware/HandleInertiaRequests.php

@@ -68,6 +68,10 @@ public function share(Request $request): array
                 'location' => $request->url(),
             ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
+            'flash' => [
+                'success' => fn () => $request->session()->get('success'),
+                'data' => fn () => $request->session()->get('data'),
+            ],
         ];
     }
 }

app/Http/Resources/ApiKeyResource.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Models\PersonalAccessToken;
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+/** @mixin PersonalAccessToken */
+class ApiKeyResource extends JsonResource
+{
+    /**
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return [
+            'id' => $this->id,
+            'name' => $this->name,
+            'permissions' => $this->abilities,
+            'created_at' => $this->created_at,
+            'updated_at' => $this->updated_at,
+        ];
+    }
+}

resources/js/layouts/settings/layout.tsx

@@ -1,5 +1,5 @@
 import { type BreadcrumbItem, type NavItem } from '@/types';
-import { BellIcon, CloudIcon, CodeIcon, DatabaseIcon, KeyIcon, ListIcon, TagIcon, UserIcon, UsersIcon } from 'lucide-react';
+import { BellIcon, CloudIcon, CodeIcon, DatabaseIcon, KeyIcon, ListIcon, PlugIcon, TagIcon, UserIcon, UsersIcon } from 'lucide-react';
 import { ReactNode } from 'react';
 import Layout from '@/layouts/app/layout';
 
@@ -49,6 +49,11 @@ const sidebarNavItems: NavItem[] = [
     href: route('tags'),
     icon: TagIcon,
   },
+  {
+    title: 'API Keys',
+    href: route('api-keys'),
+    icon: PlugIcon,
+  },
 ];
 
 export default function SettingsLayout({ children, breadcrumbs }: { children: ReactNode; breadcrumbs?: BreadcrumbItem[] }) {

resources/js/pages/api-keys/components/columns.tsx

@@ -0,0 +1,109 @@
+import { ColumnDef } from '@tanstack/react-table';
+import DateTime from '@/components/date-time';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { useForm } from '@inertiajs/react';
+import { LoaderCircleIcon, MoreVerticalIcon } from 'lucide-react';
+import FormSuccessful from '@/components/form-successful';
+import { useState } from 'react';
+import { ApiKey } from '@/types/api-key';
+
+function Delete({ apiKey }: { apiKey: ApiKey }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm();
+
+  const submit = () => {
+    form.delete(route('api-keys.destroy', apiKey.id), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem variant="destructive" onSelect={(e) => e.preventDefault()}>
+          Delete
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete {apiKey.name}</DialogTitle>
+          <DialogDescription className="sr-only">Delete api key</DialogDescription>
+        </DialogHeader>
+        <p className="p-4">
+          Are you sure you want to delete <strong>{apiKey.name}</strong>?
+        </p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button variant="destructive" disabled={form.processing} onClick={submit}>
+            {form.processing && <LoaderCircleIcon className="animate-spin" />}
+            <FormSuccessful successful={form.recentlySuccessful} />
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const columns: ColumnDef<ApiKey>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'permissions',
+    header: 'Permissions',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return row.original.permissions.includes('write') ? <span>read & write</span> : <span>read</span>;
+    },
+  },
+  {
+    accessorKey: 'created_at',
+    header: 'Created at',
+    enableColumnFilter: true,
+    enableSorting: true,
+    cell: ({ row }) => {
+      return <DateTime date={row.original.created_at} />;
+    },
+  },
+  {
+    id: 'actions',
+    enableColumnFilter: false,
+    enableSorting: false,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center justify-end">
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0">
+                <span className="sr-only">Open menu</span>
+                <MoreVerticalIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <Delete apiKey={row.original} />
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      );
+    },
+  },
+];

resources/js/pages/api-keys/components/create-api-key.tsx

@@ -0,0 +1,119 @@
+import { ClipboardCheckIcon, ClipboardIcon, LoaderCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { useForm } from '@inertiajs/react';
+import React, { FormEventHandler, ReactNode, useRef, useState } from 'react';
+import { Label } from '@/components/ui/label';
+import InputError from '@/components/ui/input-error';
+import { Form, FormField, FormFields } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
+type ApiKeyForm = {
+  name: string;
+  permission: string;
+};
+
+export default function CreateApiKey({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false);
+  const [token, setToken] = useState<string | undefined>();
+  const tokenInputRef = useRef<HTMLInputElement>(null);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const copyToClipboard = () => {
+    tokenInputRef.current?.select();
+    navigator.clipboard.writeText(token || '').then(() => {
+      setCopySuccess(true);
+      setTimeout(() => {
+        setCopySuccess(false);
+      }, 2000);
+    });
+  };
+
+  const form = useForm<Required<ApiKeyForm>>({
+    name: '',
+    permission: '',
+  });
+
+  const submit: FormEventHandler = (e) => {
+    e.preventDefault();
+    form.post(route('api-keys.store'), {
+      onSuccess: (page) => {
+        const flash = page.props.flash as { data?: { token?: string } };
+        setToken(flash.data?.token);
+      },
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create an API key</DialogTitle>
+          <DialogDescription className="sr-only">Create a new api key</DialogDescription>
+        </DialogHeader>
+        <Form id="create-tag-form" onSubmit={submit} className="p-4">
+          {token ? (
+            <FormFields>
+              <FormField>
+                <Label htmlFor="token" className="flex items-center gap-1">
+                  Token {copySuccess ? <ClipboardCheckIcon className="text-success! size-4" /> : <ClipboardIcon className="size-4" />}
+                </Label>
+                <Input ref={tokenInputRef} id="token" onClick={copyToClipboard} type="text" value={token || ''} className="cursor-pointer" />
+              </FormField>
+            </FormFields>
+          ) : (
+            <FormFields>
+              <FormField>
+                <Label htmlFor="name">Name</Label>
+                <Input type="text" id="name" name="name" value={form.data.name} onChange={(e) => form.setData('name', e.target.value)} />
+                <InputError message={form.errors.name} />
+              </FormField>
+              <FormField>
+                <Label htmlFor="name">Name</Label>
+                <Select name="permission" value={form.data.permission} onValueChange={(value) => form.setData('permission', value)}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a permission" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem key="permission-read" value="read">
+                        read
+                      </SelectItem>
+                      <SelectItem key="permission-write" value="write">
+                        read & write
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <InputError message={form.errors.permission} />
+              </FormField>
+            </FormFields>
+          )}
+        </Form>
+        {!token && (
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline">
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button type="button" onClick={submit} disabled={form.processing}>
+              {form.processing && <LoaderCircle className="animate-spin" />}
+              Create
+            </Button>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/pages/api-keys/index.tsx

@@ -0,0 +1,37 @@
+import SettingsLayout from '@/layouts/settings/layout';
+import { Head, usePage } from '@inertiajs/react';
+import Container from '@/components/container';
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { DataTable } from '@/components/data-table';
+import React from 'react';
+import { ApiKey } from '@/types/api-key';
+import { columns } from '@/pages/api-keys/components/columns';
+import CreateApiKey from '@/pages/api-keys/components/create-api-key';
+
+export default function ApiKeys() {
+  const page = usePage<{
+    apiKeys: {
+      data: ApiKey[];
+    };
+  }>();
+  return (
+    <SettingsLayout>
+      <Head title="API Keys" />
+      <Container className="max-w-5xl">
+        <div className="flex items-start justify-between">
+          <Heading title="API Keys" description="Here you can manage API keys" />
+          <div className="flex items-center gap-2">
+            <a href="/api-docs" target="_blank">
+              <Button variant="outline">Docs</Button>
+            </a>
+            <CreateApiKey>
+              <Button>Create</Button>
+            </CreateApiKey>
+          </div>
+        </div>
+        <DataTable columns={columns} data={page.props.apiKeys.data} />
+      </Container>
+    </SettingsLayout>
+  );
+}

resources/js/types/api-key.d.ts

@@ -0,0 +1,9 @@
+export interface ApiKey {
+  id: number;
+  name: string;
+  permissions: string[];
+  created_at: string;
+  updated_at: string;
+
+  [key: string]: unknown;
+}