From 05c8e6e144967590a5f11bd2ee015e104952793e Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Fri, 7 Feb 2014 19:48:09 -0500
Subject: [PATCH] Improved TPS UI page loading.

Previously the TPS UI would reload the JS libraries and CSS files
every time a page is opened. The pages have been simplified such that
it will only contain the necessary elements of the page. A new Page
class has been added to the framework to define page initialization.

Ticket #654
---
 base/server/share/webapps/pki/js/pki-ui.js         | 33 +++++++++++++++---
 base/tps-tomcat/shared/webapps/tps/activities.html | 30 ----------------
 .../shared/webapps/tps/authenticators.html         | 29 ----------------
 base/tps-tomcat/shared/webapps/tps/certs.html      | 30 ----------------
 .../tps-tomcat/shared/webapps/tps/connections.html | 29 ----------------
 base/tps-tomcat/shared/webapps/tps/groups.html     | 37 --------------------
 base/tps-tomcat/shared/webapps/tps/index.html      | 40 ++++++++++++++++------
 base/tps-tomcat/shared/webapps/tps/js/activity.js  | 17 +++++++++
 .../shared/webapps/tps/js/authenticator.js         | 16 +++++++++
 base/tps-tomcat/shared/webapps/tps/js/cert.js      | 17 +++++++++
 .../tps-tomcat/shared/webapps/tps/js/connection.js | 16 +++++++++
 base/tps-tomcat/shared/webapps/tps/js/group.js     | 24 +++++++++++++
 base/tps-tomcat/shared/webapps/tps/js/profile.js   | 16 +++++++++
 base/tps-tomcat/shared/webapps/tps/js/selftest.js  | 16 +++++++++
 base/tps-tomcat/shared/webapps/tps/js/token.js     | 27 +++++++++++++++
 base/tps-tomcat/shared/webapps/tps/js/user.js      | 25 ++++++++++++++
 base/tps-tomcat/shared/webapps/tps/profiles.html   | 29 ----------------
 base/tps-tomcat/shared/webapps/tps/selftests.html  | 29 ----------------
 base/tps-tomcat/shared/webapps/tps/tokens.html     | 40 ----------------------
 base/tps-tomcat/shared/webapps/tps/users.html      | 38 --------------------
 20 files changed, 233 insertions(+), 305 deletions(-)

diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index c16af03ba2c73e459a062770c69cee3522be8674..d35de5893e0df665518e12dd5e122eb2c10dacd0 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -107,27 +107,52 @@ var Collection = Backbone.Collection.extend({
     }
 });
 
+var Page = Backbone.View.extend({
+    initialize: function(options) {
+        var self = this;
+        Page.__super__.initialize.call(self, options);
+
+        self.url = options.url;
+    },
+    load: function() {
+    }
+});
+
 var Navigation = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
         Navigation.__super__.initialize.call(self, options);
 
         self.content = options.content;
-        self.homeURL = options.homeURL;
+        self.pages = options.pages;
+        self.homePage = options.homePage;
 
         $("li", self.$el).each(function(index) {
             var li = $(this);
             var link = $("a", li);
             var url = link.attr("href");
             link.click(function(e) {
-                if (url != "#") {
-                    self.content.load(url);
+                // get page name
+                if (url.charAt(0) == "#" && url.length > 1) {
+                    var name = url.substring(1);
+                    self.load(name);
                 }
                 e.preventDefault();
             });
         });
 
-        if (self.homeURL) self.content.load(self.homeURL);
+        if (self.homePage) self.load(self.homePage);
+    },
+    load: function(name) {
+        var self = this;
+        var page = self.pages[name];
+        if (!page) {
+            alert("Invalid page: " + name);
+            return;
+        }
+        self.content.load(page.url, function(response, status, xhr) {
+            page.load();
+        });
     }
 });
 
diff --git a/base/tps-tomcat/shared/webapps/tps/activities.html b/base/tps-tomcat/shared/webapps/tps/activities.html
index 367b5e459287433f139b4cbe58c49d01873162a3..4c3d613b716412466466e7a5f322013cceebda4e 100644
--- a/base/tps-tomcat/shared/webapps/tps/activities.html
+++ b/base/tps-tomcat/shared/webapps/tps/activities.html
@@ -15,33 +15,6 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<html>
-<head>
-    <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
-    <script src="/pki/js/jquery.js"></script>
-    <script src="/pki/js/underscore.js"></script>
-    <script src="/pki/js/backbone.js"></script>
-    <script src="/pki/js/pki-ui.js"></script>
-    <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 Table({
-        el: $("table[name='activities']"),
-        collection: new ActivityCollection({ size: 3 }),
-        editDialog: editDialog
-    });
-});
-    </script>
-</head>
-<body>
-
 <h1>Activities</h1>
 
 <table name="activities">
