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="apple-touch-icon" type="image/png" href="images/guacamole-logo-64.png"/>
  27         <link rel="stylesheet" type="text/css" href="styles/login.css"/>
  28         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
  29         <title>Guacamole ${project.version}</title>
  30     </head>
  31
  32     <body>
  33
  34         <div id="login-ui" style="display: none">
  35             <div id="login-dialog-middle">
  36
  37                 <div id="login-dialog">
  38
  39                     <p id="login-error"></p>
  40
  41                     <form id="login-form" action="#" method="post">
  42
  43                         <div id="login-fields">
  44                             <table>
  45                                 <tr>
  46                                     <th>Username</th>
  47                                     <td><input type="text" name="username" id="username" autofocus="autofocus"/></td>
  48                                 </tr>
  49                                 <tr>
  50                                     <th>Password</th>
  51                                     <td><input type="password" name="password" id="password"/></td>
  52                                 </tr>
  53                             </table>
  54
  55                             <img class="logo" src="images/guacamole-logo-64.png" alt=""/>
  56                         </div>
  57
  58                         <div id="buttons">
  59                             <input type="submit" name="login" id="login" value="Login"/>
  60                         </div>
  61
  62                     </form>
  63                 </div>
  64
  65             </div>
  66         </div>
  67
  68         <!-- Connection list UI -->
  69         <div id="connection-list-ui" style="display: none">
  70
  71             <div id="logout-panel">
  72                 <button id="logout">Logout</button>
  73             </div>
  74
  75             <h1>
  76                 <img class="logo" src="images/guacamole-logo-64.png" alt=""/>
  77                 Available Connections
  78             </h1>
  79
  80             <table class="connections">
  81                 <thead>
  82                     <tr>
  83                         <th class="protocol"> </th>
  84                         <th class="name">Name</th>
  85                     </tr>
  86                 </thead>
  87                 <tbody id="connections-tbody">
  88                 </tbody>
  89             </table>
  90
  91         </div>
  92
  93         <div id="version-dialog">
  94             Guacamole ${project.version}
  95         </div>
  96
  97         <script type="text/javascript" src="scripts/connections.js"></script>
  98
  99         <!-- Init -->
 100         <script type="text/javascript"> /* <![CDATA[ */
 101
 102             // Constructs the URL for a client which connects to the connection
 103             // with the given id.
 104             function getClientURL(id) {
 105
 106                 // Construct URL for client with given id
 107                 return "client.xhtml?id=" + encodeURIComponent(id);
 108
 109             }
 110
 111             // Resets the interface such that the login UI is displayed if
 112             // the user is not authenticated (or authentication fails) and
 113             // the connection list UI (or the client for the only available
 114             // connection, if there is only one) is displayed if the user is
 115             // authenticated.
 116             function resetUI() {
 117
 118                 // Get parameters from query string
 119                 var parameters = window.location.search.substring(1);
 120
 121                 var configs;
 122                 try {
 123                     configs = getConfigList(parameters);
 124                 }
 125                 catch (e) {
 126
 127                     // Show login UI if unable to get configs
 128                     loginUI.style.display = "";
 129                     connectionListUI.style.display = "none";
 130
 131                     return;
 132
 133                 }
 134
 135                 // If only one connection, redirect to that.
 136                 if (configs.length == 1) {
 137                     window.location.href = getClientURL(configs[0].id);
 138                     return;
 139                 }
 140
 141                 // Remove all rows from connections list
 142                 var tbody = document.getElementById("connections-tbody");
 143                 tbody.innerHTML = "";
 144
 145                 // Add one row per connection
 146                 for (var i=0; i<configs.length; i++) {
 147
 148                     // Create row and cells
 149                     var tr = document.createElement("tr");
 150                     var protocol = document.createElement("td");
 151                     var id = document.createElement("td");
 152
 153                     var protocolIcon = document.createElement("div");
 154                     protocolIcon.className = "protocol icon " + configs[i].protocol;
 155
 156                     // Set CSS
 157                     protocol.className = "protocol";
 158                     id.className = "name";
 159
 160                     // Create link to client
 161                     var clientLink = document.createElement("a");
 162                     clientLink.setAttribute("href", getClientURL(configs[i].id));
 163
 164                     // Set cell contents
 165                     protocol.appendChild(protocolIcon);
 166                     //protocol.textContent   = configs[i].protocol;
 167                     clientLink.textContent = configs[i].id;
 168                     id.appendChild(clientLink);
 169
 170                     // Add cells
 171                     tr.appendChild(protocol);
 172                     tr.appendChild(id);
 173
 174                     // Add row
 175                     tbody.appendChild(tr);
 176
 177                 }
 178
 179                 // If configs could be retrieved, display list
 180                 loginUI.style.display = "none";
 181                 connectionListUI.style.display = "";
 182
 183             }
 184
 185             var loginForm = document.getElementById("login-form");
 186             var loginUI = document.getElementById("login-ui");
 187             var connectionListUI = document.getElementById("connection-list-ui");
 188             var logout = document.getElementById("logout");
 189             var username = document.getElementById("username");
 190             var password = document.getElementById("password");
 191
 192             logout.onclick = function() {
 193                 window.location.href = "logout";
 194             };
 195
 196             loginForm.onsubmit = function() {
 197
 198                 // Get parameters from query string
 199                 var parameters = window.location.search.substring(1);
 200
 201                 // Get username and password from form
 202                 var data =
 203                        "username=" + encodeURIComponent(username.value)
 204                     + "&password=" + encodeURIComponent(password.value)
 205
 206                 // Include query parameters in submission data
 207                 if (parameters) data += "&" + parameters;
 208
 209                 try {
 210
 211                     // Log in
 212                     var xhr = new XMLHttpRequest();
 213                     xhr.open("POST", "login", false);
 214                     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 215                     xhr.send(data);
 216
 217                     // Handle failures
 218                     if (xhr.status != 200)
 219                         throw new Error("Invalid login");
 220
 221                     resetUI();
 222
 223                 }
 224                 catch (e) {
 225
 226                     var loginError = document.getElementById("login-error");
 227
 228                     // Display error, reset and refocus password field
 229                     loginError.textContent = e.message;
 230                     password.value = "";
 231                     password.focus();
 232
 233                     return false;
 234
 235                 }
 236
 237                 // On success, hide loginUI, get and show connection list.
 238                 return false;
 239
 240             }
 241
 242             // Turn off autocorrect and autocapitalization on usename
 243             username.setAttribute("autocorrect", "off");
 244             username.setAttribute("autocapitalize", "off");
 245
 246             resetUI();
 247
 248             /* ]]> */ </script>
 249
 250     </body>
 251
 252 </html>