fix(autofill): add dummy inputs to prevent browser autofill for various fields, prevent having 0 workflows in workspace (#2482)

* fix(autofill): add dummy inputs to prevent browser autofill for various fields, prevent having 0 workflows in workspace

* cleanup

* ack PR comments

* fix failing test

Author: waleedlatif1

apps/sim/app/api/folders/[id]/route.ts

@@ -141,6 +141,23 @@ export async function DELETE(
       )
     }
 
+    // Check if deleting this folder would delete the last workflow(s) in the workspace
+    const workflowsInFolder = await countWorkflowsInFolderRecursively(
+      id,
+      existingFolder.workspaceId
+    )
+    const totalWorkflowsInWorkspace = await db
+      .select({ id: workflow.id })
+      .from(workflow)
+      .where(eq(workflow.workspaceId, existingFolder.workspaceId))
+
+    if (workflowsInFolder > 0 && workflowsInFolder >= totalWorkflowsInWorkspace.length) {
+      return NextResponse.json(
+        { error: 'Cannot delete folder containing the only workflow(s) in the workspace' },
+        { status: 400 }
+      )
+    }
+
     // Recursively delete folder and all its contents
     const deletionStats = await deleteFolderRecursively(id, existingFolder.workspaceId)
 
@@ -202,6 +219,34 @@ async function deleteFolderRecursively(
   return stats
 }
 
