Merge pull request #1 from tbl0605/master

Fix some bugs and improve code a bit

src/App.vue

@@ -1,47 +1,47 @@
 <template>
   <div id="app">
     <nav class="navbar navbar-expand navbar-dark bg-dark">
-      <a href="#" class="navbar-brand">bezKoder</a>
+      <a href class="navbar-brand" @click.prevent>bezKoder</a>
       <div class="navbar-nav mr-auto">
         <li class="nav-item">
-          <a href="/home" class="nav-link">
-            <font-awesome-icon icon="home" /> Home
-          </a>
+          <router-link to="/home" class="nav-link">
+            <font-awesome-icon icon="home" />Home
+          </router-link>
         </li>
-        <li class="nav-item" v-if="showAdminBoard">
-          <a href="/admin" class="nav-link">Admin Board</a>
+        <li v-if="showAdminBoard" class="nav-item">
+          <router-link to="/admin" class="nav-link">Admin Board</router-link>
         </li>
-        <li class="nav-item" v-if="showModeratorBoard">
-          <a href="/mod" class="nav-link">Moderator Board</a>
+        <li v-if="showModeratorBoard" class="nav-item">
+          <router-link to="/mod" class="nav-link">Moderator Board</router-link>
         </li>
         <li class="nav-item">
-          <a href="/user" class="nav-link" v-if="currentUser">User</a>
+          <router-link v-if="currentUser" to="/user" class="nav-link">User</router-link>
         </li>
       </div>
 
-      <div class="navbar-nav ml-auto" v-if="!currentUser">
+      <div v-if="!currentUser" class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a href="/register" class="nav-link">
-            <font-awesome-icon icon="user-plus" /> Sign Up
-          </a>
+          <router-link to="/register" class="nav-link">
+            <font-awesome-icon icon="user-plus" />Sign Up
+          </router-link>
         </li>
         <li class="nav-item">
-          <a href="/login" class="nav-link">
-            <font-awesome-icon icon="sign-in-alt" /> Login
-          </a>
+          <router-link to="/login" class="nav-link">
+            <font-awesome-icon icon="sign-in-alt" />Login
+          </router-link>
         </li>
       </div>
 
-      <div class="navbar-nav ml-auto" v-if="currentUser">
+      <div v-if="currentUser" class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a href="/profile" class="nav-link">
+          <router-link to="/profile" class="nav-link">
             <font-awesome-icon icon="user" />
-            {{currentUser.username}}
-          </a>
+            {{ currentUser.username }}
+          </router-link>
         </li>
         <li class="nav-item">
-          <a href class="nav-link" @click="logOut">
-            <font-awesome-icon icon="sign-out-alt" /> LogOut
+          <a class="nav-link" href @click.prevent="logOut">
+            <font-awesome-icon icon="sign-out-alt" />LogOut
           </a>
         </li>
       </div>
@@ -60,14 +60,14 @@ export default {
       return this.$store.state.auth.user;
     },
     showAdminBoard() {
-      if (this.currentUser) {
+      if (this.currentUser && this.currentUser.roles) {
         return this.currentUser.roles.includes('ROLE_ADMIN');
       }
 
       return false;
     },
     showModeratorBoard() {
-      if (this.currentUser) {
+      if (this.currentUser && this.currentUser.roles) {
         return this.currentUser.roles.includes('ROLE_MODERATOR');
       }
 

src/router.js

@@ -54,15 +54,15 @@ export const router = new Router({
 });
 
 // router.beforeEach((to, from, next) => {
-//   const publicPages = ['/login', '/home'];
+//   const publicPages = ['/login', '/register', '/home'];
 //   const authRequired = !publicPages.includes(to.path);
 //   const loggedIn = localStorage.getItem('user');
 
 //   // trying to access a restricted page + not logged in
 //   // redirect to login page
 //   if (authRequired && !loggedIn) {
-//     return next('/login');
+//     next('/login');
+//   } else {
+//     next();
 //   }
-
-//   next();
 // });

src/services/auth.service.js

@@ -9,7 +9,6 @@ class AuthService {
         username: user.username,
         password: user.password
       })
-      .then(this.handleResponse)
       .then(response => {
         if (response.data.accessToken) {
           localStorage.setItem('user', JSON.stringify(response.data));
@@ -30,18 +29,6 @@ class AuthService {
       password: user.password
     });
   }
-
-  handleResponse(response) {
-    if (response.status === 401) {
-      this.logout();
-      location.reload(true);
-
-      const error = response.data && response.data.message;
-      return Promise.reject(error);
-    }
-
-    return Promise.resolve(response);
-  }
 }
 
 export default new AuthService();

src/store/auth.module.js

@@ -3,7 +3,7 @@ import AuthService from '../services/auth.service';
 const user = JSON.parse(localStorage.getItem('user'));
 const initialState = user
   ? { status: { loggedIn: true }, user }
-  : { status: {}, user: null };
+  : { status: { loggedIn: false }, user: null };
 
 export const auth = {
   namespaced: true,
@@ -17,7 +17,7 @@ export const auth = {
         },
         error => {
           commit('loginFailure');
-          return Promise.reject(error.response.data);
+          return Promise.reject(error);
         }
       );
     },
@@ -33,29 +33,29 @@ export const auth = {
         },
         error => {
           commit('registerFailure');
-          return Promise.reject(error.response.data);
+          return Promise.reject(error);
         }
       );
     }
   },
   mutations: {
     loginSuccess(state, user) {
-      state.status = { loggedIn: true };
+      state.status.loggedIn = true;
       state.user = user;
     },
     loginFailure(state) {
-      state.status = {};
+      state.status.loggedIn = false;
       state.user = null;
     },
     logout(state) {
-      state.status = {};
+      state.status.loggedIn = false;
       state.user = null;
     },
     registerSuccess(state) {
-      state.status = {};
+      state.status.loggedIn = false;
     },
     registerFailure(state) {
-      state.status = {};
+      state.status.loggedIn = false;
     }
   }
 };

