Better API error handling

js/forum/src/components/composer-reply.js

@@ -93,9 +93,10 @@ export default class ComposerReply extends ComposerBody {
           })
         );
       }
-    }, (response) => {
+    }, errors => {
       this.loading(false);
       m.redraw();
+      app.handleApiErrors(errors);
     });
   }
 }

js/forum/src/components/login-modal.js

@@ -1,6 +1,7 @@
 import Component from 'flarum/component';
 import LoadingIndicator from 'flarum/components/loading-indicator';
 import SignupModal from 'flarum/components/signup-modal';
+import Alert from 'flarum/components/alert';
 import icon from 'flarum/helpers/icon';
 
 export default class LoginModal extends Component {
@@ -15,7 +16,7 @@ export default class LoginModal extends Component {
   view() {
     return m('div.modal-dialog.modal-sm.modal-login', [
       m('div.modal-content', [
-        m('button.btn.btn-icon.btn-link.close.back-control', {onclick: app.modal.close.bind(app.modal)}, icon('times')),
+        m('button.btn.btn-icon.btn-link.close.back-control', {onclick: this.hide.bind(this)}, icon('times')),
         m('form', {onsubmit: this.login.bind(this)}, [
           m('div.modal-header', m('h3.title-control', 'Log In')),
           this.props.message ? m('div.modal-alert.alert', this.props.message) : '',
@@ -49,15 +50,22 @@ export default class LoginModal extends Component {
     $modal.find('[name=email]').focus();
   }
 
+  hide() {
+    app.modal.close();
+    app.alerts.dismiss(this.errorAlert);
+  }
+
   login(e) {
     e.preventDefault();
     this.loading(true);
     app.session.login(this.email(), this.password()).then(() => {
-      app.modal.close();
+      this.hide();
       this.props.callback && this.props.callback();
-    }, (response) => {
+    }, response => {
       this.loading(false);
       m.redraw();
+      app.alerts.dismiss(this.errorAlert);
+      app.alerts.show(this.errorAlert = new Alert({ type: 'warning', message: 'Invalid credentials.' }))
     });
   }
 }

js/lib/components/alert.js

@@ -13,7 +13,7 @@ export default class Alert extends Component {
     var message = attrs.message;
     delete attrs.message;
 
-    var controlItems = attrs.controls.slice() || [];
+    var controlItems = attrs.controls ? attrs.controls.slice() : [];
     delete attrs.controls;
 
     if (attrs.dismissible || attrs.dismissible === undefined) {

js/lib/components/alerts.js

@@ -23,8 +23,8 @@ export default class Alerts extends Component {
     var index = this.components.indexOf(component);
     if (index !== -1) {
       this.components.splice(index, 1);
+      m.redraw();
     }
-    m.redraw();
   }
 
   clear() {

js/lib/utils/app.js

@@ -1,4 +1,5 @@
 import ItemList from 'flarum/utils/item-list';
+import Alert from 'flarum/components/alert';
 
 class App {
   constructor() {
@@ -14,6 +15,14 @@ class App {
     document.title = (title ? title+' - ' : '')+this.config['forum_title'];
   }
 
+  handleApiErrors(response) {
+    this.alerts.clear();
+
+    response.errors.forEach(error =>
+      this.alerts.show(new Alert({ type: 'warning', message: error.detail }))
+    );
+  }
+
   route(name, params) {
     var url = this.routes[name][0].replace(/:([^\/]+)/g, function(m, t) {
       var value = params[t];