From 0c94ba29071102bcbf608ee3c076d994c313482f Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Tue, 13 Aug 2013 12:30:03 -0700
Subject: [PATCH] Partially migrate to GuacUI.Dialog for user editing (via new
 GuacAdmin.UserEditor). Modify styles to support GuacUI.Dialog.

---
 guacamole/src/main/webapp/scripts/admin-ui.js | 614 +++++++++---------
 guacamole/src/main/webapp/styles/ui.css       |  77 ++-
 2 files changed, 359 insertions(+), 332 deletions(-)

diff --git a/guacamole/src/main/webapp/scripts/admin-ui.js b/guacamole/src/main/webapp/scripts/admin-ui.js
index 79df4a084..c144a234b 100644
--- a/guacamole/src/main/webapp/scripts/admin-ui.js
+++ b/guacamole/src/main/webapp/scripts/admin-ui.js
@@ -26,7 +26,6 @@ var GuacAdmin = {
         "connection_list"         : document.getElementById("connection-list"),
         "user_list"               : document.getElementById("user-list"),
         "user_list_buttons"       : document.getElementById("user-list-buttons"),
-        "connection_list_buttons" : document.getElementById("connection-list-buttons")
     },
 
     "buttons" : {
@@ -43,7 +42,7 @@ var GuacAdmin = {
 
     "cached_permissions" : null,
     "cached_protocols"   : null,
-    "cached_connections" : null,
+    "cached_root_group"  : null,
 
     "selected_user"       : null,
     "selected_connection" : null
@@ -362,299 +361,305 @@ GuacAdmin.addUser = function(name, parameters) {
         if (GuacAdmin.selected_user) return;
         else GuacAdmin.selected_user = name;
 
-        // Get user permissions
-        var user_perms = GuacamoleService.Permissions.list(name, parameters);
-
-        // Permission deltas
-        var added_perms   = new GuacamoleService.PermissionSet();
-        var removed_perms = new GuacamoleService.PermissionSet();
-
-        // Create form base elements
-        var form_element = GuacUI.createElement("div", "form");
-        var user_header = GuacUI.createChildElement(form_element, "h2");
-        var sections = GuacUI.createChildElement(
-            GuacUI.createChildElement(form_element, "div", "settings section"),
-            "dl");
-
-        var field_header = GuacUI.createChildElement(sections, "dt");
-        var field_table  = GuacUI.createChildElement(
-            GuacUI.createChildElement(sections, "dd"),
-            "table", "fields section");
-
-        user_header.textContent = name;
-        field_header.textContent = "Properties:";
-
-        // Deselect
-        function deselect() {
-            GuacUI.removeClass(GuacAdmin.containers.user_list, "disabled");
-            GuacUI.removeClass(item_element, "selected");
-            item_element.removeChild(form_element);
-            GuacAdmin.selected_user = null;
-        }
-
-        // Select
-        function select() {
-            GuacUI.addClass(GuacAdmin.containers.user_list, "disabled");
-            GuacUI.addClass(item_element, "selected");
-            item_element.appendChild(form_element);
-        }
-
-        // Add password field
-        var password_field = GuacUI.createChildElement(
-                GuacUI.createTabulatedContainer(field_table, "Password:"),
-                "input");
-        password_field.setAttribute("type",  "password");
-        password_field.setAttribute("value", "password");
-            
-        // 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");
-
-        // Update password if changed
-        var password_modified = false;
-        password_field.onchange =
-        reenter_password_field.onchange = function() {
-            password_modified = true;
-        };
-
-        // If administrator, allow manipulation of admin permissions on users
-        if (GuacAdmin.cached_permissions.administer) {
-
-            var permission_header = GuacUI.createChildElement(sections, "dt");
-            var permission_table  = GuacUI.createChildElement(
-                GuacUI.createChildElement(sections, "dd"),
-                "table", "permissions section");
-
-            permission_header.textContent = "Permissions:";
-
-            // Add system administration checkbox
-            var is_admin = GuacUI.createChildElement(
-                    GuacUI.createTabulatedContainer(permission_table, "Administer system:"),
-                    "input");
-            is_admin.setAttribute("type", "checkbox");
-            is_admin.setAttribute("value", "administer");
-
-            // Check if set
-            if (user_perms.administer)
-                is_admin.checked = true;
-
-            // Add create user permission checkbox
-            var create_users = GuacUI.createChildElement(
-                    GuacUI.createTabulatedContainer(permission_table, "Create new users:"),
-                    "input");
-            create_users.setAttribute("type", "checkbox");
-            create_users.setAttribute("value",  "create_user");
-
-            // Check if set
-            if (user_perms.create_user)
-                create_users.checked = true;
-
-            // Add create connection permission checkbox
-            var create_connections = GuacUI.createChildElement(
-                    GuacUI.createTabulatedContainer(permission_table, "Create new connections:"),
-                    "input");
-            create_connections.setAttribute("type", "checkbox");
-            create_connections.setAttribute("value", "create_connection");
-
-            // Check if set
-            if (user_perms.create_connection)
-                create_connections.checked = true;
-
-            // Update system permissions when changed
-            is_admin.onclick = create_users.onclick =
-            create_connections.onclick = function() {
-
-                // Update permission deltas for ADDED permission
-                if (this.checked) {
-                    added_perms[this.value]   = true;
-                    removed_perms[this.value] = false;
-                }
-
-                // Update permission deltas for REMOVED permission
-                else {
-                    added_perms[this.value]   = false;
-                    removed_perms[this.value] = true;
-                }
-
-            }
-
-        }
-
-        // If readable connections exist, list them
-        if (GuacAdmin.cached_permissions.administer ||
-            GuacAdmin.hasEntry(GuacAdmin.cached_permissions.administer_connection)) {
-
-            // Add fields for per-connection checkboxes
-            var connections_header = GuacUI.createChildElement(sections, "dt");
-            connections_header.textContent = "Connections:";
-
-            var connections_section = GuacUI.createChildElement(sections, "dd");
-
-            // Actual paged connections list
-            var connections = GuacUI.createChildElement(
-                connections_section, "div", "list");
-
-            // Button div
-            var connections_buttons = GuacUI.createChildElement(
-                connections_section, "div", "list-pager-buttons");
-
-            // Create pager which populates list
-            var connections_pager = new GuacUI.Pager(connections);
-
-            // Add connections to pager
-            var available_connections = GuacAdmin.cached_connections;
-            for (var i=0; i<available_connections.length; i++) {
-
-                // If no admin permission, do not list connection
-                var conn = available_connections[i].id;
-                if (!GuacAdmin.cached_permissions.administer &&
-                        !(conn in GuacAdmin.cached_permissions.administer_connection))
-                    continue;
-
-                var connection       = GuacUI.createElement("div", "connection");
-                var connection_field = GuacUI.createChildElement(connection, "input");
-                var connection_name  = GuacUI.createChildElement(connection, "span", "name");
-
-                connection_field.setAttribute("type", "checkbox");
-                connection_field.setAttribute("value", conn);
-
-                // Check checkbox if connection readable by selected user
-                if (conn in user_perms.read_connection)
-                    connection_field.checked = true;
-
-                // Update selected connections when changed
-                connection_field.onclick = connection_field.onchange = function() {
-
-                    // Update permission deltas for ADDED permission
-                    if (this.checked) {
-                        added_perms.read_connection[this.value] = true;
-                        if (removed_perms.read_connection[this.value])
-                            delete removed_perms.read_connection[this.value];
-                        
-                    }
-
-                    // Update permission deltas for REMOVED permission
-                    else {
-                        removed_perms.read_connection[this.value] = true;
-                        if (added_perms.read_connection[this.value])
-                            delete added_perms.read_connection[this.value];
-                    }
-
-                };
-
-                connection_name.textContent = conn;
-                connections_pager.addElement(connection);
-
-            }
-
-            // If more than one page, show buttons
-            if (connections_pager.last_page != 0)
-                connections_buttons.appendChild(connections_pager.getElement());
-
-            // Start at page 0
-            connections_pager.setPage(0);
-
-        }
-
-        // Add buttons
-        var button_div = GuacUI.createChildElement(form_element, "div", "object-buttons");
-
-        // Add save button
-        var save_button = GuacUI.createChildElement(button_div, "button");
-        save_button.textContent = "Save";
-        save_button.onclick = function(e) {
-
-            e.stopPropagation();
-
-            try {
-
-                // If password modified, use password given
-                var password;
-                if (password_modified) {
-
-                    // Get passwords
-                    password = password_field.value;
-                    var reentered_password = reenter_password_field.value;
-
-                    // Check that passwords match
-                    if (password != reentered_password)
-                        throw new Error("Passwords do not match.");
-
-                }
-
-                // Otherwise, do not change password
-                else
-                    password = null;
-
-                // Save user
-                GuacamoleService.Users.update(GuacAdmin.selected_user, password, added_perms, removed_perms, parameters);
-                deselect();
-                GuacAdmin.reset();
-
-            }
-            catch (e) {
-                alert(e.message);
-            }
-
-        };
-
-        // 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 (GuacAdmin.cached_permissions.administer ||
-            name in GuacAdmin.cached_permissions.remove_user) {
-            
-            // Create button
-            var delete_button = GuacUI.createChildElement(button_div, "button", "danger");
-            delete_button.textContent = "Delete";
-            
-            // Remove selected user when clicked
-            delete_button.onclick = function(e) {
-
-                e.stopPropagation();
-
-                // Delete user upon confirmation
-                if (confirm("Are you sure you want to delete the user \""
-                            + name + "\"?")) {
-
-                    // Attempt to delete user
-                    try {
-                        GuacamoleService.Users.remove(GuacAdmin.selected_user, parameters);
-                        deselect();
-                        GuacAdmin.reset();
-                    }
-
-                    // Alert on failure
-                    catch (e) {
-                        alert(e.message);
-                    }
-
-                }
-
-            };
-
-        }
-
-        // Select item
-        select();
+        // Open user editor
+        var user_dialog = new GuacAdmin.UserEditor(name, parameters);
+        document.body.appendChild(user_dialog.getElement());
 
     };
 
 };
 