+/**
+ * Counts the number of workflows in a folder and all its subfolders recursively.
+ */
+async function countWorkflowsInFolderRecursively(
+  folderId: string,
+  workspaceId: string
+): Promise<number> {
+  let count = 0
+
+  const workflowsInFolder = await db
+    .select({ id: workflow.id })
+    .from(workflow)
+    .where(and(eq(workflow.folderId, folderId), eq(workflow.workspaceId, workspaceId)))
+
+  count += workflowsInFolder.length
+
+  const childFolders = await db
+    .select({ id: workflowFolder.id })
+    .from(workflowFolder)
+    .where(and(eq(workflowFolder.parentId, folderId), eq(workflowFolder.workspaceId, workspaceId)))
+
+  for (const childFolder of childFolders) {
+    count += await countWorkflowsInFolderRecursively(childFolder.id, workspaceId)
+  }
+
+  return count
+}
+
 // Helper function to check for circular references
 async function checkForCircularReference(folderId: string, parentId: string): Promise<boolean> {
   let currentParentId: string | null = parentId

apps/sim/app/api/workflows/[id]/route.test.ts

@@ -14,6 +14,7 @@ const mockGetWorkflowById = vi.fn()
 const mockGetWorkflowAccessContext = vi.fn()
 const mockDbDelete = vi.fn()
 const mockDbUpdate = vi.fn()
+const mockDbSelect = vi.fn()
 
 vi.mock('@/lib/auth', () => ({
   getSession: () => mockGetSession(),
@@ -49,6 +50,7 @@ vi.mock('@sim/db', () => ({
   db: {
     delete: () => mockDbDelete(),
     update: () => mockDbUpdate(),
+    select: () => mockDbSelect(),
   },
   workflow: {},
 }))
@@ -327,6 +329,13 @@ describe('Workflow By ID API Route', () => {
         isWorkspaceOwner: false,
       })
 
+      // Mock db.select() to return multiple workflows so deletion is allowed
+      mockDbSelect.mockReturnValue({
+        from: vi.fn().mockReturnValue({
+          where: vi.fn().mockResolvedValue([{ id: 'workflow-123' }, { id: 'workflow-456' }]),
+        }),
+      })
+
       mockDbDelete.mockReturnValue({
         where: vi.fn().mockResolvedValue([{ id: 'workflow-123' }]),
       })
@@ -347,6 +356,46 @@ describe('Workflow By ID API Route', () => {
       expect(data.success).toBe(true)
     })
 
+    it('should prevent deletion of the last workflow in workspace', async () => {
+      const mockWorkflow = {
+        id: 'workflow-123',
+        userId: 'user-123',
+        name: 'Test Workflow',
+        workspaceId: 'workspace-456',
+      }
+
+      mockGetSession.mockResolvedValue({
+        user: { id: 'user-123' },
+      })
+
+      mockGetWorkflowById.mockResolvedValue(mockWorkflow)
+      mockGetWorkflowAccessContext.mockResolvedValue({
+        workflow: mockWorkflow,
+        workspaceOwnerId: 'workspace-456',
+        workspacePermission: 'admin',
+        isOwner: true,
+        isWorkspaceOwner: false,
+      })
+
+      // Mock db.select() to return only 1 workflow (the one being deleted)
+      mockDbSelect.mockReturnValue({
+        from: vi.fn().mockReturnValue({
+          where: vi.fn().mockResolvedValue([{ id: 'workflow-123' }]),
+        }),
+      })
+
+      const req = new NextRequest('http://localhost:3000/api/workflows/workflow-123', {
+        method: 'DELETE',
+      })
+      const params = Promise.resolve({ id: 'workflow-123' })
+
+      const response = await DELETE(req, { params })
+
+      expect(response.status).toBe(400)
+      const data = await response.json()
+      expect(data.error).toBe('Cannot delete the only workflow in the workspace')
+    })
+
     it.concurrent('should deny deletion for non-admin users', async () => {
       const mockWorkflow = {
         id: 'workflow-123',

apps/sim/app/api/workflows/[id]/route.ts

@@ -228,6 +228,21 @@ export async function DELETE(
       return NextResponse.json({ error: 'Access denied' }, { status: 403 })
     }
 
+    // Check if this is the last workflow in the workspace
+    if (workflowData.workspaceId) {
+      const totalWorkflowsInWorkspace = await db
+        .select({ id: workflow.id })
+        .from(workflow)
+        .where(eq(workflow.workspaceId, workflowData.workspaceId))
+
+      if (totalWorkflowsInWorkspace.length <= 1) {
+        return NextResponse.json(
+          { error: 'Cannot delete the only workflow in the workspace' },
+          { status: 400 }
+        )
+      }
+    }
+
     // Check if workflow has published templates before deletion
     const { searchParams } = new URL(request.url)
     const checkTemplates = searchParams.get('check-templates') === 'true'

apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx

@@ -339,12 +339,31 @@ export function CreateBaseModal({
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
               <div className='space-y-[12px]'>
                 <div className='flex flex-col gap-[8px]'>
-                  <Label htmlFor='name'>Name</Label>
+                  <Label htmlFor='kb-name'>Name</Label>
+                  {/* Hidden decoy fields to prevent browser autofill */}
+                  <input
+                    type='text'
+                    name='fakeusernameremembered'
+                    autoComplete='username'
+                    style={{
+                      position: 'absolute',
+                      left: '-9999px',
+                      opacity: 0,
+                      pointerEvents: 'none',
+                    }}
+                    tabIndex={-1}
+                    readOnly
+                  />
                   <Input
-                    id='name'
+                    id='kb-name'
                     placeholder='Enter knowledge base name'
                     {...register('name')}
                     className={cn(errors.name && 'border-[var(--text-error)]')}
+                    autoComplete='off'
+                    autoCorrect='off'
+                    autoCapitalize='off'
+                    data-lpignore='true'
+                    data-form-type='other'
                   />
                 </div>
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx

@@ -490,6 +490,20 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
                 <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
                   Enter a name for your API key to help you identify it later.
                 </p>
+                {/* Hidden decoy fields to prevent browser autofill */}
+                <input
+                  type='text'
+                  name='fakeusernameremembered'
+                  autoComplete='username'
+                  style={{
+                    position: 'absolute',
+                    left: '-9999px',
+                    opacity: 0,
+                    pointerEvents: 'none',
+                  }}
+                  tabIndex={-1}
+                  readOnly
+                />
                 <EmcnInput
                   value={newKeyName}
                   onChange={(e) => {
@@ -499,6 +513,12 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
                   placeholder='e.g., Development, Production'
                   className='h-9'
                   autoFocus
+                  name='api_key_label'
+                  autoComplete='off'
+                  autoCorrect='off'
+                  autoCapitalize='off'
+                  data-lpignore='true'
+                  data-form-type='other'
                 />
                 {createError && (
                   <p className='text-[11px] text-[var(--text-error)] leading-tight'>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx

@@ -141,12 +141,37 @@ export function MemberInvitationCard({
         {/* Main invitation input */}
         <div className='flex items-start gap-2'>
           <div className='flex-1'>
+            {/* Hidden decoy fields to prevent browser autofill */}
+            <input
+              type='text'
+              name='fakeusernameremembered'
+              autoComplete='username'
+              style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+              tabIndex={-1}
+              readOnly
+            />
+            <input
+              type='email'
+              name='fakeemailremembered'
+              autoComplete='email'
+              style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+              tabIndex={-1}
+              readOnly
+            />
             <Input
               placeholder='Enter email address'
               value={inviteEmail}
               onChange={handleEmailChange}
               disabled={isInviting || !hasAvailableSeats}
               className={cn(emailError && 'border-red-500 focus-visible:ring-red-500')}
+              name='member_invite_field'
+              autoComplete='off'
+              autoCorrect='off'
+              autoCapitalize='off'
+              spellCheck={false}
+              data-lpignore='true'
+              data-form-type='other'
+              aria-autocomplete='none'
             />
             {emailError && (
               <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx

@@ -55,16 +55,31 @@ export function NoOrganizationView({
 
           {/* Form fields - clean layout without card */}
           <div className='space-y-4'>
+            {/* Hidden decoy field to prevent browser autofill */}
+            <input
+              type='text'
+              name='fakeusernameremembered'
+              autoComplete='username'
+              style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+              tabIndex={-1}
+              readOnly
+            />
             <div>
-              <Label htmlFor='orgName' className='font-medium text-[13px]'>
+              <Label htmlFor='team-name-field' className='font-medium text-[13px]'>
                 Team Name
               </Label>
               <Input
-                id='orgName'
+                id='team-name-field'
                 value={orgName}
                 onChange={onOrgNameChange}
                 placeholder='My Team'
                 className='mt-1'
+                name='team_name_field'
+                autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
+                data-lpignore='true'
+                data-form-type='other'
               />
             </div>
 
@@ -116,31 +131,52 @@ export function NoOrganizationView({
             </ModalHeader>
 
             <div className='space-y-4'>
+              {/* Hidden decoy field to prevent browser autofill */}
+              <input
+                type='text'
+                name='fakeusernameremembered'
+                autoComplete='username'
+                style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+                tabIndex={-1}
+                readOnly
+              />
               <div>
-                <Label htmlFor='org-name' className='font-medium text-[13px]'>
+                <Label htmlFor='org-name-field' className='font-medium text-[13px]'>
                   Organization Name
                 </Label>
                 <Input
-                  id='org-name'
+                  id='org-name-field'
                   placeholder='Enter organization name'
                   value={orgName}
                   onChange={onOrgNameChange}
                   disabled={isCreatingOrg}
                   className='mt-1'
+                  name='org_name_field'
+                  autoComplete='off'
+                  autoCorrect='off'
+                  autoCapitalize='off'
+                  data-lpignore='true'
+                  data-form-type='other'
                 />
               </div>
 
               <div>
-                <Label htmlFor='org-slug' className='font-medium text-[13px]'>
+                <Label htmlFor='org-slug-field' className='font-medium text-[13px]'>
                   Organization Slug
                 </Label>
                 <Input
-                  id='org-slug'
+                  id='org-slug-field'
                   placeholder='organization-slug'
                   value={orgSlug}
                   onChange={(e) => setOrgSlug(e.target.value)}
                   disabled={isCreatingOrg}
                   className='mt-1'
+                  name='org_slug_field'
+                  autoComplete='off'
+                  autoCorrect='off'
+                  autoCapitalize='off'
+                  data-lpignore='true'
+                  data-form-type='other'
                 />
               </div>
             </div>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/template-profile/template-profile.tsx

@@ -390,11 +390,26 @@ export function TemplateProfile() {
                   disabled={isUploadingProfilePicture}
                 />
               </div>
+              {/* Hidden decoy field to prevent browser autofill */}
+              <input
+                type='text'
+                name='fakeusernameremembered'
+                autoComplete='username'
+                style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+                tabIndex={-1}
+                readOnly
+              />
               <Input
                 placeholder='Name'
                 value={formData.name}
                 onChange={(e) => updateField('name', e.target.value)}
                 className='h-9 flex-1'
+                name='profile_display_name'
+                autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
+                data-lpignore='true'
+                data-form-type='other'
               />
             </div>
             {uploadError && <p className='text-[12px] text-[var(--text-error)]'>{uploadError}</p>}