mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-12 11:30:32 +00:00
feat: dashboard theme overhaul — light content area with branded teal sidebar
Complete frontend visual redesign using certctl logo color palette: - Deep teal sidebar (#0c2e25) with prominent centered logo (64px in white pill) - Light content area (#f0f4f8) with white cards and visible borders - Brand colors from logo: teal (#2ea88f), blue (#3b7dd8), orange (#e8873a), green (#4ebe6e) - Inter + JetBrains Mono typography, colored stat card top borders - All 17 pages + 7 components updated (25 files, ~700 lines changed) - 15 new dashboard screenshots replacing old dark theme screenshots - Prometheus metrics e2e test added, integration test mock fixes - Docs updated: architecture.md theme description, testing-guide.md DNS-PERSIST-01 coverage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shankar0123
@@ -11,12 +11,12 @@ import type { Job } from '../api/types';
|
||||
|
||||
function InfoRow({ label, value, editable, onEdit }: { label: string; value: React.ReactNode; editable?: boolean; onEdit?: () => void }) {
|
||||
return (
|
||||
<div className="flex justify-between py-2 border-b border-slate-700/50 group">
|
||||
<span className="text-sm text-slate-400">{label}</span>
|
||||
<div className="flex justify-between py-2 border-b border-surface-border/50 group">
|
||||
<span className="text-sm text-ink-muted">{label}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-slate-200">{value}</span>
|
||||
<span className="text-sm text-ink">{value}</span>
|
||||
{editable && onEdit && (
|
||||
<button onClick={onEdit} className="opacity-0 group-hover:opacity-100 transition-opacity text-xs text-blue-400 hover:text-blue-300">
|
||||
<button onClick={onEdit} className="opacity-0 group-hover:opacity-100 transition-opacity text-xs text-brand-400 hover:text-brand-500">
|
||||
Edit
|
||||
</button>
|
||||
)}
|
||||
@@ -28,22 +28,22 @@ function InfoRow({ label, value, editable, onEdit }: { label: string; value: Rea
|
||||
// Timeline step component for deployment status
|
||||
function TimelineStep({ label, status, time, isLast }: { label: string; status: 'completed' | 'active' | 'pending' | 'failed'; time?: string; isLast?: boolean }) {
|
||||
const dotStyles = {
|
||||
completed: 'bg-emerald-500 ring-emerald-500/30',
|
||||
active: 'bg-blue-500 ring-blue-500/30 animate-pulse',
|
||||
pending: 'bg-slate-600 ring-slate-600/30',
|
||||
failed: 'bg-red-500 ring-red-500/30',
|
||||
completed: 'bg-emerald-500 ring-emerald-200',
|
||||
active: 'bg-brand-400 ring-brand-200 animate-pulse',
|
||||
pending: 'bg-surface-muted ring-surface-border',
|
||||
failed: 'bg-red-500 ring-red-200',
|
||||
};
|
||||
const lineStyles = {
|
||||
completed: 'bg-emerald-500/50',
|
||||
active: 'bg-blue-500/30',
|
||||
pending: 'bg-slate-700',
|
||||
failed: 'bg-red-500/30',
|
||||
completed: 'bg-emerald-300',
|
||||
active: 'bg-brand-200',
|
||||
pending: 'bg-surface-border',
|
||||
failed: 'bg-red-300',
|
||||
};
|
||||
const textStyles = {
|
||||
completed: 'text-emerald-400',
|
||||
active: 'text-blue-400',
|
||||
pending: 'text-slate-500',
|
||||
failed: 'text-red-400',
|
||||
completed: 'text-emerald-600',
|
||||
active: 'text-brand-400',
|
||||
pending: 'text-ink-faint',
|
||||
failed: 'text-red-600',
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -54,7 +54,7 @@ function TimelineStep({ label, status, time, isLast }: { label: string; status:
|
||||
</div>
|
||||
<div className="pb-6">
|
||||
<div className={`text-sm font-medium ${textStyles[status]}`}>{label}</div>
|
||||
{time && <div className="text-xs text-slate-500 mt-0.5">{time}</div>}
|
||||
{time && <div className="text-xs text-ink-faint mt-0.5">{time}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -117,8 +117,8 @@ function DeploymentTimeline({ certId, certStatus, createdAt, issuedAt }: { certI
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-300 mb-4">Lifecycle Timeline</h3>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Lifecycle Timeline</h3>
|
||||
<div className="pl-1">
|
||||
<TimelineStep label="Requested" status={getRequestedStatus()} time={getRequestedTime()} />
|
||||
<TimelineStep label="Issued" status={getIssuedStatus()} time={getIssuedTime()} />
|
||||
@@ -161,10 +161,10 @@ function InlinePolicyEditor({ certId, currentPolicyId, currentProfileId }: { cer
|
||||
|
||||
if (!editing) {
|
||||
return (
|
||||
<div className="card p-5">
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-semibold text-slate-300">Policy & Profile</h3>
|
||||
<button onClick={() => setEditing(true)} className="text-xs text-blue-400 hover:text-blue-300 transition-colors">
|
||||
<h3 className="text-sm font-semibold text-ink-muted">Policy & Profile</h3>
|
||||
<button onClick={() => setEditing(true)} className="text-xs text-brand-400 hover:text-brand-500 transition-colors">
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
@@ -175,28 +175,28 @@ function InlinePolicyEditor({ certId, currentPolicyId, currentProfileId }: { cer
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card p-5 border-blue-500/30">
|
||||
<div className="bg-surface border border-surface-border border-brand-400 rounded p-5 shadow-sm">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-semibold text-blue-400">Edit Policy & Profile</h3>
|
||||
<h3 className="text-sm font-semibold text-brand-500">Edit Policy & Profile</h3>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => { setEditing(false); setPolicyId(currentPolicyId); setProfileId(currentProfileId); }}
|
||||
className="text-xs text-slate-400 hover:text-slate-300">Cancel</button>
|
||||
className="text-xs text-ink-muted hover:text-ink">Cancel</button>
|
||||
<button onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}
|
||||
className="text-xs text-blue-400 hover:text-blue-300 font-medium disabled:opacity-50">
|
||||
className="text-xs text-brand-400 hover:text-brand-500 font-medium disabled:opacity-50">
|
||||
{saveMutation.isPending ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{saveMutation.isError && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-lg px-3 py-2 text-sm mb-3">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded px-3 py-2 text-sm mb-3">
|
||||
{saveMutation.error instanceof Error ? saveMutation.error.message : 'Failed to save'}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-xs text-slate-400 block mb-1">Renewal Policy</label>
|
||||
<label className="text-xs text-ink-muted block mb-1">Renewal Policy</label>
|
||||
<select value={policyId} onChange={e => setPolicyId(e.target.value)}
|
||||
className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-200">
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink">
|
||||
<option value="">None</option>
|
||||
{policies?.data?.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.name} ({p.type})</option>
|
||||
@@ -204,9 +204,9 @@ function InlinePolicyEditor({ certId, currentPolicyId, currentProfileId }: { cer
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-slate-400 block mb-1">Certificate Profile</label>
|
||||
<label className="text-xs text-ink-muted block mb-1">Certificate Profile</label>
|
||||
<select value={profileId} onChange={e => setProfileId(e.target.value)}
|
||||
className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-200">
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink">
|
||||
<option value="">None</option>
|
||||
{profiles?.data?.map(p => (
|
||||
<option key={p.id} value={p.id}>{p.name} — max TTL {p.max_ttl_seconds ? `${Math.round(p.max_ttl_seconds / 86400)}d` : '∞'}</option>
|
||||
@@ -316,7 +316,7 @@ export default function CertificateDetailPage() {
|
||||
<button
|
||||
onClick={() => setShowDeploy(true)}
|
||||
disabled={isArchived || isRevoked}
|
||||
className="btn btn-ghost text-xs border border-slate-600 disabled:opacity-50"
|
||||
className="btn btn-ghost text-xs border border-surface-border disabled:opacity-50"
|
||||
>
|
||||
Deploy
|
||||
</button>
|
||||
@@ -349,53 +349,53 @@ export default function CertificateDetailPage() {
|
||||
/>
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
{renewMutation.isSuccess && (
|
||||
<div className="bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 rounded-lg px-4 py-3 text-sm">
|
||||
<div className="bg-emerald-50 border border-emerald-200 text-emerald-700 rounded px-4 py-3 text-sm">
|
||||
Renewal triggered successfully. A renewal job has been created.
|
||||
</div>
|
||||
)}
|
||||
{renewMutation.isError && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-lg px-4 py-3 text-sm">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded px-4 py-3 text-sm">
|
||||
Failed to trigger renewal: {renewMutation.error instanceof Error ? renewMutation.error.message : 'Unknown error'}
|
||||
</div>
|
||||
)}
|
||||
{deployMutation.isSuccess && (
|
||||
<div className="bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 rounded-lg px-4 py-3 text-sm">
|
||||
<div className="bg-emerald-50 border border-emerald-200 text-emerald-700 rounded px-4 py-3 text-sm">
|
||||
Deployment triggered. A deployment job has been created.
|
||||
</div>
|
||||
)}
|
||||
{deployMutation.isError && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-lg px-4 py-3 text-sm">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded px-4 py-3 text-sm">
|
||||
Failed to deploy: {deployMutation.error instanceof Error ? deployMutation.error.message : 'Unknown error'}
|
||||
</div>
|
||||
)}
|
||||
{archiveMutation.isError && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-lg px-4 py-3 text-sm">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded px-4 py-3 text-sm">
|
||||
Failed to archive: {archiveMutation.error instanceof Error ? archiveMutation.error.message : 'Unknown error'}
|
||||
</div>
|
||||
)}
|
||||
{revokeMutation.isSuccess && (
|
||||
<div className="bg-amber-500/10 border border-amber-500/20 text-amber-400 rounded-lg px-4 py-3 text-sm">
|
||||
<div className="bg-amber-50 border border-amber-200 text-amber-700 rounded px-4 py-3 text-sm">
|
||||
Certificate revoked successfully. It has been added to the CRL.
|
||||
</div>
|
||||
)}
|
||||
{revokeMutation.isError && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-lg px-4 py-3 text-sm">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded px-4 py-3 text-sm">
|
||||
Failed to revoke: {revokeMutation.error instanceof Error ? revokeMutation.error.message : 'Unknown error'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Revocation Banner */}
|
||||
{isRevoked && (
|
||||
<div className="bg-red-500/10 border border-red-500/30 rounded-lg px-4 py-3">
|
||||
<div className="bg-red-50 border border-red-200 rounded px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<div className="w-8 h-8 rounded bg-red-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg className="w-4 h-4 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-red-400">Certificate Revoked</div>
|
||||
<div className="text-xs text-slate-400 mt-0.5">
|
||||
<div className="text-sm font-medium text-red-700">Certificate Revoked</div>
|
||||
<div className="text-xs text-red-600 mt-0.5">
|
||||
Reason: {REVOCATION_REASONS.find(r => r.value === cert.revocation_reason)?.label || cert.revocation_reason || 'Unspecified'}
|
||||
{cert.revoked_at && <> · Revoked {formatDateTime(cert.revoked_at)}</>}
|
||||
</div>
|
||||
@@ -409,8 +409,8 @@ export default function CertificateDetailPage() {
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Certificate Info */}
|
||||
<div className="card p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-300 mb-4">Certificate Details</h3>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Certificate Details</h3>
|
||||
<InfoRow label="Status" value={<StatusBadge status={cert.status} />} />
|
||||
<InfoRow label="Common Name" value={cert.common_name} />
|
||||
<InfoRow label="SANs" value={cert.sans?.length ? cert.sans.join(', ') : '—'} />
|
||||
@@ -423,11 +423,11 @@ export default function CertificateDetailPage() {
|
||||
</div>
|
||||
|
||||
{/* Lifecycle */}
|
||||
<div className="card p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-300 mb-4">Lifecycle</h3>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Lifecycle</h3>
|
||||
<InfoRow label="Issued" value={formatDate(cert.issued_at)} />
|
||||
<InfoRow label="Expires" value={
|
||||
<span className={isRevoked ? 'text-red-400 line-through' : expiryColor(days)}>
|
||||
<span className={isRevoked ? 'text-red-600 line-through' : expiryColor(days)}>
|
||||
{formatDate(cert.expires_at)} ({days <= 0 ? 'expired' : `${days} days`})
|
||||
</span>
|
||||
} />
|
||||
@@ -438,10 +438,10 @@ export default function CertificateDetailPage() {
|
||||
{isRevoked && (
|
||||
<>
|
||||
<InfoRow label="Revoked At" value={
|
||||
<span className="text-red-400">{cert.revoked_at ? formatDateTime(cert.revoked_at) : '—'}</span>
|
||||
<span className="text-red-600">{cert.revoked_at ? formatDateTime(cert.revoked_at) : '—'}</span>
|
||||
} />
|
||||
<InfoRow label="Revocation Reason" value={
|
||||
<span className="text-red-400">
|
||||
<span className="text-red-600">
|
||||
{REVOCATION_REASONS.find(r => r.value === cert.revocation_reason)?.label || cert.revocation_reason || '—'}
|
||||
</span>
|
||||
} />
|
||||
@@ -461,8 +461,8 @@ export default function CertificateDetailPage() {
|
||||
|
||||
{/* Tags */}
|
||||
{cert.tags && Object.keys(cert.tags).length > 0 && (
|
||||
<div className="card p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-300 mb-4">Tags</h3>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">Tags</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Object.entries(cert.tags).map(([k, v]) => (
|
||||
<span key={k} className="badge badge-neutral">{k}: {v}</span>
|
||||
@@ -472,32 +472,32 @@ export default function CertificateDetailPage() {
|
||||
)}
|
||||
|
||||
{/* Version History */}
|
||||
<div className="card p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-300 mb-4">
|
||||
<div className="bg-surface border border-surface-border rounded p-5 shadow-sm">
|
||||
<h3 className="text-sm font-semibold text-ink-muted mb-4">
|
||||
Version History {versions?.data?.length ? `(${versions.data.length})` : ''}
|
||||
</h3>
|
||||
{!versions?.data?.length ? (
|
||||
<p className="text-sm text-slate-500">No versions yet</p>
|
||||
<p className="text-sm text-ink-faint">No versions yet</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{versions.data.map((v, idx) => (
|
||||
<div key={v.id} className="flex items-center justify-between py-2 border-b border-slate-700/50 last:border-0">
|
||||
<div key={v.id} className="flex items-center justify-between py-2 border-b border-surface-border/50 last:border-0">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-slate-200">Version {v.version}</span>
|
||||
{idx === 0 && <span className="text-xs bg-blue-500/20 text-blue-400 px-1.5 py-0.5 rounded">Current</span>}
|
||||
<span className="text-sm text-ink">Version {v.version}</span>
|
||||
{idx === 0 && <span className="text-xs bg-brand-100 text-brand-700 px-1.5 py-0.5 rounded">Current</span>}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 font-mono">{v.serial_number}</div>
|
||||
<div className="text-xs text-ink-faint font-mono">{v.serial_number}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<div className="text-sm text-slate-300">{formatDate(v.not_before)} — {formatDate(v.not_after)}</div>
|
||||
<div className="text-xs text-slate-500">{formatDateTime(v.created_at)}</div>
|
||||
<div className="text-sm text-ink-muted">{formatDate(v.not_before)} — {formatDate(v.not_after)}</div>
|
||||
<div className="text-xs text-ink-faint">{formatDateTime(v.created_at)}</div>
|
||||
</div>
|
||||
{idx > 0 && cert?.status !== 'Archived' && cert?.status !== 'Revoked' && (
|
||||
<button
|
||||
onClick={() => setShowDeploy(true)}
|
||||
className="text-xs text-amber-400 hover:text-amber-300 border border-amber-500/30 px-2 py-1 rounded hover:bg-amber-500/10 transition-colors"
|
||||
className="text-xs text-amber-600 hover:text-amber-700 border border-amber-300 px-2 py-1 rounded hover:bg-amber-50 transition-colors"
|
||||
title="Redeploy this version to targets"
|
||||
>
|
||||
Rollback
|
||||
@@ -513,19 +513,19 @@ export default function CertificateDetailPage() {
|
||||
|
||||
{/* Deploy Modal */}
|
||||
{showDeploy && (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={() => setShowDeploy(false)}>
|
||||
<div className="bg-slate-800 border border-slate-600 rounded-xl p-6 w-full max-w-md shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||
<h2 className="text-lg font-semibold text-slate-200 mb-4">Deploy Certificate</h2>
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setShowDeploy(false)}>
|
||||
<div className="bg-surface border border-surface-border rounded p-6 w-full max-w-md shadow-xl" onClick={e => e.stopPropagation()}>
|
||||
<h2 className="text-lg font-semibold text-ink mb-4">Deploy Certificate</h2>
|
||||
{deployMutation.isError && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-lg px-3 py-2 text-sm mb-3">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded px-3 py-2 text-sm mb-3">
|
||||
{deployMutation.error instanceof Error ? deployMutation.error.message : 'Unknown error'}
|
||||
</div>
|
||||
)}
|
||||
<label className="text-xs text-slate-400 block mb-2">Select Target</label>
|
||||
<label className="text-xs text-ink-muted block mb-2">Select Target</label>
|
||||
<select
|
||||
value={deployTargetId}
|
||||
onChange={e => setDeployTargetId(e.target.value)}
|
||||
className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-200 mb-4"
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink mb-4"
|
||||
>
|
||||
<option value="">Choose a target...</option>
|
||||
{targets?.data?.map(t => (
|
||||
@@ -548,22 +548,22 @@ export default function CertificateDetailPage() {
|
||||
|
||||
{/* Revoke Modal */}
|
||||
{showRevoke && (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50" onClick={() => setShowRevoke(false)}>
|
||||
<div className="bg-slate-800 border border-slate-600 rounded-xl p-6 w-full max-w-md shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||
<h2 className="text-lg font-semibold text-red-400 mb-2">Revoke Certificate</h2>
|
||||
<p className="text-sm text-slate-400 mb-4">
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setShowRevoke(false)}>
|
||||
<div className="bg-surface border border-surface-border rounded p-6 w-full max-w-md shadow-xl" onClick={e => e.stopPropagation()}>
|
||||
<h2 className="text-lg font-semibold text-red-700 mb-2">Revoke Certificate</h2>
|
||||
<p className="text-sm text-ink-muted mb-4">
|
||||
This action cannot be undone. The certificate will be added to the CRL and marked as revoked.
|
||||
</p>
|
||||
{revokeMutation.isError && (
|
||||
<div className="bg-red-500/10 border border-red-500/20 text-red-400 rounded-lg px-3 py-2 text-sm mb-3">
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 rounded px-3 py-2 text-sm mb-3">
|
||||
{revokeMutation.error instanceof Error ? revokeMutation.error.message : 'Unknown error'}
|
||||
</div>
|
||||
)}
|
||||
<label className="text-xs text-slate-400 block mb-2">Revocation Reason (RFC 5280)</label>
|
||||
<label className="text-xs text-ink-muted block mb-2">Revocation Reason (RFC 5280)</label>
|
||||
<select
|
||||
value={revokeReason}
|
||||
onChange={e => setRevokeReason(e.target.value)}
|
||||
className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-sm text-slate-200 mb-4"
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink mb-4"
|
||||
>
|
||||
{REVOCATION_REASONS.map(r => (
|
||||
<option key={r.value} value={r.value}>{r.label}</option>
|
||||
|
||||
Reference in New Issue
Block a user