Added edit dialog boxes.

New dialog boxes have been added to provide interface for editing
TPS resourcers.

Ticket #654

20 files changed, 716 insertions, 29 deletions

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index 5b0d3f1b2..94b559451 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -29,3 +29,21 @@ body {
   margin: 48px auto;
   width: 850px;
 }
+
+.rcue-dialog-background {
+  display: none;
+}
+
+input[readonly="readonly"] {
+  background-image: none;
+  border: 1px solid #FFFFFF;
+}
+
+input[readonly="readonly"]:focus {
+  border: 1px solid #FFFFFF;
+  box-shadow: none;
+}
+
+input[readonly="readonly"]:enabled:hover {
+  border-color: #FFFFFF;
+}
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index c94a04fa2..7fbb8341a 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -19,6 +19,24 @@
  * @author Endi S. Dewata
  */
 
+var Model = Backbone.Model.extend({
+    parseResponse: function(response) {
+        return response;
+    },
+    parse: function(response, options) {
+        return this.parseResponse(response);
+    },
+    createRequest: function(attributes) {
+        return attributes;
+    },
+    save: function(attributes, options) {
+        var self = this;
+        if (attributes == undefined) attributes = self.attributes;
+        var request = self.createRequest(attributes);
+        Model.__super__.save.call(self, request, options);
+    }
+});
+
 var Collection = Backbone.Collection.extend({
     urlRoot: null,
     initialize: function(options) {
@@ -85,22 +103,184 @@ var Collection = Backbone.Collection.extend({
     }
 });
 
+var Dialog = Backbone.View.extend({
+    initialize: function(options) {
+        var self = this;
+        Dialog.__super__.initialize.call(self, options);
+
+        self.title = options.title;
+
+        self.readonly = options.readonly;
+        // by default all fields are editable
+        if (self.readonly == undefined) self.readonly = [];
+
+        self.actions = options.actions;
+        if (self.actions == undefined) {
+            // by default all buttons are active
+            self.actions = [];
+            self.$("button").each(function(index) {
+                var button = $(this);
+                var action = button.attr("name");
+                self.actions.push(action);
+            });
+        }
+    },
+    render: function() {
+        var self = this;
+
+        if (self.title) {
+            self.$("header h1").text(self.title);
+        }
+
+        self.$(".rcue-button-close").click(function(e) {
+            self.close();
+            e.preventDefault();
+        });
+
+        $("input", self.$el).each(function(index) {
+            var input = $(this);
+
+            self.loadField(input);
+
+            // mark some fields readonly
+            var name = input.attr("name");
+            if ( _.contains(self.readonly, name)) {
+                input.attr("readonly", "readonly");
+            }
+        });
+
+        self.$("button").each(function(index) {
+            var button = $(this);
+            var action = button.attr("name");
+
+            if (_.contains(self.actions, action)) {
+                // enable buttons for specified actions
+                button.click(function(e) {
+                    self.performAction(action);
+                    e.preventDefault();
+                });
+            } else {
+                // hide unused buttons
+                button.hide();
+            }
+        });
+    },
+    performAction: function(action) {
+        var self = this;
+
+        if (action == "save") {
+            // save changes
+            self.save({
+                success: function(model, response, options) {
+                    self.close();
+                },
+                error: function(model, response, options) {
+                    if (response.status == 200) {
+                        self.close();
+                        return;
+                    }
+                    alert("ERROR: " + response.responseText);
+                }
+            });
+
+        } else {
+            self.close();
+        }
+    },
+    open: function() {
+        var self = this;
+
+        // load data
+        self.model.fetch({
+            success: function(model, response, options) {
+                self.render();
+                self.$el.show();
+            },
+            error: function(model, response, options) {
+                alert("ERROR: " + response);
+            }
+        });
+    },
+    close: function() {
+        this.$el.hide();
+    },
+    loadField: function(input) {
+        var self = this;
+        var name = input.attr("name");
+        var value = self.model.get(name);
+        input.val(value);
+    },
+    save: function(options) {
+        var self = this;
+
+        var attributes = {};
+        $("input", self.$el).each(function(index) {
+            var input = $(this);
+            self.saveField(input, attributes);
+        });
+        self.model.set(attributes);
+
+        var changedAttributes = self.model.changedAttributes();
+        if (!changedAttributes) return;
+
+        // save changed attributes only
+        self.model.save(changedAttributes, {
+            patch: true,
+            wait: true,
+            success: options.success,
+            error: options.error
+        });
+    },
+    saveField: function(input, attributes) {
+        var self = this;
+        var name = input.attr("name");
+        var value = input.val();
+        attributes[name] = value;
+    }
+});
+
 var TableItemView = Backbone.View.extend({
+    initialize: function(options) {
+        var self = this;
+        TableItemView.__super__.initialize.call(self, options);
+        self.table = options.table;
+    },
     render: function() {
         var self = this;
         $("td", self.el).each(function(index) {
             var item = $(this);
             var name = item.attr("name");
             var value = self.model.get(name);
-            item.text(value);
+
+            if (name == "id") {
+                item.empty();
+                $("<a/>", {
+                    href: "#",
+                    text: value,
+                    click: function(e) {
+                        var dialog = self.table.editDialog;
+                        dialog.model = self.model;
+                        dialog.open();
+                        e.preventDefault();
+                    }
+                }).appendTo(item);
+            } else {
+                item.text(value);
+                self.model.on("change:" + name, function(event) {
+                    item.text(self.model.get(name));
+                });
+            }
         });
     }
 });
 
 var TableView = Backbone.View.extend({
-    initialize: function() {
+    initialize: function(options) {
         var self = this;
 
+        TableView.__super__.initialize.call(self, options);
+        self.editDialog = options.editDialog;
+
         self.tbody = $("tbody", self.el);
         self.template = $("tr", self.tbody).detach();
 
@@ -131,6 +311,7 @@ var TableView = Backbone.View.extend({
                 _(self.collection.models).each(function(item) {
                     var itemView = new TableItemView({
                         el: self.template.clone(),
+                        table: self,
                         model: item
                     });
                     itemView.render();
diff --git a/base/tps-tomcat/shared/webapps/tps/activities.html b/base/tps-tomcat/shared/webapps/tps/activities.html
index 82759c70d..583f98426 100644
--- a/base/tps-tomcat/shared/webapps/tps/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/activities.html
@@ -25,9 +25,17 @@
     <script src="/tps/js/activity.js"></script>
     <script>
 $(function() {
+    var editDialog = new Dialog({
+        el: $("#activity-dialog"),
+        title: "Edit Activity",
+        readonly: ["id", "tokenID", "userID", "ip",
+            "operation", "result", "date"]
+    });
+
     new TableView({
         el: $("table[name='activities']"),
-        collection: new ActivityCollection({ size: 3 })
+        collection: new ActivityCollection({ size: 3 }),
+        editDialog: editDialog
     });
 });
     </script>
@@ -77,5 +85,27 @@ $(function() {
 </tfoot>
 </table>
 
+<div id="activity-dialog" class="rcue-dialog-background">
+    <div class="rcue-dialog">
+        <header>
+            <h1>Activity</h1>
+            <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>
+        </fieldset>
+        <footer>
+            <button name="save" class="primary">Save</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/base/tps-tomcat/shared/webapps/tps/authenticators.html b/base/tps-tomcat/shared/webapps/tps/authenticators.html
index 075b66069..244ad110a 100644
--- a/base/tps-tomcat/shared/webapps/tps/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/authenticators.html
@@ -25,9 +25,16 @@
     <script src="/tps/js/authenticator.js"></script>
     <script>
 $(function() {
+    var editDialog = new Dialog({
+        el: $("#authenticator-dialog"),
+        title: "Edit Authenticator",
+        readonly: ["id"]
+    });
+
     new TableView({
         el: $("table[name='authenticators']"),
-        collection: new AuthenticatorCollection({ size: 3 })
+        collection: new AuthenticatorCollection({ size: 3 }),
+        editDialog: editDialog
     });
 });
     </script>
@@ -67,5 +74,22 @@ $(function() {
 </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="save" class="primary">Save</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/base/tps-tomcat/shared/webapps/tps/certs.html b/base/tps-tomcat/shared/webapps/tps/certs.html
index 39cab34bc..975227dae 100644
--- a/base/tps-tomcat/shared/webapps/tps/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/certs.html
@@ -25,9 +25,17 @@
     <script src="/tps/js/cert.js"></script>
     <script>
 $(function() {
+    var editDialog = new Dialog({
+        el: $("#certificate-dialog"),
+        title: "Edit Certificate",
+        readonly: ["id", "serialNumber", "subject", "tokenID", "userID",
+            "keyType", "status", "createTime", "modifyTime"]
+    });
+
     new TableView({
         el: $("table[name='certificates']"),
-        collection: new CertificateCollection({ size: 3 })
+        collection: new CertificateCollection({ size: 3 }),
+        editDialog: editDialog
     });
 });
     </script>
@@ -81,5 +89,29 @@ $(function() {
 </tfoot>
 </table>
 
+<div id="certificate-dialog" class="rcue-dialog-background">
+    <div class="rcue-dialog">
+        <header>
+            <h1>Certificate</h1>
+            <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>
+        </fieldset>
+        <footer>
+            <button name="save" class="primary">Save</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/base/tps-tomcat/shared/webapps/tps/connections.html b/base/tps-tomcat/shared/webapps/tps/connections.html
index cd9ba86cb..c9750932e 100644
--- a/base/tps-tomcat/shared/webapps/tps/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/connections.html
@@ -25,9 +25,16 @@
     <script src="/tps/js/connection.js"></script>
     <script>
 $(function() {
+    var editDialog = new Dialog({
+        el: $("#connection-dialog"),
+        title: "Edit Connection",
+        readonly: ["id"]
+    });
+
     new TableView({
         el: $("table[name='connections']"),
-        collection: new ConnectionCollection({ size: 3 })
+        collection: new ConnectionCollection({ size: 3 }),
+        editDialog: editDialog
     });
 });
     </script>
@@ -67,5 +74,22 @@ $(function() {
 </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="save" class="primary">Save</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/base/tps-tomcat/shared/webapps/tps/groups.html b/base/tps-tomcat/shared/webapps/tps/groups.html
index 1e63c4597..bee056301 100644
--- a/base/tps-tomcat/shared/webapps/tps/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/groups.html
@@ -25,9 +25,16 @@
     <script src="/tps/js/group.js"></script>
     <script>
 $(function() {
+    var editDialog = new Dialog({
+        el: $("#group-dialog"),
+        title: "Edit Group",
+        readonly: ["id"]
+    });
+
     new TableView({
         el: $("table[name='groups']"),
-        collection: new GroupCollection({ size: 3 })
+        collection: new GroupCollection({ size: 3 }),
+        editDialog: editDialog
     });
 });
     </script>
@@ -67,5 +74,22 @@ $(function() {
 </tfoot>
 </table>
 
+<div id="group-dialog" class="rcue-dialog-background">
+    <div class="rcue-dialog">
+        <header>
+            <h1>Group</h1>
+            <a class="rcue-button-close" href="#"></a>
+        </header>
+        <fieldset>
+            <label>Group ID</label><input name="id" type="text"><br>
+            <label>Description</label><input name="description" type="text"><br>
+        </fieldset>
+        <footer>
+            <button name="save" class="primary">Save</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/base/tps-tomcat/shared/webapps/tps/js/activity.js b/base/tps-tomcat/shared/webapps/tps/js/activity.js
index 5b50120bb..f7e5b7362 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/activity.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/activity.js
@@ -19,8 +19,32 @@
  * @author Endi S. Dewata
  */
 
-var ActivityModel = Backbone.Model.extend({
-    urlRoot: "/tps/rest/activities"
+var ActivityModel = Model.extend({
+    urlRoot: "/tps/rest/activities",
+    parseResponse: function(response) {
+        return {
+            id: response.Activity["@id"],
+            tokenID: response.Activity.TokenID,
+            userID: response.Activity.UserID,
+            ip: response.Activity.IP,
+            operation: response.Activity.Operation,
+            result: response.Activity.Result,
+            date: response.Activity.Date
+        };
+    },
+    createRequest: function(attributes) {
+        return {
+            Activity: {
+                "@id": attributes.id,
+                TokenID: attributes.tokenID,
+                UserID: attributes.userID,
+                IP: attributes.ip,
+                Operation: attributes.operation,
+                Result: attributes.result,
+                Date: attributes.date
+            }
+        };
+    }
 });
 
 var ActivityCollection = Collection.extend({
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index d2999b298..89ebb282a 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -19,8 +19,22 @@
  * @author Endi S. Dewata
  */
 
-var AuthenticatorModel = Backbone.Model.extend({
-    urlRoot: "/tps/rest/authenticators"
+var AuthenticatorModel = Model.extend({
+    urlRoot: "/tps/rest/authenticators",
+    parseResponse: function(response) {
+        return {
+            id: response.Authenticator["@id"],
+            status: response.Authenticator.Status
+        };
+    },
+    createRequest: function(attributes) {
+        return {
+            Authenticator: {
+                "@id": attributes.id,
+                Status: attributes.status
+            }
+        };
+    }
 });
 
 var AuthenticatorCollection = Collection.extend({
diff --git a/base/tps-tomcat/shared/webapps/tps/js/cert.js b/base/tps-tomcat/shared/webapps/tps/js/cert.js
index 6b9d58bc9..b000172df 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/cert.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/cert.js
@@ -19,8 +19,36 @@
  * @author Endi S. Dewata
  */
 
-var CertificateModel = Backbone.Model.extend({
-    urlRoot: "/tps/rest/certs"
+var CertificateModel = Model.extend({
+    urlRoot: "/tps/rest/certs",
+    parseResponse: function(response) {
+        return {
+            id: response.Certificate["@id"],
+            serialNumber: response.Certificate.SerialNumber,
+            subject: response.Certificate.Subject,
+            tokenID: response.Certificate.TokenID,
+            userID: response.Certificate.UserID,
+            keyType: response.Certificate.KeyType,
+            status: response.Certificate.Status,
+            createTime: response.Certificate.CreateTime,
+            modifyTime: response.Certificate.ModifyTime
+        };
+    },
+    createRequest: function(attributes) {
+        return {
+            Certificate: {
+                "@id": attributes.id,
+                SerialNumber: attributes.serialNumber,
+                Subject: attributes.subject,
+                TokenID: attributes.tokenID,
+                UserID: attributes.userID,
+                KeyType: attributes.keyType,
+                Status: attributes.status,
+                CreateTime: CreateTimeattributes.createTime,
+                ModifyTime: attributes.modifyTime
+            }
+        };
+    }
 });
 
 var CertificateCollection = Collection.extend({
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index 4d5927e9f..bf97cc0c8 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -19,8 +19,22 @@
  * @author Endi S. Dewata
  */
 
-var ConnectionModel = Backbone.Model.extend({
-    urlRoot: "/tps/rest/connections"
+var ConnectionModel = Model.extend({
+    urlRoot: "/tps/rest/connections",
+    parseResponse: function(response) {
+        return {
+            id: response.Connection["@id"],
+            status: response.Connection.Status
+        };
+    },
+    createRequest: function(attributes) {
+        return {
+            Connection: {
+                "@id": attributes.id,
+                Status: attributes.status
+            }
+        };
+    }
 });
 
 var ConnectionCollection = Collection.extend({
diff --git a/base/tps-tomcat/shared/webapps/tps/js/group.js b/base/tps-tomcat/shared/webapps/tps/js/group.js
index 4d035073d..4030712b0 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/group.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/group.js
@@ -19,8 +19,22 @@
  * @author Endi S. Dewata
  */
 
-var GroupModel = Backbone.Model.extend({
-    urlRoot: "/tps/rest/admin/groups"
+var GroupModel = Model.extend({
+    urlRoot: "/tps/rest/admin/groups",
+    parseResponse: function(response) {
+        return {
+            id: response.Group["@id"],
+            description: response.Group.Description
+        };
+    },
+    createRequest: function(attributes) {
+        return {
+           Group: {
+               "@id": attributes.id,
+                Description: attributes.description
+           }
+        };
+    }
 });
 
 var GroupCollection = Collection.extend({
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index 583ec4191..25ed88110 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -19,8 +19,22 @@
  * @author Endi S. Dewata
  */
 
-var ProfileModel = Backbone.Model.extend({
-    urlRoot: "/tps/rest/profiles"
+var ProfileModel = Model.extend({
+    urlRoot: "/tps/rest/profiles",
+    parseResponse: function(response) {
+        return {
+            id: response.Profile["@id"],
+            status: response.Profile.Status
+        };
+    },
+    createRequest: function(attributes) {
+        return {
+            Profile: {
+                "@id": attributes.id,
+                Status: attributes.status
+            }
+        };
+    }
 });
 
 var ProfileCollection = Collection.extend({
@@ -38,3 +52,17 @@ var ProfileCollection = Collection.extend({
         });
     }
 });
+
+var ProfileDialog = Dialog.extend({
+    performAction: function(action) {
+        var self = this;
+
+        if (action == "enable") {
+
+        } else if (action == "disable") {
+
+        } else {
+            ProfileDialog.__super__.performAction.call(self, action);
+        }
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/selftest.js b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
index 89208a1dc..ec8fb41a9 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/selftest.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
@@ -19,8 +19,28 @@
  * @author Endi S. Dewata
  */
 
-var SelfTestModel = Backbone.Model.extend({
-    urlRoot: "/tps/rest/selftests"
+var SelfTestModel = Model.extend({
+    urlRoot: "/tps/rest/selftests",
+    parseResponse: function(response) {
+        return {
+            id: response.SelfTest["@id"],
+            enabledAtStartup: response.SelfTest.EnabledAtStartup,
+            criticalAtStartup: response.SelfTest.CriticalAtStartup,
+            enabledOnDemand: response.SelfTest.EnabledOnDemand,
+            criticalOnDemand: response.SelfTest.CriticalOnDemand,
+        };
+    },
+    createRequest: function(attributes) {
+        return {
+            SelfTest: {
+                "@id": attributes.id,
+                EnabledAtStartup: attributes.enabledAtStartup,
+                CriticalAtStartup: attributes.criticalAtStartup,
+                EnabledOnDemand: attributes.enabledOnDemand,
+                CriticalOnDemand: attributes.criticalOnDemand
+            }
+        };
+    }
 });
 
 var SelfTestCollection = Collection.extend({
diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js
index e5d13894e..8131f4b76 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/token.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/token.js
@@ -19,8 +19,34 @@
  * @author Endi S. Dewata
  */
 
-var TokenModel = Backbone.Model.extend({
-    urlRoot: "/tps/rest/tokens"
+var TokenModel = Model.extend({
+    urlRoot: "/tps/rest/tokens",
+    parseResponse: function(response) {
+        return {
+            id: response.Token["@id"],
+            userID: response.Token.UserID,
+            status: response.Token.Status,
+            reason: response.Token.Reason,
+            appletID: response.Token.AppletID,
+            keyInfo: response.Token.KeyInfo,
+            createTimestamp: response.Token.CreateTimestamp,
+            modifyTimestamp: response.Token.ModifyTimestamp
+        };
+    },
+    createRequest: function(attributes) {
+        return {
+            Token: {
+                "@id": attributes.id,
+                UserID: attributes.userID,
+                Status: attributes.status,
+                Reason: attributes.reason,
+                AppletID: attributes.appletID,
+                KeyInfo: attributes.keyInfo,
+                CreateTimestamp: attributes.createTimestamp,
+                ModifyTimestamp: attributes.modifyTimestamp
+            }
+        };
+    }
 });
 
 var TokenCollection = Collection.extend({
diff --git a/base/tps-tomcat/shared/webapps/tps/js/user.js b/base/tps-tomcat/shared/webapps/tps/js/user.js
index 3a6a90465..9f36eb481 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/user.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/user.js
@@ -19,8 +19,50 @@
  * @author Endi S. Dewata
  */
 
-var UserModel = Backbone.Model.extend({
-    urlRoot: "/tps/rest/admin/users"
+var UserModel = Model.extend({
+    urlRoot: "/tps/rest/admin/users",
+    parseResponse: function(response) {
+        var attributes = response.User.Attributes.Attribute;
+        attributes = attributes == undefined ? [] : [].concat(attributes);
+
+        var attrs = {};
+        _(attributes).each(function(attribute) {
+            var name = attribute["@name"];
+            var value = attribute["$"];
+            attrs[name] = value;
+        });
+
+        return {
+            id: response.User["@id"],
+            fullName: response.User.FullName,
+            email: response.User.Email,
+            state: response.User.State,
+            type: response.User.Type,
+            attributes: attrs
+        };
+    },
+    createRequest: function(attributes) {
+        var attrs = [];
+        _(attributes.attributes).each(function(value, name) {
+            attrs.push({
+                Attribute: {
+                    "@name": name,
+                    "$": value
+                }
+            });
+        });
+
+        return {
+            User: {
+                "@id": attributes.id,
+                FullName: attributes.fullName,
+                Email: attributes.email,
+                State: attributes.state,
+                Type: attributes.type,
+                Attributes: attrs
+            }
+        };
+    }
 });
 
 var UserCollection = Collection.extend({
@@ -38,3 +80,33 @@ var UserCollection = Collection.extend({
         });
     }
 });
+
+var UserDialog = Dialog.extend({
+    loadField: function(input) {
+        var self = this;
+
+        var name = input.attr("name");
+        if (name != "tpsProfiles") {
+            UserDialog.__super__.loadField.call(self, input);
+            return;
+        }
+
+        var attributes = self.model.get("attributes");
+        var value = attributes.tpsProfiles;
+        input.val(value);
+    },
+    saveField: function(input, attributes) {
+        var self = this;
+
+        var name = input.attr("name");
+        if (name != "tpsProfiles") {
+            UserDialog.__super__.saveField.call(self, input, attributes);
+            return;
+        }
+
+        var attrs = attributes["attributes"];
+        if (attrs == undefined) attrs = {};
+        attrs.tpsProfiles = input.val();
+        attributes["attributes"] = attrs;
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/profiles.html b/base/tps-tomcat/shared/webapps/tps/profiles.html
index a31389e64..ad5cd2e18 100644
--- a/base/tps-tomcat/shared/webapps/tps/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/profiles.html
@@ -25,9 +25,17 @@
     <script src="/tps/js/profile.js"></script>
     <script>
 $(function() {
+    var editDialog = new ProfileDialog({
+        el: $("#profile-dialog"),
+        title: "Edit Profile",
+        readonly: ["id", "status"],
+        actions: ["enable", "disable", "cancel"]
+    });
+
     new TableView({
         el: $("table[name='profiles']"),
-        collection: new ProfileCollection({ size: 3 })
+        collection: new ProfileCollection({ size: 3 }),
+        editDialog: editDialog
     });
 });
     </script>
@@ -67,5 +75,25 @@ $(function() {
 </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">Enable</button>
+            <button name="disable">Disable</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/base/tps-tomcat/shared/webapps/tps/selftests.html b/base/tps-tomcat/shared/webapps/tps/selftests.html
index f443305e6..b5abb439d 100644
--- a/base/tps-tomcat/shared/webapps/tps/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/selftests.html
@@ -25,9 +25,16 @@
     <script src="/tps/js/selftest.js"></script>
     <script>
 $(function() {
+    var editDialog = new Dialog({
+        el: $("#selftest-dialog"),
+        title: "Edit Self Test",
+        readonly: ["id", "enabledAtStartup", "criticalAtStartup", "enabledOnDemand", "criticalOnDemand"]
+    });
+
     new TableView({
         el: $("table[name='selftests']"),
-        collection: new SelfTestCollection({ size: 3 })
+        collection: new SelfTestCollection({ size: 3 }),
+        editDialog: editDialog
     });
 });
     </script>
@@ -73,5 +80,25 @@ $(function() {
 </tfoot>
 </table>
 
+<div id="selftest-dialog" class="rcue-dialog-background">
+    <div class="rcue-dialog">
+        <header>
+            <h1>Self Test</h1>
+            <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>
+        </fieldset>
+        <footer>
+            <button name="save" class="primary">Save</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/base/tps-tomcat/shared/webapps/tps/tokens.html b/base/tps-tomcat/shared/webapps/tps/tokens.html
index c5c4e5838..e8318df9e 100644
--- a/base/tps-tomcat/shared/webapps/tps/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/tokens.html
@@ -25,9 +25,17 @@
     <script src="/tps/js/token.js"></script>
     <script>
 $(function() {
+    var editDialog = new Dialog({
+        el: $("#token-dialog"),
+        title: "Edit Token",
+        readonly: ["id", "status", "reason", "appletID", "keyInfo",
+            "createTimestamp", "modifyTimestamp"]
+    });
+
     new TableView({
         el: $("table[name='tokens']"),
-        collection: new TokenCollection({ size: 3 })
+        collection: new TokenCollection({ size: 3 }),
+        editDialog: editDialog
     });
 });
     </script>
@@ -79,5 +87,28 @@ $(function() {
 </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="id" type="text"><br>
+            <label>User ID</label><input name="userID" type="text"><br>
+            <label>Status</label><input name="status" type="text"><br>
+            <label>Reason</label><input name="reason" 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="save" class="primary">Save</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
+
 </body>
 </html>
diff --git a/base/tps-tomcat/shared/webapps/tps/users.html b/base/tps-tomcat/shared/webapps/tps/users.html
index 3eeec8118..28ccf5924 100644
--- a/base/tps-tomcat/shared/webapps/tps/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/users.html
@@ -25,9 +25,16 @@
     <script src="/tps/js/user.js"></script>
     <script>
 $(function() {
+    var editDialog = new UserDialog({
+        el: $("#user-dialog"),
+        title: "Edit User",
+        readonly: ["id", "type"]
+    });
+
     new TableView({
         el: $("table[name='users']"),
-        collection: new UserCollection({ size: 3 })
+        collection: new UserCollection({ size: 3 }),
+        editDialog: editDialog
     });
 });
     </script>
@@ -67,5 +74,26 @@ $(function() {
 </tfoot>
 </table>
 
+<div id="user-dialog" class="rcue-dialog-background">
+    <div class="rcue-dialog">
+        <header>
+            <h1>User</h1>
+            <a class="rcue-button-close" href="#"></a>
+        </header>
+        <fieldset>
+            <label>User ID</label><input name="id" 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>
+        </fieldset>
+        <footer>
+            <button name="save" class="primary">Save</button>
+            <button name="cancel">Cancel</button>
+        </footer>
+    </div>
+</div>
+
 </body>
 </html>