From c1b180ebacdad3ed32c5191c2ba36ceeb10b2158 Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Tue, 23 Jun 2015 13:42:13 -0800 Subject: [PATCH] Set up ember-cli-flash --- app/pods/application/template.hbs | 3 +++ .../custom-flash-message/component.js | 7 +++++++ .../custom-flash-message/template.hbs | 1 + app/pods/login/controller.js | 4 ++-- app/pods/login/route.js | 6 +----- app/pods/login/template.hbs | 8 +------- config/environment.js | 5 +++++ package.json | 1 + tests/helpers/flash-message.js | 3 +++ tests/test-helper.js | 2 ++ .../custom-flash-message/component-test.js | 19 +++++++++++++++++++ 11 files changed, 45 insertions(+), 14 deletions(-) create mode 100644 app/pods/components/custom-flash-message/component.js create mode 100644 app/pods/components/custom-flash-message/template.hbs create mode 100644 tests/helpers/flash-message.js create mode 100644 tests/unit/pods/components/custom-flash-message/component-test.js diff --git a/app/pods/application/template.hbs b/app/pods/application/template.hbs index ebf45d8..78cabb1 100644 --- a/app/pods/application/template.hbs +++ b/app/pods/application/template.hbs @@ -47,6 +47,9 @@
+ {{#each flashMessages.queue as |flash|}} + {{custom-flash-message flash=flash}} + {{/each}} {{outlet}}
diff --git a/app/pods/components/custom-flash-message/component.js b/app/pods/components/custom-flash-message/component.js new file mode 100644 index 0000000..f89312c --- /dev/null +++ b/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'), +}); diff --git a/app/pods/components/custom-flash-message/template.hbs b/app/pods/components/custom-flash-message/template.hbs new file mode 100644 index 0000000..2197d70 --- /dev/null +++ b/app/pods/components/custom-flash-message/template.hbs @@ -0,0 +1 @@ +{{flash.message}} diff --git a/app/pods/login/controller.js b/app/pods/login/controller.js index d055e8f..1282885 100644 --- a/app/pods/login/controller.js +++ b/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); }); } } diff --git a/app/pods/login/route.js b/app/pods/login/route.js index 596bf30..457fe0c 100644 --- a/app/pods/login/route.js +++ b/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, {}); diff --git a/app/pods/login/template.hbs b/app/pods/login/template.hbs index 18d24ef..c851114 100644 --- a/app/pods/login/template.hbs +++ b/app/pods/login/template.hbs @@ -2,10 +2,7 @@

You are already logged in!

{{else}} {{#if loading}} - + {{loading-panel}} {{else}}

Log In

@@ -14,7 +11,4 @@ {{input class="button-gray" type="submit" value="Log In"}}
{{/if}} - {{#if errorMessage}} -
{{errorMessage}}
- {{/if}} {{/if}} diff --git a/config/environment.js b/config/environment.js index e71d629..f1f7848 100644 --- a/config/environment.js +++ b/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') { diff --git a/package.json b/package.json index 4284c02..4b024f0 100644 --- a/package.json +++ b/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", diff --git a/tests/helpers/flash-message.js b/tests/helpers/flash-message.js new file mode 100644 index 0000000..1acf2cf --- /dev/null +++ b/tests/helpers/flash-message.js @@ -0,0 +1,3 @@ +import FlashObject from 'ember-cli-flash/flash/object'; + +FlashObject.reopen({ _destroyLater: null }); diff --git a/tests/test-helper.js b/tests/test-helper.js index e6cfb70..0b009b7 100644 --- a/tests/test-helper.js +++ b/tests/test-helper.js @@ -1,4 +1,6 @@ import resolver from './helpers/resolver'; +import flashMessageHelper from './helpers/flash-message'; + import { setResolver } from 'ember-qunit'; diff --git a/tests/unit/pods/components/custom-flash-message/component-test.js b/tests/unit/pods/components/custom-flash-message/component-test.js new file mode 100644 index 0000000..b6967e6 --- /dev/null +++ b/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'); +});