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         <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"/>
  28         <title>Guacamole ${project.version}</title>
  29     </head>
  30
  31     <body>
  32
  33         <div id="login-ui" style="display: none">
  34             <div id="login-dialog-middle">
  35
  36                 <div id="login-dialog">
  37
  38                     <p id="login-error"></p>
  39
  40                     <form id="login-form" action="#" method="post">
  41
  42                         <div id="login-fields">
  43                             <table>
  44                                 <tr>
  45                                     <th>Username</th>
  46                                     <td><input type="text" name="username" id="username" autofocus="autofocus"/></td>
  47                                 </tr>
  48                                 <tr>
  49                                     <th>Password</th>
  50                                     <td><input type="password" name="password" id="password"/></td>
  51                                 </tr>
  52                             </table>
  53
  54                             <img class="logo" src="images/guacamole-logo-64.png" alt=""/>
  55                         </div>
  56
  57                         <div id="buttons">
  58                             <input type="submit" name="login" id="login" value="Login"/>
  59                         </div>
  60
  61                     </form>
  62                 </div>
  63
  64             </div>
  65         </div>
  66
  67         <!-- Connection list UI -->
  68         <div id="connection-list-ui" style="display: none">
  69
  70             <div id="logout-panel">
  71                 <button id="logout">Logout</button>
  72             </div>
  73
  74             <h1>
  75                 <img class="logo" src="images/guacamole-logo-64.png" alt=""/>
  76                 Available Connections
  77             </h1>
  78
  79             <table class="connections">
  80                 <thead>
  81                     <tr>
  82                         <th class="protocol"> </th>
  83                         <th class="name">Name</th>
  84                     </tr>
  85                 </thead>
  86                 <tbody id="connections-tbody">
  87                 </tbody>
  88             </table>
  89
  90         </div>
  91
  92         <div id="version-dialog">
  93             Guacamole ${project.version}
  94         </div>
  95
  96         <script type="text/javascript" src="scripts/connections.js"></script>
  97
  98         <!-- Init -->
  99         <script type="text/javascript"> /* <![CDATA[ */
 100
 101             // Constructs the URL for a client which connects to the connection
 102             // with the given id.
 103             function getClientURL(id) {
 104
 105                 // Construct URL for client with given id
 106                 return "client.xhtml?id=" + encodeURIComponent(id);
 107
 108             }
 109
 110             // Resets the interface such that the login UI is displayed if
 111             // the user is not authenticated (or authentication fails) and
 112             // the connection list UI (or the client for the only available
 113             // connection, if there is only one) is displayed if the user is
 114             // authenticated.
 115             function resetUI() {
 116
 117                 // Get parameters from query string
 118                 var parameters = window.location.search.substring(1);
 119
 120                 var configs;
 121                 try {
 122                     configs = getConfigList(parameters);
 123                 }
 124                 catch (e) {
 125
 126                     // Show login UI if unable to get configs
 127                     loginUI.style.display = "";
 128                     connectionListUI.style.display = "none";
 129
 130                     return;
 131
 132                 }
 133
 134                 // If only one connection, redirect to that.
 135                 if (configs.length == 1) {
 136                     window.location.href = getClientURL(configs[0].id);
 137                     return;
 138                 }
 139
 140                 // Remove all rows from connections list
 141                 var tbody = document.getElementById("connections-tbody");
 142                 tbody.innerHTML = "";
 143
 144                 // Add one row per connection
 145                 for (var i=0; i<configs.length; i++) {
 146
 147                     // Create row and cells
 148                     var tr = document.createElement("tr");
 149                     var protocol = document.createElement("td");
 150                     var id = document.createElement("td");
 151
 152                     var protocolIcon = document.createElement("div");
 153                     protocolIcon.className = "protocol icon " + configs[i].protocol;
 154
 155                     // Set CSS
 156                     protocol.className = "protocol";
 157                     id.className = "name";
 158
 159                     // Create link to client
 160                     var clientLink = document.createElement("a");
 161                     clientLink.setAttribute("href", getClientURL(configs[i].id));
 162
 163                     // Set cell contents
 164                     protocol.appendChild(protocolIcon);
 165                     //protocol.textContent   = configs[i].protocol;
 166                     clientLink.textContent = configs[i].id;
 167                     id.appendChild(clientLink);
 168
 169                     // Add cells
 170                     tr.appendChild(protocol);
 171                     tr.appendChild(id);
 172
 173                     // Add row
 174                     tbody.appendChild(tr);
 175
 176                 }
 177
 178                 // If configs could be retrieved, display list
 179                 loginUI.style.display = "none";
 180                 connectionListUI.style.display = "";
 181
 182             }
 183
 184             var loginForm = document.getElementById("login-form");
 185             var loginUI = document.getElementById("login-ui");
 186             var connectionListUI = document.getElementById("connection-list-ui");
 187             var logout = document.getElementById("logout");
 188
 189             logout.onclick = function() {
 190                 window.location.href = "logout";
 191             };
 192
 193             loginForm.onsubmit = function() {
 194
 195                 // Get parameters from query string
 196                 var parameters = window.location.search.substring(1);
 197
 198                 // Get username and password from form
 199                 var username = document.getElementById("username");
 200                 var password = document.getElementById("password");
 201
 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             resetUI();
 243
 244             /* ]]> */ </script>
 245
 246     </body>
 247
 248 </html>