Interactive list

web-gateway/public/js/app.js

@@ -72,41 +72,90 @@ class RDPWebGateway {
                 return;
             }
 
-            // Store credentials temporarily - will be sent to RdpBroker
+            // Store credentials and authenticate via WebSocket
             this.currentUser = username;
             this.credentials = { username, password };
             
-            // Load targets and show targets view
-            await this.loadTargets();
+            // Authenticate and get user-specific targets from RdpBroker
+            await this.authenticateAndLoadTargets();
         } catch (error) {
             console.error('Login error:', error);
             this.showError(errorMessage, 'Connection error. Please check your network and try again.');
-        } finally {
             loginBtn.disabled = false;
             btnText.style.display = 'block';
             spinner.style.display = 'none';
         }
     }
 
-    async loadTargets() {
-        try {
-            const response = await fetch('/api/targets');
-            
-            if (!response.ok) {
-                if (response.status === 503) {
-                    const error = await response.json();
-                    throw new Error(error.error || 'Service unavailable');
-                }
-                throw new Error('Failed to load targets');
-            }
+    authenticateAndLoadTargets() {
+        return new Promise((resolve, reject) => {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsUrl = `${protocol}//${window.location.host}/ws/rdp`;
 
-            const data = await response.json();
-            this.showTargetsView(data.targets);
-        } catch (error) {
-            console.error('Error loading targets:', error);
-            // Show error in targets view
-            this.showTargetsView(null, error.message);
-        }
+            // Create WebSocket connection for authentication
+            this.ws = new WebSocket(wsUrl);
+            this.ws.binaryType = 'arraybuffer';
+
+            const timeout = setTimeout(() => {
+                if (this.ws) {
+                    this.ws.close();
+                    reject(new Error('Authentication timeout'));
+                }
+            }, 10000); // 10 second timeout
+
+            this.ws.onopen = () => {
+                console.log('WebSocket connected for authentication');
+                // Send authentication request to RdpBroker
+                this.ws.send(JSON.stringify({
+                    type: 'authenticate',
+                    username: this.credentials.username,
+                    password: this.credentials.password
+                }));
+            };
+
+            this.ws.onmessage = (event) => {
+                try {
+                    const message = JSON.parse(event.data);
+                    
+                    if (message.type === 'targets') {
+                        // Received user-specific targets from RdpBroker
+                        clearTimeout(timeout);
+                        console.log('Received targets from RdpBroker:', message.targets);
+                        this.showTargetsView(message.targets);
+                        
+                        // Reset login button
+                        const loginBtn = document.getElementById('loginBtn');
+                        const btnText = loginBtn.querySelector('.btn-text');
+                        const spinner = loginBtn.querySelector('.spinner');
+                        loginBtn.disabled = false;
+                        btnText.style.display = 'block';
+                        spinner.style.display = 'none';
+                        
+                        resolve();
+                    } else if (message.type === 'error') {
+                        clearTimeout(timeout);
+                        this.ws.close();
+                        this.ws = null;
+                        reject(new Error(message.error || 'Authentication failed'));
+                    }
+                } catch (e) {
+                    console.error('Error parsing WebSocket message:', e);
+                }
+            };
+
+            this.ws.onerror = (error) => {
+                clearTimeout(timeout);
+                console.error('WebSocket error:', error);
+                reject(new Error('WebSocket connection failed'));
+            };
+
+            this.ws.onclose = () => {
+                clearTimeout(timeout);
+                if (this.ws) {
+                    console.log('WebSocket closed during authentication');
+                }
+            };
+        });
     }
 
     showTargetsView(targets = null, errorMsg = null) {
@@ -158,27 +207,17 @@ class RDPWebGateway {
     }
 
     initializeRDPConnection(target) {
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = `${protocol}//${window.location.host}/ws/rdp`;
+        // WebSocket already connected from authentication
+        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+            console.error('WebSocket not connected');
+            this.showConnectionError('Connection lost. Please login again.');
+            return;
+        }
 
         this.canvas = document.getElementById('rdpCanvas');
         this.ctx = this.canvas.getContext('2d');
 
-        // Connect WebSocket
-        this.ws = new WebSocket(wsUrl);
-        this.ws.binaryType = 'arraybuffer';
-
-        this.ws.onopen = () => {
-            console.log('WebSocket connected');
-            // Send credentials and connection request to RdpBroker
-            this.ws.send(JSON.stringify({
-                type: 'connect',
-                username: this.credentials.username,
-                password: this.credentials.password,
-                target: target,
-            }));
-        };
-
+        // Update message handler for RDP session
         this.ws.onmessage = (event) => {
             this.handleWebSocketMessage(event);
         };
@@ -193,6 +232,13 @@ class RDPWebGateway {
             this.handleDisconnect();
         };
 
+        // Send target selection to RdpBroker
+        console.log('Connecting to target:', target.name);
+        this.ws.send(JSON.stringify({
+            type: 'connect',
+            target: target
+        }));
+
         // Setup canvas input handlers
         this.setupCanvasInputHandlers();
     }