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 {
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
}
......
......@@ -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">
......
......@@ -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
}
}
});
......@@ -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,
......
......@@ -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: {
......
......@@ -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()
})
}
}
......
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