7 files changed, 50 insertions, 9 deletions
diff --git a/web-ui/app/js/mail_list_actions/ui/compose_trigger.js b/web-ui/app/js/mail_list_actions/ui/compose_trigger.js
index 33430598..ec79cb26 100644
--- a/web-ui/app/js/mail_list_actions/ui/compose_trigger.js
+++ b/web-ui/app/js/mail_list_actions/ui/compose_trigger.js
@@ -38,9 +38,19 @@ define(
         this.trigger(document, events.dispatchers.rightPane.openComposeBox);
       };
 
+      this.showEmailSuccess = function () {
+        this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Your message was sent!', class: 'success'});
+      };
+
+      this.showEmailError = function (ev, data) {
+        this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Error,  message not sent: ' + data.responseJSON.message, class: 'error'});
+      };
+
       this.after('initialize', function () {
         this.render();
         this.on('click', this.enableComposing);
+        this.on(document, events.mail.sent, this.showEmailSuccess);
+        this.on(document, events.mail.send_failed, this.showEmailError);
       });
     }
   }
diff --git a/web-ui/app/js/mail_view/data/mail_sender.js b/web-ui/app/js/mail_view/data/mail_sender.js
index 0d11c636..8bb01f70 100644
--- a/web-ui/app/js/mail_view/data/mail_sender.js
+++ b/web-ui/app/js/mail_view/data/mail_sender.js
@@ -36,7 +36,7 @@ define(
 
       function failureSendingMail(on) {
         return function(result) {
-          on.trigger(document, events.mail.send_failed);
+          on.trigger(document, events.mail.send_failed, result);
         };
       }
 
@@ -51,6 +51,7 @@ define(
       });
 
       this.sendMail = function(event, data) {
+        this.trigger(events.dispatchers.rightPane.openNoMessageSelected);
         monitoredAjax.call(_, this, this.attr.mailsResource, {
           type: 'POST',
           dataType: 'json',
diff --git a/web-ui/app/js/user_alerts/ui/user_alerts.js b/web-ui/app/js/user_alerts/ui/user_alerts.js
index 57701579..b02762aa 100644
--- a/web-ui/app/js/user_alerts/ui/user_alerts.js
+++ b/web-ui/app/js/user_alerts/ui/user_alerts.js
@@ -40,7 +40,7 @@ define(
 
 
       this.displayMessage = function (ev, data) {
-        this.render({ message: data.message});
+        this.render({ message:  {content: data.message, class: (data.class || 'success')}});
       };
 
       this.after('initialize', function () {
diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss
index bd1210df..cfb31cbe 100644
--- a/web-ui/app/scss/_alerts.scss
+++ b/web-ui/app/scss/_alerts.scss
@@ -4,11 +4,20 @@
   position: fixed;
   z-index: 10000;
   text-align: center;
-  span {
-    background: $warning;
+  span{
     padding: 5px 60px;
-    border: 1px solid darken($warning, 10%);
-    color: darken($warning, 50%);
-    @include box-shadow(1px 1px 3px darken($warning, 60%));
+    &.success {
+        background: $warning;
+        color: darken($warning, 50%);
+        border: 1px solid darken($warning, 10%);
+        @include box-shadow(1px 1px 3px darken($warning, 60%));
+    }
+    &.error {
+        font-weight: bold;
+        color: white;
+        background: $error;
+        border: 1px solid darken($error, 10%);
+        @include box-shadow(1px 1px 3px darken($error, 60%));
+    }
   }
 }
diff --git a/web-ui/app/templates/user_alerts/message.hbs b/web-ui/app/templates/user_alerts/message.hbs
index d2fff04a..3a0055eb 100644
--- a/web-ui/app/templates/user_alerts/message.hbs
+++ b/web-ui/app/templates/user_alerts/message.hbs
@@ -1 +1 @@
-<span>{{ message }}</span>
+<span class="{{ message.class }}">{{ message.content }}</span>
diff --git a/web-ui/test/spec/mail_list_actions/ui/compose_trigger.spec.js b/web-ui/test/spec/mail_list_actions/ui/compose_trigger.spec.js
index 5e65ddbb..20deeae3 100644
--- a/web-ui/test/spec/mail_list_actions/ui/compose_trigger.spec.js
+++ b/web-ui/test/spec/mail_list_actions/ui/compose_trigger.spec.js
@@ -13,4 +13,19 @@ describeComponent('mail_list_actions/ui/compose_trigger', function () {
     expect(spyEvent).toHaveBeenTriggeredOn(document);
   });
 
+  it('trigger showEmailSuccess message when message is sent', function () {
+      var spyEvent = spyOnEvent(document, Pixelated.events.ui.userAlerts.displayMessage);
+
+      this.component.trigger(document, Pixelated.events.mail.sent);
+
+      expect(spyEvent).toHaveBeenTriggeredOnAndWith(document, {message: 'Your message was sent!', class: 'success'});
+  });
+
+  it('trigger showEmailError message when message is not sent', function () {
+      var spyEvent = spyOnEvent(document, Pixelated.events.ui.userAlerts.displayMessage);
+
+      this.component.trigger(document, Pixelated.events.mail.send_failed, {responseJSON: {message: 'failure'}});
+
+      expect(spyEvent).toHaveBeenTriggeredOnAndWith(document, {message: 'Error,  message not sent: failure', class: 'error'});
+  });
 });
diff --git a/web-ui/test/spec/user_alerts/ui/user_alerts.spec.js b/web-ui/test/spec/user_alerts/ui/user_alerts.spec.js
index 5b25b5fb..5d87795a 100644
--- a/web-ui/test/spec/user_alerts/ui/user_alerts.spec.js
+++ b/web-ui/test/spec/user_alerts/ui/user_alerts.spec.js
@@ -10,7 +10,13 @@ describeComponent('user_alerts/ui/user_alerts', function () {
   it('should render message when ui:user_alerts:displayMessage is triggered', function () {
     this.component.trigger(Pixelated.events.ui.userAlerts.displayMessage, { message: 'a message' });
 
-    expect(this.component.$node.html()).toMatch('a message');
+    expect(this.component.$node.html()).toEqual('<span class="success">a message</span>\n');
+  });
+
+  it('should render error message', function () {
+    this.component.trigger(Pixelated.events.ui.userAlerts.displayMessage, { message: 'send failed', class: 'error' });
+
+    expect(this.component.$node.html()).toEqual('<span class="error">send failed</span>\n');
   });
 
   it('should be emptied and hidden when hide is called', function() {