Add identifier validation to database names

Apply the same IDENTIFIER_PATTERN validation to database names in both
the backend routes and the frontend create dialog, with red border and
inline error message for invalid input.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bchapuis

apps/api/src/routes/databases.ts

@@ -1,17 +1,18 @@
-import type {
-  CreateDatabaseRequest,
-  CreateDatabaseResponse,
-  DatabaseQueryRequest,
-  DatabaseQueryResponse,
-  DatabaseSchemaColumn,
-  DatabaseSchemaForeignKey,
-  DatabaseSchemaResponse,
-  DatabaseSchemaTable,
-  DeleteDatabaseResponse,
-  GetDatabaseResponse,
-  ListDatabasesResponse,
-  UpdateDatabaseRequest,
-  UpdateDatabaseResponse,
+import {
+  type CreateDatabaseRequest,
+  type CreateDatabaseResponse,
+  type DatabaseQueryRequest,
+  type DatabaseQueryResponse,
+  type DatabaseSchemaColumn,
+  type DatabaseSchemaForeignKey,
+  type DatabaseSchemaResponse,
+  type DatabaseSchemaTable,
+  type DeleteDatabaseResponse,
+  type GetDatabaseResponse,
+  IDENTIFIER_PATTERN,
+  type ListDatabasesResponse,
+  type UpdateDatabaseRequest,
+  type UpdateDatabaseResponse,
 } from "@dafthunk/types";
 import { zValidator } from "@hono/zod-validator";
 import { Hono } from "hono";
@@ -64,7 +65,13 @@ databaseRoutes.post(
   zValidator(
     "json",
     z.object({
-      name: z.string().min(1, "Database name is required"),
+      name: z
+        .string()
+        .min(1, "Database name is required")
+        .regex(
+          IDENTIFIER_PATTERN,
+          "Must start with a letter or underscore, and contain only letters, digits, or underscores"
+        ),
     }) as z.ZodType<CreateDatabaseRequest>
   ),
   async (c) => {
@@ -126,7 +133,13 @@ databaseRoutes.put(
   zValidator(
     "json",
     z.object({
-      name: z.string().min(1, "Database name is required"),
+      name: z
+        .string()
+        .min(1, "Database name is required")
+        .regex(
+          IDENTIFIER_PATTERN,
+          "Must start with a letter or underscore, and contain only letters, digits, or underscores"
+        ),
     }) as z.ZodType<UpdateDatabaseRequest>
   ),
   async (c) => {

apps/api/src/routes/schemas.ts

@@ -1,8 +1,8 @@
 import {
-  IDENTIFIER_PATTERN,
   type CreateSchemaResponse,
   type DeleteSchemaResponse,
   type GetSchemaResponse,
+  IDENTIFIER_PATTERN,
   type ListSchemasResponse,
   type SchemaEntity,
   type UpdateSchemaResponse,

apps/app/src/components/schema-dialog.tsx

@@ -1,4 +1,9 @@
-import { IDENTIFIER_PATTERN, type Field, type FieldType, type SchemaEntity } from "@dafthunk/types";
+import {
+  type Field,
+  type FieldType,
+  IDENTIFIER_PATTERN,
+  type SchemaEntity,
+} from "@dafthunk/types";
 import Asterisk from "lucide-react/icons/asterisk";
 import Hash from "lucide-react/icons/hash";
 import KeyRound from "lucide-react/icons/key-round";

apps/app/src/pages/databases-page.tsx

@@ -1,3 +1,4 @@
+import { IDENTIFIER_PATTERN } from "@dafthunk/types";
 import { ColumnDef } from "@tanstack/react-table";
 import MoreHorizontal from "lucide-react/icons/more-horizontal";
 import PlusCircle from "lucide-react/icons/plus-circle";
@@ -34,6 +35,7 @@ import {
   deleteDatabase,
   useDatabases,
 } from "@/services/database-service";
+import { cn } from "@/utils/utils";
 
 function useDatabaseActions() {
   const { mutateDatabases } = useDatabases();
@@ -151,6 +153,7 @@ function createColumns(
 
 export function DatabasesPage() {
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [newDatabaseName, setNewDatabaseName] = useState("");
   const { setBreadcrumbs } = usePageBreadcrumbs([]);
   const { organization } = useAuth();
   const orgId = organization?.id || "";
@@ -206,17 +209,22 @@ export function DatabasesPage() {
             description: "Create a new database to get started.",
           }}
         />
-        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <Dialog
+          open={isCreateDialogOpen}
+          onOpenChange={(open) => {
+            setIsCreateDialogOpen(open);
+            if (!open) setNewDatabaseName("");
+          }}
+        >
           <DialogContent>
             <DialogHeader>
               <DialogTitle>Create New Database</DialogTitle>
             </DialogHeader>
             <form
               onSubmit={async (e) => {
                 e.preventDefault();
-                const formData = new FormData(e.currentTarget);
-                const name = formData.get("name") as string;
-                await handleCreateDatabase(name);
+                await handleCreateDatabase(newDatabaseName.trim());
+                setNewDatabaseName("");
               }}
               className="space-y-4"
             >
@@ -225,9 +233,22 @@ export function DatabasesPage() {
                 <Input
                   id="name"
                   name="name"
+                  value={newDatabaseName}
+                  onChange={(e) => setNewDatabaseName(e.target.value)}
                   placeholder="Enter database name"
-                  className="mt-2"
+                  className={cn(
+                    "mt-2",
+                    newDatabaseName.trim().length > 0 &&
+                      !IDENTIFIER_PATTERN.test(newDatabaseName.trim()) &&
+                      "border-destructive"
+                  )}
                 />
+                {newDatabaseName.trim().length > 0 &&
+                  !IDENTIFIER_PATTERN.test(newDatabaseName.trim()) && (
+                    <p className="text-xs text-destructive mt-1">
+                      Letters, digits, and underscores only (e.g. my_database)
+                    </p>
+                  )}
               </div>
               <DialogFooter>
                 <Button
@@ -237,7 +258,15 @@ export function DatabasesPage() {
                 >
                   Cancel
                 </Button>
-                <Button type="submit">Create Database</Button>
+                <Button
+                  type="submit"
+                  disabled={
+                    newDatabaseName.trim().length === 0 ||
+                    !IDENTIFIER_PATTERN.test(newDatabaseName.trim())
+                  }
+                >
+                  Create Database
+                </Button>
               </DialogFooter>
             </form>
           </DialogContent>