Alert message for incorrect login credentials

src/components/user/loginPage.vue

@@ -8,11 +8,12 @@
             <h4>Login</h4>
             <br />
           </div>
-          <!--<alert :text="'Login successful'" :type="'SUCCESS'" />
-          <alert :text="'User does not exist, please register'" :type="'ERROR'" />
-          <alert :text="'Username is incorrect'" :type="'WARNING'" />
-          <alert :text="'Password is incorrect'" :type="'WARNING'" />
-          <alert :text="'Caps Lock is on'" :type="'INFO'" />-->
+          <div v-if="this.$store.state.authentication.status === 'error'">
+            <alert
+              :text="'User doesn\'t exist or Username and Password is incorrect'"
+              :type="'ERROR'"
+            />
+          </div>
           <div class="row">
             <div class="col-md-11" style="margin-bottom: 1em">
               <div class="input-group mb-3">
@@ -81,7 +82,7 @@
         <div class="form">
           <h5>Trouble signing in?</h5>
           <div>
-            <!--<alert :text="'Username & password request email sent'" :type="'SUCCESS'" />-->
+            <!-- <alert :text="'Username & password request email sent'" :type="'SUCCESS'" /> -->
             <div class="row">
               <div class="input-group-prepend">
                 <span class="input-group-text">
@@ -103,12 +104,12 @@
 
 <script>
 import { mapActions, mapState } from 'vuex';
-// import alert from '../shared/alert.vue';
+import alert from '../shared/alert.vue';
 
 export default {
   name: 'Login',
   components: {
-    // alert,
+    alert,
   },
   data() {
     return {
@@ -131,9 +132,17 @@ export default {
   methods: {
     ...mapActions('authentication', ['login']),
     Login() {
-      this.login({ username: this.username, password: this.password })
-        .then(() => this.router.push('/'))
-        .catch(err => console.log(err));
+      this.login({ username: this.username, password: this.password }).then(
+        () => {
+          if (this.$store.state.authentication.status === 'error') {
+            this.$router.push('/user/login');
+          }
+        },
+      );
+      // .catch((err) => {
+      //   this.alertmes = true;
+      //   console.log(err);
+      // });
       this.$router.push('/about/us');
     },
     togglePassword() {

src/store/modules/user/authentication.js

@@ -49,11 +49,12 @@ export default {
             commit('auth_success', resp.data.token, resp.data);
           })
           .catch((err) => {
-            commit('auth_error');
+            // commit('auth_error');
             sessionStorage.removeItem('token');
             sessionStorage.removeItem('username');
             sessionStorage.removeItem('name');
             reject(err);
+            commit('auth_error', err.data);
           });
       });
     },