mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-07 15:11:29 +00:00
fix(gui): add missing Name field to certificate creation form
The New Certificate modal was missing the required "name" field, causing all certificate creation attempts to fail with "name is required". Added Name text input above ID field with client-side validation matching the backend requirement. Fixes #GH-issue (name is required on certificate creation) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -13,6 +13,7 @@ import type { Certificate } from '../api/types';
|
|||||||
|
|
||||||
function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
|
function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
|
||||||
const [form, setForm] = useState({
|
const [form, setForm] = useState({
|
||||||
|
name: '',
|
||||||
id: '',
|
id: '',
|
||||||
common_name: '',
|
common_name: '',
|
||||||
environment: 'production',
|
environment: 'production',
|
||||||
@@ -35,6 +36,12 @@ function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; o
|
|||||||
<h2 className="text-lg font-semibold text-ink mb-4">New Certificate</h2>
|
<h2 className="text-lg font-semibold text-ink mb-4">New Certificate</h2>
|
||||||
{error && <div className="bg-red-50 border border-red-200 text-red-700 rounded px-3 py-2 text-sm mb-4">{error}</div>}
|
{error && <div className="bg-red-50 border border-red-200 text-red-700 rounded px-3 py-2 text-sm mb-4">{error}</div>}
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-ink-muted block mb-1">Name *</label>
|
||||||
|
<input value={form.name} onChange={e => setForm(f => ({ ...f, name: 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 focus:ring-1 focus:ring-brand-400/20"
|
||||||
|
placeholder="API Production Cert" />
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs text-ink-muted block mb-1">ID (optional)</label>
|
<label className="text-xs text-ink-muted block mb-1">ID (optional)</label>
|
||||||
<input value={form.id} onChange={e => setForm(f => ({ ...f, id: e.target.value }))}
|
<input value={form.id} onChange={e => setForm(f => ({ ...f, id: e.target.value }))}
|
||||||
@@ -89,7 +96,7 @@ function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; o
|
|||||||
<button onClick={onClose} className="btn btn-ghost text-sm">Cancel</button>
|
<button onClick={onClose} className="btn btn-ghost text-sm">Cancel</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => mutation.mutate()}
|
onClick={() => mutation.mutate()}
|
||||||
disabled={!form.common_name || !form.issuer_id || mutation.isPending}
|
disabled={!form.name || !form.common_name || !form.issuer_id || mutation.isPending}
|
||||||
className="btn btn-primary text-sm disabled:opacity-50"
|
className="btn btn-primary text-sm disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{mutation.isPending ? 'Creating...' : 'Create Certificate'}
|
{mutation.isPending ? 'Creating...' : 'Create Certificate'}
|
||||||
|
|||||||
Reference in New Issue
Block a user