margin-top: 3px;
}
+/* ----------------------------------------
+ * WebKit centering hacks
+ * ----------------------------------------
+ */
+
+.noVNC_center {
+ /*
+ * This is a workaround because webkit misrenders transforms and
+ * uses non-integer coordinates, resulting in blurry content.
+ * Ideally we'd use "top: 50%; transform: translateY(-50%);" on
+ * the objects instead.
+ */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+}
+.noVNC_center > * {
+ pointer-events: auto;
+}
+
/* ----------------------------------------
* Control Bar
* ----------------------------------------
content: url("../images/warning.svg") " ";
}
+/* ----------------------------------------
+ * Password Dialog
+ * ----------------------------------------
+ */
+
+#noVNC_password_dlg {
+ transform: translateY(-50px);
+}
+#noVNC_password_dlg.noVNC_open {
+ transform: translateY(0);
+}
+#noVNC_password_dlg ul {
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
+}
+#noVNC_password_dlg li {
+ padding-bottom:8px;
+}
+#noVNC_password_input {
+ width: 150px;
+}
+
/* ----------------------------------------
* Main Area
* ----------------------------------------
.addEventListener('click', UI.disconnect);
document.getElementById("noVNC_connect_button")
.addEventListener('click', UI.connect);
+
+ document.getElementById("noVNC_password_button")
+ .addEventListener('click', UI.setPassword);
},
addClipboardHandlers: function() {
UI.showStatus(msg, 'normal');
break;
case 'password':
- UI.toggleConnectPanel();
-
- document.getElementById('noVNC_connect_button').value = "Send Password";
- document.getElementById('noVNC_connect_button').onclick = UI.setPassword;
- document.getElementById('noVNC_setting_password').focus();
+ document.getElementById('noVNC_password_dlg')
+ .classList.add('noVNC_open');
+ setTimeout(function () {
+ document.getElementById(('noVNC_password_input').focus());
+ }, 100);
UI.showStatus(msg, 'warn');
break;
// It is enabled (toggled) by direct click on the button
UI.setViewDrag(false);
+ // State change also closes the password dialog
+ document.getElementById('noVNC_password_dlg')
+ .classList.remove('noVNC_open');
+
switch (UI.rfb_state) {
case 'fatal':
case 'failed':
},
setPassword: function() {
- UI.rfb.sendPassword(document.getElementById('noVNC_setting_password').value);
- //Reset connect button.
- document.getElementById('noVNC_connect_button').value = "Connect";
- document.getElementById('noVNC_connect_button').onclick = UI.connect;
- //Hide connection panel.
- UI.toggleConnectPanel();
+ UI.rfb.sendPassword(document.getElementById('noVNC_password_input').value);
+ document.getElementById('noVNC_password_dlg')
+ .classList.remove('noVNC_open');
return false;
},
</div> <!-- End of noVNC_control_bar -->
+ <!-- Password Dialog -->
+ <div class="noVNC_center">
+ <div id="noVNC_password_dlg" class="noVNC_panel">
+ <ul>
+ <li><label><strong>Password: </strong><input id="noVNC_password_input" type="password" /></label></li>
+ <li><input id="noVNC_password_button" type="button" value="Send Password" class="noVNC_submit" /></li>
+ </ul>
+ </div>
+ </div>
+
<div id="noVNC_container">
<h1 id="noVNC_logo"><span>no</span><br />VNC</h1>