Added error dialog for TPS UI.

Previously error messages were displayed using alert(). It has been
replaced with a new ErrorDialog which can be formatted properly.

Ticket #949

5 files changed, 111 insertions, 12 deletions

diff --git a/base/server/share/webapps/pki/css/pki-ui.css b/base/server/share/webapps/pki/css/pki-ui.css
index 042f6033d..36210154b 100644
--- a/base/server/share/webapps/pki/css/pki-ui.css
+++ b/base/server/share/webapps/pki/css/pki-ui.css
@@ -31,7 +31,7 @@
 
 .pki-title {
   font-family: "Open Sans",sans-serif;
-  font-size: 30px;
+  font-size: 25px;
   margin: 0;
   color: inherit;
   font-weight: 500;
diff --git a/base/server/share/webapps/pki/js/pki-ui.js b/base/server/share/webapps/pki/js/pki-ui.js
index c4ff6157b..9ba801012 100644
--- a/base/server/share/webapps/pki/js/pki-ui.js
+++ b/base/server/share/webapps/pki/js/pki-ui.js
@@ -178,7 +178,11 @@ var Navigation = Backbone.View.extend({
 
         var page = self.pages[name];
         if (!page) {
-            alert("Invalid page: " + name);
+            new ErrorDialog({
+                el: $("#error-dialog"),
+                title: "Error",
+                content: "Invalid page: " + name
+            }).open();
             return;
         }
 
@@ -333,6 +337,46 @@ var Dialog = Backbone.View.extend({
     }
 });
 
+var ErrorDialog = Backbone.View.extend({
+    initialize: function(options) {
+        var self = this;
+        ErrorDialog.__super__.initialize.call(self, options);
+
+        self.title = options.title;
+        self.content = options.content;
+    },
+    render: function() {
+        var self = this;
+
+        if (self.title) {
+            self.$(".pki-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();
+        });
+    },
+    open: function() {
+        var self = this;
+        self.render();
+        self.$el.show();
+    },
+    close: function() {
+        var self = this;
+        self.$el.hide();
+    }
+});
+
 var TableItem = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
@@ -728,7 +772,11 @@ var ModelTable = Table.extend({
                 });
             },
             error: function(collection, response, options) {
-                alert(response.statusText);
+                new ErrorDialog({
+                    el: $("#error-dialog"),
+                    title: "HTTP Error " + response.responseJSON.Code,
+                    content: response.responseJSON.Message
+                }).open();
             }
         });
     },
@@ -783,7 +831,11 @@ var ModelTable = Table.extend({
                         dialog.close();
                         return;
                     }
-                    alert("ERROR: " + response.responseText);
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + response.responseJSON.Code,
+                        content: response.responseJSON.Message
+                    }).open();
                 }
             });
         });
@@ -794,7 +846,11 @@ var ModelTable = Table.extend({
                 dialog.open();
             },
             error: function(model, response, options) {
-                alert("ERROR: " + response);
+                new ErrorDialog({
+                    el: $("#error-dialog"),
+                    title: "HTTP Error " + response.responseJSON.Code,
+                    content: response.responseJSON.Message
+                }).open();
             }
         });
     },
@@ -830,7 +886,11 @@ var ModelTable = Table.extend({
                         dialog.close();
                         return;
                     }
-                    alert("ERROR: " + response.responseText);
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + response.responseJSON.Code,
+                        content: response.responseJSON.Message
+                    }).open();
                 }
             });
         });
@@ -849,7 +909,11 @@ var ModelTable = Table.extend({
                     self.render();
                 },
                 error: function(model, response, options) {
-                    alert("ERROR: " + response.responseText);
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + response.responseJSON.Code,
+                        content: response.responseJSON.Message
+                    }).open();
                 }
             });
         });
@@ -1002,7 +1066,11 @@ var EntryPage = Page.extend({
                         self.close();
                         return;
                     }
-                    alert("ERROR: " + response.responseText);
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + response.responseJSON.Code,
+                        content: response.responseJSON.Message
+                    }).open();
                 }
             });
         } else {
@@ -1018,7 +1086,11 @@ var EntryPage = Page.extend({
                         self.close();
                         return;
                     }
-                    alert("ERROR: " + response.responseText);
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + response.responseJSON.Code,
+                        content: response.responseJSON.Message
+                    }).open();
                 }
             });
         }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/token.js b/base/tps-tomcat/shared/webapps/tps/js/token.js
index 5e793257b..c4d0e0e3e 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/token.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/token.js
@@ -136,7 +136,11 @@ var TokenTableItem = TableItem.extend({
                         self.table.render();
                     },
                     error: function(jqXHR, textStatus, errorThrow) {
-                        alert("ERROR: " + jqXHR.responseText);
+                        new ErrorDialog({
+                            el: $("#error-dialog"),
+                            title: "HTTP Error " + jqXHR.responseJSON.Code,
+                            content: jqXHR.responseJSON.Message
+                        }).open();
                     }
                 });
             }
diff --git a/base/tps-tomcat/shared/webapps/tps/js/tps.js b/base/tps-tomcat/shared/webapps/tps/js/tps.js
index 09ea7e5ab..bd18538a4 100644
--- a/base/tps-tomcat/shared/webapps/tps/js/tps.js
+++ b/base/tps-tomcat/shared/webapps/tps/js/tps.js
@@ -101,7 +101,11 @@ var EntryWithPropertiesPage = EntryPage.extend({
                     self.render();
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + jqXHR.responseJSON.Code,
+                        content: jqXHR.responseJSON.Message
+                    }).open();
                 }
             });
         });
@@ -115,7 +119,11 @@ var EntryWithPropertiesPage = EntryPage.extend({
                     self.render();
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
-                    alert("ERROR: " + textStatus);
+                    new ErrorDialog({
+                        el: $("#error-dialog"),
+                        title: "HTTP Error " + jqXHR.responseJSON.Code,
+                        content: jqXHR.responseJSON.Message
+                    }).open();
                 }
             });
         });
diff --git a/base/tps-tomcat/shared/webapps/tps/ui/index.html b/base/tps-tomcat/shared/webapps/tps/ui/index.html
index 2155fc551..3544d8eac 100644
--- a/base/tps-tomcat/shared/webapps/tps/ui/index.html
+++ b/base/tps-tomcat/shared/webapps/tps/ui/index.html
@@ -188,5 +188,20 @@ $(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>
+</div>
+
 </body>
 </html>