src/main/webapp/index.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html>
   3
   4 <!--
   5     Guacamole - Clientless Remote Desktop
   6     Copyright (C) 2010  Michael Jumper
   7
   8     This program is free software: you can redistribute it and/or modify
   9     it under the terms of the GNU Affero General Public License as published by
  10     the Free Software Foundation, either version 3 of the License, or
  11     (at your option) any later version.
  12
  13     This program is distributed in the hope that it will be useful,
  14     but WITHOUT ANY WARRANTY; without even the implied warranty of
  15     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  16     GNU Affero General Public License for more details.
  17
  18     You should have received a copy of the GNU Affero General Public License
  19     along with this program.  If not, see <http://www.gnu.org/licenses/>.
  20 -->
  21
  22 <html xmlns="http://www.w3.org/1999/xhtml">
  23
  24     <head>
  25         <link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/>
  26         <link rel="stylesheet" type="text/css" href="styles/login.css"/>
  27         <title>Guacamole ${project.version}</title>
  28     </head>
  29
  30     <body>
  31
  32         <div id="login-ui" style="display: none">
  33             <div id="login-dialog-middle">
  34
  35                 <div id="login-dialog">
  36
  37                     <p id="login-error"></p>
  38
  39                     <form id="login-form" action="#" method="post">
  40
  41                         <div id="login-fields">
  42                             <table>
  43                                 <tr>
  44                                     <th>Username</th>
  45                                     <td><input type="text" name="username" id="username" autofocus="autofocus"/></td>
  46                                 </tr>
  47                                 <tr>
  48                                     <th>Password</th>
  49                                     <td><input type="password" name="password" id="password"/></td>
  50                                 </tr>
  51                             </table>
  52
  53                             <img class="logo" src="images/guacamole-logo-64.png" alt=""/>
  54                         </div>
  55
  56                         <div id="buttons">
  57                             <input type="submit" name="login" id="login" value="Login"/>
  58                         </div>
  59
  60                     </form>
  61                 </div>
  62
  63             </div>
  64         </div>
  65
  66         <!-- Connection list UI -->
  67         <div id="connection-list-ui" style="display: none">
  68
  69             <div id="logout">
  70                 <a href="logout">Logout</a>
  71             </div>
  72
  73             <h1>
  74                 <img class="logo" src="images/guacamole-logo-64.png" alt=""/>
  75                 Available Connections
  76             </h1>
  77
  78             <table class="connections">
  79                 <thead>
  80                     <tr>
  81                         <th class="protocol">Protocol</th>
  82                         <th class="name">Name</th>
  83                     </tr>
  84                 </thead>
  85                 <tbody id="connections-tbody">
  86                 </tbody>
  87             </table>
  88
  89         </div>
  90
  91         <div id="version-dialog">
  92             Guacamole ${project.version}
  93         </div>
  94
  95         <!-- Init -->
  96         <script type="text/javascript"> /* <![CDATA[ */
  97
  98             function Config(protocol, id) {
  99                 this.protocol = protocol;
 100                 this.id = id;
 101             }
 102
 103             function getConfigList() {
 104
 105                 // Get config list
 106                 var xhr = new XMLHttpRequest();
 107                 xhr.open("GET", "configs", false);
 108                 xhr.send(null);
 109
 110                 // If fail, throw error
 111                 if (xhr.status != 200)
 112                     throw new Error(xhr.statusText);
 113
 114                 // Otherwise, get list
 115                 var configs = new Array();
 116
 117                 var configElements = xhr.responseXML.getElementsByTagName("config");
 118                 for (var i=0; i<configElements.length; i++) {
 119                     configs.push(new Config(
 120                         configElements[i].getAttribute("protocol"),
 121                         configElements[i].getAttribute("id")
 122                     ));
 123                 }
 124
 125                 return configs;
 126
 127             }
 128
 129             function resetUI() {
 130
 131                 var configs;
 132                 try {
 133                     configs = getConfigList();
 134                 }
 135                 catch (e) {
 136
 137                     // Show login UI if unable to get configs
 138                     loginUI.style.display = "";
 139                     connectionListUI.style.display = "none";
 140
 141                     return;
 142
 143                 }
 144
 145                 // If only one connection, redirect to that.
 146                 if (configs.length == 1) {
 147                     window.location.href = "client.xhtml?" + encodeURIComponent(configs[0].id);
 148                     return;
 149                 }
 150
 151                 // Remove all rows from connections list
 152                 var tbody = document.getElementById("connections-tbody");
 153                 tbody.innerHTML = "";
 154
 155                 // Add one row per connection
 156                 for (var i=0; i<configs.length; i++) {
 157
 158                     // Create row and cells
 159                     var tr = document.createElement("tr");
 160                     var protocol = document.createElement("td");
 161                     var id = document.createElement("td");
 162
 163                     // Set CSS
 164                     protocol.className = "protocol";
 165                     id.className = "name";
 166
 167                     // Create link to client
 168                     var clientLink = document.createElement("a");
 169                     clientLink.setAttribute("href",
 170                         "client.xhtml?" + encodeURIComponent(configs[i].id));
 171
 172                     // Set cell contents
 173                     protocol.textContent   = configs[i].protocol;
 174                     clientLink.textContent = configs[i].id;
 175                     id.appendChild(clientLink);
 176
 177                     // Add cells
 178                     tr.appendChild(protocol);
 179                     tr.appendChild(id);
 180
 181                     // Add row
 182                     tbody.appendChild(tr);
 183
 184                 }
 185
 186                 // If configs could be retrieved, display list
 187                 loginUI.style.display = "none";
 188                 connectionListUI.style.display = "";
 189
 190             }
 191
 192             var loginForm = document.getElementById("login-form");
 193             var loginUI = document.getElementById("login-ui");
 194             var connectionListUI = document.getElementById("connection-list-ui");
 195
 196             // TODO: Get connection list
 197             // On no-auth fail, show login UI
 198
 199             loginForm.onsubmit = function() {
 200
 201                 var username = document.getElementById("username");
 202                 var password = document.getElementById("password");
 203
 204                 var data =
 205                        "username=" + encodeURIComponent(username.value)
 206                     + "&password=" + encodeURIComponent(password.value)
 207
 208                 try {
 209
 210                     // Log in
 211                     var xhr = new XMLHttpRequest();
 212                     xhr.open("POST", "login", false);
 213                     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 214                     xhr.send(data);
 215
 216                     // Handle failures
 217                     if (xhr.status != 200)
 218                         throw new Error("Invalid login");
 219
 220                     resetUI();
 221
 222                 }
 223                 catch (e) {
 224
 225                     var loginError = document.getElementById("login-error");
 226
 227                     // Display error, reset and refocus password field
 228                     loginError.textContent = e.message;
 229                     password.value = "";
 230                     password.focus();
 231
 232                     return false;
 233
 234                 }
 235
 236                 // On success, hide loginUI, get and show connection list.
 237                 return false;
 238
 239             }
 240
 241             resetUI();
 242
 243             /* ]]> */ </script>
 244
 245     </body>
 246
 247 </html>