update login register logout employer

resources/js/components/Navbar.vue

@@ -6,11 +6,11 @@
           <v-spacer></v-spacer>
           <v-btn small="" dark color="cyan darken-4" class="elevation-0" @click="$router.push('/')">สำหรับผู้สมัครงาน</v-btn>
           <v-divider inset vertical></v-divider>
-          <v-btn round v-if="!currentUser" small outline color="cyan darken-4" @click="$router.push('/employer/login')">
+          <v-btn round v-if="!currentEmployer" small outline color="cyan darken-4" @click="$router.push('/employer/login')">
             เข้าสู่ระบบ/ลงทะเบียน
           </v-btn>
           <v-btn v-else small outline color="cyan darken-4" @click="logout()">
-            <v-icon>account_circle</v-icon>&nbsp;{{ currentUser }}
+            <v-icon>account_circle</v-icon>&nbsp;{{ currentEmployer }}
           </v-btn>
         </v-toolbar>
       </v-flex>
@@ -74,3 +74,18 @@
     </v-layout>
   </div>
 </template>
+
+<script>
+export default {
+  computed: {
+    currentEmployer () {
+      return this.$store.getters.getEmployer.username
+    }
+  },
+  methods: {
+    logout () {
+      this.$store.dispatch('logoutEmployer')
+    }
+  }
+}
+</script>

resources/js/layouts/EmployerLayout.vue

@@ -13,16 +13,19 @@
       </v-container>
     </v-content>
     <!-- <Footer></Footer> -->
+    <Snackbar></Snackbar>
   </div>
 </template>
 
 <script>
 import Navbar from '../components/Navbar.vue';
 import Footer from '../components/Footer.vue';
+import Snackbar from '../components/Snackbar.vue';
 export default {
   components: {
     Navbar,
-    Footer
+    Footer,
+    Snackbar
   }
 }
 </script>

resources/js/route.js

@@ -8,6 +8,7 @@ import EmployerLayout from './layouts/EmployerLayout.vue';
 
 import Home from './views/Home.vue';
 import Account from './views/Account.vue';
+import Employer from './views/Employer.vue';
 import LoginEmployer from './views/LoginEmployer.vue';
 import PageNotFound from './views/PageNotFound.vue';
 import Addjob from './views/Addjob.vue';
