From a0b92853231e6b3e30541b0e1b2882c18703ed74 Mon Sep 17 00:00:00 2001
From: shankar0123 <skreddy040@gmail.com>
Date: Mon, 30 Mar 2026 07:53:14 -0400
Subject: [PATCH] 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>
---
 web/src/pages/CertificatesPage.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/CertificatesPage.tsx b/web/src/pages/CertificatesPage.tsx
index 6106faf..7a19f21 100644
--- a/web/src/pages/CertificatesPage.tsx
+++ b/web/src/pages/CertificatesPage.tsx
@@ -13,6 +13,7 @@ import type { Certificate } from '../api/types';
 
 function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
   const [form, setForm] = useState({
+    name: '',
     id: '',
     common_name: '',
     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>
         {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>
+            <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>
             <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 }))}
@@ -89,7 +96,7 @@ function CreateCertificateModal({ onClose, onSuccess }: { onClose: () => void; o
           <button onClick={onClose} className="btn btn-ghost text-sm">Cancel</button>
           <button
             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"
           >
             {mutation.isPending ? 'Creating...' : 'Create Certificate'}