import { Form, Head, router, usePage } from '@inertiajs/react'; import { Copy, Eraser, Trash2 } from 'lucide-react'; import { useState } from 'react'; import WorkspaceApiTokenController from '@/actions/App/Http/Controllers/Settings/WorkspaceApiTokenController'; import { useConfirm } from '@/components/confirm-dialog-provider'; import Heading from '@/components/heading'; import InputError from '@/components/input-error'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { useT } from '@/lib/i18n'; import { index as apiTokensIndex } from '@/routes/settings/api-tokens'; type ApiToken = { id: string; name: string; abilities: string[]; last_used_at: string | null; revoked_at: string | null; created_at: string; created_by_user_id: string | null; created_by?: { id: string; name: string; email: string } | null; }; type Props = { tokens: ApiToken[]; abilities: string[]; new_token: string | null; }; function formatDate(value: string | null): string { if (value === null) { return '—'; } return new Date(value).toLocaleString(); } export default function ApiTokensPage({ tokens, abilities, new_token }: Props) { const { t } = useT(); const confirm = useConfirm(); const { flash } = usePage<{ flash: { success?: string } }>().props; const [copied, setCopied] = useState(false); const copy = async () => { if (new_token === null) { return; } await navigator.clipboard.writeText(new_token); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return ( <>

{t('API tokens')}

{new_token !== null && (

{t('Copy this token now')}

{t( 'For your security we only show the plaintext once. If you lose it, revoke and create a new one.', )}

{new_token}
)} {flash?.success && new_token === null && (
{flash.success}
)}
{({ processing, errors }) => ( <>
{abilities.map((ability) => (
))} )[ 'abilities' ] } />
)}

{t('Existing tokens')}

{tokens.some((tk) => tk.revoked_at !== null) && ( )}
{tokens.length === 0 ? ( {t('No tokens yet.')} ) : (
{tokens.map((token) => (

{token.name}

{token.revoked_at !== null && ( {t('Revoked')} )}
{token.abilities.map((ability) => ( {ability} ))}

{t('Created')}{' '} {formatDate(token.created_at)} {' · '} {t('Last used')}{' '} {formatDate(token.last_used_at)}

{token.revoked_at === null && (
{({ processing }) => ( )}
)}
))}
)}
); } ApiTokensPage.layout = { breadcrumbs: [ { title: 'API tokens', href: apiTokensIndex(), }, ], };