Skip to content

C
CO-OP Search
Commit 9c2c7bdb authored by Kittisak Maneewong's avatar Kittisak Maneewong
Browse files
Options

update login register logout

parent 43fdcc12
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 26 deletions
public/js/app.js
View file @ 9c2c7bdb
This source diff could not be displayed because it is too large. You can view the blob instead.
resources/js/components/Dialog.vue
View file @ 9c2c7bdb
...@@ -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
} }
......
resources/js/components/Toolbar.vue
View file @ 9c2c7bdb
...@@ -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">
......
resources/js/store.js
View file @ 9c2c7bdb
...@@ -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
} }
} }
}); });
resources/js/views/Account.vue
View file @ 9c2c7bdb
...@@ -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,
......
resources/js/views/Login.vue
View file @ 9c2c7bdb
...@@ -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: {
......
resources/js/views/Register.vue
View file @ 9c2c7bdb
...@@ -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