clockwerk-guacamole – Diff between revs 1 and 2

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