@@ -108,6 +81,3 @@ $(function() {
         </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 fa588ebbbee0d5c85cf6906a52236caed1190049..761115c7287aec572afe814afc960fc7c1421b9c 100644
--- a/base/tps-tomcat/shared/webapps/tps/authenticators.html
+++ b/base/tps-tomcat/shared/webapps/tps/authenticators.html
@@ -15,32 +15,6 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<html>
-<head>
-    <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
-    <script src="/pki/js/jquery.js"></script>
-    <script src="/pki/js/underscore.js"></script>
-    <script src="/pki/js/backbone.js"></script>
-    <script src="/pki/js/pki-ui.js"></script>
-    <script src="/tps/js/authenticator.js"></script>
-    <script>
-$(function() {
-    var editDialog = new AuthenticatorDialog({
-        el: $("#authenticator-dialog"),
-        title: "Edit Authenticator",
-        readonly: ["id", "status"]
-    });
-
-    new Table({
-        el: $("table[name='authenticators']"),
-        collection: new AuthenticatorCollection({ size: 3 }),
-        editDialog: editDialog
-    });
-});
-    </script>
-</head>
-<body>
-
 <h1>Authenticators</h1>
 
 <table name="authenticators">
@@ -95,6 +69,3 @@ $(function() {
         </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 f5335b7a58ff70d6b87561768ca21b5a7ab17b39..71337fdb62f01b820602fe7ca83f9e9d81ee7c11 100644
--- a/base/tps-tomcat/shared/webapps/tps/certs.html
+++ b/base/tps-tomcat/shared/webapps/tps/certs.html
@@ -15,33 +15,6 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<html>
-<head>
-    <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
-    <script src="/pki/js/jquery.js"></script>
-    <script src="/pki/js/underscore.js"></script>
-    <script src="/pki/js/backbone.js"></script>
-    <script src="/pki/js/pki-ui.js"></script>
-    <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 Table({
-        el: $("table[name='certificates']"),
-        collection: new CertificateCollection({ size: 3 }),
-        editDialog: editDialog
-    });
-});
-    </script>
-</head>
-<body>
-
 <h1>Certificates</h1>
 
 <table name="certificates">
@@ -114,6 +87,3 @@ $(function() {
         </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 33f43d7ffe06820f61a4ddb936cd689e4a128535..f941b91b59bf14786ed655a3f4944a787cecc3a1 100644
--- a/base/tps-tomcat/shared/webapps/tps/connections.html
+++ b/base/tps-tomcat/shared/webapps/tps/connections.html
@@ -15,32 +15,6 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<html>
-<head>
-    <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
-    <script src="/pki/js/jquery.js"></script>
-    <script src="/pki/js/underscore.js"></script>
-    <script src="/pki/js/backbone.js"></script>
-    <script src="/pki/js/pki-ui.js"></script>
-    <script src="/tps/js/connection.js"></script>
-    <script>
-$(function() {
-    var editDialog = new ConnectionDialog({
-        el: $("#connection-dialog"),
-        title: "Edit Connection",
-        readonly: ["id", "status"]
-    });
-
-    new Table({
-        el: $("table[name='connections']"),
-        collection: new ConnectionCollection({ size: 3 }),
-        editDialog: editDialog
-    });
-});
-    </script>
-</head>
-<body>
-
 <h1>Connections</h1>
 
 <table name="connections">
@@ -95,6 +69,3 @@ $(function() {
         </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 27bd77a90c2039d9cbe784f58bfa78b9365070f7..2bd9b5ba83e5a8dc3897b954fa51ad8bf3f60901 100644
--- a/base/tps-tomcat/shared/webapps/tps/groups.html
+++ b/base/tps-tomcat/shared/webapps/tps/groups.html
@@ -15,40 +15,6 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<html>
-<head>
-    <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
-    <script src="/pki/js/jquery.js"></script>
-    <script src="/pki/js/underscore.js"></script>
-    <script src="/pki/js/backbone.js"></script>
-    <script src="/pki/js/pki-ui.js"></script>
-    <script src="/tps/js/group.js"></script>
-    <script>
-$(function() {
-    var addDialog = new Dialog({
-        el: $("#group-dialog"),
-        title: "Add Group",
-        actions: ["cancel", "add"]
-    });
-
-    var editDialog = new Dialog({
-        el: $("#group-dialog"),
-        title: "Edit Group",
-        readonly: ["groupID"],
-        actions: ["cancel", "save"]
-    });
-
-    new Table({
-        el: $("table[name='groups']"),
-        collection: new GroupCollection({ size: 3 }),
-        addDialog: addDialog,
-        editDialog: editDialog
-    });
-});
-    </script>
-</head>
-<body>
-
 <h1>Groups</h1>
 
 <table name="groups">
@@ -105,6 +71,3 @@ $(function() {
         </footer>
     </div>
 </div>
-
-</body>
-</html>
diff --git a/base/tps-tomcat/shared/webapps/tps/index.html b/base/tps-tomcat/shared/webapps/tps/index.html
index b5c8c957a9362e59b7942b1c13c6a002488c7e22..790ab1489ae3a09528ee7c89a50483ea1ec57eb9 100644
--- a/base/tps-tomcat/shared/webapps/tps/index.html
+++ b/base/tps-tomcat/shared/webapps/tps/index.html
@@ -25,12 +25,32 @@
     <script src="/pki/js/backbone.js"></script>
     <script src="/pki/js/bootstrap.js"></script>
     <script src="/pki/js/pki-ui.js"></script>
+    <script src="/tps/js/activity.js"></script>
+    <script src="/tps/js/authenticator.js"></script>
+    <script src="/tps/js/cert.js"></script>
+    <script src="/tps/js/connection.js"></script>
+    <script src="/tps/js/group.js"></script>
+    <script src="/tps/js/profile.js"></script>
+    <script src="/tps/js/selftest.js"></script>
+    <script src="/tps/js/token.js"></script>
+    <script src="/tps/js/user.js"></script>
     <script>
 $(function() {
     new Navigation({
         el: $("#navigation"),
         content: $("#content"),
-        homeURL: "tokens.html"
+        pages: {
+            activities: new ActivityPage({ url: "activities.html" }),
+            authenticators: new AuthenticatorPage({ url: "authenticators.html" }),
+            certs: new CertificatePage({ url: "certs.html" }),
+            connections: new ConnectionPage({ url: "connections.html" }),
+            groups: new GroupPage({ url: "groups.html" }),
+            profiles: new ProfilePage({ url: "profiles.html" }),
+            selftests: new SelfTestPage({ url: "selftests.html" }),
+            tokens: new TokenPage({ url: "tokens.html" }),
+            users: new UserPage({ url: "users.html" })
+        },
+        homePage: "tokens"
     });
 });
     </script>
@@ -65,21 +85,21 @@ $(function() {
     </li>
     </ul>
     <ul class="nav navbar-nav navbar-primary">
-    <li><a href="tokens.html">Tokens</a></li>
-    <li><a href="certs.html">Certificates</a></li>
-    <li><a href="activities.html">Activities</a></li>
-    <li><a href="profiles.html">Profiles</a></li>
-    <li><a href="selftests.html">SelfTests</a></li>
-    <li><a href="users.html">Users</a></li>
-    <li><a href="groups.html">Groups</a></li>
+    <li><a href="#tokens">Tokens</a></li>
+    <li><a href="#certs">Certificates</a></li>
+    <li><a href="#activities">Activities</a></li>
+    <li><a href="#profiles">Profiles</a></li>
+    <li><a href="#selftests">SelfTests</a></li>
+    <li><a href="#users">Users</a></li>
+    <li><a href="#groups">Groups</a></li>
     <li class="dropdown context">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">
         Configuration
         <b class="caret"></b>
       </a>
       <ul class="dropdown-menu">
-        <li><a href="authenticators.html">Authenticators</a></li>
-        <li><a href="connections.html">Connections</a></li>
+        <li><a href="#authenticators">Authenticators</a></li>
+        <li><a href="#connections">Connections</a></li>
       </ul>
     </li>
     </ul>
diff --git a/base/tps-tomcat/shared/webapps/tps/js/activity.js b/base/tps-tomcat/shared/webapps/tps/js/activity.js
index 1044f6b3376b39a0db7ad33090fbd66e07a0ea52..4039a72cee604c7466d49a6caae5b43637af79c2 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/activity.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/activity.js
@@ -65,3 +65,20 @@ var ActivityCollection = Collection.extend({
         });
     }
 });
+
+var ActivityPage = Page.extend({
+    load: function() {
+        var editDialog = new Dialog({
+            el: $("#activity-dialog"),
+            title: "Edit Activity",
+            readonly: ["id", "tokenID", "userID", "ip",
+                "operation", "result", "date"]
+        });
+
+        new Table({
+            el: $("table[name='activities']"),
+            collection: new ActivityCollection({ size: 3 }),
+            editDialog: editDialog
+        });
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
index f449b9a1304235686f5ec6607ee39651ac4ff694..cacf094147b6edc41a0a19e9e3b767783da0d893 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/authenticator.js
@@ -123,3 +123,19 @@ var AuthenticatorDialog = Dialog.extend({
         }
     }
 });
+
+var AuthenticatorPage = Page.extend({
+    load: function() {
+        var editDialog = new AuthenticatorDialog({
+            el: $("#authenticator-dialog"),
+            title: "Edit Authenticator",
+            readonly: ["id", "status"]
+        });
+
+        new Table({
+            el: $("table[name='authenticators']"),
+            collection: new AuthenticatorCollection({ size: 3 }),
+            editDialog: editDialog
+        });
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/cert.js b/base/tps-tomcat/shared/webapps/tps/js/cert.js
index 3ccc6dd71ca7df2b58fbffd511477c7eb89abf35..ede68d8657a31a2f4f6eaaa793380e1de03d7713 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/cert.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/cert.js
@@ -71,3 +71,20 @@ var CertificateCollection = Collection.extend({
         });
     }
 });
+
+var CertificatePage = Page.extend({
+    load: function() {
+        var editDialog = new Dialog({
+            el: $("#certificate-dialog"),
+            title: "Edit Certificate",
+            readonly: ["id", "serialNumber", "subject", "tokenID", "userID",
+            "keyType", "status", "createTime", "modifyTime"]
+        });
+
+        new Table({
+            el: $("table[name='certificates']"),
+            collection: new CertificateCollection({ size: 3 }),
+            editDialog: editDialog
+        });
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/connection.js b/base/tps-tomcat/shared/webapps/tps/js/connection.js
index 89b812e634d75ac0ef1c5816ce3ca479286e8896..94c4522ceca37e11bab259d71a7dcee95f21a126 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/connection.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/connection.js
@@ -123,3 +123,19 @@ var ConnectionDialog = Dialog.extend({
         }
     }
 });
+
+var ConnectionPage = Page.extend({
+    load: function() {
+        var editDialog = new ConnectionDialog({
+            el: $("#connection-dialog"),
+            title: "Edit Connection",
+            readonly: ["id", "status"]
+        });
+
+        new Table({
+            el: $("table[name='connections']"),
+            collection: new ConnectionCollection({ size: 3 }),
+            editDialog: editDialog
+        });
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/group.js b/base/tps-tomcat/shared/webapps/tps/js/group.js
index 3e2409bf4ff3c0dcbc5d5cd675895f98f5588919..7373e0339f598458c4c8db89249fe323af3ae490 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/group.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/group.js
@@ -54,3 +54,27 @@ var GroupCollection = Collection.extend({
         });
     }
 });
+
+var GroupPage = Page.extend({
+    load: function() {
+        var addDialog = new Dialog({
+            el: $("#group-dialog"),
+            title: "Add Group",
+            actions: ["cancel", "add"]
+        });
+
+        var editDialog = new Dialog({
+            el: $("#group-dialog"),
+            title: "Edit Group",
+            readonly: ["groupID"],
+            actions: ["cancel", "save"]
+        });
+
+        new Table({
+            el: $("table[name='groups']"),
+            collection: new GroupCollection({ size: 3 }),
+            addDialog: addDialog,
+            editDialog: editDialog
+        });
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/profile.js b/base/tps-tomcat/shared/webapps/tps/js/profile.js
index fea47ff04ab4f87f41cf5fb308367377d7332322..f9d0ebc9b77b7dc0ec9d4f3c7f5c30cb05a36cf4 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/profile.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/profile.js
@@ -123,3 +123,19 @@ var ProfileDialog = Dialog.extend({
         }
     }
 });
+
+var ProfilePage = Page.extend({
+    load: function() {
+        var editDialog = new ProfileDialog({
+            el: $("#profile-dialog"),
+            title: "Edit Profile",
+            readonly: ["id", "status"]
+        });
+
+        new Table({
+            el: $("table[name='profiles']"),
+            collection: new ProfileCollection({ size: 3 }),
+            editDialog: editDialog
+        });
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/selftest.js b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
index 1c87f1ca8138def5fd410742f91be715f044b1b2..95d0301ecf453ebf1ecf0223d218b7bfbe601c33 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/selftest.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/selftest.js
@@ -59,3 +59,19 @@ var SelfTestCollection = Collection.extend({
         });
     }
 });
+
+var SelfTestPage = Page.extend({
+    load: function() {
+        var editDialog = new Dialog({
+            el: $("#selftest-dialog"),
+            title: "Edit Self Test",
+            readonly: ["id", "enabledAtStartup", "criticalAtStartup", "enabledOnDemand", "criticalOnDemand"]
+        });
+
+        new Table({
+            el: $("table[name='selftests']"),
+            collection: new SelfTestCollection({ size: 3 }),
+            editDialog: editDialog
+        });
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js
index a4f711219e3a0b84933ee1b8dbfc3aae33436e38..dcf2cd99c09e1d6503640c27a001a3feeac9a526 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/token.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/token.js
@@ -72,3 +72,30 @@ var TokenCollection = Collection.extend({
         });
     }
 });
+
+var TokenPage = Page.extend({
+    load: function() {
+        var addDialog = new Dialog({
+            el: $("#token-dialog"),
+            title: "Add Token",
+            readonly: ["status", "reason", "appletID", "keyInfo",
+                "createTimestamp", "modifyTimestamp"],
+            actions: ["cancel", "add"]
+        });
+
+        var editDialog = new Dialog({
+            el: $("#token-dialog"),
+            title: "Edit Token",
+            readonly: ["tokenID", "status", "reason", "appletID", "keyInfo",
+                "createTimestamp", "modifyTimestamp"],
+            actions: ["cancel", "save"]
+        });
+
+        new Table({
+            el: $("table[name='tokens']"),
+            collection: new TokenCollection({ size: 3 }),
+            addDialog: addDialog,
+            editDialog: editDialog
+        });
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/js/user.js b/base/tps-tomcat/shared/webapps/tps/js/user.js
index c7d224e7aa9b1ab1e2ee72e2154fe0d31a1c2f9f..e0d4660b51c591e2967525e75976b133384e199f 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/user.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/user.js
@@ -117,3 +117,28 @@ var UserDialog = Dialog.extend({
         attributes["attributes"] = attrs;
     }
 });
+
+var UserPage = Page.extend({
+    load: function() {
+        var addDialog = new UserDialog({
+            el: $("#user-dialog"),
+            title: "Add User",
+            readonly: ["type"],
+            actions: ["cancel", "add"]
+        });
+
+        var editDialog = new UserDialog({
+            el: $("#user-dialog"),
+            title: "Edit User",
+            readonly: ["userID", "type"],
+            actions: ["cancel", "save"]
+        });
+
+        new Table({
+            el: $("table[name='users']"),
+            collection: new UserCollection({ size: 3 }),
+            addDialog: addDialog,
+            editDialog: editDialog
+        });
+    }
+});
diff --git a/base/tps-tomcat/shared/webapps/tps/profiles.html b/base/tps-tomcat/shared/webapps/tps/profiles.html
index 151fdc1a4651aa751b0e5e7ca098087c4c3f5213..388b5ec8be20dc1086111a7a7430c8d1ae1ed716 100644
--- a/base/tps-tomcat/shared/webapps/tps/profiles.html
+++ b/base/tps-tomcat/shared/webapps/tps/profiles.html
@@ -15,32 +15,6 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<html>
-<head>
-    <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
-    <script src="/pki/js/jquery.js"></script>
-    <script src="/pki/js/underscore.js"></script>
-    <script src="/pki/js/backbone.js"></script>
-    <script src="/pki/js/pki-ui.js"></script>
-    <script src="/tps/js/profile.js"></script>
-    <script>
-$(function() {
-    var editDialog = new ProfileDialog({
-        el: $("#profile-dialog"),
-        title: "Edit Profile",
-        readonly: ["id", "status"]
-    });
-
-    new Table({
-        el: $("table[name='profiles']"),
-        collection: new ProfileCollection({ size: 3 }),
-        editDialog: editDialog
-    });
-});
-    </script>
-</head>
-<body>
-
 <h1>Profiles</h1>
 
 <table name="profiles">
@@ -95,6 +69,3 @@ $(function() {
         </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 8cac37a2407219aa6c590e2e82a572ec6706e499..ee52bd9983193fd734385990a457823046449f6d 100644
--- a/base/tps-tomcat/shared/webapps/tps/selftests.html
+++ b/base/tps-tomcat/shared/webapps/tps/selftests.html
@@ -15,32 +15,6 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<html>
-<head>
-    <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
-    <script src="/pki/js/jquery.js"></script>
-    <script src="/pki/js/underscore.js"></script>
-    <script src="/pki/js/backbone.js"></script>
-    <script src="/pki/js/pki-ui.js"></script>
-    <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 Table({
-        el: $("table[name='selftests']"),
-        collection: new SelfTestCollection({ size: 3 }),
-        editDialog: editDialog
-    });
-});
-    </script>
-</head>
-<body>
-
 <h1>Self Tests</h1>
 
 <table name="selftests">
@@ -101,6 +75,3 @@ $(function() {
         </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 e82c9a3205e9d752676022d31870ca87d1686609..1575b046c67631ec68ee2f341513d99652177a3c 100644
--- a/base/tps-tomcat/shared/webapps/tps/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/tokens.html
@@ -15,43 +15,6 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<html>
-<head>
-    <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
-    <script src="/pki/js/jquery.js"></script>
-    <script src="/pki/js/underscore.js"></script>
-    <script src="/pki/js/backbone.js"></script>
-    <script src="/pki/js/pki-ui.js"></script>
-    <script src="/tps/js/token.js"></script>
-    <script>
-$(function() {
-    var addDialog = new Dialog({
-        el: $("#token-dialog"),
-        title: "Add Token",
-        readonly: ["status", "reason", "appletID", "keyInfo",
-            "createTimestamp", "modifyTimestamp"],
-        actions: ["cancel", "add"]
-    });
-
-    var editDialog = new Dialog({
-        el: $("#token-dialog"),
-        title: "Edit Token",
-        readonly: ["tokenID", "status", "reason", "appletID", "keyInfo",
-            "createTimestamp", "modifyTimestamp"],
-        actions: ["cancel", "save"]
-    });
-
-    new Table({
-        el: $("table[name='tokens']"),
-        collection: new TokenCollection({ size: 3 }),
-        addDialog: addDialog,
-        editDialog: editDialog
-    });
-});
-    </script>
-</head>
-<body>
-
 <h1>Tokens</h1>
 
 <table name="tokens">
@@ -126,6 +89,3 @@ $(function() {
         </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 08656fbef35ce7d9f994dbafe6f10abb361d2a2a..20e622cbc6209f4e64085b4474fd4e321314701e 100644
--- a/base/tps-tomcat/shared/webapps/tps/users.html
+++ b/base/tps-tomcat/shared/webapps/tps/users.html
@@ -15,41 +15,6 @@
      Copyright (C) 2013 Red Hat, Inc.
      All rights reserved.
      --- END COPYRIGHT BLOCK --- -->
-<html>
-<head>
-    <link href="/pki/css/pki-ui.css" rel="stylesheet" type="text/css">
-    <script src="/pki/js/jquery.js"></script>
-    <script src="/pki/js/underscore.js"></script>
-    <script src="/pki/js/backbone.js"></script>
-    <script src="/pki/js/pki-ui.js"></script>
-    <script src="/tps/js/user.js"></script>
-    <script>
-$(function() {
-    var addDialog = new UserDialog({
-        el: $("#user-dialog"),
-        title: "Add User",
-        readonly: ["type"],
-        actions: ["cancel", "add"]
-    });
-
-    var editDialog = new UserDialog({
-        el: $("#user-dialog"),
-        title: "Edit User",
-        readonly: ["userID", "type"],
-        actions: ["cancel", "save"]
-    });
-
-    new Table({
-        el: $("table[name='users']"),
-        collection: new UserCollection({ size: 3 }),
-        addDialog: addDialog,
-        editDialog: editDialog
-    });
-});
-    </script>
-</head>
-<body>
-
 <h1>Users</h1>
 
 <table name="users">
@@ -110,6 +75,3 @@ $(function() {
         </footer>
     </div>
 </div>
-
-</body>
-</html>
-- 
1.8.4.2

