Ticket #268: Back button and logout button in admin screen, style improvements.

This commit is contained in:
Michael Jumper
2013-02-12 23:54:40 -08:00
parent afb6e29aef
commit 739f500918
3 changed files with 382 additions and 341 deletions

View File

@@ -31,43 +31,51 @@
<body>
<h1>Administration</h1>
<h2 class="require-manage-users">Users</h2>
<div class="settings section require-manage-users" id="users">
<p>
Click or tap on a user below to manage that user. Depending
on your access level, users can be added and deleted, and their
passwords can be changed.
</p>
<div id="user-add-form">
<div class="icon user add"/><input type="text" class="name" id="username" placeholder="Add user"/><button id="add-user">Add</button>
</div>
<div id="user-list">
</div>
<div id="logout-panel">
<button id="back">Back</button>
<button id="logout">Logout</button>
</div>
<h2>Administration</h2>
<div class="settings section">
<h2 class="require-manage-connections">Connections</h2>
<div class="settings section require-manage-connections" id="connections">
<h3 class="require-manage-users">Users</h3>
<div class="settings section require-manage-users" id="users">
<p>
Click or tap on a connection below to manage that connection.
Depending on your access level, connections can be added and
deleted, and their properties (protocol, hostname, port, etc.)
can be changed.
</p>
<div id="connection-add-form">
<div class="icon connection add"/><select id="protocol"><option value="vnc">VNC</option><option value="rdp">RDP</option></select><input type="text" id="connection-id" class="name" placeholder="Add connection"/><button id="add-connection">Add</button>
</div>
<div id="connection-list">
</div>
<p>
Click or tap on a user below to manage that user. Depending
on your access level, users can be added and deleted, and their
passwords can be changed.
</p>
<div id="user-add-form">
<div class="icon user add"/><input type="text" class="name" id="username" placeholder="Add user"/><button id="add-user">Add</button>
</div>
<div id="user-list">
</div>
</div>
<h3 class="require-manage-connections">Connections</h3>
<div class="settings section require-manage-connections" id="connections">
<p>
Click or tap on a connection below to manage that connection.
Depending on your access level, connections can be added and
deleted, and their properties (protocol, hostname, port, etc.)
can be changed.
</p>
<div id="connection-add-form">
<div class="icon connection add"/><select id="protocol"><option value="vnc">VNC</option><option value="rdp">RDP</option></select><input type="text" id="connection-id" class="name" placeholder="Add connection"/><button id="add-connection">Add</button>
</div>
<div id="connection-list">
</div>
</div>
</div>
<div id="version-dialog">
@@ -76,312 +84,9 @@
<script type="text/javascript" src="scripts/session.js"></script>
<script type="text/javascript" src="scripts/guac-ui.js"></script>
<script type="text/javascript" src="scripts/admin.js"></script>
<script type="text/javascript" src="scripts/service.js"></script>
<script type="text/javascript" src="scripts/history.js"></script>
<script type="text/javascript"><![CDATA[
function hasEntry(object) {
for (var name in object)
return true;
return false;
}
// Elements
var connection_list = document.getElementById("connection-list");
var user_list = document.getElementById("user-list");
var add_connection = document.getElementById("add-connection");
var connection_id = document.getElementById("connection-id");
var protocol = document.getElementById("protocol");
var add_user = document.getElementById("add-user");
var username = document.getElementById("username");
function reset_admin_ui() {
/*
* Show admin elements if admin permissions available
*/
// Get permissions
var permissions = GuacamoleService.Permissions.list();
// Connection management
if (permissions.create_connection
|| hasEntry(permissions.update_connection)
|| hasEntry(permissions.remove_connection)
|| hasEntry(permissions.administer_connection))
GuacUI.addClass(document.body, "manage-connections");
else
GuacUI.removeClass(document.body, "manage-connections");
// User management
if (permissions.create_user
|| hasEntry(permissions.update_user)
|| hasEntry(permissions.remove_user)
|| hasEntry(permissions.administer_user))
GuacUI.addClass(document.body, "manage-users");
else
GuacUI.removeClass(document.body, "manage-users");
// Connection creation
if (permissions.create_connection) {
GuacUI.addClass(document.body, "add-connections");
add_connection.onclick = function() {
// Try to create connection
try {
var connection = new GuacamoleService.Connection(
protocol.value, connection_id.value);
GuacamoleService.Connections.create(connection);
connection_id.value = "";
reset_admin_ui();
}
// Alert on failure
catch (e) {
alert(e.message);
}
};
}
// User creation
if (permissions.create_user) {
GuacUI.addClass(document.body, "add-users");
add_user.onclick = function() {
// Attempt to create user
try {
GuacamoleService.Users.create(username.value);
username.value = "";
reset_admin_ui();
}
// Alert on failure
catch (e) {
alert(e.message);
}
};
}
/*
* Add readable users.
*/
var name;
var selected_user = null;
// Add users to list
user_list.innerHTML = "";
for (name in permissions.read_user) {(function(name){
var item = new GuacAdmin.ListItem("user", name);
var item_element = item.getElement();
user_list.appendChild(item_element);
item_element.onclick = function() {
// Ignore clicks if any item is selected
if (selected_user) return;
else selected_user = name;
// Get user permissions
var user_perms = GuacamoleService.Permissions.list(name);
// Load buttons
var buttons = [new GuacAdmin.Button("Save"),
new GuacAdmin.Button("Cancel")];
if (name in permissions.remove_user)
buttons.push(new GuacAdmin.Button("Delete"));
// User property form.
var user_properties = new GuacAdmin.Form(
/* Fields */
[new GuacAdmin.Field.PASSWORD("Password:", [],
["f12a1930-7195-11e2-bcfd-0800200c9a66"]),
new GuacAdmin.Field.PASSWORD("Re-enter Password:", [],
["f12a1930-7195-11e2-bcfd-0800200c9a66"]),
new GuacAdmin.Field.LIST("Connections:",
Object.keys(permissions.administer_connection),
Object.keys(user_perms.read_connection))],
/* Buttons */
buttons
);
// Select
GuacUI.addClass(user_list, "disabled");
GuacUI.addClass(item_element, "selected");
// Handle buttons
user_properties.onaction = function(title, fields) {
try {
if (title == "Save") {
// Get passwords
var password = fields[0][0];
var reentered_password = fields[1][0];
// Check that passwords match
if (password != reentered_password)
throw new Error("Passwords do not match.");
// Do not update password if it's just the
// not-changed token
if (password == "f12a1930-7195-11e2-bcfd-0800200c9a66")
password = null;
// Set user permissions
user_perms.read_connection = {};
var connections = fields[2];
for (var i=0; i<connections.length; i++)
user_perms.read_connection[connections[i]] = true;
// Save user
GuacamoleService.Users.update(
selected_user, password, user_perms);
reset_admin_ui();
}
else if (title == "Delete") {
GuacamoleService.Users.remove(selected_user);
reset_admin_ui();
}
// Deselect
GuacUI.removeClass(user_list, "disabled");
GuacUI.removeClass(item_element, "selected");
item_element.removeChild(user_properties.getElement());
selected_user = null;
}
catch (e) {
alert(e.message);
}
};
item_element.appendChild(user_properties.getElement());
};
})(name)};
/*
* Add readable connections.
*/
var selected_connection = null;
var connections = GuacamoleService.Connections.list();
// Add connections to list
connection_list.innerHTML = "";
for (i=0; i<connections.length; i++) {(function(connection){
var item = new GuacAdmin.ListItem("connection", connection.id);
var item_element = item.getElement();
connection_list.appendChild(item_element);
item_element.onclick = function() {
// Ignore clicks if any item is selected
if (selected_connection) return;
else selected_connection = connection.id;
// Load buttons
var buttons = [new GuacAdmin.Button("Save"),
new GuacAdmin.Button("Cancel")];
var fields = [];
if (connection.id in permissions.remove_connection)
buttons.push(new GuacAdmin.Button("Delete"));
// FIXME: Actually generate form from properties
// Connection property form.
var connection_properties = new GuacAdmin.Form(
/* Fields */
[new GuacAdmin.Field.TEXT("Hostname:", [],
[connection.parameters.hostname || ""]),
new GuacAdmin.Field.TEXT("Port:", [],
[connection.parameters.port || ""])],
/* Buttons */
buttons
);
// Select
GuacUI.addClass(connection_list, "disabled");
GuacUI.addClass(item_element, "selected");
// Handle buttons
connection_properties.onaction = function(title, fields) {
try {
if (title == "Save") {
// Get fields (FIXME: Actually implement)
var hostname = fields[0][0];
var port = fields[1][0];
// Update fields
connection.parameters.hostname = hostname;
connection.parameters.port = port;
// Save connection
GuacamoleService.Connections.update(connection);
reset_admin_ui();
}
else if (title == "Delete") {
GuacamoleService.Connections.remove(selected_connection);
reset_admin_ui();
}
// Deselect
GuacUI.removeClass(connection_list, "disabled");
GuacUI.removeClass(item_element, "selected");
item_element.removeChild(connection_properties.getElement());
selected_connection = null;
}
catch (e) {
alert(e.message);
}
};
item_element.appendChild(connection_properties.getElement());
};
})(connections[i])};
}
// Initial load
reset_admin_ui();
]]></script>
<script type="text/javascript" src="scripts/admin-ui.js"></script>
</body>

