import { Copy, Download, Key, Plus, Trash2 } from 'lucide-react'; import { toast } from 'sonner'; import { useCallback, useEffect, useState } from 'react'; import { Head } from '@inertiajs/react'; import EditorialPageHeader from '@/Components/layout/EditorialPageHeader'; import { Badge } from '@/Components/ui/badge'; import { Button } from '@/Components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card'; import { Checkbox } from '@/Components/ui/checkbox'; import { ConfirmDialog } from '@/Components/ui/confirm-dialog'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/Components/ui/dialog'; import { EmptyState } from '@/Components/ui/empty-state'; import { ErrorWithRetry } from '@/Components/ui/error-with-retry'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import { Skeleton } from '@/Components/ui/skeleton'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackProductEvent } from '@/lib/analytics'; import { copyToClipboard } from '@/lib/clipboard'; import { EMPTY_TITLE } from '@/lib/emptyStateMessages'; import { FEATURE_USED, SETTINGS_API_TOKENS_VIEWED } from '@/lib/event-catalog'; import { formatDateOnly } from '@/lib/format'; import { copied, couldnt } from '@/lib/messages'; import { getCsrfToken } from '@/lib/utils'; interface ApiToken { id: number; name: string; abilities: string[]; last_used_at: string | null; expires_at: string | null; created_at: string; } export default function ApiTokens() { const [tokens, setTokens] = useState([]); const [loading, setLoading] = useState(true); const [fetchError, setFetchError] = useState(false); const [showCreate, setShowCreate] = useState(false); const [deleteTarget, setDeleteTarget] = useState(null); useEffect(() => { trackProductEvent(SETTINGS_API_TOKENS_VIEWED); trackProductEvent(FEATURE_USED, { feature: 'settings_api_tokens' }); }, []); const fetchTokens = useCallback(async () => { setFetchError(false); try { const res = await fetch('/api/tokens', { headers: { Accept: 'application/json' }, }); if (!res.ok) throw new Error('fetch failed'); const data = await res.json(); setTokens(data); } catch { setFetchError(true); } finally { setLoading(false); } }, []); useEffect(() => { fetchTokens(); }, [fetchTokens]); const handleDelete = async () => { if (!deleteTarget) return; const res = await fetch(`/api/tokens/${deleteTarget.id}`, { method: 'DELETE', headers: { Accept: 'application/json', 'X-XSRF-TOKEN': getCsrfToken() }, }); setDeleteTarget(null); if (!res.ok) { toast.error(couldnt('revoke', 'token')); return; } fetchTokens(); toast.success('API token revoked.'); }; return ( setShowCreate(true)}> Create token } />

{loading ? (

{[...Array(3)].map((_, i) => (

))}

) : fetchError ? ( ) : tokens.length === 0 ? ( setShowCreate(true) }} /> ) : ( Your Tokens Tokens are used to authenticate API requests. Keep them secret.

{tokens.map((token) => (

{token.name}

{token.abilities.map((ability) => ( {ability} ))}

Created {formatDateOnly(token.created_at)} {token.last_used_at && ( Last used {formatDateOnly(token.last_used_at)} )} {token.expires_at && ( Expires {formatDateOnly(token.expires_at)} )}

))}

)}

{showCreate && ( setShowCreate(false)} onCreated={() => { setShowCreate(false); fetchTokens(); }} /> )} !open && setDeleteTarget(null)} title="Revoke API Token" description="This will permanently revoke this token. Any applications using it will lose access immediately." resourceName={deleteTarget?.name} resourceType="Token" confirmLabel="Revoke" variant="destructive" onConfirm={handleDelete} /> ); } const AVAILABLE_ABILITIES = [ { value: 'read', label: 'Read', description: 'Read-only access' }, { value: 'write', label: 'Write', description: 'Create and update resources' }, { value: 'delete', label: 'Delete', description: 'Delete resources' }, ] as const; /** * R3FE-009: Build a datetime-local min string from local wall-clock time. * toISOString() is UTC — datetime-local inputs use local time, so UTC min * sits hours in the past (ahead-of-UTC) or future (behind-UTC). */ function localDatetimeLocal(date: Date): string { const pad = (n: number) => String(n).padStart(2, '0'); return ( `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` + `T${pad(date.getHours())}:${pad(date.getMinutes())}` ); } /** * R3UXA-018: Return a Date ~N days from now (local midnight offset). */ function daysFromNow(days: number): Date { const d = new Date(); d.setDate(d.getDate() + days); return d; } function CreateTokenDialog({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) { const [name, setName] = useState(''); const [abilities, setAbilities] = useState(['read']); const [expiresAt, setExpiresAt] = useState(''); const [creating, setCreating] = useState(false); const [errors, setErrors] = useState>({}); const [createdToken, setCreatedToken] = useState(null); // R3UXA-002: acknowledgment gate — Done is disabled until checked. const [acknowledged, setAcknowledged] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); // F-WEBHOOKS_INTEGRATIONS-001 (P0): the backend now requires at least one ability // (no wildcard default). Client-side guard so the user sees the error inline // before the round-trip. if (abilities.length === 0) { setErrors({ abilities: ['Please select at least one permission for this token.'] }); return; } setCreating(true); setErrors({}); const res = await fetch('/api/tokens', { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', 'X-XSRF-TOKEN': getCsrfToken(), }, body: JSON.stringify({ name, abilities, expires_at: expiresAt || undefined, }), }); const data = await res.json(); setCreating(false); if (!res.ok) { if (res.status === 422 && data.errors) { setErrors(data.errors); } else { toast.error(data.message || couldnt('create', 'token')); } return; } setCreatedToken(data.token); toast.success('API token created.'); }; // R3UXA-001: hardened copy using the lib/clipboard wrapper. const handleCopyToken = async () => { if (!createdToken) return; const ok = await copyToClipboard(createdToken); if (ok) { toast.success(copied('Token')); } else { toast.error(couldnt('copy', 'token')); } }; // R3UXA-018: download token as a .txt file so the user has a second save path. const handleDownloadToken = () => { if (!createdToken) return; const blob = new Blob([createdToken], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${name || 'api-token'}.txt`; a.click(); URL.revokeObjectURL(url); }; // Wave 5 (UI audit): both panels migrated to the canonical `