make login

app/Http/Controllers/AuthController.php

@@ -20,7 +20,8 @@ class AuthController extends Controller
     {
         if ($request->json()->get('role') == 1) {
             $validator = Validator::make($request->json()->all() , [
-                'name' => 'required|string|max:255',
+                'first_name' => 'required|string|max:255',
+                'last_name' => 'required|string|max:255',
                 'email' => 'required|string|email|max:255|unique:users,email_users',
                 'password' => 'required|string|min:8|confirmed',
             ]);
@@ -30,7 +31,7 @@ class AuthController extends Controller
             }
     
             $user = User::create([
-                'name' => $request->json()->get('name'),
+                'name' => $request->json()->get('first_name')." ".$request->json()->get('last_name'),
                 'password' => Hash::make($request->json()->get('password')),
                 'email_users' => $request->json()->get('email'),
             ]);

resources/js/components/Toolbar.vue

@@ -6,7 +6,7 @@
           <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 round small outline color="deep-orange darken-4">
+          <v-btn round small outline color="deep-orange darken-4" @click="$router.push('/account')">
             <v-icon>person</v-icon> เข้าสู่ระบบ / สมัครสมาชิก
           </v-btn>
         </v-toolbar>

resources/js/store.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import router from './route';
+
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    message: 'Kittisak Maneewong'
+    message: 'Kittisak Maneewong',
+    jwt: localStorage.getItem('access_token') || null,
+    jwt_employer: localStorage.getItem('access_token_employer') || null,
+    loading1: false,
+    loading2: false,
+    error: null
   },
   mutations: {
+    setJwt (state, payload) {
+      state.jwt = payload
+    },
+    setJwtEmployer (state, payload) {
+      state.jwt_employer = payload
+    },
+    setLoading1 (state, payload) {
+      state.loading1 = payload
+    },
+    setLoading2 (state, payload) {
+      state.loading2 = payload
+    },
+    setError (state, payload) {
+      state.error = payload
+    }
   },
   actions: {
-
+    login ({commit}, payload) {
+      return new Promise((resolve, reject) => {
+        axios.post('api/auth/login', payload)
+          .then(res => {
+            if (payload.role == 1) {
+              localStorage.setItem('access_token', res.data.token)
+              commit('setJwt', res.data.token)
+              router.push('/')
+            } else {
+              localStorage.setItem('access_token_employer', res.data.token)
+              commit('setJwtEmployer', res.data.token)
+            }
+            console.log(res)
+            resolve(res)
+          })
+          .catch(err => {
+            console.log(err.response)
+            reject(err.response)
+          })
+      })
+    },
+    register ({commit}, payload) {
+      commit('setLoading2', true)
+      return new Promise((resolve, rejeect) => {
+        axios.post('api/auth/register', payload)
+          .then(res => {
+            console.log(res)
+            commit('setError', null)
+            resolve(res)
+          })
+          .catch(err => {
+            console.log(err.response)
+            if (err.response.data == '{"email":["The email has already been taken."]}') {
+              this.$store.commit('setError', 'error')
+            }
+            rejeect(err.response)
+          })
+        commit('setLoading2', false)
+      })
+    }
   },
   getters: {
     welcome (state) {
-      return state.message;
+      return state.message
+    },
+    getJwt (state) {
+      return state.jwt
+    },
+    getJwtEmployer (state) {
+      return state.jwt_employer;
+    },
+    getLoading1 (state) {
+      return state.loading1
+    },
+    getLoading2 (state) {
+      return state.loading2
+    },
+    getError (state) {
+      return state.error
     }
   }
 });

resources/js/views/Account.vue

@@ -6,23 +6,33 @@
           <div class="text-sm-left mb-4">
             <span class="headline font-weight-bold">เข้าสู่ระบบ</span>
           </div>
-          <v-form @submit.prevent="login()">
+          <v-form @submit.prevent="login()" v-model="formLogin" ref="login">
             <v-text-field
               label="อีเมล"
-              prepend-inner-icon="email"
+              :rules="[rules.required]"
               color="primary"
               class="fix-size red--text"
               type="email"
-              v-model="loginData.email"
+              v-model="loginData.email_users"
             ></v-text-field>
             <v-text-field
               label="รหัสผ่าน"