View File

@@ -17,10 +17,30 @@
*/
/**
* Main Guacamole admin namespace.
* @namespace
* General set of UI elements and UI-related functions regarding
* administration.
*/
var GuacAdmin = GuacAdmin || {};
var GuacAdmin = {
"lists" : {
"connection_list" : document.getElementById("connection-list"),
"user_list" : document.getElementById("user-list")
},
"buttons" : {
"back" : document.getElementById("back"),
"logout" : document.getElementById("logout"),
"add_connection" : document.getElementById("add-connection"),
"add_user" : document.getElementById("add-user")
},
"fields" : {
"connection_id" : document.getElementById("connection-id"),
"protocol" : document.getElementById("protocol"),
"username" : document.getElementById("username")
}
};
/**
* An arbitrary input field.
@@ -554,4 +574,314 @@ GuacAdmin.UserManager = function() {
*/
this.onsave = null;
};
};
/*
* Set handler for logout
*/
GuacAdmin.buttons.logout.onclick = function() {
window.location.href = "logout";
};
/*
* Set handler for back button
*/
GuacAdmin.buttons.back.onclick = function() {
window.location.href = "index.xhtml";
};
/**
* Returns whether the given object has at least one property.
*/
GuacAdmin.hasEntry = function(object) {
for (var name in object)
return true;
return false;
};
GuacAdmin.reset = function() {
/*
* Show admin elements if admin permissions available
*/
// Get permissions
var permissions = GuacamoleService.Permissions.list();
// Connection management
if (permissions.create_connection
|| GuacAdmin.hasEntry(permissions.update_connection)
|| GuacAdmin.hasEntry(permissions.remove_connection)
|| GuacAdmin.hasEntry(permissions.administer_connection))
GuacUI.addClass(document.body, "manage-connections");
else
GuacUI.removeClass(document.body, "manage-connections");
// User management
if (permissions.create_user
|| GuacAdmin.hasEntry(permissions.update_user)
|| GuacAdmin.hasEntry(permissions.remove_user)
|| GuacAdmin.hasEntry(permissions.administer_user))
GuacUI.addClass(document.body, "manage-users");
else
GuacUI.removeClass(document.body, "manage-users");
// Connection creation
if (permissions.create_connection) {
GuacUI.addClass(document.body, "add-connections");
GuacAdmin.buttons.add_connection.onclick = function() {
// Try to create connection
try {
var connection = new GuacamoleService.Connection(
GuacAdmin.fields.protocol.value, GuacAdmin.fields.connection_id.value);
GuacamoleService.Connections.create(connection);
GuacAdmin.fields.connection_id.value = "";
GuacAdmin.reset();
}
// Alert on failure
catch (e) {
alert(e.message);
}
};
}
// User creation
if (permissions.create_user) {
GuacUI.addClass(document.body, "add-users");
GuacAdmin.buttons.add_user.onclick = function() {
// Attempt to create user
try {
GuacamoleService.Users.create(GuacAdmin.fields.username.value);
GuacAdmin.fields.username.value = "";
GuacAdmin.reset();
}
// Alert on failure
catch (e) {
alert(e.message);
}
};
}
/*
* Add readable users.
*/
var name;
var selected_user = null;
// Add users to list
GuacAdmin.lists.user_list.innerHTML = "";
for (name in permissions.read_user) {(function(name){
var item = new GuacAdmin.ListItem("user", name);
var item_element = item.getElement();
GuacAdmin.lists.user_list.appendChild(item_element);
item_element.onclick = function() {
// Ignore clicks if any item is selected
if (selected_user) return;
else selected_user = name;
// Get user permissions
var user_perms = GuacamoleService.Permissions.list(name);
// Load buttons
var buttons = [new GuacAdmin.Button("Save"),
new GuacAdmin.Button("Cancel")];
if (name in permissions.remove_user)
buttons.push(new GuacAdmin.Button("Delete"));
// User property form.
var user_properties = new GuacAdmin.Form(
/* Fields */
[new GuacAdmin.Field.PASSWORD("Password:", [],
["f12a1930-7195-11e2-bcfd-0800200c9a66"]),
new GuacAdmin.Field.PASSWORD("Re-enter Password:", [],
["f12a1930-7195-11e2-bcfd-0800200c9a66"]),
new GuacAdmin.Field.LIST("Connections:",
Object.keys(permissions.administer_connection),
Object.keys(user_perms.read_connection))],
/* Buttons */
buttons
);
// Select
GuacUI.addClass(GuacAdmin.lists.user_list, "disabled");
GuacUI.addClass(item_element, "selected");
// Handle buttons
user_properties.onaction = function(title, fields) {
try {
if (title == "Save") {
// Get passwords
var password = fields[0][0];
var reentered_password = fields[1][0];
// Check that passwords match
if (password != reentered_password)
throw new Error("Passwords do not match.");
// Do not update password if it's just the
// not-changed token
if (password == "f12a1930-7195-11e2-bcfd-0800200c9a66")
password = null;
// Set user permissions
user_perms.read_connection = {};
var connections = fields[2];
for (var i=0; i<connections.length; i++)
user_perms.read_connection[connections[i]] = true;
// Save user
GuacamoleService.Users.update(
selected_user, password, user_perms);
GuacAdmin.reset();
}
else if (title == "Delete") {
GuacamoleService.Users.remove(selected_user);
GuacAdmin.reset();
}
// Deselect
GuacUI.removeClass(GuacAdmin.lists.user_list, "disabled");
GuacUI.removeClass(item_element, "selected");
item_element.removeChild(user_properties.getElement());
selected_user = null;
}
catch (e) {
alert(e.message);
}
};
item_element.appendChild(user_properties.getElement());
};
})(name)};
/*
* Add readable connections.
*/
var selected_connection = null;
var connections = GuacamoleService.Connections.list();
// Add connections to list
GuacAdmin.lists.connection_list.innerHTML = "";
for (i=0; i<connections.length; i++) {(function(connection){
var item = new GuacAdmin.ListItem("connection", connection.id);
var item_element = item.getElement();
GuacAdmin.lists.connection_list.appendChild(item_element);
item_element.onclick = function() {
// Ignore clicks if any item is selected
if (selected_connection) return;
else selected_connection = connection.id;
// Load buttons
var buttons = [new GuacAdmin.Button("Save"),
new GuacAdmin.Button("Cancel")];
var fields = [];
if (connection.id in permissions.remove_connection)
buttons.push(new GuacAdmin.Button("Delete"));
// FIXME: Actually generate form from properties
// Connection property form.
var connection_properties = new GuacAdmin.Form(
/* Fields */
[new GuacAdmin.Field.TEXT("Hostname:", [],
[connection.parameters.hostname || ""]),
new GuacAdmin.Field.TEXT("Port:", [],
[connection.parameters.port || ""])],
/* Buttons */
buttons
);
// Select
GuacUI.addClass(GuacAdmin.lists.connection_list, "disabled");
GuacUI.addClass(item_element, "selected");
// Handle buttons
connection_properties.onaction = function(title, fields) {
try {
if (title == "Save") {
// Get fields (FIXME: Actually implement)
var hostname = fields[0][0];
var port = fields[1][0];
// Update fields
connection.parameters.hostname = hostname;
connection.parameters.port = port;
// Save connection
GuacamoleService.Connections.update(connection);
GuacAdmin.reset();
}
else if (title == "Delete") {
GuacamoleService.Connections.remove(selected_connection);
GuacAdmin.reset();
}
// Deselect
GuacUI.removeClass(GuacAdmin.lists.connection_list, "disabled");
GuacUI.removeClass(item_element, "selected");
item_element.removeChild(connection_properties.getElement());
selected_connection = null;
}
catch (e) {
alert(e.message);
}
};
item_element.appendChild(connection_properties.getElement());
};
})(connections[i])};
};
// Initial load
GuacAdmin.reset();

View File

@@ -350,3 +350,9 @@ body:not(.add-connections) #connection-add-form {
body:not(.add-users) #user-add-form {
display: none;
}
div#logout-panel {
padding: 0.45em;
text-align: right;
float: right;
}