Prevent autofill on TLS cert name field (#3204)

david-crespo · web-flow · commit 1761f9e86bd7 · 2026-04-30T22:30:01.000Z
It wasn't using `NameField` because it needs special validation that made sure the name wasn't already in use by one of the other certificates. But `NameField` has accepted an additional validation callback for a while. <img width="475" height="272" alt="image" src="https://github.com/user-attachments/assets/4ee137af-6760-45c4-9d5f-74c376b01809" />
diff --git 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
@@ -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
