change login page to dialog

resources/js/components/Dialog.vue

+<template>
+  <v-dialog v-model="dialog" transition="dialog-bottom-transition" width="40%">
+    <slot></slot>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  computed: {
+    dialog: {
+      get () {
+        return this.$store.getters.getDialog
+      },
+      set (value) {
+        this.$store.commit('setDialog', value)
+      }
+    }
+  }
+}
+</script>
+

resources/js/components/Snackbar.vue

+<template>
+  <v-snackbar
+    v-model="show"
+    :color="color"
+    :timeout="6000"
+  >
+    {{ text }}
+    <v-btn
+      dark
+      flat
+      @click="snackbar = false"
+    >
+      ปิด
+    </v-btn>
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      snackbar: false
+    }
+  },
+  computed: {
+    show: {
+      get () {
+        return this.$store.getters.getSnackbar.show
+      },
+      set (value) {
+        this.$store.commit('setSnackbar', {
+          show: false,
+          color: null,
+          text: null
+        })
+      }
+    },
+    color () {
+      return this.$store.getters.getSnackbar.color
+    },
+    text () {
+      return this.$store.getters.getSnackbar.text
+    }
+  }
+}
+</script>
+

resources/js/components/Toolbar.vue

@@ -6,8 +6,11 @@
           <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" @click="$router.push('/account')">
-            <v-icon>person</v-icon> เข้าสู่ระบบ / สมัครสมาชิก
+          <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-btn small outline color="deep-orange darken-4" @click="$router.push('/register')">
+            <v-icon>account_box</v-icon> ลงทะเบียน
           </v-btn>
         </v-toolbar>
       </v-flex>
@@ -69,12 +72,19 @@
         </v-toolbar>
       </v-flex>
     </v-layout>
+    <login></login>
   </div>
 </template>
 
 <script>
+import Login from '../views/Login.vue';
+import Register from '../views/Register.vue';
 export default {
   props: ['page'],
+  components: {
+    'login': Login,
+    'register': Register
+  },
   data () {
     return {
       responsive: false

resources/js/layouts/AppLayout.vue

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

resources/js/route.js

@@ -8,6 +8,8 @@ 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';

resources/js/store.js

@@ -10,9 +10,12 @@ export default new Vuex.Store({
     message: 'Kittisak Maneewong',
     jwt: localStorage.getItem('access_token') || null,
     jwt_employer: localStorage.getItem('access_token_employer') || null,
-    loading1: false,
-    loading2: false,
-    error: null
+    dialog: false,
+    snackbar: {
+      show: false,
+      color: null,
+      text: null
+    }
   },
   mutations: {
     setJwt (state, payload) {
@@ -21,36 +24,38 @@ export default new Vuex.Store({
     setJwtEmployer (state, payload) {
       state.jwt_employer = payload
     },
-    setLoading1 (state, payload) {
-      state.loading1 = payload
-    },
-    setLoading2 (state, payload) {
-      state.loading2 = payload
+    setDialog (state, payload) {
+      state.dialog = payload
     },
-    setError (state, payload) {
-      state.error = payload
+    setSnackbar (state, payload) {
+      state.snackbar = 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)
+        .then(res => {
+          if (payload.role == 1) {
+            localStorage.setItem('access_token', res.data.token)
+            commit('setJwt', res.data.token)
+          } else {
+            localStorage.setItem('access_token_employer', res.data.token)
+            commit('setJwtEmployer', res.data.token)
+          }
+          commit('setSnackbar', {
+            show: true,
+            color: 'success',
+            text: 'เข้าสู่ระบบสำเร็จ!'
           })
+          commit('setDialog', false)
+          console.log(res)
+          resolve(res)
+        })
+        .catch(err => {
+          console.log(err.response)
+          reject(err.response)
+        })
       })
     },
     register ({commit}, payload) {
@@ -83,14 +88,11 @@ export default new Vuex.Store({
     getJwtEmployer (state) {
       return state.jwt_employer;
     },
-    getLoading1 (state) {
-      return state.loading1
-    },
-    getLoading2 (state) {
-      return state.loading2
+    getDialog (state) {
+      return state.dialog
     },
-    getError (state) {
-      return state.error
+    getSnackbar (state) {
+      return state.snackbar
     }
   }
 });

resources/js/views/Login.vue

+<template>
+  <div>
+    <Dialog>
+      <v-card>
+        <v-toolbar dark color="deep-orange darken-4" flat>
+          <v-toolbar-title>เข้าสู่ระบบ</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-btn icon @click="$store.commit('setDialog', false)">
+            <v-icon>close</v-icon>
+          </v-btn>
+        </v-toolbar>
+        <v-layout row wrap justify-center>
+          <v-card-text>
+            <v-container grid-list-md text-xs-center>
+              <v-layout row wrap>
+                <v-flex>
+                  <!-- <v-alert
+                    :value="true"
+                    color="error"
+                    outline
+                  >
+                    This is a error alert.
+                  </v-alert> -->
+                  <v-form @submit.prevent="login()" ref="login">
+                    <v-text-field
+                      label="อีเมล"
+                      color="deep-orange darken-4"
+                      type="email"
+                      v-model="loginData.email_users"
+                      :rules="clickLogin ? [rules.required, rules.email] : []"
+                      required
+                    ></v-text-field>
+                    <v-text-field
+                      label="รหัสผ่าน"
+                      color="deep-orange darken-4"
+                      v-model="loginData.password"
+                      :append-icon="showPassword ? 'visibility' : 'visibility_off'"
+                      :type="showPassword ? 'text' : 'password'"
+                      @click:append="showPassword = !showPassword"
+                      :rules="clickLogin ? [rules.required] : []"
+                      required
+                    ></v-text-field>
+                    <p class="text-xs-right"><router-link to="/" class="body-2 font-weight-medium">ลืมรหัสผ่าน?</router-link></p>
+                    <v-btn color="deep-orange darken-4" large dark block type="submit">เข้าสู่ระบบ</v-btn>
+                  </v-form>
+                  <div class="my-3"><span class="font-weight-bold">หรือ</span></div>
+                  <v-btn color="primary" block><v-icon>fab fa-facebook</v-icon>&nbsp;เข้าสู่ระบบ Facebook</v-btn>
+                  <v-btn color="deep-orange" class="white--text" block><v-icon>fab fa-google</v-icon>&nbsp;เข้าสู่ระบบ Google</v-btn>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-card-text>
+        </v-layout>
+      </v-card>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '../components/Dialog.vue';
+export default {
+  components: {
+    Dialog
+  },
+  data () {
+    return {
+      loginData: {
+        email_users: '',
+        password: '',
+        role: 1
+      },
+      showPassword: false,
+      clickLogin: false,
+      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) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
+      }
+    }
+  },
+  methods: {
+    login () {
+      this.clickLogin = true
+      if(this.$refs.login.validate() && this.loginData.email_users !== '' && this.loginData.password !== '') {
+        this.$store.dispatch('login', this.loginData)
+          .then(res => {
+            this.clickLogin = false
+            this.loginData = {
+              email_users: '',
+              password: '',
+              role: 1
+            }
+          })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+</style>
+