<head>
<link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/>
+ <link rel="apple-touch-icon" type="image/png" href="images/guacamole-logo-64.png"/>
<link rel="stylesheet" type="text/css" href="styles/login.css"/>
+ <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"/>
<title>Guacamole ${project.version}</title>
</head>
<body>
- <div id="login-ui">
+ <div id="login-ui" style="display: none">
<div id="login-dialog-middle">
<div id="login-dialog">
</form>
</div>
- <div id="version-dialog">
- Guacamole ${project.version}
- </div>
-
</div>
</div>
- <!-- Main UI - hidden until login succeeds -->
+ <!-- Connection list UI -->
<div id="connection-list-ui" style="display: none">
- <!-- STUB -->
+
+ <div id="logout-panel">
+ <button id="logout">Logout</button>
+ </div>
+
+ <h1>
+ <img class="logo" src="images/guacamole-logo-64.png" alt=""/>
+ Available Connections
+ </h1>
+
+ <table class="connections">
+ <thead>
+ <tr>
+ <th class="protocol"> </th>
+ <th class="name">Name</th>
+ </tr>
+ </thead>
+ <tbody id="connections-tbody">
+ </tbody>
+ </table>
+
</div>
+ <div id="version-dialog">
+ Guacamole ${project.version}
+ </div>
+
+ <script type="text/javascript" src="scripts/connections.js"></script>
<!-- Init -->
<script type="text/javascript"> /* <![CDATA[ */
+ // Constructs the URL for a client which connects to the connection
+ // with the given id.
+ function getClientURL(id) {
+
+ // Construct URL for client with given id
+ return "client.xhtml?id=" + encodeURIComponent(id);
+
+ }
+
+ // Resets the interface such that the login UI is displayed if
+ // the user is not authenticated (or authentication fails) and
+ // the connection list UI (or the client for the only available
+ // connection, if there is only one) is displayed if the user is
+ // authenticated.
+ function resetUI() {
+
+ // Get parameters from query string
+ var parameters = window.location.search.substring(1);
+
+ var configs;
+ try {
+ configs = getConfigList(parameters);
+ }
+ catch (e) {
+
+ // Show login UI if unable to get configs
+ loginUI.style.display = "";
+ connectionListUI.style.display = "none";
+
+ return;
+
+ }
+
+ // If only one connection, redirect to that.
+ if (configs.length == 1) {
+ window.location.href = getClientURL(configs[0].id);
+ return;
+ }
+
+ // Remove all rows from connections list
+ var tbody = document.getElementById("connections-tbody");
+ tbody.innerHTML = "";
+
+ // Add one row per connection
+ for (var i=0; i<configs.length; i++) {
+
+ // Create row and cells
+ var tr = document.createElement("tr");
+ var protocol = document.createElement("td");
+ var id = document.createElement("td");
+
+ var protocolIcon = document.createElement("div");
+ protocolIcon.className = "protocol icon " + configs[i].protocol;
+
+ // Set CSS
+ protocol.className = "protocol";
+ id.className = "name";
+
+ // Create link to client
+ var clientLink = document.createElement("a");
+ clientLink.setAttribute("href", getClientURL(configs[i].id));
+
+ // Set cell contents
+ protocol.appendChild(protocolIcon);
+ //protocol.textContent = configs[i].protocol;
+ clientLink.textContent = configs[i].id;
+ id.appendChild(clientLink);
+
+ // Add cells
+ tr.appendChild(protocol);
+ tr.appendChild(id);
+
+ // Add row
+ tbody.appendChild(tr);
+
+ }
+
+ // If configs could be retrieved, display list
+ loginUI.style.display = "none";
+ connectionListUI.style.display = "";
+
+ }
+
var loginForm = document.getElementById("login-form");
var loginUI = document.getElementById("login-ui");
- var display = document.getElementById("display");
+ var connectionListUI = document.getElementById("connection-list-ui");
+ var logout = document.getElementById("logout");
+ var username = document.getElementById("username");
+ var password = document.getElementById("password");
- // TODO: Get connection list
- // On no-auth fail, show login UI
+ logout.onclick = function() {
+ window.location.href = "logout";
+ };
loginForm.onsubmit = function() {
- var username = document.getElementById("username");
- var password = document.getElementById("password");
+ // Get parameters from query string
+ var parameters = window.location.search.substring(1);
+ // Get username and password from form
var data =
"username=" + encodeURIComponent(username.value)
+ "&password=" + encodeURIComponent(password.value)
+ // Include query parameters in submission data
+ if (parameters) data += "&" + parameters;
+
try {
- // STUB
+
+ // Log in
+ var xhr = new XMLHttpRequest();
+ xhr.open("POST", "login", false);
+ xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+ xhr.send(data);
+
+ // Handle failures
+ if (xhr.status != 200)
+ throw new Error("Invalid login");
+
+ resetUI();
+
}
catch (e) {
}
+ // Turn off autocorrect and autocapitalization on usename
+ username.setAttribute("autocorrect", "off");
+ username.setAttribute("autocapitalize", "off");
+
+ resetUI();
+
/* ]]> */ </script>
</body>
projects / guacamole.git / blobdiff