From f9584b78ec9dbd0bc39804be87746b0c0936ce55 Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Thu, 27 Mar 2014 15:56:36 -0400
Subject: [PATCH] Added save functionality for some TPS resources.

A new DetailsPage has been added to view and edit TPS resources
including profiles, connections, and authenticators. Initially, in
view mode the page is read-only. User can view properties but they
are non-editable. To enter the edit mode the user needs to click
the Edit link. In this mode the properties become editable. To save
the all changes the user must click the Save button, and it will go
back to view mode. The page also provides links to enable or disable
the resource. The add functionality will be added separately later.

New HTML templates and the CSS code have been modified to better
control the formatting. Some unused code has been removed as well.

Ticket #654
---
 base/server/share/webapps/pki/css/pki-ui.css       |  36 ++-
 base/server/share/webapps/pki/js/pki-ui.js         | 285 ++++++++++++++++++---
 .../shared/webapps/tps/js/authenticator.js         |  91 +------
 .../tps-tomcat/shared/webapps/tps/js/connection.js |  91 +------
 base/tps-tomcat/shared/webapps/tps/js/profile.js   |  98 +------
 .../shared/webapps/tps/ui/activities.html          |   6 +-
 .../shared/webapps/tps/ui/authenticator.html       |  31 ++-
 .../shared/webapps/tps/ui/authenticators.html      |  26 +-
 base/tps-tomcat/shared/webapps/tps/ui/certs.html   |   6 +-
 .../shared/webapps/tps/ui/connection.html          |  31 ++-
 .../shared/webapps/tps/ui/connections.html         |  26 +-
 base/tps-tomcat/shared/webapps/tps/ui/groups.html  |   6 +-
 base/tps-tomcat/shared/webapps/tps/ui/profile.html |  31 ++-
 .../tps-tomcat/shared/webapps/tps/ui/profiles.html |  26 +-
 .../shared/webapps/tps/ui/selftests.html           |   6 +-
 base/tps-tomcat/shared/webapps/tps/ui/tokens.html  |   6 +-
 base/tps-tomcat/shared/webapps/tps/ui/users.html   |   6 +-
 17 files changed, 412 insertions(+), 396 deletions(-)

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index f562667a2fe7056c76dd9f1c6b04359dfc579e0f..3743c0c875f147ca3c37cef76f6af4c41cd07aa7 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -25,6 +25,35 @@
 @import url("pki-tables.css");
 @import url("pki-dialogs.css");
 
+.pki-header {
+  margin-bottom: 10px;
+}
+
+.pki-title {
+  font-family: "Open Sans",sans-serif;
+  font-size: 30px;
+  margin: 0;
+  color: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  display: inline-block;
+}
+
+.pki-actions {
+  float: right;
+  display: inline-block;
+}
+
+.pki-fields {
+  margin-bottom: 5px;
+}
+
+.pki-fields fieldset label {
+  min-width: 100px;
+  display: inline-block;
+  line-height: 30px;
+}
+
 .rcue-dialog-background {
   display: none;
 }
@@ -105,11 +134,6 @@ table tfoot tr th {
   margin: 4px;
 }
 
