Add novnc and first working console

web-frontend/package-lock.json

@@ -20,6 +20,7 @@
         "@angular/platform-server": "^19.1.0",
         "@angular/router": "^19.1.0",
         "@angular/ssr": "^19.1.5",
+        "@novnc/novnc": "^1.5.0",
         "express": "^4.18.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -3787,6 +3788,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@novnc/novnc": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@novnc/novnc/-/novnc-1.5.0.tgz",
+      "integrity": "sha512-4yGHOtUCnEJUCsgEt/L78eeJu00kthurLBWXFiaXfonNx0pzbs6R/3gJb1byZe6iAE8V9MF0syQb0xIL8MSOtQ==",
+      "license": "MPL-2.0"
+    },
     "node_modules/@npmcli/agent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-3.0.0.tgz",

web-frontend/package.json

@@ -23,6 +23,7 @@
     "@angular/platform-server": "^19.1.0",
     "@angular/router": "^19.1.0",
     "@angular/ssr": "^19.1.5",
+    "@novnc/novnc": "^1.5.0",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -43,4 +44,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.7.2"
   }
-}
+}

web-frontend/src/app/console/console.component.html

@@ -1,3 +1,10 @@
-<div id="screen">
-  <!-- This is where the remote screen will appear -->
+<p>A VNC console should be seen now</p>
+<button type="submit" (click)="startClient()">Start Vnc Client</button>
+
+<div>
+  <div id="vnc-screen" class="content">
+    <!-- This is where the remote screen will appear -->
+  </div>
 </div>
+
+<p>End of VNC console</p>

web-frontend/src/app/console/console.component.ts

@@ -1,4 +1,10 @@
 import { Component } from '@angular/core';
+// @ts-expect-error no types
+import RFB from '@novnc/novnc/lib/rfb';
+
+// TODO, see following issue
+// https://github.com/novnc/noVNC/pull/1944
+// https://github.com/novnc/noVNC/issues/1943
 
 @Component({
   selector: 'app-console',
@@ -9,37 +15,17 @@ import { Component } from '@angular/core';
 export class ConsoleComponent {
   title = "vnc-client";
 
-  public rfb: RFB;
+  public rfb: any;
 
   startClient() {
     console.log("Starting !!!");
 
-    // Read parameters specified in the URL query string
-    // By default, use the host and port of server that served this file
-    const host = window.location.hostname;
-    const port = "6080";
-    const password = "foobar"; // password of your vnc server
-    const path = "websockify";
-    // Build the websocket URL used to connect
-    let url = "ws";
-
-    if (window.location.protocol === "https:") {
-      url = "wss";
-    } else {
-      url = "ws";
-    }
-
-    url += "://" + host;
-    if (port) {
-      url += ":" + port;
-    }
-    url += "/" + path;
-
-    console.log("URL: ", url);
-
     // Creating a new RFB object will start a new connection
-    this.rfb = new RFB(document.getElementById("screen"), url, {
-      credentials: { password: password },
-    });
+    //this.rfb = new RFB(document.getElementById("screen"), url);
+    const container: HTMLElement | null = document.getElementById('vnc-screen');
+    if (container) {
+      const rfb = new RFB(container, "ws://127.0.0.1:5700");
+      //rfb.scaleViewport = true;
+    }
   }
 }