Login: display feedback.

app/controllers/login.js

@@ -2,5 +2,20 @@ import Ember from 'ember';
 import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
 
 export default Ember.Controller.extend(LoginControllerMixin, {
-  authenticator: 'simple-auth-authenticator:jwt'
+  authenticator: 'simple-auth-authenticator:jwt',
+  loading: false,
+  actions: {
+    authenticate: function() {
+      this.set('errorMessage', null);
+      var _this = this;
+      this.set('loading', true);
+      this._super().then(function() {
+        _this.set('loading', false);
+      }, function(error) {
+        _this.set('loading', false);
+        var message = error.error;
+        _this.set('errorMessage', message);
+      });
+    }
+  }
 });

app/styles/app.css

@@ -5,3 +5,47 @@
 .flakes-table thead tr {
   cursor: pointer;
 }
+
+/* BEGIN https://github.com/tobiasahlin/SpinKit */
+.spinner {
+  width: 40px;
+  height: 40px;
+
+  position: relative;
+  margin: 100px auto;
+}
+
+.double-bounce1, .double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: bounce 2.0s infinite ease-in-out;
+  animation: bounce 2.0s infinite ease-in-out;
+}
+
+.double-bounce2 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% {
+    transform: scale(1.0);
+    -webkit-transform: scale(1.0);
+  }
+}
+/* END https://github.com/tobiasahlin/SpinKit */

app/templates/login.hbs

@@ -1,12 +1,19 @@
 {{#if loggedIn}}
   <p>You are already logged in!</p>
 {{else}}
+  {{#if loading}}
+    <div class="spinner">
+      <div class="double-bounce1"></div>
+      <div class="double-bounce2"></div>
+    </div>
+  {{else}}
     <form {{action "authenticate" on="submit"}}>
       <h2>Log In</h2>
         {{input value=identification type="text" placeholder="Username"}}
         {{input value=password type="password" placeholder="Password"}}
         {{input class="button-gray" type="submit" value="Log In"}}
     </form>
+  {{/if}}
   {{#if errorMessage}}
     <div class="flakes-message error">{{errorMessage}}</div>
   {{/if}}

package.json

@@ -19,6 +19,7 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "body-parser": "^1.12.2",
     "broccoli-asset-rev": "^2.0.0",
     "connect-restreamer": "^1.0.1",
     "ember-cli": "0.2.0",

server/index.js

@@ -32,6 +32,10 @@ module.exports = function(app) {
   app.use(morgan('dev'));
   app.use(allowCrossDomain);
 
+  // Parse json
+  var bodyParser = require('body-parser');
+  app.use(bodyParser.json());
+
   mocks.forEach(function(route) { route(app); });
   proxies.forEach(function(route) { route(app); });
 

server/mocks/authenticate.js

@@ -4,6 +4,11 @@ module.exports = function(app) {
   var authenticateRouter = express.Router();
 
   authenticateRouter.post('/', function(req, res) {
+    // wait for a bit to simulate cold boot of heroku api
+    var ms = 3000 + new Date().getTime();
+    while (new Date() < ms){}
+
+    if (req.body.username === 'test' && req.body.password === 'test') {
       var token = jwt.sign({
         'name': 'Test User',
         'role': 'admin'
@@ -16,6 +21,9 @@ module.exports = function(app) {
       res.send({
         'token': token
       });
+    } else {
+      res.status(401).send({'error':'Invalid username or password'});
+    }
   });
 
   app.use('/api/authenticate', authenticateRouter);