-.pki-fields fieldset label {
-  min-width: 100px;
-  display: inline-block;
-}
-
 .pki-table-actions {
   padding: 1px;
   border-top: none;
@@ -127,7 +151,7 @@ table tfoot tr th {
   min-width: 50px;
 }
 
-.pki-table-actions span[name="actions"] {
+.pki-table-buttons {
   float: right;
 }
 
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 26118b7310bb301bd3cfa3749600ac5d5e2d8506..dffa7d8e14d436a5cf567ca062071ccdb8e7cc5f 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -202,10 +202,13 @@ var Dialog = Backbone.View.extend({
 
         self.handlers = {};
 
-        // add default cancel handler
+        // add default handlers
         self.handlers["cancel"] = function() {
             self.close();
         };
+        self.handlers["close"] = function() {
+            self.close();
+        };
     },
     render: function() {
         var self = this;
@@ -360,16 +363,7 @@ var TableItem = Backbone.View.extend({
                 label.show();
 
             } else if (name == "id") {
-                // setup link to edit dialog
-                td.empty();
-                $("<a/>", {
-                    href: "#",
-                    text: self.id(),
-                    click: function(e) {
-                        self.table.open(self);
-                        e.preventDefault();
-                    }
-                }).appendTo(td);
+                self.renderIDColumn(td);
 
             } else {
                 self.renderColumn(td);
@@ -380,17 +374,26 @@ var TableItem = Backbone.View.extend({
         var self = this;
         return self.model.id;
     },
+    renderIDColumn: function(td) {
+        var self = this;
+
+        // show content as link to open item
+        td.empty();
+        $("<a/>", {
+            href: "#",
+            text: self.id(),
+            click: function(e) {
+                self.table.open(self);
+                e.preventDefault();
+            }
+        }).appendTo(td);
+    },
     renderColumn: function(td) {
         var self = this;
+
+        // show content in plain text
         var name = td.attr("name");
-
-        // show cell content in plain text
         td.text(self.model.get(name));
-
-        // update cell automatically on model change
-        self.model.on("change:" + name, function(event) {
-            td.text(self.model.get(name));
-        });
     }
 });
 
@@ -401,6 +404,7 @@ var Table = Backbone.View.extend({
         Table.__super__.initialize.call(self, options);
         self.addDialog = options.addDialog;
         self.editDialog = options.editDialog;
+        self.viewDialog = options.viewDialog;
         self.tableItem = options.tableItem || TableItem;
 
         // number of table rows
@@ -411,6 +415,7 @@ var Table = Backbone.View.extend({
         self.totalPages = 1;
 
         self.thead = $("thead", self.$el);
+        self.buttons = $(".pki-table-buttons", self.thead);
 
         // setup search field handler
         self.searchField = $("input[name='search']", self.thead);
@@ -423,12 +428,12 @@ var Table = Backbone.View.extend({
         });
 
         // setup add button handler
-        $("button[name='add']", self.thead).click(function(e) {
+        $("button[name='add']", self.buttons).click(function(e) {
             self.add();
         });
 
         // setup remove button handler
-        $("button[name='remove']", self.thead).click(function(e) {
+        $("button[name='remove']", self.buttons).click(function(e) {
             var items = [];
             var message = "Are you sure you want to remove the following entries?\n";
 
@@ -510,6 +515,21 @@ var Table = Backbone.View.extend({
             e.preventDefault();
         });
     },
+    readOnly: function(value) {
+        var self = this;
+        if (value === undefined) {
+            var display = self.buttons.css("display");
+            value = display == "none";
+
+        } else if (value) {
+            self.buttons.hide();
+
+        } else {
+            self.buttons.show();
+        }
+
+        return value;
+    },
     render: function() {
         var self = this;
 
@@ -738,20 +758,27 @@ var PropertiesTable = Table.extend({
     open: function(item) {
         var self = this;
 
-        var dialog = self.editDialog;
+        var dialog;
+        if (self.readOnly()) {
+            dialog = self.viewDialog;
+
+        } else {
+            dialog = self.editDialog;
+
+            dialog.handler("save", function() {
+
+                // save property changes
+                dialog.save();
+                _.extend(item.property, dialog.attributes);
+
+                // redraw table after saving property changes
+                self.render();
+                dialog.close();
+            });
+		}
+
         dialog.attributes = _.clone(item.property);
 
-        dialog.handler("save", function() {
-
-            // save property changes
-            dialog.save();
-            _.extend(item.property, dialog.attributes);
-
-            // redraw table after saving property changes
-            self.render();
-            dialog.close();
-        });
-
         dialog.open();
     },
     add: function() {
@@ -790,3 +817,197 @@ var PropertiesTable = Table.extend({
         self.render();
     }
 });
+
+var DetailsPage = Page.extend({
+    initialize: function(options) {
+        var self = this;
+        DetailsPage.__super__.initialize.call(self, options);
+        self.model = options.model;
+        self.mode = "view";
+    },
+    load: function() {
+        var self = this;
+
+        self.menu = self.$(".pki-menu");
+        self.editLink = $("a[name='edit']", self.menu);
+        self.enableLink = $("a[name='enable']", self.menu);
+        self.disableLink = $("a[name='disable']", self.menu);
+
+        self.buttons = self.$(".pki-buttons");
+        self.cancelButton = $("button[name='cancel']", self.buttons);
+        self.saveButton = $("button[name='save']", self.buttons);
+
+        self.idField = self.$("input[name='id']");
+        self.statusField = self.$("input[name='status']");
+
+        var table = self.$("table[name='properties']");
+        self.propertiesButtons = $(".pki-table-buttons", table);
+        self.addButton = $("button[name='add']", self.propertiesButtons);
+        self.removeButton = $("button[name='remove']", self.propertiesButtons);
+
+        self.editLink.click(function(e) {
+            self.mode = "edit";
+            self.render();
+            e.preventDefault();
+        });
+
+        self.enableLink.click(function(e) {
+            var message = "Are you sure you want to enable this entry?";
+            if (!confirm(message)) return;
+            self.model.enable({
+                success: function(data,textStatus, jqXHR) {
+                    self.attributes = _.clone(self.model.attributes);
+                    self.render();
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    alert("ERROR: " + textStatus);
+                }
+            });
+        });
+
+        self.disableLink.click(function(e) {
+            var message = "Are you sure you want to disable this entry?";
+            if (!confirm(message)) return;
+            self.model.disable({
+                success: function(data,textStatus, jqXHR) {
+                    self.attributes = _.clone(self.model.attributes);
+                    self.render();
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    alert("ERROR: " + textStatus);
+                }
+            });
+        });
+
+        self.cancelButton.click(function(e) {
+            self.mode = "view";
+            self.render();
+            e.preventDefault();
+        });
+
+        self.saveButton.click(function(e) {
+            self.save();
+            e.preventDefault();
+        });
+
+        var dialog = self.$("#property-dialog");
+
+        var addDialog = new Dialog({
+            el: dialog,
+            title: "Add Property",
+            actions: ["cancel", "add"]
+        });
+
+        var editDialog = new Dialog({
+            el: dialog,
+            title: "Edit Property",
+            readonly: ["name"],
+            actions: ["cancel", "save"]
+        });
+
+        var viewDialog = new Dialog({
+            el: dialog,
+            title: "Property",
+            readonly: ["name", "value"],
+            actions: ["close"]
+        });
+
+        self.propertiesTable = new PropertiesTable({
+            el: table,
+            addDialog: addDialog,
+            editDialog: editDialog,
+            viewDialog: viewDialog,
+            pageSize: 10
+        });
+
+        self.render();
+    },
+    render: function() {
+        var self = this;
+
+        self.model.fetch({
+            success: function(model, response, options) {
+
+                self.attributes = _.clone(self.model.attributes);
+                self.propertiesTable.properties = self.attributes.properties;
+
+                self.$("span[name='id']").text(self.model.id);
+
+                var status = self.model.get("status");
+                if (status == "Disabled") {
+                    self.enableLink.show();
+                    self.disableLink.hide();
+                } else if (status == "Enabled") {
+                    self.enableLink.hide();
+                    self.disableLink.show();
+                }
+
+                if (self.mode == "view") {
+                    self.menu.show();
+                    self.buttons.hide();
+                    self.propertiesButtons.hide();
+
+                } else {
+                    self.menu.hide();
+                    self.buttons.show();
+                    self.propertiesButtons.show();
+                }
+
+                self.$(".pki-fields input").each(function(index) {
+                    var input = $(this);
+                    self.renderField(input);
+                });
+
+                self.propertiesTable.render();
+            }
+        });
+    },
+    renderField: function(input) {
+        var self = this;
+        var name = input.attr("name");
+        var value = self.attributes[name];
+        if (!value) value = "";
+        input.val(value);
+    },
+    save: function() {
+        var self = this;
+
+        self.$(".pki-fields input").each(function(index) {
+            var input = $(this);
+            self.saveField(input);
+        });
+
+        var attributes = {};
+        _.each(self.attributes, function(value, name) {
+            if (value == "") return;
+            attributes[name] = value;
+        });
+
+        attributes.properties = self.propertiesTable.properties;
+
+        // save changed attributes with PATCH
+        self.model.save(attributes, {
+            patch: true,
+            wait: true,
+            success: function(model, response, options) {
+                // redraw table after saving entries
+                self.mode = "view";
+                self.render();
+            },
+            error: function(model, response, options) {
+                if (response.status == 200) {
+                    // redraw table after saving entries
+                    self.mode = "view";
+                    self.render();
+                    return;
+                }
+                alert("ERROR: " + response.responseText);
+            }
+        });
+    },
+    saveField: function(input) {
+        var self = this;
+        var name = input.attr("name");
+        self.attributes[name] = input.val();
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index 059aa9eb60cdd7fe37f7c789f4358a8c8e6d5988..9c632e160b0e3bb182ef06d1b9a96ac20ff7a8a3 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -82,110 +82,31 @@ var AuthenticatorCollection = Collection.extend({
     }
 });
 
-var AuthenticatorDialog = Dialog.extend({
-    render: function() {
-        var self = this;
-        var status = self.model.get("status");
-        if (status == "Enabled") {
-            self.actions = ["disable", "cancel"];
-        } else if (status == "Disabled") {
-            self.actions = ["enable", "cancel"];
-        } else {
-            alert("ERROR: Invalid status: " + status);
-        }
-        AuthenticatorDialog.__super__.render.call(self);
-    },
-    performAction: function(action) {
-        var self = this;
-
-        if (action == "enable") {
-            self.model.enable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else if (action == "disable") {
-            self.model.disable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else {
-            AuthenticatorDialog.__super__.performAction.call(self, action);
-        }
-    }
-});
-
 var AuthenticatorsTable = Table.extend({
     initialize: function(options) {
         var self = this;
         AuthenticatorsTable.__super__.initialize.call(self, options);
-        self.url = options.url;
         self.container = options.container;
     },
     open: function(item) {
         var self = this;
 
-        // load entry properties
-        item.model.fetch({
-            success: function(model, response, options) {
-                self.container.load(self.url, function(response, status, xhr) {
-                    $("h1 span[name='id']", self.container).text(model.id);
+        var page = new DetailsPage({
+            el: self.container,
+            model: item.model
+        });
 
-                    var fields = $("div[name='authenticator']", self.container);
-                    $("input[name='id']", fields).val(model.id);
-                    $("input[name='status']", fields).val(model.get("status"));
-
-                    var dialog = $("#property-dialog");
-
-                    var addDialog = new Dialog({
-                        el: dialog,
-                        title: "Add Property",
-                        actions: ["cancel", "add"]
-                    });
-
-                    var editDialog = new Dialog({
-                        el: dialog,
-                        title: "Edit Property",
-                        readonly: ["name"],
-                        actions: ["cancel", "save"]
-                    });
-
-                    var properties = new PropertiesTable({
-                        el: $("table[name='authenticator-properties']"),
-                        properties: model.get("properties"),
-                        addDialog: addDialog,
-                        editDialog: editDialog,
-                        pageSize: 10
-                    });
-                    properties.render();
-                });
-            }
+        self.container.load("authenticator.html", function(response, status, xhr) {
+            page.load();
         });
     }
 });
 
 var AuthenticatorsPage = Page.extend({
     load: function(container) {
-        var editDialog = new AuthenticatorDialog({
-            el: $("#authenticator-dialog"),
-            title: "Edit Authenticator",
-            readonly: ["id", "status"]
-        });
-
         var table = new AuthenticatorsTable({
-            url: "authenticator.html",
             el: $("table[name='authenticators']"),
             collection: new AuthenticatorCollection(),
-            editDialog: editDialog,
             container: container
         });
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index 7c3743d45d68985ab4d7331cec05798fd2a7624d..36b17bc27e8092aca2726d271c576fba37d646f7 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -82,110 +82,31 @@ var ConnectionCollection = Collection.extend({
     }
 });
 
-var ConnectionDialog = Dialog.extend({
-    render: function() {
-        var self = this;
-        var status = self.model.get("status");
-        if (status == "Enabled") {
-            self.actions = ["disable", "cancel"];
-        } else if (status == "Disabled") {
-            self.actions = ["enable", "cancel"];
-        } else {
-            alert("ERROR: Invalid status: " + status);
-        }
-        ConnectionDialog.__super__.render.call(self);
-    },
-    performAction: function(action) {
-        var self = this;
-
-        if (action == "enable") {
-            self.model.enable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else if (action == "disable") {
-            self.model.disable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else {
-            ConnectionDialog.__super__.performAction.call(self, action);
-        }
-    }
-});
-
 var ConnectionsTable = Table.extend({
     initialize: function(options) {
         var self = this;
         ConnectionsTable.__super__.initialize.call(self, options);
-        self.url = options.url;
         self.container = options.container;
     },
     open: function(item) {
         var self = this;
 
-        // load entry properties
-        item.model.fetch({
-            success: function(model, response, options) {
-                self.container.load(self.url, function(response, status, xhr) {
-                    $("h1 span[name='id']", self.container).text(model.id);
+        var page = new DetailsPage({
+            el: self.container,
+            model: item.model
+        });
 
-                    var fields = $("div[name='connection']", self.container);
-                    $("input[name='id']", fields).val(model.id);
-                    $("input[name='status']", fields).val(model.get("status"));
-
-                    var dialog = $("#property-dialog");
-
-                    var addDialog = new Dialog({
-                        el: dialog,
-                        title: "Add Property",
-                        actions: ["cancel", "add"]
-                    });
-
-                    var editDialog = new Dialog({
-                        el: dialog,
-                        title: "Edit Property",
-                        readonly: ["name"],
-                        actions: ["cancel", "save"]
-                    });
-
-                    var properties = new PropertiesTable({
-                        el: $("table[name='connection-properties']"),
-                        properties: model.get("properties"),
-                        addDialog: addDialog,
-                        editDialog: editDialog,
-                        pageSize: 10
-                    });
-                    properties.render();
-                });
-            }
+        self.container.load("connection.html", function(response, status, xhr) {
+            page.load();
         });
     }
 });
 
 var ConnectionsPage = Page.extend({
     load: function(container) {
-        var editDialog = new ConnectionDialog({
-            el: $("#connection-dialog"),
-            title: "Edit Connection",
-            readonly: ["id", "status"]
-        });
-
         var table = new ConnectionsTable({
-            url: "connection.html",
             el: $("table[name='connections']"),
             collection: new ConnectionCollection(),
-            editDialog: editDialog,
             container: container
         });
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index 410328ca8155fe8d8da1365cee1e968b3e867b8b..caaa08ec645df14e730384c0be5adacbfa369123 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -82,117 +82,31 @@ var ProfileCollection = Collection.extend({
     }
 });
 
-var ProfileDialog = Dialog.extend({
-    render: function() {
-        var self = this;
-        var status = self.model.get("status");
-        if (status == "Enabled") {
-            self.actions = ["disable", "cancel"];
-        } else if (status == "Disabled") {
-            self.actions = ["enable", "cancel"];
-        } else {
-            alert("ERROR: Invalid status: " + status);
-        }
-        ProfileDialog.__super__.render.call(self);
-    },
-    performAction: function(action) {
-        var self = this;
-
-        if (action == "enable") {
-            self.model.enable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else if (action == "disable") {
-            self.model.disable({
-                success: function(data,textStatus, jqXHR) {
-                    self.close();
-                },
-                error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
-                }
-            });
-
-        } else {
-            ProfileDialog.__super__.performAction.call(self, action);
-        }
-    }
-});
-
 var ProfilesTable = Table.extend({
     initialize: function(options) {
         var self = this;
         ProfilesTable.__super__.initialize.call(self, options);
-        self.url = options.url;
         self.container = options.container;
     },
     open: function(item) {
         var self = this;
 
-        // load entry properties
-        item.model.fetch({
-            success: function(model, response, options) {
-                self.container.load(self.url, function(response, status, xhr) {
-                    $("h1 span[name='id']", self.container).text(model.id);
+        var page = new DetailsPage({
+            el: self.container,
+            model: item.model
+        });
 
-                    var fields = $("div[name='profile']", self.container);
-                    $("input[name='id']", fields).val(model.id);
-                    $("input[name='status']", fields).val(model.get("status"));
-
-                    var dialog = $("#property-dialog");
-
-                    var addDialog = new Dialog({
-                        el: dialog,
-                        title: "Add Property",
-                        actions: ["cancel", "add"]
-                    });
-
-                    var editDialog = new Dialog({
-                        el: dialog,
-                        title: "Edit Property",
-                        readonly: ["name"],
-                        actions: ["cancel", "save"]
-                    });
-
-                    var properties = new PropertiesTable({
-                        el: $("table[name='profile-properties']"),
-                        properties: model.get("properties"),
-                        addDialog: addDialog,
-                        editDialog: editDialog,
-                        pageSize: 10
-                    });
-                    properties.render();
-                });
-            }
+        self.container.load("profile.html", function(response, status, xhr) {
+            page.load();
         });
     }
 });
 
 var ProfilesPage = Page.extend({
-    initialize: function(options) {
-        var self = this;
-        ProfilesPage.__super__.initialize.call(self, options);
-        self.container = options.container;
-    },
     load: function(container) {
-        var self = this;
-
-        var editDialog = new ProfileDialog({
-            el: $("#profile-dialog"),
-            title: "Edit Profile",
-            readonly: ["id", "status"]
-        });
-
         var table = new ProfilesTable({
-            url: "profile.html",
             el: $("table[name='profiles']"),
             collection: new ProfileCollection(),
-            editDialog: editDialog,
             container: container
         });
         table.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/activities.html b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
index 3453f81e1e0665d0a44f892e0467eb5e58e7870f..244755f02c1ca6ba49e1c330c0631e39ced7bafe 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Activities</h1>
+<div class="pki-header">
+<span class="pki-title">Activities</span>
+</div>
 
 <table name="activities">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
              </span>
          </th>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
index 202e8a4767acad1efdbe030392456d55eefc00bb..b1cb3792d4613aa51f73f51c3f472090da145732 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
@@ -15,29 +15,47 @@
      Copyright (C) 2014 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Authenticator <span name="id"></span></h1>
+<div class="pki-header">
+
+<span class="pki-title">Authenticator <span name="id"></span></span>
+
+<span class="pki-actions">
+
+<span class="pki-menu" style="display: none;">
+<a name="edit" href="#">Edit Authenticator</a><br>
+<a name="enable" href="#">Enable Authenticator</a><a name="disable" href="#" style="display: none;">Disable Authenticator</a><br>
+</span>
+
+<span class="pki-buttons" style="display: none;">
+<button name="cancel">Cancel</button>
+<button name="save" class="primary">Save</button>
+</span>
+
+</span>
+
+</div>
 
 <div name="authenticator" class="pki-fields">
 <fieldset>
     <label>Authenticator ID</label>
-    <input name="id" readonly>
+    <input name="authenticatorID" readonly="readonly">
     <br>
     <label>Status</label>
-    <input name="status" readonly>
+    <input name="status" readonly="readonly">
     <br>
 </fieldset>
 </div>
 
 <h2>Properties</h2>
 
-<table name="authenticator-properties">
+<table name="properties">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons" style="display: none;">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -52,7 +70,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="authenticator_select" type="checkbox"><label for="authenticator_select">&nbsp;</label></td>
-        <td name="id" class="pki-property-name-column"><a href="authenticator.html">&nbsp;</a></td>
+        <td name="id" class="pki-property-name-column"><a href="#">&nbsp;</a></td>
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
@@ -91,6 +109,7 @@
         <footer>
             <button name="add" class="primary">Add</button>
             <button name="save" class="primary">Save</button>
+            <button name="close" class="primary">Close</button>
             <button name="cancel">Cancel</button>
         </footer>
     </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
index 29eb8261e815a87f10eb4d8fc02af0a125da46c2..318aa4a10f95c22bc927b9a53c45034e829f9757 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticators.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Authenticators</h1>
+<div class="pki-header">
+<span class="pki-title">Authenticators</span>
+</div>
 
 <table name="authenticators">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -64,23 +66,3 @@
     </tr>
 </tfoot>
 </table>
-
-<div id="authenticator-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Authenticator</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Authenticator ID</label><input name="id" type="text"><br>
-            <label>Status</label><input name="status" type="text"><br>
-        </fieldset>
-        <footer>
-            <button name="approve">Approve</button>
-            <button name="reject">Reject</button>
-            <button name="enable" class="primary">Enable</button>
-            <button name="disable" class="primary">Disable</button>
-            <button name="cancel">Cancel</button>
-        </footer>
-    </div>
-</div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/certs.html b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
index 473742d228d615fd0a7ab9a0f01a4ed76f8fbdd4..e694ac3fc185cd921f8d772c74271721e2c59bda 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Certificates</h1>
+<div class="pki-header">
+<span class="pki-title">Certificates</span>
+</div>
 
 <table name="certificates">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
              </span>
          </th>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connection.html b/base/tps-tomcat/shared/webapps/tps/ui/connection.html
index 2cafd0d9931b2c8e928165943d359ae32e42ed04..61cd4b9edec820ca624c7f82663569395f20f5db 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connection.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connection.html
@@ -15,29 +15,47 @@
      Copyright (C) 2014 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Connection <span name="id"></span></h1>
+<div class="pki-header">
+
+<span class="pki-title">Connection <span name="id"></span></span>
+
+<span class="pki-actions">
+
+<span class="pki-menu" style="display: none;">
+<a name="edit" href="#">Edit Connection</a><br>
+<a name="enable" href="#">Enable Connection</a><a name="disable" href="#" style="display: none;">Disable Connection</a><br>
+</span>
+
+<span class="pki-buttons" style="display: none;">
+<button name="cancel">Cancel</button>
+<button name="save" class="primary">Save</button>
+</span>
+
+</span>
+
+</div>
 
 <div name="connection" class="pki-fields">
 <fieldset>
     <label>Connection ID</label>
-    <input name="id" readonly>
+    <input name="id" readonly="readonly">
     <br>
     <label>Status</label>
-    <input name="status" readonly>
+    <input name="status" readonly="readonly">
     <br>
 </fieldset>
 </div>
 
 <h2>Properties</h2>
 
-<table name="connection-properties">
+<table name="properties">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons" style="display: none;">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -52,7 +70,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="connection_select" type="checkbox"><label for="connection_select">&nbsp;</label></td>
-        <td name="id" class="pki-property-name-column"><a href="connection.html">&nbsp;</a></td>
+        <td name="id" class="pki-property-name-column"><a href="#">&nbsp;</a></td>
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
@@ -91,6 +109,7 @@
         <footer>
             <button name="add" class="primary">Add</button>
             <button name="save" class="primary">Save</button>
+            <button name="close" class="primary">Close</button>
             <button name="cancel">Cancel</button>
         </footer>
     </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connections.html b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
index 404a7234f95eae10b2323bb5d5e98a118fdb4639..636cc4244bfe13371febf4c3ead271e33325a2ef 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connections.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Connections</h1>
+<div class="pki-header">
+<span class="pki-title">Connections</span>
+</div>
 
 <table name="connections">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -64,23 +66,3 @@
     </tr>
 </tfoot>
 </table>
-
-<div id="connection-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Connection</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Connection ID</label><input name="id" type="text"><br>
-            <label>Status</label><input name="status" type="text"><br>
-        </fieldset>
-        <footer>
-            <button name="approve">Approve</button>
-            <button name="reject">Reject</button>
-            <button name="enable" class="primary">Enable</button>
-            <button name="disable" class="primary">Disable</button>
-            <button name="cancel">Cancel</button>
-        </footer>
-    </div>
-</div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/groups.html b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
index 1c001a029a5c9e755012d6a2a71c4509ab0de034..bb481a8d5ebf1d8877cde9414f531fea1291496f 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Groups</h1>
+<div class="pki-header">
+<span class="pki-title">Groups</span>
+</div>
 
 <table name="groups">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile.html b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
index a5180eecb6044ae7c35cb71d0e89ede403755ca8..337c9f102c44dc109161aa011c2e82651fb2a805 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
@@ -15,29 +15,47 @@
      Copyright (C) 2014 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Profile <span name="id"></span></h1>
+<div class="pki-header">
+
+<span class="pki-title">Profile <span name="id"></span></span>
+
+<span class="pki-actions">
+
+<span class="pki-menu" style="display: none;">
+<a name="edit" href="#">Edit Profile</a><br>
+<a name="enable" href="#">Enable Profile</a><a name="disable" href="#" style="display: none;">Disable Profile</a><br>
+</span>
+
+<span class="pki-buttons" style="display: none;">
+<button name="cancel">Cancel</button>
+<button name="save" class="primary">Save</button>
+</span>
+
+</span>
+
+</div>
 
 <div name="profile" class="pki-fields">
 <fieldset>
     <label>Profile ID</label>
-    <input name="id" readonly>
+    <input name="profileID" readonly="readonly">
     <br>
     <label>Status</label>
-    <input name="status" readonly>
+    <input name="status" readonly="readonly">
     <br>
 </fieldset>
 </div>
 
 <h2>Properties</h2>
 
-<table name="profile-properties">
+<table name="properties">
 <thead>
     <tr>
          <th class="pki-table-actions" colspan="3">
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons" style="display: none;">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -52,7 +70,7 @@
 <tbody>
     <tr>
         <td class="pki-select-column"><input id="profile_select" type="checkbox"><label for="profile_select">&nbsp;</label></td>
-        <td name="id" class="pki-property-name-column"><a href="profile.html">&nbsp;</a></td>
+        <td name="id" class="pki-property-name-column"><a href="#">&nbsp;</a></td>
         <td name="status">&nbsp;</td>
     </tr>
 </tbody>
@@ -91,6 +109,7 @@
         <footer>
             <button name="add" class="primary">Add</button>
             <button name="save" class="primary">Save</button>
+            <button name="close" class="primary">Close</button>
             <button name="cancel">Cancel</button>
         </footer>
     </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
index 2ea3d48c1b54b20f5d52d2184cfe54843dc7b279..ca36f3ce503607980f144f7217e416896a85ac00 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profiles.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Profiles</h1>
+<div class="pki-header">
+<span class="pki-title">Profiles</span>
+</div>
 
 <table name="profiles">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
@@ -64,23 +66,3 @@
     </tr>
 </tfoot>
 </table>
-
-<div id="profile-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Profile</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Profile ID</label><input name="id" type="text"><br>
-            <label>Status</label><input name="status" type="text"><br>
-        </fieldset>
-        <footer>
-            <button name="approve">Approve</button>
-            <button name="reject">Reject</button>
-            <button name="enable" class="primary">Enable</button>
-            <button name="disable" class="primary">Disable</button>
-            <button name="cancel">Cancel</button>
-        </footer>
-    </div>
-</div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
index 978f6cd37a16bf7c728644e27091731c9c109709..d2b4e2b9f0e5247bfecd27b0a31bf5d7dc224551 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Self Tests</h1>
+<div class="pki-header">
+<span class="pki-title">Self Tests</span>
+</div>
 
 <table name="selftests">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
              </span>
          </th>
     </tr>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
index 48fc8c285fe826000980cd13d69dd65eef024bae..61c46b358e5aed84a4393aecc72cb1cab24b79dd 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Tokens</h1>
+<div class="pki-header">
+<span class="pki-title">Tokens</span>
+</div>
 
 <table name="tokens">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/users.html b/base/tps-tomcat/shared/webapps/tps/ui/users.html
index b504d419d3372069e15ecda507df653dd8b9b89a..54e6947aee9ce5f2c94fcf8759263555fb6efe27 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/users.html
@@ -15,7 +15,9 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<h1>Users</h1>
+<div class="pki-header">
+<span class="pki-title">Users</span>
+</div>
 
 <table name="users">
 <thead>
@@ -24,7 +26,7 @@
              <span name="search">
                  <input name="search" type="text" placeholder="Search...">
              </span>
-             <span name="actions">
+             <span class="pki-table-buttons">
                  <button name="add">Add</button>
                  <button name="remove">Remove</button>
              </span>
-- 
1.8.4.2