-              type="password"
               color="primary"
-              prepend-inner-icon="lock"
+              :rules="[rules.required]"
+              :append-icon="showPasswordLogin ? 'visibility' : 'visibility_off'"
+              @click:append="showPasswordLogin = !showPasswordLogin"
               v-model="loginData.password"
+              :type="showPasswordLogin ? 'text' : 'password'"
             ></v-text-field>
             <p class="text-xs-right"><router-link to="/" class="body-2 font-weight-medium">ลืมรหัสผ่าน?</router-link></p>
+            <v-alert
+              :value="loginError"
+              color="error"
+              icon="warning"
+              outline
+            >
+              อีเมลหรือรหัสผ่านไม่ถูกต้อง!
+            </v-alert>
             <v-btn color="blue" large dark block type="submit">เข้าสู่ระบบ</v-btn>
           </v-form>
           <div class="my-3"><span class="font-weight-bold">หรือ</span></div>
@@ -38,12 +48,13 @@
           <div class="text-sm-left mb-4">
             <span class="headline font-weight-bold">สมัครสมาชิก</span>
           </div>
-          <v-form @submit.prevent="register()">
+          <v-form @submit.prevent="register()" ref="register" v-model="formRegister">
             <v-layout row wrap>
               <v-flex sm6 xs12>
                 <v-text-field
                   label="ชื่อ"
                   v-model="registerData.first_name"
+                  :rules="[rules.required]"
                   clearable
                   required
                   class="fix-size"
@@ -53,6 +64,7 @@
                 <v-text-field
                   label="นามสกุล"
                   v-model="registerData.last_name"
+                  :rules="[rules.required]"
                   clearable
                   required
                   class="fix-size"
@@ -62,6 +74,7 @@
             <v-text-field
               label="อีเมล"
               v-model="registerData.email"
+              :rules="clickRegister ? [rules.required, rules.email] : [rules.required]"
               clearable
               required
               class="fix-size"
@@ -69,24 +82,54 @@
             <v-text-field
               label="รหัสผ่าน"
               v-model="registerData.password"
+              :rules="clickRegister ? [rules.required, rules.min] : [rules.required]"
+              :append-icon="showPassword ? 'visibility' : 'visibility_off'"
+              @click:append="showPassword = !showPassword"
               clearable
-              type="password"
+              :type="showPassword ? 'text' : 'password'"
+              hint="รหัสผ่านต้องมี 8 ตัวขึ้นไป"
               required
               class="fix-size"
             ></v-text-field>
             <v-text-field
               label="ยืนยันรหัสผ่าน"
               v-model="registerData.password_confirmation"
+              :rules="clickRegister ? [rules.required, rules.min, pwdMatch] : [rules.required]"
+              :append-icon="showPasswordConfirm ? 'visibility' : 'visibility_off'"
+              @click:append="showPasswordConfirm = !showPasswordConfirm"
               clearable
-              type="password"
+              hint="รหัสผ่านต้องมี 8 ตัวขึ้นไป"
+              :type="showPasswordConfirm ? 'text' : 'password'"
               required
               class="fix-size"
             ></v-text-field>
-            <v-btn color="red accent-3 my-4" block dark large type="submit">สมัครสมาชิก</v-btn>
+            <v-alert
+              :value="error"
+              color="error"
+              icon="warning"
+              outline
+            >
+              อีเมลนี้ถูกใช้งานเเล้ว
+            </v-alert>
+            <v-btn color="red accent-3 my-4" block dark large type="submit" :loading="loading2">สมัครสมาชิก</v-btn>
           </v-form>
         </v-flex>
       </v-layout>
     </v-container>
+    <v-snackbar
+      v-model="snackbar"
+      color="success"
+      :timeout="6000"
+    >
+      ลงทะเบียนสำเร็จ!
+      <v-btn
+        dark
+        flat
+        @click="snackbar = false"
+      >
+        ปิด
+      </v-btn>
+    </v-snackbar>
   </div>
 </template>
 
