Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleanup the UI to be much nicer #78

Merged
merged 14 commits into from
Feb 5, 2024
Next Next commit
Cleanup JS just a bit
- Remove ability to connect to arbitrary hosts and ports
  via query params. We already required websockify anyway, so
  this never worked. Plus, we only care about using the viewer for
  our own purposes, not as a general purpose novnc thing
- Get rid of the ctrlAltDelete function. It's not particularly useful
  in this context. I will work on adding more UI here, but this
  location is a good place for other buttons
yuvipanda committed Feb 4, 2024
commit f4879721ac1d4b1347d58445fd00d4c90a4f2e1a
79 changes: 4 additions & 75 deletions js/index.js
Original file line number Diff line number Diff line change
@@ -24,100 +24,29 @@ function disconnectedFromServer(e) {
}
}

// 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 (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 path = readQueryVariable(
"path",
window.location.pathname.replace(/[^/]*$/, "").substring(1) + "websockify",
);

// | | | | | |
// | | | Connect | | |
// v v v v v v

status("Connecting");

// Build the websocket URL used to connect
let url;
if (window.location.protocol === "https:") {
url = "wss";
} else {
url = "ws";
}
url += "://" + host;
if (port) {
url += ":" + port;
}
url += "/" + path;
// Construct the websockify websocket URL we want to connect to
let websockifyUrl = new URL("websockify", window.location);
websockifyUrl.protocol = window.location.protocol === "https" ? "wss" : "ws";

// Creating a new RFB object will start a new connection
rfb = new RFB(document.getElementById("screen"), url, {
credentials: { password: password },
});
rfb = new RFB(document.getElementById("screen"), websockifyUrl.toString(), {});

// 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", true);

// Clipboard
function toggleClipboardPanel() {
document
2 changes: 0 additions & 2 deletions jupyter_remote_desktop_proxy/static/index.html
Original file line number Diff line number Diff line change
@@ -30,8 +30,6 @@
<textarea id="noVNC_clipboard_text" rows="5"></textarea>
</div>
</div>

<div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
</div>
<div id="screen">
<!-- This is where the remote screen will appear -->