mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-12 03:20:22 +00:00
feat: frontend audit fixes, README accuracy pass, doc updates
Frontend audit (10 categories): lifecycle fields in types, new API functions (CRL, OCSP, deployments, updateIssuer/Target, getPolicy), issuer/owner/profile filters on CertificatesPage, last_renewal_at column, error_message column on JobsPage, full crypto policy UI on ProfilesPage (key algorithms, EKUs, SAN patterns), key info + CA badge on DiscoveryPage, edit modal on TargetDetailPage, tags field on certificate creation, darwin→macOS mapping on AgentFleetPage. 211 Vitest tests passing. README accuracy: test counts (1300+ Go, 211 frontend), page count (24), demo data (32 certs, 7 issuers, 180 days), endpoint count (97), MCP tools (80), CLI subcommands (10), moved shipped items out of "Coming in v2.1.0". Docs: architecture.md diagrams updated (Vault PKI, DigiCert, Traefik, Caddy added), features.md Vault/DigiCert status updated. Version bumped to v2.0.20. cli binary removed from git tracking. Testing guide Part 41 added (12 auto + 9 manual tests). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -25,11 +25,63 @@ interface CreateProfileModalProps {
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
const AVAILABLE_ALGORITHMS = ['RSA', 'ECDSA', 'Ed25519'];
|
||||
const ALGORITHM_MIN_SIZES: Record<string, number[]> = {
|
||||
RSA: [2048, 3072, 4096],
|
||||
ECDSA: [256, 384],
|
||||
Ed25519: [0],
|
||||
};
|
||||
|
||||
const AVAILABLE_EKUS = [
|
||||
{ value: 'serverAuth', label: 'Server Authentication (TLS)' },
|
||||
{ value: 'clientAuth', label: 'Client Authentication' },
|
||||
{ value: 'codeSigning', label: 'Code Signing' },
|
||||
{ value: 'emailProtection', label: 'Email Protection (S/MIME)' },
|
||||
{ value: 'timeStamping', label: 'Time Stamping' },
|
||||
];
|
||||
|
||||
interface KeyAlgorithmEntry {
|
||||
algorithm: string;
|
||||
min_size: number;
|
||||
}
|
||||
|
||||
function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: CreateProfileModalProps) {
|
||||
const [name, setName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [ttl, setTtl] = useState('86400');
|
||||
const [shortLived, setShortLived] = useState(false);
|
||||
const [keyAlgorithms, setKeyAlgorithms] = useState<KeyAlgorithmEntry[]>([
|
||||
{ algorithm: 'ECDSA', min_size: 256 },
|
||||
{ algorithm: 'RSA', min_size: 2048 },
|
||||
]);
|
||||
const [selectedEkus, setSelectedEkus] = useState<string[]>(['serverAuth']);
|
||||
const [sanPatterns, setSanPatterns] = useState('');
|
||||
const [spiffePattern, setSpiffePattern] = useState('');
|
||||
|
||||
const addAlgorithm = () => {
|
||||
const unused = AVAILABLE_ALGORITHMS.find(a => !keyAlgorithms.some(ka => ka.algorithm === a));
|
||||
if (unused) {
|
||||
setKeyAlgorithms([...keyAlgorithms, { algorithm: unused, min_size: ALGORITHM_MIN_SIZES[unused][0] }]);
|
||||
}
|
||||
};
|
||||
|
||||
const removeAlgorithm = (idx: number) => {
|
||||
setKeyAlgorithms(keyAlgorithms.filter((_, i) => i !== idx));
|
||||
};
|
||||
|
||||
const updateAlgorithm = (idx: number, field: 'algorithm' | 'min_size', value: string | number) => {
|
||||
const updated = [...keyAlgorithms];
|
||||
if (field === 'algorithm') {
|
||||
updated[idx] = { algorithm: value as string, min_size: ALGORITHM_MIN_SIZES[value as string]?.[0] || 0 };
|
||||
} else {
|
||||
updated[idx] = { ...updated[idx], min_size: value as number };
|
||||
}
|
||||
setKeyAlgorithms(updated);
|
||||
};
|
||||
|
||||
const toggleEku = (eku: string) => {
|
||||
setSelectedEkus(prev => prev.includes(eku) ? prev.filter(e => e !== eku) : [...prev, eku]);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
@@ -39,20 +91,31 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
description: description.trim(),
|
||||
max_ttl_seconds: parseInt(ttl) || 86400,
|
||||
allow_short_lived: shortLived,
|
||||
allowed_key_algorithms: keyAlgorithms,
|
||||
allowed_ekus: selectedEkus,
|
||||
required_san_patterns: sanPatterns.trim() ? sanPatterns.split(',').map(s => s.trim()).filter(Boolean) : [],
|
||||
spiffe_uri_pattern: spiffePattern.trim() || '',
|
||||
enabled: true,
|
||||
});
|
||||
setName('');
|
||||
setDescription('');
|
||||
setTtl('86400');
|
||||
setShortLived(false);
|
||||
setKeyAlgorithms([{ algorithm: 'ECDSA', min_size: 256 }, { algorithm: 'RSA', min_size: 2048 }]);
|
||||
setSelectedEkus(['serverAuth']);
|
||||
setSanPatterns('');
|
||||
setSpiffePattern('');
|
||||
onSuccess();
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const inputClass = 'w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400';
|
||||
const selectClass = 'bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400';
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 w-full max-w-md shadow-xl" onClick={e => e.stopPropagation()}>
|
||||
<div className="bg-surface border border-surface-border rounded p-5 w-full max-w-lg shadow-xl max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
|
||||
<h2 className="text-lg font-semibold text-ink mb-4">Create Profile</h2>
|
||||
{error && <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">{error}</div>}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
@@ -61,7 +124,7 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
<input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
className={inputClass}
|
||||
placeholder="e.g., Web Server Certs"
|
||||
required
|
||||
/>
|
||||
@@ -71,7 +134,7 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
className={inputClass}
|
||||
placeholder="Optional description"
|
||||
rows={2}
|
||||
/>
|
||||
@@ -82,7 +145,7 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
type="number"
|
||||
value={ttl}
|
||||
onChange={e => setTtl(e.target.value)}
|
||||
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400"
|
||||
className={inputClass}
|
||||
placeholder="86400"
|
||||
/>
|
||||
<p className="text-xs text-ink-muted mt-1">
|
||||
@@ -109,6 +172,97 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
|
||||
/>
|
||||
<label htmlFor="shortLived" className="text-sm text-ink">Allow short-lived certs</label>
|
||||
</div>
|
||||
|
||||
{/* Allowed Key Algorithms */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label className="block text-sm font-medium text-ink">Allowed Key Algorithms</label>
|
||||
{keyAlgorithms.length < AVAILABLE_ALGORITHMS.length && (
|
||||
<button type="button" onClick={addAlgorithm} className="text-xs text-brand-600 hover:text-brand-700 font-medium">
|
||||
+ Add
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{keyAlgorithms.map((ka, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2">
|
||||
<select
|
||||
value={ka.algorithm}
|
||||
onChange={e => updateAlgorithm(idx, 'algorithm', e.target.value)}
|
||||
className={selectClass + ' flex-1'}
|
||||
>
|
||||
{AVAILABLE_ALGORITHMS.map(a => (
|
||||
<option key={a} value={a} disabled={a !== ka.algorithm && keyAlgorithms.some(k => k.algorithm === a)}>
|
||||
{a}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{ka.algorithm !== 'Ed25519' ? (
|
||||
<select
|
||||
value={ka.min_size}
|
||||
onChange={e => updateAlgorithm(idx, 'min_size', parseInt(e.target.value))}
|
||||
className={selectClass + ' w-24'}
|
||||
>
|
||||
{(ALGORITHM_MIN_SIZES[ka.algorithm] || []).map(s => (
|
||||
<option key={s} value={s}>{s}+</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-xs text-ink-muted w-24 text-center">fixed</span>
|
||||
)}
|
||||
<button type="button" onClick={() => removeAlgorithm(idx)} className="text-xs text-red-500 hover:text-red-600">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{keyAlgorithms.length === 0 && (
|
||||
<p className="text-xs text-ink-faint">No algorithms configured. Click + Add to allow key types.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Allowed EKUs */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Allowed Extended Key Usages</label>
|
||||
<div className="space-y-1.5">
|
||||
{AVAILABLE_EKUS.map(eku => (
|
||||
<label key={eku.value} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedEkus.includes(eku.value)}
|
||||
onChange={() => toggleEku(eku.value)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-ink">{eku.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Required SAN Patterns */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">Required SAN Patterns</label>
|
||||
<input
|
||||
value={sanPatterns}
|
||||
onChange={e => setSanPatterns(e.target.value)}
|
||||
className={inputClass}
|
||||
placeholder="e.g., *.example.com, api.internal"
|
||||
/>
|
||||
<p className="text-xs text-ink-muted mt-1">Comma-separated patterns. Leave empty for no constraints.</p>
|
||||
</div>
|
||||
|
||||
{/* SPIFFE URI Pattern */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-ink mb-1">SPIFFE URI Pattern</label>
|
||||
<input
|
||||
value={spiffePattern}
|
||||
onChange={e => setSpiffePattern(e.target.value)}
|
||||
className={inputClass}
|
||||
placeholder="e.g., spiffe://example.org/service/*"
|
||||
/>
|
||||
<p className="text-xs text-ink-muted mt-1">Optional workload identity URI SAN pattern.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
Reference in New Issue
Block a user