@@ -21,6 +22,11 @@ const router = new VueRouter({
       name: 'employerLayout',
       component: EmployerLayout,
       children: [
+        {
+          path: '',
+          name: 'Employer',
+          component: Employer
+        },
         {
           path: 'login',
           name: 'loginEmployer',

resources/js/store.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 
-import router from './route';
-
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -12,6 +10,11 @@ export default new Vuex.Store({
       name: null,
       email: null
     },
+    employer: {
+      username: null,
+      company_name: null,
+      email: null
+    },
     jwt: localStorage.getItem('access_token') || null,
     jwt_employer: localStorage.getItem('access_token_employer') || null,
     dialog: false,
@@ -39,6 +42,9 @@ export default new Vuex.Store({
     setUser (state, payload) {
       state.user = payload
     },
+    setEmployer (state, payload) {
+      state.employer = payload
+    },
     setLoading (state, payload) {
       state.loading = payload
     },
@@ -56,11 +62,12 @@ export default new Vuex.Store({
           if (payload.role == 1) {
             localStorage.setItem('access_token', res.data.token)
             commit('setJwt', res.data.token)
+            dispatch('checkUser')
           } else {
             localStorage.setItem('access_token_employer', res.data.token)
             commit('setJwtEmployer', res.data.token)
+            dispatch('checkEmployer')
           }
-          dispatch('checkUser')
           commit('setSnackbar', {
             show: true,
             color: 'success',
@@ -123,6 +130,19 @@ export default new Vuex.Store({
         text: 'ออกจากระบบสำเร็จ!'
       })
     },
+    logoutEmployer ({commit}) {
+      localStorage.removeItem('access_token_employer')
+      commit('setEmployer', {
+        username: null,
+        company_name: null,
+        email: null
+      })
+      commit('setSnackbar', {
+        show: true,
+        color: 'success',
+        text: 'ออกจากระบบสำเร็จ!'
+      })
+    },
     checkUser ({commit}) {
       if (!!localStorage.getItem('access_token')) {
         axios.get('/api/auth/current', {
@@ -141,6 +161,26 @@ export default new Vuex.Store({
             console.log(err.response)
           })
       }
+    },
+    checkEmployer ({commit}) {
+      if (!!localStorage.getItem('access_token_employer')) {
+        axios.get('/api/auth/current', {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('access_token_employer')}`
+          }
+        })
+          .then(res => {
+            commit('setEmployer', {
+              username: res.data.user.username,
+              company_name: res.data.user.company_name,
+              email: res.data.user.email_employers
+            })
+            console.log(res)
+          })
+          .catch(err => {
+            console.log(err.response)
+          })
+      }
     }
   },
   getters: {
@@ -162,6 +202,9 @@ export default new Vuex.Store({
     getUser (state) {
       return state.user
     },
+    getEmployer (state) {
+      return state.employer
+    },
     getLoading (state) {
       return state.loading
     },

resources/js/views/Employer.vue

+<template>
+  <div>Employer</div>
+</template>

resources/js/views/LoginEmployer.vue

@@ -3,21 +3,29 @@
     <v-layout row wrap>
       <v-flex xs12 sm4 offset-sm4 class="border-iy pa-3 my-3">
         <h3 class="title font-weight-bold my-3">เข้าสู่ระบบสำหรับผู้ประกอบการ</h3>
-        <v-form>
+        <v-form @submit.prevent="login()" ref="loginEmployer">
           <v-text-field
             color="cyan darken-4"
             outline
             label="ชื่อผู้ใช้"
             prepend-inner-icon="person"
+            v-model="loginData.username"
             class="mg-ip"
+            :rules="[rules.required, rules.space]"
+            required
           ></v-text-field>
         <v-text-field
             color="cyan darken-4"
             outline
             label="รหัสผ่าน"
-            type="password"
+            v-model="loginData.password"
+            :append-icon="showPassword ? 'visibility' : 'visibility_off'"
+            :type="showPassword ? 'text' : 'password'"
+            @click:append="showPassword = !showPassword"
+            :rules="[rules.required]"
             prepend-inner-icon="lock"
             class="mg-ip"
+            required
           ></v-text-field>
           <a href="#" class="body-2 font-weight-medium my-3">ลืมรหัสผ่าน</a>
           <v-btn color="cyan darken-4" large dark block type="submit">เข้าสู่ระบบ</v-btn>
@@ -25,16 +33,68 @@
         <v-layout row wrap justify-center class="my-2">
           <span class="body-2 font-weight-medium">ยังไม่มีบัญชีผู้ใช้? <router-link to="/employer/register" href="#">สมัครสมาชิก</router-link></span>
         </v-layout>
-        
       </v-flex>
     </v-layout>
+    <v-dialog
+      v-model="loading"
+      hide-overlay
+      persistent
+      width="300"
+    >
+      <v-card
+        color="cyan 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>
 
-<style lang="scss" scoped>
-  .mg-ip{
-    height:65px;
+<script>
+export default {
+  data () {
+    return {
+      loginData: {
+        username: '',
+        password: '',
+        role: 2
+      },
+      rules: {
+        required: v => !!v || 'จำเป็นต้องกรอก',
+        space: v => !(/ /.test(v)) || 'ห้ามเว้นวรรค',
+      },
+      showPassword: false
+    }
+  },
+  methods: {
+    login () {
+      this.$store.dispatch('login', this.loginData)
+        .then(res => {
+          this.$router.push('/Employer')
+        })
+    }
+  },
+  computed: {
+    loading () {
+      return this.$store.getters.getLoading
     }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+  // .mg-ip{
+  //   height:65px;
+  // }
   
   .border-iy {
     border: 1px solid #dcdcdc;

resources/js/views/RegisterEmployer.vue

@@ -3,7 +3,7 @@
     <v-layout row wrap>
       <v-flex xs12 sm8 offset-sm2 class="border-iy pa-3 my-3">
         <h3 class="title font-weight-bold my-3"> สมัครสมาชิกสำหรับผู้ประกอบการ</h3>
-        <v-form>
+        <v-form @submit.prevent="register()" ref="registerEmployer">
           <v-layout row wrap xs12>
             <v-flex xs12 sm6 class="px-3">
               <label class="font-weight-bold ">ชื่อผู้ใช้ <span class="red--text">&nbsp;*</span></label>
@@ -11,7 +11,10 @@
                 color="cyan darken-4"
                 outline
                 label="ชื่อผู้ใช้"
+                v-model="registerData.username"
                 class="mg-ip"
+                :rules="[rules.required, rules.space]"
+                required
               ></v-text-field>
               
               <label class="font-weight-bold">รหัสผ่าน <span class="red--text">&nbsp;*</span></label>
@@ -19,8 +22,13 @@
                 color="cyan darken-4"
                 outline
                 label="รหัสผ่าน"
-                type="password"
+                :append-icon="showPassword ? 'visibility' : 'visibility_off'"
+                @click:append="showPassword = !showPassword"
+                :type="showPassword ? 'text' : 'password'"
+                v-model="registerData.password"
+                :rules="[rules.required, rules.min]"
                 class="mg-ip"
+                required
               ></v-text-field>
               
               <label class="font-weight-bold">รหัสผ่านอีกครั้ง <span class="red--text">&nbsp;*</span></label>
@@ -28,8 +36,13 @@
                 color="cyan darken-4"
                 outline
                 label="รหัสผ่านอีกครั้ง"
-                type="password"
+                :append-icon="showPasswordConfirm ? 'visibility' : 'visibility_off'"
+                @click:append="showPasswordConfirm = !showPasswordConfirm"
+                :type="showPasswordConfirm ? 'text' : 'password'"
+                v-model="registerData.password_confirmation"
+                :rules="[rules.required, rules.min, pwdMatch]"
                 class="mg-ip"
+                required
               ></v-text-field>
 
             </v-flex>
@@ -39,7 +52,10 @@
                 color="cyan darken-4"
                 outline
                 label="ชื่อบริษัท"
+                v-model="registerData.company_name"
+                :rules="[rules.required]"
                 class="mg-ip"
+                required
               ></v-text-field>
               
               <label class="font-weight-bold">อีเมล <span class="red--text">&nbsp;*</span></label>
@@ -47,7 +63,10 @@
                 color="cyan darken-4"
                 outline
                 label="อีเมล"
+                v-model="registerData.email"
+                :rules="[rules.required, rules.email]"
                 class="mg-ip"
+                required
               ></v-text-field>
               
               <label class="font-weight-bold">เบอร์โทรศัพท์ <span class="red--text">&nbsp;*</span></label>
@@ -55,7 +74,10 @@
                 color="cyan darken-4"
                 outline
                 label="เบอร์โทรศัพท์"
+                v-model="registerData.tel"
+                :rules="[rules.required]"
                 class="mg-ip"
+                required
               ></v-text-field>
               
             </v-flex>
@@ -66,18 +88,81 @@
           <v-layout row wrap justify-center>
               <span class="body-2 font-weight-medium">มีบัญชีผู้ใช้แล้ว? <router-link to="/employer/login">เข้าสู่ระบบ</router-link></span>           
           </v-layout>
-          
         </v-form>
-        
       </v-flex>
     </v-layout>
+    <v-dialog
+      v-model="loading"
+      hide-overlay
+      persistent
+      width="300"
+    >
+      <v-card
+        color="cyan 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>
 
-<style lang="scss" scoped>
-  .mg-ip{
-    height:70px;
+<script>
+export default {
+  data () {
+    return {
+      registerData: {
+        username: '',
+        email: '',
+        password: '',
+        password_confirmation: '',
+        company_name: '',
+        tel: '',
+        role: 2
+      },
+      rules: {
+        required: v => !!v || 'จำเป็นต้องกรอก',
+        min: v => v.length > 7 || 'รหัสผ่านต้องมี 8 ตัวขึ้นไป',
+        space: v => !(/ /.test(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) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
+      },
+      showPassword: false,
+      showPasswordConfirm: false
+    }
+  },
+  computed: {
+    pwdMatch () {
+      return (this.registerData.password === this.registerData.password_confirmation) || 'รหัสผ่านไม่ตรงกัน'
+    },
+    loading () {
+      return this.$store.getters.getLoading
+    }
+  },
+  methods: {
+    register () {
+      if(this.$refs.registerEmployer.validate()) {
+        this.$store.dispatch('register', this.registerData)
+          .then(res => {
+            this.$router.push('/login')
+          })
       }
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+  // .mg-ip{
+  //   height:70px;
+  // }
   
   .border-iy {
     border: 1px solid #dcdcdc;

routes/web.php

@@ -12,3 +12,9 @@
 */
 
 Route::get('/{any}', 'AppController@index')->where('any', '.*');
+
+Route::group(['prefix' => 'employer/api/auth'], function ($router) {
+  Route::post('register', 'AuthController@register');
+  Route::post('login', 'AuthController@login');
+  Route::get('current', 'AuthController@getAuthenticatedUser');
+});
\ No newline at end of file