Ticket #268: More style improvements, removing use of GuacAdmin.Form. UI currently broken in transition.

guacamole/src/main/webapp/admin.xhtml

@@ -68,7 +68,7 @@
                 </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 class="icon connection add"/><input type="text" id="connection-id" class="name" placeholder="Add connection"/><button id="add-connection">Add</button>
                 </div>
                 
                 <div id="connection-list">

guacamole/src/main/webapp/scripts/admin-ui.js

@@ -387,6 +387,9 @@ GuacAdmin.reset = function() {
     // Get permissions
     var permissions = GuacamoleService.Permissions.list();
 
+    // Get protocols
+    var protocols = GuacamoleService.Protocols.list();
+
     // Connection management
     if (permissions.create_connection
         || GuacAdmin.hasEntry(permissions.update_connection)
@@ -462,10 +465,12 @@ GuacAdmin.reset = function() {
     GuacAdmin.lists.user_list.innerHTML = "";
     for (name in permissions.read_user) {(function(name){
 
+        // Create user list item
         var item = new GuacAdmin.ListItem("user", name);
         var item_element = item.getElement();
         GuacAdmin.lists.user_list.appendChild(item_element);
 
+        // When clicked, build and display property form
         item_element.onclick = function() {
 
             // Ignore clicks if any item is selected
@@ -475,87 +480,104 @@ GuacAdmin.reset = function() {
             // Get user permissions
             var user_perms = GuacamoleService.Permissions.list(name);
 
-            // Load buttons
-            var buttons = [new GuacAdmin.Button("Save"),
-                           new GuacAdmin.Button("Cancel")];
+            // Create form base elements
+            var form_element = GuacUI.createElement("div", "form");
+            var field_table  = GuacUI.createChildElement(form_element, "table", "fields");
+            var button_div = GuacUI.createChildElement(form_element, "div", "object-buttons");
 
-            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
-
-            );
+            // Deselect
+            function deselect() {
+                GuacUI.removeClass(GuacAdmin.lists.user_list, "disabled");
+                GuacUI.removeClass(item_element, "selected");
+                item_element.removeChild(form_element);
+                selected_user = null;
+            }
 
             // Select
-            GuacUI.addClass(GuacAdmin.lists.user_list, "disabled");
-            GuacUI.addClass(item_element, "selected");
+            function select() {
+                GuacUI.addClass(GuacAdmin.lists.user_list, "disabled");
+                GuacUI.addClass(item_element, "selected");
+                item_element.appendChild(form_element);
+            }
 
-            // Handle buttons
-            user_properties.onaction = function(title, fields) {
+            // Add password field
+            var password_field = GuacUI.createChildElement(
+                    GuacUI.createTabulatedContainer(field_table, "Password:"),
+                    "input");
+            password_field.setAttribute("type",  "password");
+            password_field.setAttribute("value", "password");
                 
-                try {
+            // Add password re-entry field
+            var reenter_password_field = GuacUI.createChildElement(
+                    GuacUI.createTabulatedContainer(field_table, "Re-enter Password:"),
+                    "input");
+            reenter_password_field.setAttribute("type",  "password");
+            reenter_password_field.setAttribute("value", "password");
 
-                    if (title == "Save") {
+            // Add save button
+            var save_button = GuacUI.createChildElement(button_div, "button");
+            save_button.textContent = "Save";
+            save_button.onclick = function(e) {
 
-                        // Get passwords
-                        var password = fields[0][0];
-                        var reentered_password = fields[1][0];
+                e.stopPropagation();
 
-                        // Check that passwords match
-                        if (password != reentered_password)
-                            throw new Error("Passwords do not match.");
+                // Get passwords
+                var password = undefined;           /* STUB */
+                var reentered_password = undefined; /* STUB */
 
-                        // Do not update password if it's just the
-                        // not-changed token
-                        if (password == "f12a1930-7195-11e2-bcfd-0800200c9a66")
-                            password = null;
+                // Check that passwords match
+                if (password != reentered_password)
+                    throw new Error("Passwords do not match.");
 
-                        // 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;
+                // Do not update password if it's just the
+                // not-changed token
+                if (password == "f12a1930-7195-11e2-bcfd-0800200c9a66")
+                    password = null;
 
-                        // Save user
-                        GuacamoleService.Users.update(
-                            selected_user, password, user_perms);
-                        GuacAdmin.reset();
+                // Set user permissions
+                user_perms.read_connection = {};
+                var connections = undefined; /* STUB (selected connections) */
+                for (var i=0; i<connections.length; i++)
+                    user_perms.read_connection[connections[i]] = true;
 
-                    }
-                    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);
-                }
+                // Save user
+                GuacamoleService.Users.update(
+                    selected_user, password, user_perms);
+                deselect();
+                GuacAdmin.reset();
 
             };
 
-            item_element.appendChild(user_properties.getElement());
+            // Add cancel button
+            var cancel_button = GuacUI.createChildElement(button_div, "button");
+            cancel_button.textContent = "Cancel";
+            cancel_button.onclick = function(e) {
+                e.stopPropagation();
+                deselect();
+            };
+
+            // Add delete button if permission available
+            if (name in permissions.remove_user) {
+                
+                // Create button
+                var delete_button = GuacUI.createChildElement(button_div, "button");
+                delete_button.textContent = "Delete";
+                
+                // Remove selected user when clicked
+                delete_button.onclick = function(e) {
+
+                    e.stopPropagation();
+
+                    GuacamoleService.Users.remove(selected_user);
+                    deselect();
+                    GuacAdmin.reset();
+
+                };
+
+            }
+
+            // Select item
+            select();
 
         };
 

guacamole/src/main/webapp/scripts/guac-ui.js

@@ -46,6 +46,23 @@ GuacUI.createChildElement = function(parent, tagname, classname) {
     return element;
 };
 
+/**
+ * Creates a new row within the given table having a single header cell
+ * with the given title, and a single value cell. The value cell is returned.
+ */
+GuacUI.createTabulatedContainer = function(table, title) {
+
+    // Create elements
+    var row    = GuacUI.createChildElement(table, "tr");
+    var header = GuacUI.createChildElement(row, "th");
+    var cell   = GuacUI.createChildElement(row, "td");
+
+    // Set title, return cell
+    header.textContent = title;
+    return cell;
+
+};
+
 /**
  * Adds the given CSS class to the given element.
  */

guacamole/src/main/webapp/scripts/service.js

@@ -554,3 +554,55 @@ GuacamoleService.Permissions = {
 
 };
 
+/**
+ * Collection of service functions which deal with protocols. Each function
+ * makes an explicit HTTP query to the server, and parses the response.
+ */
+GuacamoleService.Protocols = {
+
+     /**
+      * Returns an object describing the available protocols and all
+      * corresponding parameters, as well as hints regarding expected datatype
+      * and allowed/default values.
+      * 
+      * Note that this function is a stub returning a simple object until the
+      * corresponding server-side component is created.
+      *
+      * @param {String} parameters Any parameters which should be passed to the
+      *                            server for the sake of authentication
+      *                            (optional).
+      * @return {Object} An object describing all available protocols.
+      */   
+    "list" : function(parameters) {
+
+        // FIXME: STUB
+        return {
+
+            "vnc" : {
+
+                /* Display title */
+                "title" : "VNC",
+                
+                /* All available parameters */
+                "parameters" : {
+
+                    "hostname" : {
+                        "title" : "Hostname",
+                        "type"  : "text"
+                    },
+                    
+                    "port" : {
+                        "title" : "Port",
+                        "type"  : "text",
+                        "value" : "5900"
+                    }
+                    
+                }
+
+            }
+
+        };
+
+    }
+
+};

guacamole/src/main/webapp/styles/ui.css

@@ -38,6 +38,7 @@ input[type=text], input[type=password] {
     -khtml-border-radius: 0.2em;
     border-radius: 0.2em;
     width: 100%;
+    padding: 0.25em;
 }
 
 button {
@@ -220,7 +221,7 @@ div.section {
 
     position: absolute;
     display: inline-block;
-    vertical-align: top;
+    vertical-align: middle;
     z-index: 1;
 
     border: 1px solid rgba(0, 0, 0, 0.5);
@@ -240,7 +241,7 @@ div.section {
 .form .fields th {
     font-weight: normal;
     font-size: 0.8em;
-    vertical-align: top;
+    vertical-align: middle;
     text-align: left;
 }
 
@@ -275,6 +276,10 @@ div.section {
 
 }
 
+.form input {
+    width: auto;
+}
+
 /*
  * List element icons
  */