Commit 9c2c7bdb authored by Kittisak Maneewong's avatar Kittisak Maneewong

update login register logout

parent 43fdcc12
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -24,8 +24,11 @@ export default { ...@@ -24,8 +24,11 @@ export default {
updated () { updated () {
if (this.dialog && this.show) { if (this.dialog && this.show) {
this.show = false this.show = false
this.$parent.$refs.login.resetValidation() if (this.$parent.$refs.login) {
this.$parent.$data.clickLogin = false this.$parent.$refs.login.resetValidation()
} else {
this.$parent.$refs.register.resetValidation()
}
} else if (!this.dialog) { } else if (!this.dialog) {
this.show = true this.show = true
} }
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<v-flex xs12 sm10 offset-sm1> <v-flex xs12 sm10 offset-sm1>
<v-toolbar flat color="white" > <!--v-if="page == 'app'"--> <v-toolbar flat color="white" > <!--v-if="page == 'app'"-->
<v-toolbar-title> <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-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn v-if="!responsive" flat color="black" class="mx-0 px-0"> <v-btn v-if="!responsive" flat color="black" class="mx-0 px-0">
......
...@@ -20,7 +20,8 @@ export default new Vuex.Store({ ...@@ -20,7 +20,8 @@ export default new Vuex.Store({
color: null, color: null,
text: null text: null
}, },
loading: false loading: false,
error: null
}, },
mutations: { mutations: {
setJwt (state, payload) { setJwt (state, payload) {
...@@ -40,6 +41,9 @@ export default new Vuex.Store({ ...@@ -40,6 +41,9 @@ export default new Vuex.Store({
}, },
setLoading (state, payload) { setLoading (state, payload) {
state.loading = payload state.loading = payload
},
setError (state, payload) {
state.error = payload
} }
}, },
actions: { actions: {
...@@ -68,28 +72,43 @@ export default new Vuex.Store({ ...@@ -68,28 +72,43 @@ export default new Vuex.Store({
}) })
.catch(err => { .catch(err => {
commit('setLoading', false) commit('setLoading', false)
if (err.response.data.error === 'invalid_credentials') {
commit('setError', 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง')
setTimeout(() => {
commit('setError', null)
}, 4000);
}
console.log(err.response) console.log(err.response)
reject(err.response) reject(err.response)
}) })
}) })
}, },
register ({commit}, payload) { register ({commit}, payload) {
commit('setLoading2', true)
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
commit('setLoading', true)
axios.post('api/auth/register', payload) axios.post('api/auth/register', payload)
.then(res => { .then(res => {
commit('setLoading', false)
commit('setSnackbar', {
show: true,
color: 'success',
text: 'ลงทะเบียนสำเร็จ!'
})
commit('setDialog', false)
console.log(res) console.log(res)
commit('setError', null)
resolve(res) resolve(res)
}) })
.catch(err => { .catch(err => {
commit('setLoading', false)
console.log(err.response) console.log(err.response)
if (err.response.data == '{"email":["The email has already been taken."]}') { 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) reject(err.response)
}) })
commit('setLoading2', false)
}) })
}, },
logout ({commit}) { logout ({commit}) {
...@@ -145,6 +164,9 @@ export default new Vuex.Store({ ...@@ -145,6 +164,9 @@ export default new Vuex.Store({
}, },
getLoading (state) { getLoading (state) {
return state.loading return state.loading
},
getError (state) {
return state.error
} }
} }
}); });
...@@ -151,7 +151,7 @@ export default { ...@@ -151,7 +151,7 @@ export default {
}, },
rules: { rules: {
required: v => !!v || 'จำเป็นต้องกรอก', 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) || 'รูปแบบอีเมลล์ไม่ถูกต้อง' 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, showPassword: false,
......
...@@ -14,13 +14,6 @@ ...@@ -14,13 +14,6 @@
<v-container grid-list-md text-xs-center> <v-container grid-list-md text-xs-center>
<v-layout row wrap> <v-layout row wrap>
<v-flex> <v-flex>
<!-- <v-alert
:value="true"
color="error"
outline
>
This is a error alert.
</v-alert> -->
<v-form @submit.prevent="login()" ref="login"> <v-form @submit.prevent="login()" ref="login">
<v-text-field <v-text-field
label="อีเมล" label="อีเมล"
...@@ -41,6 +34,13 @@ ...@@ -41,6 +34,13 @@
required required
></v-text-field> ></v-text-field>
<p class="text-xs-right"><router-link to="/" class="body-2 font-weight-medium">ลืมรหัสผ่าน?</router-link></p> <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-btn color="deep-orange darken-4" large dark block type="submit">เข้าสู่ระบบ</v-btn>
</v-form> </v-form>
<div class="my-3"><span class="font-weight-bold">หรือ</span></div> <div class="my-3"><span class="font-weight-bold">หรือ</span></div>
...@@ -100,6 +100,9 @@ export default { ...@@ -100,6 +100,9 @@ export default {
computed: { computed: {
loading () { loading () {
return this.$store.getters.getLoading return this.$store.getters.getLoading
},
error () {
return this.$store.getters.getError
} }
}, },
methods: { methods: {
......
...@@ -21,13 +21,14 @@ ...@@ -21,13 +21,14 @@
> >
This is a error alert. This is a error alert.
</v-alert> --> </v-alert> -->
<v-form @submit.prevent="login()" ref="login"> <v-form @submit.prevent="register()" ref="register">
<v-layout row wrap> <v-layout row wrap>
<v-flex sm6 xs12> <v-flex sm6 xs12>
<v-text-field <v-text-field
label="ชื่อ" label="ชื่อ"
color="deep-orange darken-4" color="deep-orange darken-4"
clearable v-model="registerData.first_name"
:rules="[rules.required, rules.space]"
required required
class="fix-size" class="fix-size"
></v-text-field> ></v-text-field>
...@@ -36,7 +37,8 @@ ...@@ -36,7 +37,8 @@
<v-text-field <v-text-field
label="นามสกุล" label="นามสกุล"
color="deep-orange darken-4" color="deep-orange darken-4"
clearable v-model="registerData.last_name"
:rules="[rules.required, rules.space]"
required required
class="fix-size" class="fix-size"
></v-text-field> ></v-text-field>
...@@ -45,22 +47,40 @@ ...@@ -45,22 +47,40 @@
<v-text-field <v-text-field
label="อีเมล" label="อีเมล"
color="deep-orange darken-4" color="deep-orange darken-4"
clearable v-model="registerData.email"
:rules="[rules.required, rules.email]"
required required
class="fix-size" class="fix-size"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
label="รหัสผ่าน" label="รหัสผ่าน"
color="deep-orange darken-4" 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 required
class="fix-size" class="fix-size"
></v-text-field> ></v-text-field>
<v-text-field <v-text-field
label="ยืนยันรหัสผ่าน" label="ยืนยันรหัสผ่าน"
color="deep-orange darken-4" 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 required
class="fix-size" class="fix-size"
></v-text-field> ></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-btn color="deep-orange darken-4 my-4" block dark large type="submit">สมัครสมาชิก</v-btn>
</v-form> </v-form>
</v-flex> </v-flex>
...@@ -70,6 +90,26 @@ ...@@ -70,6 +90,26 @@
</v-layout> </v-layout>
</v-card> </v-card>
</Dialog> </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> </div>
</template> </template>
...@@ -81,24 +121,41 @@ export default { ...@@ -81,24 +121,41 @@ export default {
}, },
data () { data () {
return { return {
loginData: { registerData: {
email_users: '', first_name: '',
last_name: '',
email: '',
password: '', password: '',
password_confirmation: '',
role: 1 role: 1
}, },
showPassword: false, showPassword: false,
showPasswordConfirm: false,
rules: { rules: {
required: v => !!v || 'จำเป็นต้องกรอก', 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) || 'รูปแบบอีเมลล์ไม่ถูกต้อง' 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: { methods: {
login () { register () {
if(this.$refs.login.validate()) { if(this.$refs.register.validate()) {
this.$store.dispatch('login', this.loginData) this.$store.dispatch('register', this.registerData)
.then(res => { .then(res => {
this.$refs.login.reset() this.$refs.register.reset()
}) })
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment