Add a separate dialog for the password prompt

The user might be queried for the password during the connect stage
if no password was previously provided. Add a separate dialog for
this rather than abusing the connect dialog.

app/styles/base.css

@@ -97,6 +97,32 @@ input[type=button]:active, select:active {
   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
  * ----------------------------------------
@@ -367,6 +393,29 @@ input[type=button]:active, select:active {
   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
  * ----------------------------------------

app/ui.js

@@ -249,6 +249,9 @@ var UI;
                 .addEventListener('click', UI.disconnect);
             document.getElementById("noVNC_connect_button")
                 .addEventListener('click', UI.connect);
+
+            document.getElementById("noVNC_password_button")
+                .addEventListener('click', UI.setPassword);
         },
 
         addClipboardHandlers: function() {
@@ -323,11 +326,11 @@ var UI;
                         UI.showStatus(msg, 'normal');
                         break;
                     case 'password':
-                        UI.toggleConnectPanel();
+                        document.getElementById('noVNC_password_dlg')
-
+                            .classList.add('noVNC_open');
-                        document.getElementById('noVNC_connect_button').value = "Send Password";
+                        setTimeout(function () {
-                        document.getElementById('noVNC_connect_button').onclick = UI.setPassword;
+                                document.getElementById(('noVNC_password_input').focus());
-                        document.getElementById('noVNC_setting_password').focus();
+                            }, 100);
 
                         UI.showStatus(msg, 'warn');
                         break;
@@ -397,6 +400,10 @@ var UI;
             // 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':
@@ -827,12 +834,9 @@ var UI;
         },
 
         setPassword: function() {
-            UI.rfb.sendPassword(document.getElementById('noVNC_setting_password').value);
+            UI.rfb.sendPassword(document.getElementById('noVNC_password_input').value);
-            //Reset connect button.
+            document.getElementById('noVNC_password_dlg')
-            document.getElementById('noVNC_connect_button').value = "Connect";
+                .classList.remove('noVNC_open');
-            document.getElementById('noVNC_connect_button').onclick = UI.connect;
-            //Hide connection panel.
-            UI.toggleConnectPanel();
             return false;
         },
 

vnc.html

@@ -185,6 +185,16 @@
 
     </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>