+
 /**
- * Currently-defined pager for connections, if any.
+ * User edit dialog which allows editing of the user's password and connection
+ * access level.
+ * 
+ * @param {String} name The name of the user to edit.
+ * @param {String} parameters Any parameters to add to service requests for sake
+ *                            of authentication.
  */
-GuacAdmin.connectionPager = null;
+GuacAdmin.UserEditor = function(name, parameters) {
+
+    /**
+     * Dialog containing the user editor.
+     */
+    var dialog = new GuacUI.Dialog();
+
+    // Get user permissions
+    var user_perms = GuacamoleService.Permissions.list(name, parameters);
+
+    // Permission deltas
+    var added_perms   = new GuacamoleService.PermissionSet();
+    var removed_perms = new GuacamoleService.PermissionSet();
+
+    // Create form base elements
+    var user_header = GuacUI.createChildElement(dialog.getHeader(), "h2");
+    var form_element = GuacUI.createChildElement(dialog.getBody(), "div", "form");
+    var sections = GuacUI.createChildElement(
+        GuacUI.createChildElement(form_element, "div", "settings section"),
+        "dl");
+
+    var field_header = GuacUI.createChildElement(sections, "dt");
+    var field_table  = GuacUI.createChildElement(
+        GuacUI.createChildElement(sections, "dd"),
+        "table", "fields section");
+
+    user_header.textContent = name;
+    field_header.textContent = "Properties:";
+
+    // Add password field
+    var password_field = GuacUI.createChildElement(
+            GuacUI.createTabulatedContainer(field_table, "Password:"),
+            "input");
+    password_field.setAttribute("type",  "password");
+    password_field.setAttribute("value", "password");
+        
+    // 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");
+
+    // Update password if changed
+    var password_modified = false;
+    password_field.onchange =
+    reenter_password_field.onchange = function() {
+        password_modified = true;
+    };
+
+    // If administrator, allow manipulation of admin permissions on users
+    if (GuacAdmin.cached_permissions.administer) {
+
+        var permission_header = GuacUI.createChildElement(sections, "dt");
+        var permission_table  = GuacUI.createChildElement(
+            GuacUI.createChildElement(sections, "dd"),
+            "table", "permissions section");
+
+        permission_header.textContent = "Permissions:";
+
+        // Add system administration checkbox
+        var is_admin = GuacUI.createChildElement(
+                GuacUI.createTabulatedContainer(permission_table, "Administer system:"),
+                "input");
+        is_admin.setAttribute("type", "checkbox");
+        is_admin.setAttribute("value", "administer");
+
+        // Check if set
+        if (user_perms.administer)
+            is_admin.checked = true;
+
+        // Add create user permission checkbox
+        var create_users = GuacUI.createChildElement(
+                GuacUI.createTabulatedContainer(permission_table, "Create new users:"),
+                "input");
+        create_users.setAttribute("type", "checkbox");
+        create_users.setAttribute("value",  "create_user");
+
+        // Check if set
+        if (user_perms.create_user)
+            create_users.checked = true;
+
+        // Add create connection permission checkbox
+        var create_connections = GuacUI.createChildElement(
+                GuacUI.createTabulatedContainer(permission_table, "Create new connections:"),
+                "input");
+        create_connections.setAttribute("type", "checkbox");
+        create_connections.setAttribute("value", "create_connection");
+
+        // Check if set
+        if (user_perms.create_connection)
+            create_connections.checked = true;
+
+        // Update system permissions when changed
+        is_admin.onclick = create_users.onclick =
+        create_connections.onclick = function() {
+
+            // Update permission deltas for ADDED permission
+            if (this.checked) {
+                added_perms[this.value]   = true;
+                removed_perms[this.value] = false;
+            }
+
+            // Update permission deltas for REMOVED permission
+            else {
+                added_perms[this.value]   = false;
+                removed_perms[this.value] = true;
+            }
+
+        }
+
+    }
+
+    // If readable connections exist, list them
+    if (GuacAdmin.cached_permissions.administer ||
+        GuacAdmin.hasEntry(GuacAdmin.cached_permissions.administer_connection)) {
+
+        // Add fields for per-connection checkboxes
+        var connections_header = GuacUI.createChildElement(sections, "dt");
+        connections_header.textContent = "Connections:";
+
+        var connections_section = GuacUI.createChildElement(sections, "dd");
+
+        // FIXME - only list connections with admin permission
+        var group_view = new GuacUI.GroupView(GuacAdmin.cached_root_group, true);
+        connections_section.appendChild(group_view.getElement());
+
+        /*
+        // Actual paged connections list
+        var connections = GuacUI.createChildElement(
+            connections_section, "div", "list");
+
+        // Button div
+        var connections_buttons = GuacUI.createChildElement(
+            connections_section, "div", "list-pager-buttons");
+
+        // Create pager which populates list
+        var connections_pager = new GuacUI.Pager(connections);
+
+        // Add connections to pager
+        var available_connections = GuacAdmin.cached_connections;
+        for (var i=0; i<available_connections.length; i++) {
+
+            // If no admin permission, do not list connection
+            var conn = available_connections[i].id;
+            if (!GuacAdmin.cached_permissions.administer &&
+                    !(conn in GuacAdmin.cached_permissions.administer_connection))
+                continue;
+
+            var connection       = GuacUI.createElement("div", "connection");
+            var connection_field = GuacUI.createChildElement(connection, "input");
+            var connection_name  = GuacUI.createChildElement(connection, "span", "name");
+
+            connection_field.setAttribute("type", "checkbox");
+            connection_field.setAttribute("value", conn);
+
+            // Check checkbox if connection readable by selected user
+            if (conn in user_perms.read_connection)
+                connection_field.checked = true;
+
+            // Update selected connections when changed
+            connection_field.onclick = connection_field.onchange = function() {
+
+                // Update permission deltas for ADDED permission
+                if (this.checked) {
+                    added_perms.read_connection[this.value] = true;
+                    if (removed_perms.read_connection[this.value])
+                        delete removed_perms.read_connection[this.value];
+                    
+                }
+
+                // Update permission deltas for REMOVED permission
+                else {
+                    removed_perms.read_connection[this.value] = true;
+                    if (added_perms.read_connection[this.value])
+                        delete added_perms.read_connection[this.value];
+                }
+
+            };
+
+            connection_name.textContent = conn;
+            connections_pager.addElement(connection);
+
+        }
+
+        // If more than one page, show buttons
+        if (connections_pager.last_page != 0)
+            connections_buttons.appendChild(connections_pager.getElement());
+
+        // Start at page 0
+        connections_pager.setPage(0);
+        */
+
+    }
+
+    // Add save button
+    var save_button = GuacUI.createChildElement(dialog.getFooter(), "button");
+    save_button.textContent = "Save";
+    save_button.onclick = function(e) {
+
+        e.stopPropagation();
+
+        try {
+
+            // If password modified, use password given
+            var password;
+            if (password_modified) {
+
+                // Get passwords
+                password = password_field.value;
+                var reentered_password = reenter_password_field.value;
+
+                // Check that passwords match
+                if (password != reentered_password)
+                    throw new Error("Passwords do not match.");
+
+            }
+
+            // Otherwise, do not change password
+            else
+                password = null;
+
+            // Save user
+            GuacamoleService.Users.update(GuacAdmin.selected_user, password, added_perms, removed_perms, parameters);
+            // FIXME: Hide dialog
+            GuacAdmin.reset();
+
+        }
+        catch (e) {
+            alert(e.message);
+        }
+
+    };
+
+    // Add cancel button
+    var cancel_button = GuacUI.createChildElement(dialog.getFooter(), "button");
+    cancel_button.textContent = "Cancel";
+    cancel_button.onclick = function(e) {
+        e.stopPropagation();
+        // FIXME: Hide dialog
+    };
+
+    // Add delete button if permission available
+    if (GuacAdmin.cached_permissions.administer ||
+        name in GuacAdmin.cached_permissions.remove_user) {
+        
+        // Create button
+        var delete_button = GuacUI.createChildElement(dialog.getFooter(), "button", "danger");
+        delete_button.textContent = "Delete";
+        
+        // Remove selected user when clicked
+        delete_button.onclick = function(e) {
+
+            e.stopPropagation();
+
+            // Delete user upon confirmation
+            if (confirm("Are you sure you want to delete the user \""
+                        + name + "\"?")) {
+
+                // Attempt to delete user
+                try {
+                    GuacamoleService.Users.remove(GuacAdmin.selected_user, parameters);
+                    // FIXME: Hide dialog
+                    GuacAdmin.reset();
+                }
+
+                // Alert on failure
+                catch (e) {
+                    alert(e.message);
+                }
+
+            }
+
+        };
+
+    }
+
+    this.getElement = function() {
+        return dialog.getElement();
+    };
+
+};
 
 /**
  * Adds the given connection to the displayed connection list.
@@ -970,10 +975,7 @@ GuacAdmin.reset = function() {
     // Query service for permissions, protocols, and connections
     GuacAdmin.cached_permissions = GuacamoleService.Permissions.list(null, parameters);
     GuacAdmin.cached_protocols   = GuacamoleService.Protocols.list(parameters);
-    GuacAdmin.cached_connections = GuacamoleService.Connections.list(parameters);
-
-    // Sort connections by ID
-    GuacAdmin.cached_connections.sort(GuacamoleService.Connections.comparator);
+    GuacAdmin.cached_root_group  = GuacamoleService.Connections.list(parameters);
 
     // Connection management
     if (GuacAdmin.cached_permissions.administer
@@ -1079,32 +1081,10 @@ GuacAdmin.reset = function() {
      * Add readable connections.
      */
 
