From 439c60bc197b3d20b6d9918719fd5a2c7d3842df Mon Sep 17 00:00:00 2001
From: "Endi S. Dewata" <edewata@redhat.com>
Date: Tue, 6 May 2014 18:00:12 -0400
Subject: [PATCH] Replaced RCUE with PatternFly (part 3).

The RCUE library has been replaced with a more generic PatternFly
library. The dialog boxes and the navigation bar have been updated
accordingly.

Ticket #958
---
 base/server/share/webapps/pki/css/pki-tables.css   | 33 ++--------
 base/server/share/webapps/pki/css/pki-ui.css       | 34 +---------
 base/server/share/webapps/pki/js/pki-ui.js         | 37 ++++-------
 base/tps-tomcat/shared/webapps/tps/index.html      |  4 +-
 base/tps-tomcat/shared/webapps/tps/ui/audit.html   | 42 +++++++-----
 .../shared/webapps/tps/ui/authenticator.html       | 42 +++++++-----
 base/tps-tomcat/shared/webapps/tps/ui/config.html  | 42 +++++++-----
 .../shared/webapps/tps/ui/connector.html           | 42 +++++++-----
 base/tps-tomcat/shared/webapps/tps/ui/group.html   | 40 +++++++-----
 base/tps-tomcat/shared/webapps/tps/ui/index.html   | 37 ++++++-----
 .../shared/webapps/tps/ui/profile-mapping.html     | 42 +++++++-----
 base/tps-tomcat/shared/webapps/tps/ui/profile.html | 42 +++++++-----
 base/tps-tomcat/shared/webapps/tps/ui/token.html   | 52 ++++++++-------
 base/tps-tomcat/shared/webapps/tps/ui/tokens.html  | 76 ++++++++++++----------
 14 files changed, 281 insertions(+), 284 deletions(-)

