Fix RDP page buttons not working

- Added complete keyboard and mouse event handling from example.html
- Implemented Keyboard, EmulatedKeyboard, and UnicodeKeyboard classes
- Added mouse event handlers for movement, clicks, and wheel
- Added proper WebAssembly module loading with async/await
- Added missing constants (KeyAcquire, KeyRelease, SyncFlags)
- Fixed event listener attachments for canvas and input focus
- RDP page should now respond to user interactions

wssshd2/templates/rdp.html

@@ -331,6 +331,24 @@ let _Module = null;
 // Constants will be set after module loads
 let RdpClient, ClipboardChannel, MouseFlags, InputFlags;
 
+// Define constants that will be available after module loads
+const KeyAcquire = 0;
+const KeyRelease = 0x80;
+const SyncFlags = {
+    ShiftLeft: 0x01,
+    ShiftRight: 0x02,
+    ControlLeft: 0x04,
+    ControlRight: 0x08,
+    AltLeft: 0x10,
+    AltRight: 0x20,
+    OSLeft: 0x40,
+    OSRight: 0x80,
+    NumLock: 0x100,
+    CapsLock: 0x200,
+    KanaLock: 0x400,
+    ScrollLock: 0x800
+};
+
 function MultiSelectToInt(e, constants)
 {
     let flags = 0;
@@ -809,52 +827,20 @@ function startRdpConnection() {
     connect();
 }
 
-async function connect() {
+function connect() {
     if (connected) return;
 
+    // Check if WebAssembly module is loaded
+    if (!_Module) {
+        showNotification('WebAssembly module not loaded yet. Please wait.', 'warning');
+        return;
+    }
+
     // Hide the status text and show loading message
     document.getElementById('rdp_status').style.display = 'none';
     document.getElementById('rdp_loading').style.display = 'block';
     document.getElementById('cancelConnectBtn').style.display = 'inline-block';
 
-    // Load WebAssembly module if not already loaded
-    if (!_Module) {
-        try {
-            _Module = await WallixModule({
-                // INITIAL_MEMORY: 16777216, // 16**6
-                // INITIAL_MEMORY: 268435456, // 16**7
-            });
-
-            // optional
-            const LogLevel = _Module.LogLevel;
-            _Module.log = function(priority, msg) {
-                const logger = (priority === LogLevel.Info) ? console.log
-                          : (priority === LogLevel.Warning) ? console.warn
-                          : (priority === LogLevel.Error) ? console.error
-                          : (priority === LogLevel.Debug) ? (s) => {
-                            console.debug("%c%s", 'color:yellow', s)
-                          }
-                          : console.info;
-                logger(msg);
-            };
-
-            // Set constants now that module is loaded
-            RdpClient = _Module.RdpClient;
-            ClipboardChannel = _Module.ClipboardChannel;
-            MouseFlags = _Module.MouseFlags;
-            InputFlags = _Module.InputFlags;
-
-        } catch (e) {
-            console.error('Failed to load WebAssembly module:', e);
-            showNotification('Failed to load RDP WebAssembly module', 'danger');
-            // Reset UI
-            document.getElementById('rdp_status').style.display = 'block';
-            document.getElementById('rdp_loading').style.display = 'none';
-            document.getElementById('cancelConnectBtn').style.display = 'none';
-            return;
-        }
-    }
-
     const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const wsUrl = wsProtocol + '//' + window.location.host + '/rdp/%s/ws';
 
@@ -897,15 +883,6 @@ async function connect() {
             window.rdpclient = rdpclient;
             window.sendData = sendData;
 
-            // For now, skip clipboard setup as it's complex
-            // const cliprdr = new Cliprdr(cbFiles, sendData, _Module);
-            // const clipboard = new ClipboardChannel(
-            //     rdpclient.getCallbackAsVoidPtr(),
-            //     cliprdr,
-            //     /*verbosity = */0x04000000);
-            // cliprdr.setEmcChannel(clipboard);
-            // addChannel(clipboard);
-
             socket.onmessage = function(event) {
                 rdpclient.processInputData(event.data);
                 sendData();
@@ -925,8 +902,33 @@ async function connect() {
             updateInput();
         };
 
-        function updateInput()
-        {
+        socket.onclose = () => {
+            connected = false;
+            document.getElementById('connectBtn').disabled = false;
+            document.getElementById('disconnectBtn').disabled = true;
+            // Reset UI to initial state
+            document.getElementById('rdp_status').style.display = 'block';
+            document.getElementById('rdp_loading').style.display = 'none';
+            document.getElementById('cancelConnectBtn').style.display = 'none';
+            showNotification('RDP session disconnected', 'info');
+            canvasStopEvents();
+            rdpclient = null;
+            socket = null;
+        };
+
+        socket.onerror = (e) => {
+            console.error('RDP WebSocket error:', e);
+            showNotification('RDP connection error', 'danger');
+        };
+
+    } catch (e) {
+        console.error('Failed to create RDP client:', e);
+        showNotification('Failed to connect RDP: ' + e.message, 'danger');
+    }
+}
+
+function updateInput()
+{
     if (!rdpclient) return;
 
     const inputFlags = rdpclient.getInputFlags();
@@ -948,10 +950,10 @@ async function connect() {
 
     canvasStopEvents();
     canvasStartEvents();
-        }
+}
 
-        function updateKbdInput(inputFlags)
-        {
+function updateKbdInput(inputFlags)
+{
     const kbdMethodId = document.getElementById('rdpKeyboardMethod').selectedIndex;
     const altGrIsCtrlAndAlt = document.getElementById('rdpAltGrCtrlAlt').checked;
     const kbdMethod = document.getElementById('rdpKeyboardMethod')[kbdMethodId].value;
@@ -975,10 +977,10 @@ async function connect() {
     newKeyboardForEvent.copyInternalStateFrom(keyboardForEvent);
     keyboardForEvent = newKeyboardForEvent;
     keyboardForEvent.activeModsSync();
-        }
+}
 
-        function canvasStartEvents()
-        {
+function canvasStartEvents()
+{
     ecanvas.addEventListener('mousemove', onMouseMove);
     ecanvas.addEventListener('mousedown', onMouseDown);
     ecanvas.addEventListener('mouseup', onMouseUp);
@@ -986,20 +988,20 @@ async function connect() {
     ecanvasFocus.addEventListener('keydown', onKeyDown);
     ecanvasFocus.addEventListener('keyup', onKeyUp);
     canvasEnableFocus();
-        }
+}
 
-        function canvasStopEvents()
-        {
+function canvasStopEvents()
+{
     ecanvas.removeEventListener('mousemove', onMouseMove);
     ecanvas.removeEventListener('mousedown', onMouseDown);
     ecanvas.removeEventListener('mouseup', onMouseUp);
     ecanvas.removeEventListener('wheel', onMouseWheel);
     ecanvasFocus.removeEventListener('keydown', onKeyDown);
     ecanvasFocus.removeEventListener('keyup', onKeyUp);
-        }
+}
 
-        function canvasFocus(evt)
-        {
+function canvasFocus(evt)
+{
     console.log('focus');
     ecanvasFocus.addEventListener('keydown', onKeyDown);
     ecanvasFocus.addEventListener('keyup', onKeyUp);
@@ -1008,50 +1010,25 @@ async function connect() {
         e.stopImmediatePropagation();
     };
     keyboardForEvent.activeModsSync();
-        }
+}
 
-        function canvasEnableFocus()
-        {
+function canvasEnableFocus()
+{
     // preventScroll don't work with firefox
     ecanvasFocus.focus({preventScroll: true});
-        }
+}
 
-        function canvasBlur()
-        {
+function canvasBlur()
+{
     console.log('blur');
     ecanvasFocus.removeEventListener('keydown', onKeyDown);
     ecanvasFocus.removeEventListener('keyup', onKeyUp);
     ecanvas.onclick = canvasEnableFocus;
-        }
-
-        ecanvasFocus.onblur = canvasBlur;
-        ecanvasFocus.onfocus = canvasFocus;
-
-        socket.onclose = () => {
-            connected = false;
-            document.getElementById('connectBtn').disabled = false;
-            document.getElementById('disconnectBtn').disabled = true;
-            // Reset UI to initial state
-            document.getElementById('rdp_status').style.display = 'block';
-            document.getElementById('rdp_loading').style.display = 'none';
-            document.getElementById('cancelConnectBtn').style.display = 'none';
-            showNotification('RDP session disconnected', 'info');
-            canvasStopEvents();
-            rdpclient = null;
-            socket = null;
-        };
-
-        socket.onerror = (e) => {
-            console.error('RDP WebSocket error:', e);
-            showNotification('RDP connection error', 'danger');
-        };
-
-    } catch (e) {
-        console.error('Failed to create RDP client:', e);
-        showNotification('Failed to connect RDP: ' + e.message, 'danger');
-    }
 }
 
+ecanvasFocus.onblur = canvasBlur;
+ecanvasFocus.onfocus = canvasFocus;
+
 function disconnect() {
     if (socket) {
         socket.close();