From 739a447ce90c3357c9405521b5cc2ad8a5981a0c Mon Sep 17 00:00:00 2001
From: An Phan <an@construct.sg>
Date: Fri, 1 Jan 2016 13:16:17 +0700
Subject: [PATCH] Error class on login form

---
 resources/assets/js/app.vue                   |  2 +-
 .../assets/js/components/auth/login-form.vue  |  6 ++++-
 resources/assets/js/main.js                   | 23 +++++++++++--------
 resources/assets/js/stores/user.js            | 11 ++++-----
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/resources/assets/js/app.vue b/resources/assets/js/app.vue
index d8f80acc..13aae244 100644
--- a/resources/assets/js/app.vue
+++ b/resources/assets/js/app.vue
@@ -55,7 +55,7 @@
 
         ready() {
             // The app has just been initialized, check if we can get the user data with an already existing token
-            var token = ls.get('jwt-token')
+            var token = ls.get('jwt-token');
             if (token) {
                 this.authenticated = true;
                 this.init();
diff --git a/resources/assets/js/components/auth/login-form.vue b/resources/assets/js/components/auth/login-form.vue
index 382e712c..39a368ff 100644
--- a/resources/assets/js/components/auth/login-form.vue
+++ b/resources/assets/js/components/auth/login-form.vue
@@ -1,5 +1,5 @@
 <template>
-    <form @submit.prevent="login">
+    <form @submit.prevent="login" :class="{ error: failed }">
         <input v-model="email" type="email" name="email" placeholder="Email Address" autofocus required>
         <input v-model="password" type="password" name="password" placeholder="Password" required>
         <button type="submit">Log In</button>
@@ -14,13 +14,17 @@
             return {
                 email: '',
                 password: '',
+                failed: false,
             };
         },
 
         methods: {
             login() {
                 userStore.login(this.email, this.password, () => {
+                    this.failed = false;
                     this.$dispatch('user:loggedin');
+                }, () => {
+                    this.failed = true;
                 });
             },
         },
diff --git a/resources/assets/js/main.js b/resources/assets/js/main.js
index 7e13498c..f259c423 100644
--- a/resources/assets/js/main.js
+++ b/resources/assets/js/main.js
@@ -9,30 +9,33 @@ Vue.config.debug = false;
 Vue.use(require('vue-resource'));
 Vue.http.options.root = '/api';
 Vue.http.interceptors.push({
-    request(request) {
+    request(r) {
         var token = ls.get('jwt-token');
 
         if (token) {
             Vue.http.headers.common.Authorization = `Bearer ${token}`;
         }
 
-        return request;
+        return r;
     },
 
-    response(response) {
-        if (response.status === 400 || response.status === 401) {
-            app.logout();
+    response(r) {
+        if (r.status === 400 || r.status === 401) {
+            if (r.request.method !== 'POST' && r.request.url !== 'me') {
+                // This is not a failed login. Log out then.
+                app.logout();
+            }
         }
 
-        if (response.headers && response.headers.Authorization) {
-            ls.set('jwt-token', response.headers.Authorization);
+        if (r.headers && r.headers.Authorization) {
+            ls.set('jwt-token', r.headers.Authorization);
         }
 
-        if (response.data && response.data.token && response.data.token.length > 10) {
-            ls.set('jwt-token', response.data.token);
+        if (r.data && r.data.token && r.data.token.length > 10) {
+            ls.set('jwt-token', r.data.token);
         }
 
-        return response;
+        return r;
     },
 });
 
diff --git a/resources/assets/js/stores/user.js b/resources/assets/js/stores/user.js
index a91c92d0..f0471b48 100644
--- a/resources/assets/js/stores/user.js
+++ b/resources/assets/js/stores/user.js
@@ -76,14 +76,11 @@ export default {
      * 
      * @param  {String}   email    
      * @param  {String}   password
-     * @param  {Function} cb
+     * @param  {Function} successCb
+     * @param  {Function} errorCb
      */
-    login(email, password, cb = null) {
-        http.post('me', { email, password }, () => {
-            if (cb) {
-                cb();
-            }
-        });
+    login(email, password, successCb = null, errorCb = null) {
+        http.post('me', { email, password }, successCb, errorCb);
     },
 
     /**