Issue #160: Provide Async Error Handling

Added Toast notification for unexpected errors
    On 401 and 403 Errors, user is redirected to login

webgoat-container/src/main/resources/static/css/main.css

@@ -977,4 +977,23 @@ font-size: 1.3em;
   border: 2px solid #a66;
   border-radius: 12px;
   padding: 7px;
+}
+
+/* ERROR NOTIFICATION */
+#error-notification-container {
+  display: none;
+  position: absolute;
+  right: 20px;
+  width: 35%;
+
+}
+#error-notification {
+  text-align: center;
+  border-radius: 4px;
+  color: #ffffff;
+  background-color: #eb6154;
+  border-color: #eb6154;
+  font-weight: bold;
+  font-size: 12px;
+  padding: 10px;
 }

webgoat-container/src/main/resources/static/js/goatApp/goatApp.js

@@ -1,9 +1,10 @@
-define(['jquery','underscore','backbone','goatApp/view/GoatRouter'],
-	function($,_,Backbone,Router){
+define(['jquery','underscore','backbone','goatApp/view/GoatRouter', 'goatApp/support/goatAsyncErrorHandler'],
+	function($,_,Backbone,Router, asyncErrorHandler){
 		'use strict'
 		//var goatRouter = new Router();
 		return {
 			initApp: function() {
+				asyncErrorHandler.init();
 				//TODO: add query/ability to load from where they left off 
 				var goatRouter = new Router();
 				goatRouter.init();

webgoat-container/src/main/resources/static/js/goatApp/support/goatAsyncErrorHandler.js

@@ -0,0 +1,34 @@
+define(
+    ['backbone', 'underscore'],
+    function(Backbone, _) {
+        return {
+            init: function() {
+                var backboneSync = Backbone.sync;
+
+                var asyncErrorHandler = function(error) {
+                    return function(jqXHR) {
+                        var statusCode = jqXHR.status;
+                        var errorCodes = {
+                            404: true,
+                            500: true,
+                            503: true,
+                            504: true
+                        };
+
+                        if (statusCode === 401 || statusCode === 403) {
+                            window.top.location.href = "login";
+                        } else if(errorCodes[statusCode]) {
+                            Backbone.trigger("error:unhandled");
+                        }
+                    };
+                };
+
+                Backbone.sync = function(method, model, options) {
+                    // override error handler
+                    options.error = asyncErrorHandler(options.error);
+                    return backboneSync(method, model, options);
+                }
+            }
+        };
+    }
+);

webgoat-container/src/main/resources/static/js/goatApp/view/ErrorNotificationView.js

@@ -0,0 +1,35 @@
+define(['jquery',
+        'underscore',
+        'backbone'],
+    function($,
+             _,
+             Backbone) {
+        return Backbone.View.extend({
+            el:'#error-notification-container',
+            initialize: function() {
+                Backbone.on("error:unhandled", this.showNotification.bind(this));
+                this.hideNotification();
+                this.currentTimeout = null;
+            },
+
+            showNotification: function() {
+                var self = this;
+                if (!this.$el.is(':visible')) {
+                    this.$el.show(350);
+                }
+                if (this.currentTimeout != null) {
+                    window.clearTimeout(this.currentTimeout);
+                }
+                this.currentTimeout = window.setTimeout(function() {
+                    self.hideNotification();
+                    self.currentTimeout = null;
+                }, 3000);
+            },
+
+            hideNotification: function() {
+                if (this.$el.is(':visible')) {
+                    this.$el.hide(350);
+                }
+            }
+        });
+    });

webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js

@@ -2,17 +2,20 @@
 define(['jquery',
     'underscore',
     'backbone',
-    'libs/jquery.form'], 
+    'libs/jquery.form',
+    'goatApp/view/ErrorNotificationView'],
     function(
         $,
         _,
         Backbone,
-        JQueryForm) {
+        JQueryForm,
+        ErrorNotificationView) {
     return Backbone.View.extend({
         el:'#lesson-content-wrapper', //TODO << get this fixed up in DOM
 
         initialize: function(options) {
             options = options || {};
+            new ErrorNotificationView();
         },
 
         /* initial renering */