Fixed action menu in TPS UI.

The TPS UI has been modified to display the appropriate actions
menu based on the roles of the user. TPS agent can only enable
and disable profiles, and also approve or reject pending requests.
TPS admin can only edit disabled profiles, then submit it for
approval, or cancel the request.

https://fedorahosted.org/pki/ticket/1292

22 files changed, 453 insertions, 187 deletions

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index 0d5edd7fd..6042dc3ee 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -42,8 +42,13 @@
 }
 
 .pki-menu {
+  display: inline-block;
+}
+
+.pki-menu ul {
   padding: 0;
   list-style-type: none;
+  list-style-position: inside;
 }
 
 .pki-actions {
@@ -51,6 +56,13 @@
   display: inline-block;
 }
 
+.pki-actions ul {
+  padding: 0;
+  list-style-type: none;
+  list-style-position: inside;
+  text-align: right;
+}
+
 .pki-fields {
   margin-bottom: 5px;
 }
@@ -79,6 +91,14 @@ input[readonly="readonly"]:enabled:hover {
   border-color: #FFFFFF;
 }
 
+textarea {
+  background-color: #FFFFFF;
+}
+
+textarea[readonly="readonly"] {
+  background-color: #F8F8F8;
+}
+
 table tfoot tr th {
   padding: 6px 15px;
   font-size: 11.5px;
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 98e3330c0..c1c57793c 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -485,6 +485,8 @@ var Table = Backbone.View.extend({
 
         self.thead = $("thead", self.$el);
         self.buttons = $(".pki-table-buttons", self.thead);
+        self.addButton = $("[name='add']", self.buttons);
+        self.removeButton = $("[name='remove']", self.buttons);
 
         // setup search field handler
         self.searchField = $("input[name='search']", self.thead);
@@ -497,12 +499,12 @@ var Table = Backbone.View.extend({
         });
 
         // setup add button handler
-        $("button[name='add']", self.buttons).click(function(e) {
+        self.addButton.click(function(e) {
             self.add();
         });
 
         // setup remove button handler
-        $("button[name='remove']", self.buttons).click(function(e) {
+        self.removeButton.click(function(e) {
             var items = [];
             var message = "Are you sure you want to remove the following entries?\n";
 
@@ -625,10 +627,12 @@ var Table = Backbone.View.extend({
         var self = this;
 
         if (self.mode == "view") {
-            self.buttons.hide();
+            self.addButton.hide();
+            self.removeButton.hide();
 
         } else { // self.mode == "edit"
-            self.buttons.show();
+            self.addButton.show();
+            self.removeButton.show();
         }
 
         // clear selection
@@ -928,27 +932,27 @@ var EntryPage = Page.extend({
         self.actions = self.$(".pki-actions");
 
         self.viewMenu = $(".pki-actions-menu[name='view']", self.actions);
-        self.editLink = $("a[name='edit']", self.viewMenu);
+        self.editAction = $("[name='edit']", self.viewMenu);
 
         self.editMenu = $(".pki-actions-menu[name='edit']", self.actions);
-        self.cancelButton = $("button[name='cancel']", self.editMenu);
-        self.saveButton = $("button[name='save']", self.editMenu);
+        self.cancelAction = $("[name='cancel']", self.editMenu);
+        self.saveAction = $("[name='save']", self.editMenu);
 
         self.idField = self.$("input[name='id']");
         self.statusField = self.$("input[name='status']");
 
-        self.editLink.click(function(e) {
+        $("a", self.editAction).click(function(e) {
             self.mode = "edit";
             self.render();
             e.preventDefault();
         });
 
-        self.cancelButton.click(function(e) {
+        self.cancelAction.click(function(e) {
             self.cancel();
             e.preventDefault();
         });
 
-        self.saveButton.click(function(e) {
+        self.saveAction.click(function(e) {
             self.save();
             e.preventDefault();
         });
diff --git a/base/tps/shared/webapps/tps/js/account.js b/base/tps/shared/webapps/tps/js/account.js
index 97b222aaa..8960ff731 100644
--- a/base/tps/shared/webapps/tps/js/account.js
+++ b/base/tps/shared/webapps/tps/js/account.js
@@ -24,14 +24,30 @@ function Account() {
     this.url = "/tps/rest/account";
 
     this.login = function(options) {
-        var jqxhr = $.get(this.url + "/login", null, null, "json");
-        jqxhr.done(options.success);
-        jqxhr.fail(options.error);
+        var self = this;
+
+        $.ajax({
+            type: "GET",
+            url: self.url + "/login",
+            dataType: "json"
+        }).done(function(data, textStatus, jqXHR) {
+            if (options.success) options.success.call(self, data, textStatus, jqXHR);
+        }).fail(function(jqXHR, textStatus, errorThrown) {
+            if (options.error) options.error.call(self, jqXHR, textStatus, errorThrown);
+        });
     };
 
     this.logout = function(options) {
-        var jqxhr = $.get(this.url + "/logout");
-        jqxhr.done(options.success);
-        jqxhr.fail(options.error);
+        var self = this;
+
+        $.ajax({
+            type: "GET",
+            url: self.url + "/logout",
+            dataType: "json"
+        }).done(function(data, textStatus, jqXHR) {
+            if (options.success) options.success.call(self, data, textStatus, jqXHR);
+        }).fail(function(jqXHR, textStatus, errorThrown) {
+            if (options.error) options.error.call(self, jqXHR, textStatus, errorThrown);
+        });
     };
-};
\ No newline at end of file
+};
diff --git a/base/tps/shared/webapps/tps/js/audit.js b/base/tps/shared/webapps/tps/js/audit.js
index 62e6b099e..cc0be4628 100644
--- a/base/tps/shared/webapps/tps/js/audit.js
+++ b/base/tps/shared/webapps/tps/js/audit.js
@@ -44,24 +44,11 @@ var AuditModel = Model.extend({
             }
         };
     },
-    enable: function(options) {
+    changeStatus: function(action, options) {
         var self = this;
         $.ajax({
             type: "POST",
-            url: self.url() + "?action=enable",
-            dataType: "json"
-        }).done(function(data, textStatus, jqXHR) {
-            self.set(self.parseResponse(data));
-            if (options.success) options.success.call(self, data, textStatus, jqXHR);
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (options.error) options.error.call(self, jqXHR, textStatus, errorThrown);
-        });
-    },
-    disable: function(options) {
-        var self = this;
-        $.ajax({
-            type: "POST",
-            url: self.url() + "?action=disable",
+            url: self.url() + "?action=" + action,
             dataType: "json"
         }).done(function(data, textStatus, jqXHR) {
             self.set(self.parseResponse(data));
@@ -142,16 +129,16 @@ var AuditPage = EntryPage.extend({
 
         AuditPage.__super__.setup.call(self);
 
-        self.enableLink = $("a[name='enable']", self.viewMenu);
-        self.disableLink = $("a[name='disable']", self.viewMenu);
+        self.enableAction = $("[name='enable']", self.viewMenu);
+        self.disableAction = $("[name='disable']", self.viewMenu);
 
-        self.enableLink.click(function(e) {
+        $("a", self.enableAction).click(function(e) {
 
             e.preventDefault();
 
             var message = "Are you sure you want to enable this entry?";
             if (!confirm(message)) return;
-            self.model.enable({
+            self.model.changeStatus("enable", {
                 success: function(data, textStatus, jqXHR) {
                     self.entry = _.clone(self.model.attributes);
                     self.render();
@@ -166,13 +153,13 @@ var AuditPage = EntryPage.extend({
             });
         });
 
-        self.disableLink.click(function(e) {
+        $("a", self.disableAction).click(function(e) {
 
             e.preventDefault();
 
             var message = "Are you sure you want to disable this entry?";
             if (!confirm(message)) return;
-            self.model.disable({
+            self.model.changeStatus("disable", {
                 success: function(data, textStatus, jqXHR) {
                     self.entry = _.clone(self.model.attributes);
                     self.render();
@@ -204,12 +191,14 @@ var AuditPage = EntryPage.extend({
 
         var status = self.entry.status;
         if (status == "Disabled") {
-            self.enableLink.show();
-            self.disableLink.hide();
-
-        } else if (status == "Enabled") {
-            self.enableLink.hide();
-            self.disableLink.show();
+            self.editAction.show();
+            self.enableAction.show();
+            self.disableAction.hide();
+
+        } else {
+            self.editAction.hide();
+            self.enableAction.hide();
+            self.disableAction.show();
         }
 
         if (self.mode == "edit") {
diff --git a/base/tps/shared/webapps/tps/js/authenticator.js b/base/tps/shared/webapps/tps/js/authenticator.js
index f91cf6bfe..b83838c67 100644
--- a/base/tps/shared/webapps/tps/js/authenticator.js
+++ b/base/tps/shared/webapps/tps/js/authenticator.js
@@ -38,24 +38,11 @@ var AuthenticatorModel = Model.extend({
             }
         };
     },
-    enable: function(options) {
+    changeStatus: function(action, options) {
         var self = this;
         $.ajax({
             type: "POST",
-            url: self.url() + "?action=enable",
-            dataType: "json"
-        }).done(function(data, textStatus, jqXHR) {
-            self.set(self.parseResponse(data));
-            if (options.success) options.success.call(self, data, textStatus, jqXHR);
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (options.error) options.error.call(self, jqXHR, textStatus, errorThrown);
-        });
-    },
-    disable: function(options) {
-        var self = this;
-        $.ajax({
-            type: "POST",
-            url: self.url() + "?action=disable",
+            url: self.url() + "?action=" + action,
             dataType: "json"
         }).done(function(data, textStatus, jqXHR) {
             self.set(self.parseResponse(data));
diff --git a/base/tps/shared/webapps/tps/js/config.js b/base/tps/shared/webapps/tps/js/config.js
index 5b651a09d..749821b3c 100644
--- a/base/tps/shared/webapps/tps/js/config.js
+++ b/base/tps/shared/webapps/tps/js/config.js
@@ -40,12 +40,72 @@ var ConfigModel = Model.extend({
     }
 });
 
-var ConfigPage = ConfigEntryPage.extend({
+var ConfigPage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
         options.model = new ConfigModel();
-        options.tableItem = PropertiesTableItem;
-        options.tableSize = 15;
         ConfigPage.__super__.initialize.call(self, options);
+        self.tableItem = options.tableItem || PropertiesTableItem;
+        self.tableSize = options.tableSize || 15;
+    },
+    setup: function() {
+        var self = this;
+
+        ConfigPage.__super__.setup.call(self);
+
+        var dialog = self.$("#property-dialog");
+
+        var addDialog = new Dialog({
+            el: dialog,
+            title: "Add Property",
+            actions: ["cancel", "add"]
+        });
+
+        var propertiesSection = self.$("[name='properties']");
+        self.propertiesList = $("[name='list']", propertiesSection);
+
+        self.propertiesTable = new PropertiesTable({
+            el: self.propertiesList,
+            addDialog: addDialog,
+            tableItem: self.tableItem,
+            pageSize: self.tableSize,
+            parent: self
+        });
+    },
+    renderContent: function() {
+        var self = this;
+
+        ConfigPage.__super__.renderContent.call(self);
+
+        if (self.mode == "add") {
+            self.propertiesTable.mode = "edit";
+            self.setProperties([]);
+
+        } else if (self.mode == "edit") {
+            self.propertiesTable.mode = "edit";
+            self.setProperties(self.entry.properties);
+
+        } else { // self.mode == "view"
+            self.propertiesTable.mode = "view";
+            self.setProperties(self.entry.properties);
+        }
+    },
+    saveFields: function() {
+        var self = this;
+
+        ConfigPage.__super__.saveFields.call(self);
+
+        self.entry.properties = self.getProperties();
+    },
+    setProperties: function(properties) {
+        var self = this;
+
+        self.propertiesTable.entries = properties;
+        self.propertiesTable.render();
+    },
+    getProperties: function() {
+        var self = this;
+
+        return self.propertiesTable.entries;
     }
 });
diff --git a/base/tps/shared/webapps/tps/js/connector.js b/base/tps/shared/webapps/tps/js/connector.js
index bc7e4c2bd..1095ecd74 100644
--- a/base/tps/shared/webapps/tps/js/connector.js
+++ b/base/tps/shared/webapps/tps/js/connector.js
@@ -38,24 +38,11 @@ var ConnectorModel = Model.extend({
             }
         };
     },
-    enable: function(options) {
+    changeStatus: function(action, options) {
         var self = this;
         $.ajax({
             type: "POST",
-            url: self.url() + "?action=enable",
-            dataType: "json"
-        }).done(function(data, textStatus, jqXHR) {
-            self.set(self.parseResponse(data));
-            if (options.success) options.success.call(self, data, textStatus, jqXHR);
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (options.error) options.error.call(self, jqXHR, textStatus, errorThrown);
-        });
-    },
-    disable: function(options) {
-        var self = this;
-        $.ajax({
-            type: "POST",
-            url: self.url() + "?action=disable",
+            url: self.url() + "?action=" + action,
             dataType: "json"
         }).done(function(data, textStatus, jqXHR) {
             self.set(self.parseResponse(data));
diff --git a/base/tps/shared/webapps/tps/js/profile-mapping.js b/base/tps/shared/webapps/tps/js/profile-mapping.js
index 54c042562..8df3b393f 100644
--- a/base/tps/shared/webapps/tps/js/profile-mapping.js
+++ b/base/tps/shared/webapps/tps/js/profile-mapping.js
@@ -38,24 +38,11 @@ var ProfileMappingModel = Model.extend({
             }
         };
     },
-    enable: function(options) {
+    changeStatus: function(action, options) {
         var self = this;
         $.ajax({
             type: "POST",
-            url: self.url() + "?action=enable",
-            dataType: "json"
-        }).done(function(data, textStatus, jqXHR) {
-            self.set(self.parseResponse(data));
-            if (options.success) options.success.call(self, data, textStatus, jqXHR);
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (options.error) options.error.call(self, jqXHR, textStatus, errorThrown);
-        });
-    },
-    disable: function(options) {
-        var self = this;
-        $.ajax({
-            type: "POST",
-            url: self.url() + "?action=disable",
+            url: self.url() + "?action=" + action,
             dataType: "json"
         }).done(function(data, textStatus, jqXHR) {
             self.set(self.parseResponse(data));
diff --git a/base/tps/shared/webapps/tps/js/profile.js b/base/tps/shared/webapps/tps/js/profile.js
index 0454686a9..0182a8063 100644
--- a/base/tps/shared/webapps/tps/js/profile.js
+++ b/base/tps/shared/webapps/tps/js/profile.js
@@ -38,24 +38,11 @@ var ProfileModel = Model.extend({
             }
         };
     },
-    enable: function(options) {
+    changeStatus: function(action, options) {
         var self = this;
         $.ajax({
             type: "POST",
-            url: self.url() + "?action=enable",
-            dataType: "json"
-        }).done(function(data, textStatus, jqXHR) {
-            self.set(self.parseResponse(data));
-            if (options.success) options.success.call(self, data, textStatus, jqXHR);
-        }).fail(function(jqXHR, textStatus, errorThrown) {
-            if (options.error) options.error.call(self, jqXHR, textStatus, errorThrown);
-        });
-    },
-    disable: function(options) {
-        var self = this;
-        $.ajax({
-            type: "POST",
-            url: self.url() + "?action=disable",
+            url: self.url() + "?action=" + action,
             dataType: "json"
         }).done(function(data, textStatus, jqXHR) {
             self.set(self.parseResponse(data));
@@ -94,6 +81,91 @@ var ProfilesTable = ModelTable.extend({
     }
 });
 
+var ProfilePage = ConfigEntryPage.extend({
+    renderContent: function() {
+        var self = this;
+
+        ProfilePage.__super__.renderContent.call(self);
+
+        var roles = tps.user.Roles.Role;
+        var status = self.entry.status;
+
+        if (_.contains(roles, "Administrators")) {
+
+            // admins can edit disabled entries
+            if (status == "Disabled") {
+                self.editAction.show();
+            } else {
+                self.editAction.hide();
+            }
+
+        } else {
+            self.editAction.hide();
+        }
+
+        if (_.contains(roles, "TPS Agents")) {
+
+            // agents can enable or disable entries
+            if (status == "Disabled") {
+                self.approveAction.hide();
+                self.rejectAction.hide();
+                self.enableAction.show();
+                self.disableAction.hide();
+
+            } else if (status == "Enabled") {
+                self.approveAction.hide();
+                self.rejectAction.hide();
+                self.enableAction.hide();
+                self.disableAction.show();
+
+            } else if (status == "Pending_Approval") {
+                self.approveAction.show();
+                self.rejectAction.show();
+                self.enableAction.hide();
+                self.disableAction.hide();
+
+            } else {
+                self.approveAction.hide();
+                self.rejectAction.hide();
+                self.enableAction.hide();
+                self.disableAction.hide();
+            }
+
+            self.submitAction.hide();
+            self.cancelAction.hide();
+
+        } else if (_.contains(roles, "Administrators")) {
+
+            // admins can submit or cancel entries
+            if (status == "Disabled") {
+                self.submitAction.show();
+                self.cancelAction.hide();
+
+            } else if (status == "Pending_Approval") {
+                self.submitAction.hide();
+                self.cancelAction.show();
+
+            } else {
+                self.submitAction.hide();
+                self.cancelAction.hide();
+            }
+
+            self.approveAction.hide();
+            self.rejectAction.hide();
+            self.enableAction.hide();
+            self.disableAction.hide();
+
+        } else {
+            self.enableAction.hide();
+            self.disableAction.hide();
+            self.approveAction.hide();
+            self.rejectAction.hide();
+            self.submitAction.hide();
+            self.cancelAction.hide();
+        }
+    }
+});
+
 var ProfilesPage = Page.extend({
     load: function() {
         var self = this;
diff --git a/base/tps/shared/webapps/tps/js/token.js b/base/tps/shared/webapps/tps/js/token.js
index 4cc3b5bcf..f4d2d8a78 100644
--- a/base/tps/shared/webapps/tps/js/token.js
+++ b/base/tps/shared/webapps/tps/js/token.js
@@ -110,9 +110,9 @@ var TokenPage = EntryPage.extend({
 
         TokenPage.__super__.setup.call(self);
 
-        self.changeStatusLink = $("a[name='changeStatus']", self.viewMenu);
+        self.changeStatusAction = $("[name='changeStatus']", self.viewMenu);
 
-        self.changeStatusLink.click(function(e) {
+        $("a", self.changeStatusAction).click(function(e) {
 
             e.preventDefault();
 
@@ -154,9 +154,9 @@ var TokenPage = EntryPage.extend({
             dialog.open();
         });
 
-        self.showCertsLink = $("a[name='showCerts']", self.viewMenu);
+        self.showCertsAction = $("[name='showCerts']", self.viewMenu);
 
-        self.showCertsLink.click(function(e) {
+        $("a", self.showCertsAction).click(function(e) {
 
             e.preventDefault();
             window.location.hash = window.location.hash + "/certs";
@@ -168,9 +168,9 @@ var TokenPage = EntryPage.extend({
         TokenPage.__super__.renderContent.call(self);
 
         if (self.mode == "add") {
-            self.changeStatusLink.hide();
+            self.changeStatusAction.hide();
         } else {
-            self.changeStatusLink.show();
+            self.changeStatusAction.show();
         }
     }
 });
diff --git a/base/tps/shared/webapps/tps/js/tps.js b/base/tps/shared/webapps/tps/js/tps.js
index 85d1751eb..35fac3ec9 100644
--- a/base/tps/shared/webapps/tps/js/tps.js
+++ b/base/tps/shared/webapps/tps/js/tps.js
@@ -146,16 +146,104 @@ var ConfigEntryPage = EntryPage.extend({
 
         ConfigEntryPage.__super__.setup.call(self);
 
-        self.enableLink = $("a[name='enable']", self.viewMenu);
-        self.disableLink = $("a[name='disable']", self.viewMenu);
+        self.submitAction = $("[name='submit']", self.viewMenu);
+        self.cancelAction = $("[name='cancel']", self.viewMenu);
+        self.approveAction = $("[name='approve']", self.viewMenu);
+        self.rejectAction = $("[name='reject']", self.viewMenu);
+        self.enableAction = $("[name='enable']", self.viewMenu);
+        self.disableAction = $("[name='disable']", self.viewMenu);
 
-        self.enableLink.click(function(e) {
+        $("a", self.submitAction).click(function(e) {
+
+            e.preventDefault();
+
+            var message = "Are you sure you want to submit this entry?";
+            if (!confirm(message)) return;
+            self.model.changeStatus("submit", {
+                success: function(data, textStatus, jqXHR) {
+                    self.entry = _.clone(self.model.attributes);
+                    self.render();
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + jqXHR.responseJSON.Code,
+                        content: jqXHR.responseJSON.Message
+                    }).open();
+                }
+            });
+        });
+
+        $("a", self.cancelAction).click(function(e) {
+
+            e.preventDefault();
+
+            var message = "Are you sure you want to cancel this entry?";
+            if (!confirm(message)) return;
+            self.model.changeStatus("cancel", {
+                success: function(data, textStatus, jqXHR) {
+                    self.entry = _.clone(self.model.attributes);
+                    self.render();
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + jqXHR.responseJSON.Code,
+                        content: jqXHR.responseJSON.Message
+                    }).open();
+                }
+            });
+        });
+
+        $("a", self.approveAction).click(function(e) {
+
+            e.preventDefault();
+
+            var message = "Are you sure you want to approve this entry?";
+            if (!confirm(message)) return;
+            self.model.changeStatus("approve", {
+                success: function(data, textStatus, jqXHR) {
+                    self.entry = _.clone(self.model.attributes);
+                    self.render();
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + jqXHR.responseJSON.Code,
+                        content: jqXHR.responseJSON.Message
+                    }).open();
+                }
+            });
+        });
+
+        $("a", self.rejectAction).click(function(e) {
+
+            e.preventDefault();
+
+            var message = "Are you sure you want to reject this entry?";
+            if (!confirm(message)) return;
+            self.model.changeStatus("reject", {
+                success: function(data, textStatus, jqXHR) {
+                    self.entry = _.clone(self.model.attributes);
+                    self.render();
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + jqXHR.responseJSON.Code,
+                        content: jqXHR.responseJSON.Message
+                    }).open();
+                }
+            });
+        });
+
+        $("a", self.enableAction).click(function(e) {
 
             e.preventDefault();
 
             var message = "Are you sure you want to enable this entry?";
             if (!confirm(message)) return;
-            self.model.enable({
+            self.model.changeStatus("enable", {
                 success: function(data, textStatus, jqXHR) {
                     self.entry = _.clone(self.model.attributes);
                     self.render();
@@ -170,13 +258,13 @@ var ConfigEntryPage = EntryPage.extend({
             });
         });
 
-        self.disableLink.click(function(e) {
+        $("a", self.disableAction).click(function(e) {
 
             e.preventDefault();
 
             var message = "Are you sure you want to disable this entry?";
             if (!confirm(message)) return;
-            self.model.disable({
+            self.model.changeStatus("disable", {
                 success: function(data, textStatus, jqXHR) {
                     self.entry = _.clone(self.model.attributes);
                     self.render();
@@ -199,12 +287,11 @@ var ConfigEntryPage = EntryPage.extend({
             actions: ["cancel", "add"]
         });
 
-        var table = self.$("table[name='properties']");
-        self.addButton = $("button[name='add']", table);
-        self.removeButton = $("button[name='remove']", table);
+        var propertiesSection = self.$("[name='properties']");
+        self.propertiesList = $("[name='list']", propertiesSection);
 
         self.propertiesTable = new PropertiesTable({
-            el: table,
+            el: self.propertiesList,
             addDialog: addDialog,
             tableItem: self.tableItem,
             pageSize: self.tableSize,
@@ -218,34 +305,50 @@ var ConfigEntryPage = EntryPage.extend({
 
         var status = self.entry.status;
         if (status == "Disabled") {
-            self.enableLink.show();
-            self.disableLink.hide();
+            self.editAction.show();
+            self.enableAction.show();
+            self.disableAction.hide();
 
-        } else if (status == "Enabled") {
-            self.enableLink.hide();
-            self.disableLink.show();
+        } else {
+            self.editAction.hide();
+            self.enableAction.hide();
+            self.disableAction.show();
         }
 
+        self.submitAction.hide();
+        self.cancelAction.hide();
+        self.approveAction.hide();
+        self.rejectAction.hide();
+
         if (self.mode == "add") {
             self.propertiesTable.mode = "edit";
-            self.propertiesTable.entries = [];
+            self.setProperties([]);
 
         } else if (self.mode == "edit") {
             self.propertiesTable.mode = "edit";
-            self.propertiesTable.entries = self.entry.properties;
+            self.setProperties(self.entry.properties);
 
         } else { // self.mode == "view"
             self.propertiesTable.mode = "view";
-            self.propertiesTable.entries = self.entry.properties;
+            self.setProperties(self.entry.properties);
         }
-
-        self.propertiesTable.render();
     },
     saveFields: function() {
         var self = this;
 
         ConfigEntryPage.__super__.saveFields.call(self);
 
-        self.entry.properties = self.propertiesTable.entries;
+        self.entry.properties = self.getProperties();
+    },
+    setProperties: function(properties) {
+        var self = this;
+
+        self.propertiesTable.entries = properties;
+        self.propertiesTable.render();
+    },
+    getProperties: function() {
+        var self = this;
+
+        return self.propertiesTable.entries;
     }
 });
diff --git a/base/tps/shared/webapps/tps/ui/audit.html b/base/tps/shared/webapps/tps/ui/audit.html
index f9da85196..06457de62 100644
--- a/base/tps/shared/webapps/tps/ui/audit.html
+++ b/base/tps/shared/webapps/tps/ui/audit.html
@@ -25,10 +25,11 @@
 
 <span class="pki-actions">
 
-<span name="view" class="pki-actions-menu">
-<a name="edit" href="#">Edit</a><br>
-<a name="enable" href="#">Enable</a><a name="disable" href="#" style="display: none;">Disable</a><br>
-</span>
+<ul name="view" class="pki-actions-menu">
+<li name="edit" style="display: none;"><a href="#">Edit</a></li>
+<li name="enable" style="display: none;"><a href="#">Enable</a></li>
+<li name="disable" style="display: none;"><a href="#">Disable</a></li>
+</ul>
 
 <span name="edit" class="pki-actions-menu" style="display: none;">
 <button name="cancel">Cancel</button>
diff --git a/base/tps/shared/webapps/tps/ui/authenticator.html b/base/tps/shared/webapps/tps/ui/authenticator.html
index cde9e65c4..60fbf7cfe 100644
--- a/base/tps/shared/webapps/tps/ui/authenticator.html
+++ b/base/tps/shared/webapps/tps/ui/authenticator.html
@@ -26,10 +26,15 @@
 
 <span class="pki-actions">
 
-<span name="view" class="pki-actions-menu">
-<a name="edit" href="#">Edit</a><br>
-<a name="enable" href="#">Enable</a><a name="disable" href="#" style="display: none;">Disable</a><br>
-</span>
+<ul name="view" class="pki-actions-menu">
+<li name="edit" style="display: none;"><a href="#">Edit</a></li>
+<li name="submit" style="display: none;"><a href="#">Submit</a></li>
+<li name="cancel" style="display: none;"><a href="#">Cancel</a></li>
+<li name="approve" style="display: none;"><a href="#">Approve</a></li>
+<li name="reject" style="display: none;"><a href="#">Reject</a></li>
+<li name="enable" style="display: none;"><a href="#">Enable</a></li>
+<li name="disable" style="display: none;"><a href="#">Disable</a></li>
+</ul>
 
 <span name="edit" class="pki-actions-menu" style="display: none;">
 <button name="cancel">Cancel</button>
@@ -51,16 +56,18 @@
 </fieldset>
 </div>
 
+<div name="properties">
+
 <h2>Properties</h2>
 
-<table name="properties">
+<table name="list">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span class="pki-table-buttons" style="display: none;">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -103,6 +110,8 @@
 </tfoot>
 </table>
 
+</div>
+
 <div id="property-dialog" class="modal">
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/base/tps/shared/webapps/tps/ui/config.html b/base/tps/shared/webapps/tps/ui/config.html
index 2a8e85902..224697551 100644
--- a/base/tps/shared/webapps/tps/ui/config.html
+++ b/base/tps/shared/webapps/tps/ui/config.html
@@ -25,9 +25,9 @@
 
 <span class="pki-actions">
 
-<span name="view" class="pki-actions-menu">
-<a name="edit" href="#">Edit</a><br>
-</span>
+<ul name="view" class="pki-actions-menu">
+<li name="edit"><a href="#">Edit</a></li>
+</ul>
 
 <span name="edit" class="pki-actions-menu" style="display: none;">
 <button name="cancel">Cancel</button>
@@ -38,14 +38,16 @@
 
 </div>
 
-<table name="properties">
+<div name="properties">
+
+<table name="list">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span class="pki-table-buttons" style="display: none;">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -88,6 +90,8 @@
 </tfoot>
 </table>
 
+</div>
+
 <div id="property-dialog" class="modal">
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/base/tps/shared/webapps/tps/ui/connector.html b/base/tps/shared/webapps/tps/ui/connector.html
index 782c6d245..bb10f7219 100644
--- a/base/tps/shared/webapps/tps/ui/connector.html
+++ b/base/tps/shared/webapps/tps/ui/connector.html
@@ -26,10 +26,15 @@
 
 <span class="pki-actions">
 
-<span name="view" class="pki-actions-menu">
-<a name="edit" href="#">Edit</a><br>
-<a name="enable" href="#">Enable</a><a name="disable" href="#" style="display: none;">Disable</a><br>
-</span>
+<ul name="view" class="pki-actions-menu">
+<li name="edit" style="display: none;"><a href="#">Edit</a></li>
+<li name="submit" style="display: none;"><a href="#">Submit</a></li>
+<li name="cancel" style="display: none;"><a href="#">Cancel</a></li>
+<li name="approve" style="display: none;"><a href="#">Approve</a></li>
+<li name="reject" style="display: none;"><a href="#">Reject</a></li>
+<li name="enable" style="display: none;"><a href="#">Enable</a></li>
+<li name="disable" style="display: none;"><a href="#">Disable</a></li>
+</ul>
 
 <span name="edit" class="pki-actions-menu" style="display: none;">
 <button name="cancel">Cancel</button>
@@ -51,16 +56,18 @@
 </fieldset>
 </div>
 
+<div name="properties">
+
 <h2>Properties</h2>
 
-<table name="properties">
+<table name="list">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span class="pki-table-buttons" style="display: none;">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -103,6 +110,8 @@
 </tfoot>
 </table>
 
+</div>
+
 <div id="property-dialog" class="modal">
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/base/tps/shared/webapps/tps/ui/group.html b/base/tps/shared/webapps/tps/ui/group.html
index 11c9944b2..df933815f 100644
--- a/base/tps/shared/webapps/tps/ui/group.html
+++ b/base/tps/shared/webapps/tps/ui/group.html
@@ -26,9 +26,9 @@
 
 <span class="pki-actions">
 
-<span name="view" class="pki-actions-menu">
-<a name="edit" href="#">Edit</a><br>
-</span>
+<ul name="view" class="pki-actions-menu">
+<li name="edit"><a href="#">Edit</a></li>
+</ul>
 
 <span name="edit" class="pki-actions-menu" style="display: none;">
 <button name="cancel">Cancel</button>
diff --git a/base/tps/shared/webapps/tps/ui/home.html b/base/tps/shared/webapps/tps/ui/home.html
index 08c467255..eb6874e50 100644
--- a/base/tps/shared/webapps/tps/ui/home.html
+++ b/base/tps/shared/webapps/tps/ui/home.html
@@ -27,8 +27,8 @@
     <div class="panel-heading">
         <h3 class="panel-title">Token Management</h3>
     </div>
-    <div class="panel-body">
-        <ul class="pki-menu">
+    <div class="panel-body pki-menu">
+        <ul>
         <li><a href="#tokens">Tokens</a></li>
         <li><a href="#certs">Certificates</a></li>
         <li><a href="#activities">Activities</a></li>
@@ -40,10 +40,10 @@
     <div class="panel-heading">
         <h3 class="panel-title">Account Management</h3>
     </div>
-    <div class="panel-body">
-        <ul class="pki-menu">
+    <div class="panel-body pki-menu">
+        <ul>
         <li><a href="#users">Users</a></li>
-        </li><a href="#groups">Groups</a></li>
+        <li><a href="#groups">Groups</a></li>
         </ul>
     </div>
 </div>
@@ -52,8 +52,8 @@
     <div class="panel-heading">
         <h3 class="panel-title">System Management</h3>
     </div>
-    <div class="panel-body">
-        <ul class="pki-menu">
+    <div class="panel-body pki-menu">
+        <ul>
         <li name="config" style="display: none;"><a href="#config">General Configuration</a></li>
         <li name="authenticators" style="display: none;"><a href="#authenticators">Authentication Sources</a></li>
         <li name="connectors" style="display: none;"><a href="#connectors">Subsystem Connections</a></li>
diff --git a/base/tps/shared/webapps/tps/ui/index.html b/base/tps/shared/webapps/tps/ui/index.html
index 3bda3cb40..357ade514 100644
--- a/base/tps/shared/webapps/tps/ui/index.html
+++ b/base/tps/shared/webapps/tps/ui/index.html
@@ -217,7 +217,7 @@ $(function() {
     });
 
     router.route("profiles/:id", "profile", function(id) {
-        new ConfigEntryPage({
+        new ProfilePage({
             el: content,
             url: "profile.html",
             model: new ProfileModel({ id: id })
@@ -225,7 +225,7 @@ $(function() {
     });
 
     router.route("new-profile", "new-profile", function() {
-        new ConfigEntryPage({
+        new ProfilePage({
             el: content,
             url: "profile.html",
             model: new ProfileModel(),
diff --git a/base/tps/shared/webapps/tps/ui/profile-mapping.html b/base/tps/shared/webapps/tps/ui/profile-mapping.html
index fea71ce9d..2dfbf2aa8 100644
--- a/base/tps/shared/webapps/tps/ui/profile-mapping.html
+++ b/base/tps/shared/webapps/tps/ui/profile-mapping.html
@@ -26,10 +26,15 @@
 
 <span class="pki-actions">
 
-<span name="view" class="pki-actions-menu">
-<a name="edit" href="#">Edit</a><br>
-<a name="enable" href="#">Enable</a><a name="disable" href="#" style="display: none;">Disable</a><br>
-</span>
+<ul name="view" class="pki-actions-menu">
+<li name="edit" style="display: none;"><a href="#">Edit</a></li>
+<li name="submit" style="display: none;"><a href="#">Submit</a></li>
+<li name="cancel" style="display: none;"><a href="#">Cancel</a></li>
+<li name="approve" style="display: none;"><a href="#">Approve</a></li>
+<li name="reject" style="display: none;"><a href="#">Reject</a></li>
+<li name="enable" style="display: none;"><a href="#">Enable</a></li>
+<li name="disable" style="display: none;"><a href="#">Disable</a></li>
+</ul>
 
 <span name="edit" class="pki-actions-menu" style="display: none;">
 <button name="cancel">Cancel</button>
@@ -51,16 +56,18 @@
 </fieldset>
 </div>
 
+<div name="properties">
+
 <h2>Properties</h2>
 
-<table name="properties">
+<table name="list">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span class="pki-table-buttons" style="display: none;">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -103,6 +110,8 @@
 </tfoot>
 </table>
 
+</div>
+
 <div id="property-dialog" class="modal">
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/base/tps/shared/webapps/tps/ui/profile.html b/base/tps/shared/webapps/tps/ui/profile.html
index 1720d4850..b2e90856c 100644
--- a/base/tps/shared/webapps/tps/ui/profile.html
+++ b/base/tps/shared/webapps/tps/ui/profile.html
@@ -26,10 +26,15 @@
 
 <span class="pki-actions">
 
-<span name="view" class="pki-actions-menu">
-<a name="edit" href="#">Edit</a><br>
-<a name="enable" href="#">Enable</a><a name="disable" href="#" style="display: none;">Disable</a><br>
-</span>
+<ul name="view" class="pki-actions-menu">
+<li name="edit" style="display: none;"><a href="#">Edit</a></li>
+<li name="submit" style="display: none;"><a href="#">Submit</a></li>
+<li name="cancel" style="display: none;"><a href="#">Cancel</a></li>
+<li name="approve" style="display: none;"><a href="#">Approve</a></li>
+<li name="reject" style="display: none;"><a href="#">Reject</a></li>
+<li name="enable" style="display: none;"><a href="#">Enable</a></li>
+<li name="disable" style="display: none;"><a href="#">Disable</a></li>
+</ul>
 
 <span name="edit" class="pki-actions-menu" style="display: none;">
 <button name="cancel">Cancel</button>
@@ -51,16 +56,18 @@
 </fieldset>
 </div>
 
+<div name="properties">
+
 <h2>Properties</h2>
 
-<table name="properties">
+<table name="list">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span class="pki-table-buttons" style="display: none;">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -103,6 +110,8 @@
 </tfoot>
 </table>
 
+</div>
+
 <div id="property-dialog" class="modal">
     <div class="modal-dialog">
         <div class="modal-content">
diff --git a/base/tps/shared/webapps/tps/ui/token.html b/base/tps/shared/webapps/tps/ui/token.html
index 39d54c6cd..ad681e9a0 100644
--- a/base/tps/shared/webapps/tps/ui/token.html
+++ b/base/tps/shared/webapps/tps/ui/token.html
@@ -26,11 +26,11 @@
 
 <span class="pki-actions">
 
-<span name="view" class="pki-actions-menu">
-<a name="edit" href="#">Edit</a><br>
-<a name="changeStatus" href="#">Change Status</a><br>
-<a name="showCerts" href="#">Show Certificates</a><br>
-</span>
+<ul name="view" class="pki-actions-menu">
+<li name="edit"><a href="#">Edit</a></li>
+<li name="changeStatus"><a href="#">Change Status</a></li>
+<li name="showCerts"><a href="#">Show Certificates</a></li>
+</ul>
 
 <span name="edit" class="pki-actions-menu" style="display: none;">
 <button name="cancel">Cancel</button>
diff --git a/base/tps/shared/webapps/tps/ui/user.html b/base/tps/shared/webapps/tps/ui/user.html
index 9d6b0597a..9a9f9505b 100644
--- a/base/tps/shared/webapps/tps/ui/user.html
+++ b/base/tps/shared/webapps/tps/ui/user.html
@@ -26,9 +26,9 @@
 
 <span class="pki-actions">
 
-<span name="view" class="pki-actions-menu">
-<a name="edit" href="#">Edit</a><br>
-</span>
+<ul name="view" class="pki-actions-menu">
+<li name="edit"><a href="#">Edit</a></li>
+</ul>
 
 <span name="edit" class="pki-actions-menu" style="display: none;">
 <button name="cancel">Cancel</button>