fix: FTP download crash, recent connections pre-fill, dialog aria warnings, connection dialog UX

server/index.js:
- Fix FTP download: replace plain object with proper Writable stream
  so basic-ftp can call .once() without crashing

RecentConnectionsDialog:
- Replace onConnect (which sent anonymous credentials) with onPrefill
  that opens ConnectionDialog pre-filled — user now enters password manually

ConnectionDialog:
- Add prefill prop for pre-populating from recent connections
- Password show/hide eye icon (appears only after first character typed)
- Anonymous shown as placeholder, not pre-filled value
- Save button between Cancel and Connect — saves directly to savedConnections

Index.tsx:
- Wire connectionPrefill state and onPrefill handler
- Wire onSave handler to persist connection without navigating away

Dialogs (aria fix):
- Add DialogDescription to BookmarksDialog, RecentConnectionsDialog,
  SavedConnectionsDialog, CreateFolderDialog, CreateFileDialog,
  FileProperties — fixes "Missing Description for DialogContent" warning

Author: SSMG4

README.md

@@ -302,4 +302,3 @@ WebFTP is licensed under the **GNU General Public License v3.0**.
 See the [LICENSE](LICENSE) file for the full license text.
 
 You are free to use, modify, and distribute this software under the terms of the GPL-3.0. Any derivative work must also be distributed under the same license.
-

server/index.js

