fix(ui): validate machine names before rename submission

Closes HP-545

app/routes/machines/dialogs/rename.tsx

@@ -12,6 +12,17 @@ const renameSchema = type({
   name: "string > 0",
 });
 
+const dnsLabelPattern = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/;
+
+function validateMachineName(values: Record<string, unknown>) {
+  const name = String(values.name ?? "").toLowerCase();
+  if (!dnsLabelPattern.test(name)) {
+    return {
+      name: "Use a valid DNS label: lowercase letters, numbers, and hyphens only. It must start and end with a letter or number.",
+    };
+  }
+}
+
 interface RenameProps {
   machine: Machine;
   isOpen: boolean;
@@ -23,12 +34,13 @@ export default function Rename({ machine, magic, isOpen, setIsOpen }: RenameProp
   const form = useForm({
     schema: renameSchema,
     defaultValues: { name: machine.givenName },
+    validate: validateMachineName,
   });
   const name = form.values.name as string;
 
   return (
     <Dialog isOpen={isOpen} onOpenChange={setIsOpen}>
-      <DialogPanel>
+      <DialogPanel isDisabled={!form.canSubmit}>
         <Title>Edit machine name for {machine.givenName}</Title>
         <Text className="mb-6">
           This name is shown in the admin panel, in Tailscale clients, and used when generating

app/routes/machines/machine-actions.ts

@@ -76,6 +76,13 @@ export async function machineAction({ request, context }: Route.ActionArgs) {
       }
 
       const name = String(formData.get("name"));
+      if (!/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/.test(name.toLowerCase())) {
+        throw data(
+          "Machine names must be valid DNS labels: lowercase letters, numbers, and hyphens only, and must start and end with a letter or number.",
+          { status: 400 },
+        );
+      }
+
       await api.nodes.rename(nodeId, name);
       await context.hsLive.refresh(nodesResource, api);
       return { message: "Machine renamed" };