|
|
|
@@ -16,11 +16,11 @@
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import { useEffect, useState } from 'preact/hooks'
|
|
|
|
|
import { BadgeCheck, Check, LoaderCircle, ShieldCheck, X } from 'lucide-react'
|
|
|
|
|
import { BadgeCheck, Check, LoaderCircle, RotateCcw, ShieldCheck, X } from 'lucide-react'
|
|
|
|
|
import { Button } from '@components/ui/button'
|
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@components/ui/card'
|
|
|
|
|
import { toast } from 'sonner'
|
|
|
|
|
import { approvePeer, fetchTrustState, revokePeer } from '@lib/api/peers'
|
|
|
|
|
import { approvePeer, fetchTrustState, rejectPeer, revokePeer } from '@lib/api/peers'
|
|
|
|
|
import { useAsyncAction } from '@lib/hooks/useAsyncAction'
|
|
|
|
|
import { cn } from '@lib/utils'
|
|
|
|
|
import type { PeerAuthorized, PeerPending, PeerTrustState } from '@lib/types'
|
|
|
|
@@ -39,11 +39,19 @@ function shortFingerprint(fp: string): string {
|
|
|
|
|
return `${fp.slice(0, 16)}…`
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fmtTime(iso?: string | null): string {
|
|
|
|
|
if (!iso) return ''
|
|
|
|
|
const d = new Date(iso)
|
|
|
|
|
if (Number.isNaN(d.getTime())) return iso
|
|
|
|
|
return d.toLocaleString()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The trusted-services surface (security theme M2 §3): pending first-contact
|
|
|
|
|
* authorizations and the approved trust store. Maestro is only the UI — the
|
|
|
|
|
* auth service owns the enforcement, so this panel is a convenience, not a
|
|
|
|
|
* security boundary. Hidden entirely when the management API is unreachable.
|
|
|
|
|
* authorizations, the approved trust store, and revoked keys. Maestro is only
|
|
|
|
|
* the UI — the auth service owns the enforcement, so this panel is a
|
|
|
|
|
* convenience, not a security boundary. Hidden entirely when the management
|
|
|
|
|
* API is unreachable.
|
|
|
|
|
*/
|
|
|
|
|
export function TrustedServices() {
|
|
|
|
|
const [state, setState] = useState<LoadState>({ kind: 'loading' })
|
|
|
|
@@ -63,10 +71,13 @@ export function TrustedServices() {
|
|
|
|
|
|
|
|
|
|
if (state.kind === 'loading') return null
|
|
|
|
|
if (state.kind === 'error') return null
|
|
|
|
|
if (state.state.pending.length === 0 && state.state.authorized.length === 0) return null
|
|
|
|
|
|
|
|
|
|
const pending = state.state.pending
|
|
|
|
|
const authorized = state.state.authorized.filter((k) => !k.revoked_at)
|
|
|
|
|
const pending = state.state.pending ?? []
|
|
|
|
|
const authorized = state.state.authorized ?? []
|
|
|
|
|
const active = authorized.filter((k) => !k.revoked_at)
|
|
|
|
|
const revoked = authorized.filter((k) => k.revoked_at)
|
|
|
|
|
|
|
|
|
|
if (pending.length === 0 && active.length === 0 && revoked.length === 0) return null
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Card data-slot="trusted-services">
|
|
|
|
@@ -76,26 +87,44 @@ export function TrustedServices() {
|
|
|
|
|
Trusted services
|
|
|
|
|
</CardTitle>
|
|
|
|
|
<CardDescription>
|
|
|
|
|
Services asking to talk to the auth service. Approve a fingerprint to authorize it (SSH
|
|
|
|
|
authorized_keys, applied to the service fleet); revoke cuts it off immediately.
|
|
|
|
|
Services asking to talk to the auth service. Accept authorizes a fingerprint (SSH
|
|
|
|
|
authorized_keys, applied to the service fleet), reject drops a request without
|
|
|
|
|
authorizing it, revoke cuts off an accepted peer immediately, re-authorize restores one.
|
|
|
|
|
</CardDescription>
|
|
|
|
|
</CardHeader>
|
|
|
|
|
|
|
|
|
|
{pending.length > 0 && (
|
|
|
|
|
<CardContent data-slot="trusted-pending" className="grid gap-2">
|
|
|
|
|
<p className="text-xs font-medium uppercase tracking-wide text-amber-600">
|
|
|
|
|
Requested access ({pending.length})
|
|
|
|
|
</p>
|
|
|
|
|
{pending.map((p) => (
|
|
|
|
|
<PendingRow key={`${p.service}:${p.fingerprint}`} entry={p} onDone={load} />
|
|
|
|
|
))}
|
|
|
|
|
</CardContent>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{authorized.length > 0 && (
|
|
|
|
|
{active.length > 0 && (
|
|
|
|
|
<CardContent data-slot="trusted-approved" className="grid gap-2">
|
|
|
|
|
{authorized.map((k) => (
|
|
|
|
|
<p className="text-xs font-medium uppercase tracking-wide text-emerald-600">
|
|
|
|
|
Accepted ({active.length})
|
|
|
|
|
</p>
|
|
|
|
|
{active.map((k) => (
|
|
|
|
|
<AuthorizedRow key={`${k.service}:${k.fingerprint}`} entry={k} onDone={load} />
|
|
|
|
|
))}
|
|
|
|
|
</CardContent>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{revoked.length > 0 && (
|
|
|
|
|
<CardContent data-slot="trusted-revoked" className="grid gap-2">
|
|
|
|
|
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
|
|
|
Revoked ({revoked.length})
|
|
|
|
|
</p>
|
|
|
|
|
{revoked.map((k) => (
|
|
|
|
|
<RevokedRow key={`${k.service}:${k.fingerprint}`} entry={k} onDone={load} />
|
|
|
|
|
))}
|
|
|
|
|
</CardContent>
|
|
|
|
|
)}
|
|
|
|
|
</Card>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
@@ -111,13 +140,13 @@ function PendingRow({ entry, onDone }: { entry: PeerPending; onDone: () => void
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const deny = useAsyncAction(async () => {
|
|
|
|
|
const reject = useAsyncAction(async () => {
|
|
|
|
|
try {
|
|
|
|
|
await revokePeer(entry.service, entry.fingerprint)
|
|
|
|
|
toast.success(`Ignored ${entry.service}`, { description: shortFingerprint(entry.fingerprint) })
|
|
|
|
|
await rejectPeer(entry.service, entry.fingerprint)
|
|
|
|
|
toast.success(`Rejected ${entry.service}`, { description: shortFingerprint(entry.fingerprint) })
|
|
|
|
|
onDone()
|
|
|
|
|
} catch (error) {
|
|
|
|
|
toast.error(`Failed to ignore ${entry.service}`, { description: errorMessage(error) })
|
|
|
|
|
toast.error(`Failed to reject ${entry.service}`, { description: errorMessage(error) })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
@@ -129,15 +158,16 @@ function PendingRow({ entry, onDone }: { entry: PeerPending; onDone: () => void
|
|
|
|
|
{entry.service}
|
|
|
|
|
</p>
|
|
|
|
|
<p className="truncate font-mono text-xs text-muted-foreground">{entry.fingerprint}</p>
|
|
|
|
|
<p className="text-xs text-muted-foreground/70">First seen {fmtTime(entry.first_seen)}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
|
|
|
<Button size="xs" variant="outline" onPress={() => void deny.run()} isDisabled={deny.pending}>
|
|
|
|
|
{deny.pending ? <LoaderCircle className="animate-spin" /> : <X />}
|
|
|
|
|
Ignore
|
|
|
|
|
<Button size="xs" variant="outline" onPress={() => void reject.run()} isDisabled={reject.pending}>
|
|
|
|
|
{reject.pending ? <LoaderCircle className="animate-spin" /> : <X />}
|
|
|
|
|
Reject
|
|
|
|
|
</Button>
|
|
|
|
|
<Button size="xs" onPress={() => void approve.run()} isDisabled={approve.pending}>
|
|
|
|
|
{approve.pending ? <LoaderCircle className="animate-spin" /> : <Check />}
|
|
|
|
|
Authorize
|
|
|
|
|
Accept
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@@ -159,13 +189,14 @@ function AuthorizedRow({ entry, onDone }: { entry: PeerAuthorized; onDone: () =>
|
|
|
|
|
<div className="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2">
|
|
|
|
|
<div className="min-w-0">
|
|
|
|
|
<p className="flex items-center gap-1.5 text-sm font-medium">
|
|
|
|
|
<BadgeCheck className={cn('size-4', 'text-emerald-500')} aria-hidden />
|
|
|
|
|
<BadgeCheck className="size-4 text-emerald-500" aria-hidden />
|
|
|
|
|
{entry.service}
|
|
|
|
|
</p>
|
|
|
|
|
<p className="truncate font-mono text-xs text-muted-foreground">
|
|
|
|
|
{entry.fingerprint}
|
|
|
|
|
<span className="ml-2 text-muted-foreground/70">by {entry.approved_by}</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p className="text-xs text-muted-foreground/70">Accepted {fmtTime(entry.approved_at)}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<Button
|
|
|
|
|
size="xs"
|
|
|
|
@@ -179,3 +210,46 @@ function AuthorizedRow({ entry, onDone }: { entry: PeerAuthorized; onDone: () =>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function RevokedRow({ entry, onDone }: { entry: PeerAuthorized; onDone: () => void }) {
|
|
|
|
|
const reauthorize = useAsyncAction(async () => {
|
|
|
|
|
try {
|
|
|
|
|
await approvePeer(entry.service, entry.fingerprint)
|
|
|
|
|
toast.success(`Re-authorized ${entry.service}`, {
|
|
|
|
|
description: shortFingerprint(entry.fingerprint),
|
|
|
|
|
})
|
|
|
|
|
onDone()
|
|
|
|
|
} catch (error) {
|
|
|
|
|
toast.error(`Failed to re-authorize ${entry.service}`, { description: errorMessage(error) })
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className={cn(
|
|
|
|
|
'flex items-center justify-between gap-3 rounded-lg border border-border bg-muted/30 px-3 py-2'
|
|
|
|
|
)}
|
|
|
|
|
>
|
|
|
|
|
<div className="min-w-0">
|
|
|
|
|
<p className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
|
|
|
|
|
<X className="size-4 text-muted-foreground/60" aria-hidden />
|
|
|
|
|
{entry.service}
|
|
|
|
|
</p>
|
|
|
|
|
<p className="truncate font-mono text-xs text-muted-foreground/80">
|
|
|
|
|
{entry.fingerprint}
|
|
|
|
|
<span className="ml-2 text-muted-foreground/60">by {entry.approved_by}</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p className="text-xs text-muted-foreground/70">Revoked {fmtTime(entry.revoked_at)}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<Button
|
|
|
|
|
size="xs"
|
|
|
|
|
variant="outline"
|
|
|
|
|
onPress={() => void reauthorize.run()}
|
|
|
|
|
isDisabled={reauthorize.pending}
|
|
|
|
|
>
|
|
|
|
|
{reauthorize.pending ? <LoaderCircle className="animate-spin" /> : <RotateCcw />}
|
|
|
|
|
Re-authorize
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|