@@ -222,12 +222,20 @@ app.post('/api/download', async (req, res) => {
     res.setHeader('Content-Type', 'application/octet-stream');
 
     if (session.type === 'ftp') {
+      const { Writable } = await import('stream');
       const chunks = [];
-      const writable = {
-        write(chunk) { chunks.push(chunk); },
-        end() { res.end(Buffer.concat(chunks)); },
-      };
-      await session.client.downloadTo(writable, remotePath);
+      const writable = new Writable({
+        write(chunk, _encoding, callback) {
+          chunks.push(chunk);
+          callback();
+        },
+      });
+      await new Promise((resolve, reject) => {
+        writable.on('finish', resolve);
+        writable.on('error', reject);
+        session.client.downloadTo(writable, remotePath).then(resolve).catch(reject);
+      });
+      res.end(Buffer.concat(chunks));
       return;
     }
 

src/components/BookmarksDialog.tsx

@@ -7,6 +7,7 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
@@ -48,6 +49,9 @@ export const BookmarksDialog = ({ open, onOpenChange, onNavigate }: BookmarksDia
             <Bookmark className="h-5 w-5" />
             Bookmarks
           </DialogTitle>
+          <DialogDescription>
+            Your saved folder bookmarks. Right-click any folder to add one.
+          </DialogDescription>
         </DialogHeader>
 
         <ScrollArea className="h-[400px]">

src/components/ConnectionDialog.tsx

@@ -9,13 +9,15 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Switch } from '@/components/ui/switch';
 import { ConnectOptions, Protocol } from '@/types/ftp';
 import { useAuth } from '@/contexts/AuthContext';
-import { Lock, ChevronDown } from 'lucide-react';
+import { Lock, ChevronDown, Eye, EyeOff, Save } from 'lucide-react';
 
 interface ConnectionDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onConnect: (options: ConnectOptions) => void;
+  onSave?: (options: ConnectOptions) => void;
   isConnecting: boolean;
+  prefill?: Partial<ConnectOptions>;
 }
 
 const DEFAULT_PORTS: Record<Protocol, number> = {
@@ -33,12 +35,14 @@ export const ConnectionDialog = ({
   open,
   onOpenChange,
   onConnect,
+  onSave,
   isConnecting,
+  prefill,
 }: ConnectionDialogProps) => {
   const [formData, setFormData] = useState<ConnectOptions>({
     host: '',
     port: 21,
-    username: 'anonymous',
+    username: '',
     password: '',
     protocol: 'ftp',
   });
@@ -48,6 +52,7 @@ export const ConnectionDialog = ({
   const [showSftpMore, setShowSftpMore] = useState(false);
   const [showSmbMore, setShowSmbMore] = useState(false);
   const [showWebdavMore, setShowWebdavMore] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const [keyFile, setKeyFile] = useState<File | null>(null);
   const { user } = useAuth();
 
@@ -71,10 +76,22 @@ export const ConnectionDialog = ({
     setKeyFile(null);
   }, [formData.protocol]);
 
-  // Reset on open
+  // Reset on open, applying any prefill from recent connections
   useEffect(() => {
     if (open) {
-      setFormData(prev => ({ ...prev, protocol: 'ftp', port: 21, username: 'anonymous' }));
+      setFormData({
+        host: prefill?.host ?? '',
+        port: prefill?.port ?? 21,
+        username: prefill?.username ?? '',
+        password: '',
+        protocol: prefill?.protocol ?? 'ftp',
+      });
+      setShowPassword(false);
+      setShowFtpMore(false);
+      setShowSftpMore(false);
+      setShowSmbMore(false);
+      setShowWebdavMore(false);
+      setKeyFile(null);
     }
   }, [open]);
 
@@ -134,12 +151,24 @@ export const ConnectionDialog = ({
       </div>
       <div className="grid gap-2">
         <Label htmlFor="password">Password</Label>
-        <Input
-          id="password"
-          type="password"
-          value={formData.password}
-          onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
-        />
+        <div className="relative">
+          <Input
+            id="password"
+            type={showPassword ? 'text' : 'password'}
+            value={formData.password}
+            onChange={(e) => setFormData(prev => ({ ...prev, password: e.target.value }))}
+            className={formData.password ? 'pr-10' : ''}
+          />
+          {formData.password && (
+            <button
+              type="button"
+              onClick={() => setShowPassword(v => !v)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </button>
+          )}
+        </div>
       </div>
     </>
   );
@@ -462,6 +491,16 @@ export const ConnectionDialog = ({
                 <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isConnecting}>
                   Cancel
                 </Button>
+                {onSave && (
+                  <Button
+                    type="button"
+                    onClick={() => onSave(formData)}
+                    disabled={!formData.host || isConnecting}
+                  >
+                    <Save className="h-4 w-4 mr-2" />
+                    Save
+                  </Button>
+                )}
                 <Button type="submit" disabled={isConnecting}>
                   {isConnecting ? 'Connecting...' : 'Connect'}
                 </Button>

src/components/CreateFileDialog.tsx

@@ -5,6 +5,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogDescription,
   DialogFooter,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
@@ -37,6 +38,7 @@ export const CreateFileDialog = ({ open, onOpenChange, onCreateFile }: CreateFil
             <FileText className="h-5 w-5 text-muted-foreground" />
             Create New File
           </DialogTitle>
+          <DialogDescription>Enter a name for the new file.</DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit}>
           <div className="space-y-4 py-4">

src/components/CreateFolderDialog.tsx

@@ -5,6 +5,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogDescription,
   DialogFooter,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
@@ -37,6 +38,7 @@ export const CreateFolderDialog = ({ open, onOpenChange, onCreateFolder }: Creat
             <FolderPlus className="h-5 w-5 text-accent" />
             Create New Folder
           </DialogTitle>
+          <DialogDescription>Enter a name for the new folder.</DialogDescription>
         </DialogHeader>
         <form onSubmit={handleSubmit}>
           <div className="space-y-4 py-4">

src/components/FileProperties.tsx

@@ -8,6 +8,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogDescription,
 } from '@/components/ui/dialog';
 import { File, Folder } from 'lucide-react';
 
@@ -36,6 +37,7 @@ export const FileProperties = ({
             )}
             Properties
           </DialogTitle>
+          <DialogDescription>Details for {file.name}</DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4">

src/components/RecentConnectionsDialog.tsx

@@ -7,6 +7,7 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
@@ -23,7 +24,8 @@ interface RecentConnection {
 interface RecentConnectionsDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onConnect: (options: ConnectOptions) => void;
+  // Called with a partial ConnectOptions so the ConnectionDialog opens pre-filled
+  onPrefill: (partial: Partial<ConnectOptions>) => void;
 }
 
 function getStorageKey(userId: string | undefined): string {
@@ -53,13 +55,12 @@ function formatTimestamp(timestamp: number): string {
   return `${diffDays} days ago`;
 }
 
-export const RecentConnectionsDialog = ({ open, onOpenChange, onConnect }: RecentConnectionsDialogProps) => {
+export const RecentConnectionsDialog = ({ open, onOpenChange, onPrefill }: RecentConnectionsDialogProps) => {
   const { user } = useAuth();
   const [recentConnections, setRecentConnections] = useState<RecentConnection[]>(() =>
     loadRecent(user?.id)
   );
 
-  // Refresh when dialog opens
   const handleOpenChange = (v: boolean) => {
     if (v) setRecentConnections(loadRecent(user?.id));
     onOpenChange(v);
@@ -73,22 +74,23 @@ export const RecentConnectionsDialog = ({ open, onOpenChange, onConnect }: Recen
   };
 
   const handleClearAll = () => {
-    const key = getStorageKey(user?.id);
-    localStorage.removeItem(key);
+    localStorage.removeItem(getStorageKey(user?.id));
     setRecentConnections([]);
   };
 
-  // Reconnect with minimal options — the user will need to re-enter password
-  // (we deliberately don't store passwords in recent connections)
-  const handleConnect = (conn: RecentConnection) => {
-    onConnect({
+  // Open ConnectionDialog pre-filled with host and protocol so user can enter password
+  const handleSelect = (conn: RecentConnection) => {
+    onOpenChange(false);
+    onPrefill({
       host: conn.host,
-      port: 21,
-      username: 'anonymous',
-      password: '',
+      port: conn.protocol === 'sftp' || conn.protocol === 'ssh' || conn.protocol === 'scp' ? 22
+        : conn.protocol === 'smb' ? 445
+        : conn.protocol === 'webdav' ? 443
+        : 21,
       protocol: (conn.protocol as ConnectOptions['protocol']) || 'ftp',
+      username: '',
+      password: '',
     });
-    onOpenChange(false);
   };
 
   return (
@@ -106,6 +108,9 @@ export const RecentConnectionsDialog = ({ open, onOpenChange, onConnect }: Recen
               </Button>
             )}
           </div>
+          <DialogDescription>
+            Select a recent connection to open the connection form pre-filled.
+          </DialogDescription>
         </DialogHeader>
 
         <ScrollArea className="h-[400px]">
@@ -119,9 +124,10 @@ export const RecentConnectionsDialog = ({ open, onOpenChange, onConnect }: Recen
               recentConnections.map(conn => (
                 <div
                   key={conn.id}
-                  className="flex items-center justify-between p-3 border border-border rounded-lg hover:border-primary transition-colors group"
+                  className="flex items-center justify-between p-3 border border-border rounded-lg hover:border-primary transition-colors group cursor-pointer"
+                  onClick={() => handleSelect(conn)}
                 >
-                  <div className="flex-1 cursor-pointer min-w-0" onClick={() => handleConnect(conn)}>
+                  <div className="flex-1 min-w-0">
                     <p className="font-medium truncate">{conn.host}</p>
                     <p className="text-sm text-muted-foreground">
                       {(conn.protocol || 'FTP').toUpperCase()} — {formatTimestamp(conn.timestamp)}
@@ -131,7 +137,7 @@ export const RecentConnectionsDialog = ({ open, onOpenChange, onConnect }: Recen
                     size="sm"
                     variant="ghost"
                     className="opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
-                    onClick={() => handleDelete(conn.id)}
+                    onClick={(e) => { e.stopPropagation(); handleDelete(conn.id); }}
                   >
                     <Trash2 className="h-4 w-4" />
                   </Button>

src/components/SavedConnectionsDialog.tsx

@@ -3,6 +3,7 @@
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
@@ -26,6 +27,9 @@ export const SavedConnectionsDialog = ({ open, onOpenChange, onConnect }: SavedC
       <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>Saved Connections</DialogTitle>
+          <DialogDescription>
+            Your saved server connections. Click one to connect.
+          </DialogDescription>
         </DialogHeader>
         <SavedConnections onConnect={handleConnect} />
       </DialogContent>

src/pages/Index.tsx

@@ -105,6 +105,7 @@ const Index = () => {
 
   // View state
   const [connectionDialogOpen, setConnectionDialogOpen] = useState(false);
+  const [connectionPrefill, setConnectionPrefill] = useState<Partial<ConnectOptions> | undefined>(undefined);
   const [selectedFile, setSelectedFile] = useState<FtpEntry>();
   const [dragActive, setDragActive] = useState(false);
   const [editingFile, setEditingFile] = useState<{ path: string; name: string; content: string } | null>(null);
@@ -506,7 +507,14 @@ const Index = () => {
           open={connectionDialogOpen}
           onOpenChange={setConnectionDialogOpen}
           onConnect={handleConnect}
+          onSave={(options) => {
+            const stored = JSON.parse(localStorage.getItem('savedConnections') || '[]');
+            const entry = { ...options, id: Date.now().toString(), name: options.displayName || options.host };
+            localStorage.setItem('savedConnections', JSON.stringify([...stored, entry]));
+            toast({ title: 'Connection saved', description: `${entry.name} saved to connections.` });
+          }}
           isConnecting={isConnecting}
+          prefill={connectionPrefill}
         />
 
         {/* File Editor */}
@@ -540,7 +548,10 @@ const Index = () => {
         <RecentConnectionsDialog
           open={recentConnectionsOpen}
           onOpenChange={setRecentConnectionsOpen}
-          onConnect={handleConnect}
+          onPrefill={(partial) => {
+            setConnectionPrefill(partial);
+            setConnectionDialogOpen(true);
+          }}
         />
 
         {/* Saved Connections */}