better ux for connections

app/api/integrations/route.ts

@@ -16,7 +16,7 @@ export type GetIntegrationsResponse = {
 }[];
 
 export type CreateIntegrationRequest = {
-  name: string;
+  name?: string;
   type: IntegrationType;
   config: IntegrationConfig;
 };
@@ -92,16 +92,16 @@ export async function POST(request: Request) {
 
     const body: CreateIntegrationRequest = await request.json();
 
-    if (!(body.name && body.type && body.config)) {
+    if (!(body.type && body.config)) {
       return NextResponse.json(
-        { error: "Name, type, and config are required" },
+        { error: "Type and config are required" },
         { status: 400 }
       );
     }
 
     const integration = await createIntegration(
       session.user.id,
-      body.name,
+      body.name || "",
       body.type,
       body.config
     );

components/settings/api-keys-dialog.tsx

@@ -253,25 +253,38 @@ export function ApiKeysDialog({ open, onOpenChange }: ApiKeysDialogProps) {
               Create a new API key for webhook authentication
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="key-name">Label (optional)</Label>
-              <Input
-                id="key-name"
-                onChange={(e) => setNewKeyName(e.target.value)}
-                placeholder="e.g., Production, Testing"
-                value={newKeyName}
-              />
+          <form
+            id="create-api-key-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              handleCreate();
+            }}
+          >
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <Label htmlFor="key-name">Label (optional)</Label>
+                <Input
+                  id="key-name"
+                  onChange={(e) => setNewKeyName(e.target.value)}
+                  placeholder="e.g., Production, Testing"
+                  value={newKeyName}
+                />
+              </div>
             </div>
-          </div>
+          </form>
           <DialogFooter>
             <Button
               onClick={() => setShowCreateDialog(false)}
+              type="button"
               variant="outline"
             >
               Cancel
             </Button>
-            <Button disabled={creating} onClick={handleCreate}>
+            <Button
+              disabled={creating}
+              form="create-api-key-form"
+              type="submit"
+            >
               {creating ? <Spinner className="mr-2 size-4" /> : null}
               Create
             </Button>

components/settings/index.tsx

@@ -83,21 +83,36 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
             <Spinner />
           </div>
         ) : (
-          <div className="mt-4">
+          <form
+            className="mt-4"
+            id="settings-form"
+            onSubmit={(e) => {
+              e.preventDefault();
+              saveAccount();
+            }}
+          >
             <AccountSettings
               accountEmail={accountEmail}
               accountName={accountName}
               onEmailChange={setAccountEmail}
               onNameChange={setAccountName}
             />
-          </div>
+          </form>
         )}
 
         <DialogFooter>
-          <Button onClick={() => onOpenChange(false)} variant="outline">
+          <Button
+            onClick={() => onOpenChange(false)}
+            type="button"
+            variant="outline"
+          >
             Cancel
           </Button>
-          <Button disabled={loading || saving} onClick={saveAccount}>
+          <Button
+            disabled={loading || saving}
+            form="settings-form"
+            type="submit"
+          >
             {saving ? <Spinner className="mr-2 size-4" /> : null}
             Save
           </Button>