Add current user

resources/js/App.vue

@@ -5,3 +5,5 @@
 </template>
 
 
+
+

resources/js/app.js

@@ -29,5 +29,8 @@ const app = new Vue({
     el: '#app',
     router,
     store,
-    render: h => h(App)
+    render: h => h(App),
+    created () {
+        this.$store.dispatch('checkUser')
+    }
 });

resources/js/components/Dialog.vue

@@ -6,6 +6,11 @@
 
 <script>
 export default {
+  data () {
+    return {
+      show: true
+    }
+  },
   computed: {
     dialog: {
       get () {
@@ -15,6 +20,15 @@ export default {
         this.$store.commit('setDialog', value)
       }
     }
+  },
+  updated () {
+    if (this.dialog && this.show) {
+      this.show = false
+      this.$parent.$refs.login.resetValidation()
+      this.$parent.$data.clickLogin = false
+    } else if (!this.dialog) {
+      this.show = true
+    }
   }
 }
 </script>

resources/js/components/Snackbar.vue

@@ -9,7 +9,7 @@
     <v-btn
       dark
       flat
-      @click="snackbar = false"
+      @click="show = false"
     >
       ปิด
     </v-btn>
@@ -18,11 +18,6 @@
 
 <script>
 export default {
-  data () {
-    return {
-      snackbar: false
-    }
-  },
   computed: {
     show: {
       get () {

resources/js/components/Toolbar.vue

@@ -6,11 +6,14 @@
           <v-spacer></v-spacer>
           <v-btn small="" dark color="deep-orange darken-4" class="elevation-0" @click="$router.push('/employer/login')">สำหรับผู้ประกอบการ</v-btn>
           <v-divider inset vertical></v-divider>
-          <v-btn small outline color="deep-orange darken-4" @click.stop="$store.commit('setDialog', !$store.getters.getDialog)">
-            <v-icon>person</v-icon> เข้าสู่ระบบ
+          <v-btn v-if="!currentUser" small outline color="deep-orange darken-4" @click.stop="login()">
+            <v-icon>person</v-icon>&nbsp;เข้าสู่ระบบ
           </v-btn>
-          <v-btn small outline color="deep-orange darken-4" @click="$router.push('/register')">
-            <v-icon>account_box</v-icon> ลงทะเบียน
+          <v-btn v-if="!currentUser" small outline color="deep-orange darken-4" @click.stop="register()">
+            <v-icon>account_box</v-icon>&nbsp;ลงทะเบียน
+          </v-btn>
+          <v-btn v-else small outline color="deep-orange darken-4" @click="logout()">
+            <v-icon>account_circle</v-icon>&nbsp;{{ currentUser }}
           </v-btn>
         </v-toolbar>
       </v-flex>
@@ -72,7 +75,8 @@
         </v-toolbar>
       </v-flex>
     </v-layout>
-    <login></login>
+    <login v-if="dialog === 'login'"></login>
+    <register v-if="dialog === 'register'"></register>
   </div>
 </template>
 
@@ -87,7 +91,13 @@ export default {
   },
   data () {
     return {
-      responsive: false
+      responsive: false,
+      dialog: 'login'
+    }
+  },
+  computed: {
+    currentUser () {
+      return this.$store.getters.getUser.name
     }
   },
   mounted () {
@@ -104,6 +114,17 @@ export default {
       } else {
         this.responsive = false
       }
+    },
+    logout () {
+      this.$store.dispatch('logout')
+    },
+    login () {
+      this.dialog = 'login'
+      this.$store.commit('setDialog', !this.$store.getters.getDialog)
+    },
+    register () {
+      this.dialog = 'register'
+      this.$store.commit('setDialog', !this.$store.getters.getDialog)
     }
   }
 }

resources/js/route.js

@@ -8,14 +8,12 @@ import EmployerLayout from './layouts/EmployerLayout.vue';
 
 import Home from './views/Home.vue';
 import Account from './views/Account.vue';
-import Login from './views/Login.vue';
-import Register from './views/Register.vue'
 import LoginEmployer from './views/LoginEmployer.vue';
 import PageNotFound from './views/PageNotFound.vue';
 import Addjob from './views/Addjob.vue';
 import RegisterEmployer from './views/RegisterEmployer';
 
-export default new VueRouter({
+const router = new VueRouter({
   mode: 'history',
   routes: [
     {
@@ -63,9 +61,26 @@ export default new VueRouter({
         {
           path: '*',
           name: 'pageNotFound',
-          component: PageNotFound
+          component: PageNotFound,
+          meta: {
+            requiredUser: true
+          }
         }
       ]
     }
   ]
-})
\ No newline at end of file
+})
+
+router.beforeEach((to, from, next) => {
+  if(to.matched.some(record => record.meta.requiredUser)) {
+    if(!localStorage.getItem('access_token')) {
+      next('/employer/login')
+    } else {
+      next()
+    }
+  } else {
+    next()
+  }
+})
+
+export default router
\ No newline at end of file

resources/js/store.js

@@ -8,6 +8,10 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     message: 'Kittisak Maneewong',
+    user: {
+      name: null,
+      email: null
+    },
     jwt: localStorage.getItem('access_token') || null,
     jwt_employer: localStorage.getItem('access_token_employer') || null,
     dialog: false,
@@ -15,7 +19,8 @@ export default new Vuex.Store({
       show: false,
       color: null,
       text: null
-    }
+    },
+    loading: false
   },
   mutations: {
     setJwt (state, payload) {
@@ -29,13 +34,21 @@ export default new Vuex.Store({
     },
     setSnackbar (state, payload) {
       state.snackbar = payload
+    },
+    setUser (state, payload) {
+      state.user = payload
+    },
+    setLoading (state, payload) {
+      state.loading = payload
     }
   },
   actions: {
-    login ({commit}, payload) {
+    login ({commit, dispatch}, payload) {
       return new Promise((resolve, reject) => {
+        commit('setLoading', true)
         axios.post('api/auth/login', payload)
         .then(res => {
+          commit('setLoading', false)
           if (payload.role == 1) {
             localStorage.setItem('access_token', res.data.token)
             commit('setJwt', res.data.token)
@@ -43,16 +56,18 @@ export default new Vuex.Store({
             localStorage.setItem('access_token_employer', res.data.token)
             commit('setJwtEmployer', res.data.token)
           }
+          dispatch('checkUser')
           commit('setSnackbar', {
             show: true,
             color: 'success',
             text: 'เข้าสู่ระบบสำเร็จ!'
           })
           commit('setDialog', false)
-          console.log(res)
           resolve(res)
+          console.log(res)
         })
         .catch(err => {
+          commit('setLoading', false)
           console.log(err.response)
           reject(err.response)
         })
@@ -60,7 +75,7 @@ export default new Vuex.Store({
     },
     register ({commit}, payload) {
       commit('setLoading2', true)
-      return new Promise((resolve, rejeect) => {
+      return new Promise((resolve, reject) => {
         axios.post('api/auth/register', payload)
           .then(res => {
             console.log(res)
@@ -72,10 +87,41 @@ export default new Vuex.Store({
             if (err.response.data == '{"email":["The email has already been taken."]}') {
               this.$store.commit('setError', 'error')
             }
-            rejeect(err.response)
+            reject(err.response)
           })
         commit('setLoading2', false)
       })
+    },
+    logout ({commit}) {
+      localStorage.removeItem('access_token')
+      commit('setUser', {
+        name: null,
+        email: null
+      })
+      commit('setSnackbar', {
+        show: true,
+        color: 'success',
+        text: 'ออกจากระบบสำเร็จ!'
+      })
+    },
+    checkUser ({commit}) {
+      if (!!localStorage.getItem('access_token')) {
+        axios.get('/api/auth/current', {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('access_token')}`
+          }
+        })
+          .then(res => {
+            commit('setUser', {
+              name: res.data.user.name,
+              email: res.data.user.email_users
+            })
+            console.log(res)
+          })
+          .catch(err => {
+            console.log(err.response)
+          })
+      }
     }
   },
   getters: {
@@ -93,6 +139,12 @@ export default new Vuex.Store({
     },
     getSnackbar (state) {
       return state.snackbar
+    },
+    getUser (state) {
+      return state.user
+    },
+    getLoading (state) {
+      return state.loading
     }
   }
 });

resources/js/views/Login.vue

@@ -53,6 +53,26 @@
         </v-layout>
       </v-card>
     </Dialog>
+    <v-dialog
+      v-model="loading"
+      hide-overlay
+      persistent
+      width="300"
+    >
+      <v-card
+        color="deep-orange darken-4"
+        dark
+      >
+        <v-card-text>
+          กำลังเข้าสู่ระบบ
+          <v-progress-linear
+            indeterminate
+            color="white"
+            class="mb-0"
+          ></v-progress-linear>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -73,7 +93,13 @@ export default {
       rules: {
         required: v => !!v || 'จำเป็นต้องกรอก',
         email: v => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
-      }
+      },
+      clickLogin: false
+    }
+  },
+  computed: {
+    loading () {
+      return this.$store.getters.getLoading
     }
   },
   methods: {