fix: improve UI and login functionality

* update UI components and layout
* fix login form functionality
* pin Docker base image to python:3.11-slim-bookworm

src/static/webssh.js

@@ -5,19 +5,16 @@ let currentConnectionId = null;
 let authToken = localStorage.getItem('strixwebssh_token');
 let currentUser = localStorage.getItem('strixwebssh_user');
 let storedUsers = {}; // Will be loaded from /api/config
+let maxUploadSize = localStorage.getItem('maxUploadSize') ? parseInt(localStorage.getItem('maxUploadSize')) : 100 * 1024 * 1024;
 // Dynamically determine API URL based on current host (same origin since everything is in container)
 let apiBaseUrl = window.location.origin;
 let backendWsPort = null;
 let backendWsHost = null;
 
-// Use the backend WebSocket port reported by the API config.
+// Use the frontend proxy so the browser does not need direct access to the backend port.
 function getWsUrl() {
   const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-  const host = backendWsHost || window.location.hostname || 'localhost';
-  if (backendWsPort) {
-    return `${protocol}//${host}:${backendWsPort}`;
-  }
-  return `${protocol}//${host}:8081`;
+  return `${protocol}//${window.location.host}/ws`;
 }
 
 const CONNECTIONS_KEY = 'strixwebssh_connections';
@@ -380,10 +377,15 @@ function toggleEditModalAuth() {
 }
 
 function toggleAuthFields() {
-  const authType = document.getElementById('authType').value;
-  document.getElementById('password').style.display = authType === 'key' ? 'none' : 'block';
+  const authTypeField = document.getElementById('authType');
+  const passwordField = document.getElementById('password');
+  if (!authTypeField || !passwordField) return;
+
+  const authType = authTypeField.value;
+  passwordField.style.display = authType === 'key' ? 'none' : 'block';
   // Don't auto-show key section - let user control it with toggle button
-  document.getElementById('keySection').classList.remove('active');
+  const keySection = document.getElementById('keySection');
+  if (keySection) keySection.classList.remove('active');
 }
 
 function toggleKeyField() {
@@ -441,6 +443,7 @@ function renderConnectionList() {
       : (conn.socket && conn.socket.readyState === WebSocket.CONNECTING ? 'Loading...' : '—');
     const item = document.createElement('div');
     item.className = `connection-item ${conn.id === currentConnectionId ? 'active' : ''} ${conn.connected ? 'connected' : 'disconnected'}`;
+    item.dataset.connectionId = conn.id;
     item.onclick = () => selectConnection(conn.id);
     item.innerHTML = `
       <div class="connection-heading">
@@ -456,7 +459,7 @@ function renderConnectionList() {
           ? `<button class="btn-small btn-disconnect" onclick="disconnectConnection('${conn.id}')">Disconnect</button>`
           : `<button class="btn-small btn-connect" onclick="connectConnection('${conn.id}')">Connect</button>`
         }
-        <button class="btn-small btn-settings" onclick="showEditConnectionModal('${conn.id}')">Settings</button>
+        <button class="btn-small btn-edit" onclick="showEditConnectionModal('${conn.id}')">Edit</button>
         <button class="btn-small btn-delete" onclick="deleteConnection('${conn.id}')">Delete</button>
       </div>
     `;
@@ -468,16 +471,22 @@ function selectConnection(id) {
   currentConnectionId = id;
   const conn = getCurrentConnection();
   if (conn) {
-    document.getElementById('connName').value = conn.name;
-    document.getElementById('host').value = conn.host;
-    document.getElementById('port').value = conn.port;
-    document.getElementById('user').value = conn.username;
-    document.getElementById('authType').value = conn.authType || 'password';
-    document.getElementById('password').value = conn.password || '';
-    document.getElementById('sshKey').value = conn.key || '';
-    document.getElementById('lockTimeout').value = conn.lockTimeout || 15;
-    document.getElementById('disconnectTimeout').value = conn.disconnectTimeout || 60;
-    toggleAuthFields();
+    const quickConnectFields = {
+      connName: conn.name,
+      host: conn.host,
+      port: conn.port,
+      user: conn.username,
+      authType: conn.authType || 'password',
+      password: conn.password || '',
+      sshKey: conn.key || '',
+      lockTimeout: conn.lockTimeout || 15,
+      disconnectTimeout: conn.disconnectTimeout || 60
+    };
+    Object.entries(quickConnectFields).forEach(([fieldId, value]) => {
+      const field = document.getElementById(fieldId);
+      if (field) field.value = value;
+    });
+    if (document.getElementById('authType')) toggleAuthFields();
     document.getElementById('terminalTitle').textContent = `${conn.name} - ${conn.username}@${conn.host}:${conn.port}`;
     updateTerminalStatus(conn.connected ? 'connected' : 'disconnected');
     
@@ -776,8 +785,6 @@ let sftpSelectedFile = null;
 let sftpSelectedFileIsDir = false;
 let sftpUploadQueue = [];
 let currentSftpConnection = null;
-let maxUploadSize = localStorage.getItem('maxUploadSize') ? parseInt(localStorage.getItem('maxUploadSize')) : 100 * 1024 * 1024; // Try to get from localStorage, default 100MB
-
 // Load configuration from API
 function loadConfig() {
   console.log('loadConfig() called, token exists:', !!localStorage.getItem('strixwebssh_token'));
@@ -1325,20 +1332,25 @@ function toggleSftpView() {
   const sftpView = document.getElementById('sftpView');
   const sftpToggleBtn = document.getElementById('sftpToggleBtn');
   
-  if (sftpView.style.display === 'none') {
+  if (window.getComputedStyle(sftpView).display === 'none') {
     // Show SFTP, hide terminal
-    const conn = getCurrentConnection();
+    const conn = getCurrentConnection() || connections.find(connection =>
+      connection.id === document.querySelector('.connection-item.active')?.dataset.connectionId
+    );
     if (!conn) {
       alert('Please select a connection first');
       return;
     }
+
+    if (currentConnectionId !== conn.id) {
+      selectConnection(conn.id);
+    }
     
     currentSftpConnection = conn;
     terminalView.style.display = 'none';
     sftpView.style.display = 'flex';
     sftpToggleBtn.classList.add('active');
-    sftpToggleBtn.textContent = '💻 Terminal';
-    sftpToggleBtn.title = 'Switch to Terminal';
+    document.getElementById('terminalToggleBtn').classList.remove('active');
     
     // Connect SFTP
     sftpConnect(conn);
@@ -1347,8 +1359,7 @@ function toggleSftpView() {
     terminalView.style.display = 'flex';
     sftpView.style.display = 'none';
     sftpToggleBtn.classList.remove('active');
-    sftpToggleBtn.textContent = '📁 SFTP';
-    sftpToggleBtn.title = 'Switch to File Manager';
+    document.getElementById('terminalToggleBtn').classList.add('active');
   }
 }
 
@@ -1361,8 +1372,7 @@ function hideSftpPanel() {
   terminalView.style.display = 'flex';
   sftpView.style.display = 'none';
   sftpToggleBtn.classList.remove('active');
-  sftpToggleBtn.textContent = '📁 SFTP';
-  sftpToggleBtn.title = 'Switch to File Manager';
+  document.getElementById('terminalToggleBtn').classList.add('active');
 }
 
 function showSftpPanel() {