Add the forgotten folder with the frontend js code

.gitignore

@@ -6,5 +6,4 @@ out
 .DS_Store
 playground/
 .vscode/
-tty-share
 tmp-*

server/frontend/tty-share/base64.js

@@ -0,0 +1,156 @@
+/**
+*
+*  Base64 encode / decode
+*  http://www.webtoolkit.info/
+*
+**/
+
+var Base64 = {
+
+    // private property
+    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+
+    // public method for encoding
+    encode: function (input) {
+        var output = "";
+        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+        var i = 0;
+
+        input = Base64._utf8_encode(input);
+
+        while (i < input.length) {
+
+            chr1 = input.charCodeAt(i++);
+            chr2 = input.charCodeAt(i++);
+            chr3 = input.charCodeAt(i++);
+
+            enc1 = chr1 >> 2;
+            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+            enc4 = chr3 & 63;
+
+            if (isNaN(chr2)) {
+                enc3 = enc4 = 64;
+            } else if (isNaN(chr3)) {
+                enc4 = 64;
+            }
+
+            output = output +
+                this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
+                this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
+
+        }
+
+        return output;
+    },
+
+    // public method for decoding
+    decode: function (input) {
+        var output = "";
+        var chr1, chr2, chr3;
+        var enc1, enc2, enc3, enc4;
+        var i = 0;
+
+        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+
+        while (i < input.length) {
+
+            enc1 = this._keyStr.indexOf(input.charAt(i++));
+            enc2 = this._keyStr.indexOf(input.charAt(i++));
+            enc3 = this._keyStr.indexOf(input.charAt(i++));
+            enc4 = this._keyStr.indexOf(input.charAt(i++));
+
+            chr1 = (enc1 << 2) | (enc2 >> 4);
+            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+            chr3 = ((enc3 & 3) << 6) | enc4;
+
+            output = output + String.fromCharCode(chr1);
+
+            if (enc3 != 64) {
+                output = output + String.fromCharCode(chr2);
+            }
+            if (enc4 != 64) {
+                output = output + String.fromCharCode(chr3);
+            }
+
+        }
+
+        output = Base64._utf8_decode(output);
+
+        return output;
+
+    },
+
+    // private method for UTF-8 encoding
+    _utf8_encode: function (string) {
+        string = string.replace(/\r\n/g, "\n");
+        var utftext = "";
+
+        for (var n = 0; n < string.length; n++) {
+
+            var c = string.charCodeAt(n);
+
+            if (c < 128) {
+                utftext += String.fromCharCode(c);
+            }
+            else if ((c > 127) && (c < 2048)) {
+                utftext += String.fromCharCode((c >> 6) | 192);
+                utftext += String.fromCharCode((c & 63) | 128);
+            }
+            else {
+                utftext += String.fromCharCode((c >> 12) | 224);
+                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+                utftext += String.fromCharCode((c & 63) | 128);
+            }
+
+        }
+
+        return utftext;
+    },
+
+    // private method for UTF-8 decoding
+    _utf8_decode: function (utftext) {
+        let string = "";
+        let i = 0;
+        let c = 0;
+        let c1 = 0;
+        let c2 = 0;
+        let c3 = 0;
+
+        while (i < utftext.length) {
+
+            c = utftext.charCodeAt(i);
+
+            if (c < 128) {
+                string += String.fromCharCode(c);
+                i++;
+            }
+            else if ((c > 191) && (c < 224)) {
+                c2 = utftext.charCodeAt(i + 1);
+                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+                i += 2;
+            }
+            else {
+                c2 = utftext.charCodeAt(i + 1);
+                c3 = utftext.charCodeAt(i + 2);
+                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
+                i += 3;
+            }
+
+        }
+
+        return string;
+    },
+
+    base64ToArrayBuffer: function (input) {
+        var binary_string =  window.atob(input);
+        var len = binary_string.length;
+        var bytes = new Uint8Array( len );
+        for (var i = 0; i < len; i++)        {
+            bytes[i] = binary_string.charCodeAt(i);
+        }
+        return bytes;
+    }
+}
+
+export default Base64;

server/frontend/tty-share/main.css

@@ -0,0 +1,13 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+#terminal {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+

server/frontend/tty-share/main.ts

