From 6139bd70ff50fc9e78da475b03380ec8c43c73ec Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Fri, 11 Apr 2014 12:18:53 -0400
Subject: [PATCH] Replaced token dialog with token page.

The dialog used to edit token attributes has been replaced with a
details page since it will be required for breadcrumbs. A new HTML
template has been added for this page.

Changing token status now can be done both in token list page and
in token details page.

The EntryPage has been modified such that it requires the editable
fields to be specified for the add mode.

To improve the appearance, the input fields in all dialogs and pages
will now appear as read-only while the data is still loading.

Ticket #654
---
 base/server/share/webapps/pki/js/pki-ui.js         |  50 ++++---
 .../shared/webapps/tps/js/authenticator.js         |   1 +
 .../tps-tomcat/shared/webapps/tps/js/connection.js |   1 +
 .../shared/webapps/tps/js/profile-mapping.js       |   1 +
 base/tps-tomcat/shared/webapps/tps/js/profile.js   |   3 +-
 base/tps-tomcat/shared/webapps/tps/js/token.js     | 143 ++++++++++++++++-----
 .../shared/webapps/tps/ui/activities.html          |  21 ++-
 base/tps-tomcat/shared/webapps/tps/ui/audit.html   |   6 +-
 .../shared/webapps/tps/ui/authenticator.html       |   6 +-
 base/tps-tomcat/shared/webapps/tps/ui/certs.html   |  27 ++--
 base/tps-tomcat/shared/webapps/tps/ui/config.html  |   6 +-
 .../shared/webapps/tps/ui/connection.html          |   6 +-
 base/tps-tomcat/shared/webapps/tps/ui/groups.html  |   6 +-
 base/tps-tomcat/shared/webapps/tps/ui/index.html   |   2 +-
 .../shared/webapps/tps/ui/profile-mapping.html     |   6 +-
 base/tps-tomcat/shared/webapps/tps/ui/profile.html |   6 +-
 .../shared/webapps/tps/ui/selftests.html           |  15 ++-
 base/tps-tomcat/shared/webapps/tps/ui/token.html   |  83 ++++++++++++
 base/tps-tomcat/shared/webapps/tps/ui/tokens.html  |  48 +++----
 base/tps-tomcat/shared/webapps/tps/ui/users.html   |  18 ++-
 20 files changed, 320 insertions(+), 135 deletions(-)
 create mode 100644 base/tps-tomcat/shared/webapps/tps/ui/token.html

diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 9ba8010124bd3bb8c72c47052347b8811b920723..ce5d5ccffdf37e1b1265fe20ab40a03de05c056e 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -473,13 +473,14 @@ var TableItem = Backbone.View.extend({
 
         // add link handler
         $("a", td).click(function(e) {
+            e.preventDefault();
             self.open(td);
-            e.preventDefault();
         });
     },
     open: function(td) {
         var self = this;
-        self.table.open(self);
+        var column = td.attr("name");
+        self.table.open(self, column);
     }
 });
 
