Test peus concluants

web-gateway/public/js/app.js

@@ -80,7 +80,9 @@ class RDPWebGateway {
             await this.authenticateAndLoadTargets();
         } catch (error) {
             console.error('Login error:', error);
-            this.showError(errorMessage, 'Connection error. Please check your network and try again.');
+            // Show specific error message if available
+            const errorMsg = error.message || 'Connection error. Please check your network and try again.';
+            this.showError(errorMessage, errorMsg);
             loginBtn.disabled = false;
             btnText.style.display = 'block';
             spinner.style.display = 'none';
@@ -244,7 +246,7 @@ class RDPWebGateway {
     }
 
     handleWebSocketMessage(event) {
-        if (typeof event.data === 'string') {
+        try {
             const message = JSON.parse(event.data);
             
             switch (message.type) {
@@ -252,30 +254,44 @@ class RDPWebGateway {
                     document.getElementById('loadingOverlay').style.display = 'none';
                     document.getElementById('connectionInfo').textContent = 
                         `Connected to ${this.currentTarget.name}`;
+                    console.log('RDP connection established');
                     break;
+                    
+                case 'screen':
+                    // Render screen update (PNG image data)
+                    this.renderScreenUpdate(message);
+                    break;
+                    
+                case 'disconnected':
+                    this.showConnectionError('RDP connection closed');
+                    break;
+                    
                 case 'error':
                     this.showConnectionError(message.error);
                     break;
-                case 'resize':
-                    this.canvas.width = message.width;
-                    this.canvas.height = message.height;
-                    break;
+                    
+                default:
+                    console.warn('Unknown message type:', message.type);
             }
-        } else {
-            // Binary data - frame update
-            this.renderFrame(event.data);
+        } catch (error) {
+            console.error('Error handling WebSocket message:', error);
         }
     }
 
-    renderFrame(data) {
-        // This is a simplified version
-        // In production, you'd decode the RDP frame data properly
-        const imageData = new Uint8ClampedArray(data);
-        
-        if (imageData.length === this.canvas.width * this.canvas.height * 4) {
-            const imgData = this.ctx.createImageData(this.canvas.width, this.canvas.height);
-            imgData.data.set(imageData);
-            this.ctx.putImageData(imgData, 0, 0);
+    renderScreenUpdate(update) {
+        try {
+            // Decode base64 PNG image
+            const img = new Image();
+            img.onload = () => {
+                // Draw image to canvas at specified position
+                this.ctx.drawImage(img, update.x, update.y, update.width, update.height);
+            };
+            img.onerror = (error) => {
+                console.error('Failed to load screen update image:', error);
+            };
+            img.src = 'data:image/png;base64,' + update.data;
+        } catch (error) {
+            console.error('Error rendering screen update:', error);
         }
     }
 
@@ -326,13 +342,18 @@ class RDPWebGateway {
         const x = Math.floor((event.clientX - rect.left) * (this.canvas.width / rect.width));
         const y = Math.floor((event.clientY - rect.top) * (this.canvas.height / rect.height));
 
+        // Map button: 0=left, 1=middle, 2=right
+        let button = 0;
+        if (type === 'down' || type === 'up') {
+            button = event.button;
+        }
+
         this.ws.send(JSON.stringify({
             type: 'mouse',
             action: type,
             x: x,
             y: y,
-            button: event.button,
-            deltaY: event.deltaY || 0,
+            button: button
         }));
     }
 
@@ -342,8 +363,9 @@ class RDPWebGateway {
         this.ws.send(JSON.stringify({
             type: 'keyboard',
             action: type,
-            key: event.key,
-            code: event.code,
+            code: event.keyCode || event.which
+        }));
+    }
             keyCode: event.keyCode,
             ctrlKey: event.ctrlKey,
             altKey: event.altKey,
@@ -438,3 +460,4 @@ class RDPWebGateway {
 
 // Initialize the app
 const rdpGateway = new RDPWebGateway();
+// v1.4