Merge pull request #253 from alexpelan/alexpelan/issue-250

Issue #250: Provide feedback on failed login
Closes #250

README.md

@@ -18,6 +18,7 @@ To install the frontend please do the following:
 - Clone this repo with `git clone https://github.com/HospitalRun/hospitalrun-frontend`, go to the cloned folder and:
     1. `npm install` to install needed node modules.
     2. `bower install` to install needed bower modules.
+    3. `npm install -g phantomjs2` to install PhantomJS2, which is needed to run tests.
 - Install ands configure [CouchDB](http://couchdb.apache.org/)
   1. Download and install CouchDB from http://couchdb.apache.org/#download
   2. Create admin user:

app/controllers/login.js

@@ -11,8 +11,8 @@ var LoginController = Ember.Controller.extend({
       this.get('session').authenticate('authenticator:custom', {
         identification: identification,
         password: password
-      }).catch((reason) => {
-        this.set('errorMessage', reason.error);
+      }).catch((error) => {
+        this.set('errorMessage', error.reason);
       });
     }
   }

app/styles/_sign_in_screen.scss

@@ -18,5 +18,10 @@
         color: $navy_drk2;
     }
 
+    .form-signin-alert {
+        margin-top: 15px;
+        margin-bottom: 0;
+    }
+
     input { background: white; }
 }

app/templates/login.hbs

@@ -7,6 +7,11 @@
         <div class="form-group">
             {{input id='password' type='password' value=password placeholder='Password' class='form-control'}}
         </div>
+
         <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+
+        {{#if errorMessage}}
+            <div class="alert alert-danger form-signin-alert" role="alert">{{errorMessage}}</div>
+        {{/if}}
     </form>
 </div> <!-- /container -->

tests/acceptance/login-test.js

@@ -39,3 +39,26 @@ test('visiting / redirects user to login', function(assert) {
     click('button:contains(Sign in)');
   });
 });
+
+test('incorrect credentials shows an error message on the screen', function(assert) {
+  assert.expect(2);
+  runWithPouchDump('default', function() {
+    visit('/');
+
+    let errorMessage = 'Name or password is incorrect.';
+
+    stubRequest('post', '/db/_session', function(request) {
+      assert.equal(request.requestBody, 'name=hradmin&password=tset', 'credential are sent to the server');
+      request.error({ 'error': 'unauthorized', 'reason': errorMessage });
+    });
+
+    fillIn('#identification', 'hradmin');
+    fillIn('#password', 'tset');
+    click('button:contains(Sign in)');
+
+    andThen(function() {
+      assert.equal(find('.form-signin-alert').text(), errorMessage, 'Error reason is shown');
+    });
+
+  });
+});