@@ -985,12 +986,6 @@ var EntryPage = Page.extend({
             // Use blank entry.
             self.entry = {};
 
-            // All fields are editable.
-            self.$(".pki-fields input").each(function(index) {
-                var input = $(this);
-                input.removeAttr("readonly");
-            });
-
         } else {
             // Use fetched entry.
             self.entry = _.clone(self.model.attributes);
@@ -998,33 +993,32 @@ var EntryPage = Page.extend({
             // Show entry ID in the title.
             self.$("span[name='id']").text(self.entry.id);
 
-            if (self.mode == "edit") {
-                // Show editable fields.
-                self.$(".pki-fields input").each(function(index) {
-                    var input = $(this);
-                    var name = input.attr("name");
-                    if (_.contains(self.editable, name)) {
-                        input.removeAttr("readonly");
-                    } else {
-                        input.attr("readonly", "readonly");
-                    }
-                });
-
-            } else { // self.mode == "view"
-                // All fields are read-only.
-                self.$(".pki-fields input").each(function(index) {
-                    var input = $(this);
-                    input.attr("readonly", "readonly");
-                });
-            }
         }
 
         if (self.mode == "view") {
+            // All fields are read-only.
+            self.$(".pki-fields input").each(function(index) {
+                var input = $(this);
+                input.attr("readonly", "readonly");
+            });
+
+            self.buttons.hide();
             self.menu.show();
-            self.buttons.hide();
 
         } else {
             self.menu.hide();
+
+            // Show editable fields.
+            self.$(".pki-fields input").each(function(index) {
+                var input = $(this);
+                var name = input.attr("name");
+                if (_.contains(self.editable, name)) {
+                    input.removeAttr("readonly");
+                } else {
+                    input.attr("readonly", "readonly");
+                }
+            });
+
             self.buttons.show();
         }
 
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index 37ef595b9f3cabbf5baede79bfbb049d48e25d22..1996acb42f1cb4444db2bdd2cd94095a8894c57f 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -107,6 +107,7 @@ var AuthenticatorsTable = ModelTable.extend({
             url: "authenticator.html",
             model: new AuthenticatorModel(),
             mode: "add",
+            editable: ["authenticatorID"],
             parentPage: self.parentPage
         });
 
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index 77d9c0a8d24e0cdd582392bcab1dd44d6ca9b94a..771d8f50fc885837f59c08d61cc7909d1902f417 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -107,6 +107,7 @@ var ConnectionsTable = ModelTable.extend({
             url: "connection.html",
             model: new ConnectionModel(),
             mode: "add",
+            editable: ["connectionID"],
             parentPage: self.parentPage
         });
 
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js b/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js
index b7023faf1a27a6746d2e32f9eee74e203546b4b4..26cafdedb53b40aa56e733585b40b0b749c0e73b 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile-mapping.js
@@ -107,6 +107,7 @@ var ProfileMappingsTable = ModelTable.extend({
             url: "profile-mapping.html",
             model: new ProfileMappingModel(),
             mode: "add",
+            editable: ["profileMappingID"],
             parentPage: self.parentPage
         });
 
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index 707b4410b86224afaffc9aa222b2c5628c934067..17aa2610456a7eef594583f080a845d5085b5c20 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -88,7 +88,7 @@ var ProfilesTable = ModelTable.extend({
         ProfilesTable.__super__.initialize.call(self, options);
         self.parentPage = options.parentPage;
     },
-    open: function(item) {
+    open: function(item, column) {
         var self = this;
 
         var page = new EntryWithPropertiesPage({
@@ -107,6 +107,7 @@ var ProfilesTable = ModelTable.extend({
             url: "profile.html",
             model: new ProfileModel(),
             mode: "add",
+            editable: ["profileID"],
             parentPage: self.parentPage
         });
 
diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js
index c4d0e0e3e644bc576434c5fb52f535aea8b24056..c3b1f21c62af23fdac483dd0023e78d5198c5b06 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/token.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/token.js
@@ -97,29 +97,113 @@ var TokenCollection = Collection.extend({
     }
 });
 
-var TokenTableItem = TableItem.extend({
+var TokenPage = EntryPage.extend({
     initialize: function(options) {
         var self = this;
-        PropertiesTableItem.__super__.initialize.call(self, options);
+        TokenPage.__super__.initialize.call(self, options);
+        self.parentPage = options.parentPage;
     },
-    open: function(td) {
+    setup: function() {
         var self = this;
 
-        var name = td.attr("name");
-        if (name != "status") {
-            TokenTableItem.__super__.open.call(self, td);
+        TokenPage.__super__.setup.call(self);
+
+        self.changeStatusLink = $("a[name='changeStatus']", self.menu);
+
+        self.changeStatusLink.click(function(e) {
+
+            var dialog = new Dialog({
+                el: $("#token-status-dialog"),
+                title: "Change Token Status",
+                readonly: ["tokenID"],
+                actions: ["cancel", "save"]
+            });
+
+            dialog.entry = _.clone(self.model.attributes);
+
+            dialog.handler("save", function() {
+
+                // save changes
+                dialog.save();
+
+                // check if the status was changed
+                if (dialog.entry.status != self.model.attributes.status) {
+
+                    self.model.changeStatus({
+                        status: dialog.entry.status,
+                        success: function(data, textStatus, jqXHR) {
+                            self.render();
+                        },
+                        error: function(jqXHR, textStatus, errorThrow) {
+                            new ErrorDialog({
+                                el: $("#error-dialog"),
+                                title: "HTTP Error " + jqXHR.responseJSON.Code,
+                                content: jqXHR.responseJSON.Message
+                            }).open();
+                        }
+                    });
+                }
+
+                dialog.close();
+            });
+
+            dialog.open();
+        });
+    },
+    renderContent: function() {
+        var self = this;
+
+        TokenPage.__super__.renderContent.call(self);
+
+        if (self.mode == "add") {
+            self.changeStatusLink.hide();
+        } else {
+            self.changeStatusLink.show();
+        }
+    },
+    close: function() {
+        var self = this;
+        if (self.parentPage) {
+            self.parentPage.open();
+        } else {
+            TokenPage.__super__.close.call(self);
+        }
+    }
+});
+
+var TokensTable = ModelTable.extend({
+    initialize: function(options) {
+        var self = this;
+        TokensTable.__super__.initialize.call(self, options);
+        self.parentPage = options.parentPage;
+    },
+    open: function(item, column) {
+        var self = this;
+
+        var model = self.collection.get(item.entry.id);
+
+        if (column == "id") {
+            var page = new TokenPage({
+                el: self.parentPage.$el,
+                url: "token.html",
+                model: model,
+                editable: ["userID", "type", "appletID", "keyInfo"]
+            });
+
+            page.open();
+
             return;
         }
 
         var dialog = new Dialog({
-            el: $("#token-state-dialog"),
-            title: "Change Token State",
+            el: $("#token-status-dialog"),
+            title: "Change Token Status",
             readonly: ["tokenID", "userID", "type",
                 "appletID", "keyInfo", "createTimestamp", "modifyTimestamp"],
             actions: ["cancel", "save"]
         });
 
-        dialog.entry = _.clone(self.entry);
+        dialog.entry = _.clone(model.attributes);
 
         dialog.handler("save", function() {
 
@@ -127,13 +211,12 @@ var TokenTableItem = TableItem.extend({
             dialog.save();
 
             // check if the status was changed
-            if (self.entry.status != dialog.entry.status) {
+            if (dialog.entry.status != model.attributes.status) {
 
-                var model = self.table.collection.get(self.entry.id);
                 model.changeStatus({
                     status: dialog.entry.status,
                     success: function(data, textStatus, jqXHR) {
-                        self.table.render();
+                        self.render();
                     },
                     error: function(jqXHR, textStatus, errorThrow) {
                         new ErrorDialog({
@@ -149,33 +232,31 @@ var TokenTableItem = TableItem.extend({
         });
 
         dialog.open();
+    },
+    add: function() {
+        var self = this;
+
+        var page = new TokenPage({
+            el: self.parentPage.$el,
+            url: "token.html",
+            model: new TokenModel(),
+            mode: "add",
+            editable: ["tokenID", "userID", "type", "appletID", "keyInfo"],
+            parentPage: self.parentPage
+        });
+
+        page.open();
     }
 });
 
-var TokenPage = Page.extend({
+var TokensPage = Page.extend({
     load: function() {
         var self = this;
 
-        var addDialog = new Dialog({
-            el: $("#token-dialog"),
-            title: "Add Token",
-            readonly: ["statusLabel", "createTimestamp", "modifyTimestamp"],
-            actions: ["cancel", "add"]
-        });
-
-        var editDialog = new Dialog({
-            el: $("#token-dialog"),
-            title: "Edit Token",
-            readonly: ["tokenID", "statusLabel", "createTimestamp", "modifyTimestamp"],
-            actions: ["cancel", "save"]
-        });
-
-        var table = new ModelTable({
+        var table = new TokensTable({
             el: $("table[name='tokens']"),
             collection: new TokenCollection(),
-            addDialog: addDialog,
-            editDialog: editDialog,
-            tableItem: TokenTableItem
+            parentPage: self
         });
 
         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 760cfebfe158483174c0166988ad15faa114e7fc..8f6aabfb3b8f92a058afe77741c7fdf10022fa40 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/activities.html
@@ -84,13 +84,20 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Activity ID</label><input name="id" type="text"><br>
-            <label>Token ID</label><input name="tokenID" type="text"><br>
-            <label>User ID</label><input name="userID" type="text"><br>
-            <label>IP</label><input name="ip" type="text"><br>
-            <label>operation</label><input name="operation" type="text"><br>
-            <label>Result</label><input name="result" type="text"><br>
-            <label>Date</label><input name="date" type="text"><br>
+            <label>Activity ID</label>
+            <input name="id" readonly="readonly"><br>
+            <label>Token ID</label>
+            <input name="tokenID" readonly="readonly"><br>
+            <label>User ID</label>
+            <input name="userID" readonly="readonly"><br>
+            <label>IP</label>
+            <input name="ip" readonly="readonly"><br>
+            <label>operation</label>
+            <input name="operation" readonly="readonly"><br>
+            <label>Result</label>
+            <input name="result" readonly="readonly"><br>
+            <label>Date</label>
+            <input name="date" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="save" class="primary">Save</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/audit.html b/base/tps-tomcat/shared/webapps/tps/ui/audit.html
index 55b4c5c9b3c82745fbbed13fcc5cacb4deeaf82b..08c5b49d26d891dd83fb24cdb9b1c81fe8cda98e 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/audit.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/audit.html
@@ -109,8 +109,10 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Name</label><input name="name" type="text"><br>
-            <label>Value</label><input name="value" type="text"><br>
+            <label>Name</label>
+            <input name="name" readonly="readonly"><br>
+            <label>Value</label>
+            <input name="value" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="add" class="primary">Add</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
index 3671c8d3c50c412ffc4f683986996d32728bd968..02a97c233588f25ece616bbda371c0dc7af18f15 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
@@ -105,8 +105,10 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Name</label><input name="name" type="text"><br>
-            <label>Value</label><input name="value" type="text"><br>
+            <label>Name</label>
+            <input name="name" readonly="readonly"><br>
+            <label>Value</label>
+            <input name="value" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="add" class="primary">Add</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/certs.html b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
index 11312fbc0c9b9803653be4d55df3678fffcc43cb..15254c44c843130b51b58aec1325217a1896dfcb 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/certs.html
@@ -88,15 +88,24 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Certificate ID</label><input name="id" type="text"><br>
-            <label>Serial Number</label><input name="serialNumber" type="text"><br>
-            <label>Subject</label><input name="subject" type="text"><br>
-            <label>Token ID</label><input name="tokenID" type="text"><br>
-            <label>User ID</label><input name="userID" type="text"><br>
-            <label>Key Type</label><input name="keyType" type="text"><br>
-            <label>Status</label><input name="status" type="text"><br>
-            <label>Created</label><input name="createTime" type="text"><br>
-            <label>Modified</label><input name="modifyTime" type="text"><br>
+            <label>Certificate ID</label>
+            <input name="id" readonly="readonly"><br>
+            <label>Serial Number</label>
+            <input name="serialNumber" readonly="readonly"><br>
+            <label>Subject</label>
+            <input name="subject" readonly="readonly"><br>
+            <label>Token ID</label>
+            <input name="tokenID" readonly="readonly"><br>
+            <label>User ID</label>
+            <input name="userID" readonly="readonly"><br>
+            <label>Key Type</label>
+            <input name="keyType" readonly="readonly"><br>
+            <label>Status</label>
+            <input name="status" readonly="readonly"><br>
+            <label>Created</label>
+            <input name="createTime" readonly="readonly"><br>
+            <label>Modified</label>
+            <input name="modifyTime" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="save" class="primary">Save</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/config.html b/base/tps-tomcat/shared/webapps/tps/ui/config.html
index 54badf178766ebbf49c9143ee7271259c8f812e6..79f16dd20964d168fec2728cdeb4eff6a30154ab 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/config.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/config.html
@@ -91,8 +91,10 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Name</label><input name="name" type="text"><br>
-            <label>Value</label><input name="value" type="text"><br>
+            <label>Name</label>
+            <input name="name" readonly="readonly"><br>
+            <label>Value</label>
+            <input name="value" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="add" class="primary">Add</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connection.html b/base/tps-tomcat/shared/webapps/tps/ui/connection.html
index 0d2e46ccd4c859df49351c7f7c1e49d1107d1ee3..29348839681204c8479e7d6eb9f9f694ce67cd92 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connection.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connection.html
@@ -105,8 +105,10 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Name</label><input name="name" type="text"><br>
-            <label>Value</label><input name="value" type="text"><br>
+            <label>Name</label>
+            <input name="name" readonly="readonly"><br>
+            <label>Value</label>
+            <input name="value" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="add" class="primary">Add</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/groups.html b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
index 7bf9564cfab1273e9159b7a685b864d1e6f6483d..ccf84bdfc842ac798ae161fd66afed32f010979b 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/groups.html
@@ -76,8 +76,10 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Group ID</label><input name="groupID" type="text"><br>
-            <label>Description</label><input name="description" type="text"><br>
+            <label>Group ID</label>
+            <input name="groupID" readonly="readonly"><br>
+            <label>Description</label>
+            <input name="description" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="add" class="primary">Add</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/index.html b/base/tps-tomcat/shared/webapps/tps/ui/index.html
index 3544d8eac9b9508fe46de38f3da86803eec2d66c..e8be636241b16afffc1c337d50c71e0ddecd0833 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/index.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/index.html
@@ -111,7 +111,7 @@ $(function() {
         url: "selftests.html"
     }));
 
-    navigation.page("tokens", new TokenPage({
+    navigation.page("tokens", new TokensPage({
         el: content,
         url: "tokens.html"
     }));
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html b/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
index b4ca4c902b90cdb655f9819fc747fcc41b1d3c0c..15066b052f0b53ca3370c1b1f0c0838e7ca285d9 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
@@ -105,8 +105,10 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Name</label><input name="name" type="text"><br>
-            <label>Value</label><input name="value" type="text"><br>
+            <label>Name</label>
+            <input name="name" readonly="readonly"><br>
+            <label>Value</label>
+            <input name="value" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="add" class="primary">Add</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile.html b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
index 10bfb63691465167cb58bf0581a0f335b53d0c22..52c4284f77ecd30d769229c55956a99f38425b70 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
@@ -105,8 +105,10 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Name</label><input name="name" type="text"><br>
-            <label>Value</label><input name="value" type="text"><br>
+            <label>Name</label>
+            <input name="name" readonly="readonly"><br>
+            <label>Value</label>
+            <input name="value" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="add" class="primary">Add</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
index cb3afb30e201f850eaad8e9a3c6bed2625b3b43d..c4d0edb33cb22a5e23e047d5685c0eb4c3485ddd 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/selftests.html
@@ -80,11 +80,16 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Self Test ID</label><input name="id" type="text"><br>
-            <label>Enabled at Startup</label><input name="enabledAtStartup" type="text"><br>
-            <label>Critical at Startup</label><input name="criticalAtStartup" type="text"><br>
-            <label>Enabled on Demand</label><input name="enabledOnDemand" type="text"><br>
-            <label>Critical on Demand</label><input name="criticalOnDemand" type="text"><br>
+            <label>Self Test ID</label>
+            <input name="id" readonly="readonly"><br>
+            <label>Enabled at Startup</label>
+            <input name="enabledAtStartup" readonly="readonly"><br>
+            <label>Critical at Startup</label>
+            <input name="criticalAtStartup" readonly="readonly"><br>
+            <label>Enabled on Demand</label>
+            <input name="enabledOnDemand" readonly="readonly"><br>
+            <label>Critical on Demand</label>
+            <input name="criticalOnDemand" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="save" class="primary">Save</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/token.html b/base/tps-tomcat/shared/webapps/tps/ui/token.html
new file mode 100644
index 0000000000000000000000000000000000000000..6f869a631c3d640cff840ea89f8f9931e67d26c9
--- /dev/null
+++ b/base/tps-tomcat/shared/webapps/tps/ui/token.html
@@ -0,0 +1,83 @@
+<!-- --- BEGIN COPYRIGHT BLOCK ---
+     This program is free software; you can redistribute it and/or modify
+     it under the terms of the GNU General Public License as published by
+     the Free Software Foundation; version 2 of the License.
+
+     This program is distributed in the hope that it will be useful,
+     but WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     GNU General Public License for more details.
+
+     You should have received a copy of the GNU General Public License along
+     with this program; if not, write to the Free Software Foundation, Inc.,
+     51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+     Copyright (C) 2014 Red Hat, Inc.
+     All rights reserved.
+     --- END COPYRIGHT BLOCK --- -->
+<div class="pki-header">
+
+<span class="pki-title">Token <span name="id"></span></span>
+
+<span class="pki-actions">
+
+<span class="pki-menu" style="display: none;">
+<a name="edit" href="#">Edit</a><br>
+<a name="changeStatus" href="#">Change Status</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="token" class="pki-fields">
+<fieldset>
+    <label>Token ID</label>
+    <input name="tokenID" readonly="readonly"><br>
+    <label>User ID</label>
+    <input name="userID" readonly="readonly"><br>
+    <label>Type</label>
+    <input name="type" readonly="readonly"><br>
+    <label>Status</label>
+    <input name="statusLabel" readonly="readonly"><br>
+    <label>Applet ID</label>
+    <input name="appletID" readonly="readonly"><br>
+    <label>Key Info</label>
+    <input name="keyInfo" readonly="readonly"><br>
+    <label>Created</label>
+    <input name="createTimestamp" readonly="readonly"><br>
+    <label>Modified</label>
+    <input name="modifyTimestamp" readonly="readonly"><br>
+</fieldset>
+</div>
+
+<div id="token-status-dialog" class="rcue-dialog-background">
+    <div class="rcue-dialog">
+        <header>
+            <h1>Change Token Status</h1>
+            <a class="rcue-button-close" href="#"></a>
+        </header>
+        <fieldset>
+            <label>Token ID</label>
+            <input name="tokenID" readonly="readonly"><br>
+            <label>Status</label>
+            <select name="status">
+            <option value="UNINITIALIZED">Uninitialized</option>
+            <option value="ACTIVE">Active</option>
+            <option value="TEMP_LOST">Temporarily lost</option>
+            <option value="PERM_LOST">Permanently lost</option>
+            <option value="DAMAGED">Physically damaged</option>
+            <option value="TERMINATED">Terminated</option>
+            </select><br>
+        </fieldset>
+        <footer>
+            <button name="save" class="primary">Save</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
index ea3c4a5c25d301b6a7d494868de7f23f57e74932..803b391963bc22416e91d0b375094bca1e66a7ae 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
@@ -81,41 +81,19 @@
 </tfoot>
 </table>
 
-<div id="token-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Token</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Token ID</label><input name="tokenID" type="text"><br>
-            <label>User ID</label><input name="userID" type="text"><br>
-            <label>Type</label><input name="type" type="text"><br>
-            <label>Status</label><input name="statusLabel" type="text"><br>
-            <label>Applet ID</label><input name="appletID" type="text"><br>
-            <label>Key Info</label><input name="keyInfo" type="text"><br>
-            <label>Created</label><input name="createTimestamp" type="text"><br>
-            <label>Modified</label><input name="modifyTimestamp" type="text"><br>
-        </fieldset>
-        <footer>
-            <button name="add" class="primary">Add</button>
-            <button name="save" class="primary">Save</button>
-            <button name="remove" class="primary">Remove</button>
-            <button name="cancel">Cancel</button>
-        </footer>
-    </div>
-</div>
-
-<div id="token-state-dialog" class="rcue-dialog-background">
+<div id="token-status-dialog" class="rcue-dialog-background">
     <div class="rcue-dialog">
         <header>
             <h1>Change Token Status</h1>
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>Token ID</label><input name="tokenID" type="text"><br>
-            <label>User ID</label><input name="userID" type="text"><br>
-            <label>Type</label><input name="type" type="text"><br>
+            <label>Token ID</label>
+            <input name="tokenID" readonly="readonly"><br>
+            <label>User ID</label>
+            <input name="userID" readonly="readonly"><br>
+            <label>Type</label>
+            <input name="type" readonly="readonly"><br>
             <label>Status</label>
             <select name="status">
             <option value="UNINITIALIZED">Uninitialized</option>
@@ -125,10 +103,14 @@
             <option value="DAMAGED">Physically damaged</option>
             <option value="TERMINATED">Terminated</option>
             </select><br>
-            <label>Applet ID</label><input name="appletID" type="text"><br>
-            <label>Key Info</label><input name="keyInfo" type="text"><br>
-            <label>Created</label><input name="createTimestamp" type="text"><br>
-            <label>Modified</label><input name="modifyTimestamp" type="text"><br>
+            <label>Applet ID</label>
+            <input name="appletID" readonly="readonly"><br>
+            <label>Key Info</label>
+            <input name="keyInfo" readonly="readonly"><br>
+            <label>Created</label>
+            <input name="createTimestamp" readonly="readonly"><br>
+            <label>Modified</label>
+            <input name="modifyTimestamp" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="save" class="primary">Save</button>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/users.html b/base/tps-tomcat/shared/webapps/tps/ui/users.html
index 4190a0dde8bec3e49d425504fab2c1bfd9a334c1..847f0f8b2f1f5a08044fa640ee6daa272b1d820f 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/users.html
@@ -76,12 +76,18 @@
             <a class="rcue-button-close" href="#"></a>
         </header>
         <fieldset>
-            <label>User ID</label><input name="userID" type="text"><br>
-            <label>Full Name</label><input name="fullName" type="text"><br>
-            <label>Email</label><input name="email" type="text"><br>
-            <label>Type</label><input name="type" type="text"><br>
-            <label>State</label><input name="state" type="text"><br>
-            <label>TPS Profiles</label><input name="tpsProfiles" type="text"><br>
+            <label>User ID</label>
+            <input name="userID" readonly="readonly"><br>
+            <label>Full Name</label>
+            <input name="fullName" readonly="readonly"><br>
+            <label>Email</label>
+            <input name="email" readonly="readonly"><br>
+            <label>Type</label>
+            <input name="type" readonly="readonly"><br>
+            <label>State</label>
+            <input name="state" readonly="readonly"><br>
+            <label>TPS Profiles</label>
+            <input name="tpsProfiles" readonly="readonly"><br>
         </fieldset>
         <footer>
             <button name="add" class="primary">Add</button>
-- 
1.8.4.2

