87 lines
3.5 KiB
Vue
87 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<p>User name: <b>{{row.username}}</b></p>
|
|
<p class="mt-1">Full name: <b>{{row.fullname}}</b></p>
|
|
</div>
|
|
<div class="field mt-5">
|
|
<label class="label">New password <b class="has-text-danger">*</b></label>
|
|
<div class="field-body">
|
|
<div class="field has-addons">
|
|
<p class="control is-expanded">
|
|
<input class="input" :type="showpass? 'text' : 'password'" placeholder="At least 6 characters, letters and numbers." v-model="password">
|
|
</p>
|
|
<div class="control">
|
|
<a class="button" @click="showpass=!showpass">
|
|
<SvgIcon v-bind="{name: 'eye-off.svg', type: 'dark', size: 22}" v-if="showpass"></SvgIcon>
|
|
<SvgIcon v-bind="{name: 'view.svg', type: 'dark', size: 22}" v-else></SvgIcon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find(v=>v.name==='password')">{{errors.find(v=>v.name==='password').text}}</p>
|
|
</div>
|
|
<div class="field mt-5">
|
|
<label class="label">Retype password <b class="has-text-danger">*</b></label>
|
|
<div class="field-body">
|
|
<div class="field has-addons">
|
|
<p class="control is-expanded">
|
|
<input class="input" :type="showpass? 'text' : 'password'" placeholder="Must match the new password." v-model="retypepass">
|
|
</p>
|
|
<div class="control">
|
|
<a class="button" @click="showpass=!showpass">
|
|
<SvgIcon v-bind="{name: 'eye-off.svg', type: 'dark', size: 22}" v-if="showpass"></SvgIcon>
|
|
<SvgIcon v-bind="{name: 'view.svg', type: 'dark', size: 22}" v-else></SvgIcon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find(v=>v.name==='retypepass')">{{errors.find(v=>v.name==='retypepass').text}}</p>
|
|
</div>
|
|
<div class="mt-5 pt-2">
|
|
<button class="button is-primary" @click="changePassword()">Set password</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['row'],
|
|
data() {
|
|
return {
|
|
errors: [],
|
|
password: undefined,
|
|
retypepass: undefined,
|
|
showpass: false
|
|
}
|
|
},
|
|
methods: {
|
|
async changePassword() {
|
|
if(!this.checkPassword()) return
|
|
let user = await this.$getdata('user', undefined, {filter: {id: this.row.id}}, true)
|
|
let rs = await this.$insertapi('gethash', {text: this.password})
|
|
user.password = rs.rows[0]
|
|
let rs1 = await this.$updateapi('user', user)
|
|
if(rs1!=='error') this.$emit('close')
|
|
else {
|
|
this.$buefy.toast.open({message: 'Có lỗi xảy ra. Hãy thử lại một lần nữa', type: 'is-danger'})
|
|
}
|
|
},
|
|
checkPassword() {
|
|
this.errors = []
|
|
if (this.$empty(this.password)) {
|
|
this.errors.push({ name: 'password', text: 'Mật khẩu không được bỏ trống' })
|
|
} else if (this.password.length < 6) {
|
|
this.errors.push({ name: 'password', text: 'Mật khẩu từ 6 kí tự bao gồm chữ và số ' })
|
|
} else if (!(/\d/.test(this.password) && /[a-zA-Z]/.test(this.password))) {
|
|
this.errors.push({ name: 'password', text: 'Mật khẩu từ 6 kí tự bao gồm chữ và số ' })
|
|
}
|
|
if (this.$empty(this.retypepass)) {
|
|
this.errors.push({ name: 'retypepass', text: 'Nhắc lại mật khẩu không được bỏ trống' })
|
|
} else if (this.password !== this.retypepass) {
|
|
this.errors.push({ name: 'retypepass', text: 'Nhắc lại phải giống với mật khẩu đã nhập' })
|
|
}
|
|
return this.errors.length>0? false : true
|
|
}
|
|
}
|
|
}
|
|
</script> |