<body>
- <!-- Menu -->
- <div id="menu">
-
- <!-- Clipboard -->
- <button id="showClipboard">Show Clipboard</button>
- <div id="clipboardDiv">
- <h2>Clipboard</h2>
- <p>
- Text copied/cut within VNC will appear here. Changes to the text will affect the VNC clipboard, and will be pastable within VNC. Use the textbox below as an interface between the client and server clipboards.
- </p>
- <textarea rows="10" cols="40" id="clipboard"></textarea>
- </div>
+ <div id="login-ui">
+ <div id="login-dialog-middle">
- <button id="showKeyboard">Show Keyboard</button>
- <button id="CtrlAltDelete">Ctrl-Alt-Delete</button>
+ <div id="login-logo">
+ <img src="images/login-logo.png" alt="\_GUAC_/"/>
+ </div>
- <!-- Logo and status -->
- <img id="logo" src="images/guacamole-logo.png" alt="Guacamole" title="__GUAC_VERSION"/>
- <span id="state"></span>
+ <div id="login-dialog">
+
+ <h1>Guacamole Login</h1>
+ <form id="login-form" action="#">
+ <table id="login-fields">
+ <tr>
+ <th>Username</th>
+ <td><input type="text" name="username" id="username"/></td>
+ </tr>
+ <tr>
+ <th>Password</th>
+ <td><input type="password" name="password" id="password"/></td>
+ </tr>
+ </table>
+
+ <div id="buttons">
+ <input type="submit" name="login" id="login" value="Login"/>
+ </div>
+ </form>
+ </div>
- <a href="agpl-3.0-standalone.html"><img id="license" src="images/agpl-logo.png" alt="AGPLv3"/></a>
+ </div>
</div>
+ <!-- Main UI - hidden until login succeeds -->
+ <div id="main-guacamole-ui" style="display: none">
- <!-- Display -->
- <div id="display" class="guac-display guac-loading">
- <!-- On-screen keyboard -->
- <div id="keyboardContainer"></div>
- </div>
+ <!-- Menu -->
+ <div id="menu">
+
+ <!-- Clipboard -->
+ <button id="showClipboard">Show Clipboard</button>
+ <div id="clipboardDiv">
+ <h2>Clipboard</h2>
+ <p>
+ Text copied/cut within Guacamole will appear here. Changes to the text will affect the remote clipboard, and will be pastable within the remote desktop. Use the textbox below as an interface between the client and server clipboards.
+ </p>
+ <textarea rows="10" cols="40" id="clipboard"></textarea>
+ </div>
+
+ <button id="showKeyboard">Show Keyboard</button>
+ <button id="CtrlAltDelete">Ctrl-Alt-Delete</button>
+ <!-- Logo and status -->
+ <img id="logo" src="images/guacamole-logo.png" alt="Guacamole" title="__GUAC_VERSION"/>
+ <span id="state"></span>
- <!-- Error Dialog-->
- <div id="errorDialog" class="errorDialogOuter">
- <div class="errorDialogMiddle">
- <div class="errorDialog">
- <h1>Error</h1>
- <p id="errorText"></p>
- <div class="buttons"><button id="reconnect">Reconnect</button></div>
+ <a href="agpl-3.0-standalone.html"><img id="license" src="images/agpl-logo.png" alt="AGPLv3"/></a>
+ </div>
+
+
+ <!-- Display -->
+ <div id="display" class="guac-display guac-loading">
+ <!-- On-screen keyboard -->
+ <div id="keyboardContainer"></div>
+ </div>
+
+
+ <!-- Error Dialog-->
+ <div id="errorDialog" class="errorDialogOuter">
+ <div class="errorDialogMiddle">
+ <div class="errorDialog">
+ <h1>Error</h1>
+ <p id="errorText"></p>
+ <div class="buttons"><button id="reconnect">Reconnect</button></div>
+ </div>
</div>
</div>
</div>
<!-- Init -->
<script type="text/javascript">
- var menu = document.getElementById("menu");
- var display = document.getElementById("display");
- var logo = document.getElementById("logo");
-
- var errorDialog = document.getElementById("errorDialog");
- var errorDialogText = document.getElementById("errorText");
-
- // Position display correctly
- window.onresize = function() {
- display.style.top = menu.offsetHeight + "px";
- };
-
- window.onresize();
-
- // Instantiate client
- var guac = new GuacamoleClient(display);
-
- var state = document.getElementById("state");
- guac.setOnStateChangeHandler(function(clientState) {
-
- switch (clientState) {
- case 0:
- state.textContent = "Idle."
- break;
- case 1:
- state.textContent = "Connecting...";
- break;
- case 2:
- state.textContent = "Connected, waiting for first update...";
- break;
- case 3:
- display.className = display.className.replace(/guac-loading/, '');
- menu.className = "connected";
- state.textContent = "Connected.";
- break;
- case 4:
- state.textContent = "Disconnecting...";
- break;
- case 5:
- state.textContent = "Disconnected.";
- break;
- default:
- state.textContent = "Unknown";
- }
- });
-
- // Cache error image (might not be available when error occurs)
- var guacErrorImage = new Image();
- guacErrorImage.src = "images/noguacamole-logo.png";
-
- guac.setErrorHandler(function(error) {
- menu.className = "error";
- logo.src = guacErrorImage.src;
- errorDialogText.textContent = error;
- errorDialog.style.visibility = "visible";
- });
-
- // Reconnect button
- var reconnect = document.getElementById("reconnect");
- reconnect.onclick = function() {
- window.location.reload();
- };
-
- // Connect
- guac.connect();
-
- // Disconnect on close
- window.onunload = function() {
- guac.disconnect();
- }
+ var loginForm = document.getElementById("login-form");
+ var loginUI = document.getElementById("login-ui");
- // Handle clipboard events
- var clipboardElement = document.getElementById("clipboard");
- clipboardElement.onchange = function() {
+ loginForm.onsubmit = function() {
- var text = clipboardElement.value;
- guac.setClipboard(text);
+ // FIXME: Do ACTUAL login here
- };
+ loginUI.style.display = "none";
+ startGuacamole();
- // Ignore keypresses when clipboard is focused
- clipboardElement.onfocus = function() {
- guac.disableKeyboard();
- };
+ return false;
- // Capture keypresses when clipboard is not focused
- clipboardElement.onblur = function() {
- guac.enableKeyboard();
- };
+ }
- // Server copy handler
- guac.setClipboardHandler(
- function(data) {
- clipboardElement.value = data;
+ // Shows guacamole interface and initiates connection to guacamole
+ function startGuacamole() {
+
+ document.getElementById("main-guacamole-ui").style.display = "block";
+
+ var menu = document.getElementById("menu");
+ var display = document.getElementById("display");
+ var logo = document.getElementById("logo");
+
+ var errorDialog = document.getElementById("errorDialog");
+ var errorDialogText = document.getElementById("errorText");
+
+ // Position display correctly
+ window.onresize = function() {
+ display.style.top = menu.offsetHeight + "px";
+ };
+
+ window.onresize();
+
+ // Instantiate client
+ var guac = new GuacamoleClient(display);
+
+ var state = document.getElementById("state");
+ guac.setOnStateChangeHandler(function(clientState) {
+
+ switch (clientState) {
+ case 0:
+ state.textContent = "Idle."
+ break;
+ case 1:
+ state.textContent = "Connecting...";
+ break;
+ case 2:
+ state.textContent = "Connected, waiting for first update...";
+ break;
+ case 3:
+ display.className = display.className.replace(/guac-loading/, '');
+ menu.className = "connected";
+ state.textContent = "Connected.";
+ break;
+ case 4:
+ state.textContent = "Disconnecting...";
+ break;
+ case 5:
+ state.textContent = "Disconnected.";
+ break;
+ default:
+ state.textContent = "Unknown";
+ }
+ });
+
+ // Cache error image (might not be available when error occurs)
+ var guacErrorImage = new Image();
+ guacErrorImage.src = "images/noguacamole-logo.png";
+
+ guac.setErrorHandler(function(error) {
+ menu.className = "error";
+ logo.src = guacErrorImage.src;
+ errorDialogText.textContent = error;
+ errorDialog.style.visibility = "visible";
+ });
+
+ // Reconnect button
+ var reconnect = document.getElementById("reconnect");
+ reconnect.onclick = function() {
+ window.location.reload();
+ };
+
+ // Connect
+ guac.connect();
+
+ // Disconnect on close
+ window.onunload = function() {
+ guac.disconnect();
}
- );
-
- // Show/Hide clipboard
- var clipboardDiv = document.getElementById("clipboardDiv");
- var showClipboard = document.getElementById("showClipboard");
- showClipboard.onclick = function() {
+ // Handle clipboard events
+ var clipboardElement = document.getElementById("clipboard");
+ clipboardElement.onchange = function() {
- var displayed = clipboardDiv.style.display;
- if (displayed != "block") {
- clipboardDiv.style.display = "block";
- showClipboard.innerHTML = "Hide Clipboard";
- }
- else {
- clipboardDiv.style.display = "none";
- showClipboard.innerHTML = "Show Clipboard";
- clipboardElement.onchange();
- }
+ var text = clipboardElement.value;
+ guac.setClipboard(text);
- };
+ };
+ // Ignore keypresses when clipboard is focused
+ clipboardElement.onfocus = function() {
+ guac.disableKeyboard();
+ };
- // Show/Hide keyboard
- var keyboardContainer = document.getElementById("keyboardContainer");
- var showKeyboard = document.getElementById("showKeyboard");
- showKeyboard.onclick = function() {
+ // Capture keypresses when clipboard is not focused
+ clipboardElement.onblur = function() {
+ guac.enableKeyboard();
+ };
- var displayed = keyboardContainer.style.display;
- if (displayed != "block") {
- keyboardContainer.style.display = "block";
- showKeyboard.textContent = "Hide Keyboard";
- }
- else {
- keyboardContainer.style.display = "none";
- showKeyboard.textContent = "Show Keyboard";
- }
+ // Server copy handler
+ guac.setClipboardHandler(
+ function(data) {
+ clipboardElement.value = data;
+ }
+ );
- };
- // On-screen keyboard
- var osKeyboard = new GuacamoleOnScreenKeyboard("layouts/en-us-qwerty.xml");
- keyboardContainer.appendChild(osKeyboard);
+ // Show/Hide clipboard
+ var clipboardDiv = document.getElementById("clipboardDiv");
+ var showClipboard = document.getElementById("showClipboard");
+ showClipboard.onclick = function() {
- osKeyboard.setKeyPressedHandler(
- function(keysym) {
- guac.pressKey(keysym);
+ var displayed = clipboardDiv.style.display;
+ if (displayed != "block") {
+ clipboardDiv.style.display = "block";
+ showClipboard.innerHTML = "Hide Clipboard";
+ }
+ else {
+ clipboardDiv.style.display = "none";
+ showClipboard.innerHTML = "Show Clipboard";
+ clipboardElement.onchange();
}
- );
- osKeyboard.setKeyReleasedHandler(
- function(keysym) {
- guac.releaseKey(keysym);
+ };
+
+
+ // Show/Hide keyboard
+ var keyboardContainer = document.getElementById("keyboardContainer");
+ var showKeyboard = document.getElementById("showKeyboard");
+ showKeyboard.onclick = function() {
+
+ var displayed = keyboardContainer.style.display;
+ if (displayed != "block") {
+ keyboardContainer.style.display = "block";
+ showKeyboard.textContent = "Hide Keyboard";
+ }
+ else {
+ keyboardContainer.style.display = "none";
+ showKeyboard.textContent = "Show Keyboard";
}
- );
-
- // Send Ctrl-Alt-Delete
- var CtrlAltDelete = document.getElementById("CtrlAltDelete");
-
- CtrlAltDelete.onclick = function() {
- guac.pressKey(KEYSYM_CTRL);
- guac.pressKey(KEYSYM_ALT);
- guac.pressKey(KEYSYM_DELETE);
- guac.releaseKey(KEYSYM_DELETE);
- guac.releaseKey(KEYSYM_ALT);
- guac.releaseKey(KEYSYM_CTRL);
+
+ };
+
+ // On-screen keyboard
+ var osKeyboard = new GuacamoleOnScreenKeyboard("layouts/en-us-qwerty.xml");
+ keyboardContainer.appendChild(osKeyboard);
+
+ osKeyboard.setKeyPressedHandler(
+ function(keysym) {
+ guac.pressKey(keysym);
+ }
+ );
+
+ osKeyboard.setKeyReleasedHandler(
+ function(keysym) {
+ guac.releaseKey(keysym);
+ }
+ );
+
+ // Send Ctrl-Alt-Delete
+ var CtrlAltDelete = document.getElementById("CtrlAltDelete");
+
+ CtrlAltDelete.onclick = function() {
+ guac.pressKey(KEYSYM_CTRL);
+ guac.pressKey(KEYSYM_ALT);
+ guac.pressKey(KEYSYM_DELETE);
+ guac.releaseKey(KEYSYM_DELETE);
+ guac.releaseKey(KEYSYM_ALT);
+ guac.releaseKey(KEYSYM_CTRL);
+ }
+
}
</script>
projects / guacamole.git / commitdiff