src/views/BoardAdmin.vue

@@ -10,7 +10,7 @@
 import UserService from '../services/user.service';
 
 export default {
-  name: 'admin',
+  name: 'Admin',
   data() {
     return {
       content: ''
@@ -22,7 +22,10 @@ export default {
         this.content = response.data;
       },
       error => {
-        this.content = error.response.data.message;
+        this.content =
+          (error.response && error.response.data) ||
+          error.message ||
+          error.toString();
       }
     );
   }

src/views/BoardModerator.vue

@@ -10,7 +10,7 @@
 import UserService from '../services/user.service';
 
 export default {
-  name: 'moderator',
+  name: 'Moderator',
   data() {
     return {
       content: ''
@@ -22,7 +22,10 @@ export default {
         this.content = response.data;
       },
       error => {
-        this.content = error.response.data.message;
+        this.content =
+          (error.response && error.response.data) ||
+          error.message ||
+          error.toString();
       }
     );
   }

src/views/BoardUser.vue

@@ -10,7 +10,7 @@
 import UserService from '../services/user.service';
 
 export default {
-  name: 'user',
+  name: 'User',
   data() {
     return {
       content: ''
@@ -22,7 +22,10 @@ export default {
         this.content = response.data;
       },
       error => {
-        this.content = error.response.data.message;
+        this.content =
+          (error.response && error.response.data) ||
+          error.message ||
+          error.toString();
       }
     );
   }

src/views/Home.vue

@@ -10,7 +10,7 @@
 import UserService from '../services/user.service';
 
 export default {
-  name: 'home',
+  name: 'Home',
   data() {
     return {
       content: ''
@@ -22,7 +22,10 @@ export default {
         this.content = response.data;
       },
       error => {
-        this.content = error.response.data.message;
+        this.content =
+          (error.response && error.response.data) ||
+          error.message ||
+          error.toString();
       }
     );
   }

src/views/Login.vue

@@ -10,41 +10,41 @@
         <div class="form-group">
           <label for="username">Username</label>
           <input
+            v-model="user.username"
+            v-validate="'required'"
             type="text"
             class="form-control"
             name="username"
-            v-model="user.username"
-            v-validate="'required'"
           />
           <div
+            v-if="errors.has('username')"
             class="alert alert-danger"
             role="alert"
-            v-if="errors.has('username')"
           >Username is required!</div>
         </div>
         <div class="form-group">
           <label for="password">Password</label>
           <input
+            v-model="user.password"
+            v-validate="'required'"
             type="password"
             class="form-control"
             name="password"
-            v-model="user.password"
-            v-validate="'required'"
           />
           <div
+            v-if="errors.has('password')"
             class="alert alert-danger"
             role="alert"
-            v-if="errors.has('password')"
           >Password is required!</div>
         </div>
         <div class="form-group">
           <button class="btn btn-primary btn-block" :disabled="loading">
-            <span class="spinner-border spinner-border-sm" v-show="loading"></span>
+            <span v-show="loading" class="spinner-border spinner-border-sm"></span>
             <span>Login</span>
           </button>
         </div>
         <div class="form-group">
-          <div class="alert alert-danger" role="alert" v-if="message">{{message}}</div>
+          <div v-if="message" class="alert alert-danger" role="alert">{{message}}</div>
         </div>
       </form>
     </div>
@@ -55,19 +55,19 @@
 import User from '../models/user';
 
 export default {
-  name: 'login',
-  computed: {
-    loggedIn() {
-      return this.$store.state.auth.status.loggedIn;
-    }
-  },
+  name: 'Login',
   data() {
     return {
       user: new User('', ''),
       loading: false,
       message: ''
     };
   },
+  computed: {
+    loggedIn() {
+      return this.$store.state.auth.status.loggedIn;
+    }
+  },
   created() {
     if (this.loggedIn) {
       this.$router.push('/profile');
@@ -76,24 +76,27 @@ export default {
   methods: {
     handleLogin() {
       this.loading = true;
-      this.$validator.validateAll();
-
-      if (this.errors.any()) {
-        this.loading = false;
-        return;
-      }
+      this.$validator.validateAll().then(isValid => {
+        if (!isValid) {
+          this.loading = false;
+          return;
+        }
 
-      if (this.user.username && this.user.password) {
-        this.$store.dispatch('auth/login', this.user).then(
-          () => {
-            this.$router.push('/profile');
-          },
-          error => {
-            this.loading = false;
-            this.message = error.message;
-          }
-        );
-      }
+        if (this.user.username && this.user.password) {
+          this.$store.dispatch('auth/login', this.user).then(
+            () => {
+              this.$router.push('/profile');
+            },
+            error => {
+              this.loading = false;
+              this.message =
+                (error.response && error.response.data) ||
+                error.message ||
+                error.toString();
+            }
+          );
+        }
+      });
     }
   }
 };