@@ -143,6 +145,9 @@ class MainContent extends Component {
+
+
+ }
diff --git a/public/react/src/modules/page/VNCDisplay.js b/public/react/src/modules/page/VNCDisplay.js
index b8840fe02..1e443ed1d 100644
--- a/public/react/src/modules/page/VNCDisplay.js
+++ b/public/react/src/modules/page/VNCDisplay.js
@@ -1,154 +1,154 @@
-// import React, { Component } from 'react';
+import React, { Component } from 'react';
-// import RFB from '@novnc/novnc/lib/rfb.js';
+import RFB from '@novnc/novnc/lib/rfb.js';
-// const $ = window.$;
-// // const showIframeContent = window.location.search.indexOf('vnc=1') != -1;
-// class VNCDisplay extends Component {
-// componentDidMount() {
-// console.log(RFB)
+const $ = window.$;
+// const showIframeContent = window.location.search.indexOf('vnc=1') != -1;
+class VNCDisplay extends Component {
+ componentDidMount() {
+ console.log(RFB)
-// let rfb;
-// let desktopName;
-// // When this function is called we have
-// // successfully connected to a server
-// function connectedToServer(e) {
-// status("Connected to " + desktopName);
-// }
-// // This function is called when we are disconnected
-// function disconnectedFromServer(e) {
-// if (e.detail.clean) {
-// status("Disconnected");
-// } else {
-// status("Something went wrong, connection is closed");
-// }
-// }
-// // When this function is called, the server requires
-// // credentials to authenticate
-// function credentialsAreRequired(e) {
-// const password = prompt("Password Required:");
-// rfb.sendCredentials({ password: password });
-// }
-// // When this function is called we have received
-// // a desktop name from the server
-// function updateDesktopName(e) {
-// desktopName = e.detail.name;
-// }
-// // Since most operating systems will catch Ctrl+Alt+Del
-// // before they get a chance to be intercepted by the browser,
-// // we provide a way to emulate this key sequence.
-// function sendCtrlAltDel() {
-// rfb.sendCtrlAltDel();
-// return false;
-// }
-// // Show a status text in the top bar
-// function status(text) {
-// document.getElementById('status').textContent = text;
-// }
-// // This function extracts the value of one variable from the
-// // query string. If the variable isn't defined in the URL
-// // it returns the default value instead.
-// function readQueryVariable(name, defaultValue) {
-// // A URL with a query parameter can look like this:
-// // https://www.example.com?myqueryparam=myvalue
-// //
-// // Note that we use location.href instead of location.search
-// // because Firefox < 53 has a bug w.r.t location.search
-// const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
-// match = document.location.href.match(re);
-// if (typeof defaultValue === 'undefined') { defaultValue = null; }
-// if (match) {
-// // We have to decode the URL since want the cleartext value
-// return decodeURIComponent(match[1]);
-// }
-// return defaultValue;
-// }
-// document.getElementById('sendCtrlAltDelButton')
-// .onclick = sendCtrlAltDel;
-// // Read parameters specified in the URL query string
-// // By default, use the host and port of server that served this file
+ let rfb;
+ let desktopName;
+ // When this function is called we have
+ // successfully connected to a server
+ function connectedToServer(e) {
+ status("Connected to " + desktopName);
+ }
+ // This function is called when we are disconnected
+ function disconnectedFromServer(e) {
+ if (e.detail.clean) {
+ status("Disconnected");
+ } else {
+ status("Something went wrong, connection is closed");
+ }
+ }
+ // When this function is called, the server requires
+ // credentials to authenticate
+ function credentialsAreRequired(e) {
+ const password = prompt("Password Required:");
+ rfb.sendCredentials({ password: password });
+ }
+ // When this function is called we have received
+ // a desktop name from the server
+ function updateDesktopName(e) {
+ desktopName = e.detail.name;
+ }
+ // Since most operating systems will catch Ctrl+Alt+Del
+ // before they get a chance to be intercepted by the browser,
+ // we provide a way to emulate this key sequence.
+ function sendCtrlAltDel() {
+ rfb.sendCtrlAltDel();
+ return false;
+ }
+ // Show a status text in the top bar
+ function status(text) {
+ document.getElementById('status').textContent = text;
+ }
+ // This function extracts the value of one variable from the
+ // query string. If the variable isn't defined in the URL
+ // it returns the default value instead.
+ function readQueryVariable(name, defaultValue) {
+ // A URL with a query parameter can look like this:
+ // https://www.example.com?myqueryparam=myvalue
+ //
+ // Note that we use location.href instead of location.search
+ // because Firefox < 53 has a bug w.r.t location.search
+ const re = new RegExp('.*[?&]' + name + '=([^&#]*)'),
+ match = document.location.href.match(re);
+ if (typeof defaultValue === 'undefined') { defaultValue = null; }
+ if (match) {
+ // We have to decode the URL since want the cleartext value
+ return decodeURIComponent(match[1]);
+ }
+ return defaultValue;
+ }
+ document.getElementById('sendCtrlAltDelButton')
+ .onclick = sendCtrlAltDel;
+ // Read parameters specified in the URL query string
+ // By default, use the host and port of server that served this file
-// // const host = readQueryVariable('host', window.location.hostname);
-// // let port = readQueryVariable('port', window.location.port);
-// // const password = readQueryVariable('password', '');
+ // const host = readQueryVariable('host', window.location.hostname);
+ // let port = readQueryVariable('port', window.location.port);
+ // const password = readQueryVariable('password', '');
-// const { vnc_url } = this.props;
-// // http://117.50.12.63:43149/vnc_lite.html?password=headless
-// let _ar1 = vnc_url.split('/');
-// let ipAndPort = _ar1[2].split(':')
-// let passwordAr = _ar1[3].split('password=')
-// const host = ipAndPort[0]
-// let port = ipAndPort[1]
-// const password = passwordAr[1].split('&')[0]
+ const { vnc_url } = this.props;
+ // http://117.50.12.63:43149/vnc_lite.html?password=headless
+ let _ar1 = vnc_url.split('/');
+ let ipAndPort = _ar1[2].split(':')
+ let passwordAr = _ar1[3].split('password=')
+ const host = ipAndPort[0]
+ let port = ipAndPort[1]
+ const password = passwordAr[1].split('&')[0]
-// const path = readQueryVariable('path', 'websockify');
-// // | | | | | |
-// // | | | Connect | | |
-// // v v v v v v
-// status("Connecting");
-// // Build the websocket URL used to connect
-// let url;
-// if (vnc_url.indexOf("https:") != -1) {
-// url = 'wss';
-// } else {
-// url = 'ws';
-// }
-// url += '://' + host;
-// if(port) {
-// url += ':' + port;
-// }
-// url += '/' + path;
-// // Creating a new RFB object will start a new connection
-// rfb = new RFB(document.getElementById('screen'), url,
-// { credentials: { password: password } });
-// // Add listeners to important events from the RFB module
-// rfb.addEventListener("connect", connectedToServer);
-// rfb.addEventListener("disconnect", disconnectedFromServer);
-// rfb.addEventListener("credentialsrequired", credentialsAreRequired);
-// rfb.addEventListener("desktopname", updateDesktopName);
-// // Set parameters that can be changed on an active connection
-// rfb.viewOnly = readQueryVariable('view_only', false);
-// rfb.scaleViewport = readQueryVariable('scale', false);
-// }
+ const path = readQueryVariable('path', 'websockify');
+ // | | | | | |
+ // | | | Connect | | |
+ // v v v v v v
+ status("Connecting");
+ // Build the websocket URL used to connect
+ let url;
+ if (vnc_url.indexOf("https:") != -1) {
+ url = 'wss';
+ } else {
+ url = 'ws';
+ }
+ url += '://' + host;
+ if(port) {
+ url += ':' + port;
+ }
+ url += '/' + path;
+ // Creating a new RFB object will start a new connection
+ rfb = new RFB(document.getElementById('screen'), url,
+ { credentials: { password: password } });
+ // Add listeners to important events from the RFB module
+ rfb.addEventListener("connect", connectedToServer);
+ rfb.addEventListener("disconnect", disconnectedFromServer);
+ rfb.addEventListener("credentialsrequired", credentialsAreRequired);
+ rfb.addEventListener("desktopname", updateDesktopName);
+ // Set parameters that can be changed on an active connection
+ rfb.viewOnly = readQueryVariable('view_only', false);
+ rfb.scaleViewport = readQueryVariable('scale', false);
+ }
-// render() {
-// const { challenge, vnc_url } = this.props
+ render() {
+ const { challenge, vnc_url } = this.props
-// return (
-//