93 lines
3.8 KiB
Vue
93 lines
3.8 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<p>{{store.lang==='en'? 'Account' : 'Tài khoản'}}: <b>{{row.username}}</b></p>
|
|
<p class="mt-1">{{store.lang==='en'? 'Full name' : 'Họ tên'}}: <b>{{row.fullname}}</b></p>
|
|
</div>
|
|
<div class="field mt-5">
|
|
<label class="label">{{ store.lang==='en'? 'New password' : 'Mật khẩu mới' }} <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">{{ store.lang==='en'? 'Retype password' : 'Nhập lại mật khẩu' }} <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 has-text-white" @click="changePassword()">{{ store.lang==='en'? 'Set password' : 'Đặt mật khẩu' }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { useStore } from '~/stores/index'
|
|
export default {
|
|
setup() {
|
|
const store = useStore()
|
|
return { store }
|
|
},
|
|
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)
|
|
const response = await fetch(`https://api.y99.vn/password/${this.password}/`)
|
|
let hash = await response.json();
|
|
user.password = hash
|
|
let rs1 = await this.$updateapi('user', user)
|
|
if(rs1!=='error') this.$emit('close')
|
|
else {
|
|
this.$dialog('Có lỗi xảy ra. Hãy thử lại một lần nữa', 'Lỗi', 'Error')
|
|
}
|
|
},
|
|
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> |