diff options
author | Samuel Mannehed <samuel@cendio.se> | 2016-08-29 14:46:58 +0200 |
---|---|---|
committer | Pierre Ossman <ossman@cendio.se> | 2016-09-23 14:39:21 +0200 |
commit | 8a7ec6ea1919741035e35d111a5680eb396a0bdc (patch) | |
tree | 5314a8e795d2cb6d96b44416f84295f1dcf685fb | |
parent | 8d7708c82edc9c0d3dc22a28ded5a563ce786bb2 (diff) | |
download | novnc-8a7ec6ea1919741035e35d111a5680eb396a0bdc.tar.gz |
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.
-rw-r--r-- | app/styles/base.css | 49 | ||||
-rw-r--r-- | app/ui.js | 26 | ||||
-rw-r--r-- | vnc.html | 10 |
3 files changed, 74 insertions, 11 deletions
diff --git a/app/styles/base.css b/app/styles/base.css index 81c4516..96f830b 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -98,6 +98,32 @@ input[type=button]:active, select:active { } /* ---------------------------------------- + * 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 * ---------------------------------------- */ @@ -368,6 +394,29 @@ input[type=button]:active, select:active { } /* ---------------------------------------- + * 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 * ---------------------------------------- */ @@ -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_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; @@ -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); - //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; }, @@ -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> |