Update the node modules

server/frontend/.nvmrc

@@ -1,2 +1 @@
-12.4.0
-
+v16.13.0

server/frontend/package.json

@@ -10,13 +10,13 @@
   "author": "elisescu",
   "license": "elisescu",
   "dependencies": {
-    "copy-webpack-plugin": "^6.0.0",
-    "css-loader": "^3.6.0",
-    "style-loader": "^0.23.1",
-    "ts-loader": "^6.2.2",
-    "typescript": "^3.9.7",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
-    "xterm": "^4.9.0"
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.2",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.9.3",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "xterm": "^5.0.0"
   }
 }

server/frontend/tty-share/main.ts

@@ -2,7 +2,6 @@ import 'xterm/css/xterm.css';
 import './main.css';
 
 import { Terminal } from 'xterm';
-import * as pbkdf2 from 'pbkdf2';
 
 import { TTYReceiver } from './tty-receiver';
 
@@ -11,9 +10,6 @@ const term = new Terminal({
     macOptionIsMeta: true,
 });
 
-const derivedKey = pbkdf2.pbkdf2Sync('password', 'salt', 4096, 32, 'sha256');
-console.log(derivedKey);
-
 let wsAddress = "";
 if (window.location.protocol === "https:") {
    wsAddress = 'wss://';

server/frontend/tty-share/tty-receiver.ts

@@ -31,7 +31,7 @@ class TTYReceiver {
         connection.onclose =  (evt: CloseEvent) => {
 
            this.xterminal.blur();
-           this.xterminal.setOption('cursorBlink', false);
+           this.xterminal.options.cursorBlink = false
            this.xterminal.clear();
 
            setTimeout(() => {
@@ -43,17 +43,16 @@ class TTYReceiver {
 
         const containerPixSize = this.getElementPixelsSize(container);
         const newFontSize = this.guessNewFontSize(this.xterminal.cols, this.xterminal.rows, containerPixSize.width, containerPixSize.height);
-        this.xterminal.setOption('fontSize', newFontSize);
+        this.xterminal.options.fontSize = newFontSize
+        this.xterminal.options.fontFamily= 'SauceCodePro MonoWindows, courier-new, monospace'
 
         connection.onmessage = (ev: MessageEvent) => {
-          console.log("Got message: ", ev.data);
-
             let message = JSON.parse(ev.data)
             let msgData = base64.decode(message.Data)
 
             if (message.Type === "Write") {
                 let writeMsg = JSON.parse(msgData)
-                this.xterminal.writeUtf8(base64.base64ToArrayBuffer(writeMsg.Data));
+                this.xterminal.write(base64.base64ToArrayBuffer(writeMsg.Data));
             }
 
             if (message.Type == "WinSize") {
@@ -61,7 +60,7 @@ class TTYReceiver {
 
                 const containerPixSize = this.getElementPixelsSize(container);
                 const newFontSize = this.guessNewFontSize(winSizeMsg.Cols, winSizeMsg.Rows, containerPixSize.width, containerPixSize.height);
-                this.xterminal.setOption('fontSize', newFontSize);
+                this.xterminal.options.fontSize = newFontSize
 
                 // Now set the new size.
                 this.xterminal.resize(winSizeMsg.Cols, winSizeMsg.Rows)
@@ -99,7 +98,7 @@ class TTYReceiver {
     private guessNewFontSize(newCols: number, newRows: number, targetWidth: number, targetHeight: number): number {
         const cols = this.xterminal.cols;
         const rows = this.xterminal.rows;
-        const fontSize = this.xterminal.getOption('fontSize');
+        const fontSize = this.xterminal.options.fontSize
         const xtermPixelsSize = this.getElementPixelsSize(this.containerElement.querySelector(".xterm-screen"));
 
         const newHFontSizeMultiplier =  (cols / newCols) * (targetWidth / xtermPixelsSize.width);