@actuate-media/cms-admin 0.8.2 → 0.9.0

package/src/views/ApiKeys.tsx

@@ -0,0 +1,512 @@
+'use client'
+
+import * as Dialog from '@radix-ui/react-dialog'
+import {
+  Copy,
+  KeyRound,
+  Loader2,
+  Plus,
+  Shield,
+  Trash2,
+  AlertTriangle,
+  Eye,
+  EyeOff,
+} from 'lucide-react'
+import { type FormEvent, useState } from 'react'
+import { toast } from 'sonner'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
+
+export interface ApiKeysProps {
+  onNavigate?: (path: string) => void
+}
+
+interface ApiKeyRecord {
+  id: string
+  name: string
+  keyPrefix: string
+  scopes: ApiKeyScopes
+  ipRestrictions: string[] | null
+  expiresAt: string | null
+  lastUsedAt: string | null
+  revokedAt: string | null
+  createdAt: string
+  user?: { id: string; name: string | null; email: string }
+}
+
+interface ApiKeyScopes {
+  admin?: boolean
+  collections?: string[]
+  actions?: ('read' | 'create' | 'update' | 'delete')[]
+  globals?: string[]
+  media?: boolean
+  pageBuilder?: boolean
+}
+
+function formatScopes(scopes: ApiKeyScopes): string {
+  if (scopes.admin) return 'Full admin'
+  const parts: string[] = []
+  if (scopes.collections?.length) {
+    const cols = scopes.collections.includes('*')
+      ? 'all collections'
+      : scopes.collections.join(', ')
+    const acts = scopes.actions?.join('/') ?? 'read'
+    parts.push(`${acts} on ${cols}`)
+  }
+  if (scopes.globals?.length) parts.push(`globals: ${scopes.globals.join(', ')}`)
+  if (scopes.media) parts.push('media')
+  if (scopes.pageBuilder) parts.push('pageBuilder')
+  return parts.length > 0 ? parts.join(' · ') : 'No scopes'
+}
+
+function formatDate(value: string | null): string {
+  if (!value) return '—'
+  try {
+    return new Date(value).toLocaleString()
+  } catch {
+    return value
+  }
+}
+
+export function ApiKeys(_props: ApiKeysProps) {
+  const { data, loading, error, refetch } = useApiData<ApiKeyRecord[]>('/api-keys')
+  const [showCreate, setShowCreate] = useState(false)
+  const [createdKey, setCreatedKey] = useState<{ key: string; record: ApiKeyRecord } | null>(null)
+
+  const keys = data ?? []
+
+  const handleRevoke = async (id: string, name: string) => {
+    if (!confirm(`Revoke API key "${name}"? This cannot be undone.`)) return
+    const password = prompt('Confirm your password to revoke this API key:')
+    if (!password) return
+    const res = await cmsApi(`/api-keys/${id}`, {
+      method: 'DELETE',
+      headers: { 'x-reauth-password': password },
+    })
+    if (res.error) {
+      toast.error(res.error)
+    } else {
+      toast.success('API key revoked')
+      refetch()
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="p-4 sm:p-6 flex items-center justify-center h-64">
+        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 sm:p-6">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
+        <div>
+          <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 flex items-center gap-2">
+            <KeyRound className="w-5 h-5 text-gray-500" />
+            API Keys
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Long-lived credentials for programmatic access. Use the{' '}
+            <code className="px-1 py-0.5 rounded bg-gray-100 text-xs">Authorization: Bearer</code>{' '}
+            header instead of session cookies. API key requests skip CSRF.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setShowCreate(true)}
+          className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+        >
+          <Plus className="w-4 h-4" />
+          New API Key
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
+          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <button
+            onClick={refetch}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {keys.length === 0 ? (
+        <div className="bg-white rounded-lg border border-gray-200 p-10 text-center">
+          <KeyRound className="w-8 h-8 text-gray-300 mx-auto mb-3" />
+          <p className="text-sm text-gray-500 mb-1">No API keys yet</p>
+          <p className="text-xs text-gray-400 mb-4">
+            Create one to let AI agents, CI jobs, or external integrations call the CMS API.
+          </p>
+          <button
+            type="button"
+            onClick={() => setShowCreate(true)}
+            className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+          >
+            <Plus className="w-4 h-4" />
+            Create your first API key
+          </button>
+        </div>
+      ) : (
+        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 border-b border-gray-200">
+                <tr>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Name</th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Token</th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Scopes</th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">
+                    Last used
+                  </th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Expires</th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Status</th>
+                  <th className="px-4 py-2"></th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {keys.map((k) => {
+                  const revoked = !!k.revokedAt
+                  const expired = k.expiresAt && new Date(k.expiresAt).getTime() < Date.now()
+                  return (
+                    <tr key={k.id} className={revoked || expired ? 'opacity-60' : undefined}>
+                      <td className="px-4 py-3 text-sm">
+                        <div className="font-medium text-gray-900">{k.name}</div>
+                        {k.user && (
+                          <div className="text-xs text-gray-500">
+                            created by {k.user.name ?? k.user.email}
+                          </div>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-sm font-mono text-gray-700">{k.keyPrefix}…</td>
+                      <td className="px-4 py-3 text-sm text-gray-700 max-w-xs">
+                        {formatScopes(k.scopes)}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-600">
+                        {formatDate(k.lastUsedAt)}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-600">{formatDate(k.expiresAt)}</td>
+                      <td className="px-4 py-3">
+                        {revoked ? (
+                          <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
+                            Revoked
+                          </span>
+                        ) : expired ? (
+                          <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
+                            Expired
+                          </span>
+                        ) : (
+                          <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
+                            Active
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-right">
+                        {!revoked && (
+                          <button
+                            type="button"
+                            onClick={() => handleRevoke(k.id, k.name)}
+                            className="p-1.5 hover:bg-red-50 rounded transition-colors"
+                            title="Revoke"
+                          >
+                            <Trash2 className="w-4 h-4 text-red-600" />
+                          </button>
+                        )}
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      <CreateApiKeyDialog
+        open={showCreate}
+        onClose={() => setShowCreate(false)}
+        onCreated={(created) => {
+          setShowCreate(false)
+          setCreatedKey(created)
+          refetch()
+        }}
+      />
+
+      {createdKey && <RevealKeyDialog created={createdKey} onClose={() => setCreatedKey(null)} />}
+    </div>
+  )
+}
+
+interface CreateApiKeyDialogProps {
+  open: boolean
+  onClose: () => void
+  onCreated: (created: { key: string; record: ApiKeyRecord }) => void
+}
+
+function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProps) {
+  const [name, setName] = useState('')
+  const [preset, setPreset] = useState<'admin' | 'content' | 'readonly' | 'custom'>('content')
+  const [pageBuilder, setPageBuilder] = useState(true)
+  const [media, setMedia] = useState(true)
+  const [expiresInDays, setExpiresInDays] = useState<string>('')
+  const [password, setPassword] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  function buildScopes(): ApiKeyScopes {
+    if (preset === 'admin') return { admin: true }
+    if (preset === 'readonly') {
+      return {
+        collections: ['*'],
+        actions: ['read'],
+        globals: ['*'],
+        media: false,
+        pageBuilder: false,
+      }
+    }
+    if (preset === 'content') {
+      return {
+        collections: ['*'],
+        actions: ['read', 'create', 'update'],
+        globals: ['*'],
+        media,
+        pageBuilder,
+      }
+    }
+    return {
+      collections: ['*'],
+      actions: ['read'],
+      media,
+      pageBuilder,
+    }
+  }
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    if (!name.trim()) return toast.error('Name is required')
+    if (!password) return toast.error('Password confirmation is required')
+
+    setSubmitting(true)
+    try {
+      const scopes = buildScopes()
+      const body: Record<string, unknown> = { name: name.trim(), scopes }
+      const days = parseInt(expiresInDays, 10)
+      if (!isNaN(days) && days > 0) {
+        body.expiresAt = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString()
+      }
+      const res = await cmsApi<{ key: string } & ApiKeyRecord>('/api-keys', {
+        method: 'POST',
+        headers: { 'x-reauth-password': password, 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (res.error || !res.data) {
+        toast.error(res.error ?? 'Failed to create API key')
+        return
+      }
+      const { key, ...record } = res.data
+      onCreated({ key, record: record as ApiKeyRecord })
+      setName('')
+      setPassword('')
+      setExpiresInDays('')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={(o) => !o && onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/40 z-40" />
+        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl w-full max-w-md p-6 z-50">
+          <Dialog.Title className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
+            <Shield className="w-5 h-5 text-blue-600" />
+            New API Key
+          </Dialog.Title>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label className="text-sm font-medium text-gray-700 block mb-1">Name</label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g. AI agent — production"
+                className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+                maxLength={100}
+              />
+            </div>
+
+            <div>
+              <label className="text-sm font-medium text-gray-700 block mb-2">Preset</label>
+              <div className="grid grid-cols-2 gap-2">
+                {(['content', 'readonly', 'admin', 'custom'] as const).map((p) => (
+                  <button
+                    key={p}
+                    type="button"
+                    onClick={() => setPreset(p)}
+                    className={`px-3 py-2 text-sm rounded-lg border transition-colors text-left ${
+                      preset === p
+                        ? 'border-blue-500 bg-blue-50 text-blue-900'
+                        : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
+                    }`}
+                  >
+                    <div className="font-medium capitalize">{p}</div>
+                    <div className="text-xs text-gray-500">
+                      {p === 'content' && 'Read/create/update content'}
+                      {p === 'readonly' && 'Read-only access'}
+                      {p === 'admin' && 'Full admin access'}
+                      {p === 'custom' && 'Pick capabilities'}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {(preset === 'content' || preset === 'custom') && (
+              <div className="space-y-2 rounded-lg border border-gray-200 p-3 bg-gray-50">
+                <label className="flex items-center gap-2 text-sm text-gray-700">
+                  <input
+                    type="checkbox"
+                    checked={media}
+                    onChange={(e) => setMedia(e.target.checked)}
+                    className="rounded border-gray-300"
+                  />
+                  Allow media uploads
+                </label>
+                <label className="flex items-center gap-2 text-sm text-gray-700">
+                  <input
+                    type="checkbox"
+                    checked={pageBuilder}
+                    onChange={(e) => setPageBuilder(e.target.checked)}
+                    className="rounded border-gray-300"
+                  />
+                  Allow AI page generation
+                </label>
+              </div>
+            )}
+
+            <div>
+              <label className="text-sm font-medium text-gray-700 block mb-1">
+                Expires in (days)
+              </label>
+              <input
+                type="number"
+                min={1}
+                placeholder="Never (leave blank)"
+                value={expiresInDays}
+                onChange={(e) => setExpiresInDays(e.target.value)}
+                className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            <div>
+              <label className="text-sm font-medium text-gray-700 block mb-1">
+                Confirm password
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                required
+              />
+              <p className="text-xs text-gray-500 mt-1">
+                Creating an API key is a sensitive action and requires re-authentication.
+              </p>
+            </div>
+
+            <div className="flex items-center justify-end gap-2 pt-2">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={submitting}
+                className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+              >
+                {submitting ? 'Creating…' : 'Create key'}
+              </button>
+            </div>
+          </form>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+function RevealKeyDialog({
+  created,
+  onClose,
+}: {
+  created: { key: string; record: ApiKeyRecord }
+  onClose: () => void
+}) {
+  const [shown, setShown] = useState(false)
+  return (
+    <Dialog.Root open onOpenChange={(o) => !o && onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/40 z-40" />
+        <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-xl w-full max-w-md p-6 z-50">
+          <Dialog.Title className="text-lg font-semibold text-gray-900 mb-2 flex items-center gap-2">
+            <Shield className="w-5 h-5 text-green-600" />
+            API key created
+          </Dialog.Title>
+          <Dialog.Description className="text-sm text-gray-600 mb-4">
+            Copy this key now — it will not be shown again. Treat it like a password.
+          </Dialog.Description>
+
+          <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 mb-4 flex items-start gap-2">
+            <AlertTriangle className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
+            <p className="text-xs text-amber-900">
+              We only store a hash of this key. If you lose it, you&apos;ll need to revoke and
+              create a new one.
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2 mb-4">
+            <code className="flex-1 px-3 py-2 bg-gray-100 rounded text-sm font-mono break-all">
+              {shown ? created.key : '•'.repeat(Math.min(48, created.key.length))}
+            </code>
+            <button
+              type="button"
+              onClick={() => setShown((s) => !s)}
+              className="p-2 border border-gray-300 rounded hover:bg-gray-50"
+              title={shown ? 'Hide' : 'Show'}
+            >
+              {shown ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                navigator.clipboard.writeText(created.key)
+                toast.success('Copied to clipboard')
+              }}
+              className="p-2 border border-gray-300 rounded hover:bg-gray-50"
+              title="Copy"
+            >
+              <Copy className="w-4 h-4" />
+            </button>
+          </div>
+
+          <div className="flex justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              I&apos;ve saved it
+            </button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}