success auth

package.json

@@ -21,6 +21,7 @@
         "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
+        "iview": "^3.4.0",
         "validate.js": "^0.12.0",
         "vue-router": "^3.0.2",
         "vuetify": "^1.5.7",

resources/js/app.js

@@ -16,14 +16,22 @@ if (token) {
 
 import Vue from 'vue';
 import Vuetify from 'vuetify';
+import iView from 'iview';
 
 import App from './App.vue';
 import router from './route';
 import store from './store';
 
+import 'iview/dist/styles/iview.css';
+
 // Vue.config.productionTip = false;
 
 Vue.use(Vuetify);
+Vue.use(iView);
+
+iView.LoadingBar.config({
+    height: 3
+});
 
 const app = new Vue({
     el: '#app',

resources/js/route.js

 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import iView from 'iview';
 
 Vue.use(VueRouter);
 
@@ -78,6 +79,7 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
+  iView.LoadingBar.start();
   if(to.matched.some(record => record.meta.requiredUser)) {
     if(!localStorage.getItem('access_token')) {
       next('/employer/login')
@@ -89,4 +91,8 @@ router.beforeEach((to, from, next) => {
   }
 })
 
+router.afterEach(route => {
+  iView.LoadingBar.finish();
+})
+
 export default router
\ No newline at end of file

resources/js/store.js

 import Vue from 'vue';
 import Vuex from 'vuex';
+import iView from 'iview';
 
 Vue.use(Vuex);
 
@@ -60,6 +61,7 @@ export default new Vuex.Store({
         .then(res => {
           commit('setLoading', false)
           if (payload.role == 1) {
+            iView.LoadingBar.finish()
             localStorage.setItem('access_token', res.data.token)
             commit('setJwt', res.data.token)
             dispatch('checkUser')
@@ -78,9 +80,14 @@ export default new Vuex.Store({
           console.log(res)
         })
         .catch(err => {
+          iView.LoadingBar.error()
           commit('setLoading', false)
           if (err.response.data.error === 'invalid_credentials') {
-            commit('setError', 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง')
+            if (payload.role === 1) {
+              commit('setError', 'อีเมลหรือรหัสผ่านไม่ถูกต้อง')
+            } else {
+              commit('setError', 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง')
+            }
             setTimeout(() => {
               commit('setError', null)
             }, 4000);
@@ -95,6 +102,9 @@ export default new Vuex.Store({
         commit('setLoading', true)
         axios.post('api/auth/register', payload)
           .then(res => {
+            if (payload.role === 1) {
+              iView.LoadingBar.finish()
+            }
             commit('setLoading', false)
             commit('setSnackbar', {
               show: true,
@@ -106,19 +116,34 @@ export default new Vuex.Store({
             resolve(res)
           })
           .catch(err => {
+            iView.LoadingBar.error()
             commit('setLoading', false)
             console.log(err.response)
-            if (err.response.data == '{"email":["The email has already been taken."]}') {
-              commit('setError', 'อีเมลล์นี้ถูกใช้งานเเล้ว')
+            const error = JSON.parse(err.response.data);
+            if (error.username && error.email) {
+              commit('setError', 'ชื่อผู้ใช้เเละอีเมลถูกใช้งานเเล้ว')
+              setTimeout(() => {
+                commit('setError', null)
+              }, 4000);
+            } else if (error.email) {
+              commit('setError', 'อีเมลนี้ถูกใช้งานเเล้ว')
+              setTimeout(() => {
+                commit('setError', null)
+              }, 4000);
+              errorMessage = 'อีเมลนี้ถูกใช้งานเเล้ว'
+            } else if (error.username) {
+              commit('setError', 'ชื่อผู้ใช้นี้ถูกใช้งานเเล้ว')
               setTimeout(() => {
                 commit('setError', null)
               }, 4000);
+              errorMessage = 'ชื่อผู้ใช้นี้ถูกใช้งานเเล้ว'
             }
             reject(err.response)
           })
       })
     },
     logout ({commit}) {
+      iView.LoadingBar.finish()
       localStorage.removeItem('access_token')
       commit('setUser', {
         name: null,

resources/js/views/Login.vue

@@ -112,6 +112,8 @@ export default {
           .then(res => {
             this.$refs.login.reset()
           })
+      } else {
+        this.$Loading.error()
       }
     }
   }

resources/js/views/LoginEmployer.vue

@@ -28,6 +28,13 @@
             required
           ></v-text-field>
           <a href="#" class="body-2 font-weight-medium my-3">ลืมรหัสผ่าน</a>
+          <p class="text-xs-center"><v-alert
+            :value="!!error"
+            color="error"
+            outline
+          >
+            {{ error }}
+          </v-alert></p>
           <v-btn color="cyan darken-4" large dark block type="submit">เข้าสู่ระบบ</v-btn>
         </v-form>
         <v-layout row wrap justify-center class="my-2">
@@ -76,15 +83,22 @@ export default {
   },
   methods: {
     login () {
-      this.$store.dispatch('login', this.loginData)
-        .then(res => {
-          this.$router.push('/Employer')
-        })
+      if (this.$refs.loginEmployer.validate()) {
+        this.$store.dispatch('login', this.loginData)
+          .then(res => {
+            this.$router.push('/Employer')
+          })
+      } else {
+        this.$Loading.error()
+      }
     }
   },
   computed: {
     loading () {
       return this.$store.getters.getLoading
+    },
+    error () {
+      return this.$store.getters.getError
     }
   }
 }

resources/js/views/Register.vue

@@ -157,6 +157,8 @@ export default {
           .then(res => {
             this.$refs.register.reset()
           })
+      } else {
+        this.$Loading.error()
       }
     }
   }

resources/js/views/RegisterEmployer.vue

@@ -79,11 +79,19 @@
                 class="mg-ip"
                 required
               ></v-text-field>
-              
+            </v-flex>
+            <v-flex class="px-3">
+              <p><v-alert
+                :value="!!error"
+                color="error"
+                outline
+              >
+                {{ error }}
+              </v-alert></p>
             </v-flex>
           </v-layout>
           <v-layout row wrap justify-center>
-              <v-btn color="cyan darken-4 my-3" dark type="submit">สมัครสมาชิก</v-btn>
+            <v-btn color="cyan darken-4 my-3" dark type="submit">สมัครสมาชิก</v-btn>
           </v-layout>
           <v-layout row wrap justify-center>
               <span class="body-2 font-weight-medium">มีบัญชีผู้ใช้แล้ว? <router-link to="/employer/login">เข้าสู่ระบบ</router-link></span>           
@@ -143,6 +151,9 @@ export default {
     },
     loading () {
       return this.$store.getters.getLoading
+    },
+    error () {
+      return this.$store.getters.getError
     }
   },
   methods: {
@@ -150,8 +161,10 @@ export default {
       if(this.$refs.registerEmployer.validate()) {
         this.$store.dispatch('register', this.registerData)
           .then(res => {
-            this.$router.push('/login')
+            this.$router.push('/employer/login')
           })
+      } else {
+        this.$Loading.error()
       }
     }
   }