#268: Add "add" buttons to UI.

guacamole/src/main/webapp/admin.xhtml

@@ -33,8 +33,8 @@
 
         <h1>Administration</h1>
         
-        <h2>Users</h2>
+        <h2 class="require-manage-users">Users</h2>
-        <div class="settings section" id="users">
+        <div class="settings section require-manage-users" id="users">
 
             <p>
                 Click or tap on a user below to manage that user. Depending
@@ -48,10 +48,14 @@
             </div>
             -->
             
+            <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>
             
-        <h2>Connections</h2>
+        </div>
-        <div class="settings section" id="connections">
+
+        <h2 class="require-manage-connections">Connections</h2>
+        <div class="settings section require-manage-connections" id="connections">
 
             <p>
                 Click or tap on a connection below to manage that connection.
@@ -60,11 +64,9 @@
                 can be changed.
             </p>
 
-            <!--
+            <div id="connection-add-form">
-            <div class="connection">
+                <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="caption"><div class="protocol"><div class="icon add"/></div><span class="name"><input style="width: 20em; padding: 0.25em" type="text" placeholder="Add connection"/></span></div>
             </div>
-            -->
             
         </div>
 
@@ -80,51 +82,57 @@
 
         <script type="text/javascript"><![CDATA[
 
+            function hasEntry(object) {
+                for (var name in object)
+                    return true;
+                return false;
+            }
+
+            var connections = document.getElementById("connections");
             var users = document.getElementById("users");
 
-            var user_manager = new GuacAdmin.UserManager();
+            // Show admin elements if admin permissions available
-            users.appendChild(user_manager.getElement());
+            var permissions = GuacamoleService.Permissions.list();
 
-            function updateUsers() {
+            if (permissions.create_connection
-                var user_list = GuacamoleService.Users.list();
+                || hasEntry(permissions.update_connection)
-                user_manager.setUsers(user_list);
+                || hasEntry(permissions.remove_connection)
-            }
+                || hasEntry(permissions.administer_connection))
+                    GuacUI.addClass(document.body, "manage-connections");
 
-            user_manager.onsave = function(id, password, connections) {
+            if (permissions.create_user
-                updateUsers();
+                || hasEntry(permissions.update_user)
-                console.log(id, password, connections);
+                || hasEntry(permissions.remove_user)
-                return true;
+                || hasEntry(permissions.administer_user))
+                    GuacUI.addClass(document.body, "manage-users");
+
+            // Connection creation 
+            if (permissions.create_connection) {
+                GuacUI.addClass(document.body, "add-connections");
+
+                var add_connection = document.getElementById("add-connection");
+                var connection_id = document.getElementById("connection-id");
+                var protocol = document.getElementById("protocol");
+
+                add_connection.onclick = function() {
+                    var connection = new GuacamoleService.Connection(
+                        protocol.value, connection_id.value);
+                    GuacamoleService.Connections.create(connection);
                 };
 
-            user_manager.onadd = function(username) {
-
-                try {
-                    GuacamoleService.Users.create(username);
-                    updateUsers();
-                    return true;
-                }
-                catch (e) {
-                    alert("User \"" + username + "\" cannot be created: " + e.message);
-                    return false;
             }
 
+            // User creation
+            if (permissions.create_user) {
+                GuacUI.addClass(document.body, "add-users");
+
+                var add_user = document.getElementById("add-user");
+                var username = document.getElementById("username");
+                add_user.onclick = function() {
+                    GuacamoleService.Users.create(username.value);
                 };
 
-            user_manager.onremove = function(username) {
-
-                try {
-                    GuacamoleService.Users.remove(username);
-                    updateUsers();
-                    return true;
             }
-                catch (e) {
-                    alert("User \"" + username + "\" cannot be deleted: " + e.message);
-                    return false;
-                }
-
-            };
-
-            updateUsers();
 
         ]]></script>
 

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

@@ -325,10 +325,28 @@ div.section {
     font-size: 0.75em;
 }
 
-.user-list input.name {
+#connections input.name,
+#users input.name {
     max-width: 20em;
 }
 
-.user-list .add-user button {
+#connections #add-connection,
+#users #add-user {
     font-size: 0.8em;
 }
+
+body:not(.manage-connections) .require-manage-connections {
+    display: none;
+}
+
+body:not(.manage-users) .require-manage-users {
+    display: none;
+}
+
+body:not(.add-connections) #connection-add-form {
+    display: none;
+}
+
+body:not(.add-users) #user-add-form {
+    display: none;
+}