-    // Get previous page, if any
-    var connection_previous_page = 0;
-    if (GuacAdmin.connectionPager)
-        connection_previous_page = GuacAdmin.connectionPager.current_page;
-
-    // Add new pager
+    // Add new group view
     GuacAdmin.containers.connection_list.innerHTML = "";
-    GuacAdmin.connectionPager = new GuacUI.Pager(GuacAdmin.containers.connection_list);
-
-    // Add connections to pager
-    for (i=0; i<GuacAdmin.cached_connections.length; i++) {
-        var connection = GuacAdmin.cached_connections[i];
-        if (GuacAdmin.cached_permissions.administer
-            || connection.id in GuacAdmin.cached_permissions.update_connection)
-            GuacAdmin.addConnection(connection, parameters);
-    }
-
-    // If more than one page, add navigation buttons
-    GuacAdmin.containers.connection_list_buttons.innerHTML = "";
-    if (GuacAdmin.connectionPager.last_page != 0)
-        GuacAdmin.containers.connection_list_buttons.appendChild(
-            GuacAdmin.connectionPager.getElement());
-
-    // Set starting page
-    GuacAdmin.connectionPager.setPage(Math.min(GuacAdmin.connectionPager.last_page,
-            connection_previous_page));
+    var group_view = new GuacUI.GroupView(GuacAdmin.cached_root_group, false);
+    GuacAdmin.containers.connection_list.appendChild(group_view.getElement());
 
 };
 
