Added login screen (simulated for now) and improved styling

guacamole/web-client/web/guacamole.css

@@ -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 {

guacamole/web-client/web/index.html

@@ -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>