@@ -95,8 +138,9 @@ export default {
   data () {
     return {
       loginData: {
-        email: '',
-        password: ''
+        email_users: '',
+        password: '',
+        role: 1
       },
       registerData: {
         first_name: '',
@@ -104,59 +148,78 @@ export default {
         email: '',
         password: '',
         password_confirmation: ''
-      }
+      },
+      rules: {
+        required: v => !!v || 'จำเป็นต้องกรอก',
+        min: v => v.length > 7 || 'รหัสผ่านต้องมี 8 ตัวขึ้นไป',
+        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,
+      showPasswordLogin: false,
+      clickRegister: false,
+      snackbar: false,
+      formRegister: false,
+      formLogin: false,
+      loginError: false
+    }
+  },
+  computed: {
+    pwdMatch () {
+      return (this.registerData.password === this.registerData.password_confirmation) || 'รหัสผ่านไม่ตรง'
+    },
+    loading2 () {
+      return this.$store.getters.getLoading2
+    },
+    error () {
+      return this.$store.getters.getError
     }
   },
   methods: {
     login () {
-      axios.post('api/auth/login', this.loginData)
-        .then((res) => {
-          console.log(res)
-          this.$router.push('/')
-        })
-        .catch((err) => {
-          console.log(err.response)
-        })
+      this.$refs.login.validate()
+      if(this.formLogin) {
+        this.$store.dispatch('login', this.loginData)
+          .catch(err => {
+            console.log(err)
+            this.loginError = true
+          })
+      }
     },
     register () {
-      axios.post('api/auth/register', {
-        name: this.registerData.first_name + ' ' + this.registerData.last_name,
-        email: this.registerData.email,
-        password: this.registerData.password,
-        password_confirmation: this.registerData.password_confirmation
-      })
-        .then((res) => {
-          this.$router.push('/account');
-          this.registerData = {
-            first_name: '',
-            last_name: '',
-            email: '',
-            password: '',
-            password_confirmation: ''
-          }
-          console.log(res)
-        })
-        .catch((err) => {
-          console.log(err.response)
+      this.clickRegister = true
+      this.$refs.register.validate()
+      if(this.formRegister) {
+        this.$store.dispatch('register', {
+          first_name: this.registerData.first_name,
+          last_name: this.registerData.last_name,
+          email: this.registerData.email,
+          password: this.registerData.password,
+          password_confirmation: this.registerData.password_confirmation,
+          role: 1
         })
+          .then(res => {
+            this.snackbar = true
+            this.registerData= {
+              first_name: '',
+              last_name: '',
+              email: '',
+              password: '',
+              password_confirmation: ''
+            }
+            this.clickRegister = false
+            this.$refs.register.resetValidation()
+          })
+      }
     }
-  },
-  mounted () {
-    axios.get('api/user')
-      .then((res) => {
-        console.log(res.body)
-      })
-      .catch((err) => {
-        console.log(err.response)
-      })
   }
 }
 </script>
 
 
 <style lang="scss" scoped>
-  .fix-size {
-    height: 50px;
-  }
+  // .fix-size {
+  //   height: 50px;
+  // }
 </style>
 

resources/js/views/LoginEmployer.vue

@@ -21,7 +21,7 @@
           <v-btn color="brown darken-2" large dark block type="submit">เข้าสู่ระบบ</v-btn>
         </v-form>
         <v-layout row wrap justify-center class="my-2">
-          <span class="body-2 font-weight-medium">ยังไม่มีบัญชีผู้ใช้? <a href="#">สมัครสมาชิก</a></span>
+          <span class="body-2 font-weight-medium">ยังไม่มีบัญชีผู้ใช้? <router-link to="/employer/register" href="#">สมัครสมาชิก</router-link></span>
         </v-layout>
         
       </v-flex>

resources/js/views/RegisterEmployer.vue

@@ -32,7 +32,7 @@
               <v-btn color="brown darken-2 my-3" dark  type="submit">สมัครสมาชิก</v-btn>
           </v-layout>
           <v-layout row wrap justify-center>
-              <span class="body-2 font-weight-medium">มีบัญชีผู้ใช้แล้ว? <a href="#">เข้าสู่ระบบ</a></span>           
+              <span class="body-2 font-weight-medium">มีบัญชีผู้ใช้แล้ว? <router-link to="/employer/login">เข้าสู่ระบบ</router-link></span>           
           </v-layout>
           
         </v-form>