@@ -0,0 +1,28 @@
+import 'xterm/css/xterm.css';
+import './main.css';
+
+import { Terminal } from 'xterm';
+import * as pbkdf2 from 'pbkdf2';
+
+import { TTYReceiver } from './tty-receiver';
+
+const term = new Terminal({
+    cursorBlink: true,
+    macOptionIsMeta: true,
+});
+
+const derivedKey = pbkdf2.pbkdf2Sync('password', 'salt', 4096, 32, 'sha256');
+console.log(derivedKey);
+
+let wsAddress = "";
+if (window.location.protocol === "https:") {
+   wsAddress = 'wss://';
+} else {
+    wsAddress = "ws://";
+}
+
+let ttyWindow = window as any;
+wsAddress += ttyWindow.location.host + ttyWindow.ttyInitialData.wsPath;
+
+
+const ttyReceiver = new TTYReceiver(wsAddress, document.getElementById('terminal') as HTMLDivElement);

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

@@ -0,0 +1,120 @@
+import { Terminal, IEvent, IDisposable } from "xterm";
+
+import base64 from './base64';
+
+interface IRectSize {
+    width: number;
+    height: number;
+}
+
+class TTYReceiver {
+    private xterminal: Terminal;
+    private containerElement: HTMLElement;
+
+    constructor(wsAddress: string, container: HTMLDivElement) {
+        console.log("Opening WS connection to ", wsAddress)
+        const connection = new WebSocket(wsAddress);
+
+        this.xterminal = new Terminal({
+            cursorBlink: true,
+            macOptionIsMeta: true,
+            scrollback: 0,
+            fontSize: 12,
+            letterSpacing: 0,
+        });
+
+        this.containerElement = container;
+        this.xterminal.open(container);
+
+        connection.onclose =  (evt: CloseEvent) => {
+
+           this.xterminal.blur();
+           this.xterminal.setOption('cursorBlink', false);
+           this.xterminal.clear();
+
+           setTimeout(() => {
+            this.xterminal.write('Session closed');
+           }, 1000)
+
+        }
+
+        this.xterminal.focus();
+
+        const containerPixSize = this.getElementPixelsSize(container);
+        const newFontSize = this.guessNewFontSize(this.xterminal.cols, this.xterminal.rows, containerPixSize.width, containerPixSize.height);
+        this.xterminal.setOption('fontSize', newFontSize);
+
+        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));
+            }
+
+            if (message.Type == "WinSize") {
+                let winSizeMsg = JSON.parse(msgData)
+
+                const containerPixSize = this.getElementPixelsSize(container);
+                const newFontSize = this.guessNewFontSize(winSizeMsg.Cols, winSizeMsg.Rows, containerPixSize.width, containerPixSize.height);
+                this.xterminal.setOption('fontSize', newFontSize);
+
+                // Now set the new size.
+                this.xterminal.resize(winSizeMsg.Cols, winSizeMsg.Rows)
+            }
+        }
+
+        this.xterminal.onData(function (data:string) {
+            let writeMessage = {
+                Type: "Write",
+                Data: base64.encode(JSON.stringify({ Size: data.length, Data: base64.encode(data)})),
+            }
+            let dataToSend = JSON.stringify(writeMessage)
+            connection.send(dataToSend);
+        });
+
+    }
+
+    // Get the pixels size of the element, after all CSS was applied. This will be used in an ugly
+    // hack to guess what fontSize to set on the xterm object. Horrible hack, but I feel less bad
+    // about it seeing that VSV does it too:
+    // https://github.com/microsoft/vscode/blob/d14ee7613fcead91c5c3c2bddbf288c0462be876/src/vs/workbench/parts/terminal/electron-browser/terminalInstance.ts#L363
+    private getElementPixelsSize(element: HTMLElement): IRectSize {
+        const defView = this.containerElement.ownerDocument.defaultView;
+        let width = parseInt(defView.getComputedStyle(element).getPropertyValue('width').replace('px', ''), 10);
+        let height = parseInt(defView.getComputedStyle(element).getPropertyValue('height').replace('px', ''), 10);
+
+        return {
+            width,
+            height,
+        }
+    }
+
+    // Tries to guess the new font size, for the new terminal size, so that the rendered terminal
+    // will have the newWidth and newHeight dimensions
+    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 xtermPixelsSize = this.getElementPixelsSize(this.containerElement.querySelector(".xterm-screen"));
+
+        const newHFontSizeMultiplier =  (cols / newCols) * (targetWidth / xtermPixelsSize.width);
+        const newVFontSizeMultiplier = (rows / newRows) * (targetHeight / xtermPixelsSize.height);
+
+        let newFontSize;
+
+        if (newHFontSizeMultiplier > newVFontSizeMultiplier) {
+            newFontSize = Math.floor(fontSize * newVFontSizeMultiplier);
+        } else {
+            newFontSize = Math.floor(fontSize * newHFontSizeMultiplier);
+        }
+        return newFontSize;
+    }
+}
+
+export {
+    TTYReceiver
+}