From 3bd4c7260353b1c50f8558267c6a1946d285319d Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 30 Apr 2026 17:14:56 -0500
Subject: [PATCH] prevent autofill on TLS cert name field

---
 app/components/form/fields/TlsCertsField.tsx | 20 +++++++-------------
 test/e2e/silos.e2e.ts                        |  9 ++++++++-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/components/form/fields/TlsCertsField.tsx b/app/components/form/fields/TlsCertsField.tsx
index 824f986121..1393042301 100644
--- a/app/components/form/fields/TlsCertsField.tsx
+++ b/app/components/form/fields/TlsCertsField.tsx
@@ -20,8 +20,7 @@ import { Modal } from '~/ui/lib/Modal'
 import { DescriptionField } from './DescriptionField'
 import { ErrorMessage } from './ErrorMessage'
 import { FileField } from './FileField'
-import { validateName } from './NameField'
-import { TextField } from './TextField'
+import { NameField } from './NameField'
 
 export function TlsCertsField({ control }: { control: Control<SiloCreateFormValues> }) {
   const [showAddCert, setShowAddCert] = useState(false)
@@ -110,19 +109,14 @@ const AddCertModal = ({ onDismiss, onSubmit, allNames }: AddCertModalProps) => {
       <Modal.Body>
         <form autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
           <Modal.Section>
-            <TextField
+            <NameField
               name="name"
               control={control}
-              required
-              // this field is identical to NameField (which just does
-              // validateName for you) except we also want to check that the
-              // name is not in the list of certs you've already added
-              validate={(name) => {
-                if (allNames.includes(name)) {
-                  return 'A certificate with this name already exists'
-                }
-                return validateName(name, 'Name', true)
-              }}
+              validate={(name) =>
+                allNames.includes(name)
+                  ? 'A certificate with this name already exists'
+                  : undefined
+              }
             />
             <DescriptionField name="description" control={control} />
             <FileField
diff --git a/test/e2e/silos.e2e.ts b/test/e2e/silos.e2e.ts
index 080e2f151b..410df41c65 100644
--- a/test/e2e/silos.e2e.ts
+++ b/test/e2e/silos.e2e.ts
@@ -100,8 +100,15 @@ test('Create silo', async ({ page }) => {
   await chooseFile(page.getByLabel('Cert', { exact: true }), 'small')
   await chooseFile(page.getByLabel('Key'), 'small')
   const certName = certDialog.getByRole('textbox', { name: 'Name' })
-  await certName.fill('test-cert')
 
+  // check name format validation
+  await certName.fill('Bad Name')
+  await certSubmit.click()
+  await expect(
+    certDialog.getByText('Can only contain lower-case letters, numbers, and dashes')
+  ).toBeVisible()
+
+  await certName.fill('test-cert')
   await certSubmit.click()
 
   // Check cert appears in the mini-table