Set up ember-cli-flash

app/pods/application/template.hbs

@@ -47,6 +47,9 @@
     </div>
 
     <div class="view-wrap">
+      {{#each flashMessages.queue as |flash|}}
+        {{custom-flash-message flash=flash}}
+      {{/each}}
       {{outlet}}
     </div>
   </div>

app/pods/components/custom-flash-message/component.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['flakes-message'],
+  classNameBindings: ['type'],
+  type: Ember.computed.readOnly('flash.type'),
+});

app/pods/components/custom-flash-message/template.hbs

@@ -0,0 +1 @@
+{{flash.message}}

app/pods/login/controller.js

@@ -3,16 +3,16 @@ import Ember from 'ember';
 export default Ember.Controller.extend({
   actions: {
     authenticate: function() {
-      this.set('errorMessage', null);
       let credentials = this.getProperties('identification', 'password');
       let authenticator = 'simple-auth-authenticator:token';
 
       this.set('loading', true);
+      this.get('flashMessages').clearMessages();
       this.get('session').authenticate(authenticator, credentials).then(()=>{
         this.set('loading', false);
       }, (error)=> {
         this.set('loading', false);
-        this.set('errorMessage', error.error);
+        this.get('flashMessages').error(error.error);
       });
     }
   }

app/pods/login/route.js

@@ -1,8 +1,4 @@
 import Ember from 'ember';
 import UnauthenticatedRouteMixin from 'simple-auth/mixins/unauthenticated-route-mixin';
 
-export default Ember.Route.extend(UnauthenticatedRouteMixin, {
-  setupController: function(controller) {
-    controller.set('errorMessage', null);
-  }
-});
+export default Ember.Route.extend(UnauthenticatedRouteMixin, {});

app/pods/login/template.hbs

@@ -2,10 +2,7 @@
   <p>You are already logged in!</p>
 {{else}}
   {{#if loading}}
-    <div class="spinner">
-      <div class="double-bounce1"></div>
-      <div class="double-bounce2"></div>
-    </div>
+    {{loading-panel}}
   {{else}}
     <form {{action "authenticate" on="submit"}}>
       <h2>Log In</h2>
@@ -14,7 +11,4 @@
         {{input class="button-gray" type="submit" value="Log In"}}
     </form>
   {{/if}}
-  {{#if errorMessage}}
-    <div class="flakes-message error">{{errorMessage}}</div>
-  {{/if}}
 {{/if}}

config/environment.js

@@ -34,6 +34,11 @@ module.exports = function(environment) {
       'style-src': "'self' 'unsafe-inline'",
       'media-src': "'self'"
     },
+    flashMessageDefaults: {
+      sticky: true,
+      type: 'error',
+      types: ['error', 'warning', 'success', 'information', 'tip', 'message'],
+    },
   };
 
   if (environment === 'development') {

package.json

@@ -27,6 +27,7 @@
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.0",
     "ember-cli-divshot": "^0.1.7",
+    "ember-cli-flash": "1.1.4",
     "ember-cli-htmlbars": "0.7.6",
     "ember-cli-ic-ajax": "0.1.1",
     "ember-cli-inject-live-reload": "^1.3.0",

tests/helpers/flash-message.js

@@ -0,0 +1,3 @@
+import FlashObject from 'ember-cli-flash/flash/object';
+
+FlashObject.reopen({ _destroyLater: null });

tests/test-helper.js

@@ -1,4 +1,6 @@
 import resolver from './helpers/resolver';
+import flashMessageHelper from './helpers/flash-message';
+
 import {
   setResolver
 } from 'ember-qunit';

tests/unit/pods/components/custom-flash-message/component-test.js

@@ -0,0 +1,19 @@
+import { moduleForComponent, test } from 'ember-qunit';
+
+moduleForComponent('custom-flash-message', 'Unit | Component | custom flash message', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar'],
+  unit: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});