#268: Implement "Add" button in UserManager.

guacamole/src/main/webapp/admin.xhtml

@@ -90,6 +90,16 @@
                 return true;
             };
 
+            user_manager.onadd = function(username) {
+                user_manager.add(username);
+                return true;
+            };
+
+            user_manager.onremove = function(username) {
+                user_manager.remove(username);
+                return true;
+            };
+
         ]]></script>
 
     </body>

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

@@ -350,6 +350,28 @@ GuacAdmin.UserManager = function() {
      */
     var element = GuacUI.createElement("div", "user-list");
 
+    // Create connection display elements
+    var add_item = GuacUI.createChildElement(element, "div", "add-user");
+
+    GuacUI.createChildElement(add_item, "div",  "icon user add");
+    var name = GuacUI.createChildElement(add_item, "input", "name");
+    name.setAttribute("type", "text");
+    name.setAttribute("placeholder", "Add user");
+
+    var add_button = GuacUI.createChildElement(add_item, "button");
+    add_button.textContent = "Add";
+
+    // If "Add" clicked, trigger onadd event
+    add_button.onclick = function() {
+        if (user_manager.onadd) {
+
+            // Clear name if successful
+            if (user_manager.onadd(name.value))
+                name.value = "";
+
+        }
+    };
+
     /**
      * The selected username.
      */

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

@@ -169,7 +169,7 @@ div.section {
 
 }
 
-.list-item .icon {
+.icon {
     width: 24px;
     height: 24px;
     background-size: 16px 16px;
@@ -179,9 +179,6 @@ div.section {
     background-repeat: no-repeat;
     background-position: center center;
     opacity: 0.5;
-}
-
-.list-item .icon {
     display: inline-block;
 }
 
@@ -288,28 +285,28 @@ div.section {
  * List element icons
  */
 
-.list-item .icon.user {
+.icon.user {
     background-image: url('../images/user-icons/guac-user.png');
 }
 
-.list-item .icon.user.add {
+.icon.user.add {
     background-image: url('../images/action-icons/guac-user-add.png');
 }
 
-.list-item .icon.connection {
+.icon.connection {
     background-image: url('../images/protocol-icons/guac-plug.png');
 }
 
-.list-item .icon.connection.ssh {
+.icon.connection.ssh {
     background-image: url('../images/protocol-icons/guac-text.png');
 }
 
-.list-item .icon.connection.add {
+.icon.connection.add {
     background-image: url('../images/action-icons/guac-monitor-add.png');
 }
 
-.list-item .icon.connection.vnc,
+.icon.connection.vnc,
-.list-item .icon.connection.rdp {
+.icon.connection.rdp {
     background-image: url('../images/protocol-icons/guac-monitor.png');
 }
 
@@ -327,3 +324,11 @@ div.section {
     margin-left: 2.5em;
     font-size: 0.75em;
 }
+
+.user-list input.name {
+    max-width: 20em;
+}
+
+.user-list .add-user button {
+    font-size: 0.8em;
+}