@actuate-media/cms-admin 0.78.0 → 0.79.0

package/src/views/ApiKeys.tsx

@@ -17,6 +17,7 @@ import { type FormEvent, useState } from 'react'
 import { toast } from 'sonner'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
+import { ReauthDialog } from '../components/ui/ReauthDialog.js'
 import { SettingsCard } from './settings/components.js'
 
 const DIALOG_INPUT_CLASS =
@@ -80,26 +81,11 @@ export function ApiKeys({ embedded = false }: 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 [pendingDelete, setPendingDelete] = useState<{ id: string; name: string } | null>(null)
 
   const keys = data ?? []
   const rootPadding = embedded ? '' : 'p-4 sm:p-6'
 
-  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={`flex h-64 items-center justify-center ${embedded ? '' : 'p-4 sm:p-6'}`}>
@@ -193,10 +179,9 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
                 </thead>
                 <tbody className="divide-border divide-y">
                   {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}>
+                      <tr key={k.id} className={expired ? 'opacity-60' : undefined}>
                         <td className="px-4 py-3 text-sm">
                           <div className="text-foreground font-medium">{k.name}</div>
                           {k.user && (
@@ -218,11 +203,7 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
                           {formatDate(k.expiresAt)}
                         </td>
                         <td className="px-4 py-3">
-                          {revoked ? (
-                            <span className="bg-destructive/10 text-destructive inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
-                              Revoked
-                            </span>
-                          ) : expired ? (
+                          {expired ? (
                             <span className="bg-warning/10 text-warning inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
                               Expired
                             </span>
@@ -233,17 +214,15 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
                           )}
                         </td>
                         <td className="px-4 py-3 text-right">
-                          {!revoked && (
-                            <button
-                              type="button"
-                              onClick={() => handleRevoke(k.id, k.name)}
-                              className="hover:bg-destructive/10 rounded p-1.5 transition-colors"
-                              aria-label={`Revoke ${k.name}`}
-                              title="Revoke"
-                            >
-                              <Trash2 className="text-destructive h-4 w-4" aria-hidden="true" />
-                            </button>
-                          )}
+                          <button
+                            type="button"
+                            onClick={() => setPendingDelete({ id: k.id, name: k.name })}
+                            className="hover:bg-destructive/10 rounded p-1.5 transition-colors"
+                            aria-label={`Delete ${k.name}`}
+                            title="Delete"
+                          >
+                            <Trash2 className="text-destructive h-4 w-4" aria-hidden="true" />
+                          </button>
                         </td>
                       </tr>
                     )
@@ -266,6 +245,33 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
       />
 
       {createdKey && <RevealKeyDialog created={createdKey} onClose={() => setCreatedKey(null)} />}
+
+      <ReauthDialog
+        open={!!pendingDelete}
+        onClose={() => setPendingDelete(null)}
+        title="Delete API key"
+        description={
+          pendingDelete
+            ? `Permanently delete “${pendingDelete.name}”? Clients using this key will fail immediately. This cannot be undone.`
+            : 'Permanently delete this API key? This cannot be undone.'
+        }
+        confirmLabel="Delete key"
+        destructive
+        onSubmit={async (password) => {
+          if (!pendingDelete) return
+          const res = await cmsApi(`/api-keys/${pendingDelete.id}`, {
+            method: 'DELETE',
+            headers: { 'x-reauth-password': password },
+          })
+          if (res.error) {
+            toast.error(res.error)
+            return
+          }
+          toast.success('API key deleted')
+          setPendingDelete(null)
+          refetch()
+        }}
+      />
     </div>
   )
 }
@@ -442,24 +448,25 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
               />
             </div>
 
-            <div>
+            <div className="border-border bg-muted/30 space-y-2 rounded-md border p-3">
               <label
                 htmlFor="apikey-password"
-                className="text-foreground mb-1 block text-sm font-medium"
+                className="text-foreground block text-sm font-medium"
               >
-                Confirm password
+                Confirm it&apos;s you
               </label>
+              <p className="text-muted-foreground text-sm">
+                Creating an API key is a sensitive action. Re-enter your password to continue.
+              </p>
               <input
                 id="apikey-password"
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
+                autoComplete="current-password"
                 className={DIALOG_INPUT_CLASS}
                 required
               />
-              <p className="text-muted-foreground mt-1 text-sm">
-                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">
@@ -509,7 +516,7 @@ function RevealKeyDialog({
           <div className="border-warning/30 bg-warning/10 mb-4 flex items-start gap-2 rounded-lg border p-4">
             <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
             <p className="text-foreground text-xs">
-              We only store a hash of this key. If you lose it, you&apos;ll need to revoke and
+              We only store a hash of this key. If you lose it, you&apos;ll need to delete it and
               create a new one.
             </p>
           </div>

package/src/views/FormEditor.tsx

@@ -314,7 +314,7 @@ function ExistingFormEditor({
 
         <Tabs.Content value="notifications" tabIndex={-1}>
           <div className="border-border bg-card rounded-lg border p-4">
-            <NotificationsPanel formId={formId} />
+            <NotificationsPanel formId={formId} fields={fields} />
           </div>
         </Tabs.Content>
 

package/src/views/seo/RedirectsTab.tsx

@@ -53,12 +53,13 @@ function OverviewCards({ onRefetchKey }: { onRefetchKey: number }) {
   if (!data) return null
   const cards = [
     { label: 'Active redirects', value: data.activeRedirects },
+    { label: 'Never hit', value: data.neverHitRedirects },
     { label: 'Stale redirects', value: data.staleRedirects },
     { label: '404s tracked', value: data.notFoundCount },
     { label: 'Chains & loops', value: data.chainsAndLoops },
   ]
   return (
-    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+    <div className="grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-5">
       {cards.map((c) => (
         <div key={c.label} className="border-border bg-card rounded-lg border p-4">
           <p className="text-muted-foreground text-sm">{c.label}</p>
@@ -470,6 +471,7 @@ export function RedirectsTab() {
                                 label={r.enabled ? 'Enabled' : 'Disabled'}
                                 tone={r.enabled ? 'good' : 'neutral'}
                               />
+                              {r.neverHit && <SeoStatusBadge label="Never hit" tone="neutral" />}
                               {r.stale && <SeoStatusBadge label="Stale" tone="fair" />}
                             </span>
                           </td>

package/src/views/users/UserDetailDrawer.tsx

@@ -39,6 +39,7 @@ import { Button } from '../../components/ui/Button.js'
 import { Skeleton } from '../../components/ui/Skeleton.js'
 import { EmptyState } from '../../components/ui/EmptyState.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { ReauthDialog } from '../../components/ui/ReauthDialog.js'
 
 // ---------------------------------------------------------------------------
 // Types (mirror cms-core serialized shapes)
@@ -151,82 +152,6 @@ const STATUS_META: Record<UserDetail['status'], { dot: string; text: string; lab
   },
 }
 
-// ---------------------------------------------------------------------------
-// Reauth dialog
-// ---------------------------------------------------------------------------
-
-function ReauthDialog({
-  open,
-  onClose,
-  onSubmit,
-}: {
-  open: boolean
-  onClose: () => void
-  onSubmit: (password: string) => Promise<void>
-}) {
-  const [password, setPassword] = useState('')
-  const [busy, setBusy] = useState(false)
-
-  const submit = async () => {
-    if (!password || busy) return
-    setBusy(true)
-    try {
-      await onSubmit(password)
-      setPassword('')
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  return (
-    <Modal
-      open={open}
-      onClose={() => {
-        setPassword('')
-        onClose()
-      }}
-      title="Confirm it's you"
-      actions={
-        <>
-          <Button
-            variant="ghost"
-            onClick={() => {
-              setPassword('')
-              onClose()
-            }}
-          >
-            Cancel
-          </Button>
-          <Button variant="primary" loading={busy} disabled={!password || busy} onClick={submit}>
-            Confirm
-          </Button>
-        </>
-      }
-    >
-      <p className="text-muted-foreground mb-3 text-sm">
-        This is a sensitive action. Re-enter your password to continue.
-      </p>
-      <label
-        htmlFor="reauth-password"
-        className="text-card-foreground mb-1 block text-sm font-medium"
-      >
-        Your password
-      </label>
-      <input
-        id="reauth-password"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') submit()
-        }}
-        autoComplete="current-password"
-        className="border-border bg-input-background text-foreground focus:ring-brand w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
-      />
-    </Modal>
-  )
-}
-
 // ---------------------------------------------------------------------------
 // Transfer content modal
 // ---------------------------------------------------------------------------