update login register logout

resources/js/components/Dialog.vue

@@ -24,8 +24,11 @@ export default {
   updated () {
     if (this.dialog && this.show) {
       this.show = false
+      if (this.$parent.$refs.login) {
         this.$parent.$refs.login.resetValidation()
-      this.$parent.$data.clickLogin = false
+      } else {
+        this.$parent.$refs.register.resetValidation()
+      }
     } else if (!this.dialog) {
       this.show = true
     }

resources/js/components/Toolbar.vue

@@ -22,7 +22,7 @@
       <v-flex xs12 sm10 offset-sm1>
         <v-toolbar flat color="white"  > <!--v-if="page == 'app'"-->
           <v-toolbar-title>
-            <img src="../../../public/img/banner.png" class="my-2" width="150">
+            <router-link to="/"><img src="../../../public/img/banner.png" class="my-2" width="150"></router-link>
           </v-toolbar-title>
           <v-spacer></v-spacer>
           <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0">

resources/js/store.js

@@ -20,7 +20,8 @@ export default new Vuex.Store({
       color: null,
       text: null
     },
-    loading: false
+    loading: false,
+    error: null
   },
   mutations: {
     setJwt (state, payload) {
@@ -40,6 +41,9 @@ export default new Vuex.Store({
     },
     setLoading (state, payload) {
       state.loading = payload
+    },
+    setError (state, payload) {
+      state.error = payload
     }
   },
   actions: {
@@ -68,28 +72,43 @@ export default new Vuex.Store({
         })
         .catch(err => {
           commit('setLoading', false)
+          if (err.response.data.error === 'invalid_credentials') {
+            commit('setError', 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง')
+            setTimeout(() => {
+              commit('setError', null)
+            }, 4000);
+          }
           console.log(err.response)
           reject(err.response)
         })
       })
     },
     register ({commit}, payload) {
-      commit('setLoading2', true)
       return new Promise((resolve, reject) => {
+        commit('setLoading', true)
         axios.post('api/auth/register', payload)
           .then(res => {
+            commit('setLoading', false)
+            commit('setSnackbar', {
+              show: true,
+              color: 'success',
+              text: 'ลงทะเบียนสำเร็จ!'
+            })
+            commit('setDialog', false)
             console.log(res)
-            commit('setError', null)
             resolve(res)
           })
           .catch(err => {
+            commit('setLoading', false)
             console.log(err.response)
             if (err.response.data == '{"email":["The email has already been taken."]}') {
-              this.$store.commit('setError', 'error')
+              commit('setError', 'อีเมลล์นี้ถูกใช้งานเเล้ว')
+              setTimeout(() => {
+                commit('setError', null)
+              }, 4000);
             }
             reject(err.response)
           })
-        commit('setLoading2', false)
       })
     },
     logout ({commit}) {
@@ -145,6 +164,9 @@ export default new Vuex.Store({
     },
     getLoading (state) {
       return state.loading
+    },
+    getError (state) {
+      return state.error
     }
   }
 });

resources/js/views/Account.vue

@@ -151,7 +151,7 @@ export default {
       },
       rules: {
         required: v => !!v || 'จำเป็นต้องกรอก',
-        min: v => v.length > 7 || 'รหัสผ่านต้องมี 8 ตัวขึ้นไป',
+        min: v => v.length || 'รหัสผ่านต้องมี 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,

resources/js/views/Login.vue

@@ -14,13 +14,6 @@
             <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="อีเมล"
@@ -41,6 +34,13 @@
                       required
                     ></v-text-field>
                     <p class="text-xs-right"><router-link to="/" class="body-2 font-weight-medium">ลืมรหัสผ่าน?</router-link></p>
+                    <p><v-alert
+                      :value="!!error"
+                      color="error"
+                      outline
+                    >
+                      {{ error }}
+                    </v-alert></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>
@@ -100,6 +100,9 @@ export default {
   computed: {
     loading () {
       return this.$store.getters.getLoading
+    },
+    error () {
+      return this.$store.getters.getError
     }
   },
   methods: {

resources/js/views/Register.vue

@@ -21,13 +21,14 @@
                   >
                     This is a error alert.
                   </v-alert> -->
-                  <v-form @submit.prevent="login()" ref="login">
+                  <v-form @submit.prevent="register()" ref="register">
                     <v-layout row wrap>
                       <v-flex sm6 xs12>
                         <v-text-field
                           label="ชื่อ"
                           color="deep-orange darken-4"
-                          clearable
+                          v-model="registerData.first_name"
+                          :rules="[rules.required, rules.space]"
                           required
                           class="fix-size"
                         ></v-text-field>
@@ -36,7 +37,8 @@
                         <v-text-field
                           label="นามสกุล"
                           color="deep-orange darken-4"
-                          clearable
+                          v-model="registerData.last_name"
+                          :rules="[rules.required, rules.space]"
                           required
                           class="fix-size"
                         ></v-text-field>
@@ -45,22 +47,40 @@
                     <v-text-field
                       label="อีเมล"
                       color="deep-orange darken-4"
-                      clearable
+                      v-model="registerData.email"
+                      :rules="[rules.required, rules.email]"
                       required
                       class="fix-size"
                     ></v-text-field>
                     <v-text-field
                       label="รหัสผ่าน"
                       color="deep-orange darken-4"
+                      v-model="registerData.password"
+                      :rules="[rules.required, rules.min]"
+                      :append-icon="showPassword ? 'visibility' : 'visibility_off'"
+                      @click:append="showPassword = !showPassword"
+                      :type="showPassword ? 'text' : 'password'"
                       required
                       class="fix-size"
                     ></v-text-field>
                     <v-text-field
                       label="ยืนยันรหัสผ่าน"
                       color="deep-orange darken-4"
+                      v-model="registerData.password_confirmation"
+                      :rules="[rules.required, rules.min, pwdMatch]"
+                      :append-icon="showPasswordConfirm ? 'visibility' : 'visibility_off'"
+                      @click:append="showPasswordConfirm = !showPasswordConfirm"
+                      :type="showPasswordConfirm ? 'text' : 'password'"
                       required
                       class="fix-size"
                     ></v-text-field>
+                    <p><v-alert
+                      :value="!!error"
+                      color="error"
+                      outline
+                    >
+                      {{ error }}
+                    </v-alert></p>
                     <v-btn color="deep-orange darken-4 my-4" block dark large type="submit">สมัครสมาชิก</v-btn>
                   </v-form>
                 </v-flex>
@@ -70,6 +90,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>
 
@@ -81,24 +121,41 @@ export default {
   },
   data () {
     return {
-      loginData: {
-        email_users: '',
+      registerData: {
+        first_name: '',
+        last_name: '',
+        email: '',
         password: '',
+        password_confirmation: '',
         role: 1
       },
       showPassword: false,
+      showPasswordConfirm: false,
       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) || 'รูปแบบอีเมลล์ไม่ถูกต้อง'
       }
     }
   },
+  computed: {
+    pwdMatch () {
+      return (this.registerData.password === this.registerData.password_confirmation) || 'รหัสผ่านไม่ตรงกัน'
+    },
+    error () {
+      return this.$store.getters.getError
+    },
+    loading () {
+      return this.$store.getters.getLoading
+    }
+  },
   methods: {
-    login () {
-      if(this.$refs.login.validate()) {
-        this.$store.dispatch('login', this.loginData)
+    register () {
+      if(this.$refs.register.validate()) {
+        this.$store.dispatch('register', this.registerData)
           .then(res => {
-            this.$refs.login.reset()
+            this.$refs.register.reset()
           })
       }
     }