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

20 files changed, 320 insertions, 135 deletions

diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 9ba801012..ce5d5ccff 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) {
-            self.open(td);
             e.preventDefault();
+            self.open(td);
         });
     },
     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") {
-            self.menu.show();
+            // 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();
 
         } 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 37ef595b9..1996acb42 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 77d9c0a8d..771d8f50f 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 b7023faf1..26cafdedb 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 707b4410b..17aa26104 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 c4d0e0e3e..c3b1f21c6 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 760cfebfe..8f6aabfb3 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 55b4c5c9b..08c5b49d2 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 3671c8d3c..02a97c233 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 11312fbc0..15254c44c 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 54badf178..79f16dd20 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 0d2e46ccd..293488396 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 7bf9564cf..ccf84bdfc 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 3544d8eac..e8be63624 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 b4ca4c902..15066b052 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 10bfb6369..52c4284f7 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 cb3afb30e..c4d0edb33 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 000000000..6f869a631
--- /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 ea3c4a5c2..803b39196 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 4190a0dde..847f0f8b2 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>