switched to using templates instead of inline code

openid-connect-server-webapp/src/main/webapp/resources/js/admin.js

@@ -366,6 +366,50 @@ var UserProfileView = Backbone.View.extend({
 	}
 });
 
+// error handler
+var ErrorHandlerView = Backbone.View.extend({
+	
+	initialize:function(options) {
+    	this.options = options;
+        if (!this.template) {
+            this.template = _.template($('#tmpl-error-box').html());
+        }
+        if (!this.headerTemplate) {
+        	this.headerTemplate = _.template($('#tmpl-error-header').html());
+        }
+	},
+	
+	reloadPage:function(event) {
+		event.preventDefault();
+		window.location.reload(true);
+	},
+
+	handleError:function(message) {
+
+		if (message.log) {
+			console.log(message.log);
+		}
+		
+		var _self = this;
+		
+		return function(model, response, options) {
+			
+			$('#modalAlert').i18n();
+			$('#modalAlert div.modal-header').html(_self.headerTemplate({message: message, model: model, response: response, options: options}));
+			$('#modalAlert .modal-body').html(_self.template({message: message, model: model, response: response, options: options}));
+	
+			$('#modalAlert .modal-body .page-reload').on('click', _self.reloadPage);
+			
+			$('#modalAlert').modal({
+				'backdrop': 'static',
+				'keyboard': true,
+				'show': true
+			});
+		}
+	}
+});
+
+
 // Router
 var AppRouter = Backbone.Router.extend({
 
@@ -424,6 +468,8 @@ var AppRouter = Backbone.Router.extend({
         });
 
         this.breadCrumbView.render();
+        
+        this.errorHandlerView = new ErrorHandlerView();
 
         var base = $('base').attr('href');
         $.getJSON(base + '.well-known/openid-configuration', function(data) {
@@ -1013,47 +1059,6 @@ var AppRouter = Backbone.Router.extend({
 // this gets init after the templates load
 var app = null;
 
-var apiErrorHandler = function(msg) {
-	return function(model, response, options) {
-		if (msg.log) {
-			console.log(msg.log);
-		}
-		
-		var header = "";
-		var message = "";
-		
-		message += $.t('error.message');
-
-		if (response.responseJSON) {
-			header += response.responseJSON.error;
-			message += response.responseJSON.error_description;
-		}
-
-		if (msg.message) {
-			message += $.t(options.message);
-		}	
-		
-		if (response.status == 401) {
-			// unauthorized means the session probably timed out, prompt the user to reload the page
-			message += $('#tmpl-page-reload').html();
-		}
-		
-		$('#modalAlert').i18n();
-		$('#modalAlert div.modal-header').html(header);
-		$('#modalAlert .modal-body').html(message);
-
-		$('#modalAlert .modal-body .page-reload').on('click', function(event) {
-			event.preventDefault();
-			window.location.reload(true);
-		});
-
-		$('#modalAlert').modal({
-			'backdrop': 'static',
-			'keyboard': true,
-			'show': true
-		});
-	};
-};
 // main
 $(function () {
 
@@ -1089,9 +1094,10 @@ $(function () {
     		});
     
     window.onerror = function ( message, filename, lineno, colno, error ){
+    	console.log(message);
 		//Display an alert with an error message
 		$('#modalAlert div.modal-header').html($.t('error.title'));
-		$('#modalAlert div.modal-body').html($.t('error.message') + ' <br /> ' [filename, lineno, colno, error]);
+		$('#modalAlert div.modal-body').html($.t('error.message') + message + ' <br /> ' + [filename, lineno, colno, error]);
 		
 		 $("#modalAlert").modal({ // wire up the actual modal functionality and show the dialog
 			 "backdrop" : "static",

openid-connect-server-webapp/src/main/webapp/resources/js/client.js

@@ -1061,7 +1061,7 @@ var ClientFormView = Backbone.View.extend({
             	app.clientList.add(_self.model);
                 app.navigate('admin/clients', {trigger:true});
             },
-            error:apiErrorHandler({log: "An error occurred when saving a client"})
+            error:app.errorHandlerView.handleError({log: "An error occurred when saving a client"})
         });
 
         return false;

openid-connect-server-webapp/src/main/webapp/resources/js/locale/en/messages.json

@@ -468,8 +468,9 @@
 	},
 	"error": {
 		"title": "Error",
-		"header": "Error:",
-		"message": "There was an error processing your request. The server''s message was:"
+		"header": "Error",
+		"header-with-message": "Error: ",
+		"message": "There was an error in the application: "
 	},
 	"login": {
 		"login_with_username_and_password": "Login with Username and Password",

openid-connect-server-webapp/src/main/webapp/resources/template/admin.html

@@ -112,11 +112,46 @@
 </script>
 
 <!-- error box -->
-<script type="text/html" id="tmpl-page-reload">
 
+<script type="text/html" id="tmpl-error-box">
+
+<p>
+	<span data-i18n="error.message">There was an error processing your request.</span>
+
+<% if (response.responseJSON) { %>
+	<span data-i18n="error.server-message">The server said: </span><span class="text-error"><%- response.responseJSON.error_description %></span>
+<% } %>
+
+</p>
+
+<p>
+
+<% if (message.message) { %>
+	<span class="text-info"><%- message.message %></span>
+<% } %>
+
+</p>
+	
+<% if (response.status == 401) { %>
 	<p>
 		<span data-i18n="error.reload">It looks like you're not logged in. Reload the page to try again.</span>
 		<button class="btn btn-primary page-reload"><i class="icon-refresh icon-white"></i> <span data-i18n="error.reload-button">Reload</span></button>
 	</p>
+<% } %>
+
+</script>
+
+<script type="text/html" id="tmpl-error-header">
+
+	<span class="label label-inverse"><%- response.status %>: <%- response.statusText %></span>
+			
+	<b>
+	<% if (response.responseJSON) { %>
+		<span data-i18n="error.header-with-message">Error: </span><%- response.responseJSON.error %>
+	<% } else { %>
+		<span data-i18n="error.header">Error</span>
+	<% } %>
+	</b>
+
 
 </script>