Show visual feedback on login error, redirect on success

src/components/login_form/login_form.js

@@ -1,13 +1,17 @@
 const LoginForm = {
   data: () => ({
-    user: {}
+    user: {},
+    authError: false
   }),
   computed: {
     loggingIn () { return this.$store.state.users.loggingIn }
   },
   methods: {
     submit () {
-      this.$store.dispatch('loginUser', this.user)
+      this.$store.dispatch('loginUser', this.user).then(
+        () => { this.$router.push('/main/friends')}, 
+        () => { this.authError = true }
+      )
     }
   }
 }

src/components/login_form/login_form.vue

@@ -17,6 +17,9 @@
         <div class='form-group'>
           <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
         </div>
+        <div v-if="authError" class='form-group'>
+          <button disabled='true' class='btn btn-default base05 error'>Error logging in, try again</button>
+        </div>
       </form>
     </div>
   </div>
@@ -39,6 +42,12 @@
     margin-top: 1.0em;
     min-height: 28px;
   }
+
+  .error {
+    margin-top: 0em;
+    margin-bottom: 0em;
+    background-color: rgba(255, 48, 16, 0.65);
+  }
 }
 
 </style>

src/modules/users.js

@@ -65,6 +65,7 @@ const users = {
       })
     },
     loginUser (store, userCredentials) {
+      return new Promise((resolve, reject) => {
         const commit = store.commit
         commit('beginLogin')
         store.rootState.api.backendInteractor.verifyCredentials(userCredentials)
@@ -92,12 +93,19 @@ const users = {
                   store.rootState.api.backendInteractor.fetchFriends()
                     .then((friends) => commit('addNewUsers', friends))
                 })
+            } else {
+              // Authentication failed
+              commit('endLogin')
+              reject()
             }
             commit('endLogin')
+            resolve()
           })
           .catch((error) => {
             console.log(error)
             commit('endLogin')
+            reject()
+          })
       })
     }
   }