diff --git a/base/server/share/webapps/pki/css/pki-tables.css b/base/server/share/webapps/pki/css/pki-tables.css
index b8534611e4c02eea464fc646f93f10003f229462..63a99549bb364c864459a63050c941d9c5f1ddce 100644
--- a/base/server/share/webapps/pki/css/pki-tables.css
+++ b/base/server/share/webapps/pki/css/pki-tables.css
@@ -8,7 +8,7 @@ table {
 table caption {
   text-align: left;
   font-weight: bold;
-  padding: 11.5px;
+  padding: 11px;
 }
 
 table tbody tr:nth-child(even) {
@@ -20,35 +20,10 @@ table tbody tr td,
 table thead tr th {
   font-weight: normal;
   padding: 6px 15px;
-  font-size: 11.5px;
-  border-top: 1px #ebebeb;
-  border-right: 1px #dcdcdc solid;
-  text-align: left;
-}
-
-.rcue-table-actions {
-  padding: 1px;
-  border-top: none;
-}
-
-.rcue-table-actions span:last-child {
-  float: right;
-}
-
-.rcue-table-actions {
-  padding: 1px;
-}
-
-.rcue-table-actions button {
-  padding: 3px 8px;
   font-size: 11px;
-  box-shadow: 1px 2px 2px #e3e3e3;
-  margin: 4px;
-}
-
-.rcue-table-number {
-  text-align: right;
-  width: 100px;
+  border-top: 1px #ebebeb;
+  border-right: 1px #dcdcdc solid;
+  text-align: left;
 }
 
 table thead tr th {
diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index 73d28770416ca21478a7e607e364da37412f6ac6..d5c74445fd1dc81a18fddeabafabe3e7a6204ad1 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -19,11 +19,8 @@
  * @author Endi S. Dewata
  */
 
-@import url("pki-common.css");
-@import url("pki-tabs.css");
 @import url("pki-forms.css");
 @import url("pki-tables.css");
-@import url("pki-dialogs.css");
 
 .pki-header {
   margin-bottom: 10px;
@@ -53,39 +50,12 @@
   margin-bottom: 5px;
 }
 
-.pki-fields fieldset label {
-  min-width: 100px;
+fieldset label {
+  min-width: 150px;
   display: inline-block;
   line-height: 30px;
 }
 
-.rcue-dialog-background {
-  display: none;
-}
-
-.rcue-dialog header {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  margin: 0;
-  padding: 16px 16px 0 22px;
-}
-
-.rcue-dialog fieldset {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 75px;
-  bottom: 60px;
-  padding: 16px 16px 16px 44px;
-}
-
-.rcue-dialog footer {
-  right: 0;
-  padding: 0 16px 16px 22px;
-}
-
 input[readonly="readonly"] {
   background-image: none;
   border: 1px solid #FFFFFF;
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index 442c6b27d79185e2cf88f5e2485f397d4a01c274..9a1d2e59393c896c0e59f710cd67f3432a13eb2b 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -188,7 +188,7 @@ var Dialog = Backbone.View.extend({
         if (self.actions == undefined) {
             // by default all buttons are active
             self.actions = [];
-            self.$("button").each(function(index) {
+            self.$(".modal-footer button").each(function(index) {
                 var button = $(this);
                 var action = button.attr("name");
                 self.actions.push(action);
@@ -204,21 +204,18 @@ var Dialog = Backbone.View.extend({
         self.handlers["close"] = function() {
             self.close();
         };
+
+        self.$el.modal({ show: false });
     },
     render: function() {
         var self = this;
 
         if (self.title) {
-            self.$("header h1").text(self.title);
+            self.$(".modal-title").text(self.title);
         }
 
-        self.$(".rcue-button-close").click(function(e) {
-            self.close();
-            e.preventDefault();
-        });
-
         // setup input fields
-        self.$("input").each(function(index) {
+        self.$(".modal-body input").each(function(index) {
             var input = $(this);
             var name = input.attr("name");
             if (_.contains(self.readonly, name)) {
@@ -229,7 +226,7 @@ var Dialog = Backbone.View.extend({
         });
 
         // setup buttons
-        self.$("button").each(function(index) {
+        self.$(".modal-footer button").each(function(index) {
             var button = $(this);
             var action = button.attr("name");
 
@@ -257,15 +254,14 @@ var Dialog = Backbone.View.extend({
     open: function() {
         var self = this;
         self.render();
-        self.$el.show();
+        self.$el.modal("show");
     },
     close: function() {
         var self = this;
-        self.$el.hide();
+        self.$el.modal("hide");
 
         // remove event handlers
-        self.$(".rcue-button-close").off("click");
-        self.$("button").each(function(index) {
+        self.$(".modal-footer button").each(function(index) {
             var button = $(this);
             button.off("click");
         });
@@ -275,13 +271,13 @@ var Dialog = Backbone.View.extend({
         var self = this;
 
         // load input fields
-        $("input", self.$el).each(function(index) {
+        self.$(".modal-body input").each(function(index) {
             var input = $(this);
             self.loadField(input);
         });
 
         // load drop-down lists
-        $("select", self.$el).each(function(index) {
+        self.$(".modal-body select").each(function(index) {
             var input = $(this);
             self.loadField(input);
         });
@@ -297,13 +293,13 @@ var Dialog = Backbone.View.extend({
         var self = this;
 
         // save input fields
-        $("input", self.$el).each(function(index) {
+        self.$(".modal-body input").each(function(index) {
             var input = $(this);
             self.saveField(input);
         });
 
         // save drop-down lists
-        $("select", self.$el).each(function(index) {
+        self.$(".modal-body select").each(function(index) {
             var input = $(this);
             self.saveField(input);
         });
@@ -328,18 +324,13 @@ var ErrorDialog = Backbone.View.extend({
         var self = this;
 
         if (self.title) {
-            self.$(".pki-title").text(self.title);
+            self.$(".modal-title").text(self.title);
         }
 
         if (self.content) {
             self.$("span[name=content]").html(self.content);
         }
 
-        self.$(".rcue-button-close").click(function(e) {
-            self.close();
-            e.preventDefault();
-        });
-
         self.$("button[name=close]").click(function(e) {
             self.close();
             e.preventDefault();
diff --git a/base/tps-tomcat/shared/webapps/tps/index.html b/base/tps-tomcat/shared/webapps/tps/index.html
index 183b73fcf2623aac0977b24e5685beaddbb23800..c511f147bd34348dcf9ee3bae9930ba5f24df394 100644
--- a/base/tps-tomcat/shared/webapps/tps/index.html
+++ b/base/tps-tomcat/shared/webapps/tps/index.html
@@ -18,7 +18,7 @@
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="/pki/css/rcue.css" rel="stylesheet" media="screen, print">
+    <link href="/pki/css/patternfly.css" rel="stylesheet" media="screen, print">
     <script src="/pki/js/jquery.js"></script>
     <script src="/pki/js/bootstrap.js"></script>
     <script src="/tps/js/account.js"></script>
@@ -41,7 +41,7 @@ $(function() {
 </head>
 <body>
 
-<nav id="navigation" class="navbar navbar-default navbar-rcue" role="navigation">
+<nav id="navigation" class="navbar navbar-default navbar-pf" role="navigation">
 <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/audit.html b/base/tps-tomcat/shared/webapps/tps/ui/audit.html
index 3e5662e1653eed713fc519ba4a3590648f0b1547..3e6cc6cbbc8cb402b128cbef67559073b664b775 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/audit.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/audit.html
@@ -106,23 +106,29 @@
 </tfoot>
 </table>
 
-<div id="event-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Event</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <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>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="event-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Event</h4>
+            </div>
+            <div class="modal-body">
+                <fieldset>
+                    <label>Name</label>
+                    <input name="name" readonly="readonly"><br>
+                    <label>Value</label>
+                    <input name="value" readonly="readonly"><br>
+                </fieldset>
+            </div>
+            <div class="modal-footer">
+                <button name="add" class="btn btn-primary">Add</button>
+                <button name="save" class="btn btn-primary">Save</button>
+                <button name="close" class="btn btn-primary">Close</button>
+                <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
index 866dab10ce77e70eb9c9fcef654dde80bee80294..6da1fbf123e83795d20601d3aa4e3b615d07ea37 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/authenticator.html
@@ -103,23 +103,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <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>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Name</label>
+		            <input name="name" readonly="readonly"><br>
+		            <label>Value</label>
+		            <input name="value" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="add" class="btn btn-primary">Add</button>
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="close" class="btn btn-primary">Close</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/config.html b/base/tps-tomcat/shared/webapps/tps/ui/config.html
index 3d838bd6f38417875e9dd9394b57b6b22ac8fef3..d94a0fa288909da49d86fe0c91953d29303e510e 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/config.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/config.html
@@ -88,23 +88,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <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>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Name</label>
+		            <input name="name" readonly="readonly"><br>
+		            <label>Value</label>
+		            <input name="value" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="add" class="btn btn-primary">Add</button>
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="close" class="btn btn-primary">Close</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/connector.html b/base/tps-tomcat/shared/webapps/tps/ui/connector.html
index 1eba29f6cffae56c71a0456049fa928c58933f9d..015a7ac6d7fe7b1af4a31b174426517646a9c3a2 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/connector.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/connector.html
@@ -103,23 +103,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <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>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Name</label>
+		            <input name="name" readonly="readonly"><br>
+		            <label>Value</label>
+		            <input name="value" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="add" class="btn btn-primary">Add</button>
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="close" class="btn btn-primary">Close</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/group.html b/base/tps-tomcat/shared/webapps/tps/ui/group.html
index 17e7d1e1d4a60e6b866839746e59eaf48554bb69..493b79488d40a5944b88af9488bf998c18f3ea78 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/group.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/group.html
@@ -98,22 +98,28 @@
 </tfoot>
 </table>
 
-<div id="member-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Group Member</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <label>Group ID</label>
-            <input name="groupID" readonly="readonly"><br>
-            <label>User ID</label>
-            <input name="memberID" readonly="readonly"><br>
-        </fieldset>
-        <footer>
-            <button name="add" class="primary">Add</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="member-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Group Member</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Group ID</label>
+		            <input name="groupID" readonly="readonly"><br>
+		            <label>User ID</label>
+		            <input name="memberID" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+	            <button name="add" class="btn btn-primary">Add</button>
+	            <button name="close" class="btn btn-primary">Close</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/index.html b/base/tps-tomcat/shared/webapps/tps/ui/index.html
index 8a969e0eebd879933f07e99c82febef2b7b8296c..edf3f3092db52426f14474c487b4bc78ba8a9666 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/index.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/index.html
@@ -18,12 +18,13 @@
 <html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="/pki/css/rcue.css" rel="stylesheet" media="screen, print">
+    <link href="/pki/css/patternfly.css" rel="stylesheet" media="screen, print">
     <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/bootstrap.js"></script>
+    <script src="/pki/js/patternfly.js"></script>
     <script src="/pki/js/pki-ui.js"></script>
     <script src="/tps/js/tps.js"></script>
     <script src="/tps/js/account.js"></script>
@@ -333,7 +334,7 @@ $(function() {
 </head>
 <body>
 
-<nav id="navigation" class="navbar navbar-default navbar-rcue" role="navigation">
+<nav id="navigation" class="navbar navbar-default navbar-pf" role="navigation">
 <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
@@ -350,7 +351,7 @@ $(function() {
     <li><a href="#">Status</a></li>
     <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-        <span class="rcueicon rcueicon-user"></span>
+        <span class="pficon pficon-user"></span>
         <span id="user"></span><b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
@@ -395,18 +396,24 @@ $(function() {
 <div id="content">
 </div>
 
-<div id="error-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <span class="pki-title">Error</span>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <span name="content"></span>
-        </fieldset>
-        <footer>
-            <button name="close" class="primary">Close</button>
-        </footer>
+<div id="error-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Error</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <span name="content"></span>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+                <button name="close" class="btn btn-primary">Close</button>
+            </div>
+        </div>
     </div>
 </div>
 
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 9f0a214e0103f186a6abe56141ae0c1e69ac95b8..139d2126200d4708ed2a071dad4232f0d04a6f3f 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile-mapping.html
@@ -103,23 +103,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <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>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+		        <fieldset>
+		            <label>Name</label>
+		            <input name="name" readonly="readonly"><br>
+		            <label>Value</label>
+		            <input name="value" readonly="readonly"><br>
+		        </fieldset>
+            </div>
+            <div class="modal-footer">
+                <button name="add" class="btn btn-primary">Add</button>
+                <button name="save" class="btn btn-primary">Save</button>
+                <button name="close" class="btn btn-primary">Close</button>
+                <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/profile.html b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
index e41444c9d68367a0feb47d0e78d29150e0c76490..61811bcc349dfc83348c4140f3821855d17efb4f 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/profile.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/profile.html
@@ -103,23 +103,29 @@
 </tfoot>
 </table>
 
-<div id="property-dialog" class="rcue-dialog-background">
-    <div class="rcue-dialog">
-        <header>
-            <h1>Edit Property</h1>
-            <a class="rcue-button-close" href="#"></a>
-        </header>
-        <fieldset>
-            <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>
-            <button name="save" class="primary">Save</button>
-            <button name="close" class="primary">Close</button>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="property-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Edit Property</h4>
+            </div>
+            <div class="modal-body">
+                <fieldset>
+                    <label>Name</label>
+                    <input name="name" readonly="readonly"><br>
+                    <label>Value</label>
+                    <input name="value" readonly="readonly"><br>
+                </fieldset>
+            </div>
+            <div class="modal-footer">
+                <button name="add" class="btn btn-primary">Add</button>
+                <button name="save" class="btn btn-primary">Save</button>
+                <button name="close" class="btn btn-primary">Close</button>
+                <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/token.html b/base/tps-tomcat/shared/webapps/tps/ui/token.html
index 247300af4bbdfcb66b1ef9261b9a1bb8ae459bc1..6d34af5d253b3ab2c5d74dc52b957417d90e1d17 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/token.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/token.html
@@ -61,28 +61,34 @@
 </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 id="token-status-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Change Token Status</h4>
+            </div>
+            <div class="modal-body">
+		        <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>
+            </div>
+            <div class="modal-footer">
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </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 e5f52105f6681f8cf9e0f6d84c8b688e9faf7148..98ae769aa0dee6cb9b898f1a97c95746b8d0f20a 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/tokens.html
@@ -86,40 +86,46 @@
 </tfoot>
 </table>
 
-<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>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>
-            <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>
-            <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>
-            <button name="cancel">Cancel</button>
-        </footer>
+<div id="token-status-dialog" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                    <span class="pficon pficon-close"></span>
+                </button>
+                <h4 class="modal-title">Change Token Status</h4>
+            </div>
+            <div class="modal-body">
+		        <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>
+		            <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>
+		            <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 class="modal-footer">
+	            <button name="save" class="btn btn-primary">Save</button>
+	            <button name="cancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            </div>
+        </div>
     </div>
 </div>
-- 
1.8.4.2

