switched to using templates instead of inline code

Author: jricher

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>