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}}