safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-07 13:41:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added login screen (simulated for now) and improved styling

Browse Source
This commit is contained in:
Michael Jumper
2010-12-04 18:33:10 -08:00
parent ea9cac4ade
commit a8d9d4f256
3 changed files with 285 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
guacamole/web-client/web/guacamole.css
View File

@@ -20,6 +20,70 @@
body {
background: black;
font-family: sans-serif;
padding: 0;
margin: 0;
}
div#login-ui {
background: #342;
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
display: table;
}
div#login-logo {
position: relative;
bottom: 0;
display: inline-block;
vertical-align: middle;
}
div#login-dialog-middle {
width: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
div#login-dialog {
background: white;
vertical-align: middle;
padding: 1em;
border: 0.2em solid black;
-khtml-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
max-width: 75%;
text-align: left;
display: inline-block;
}
div#login-dialog h1 {
margin-top: 0;
margin-bottom: 0em;
text-align: center;
border-bottom: 1px solid silver;
padding-bottom: 0.5em;
}
div#login-dialog #buttons {
border-top: 1px solid silver;
padding-top: 0.5em;
text-align: center;
}
div#login-dialog #login-fields {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
div.errorDialogOuter {

BIN
guacamole/web-client/web/images/login-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

58
guacamole/web-client/web/index.html
View File

@@ -30,6 +30,40 @@
<body>
<div id="login-ui">
<div id="login-dialog-middle">
<div id="login-logo">
<img src="images/login-logo.png" alt="\_GUAC_/"/>
</div>
<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>
</div>
</div>
<!-- Main UI - hidden until login succeeds -->
<div id="main-guacamole-ui" style="display: none">
<!-- Menu -->
<div id="menu">
@@ -38,7 +72,7 @@
<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.
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>
@@ -71,6 +105,7 @@
</div>
</div>
</div>
</div>
<!-- Scripts -->
@@ -84,6 +119,25 @@
<!-- Init -->
<script type="text/javascript">
var loginForm = document.getElementById("login-form");
var loginUI = document.getElementById("login-ui");
loginForm.onsubmit = function() {
// FIXME: Do ACTUAL login here
loginUI.style.display = "none";
startGuacamole();
return false;
}
// 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");
@@ -246,6 +300,8 @@
guac.releaseKey(KEYSYM_CTRL);
}
}
</script>
</body>