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