diff --git a/guacamole/src/main/webapp/styles/ui.css b/guacamole/src/main/webapp/styles/ui.css
index 7485ec9ef..1fa796a1b 100644
--- a/guacamole/src/main/webapp/styles/ui.css
+++ b/guacamole/src/main/webapp/styles/ui.css
@@ -118,21 +118,6 @@ div#version-dialog {
     padding: 0.5em;
 }
 
-h2 {
-
-    padding: 0.5em;
-    margin: 0;
-    font-size: 1.5em;
-
-    font-weight: lighter;
-    text-shadow: 1px 1px white;
-
-    border-top: 1px solid #AAA;
-    border-bottom: 1px solid #AAA;
-    background: rgba(0, 0, 0, 0.07);
-    
-}
-
 h1 {
     
     margin: 0;
@@ -149,6 +134,66 @@ div.section {
     padding: 1em;
 }
 
+/*
+ * Dialogs
+ */
+
+.dialog-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 1em;
+}
+
+.dialog {
+
+    max-width: 100%;
+    width: 8in;
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 100%;
+    overflow: auto;
+
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    background: #E7E7E7;
+
+    -moz-border-radius: 0.2em;
+    -webkit-border-radius: 0.2em;
+    -khtml-border-radius: 0.2em;
+    border-radius: 0.2em;
+
+    box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.6);
+    
+}
+
+.dialog > * {
+    margin: 1em;
+}
+
+.dialog .header {
+
+    margin: 0;
+
+    border-top: 1px solid #AAA;
+    border-bottom: 1px solid #AAA;
+    background: rgba(0, 0, 0, 0.07);
+    
+}
+
+.dialog .header h2 {
+
+    padding: 0.5em;
+    margin: 0;
+    font-size: 1.5em;
+
+    font-weight: lighter;
+    text-shadow: 1px 1px white;
+
+}
+
 /*
  * List elements
  */
@@ -220,6 +265,7 @@ div.section {
  * List element fields (editing)
  */
 
+/*
 .form {
 
     position: absolute;
@@ -240,6 +286,7 @@ div.section {
     box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.6);
 
 }
+*/
 
 .form .fields th,
 .form .permissions th {