200 lines
8.3 KiB
Vue
200 lines
8.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="field is-horizontal">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label">Full name<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="fullname">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find(v=>v.name==='fullname')">{{errors.find(v=>v.name==='fullname').text}}</p>
|
|
</div>
|
|
<div class="field is-narrow">
|
|
<label class="label">Phone</label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="phone">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find(v=>v.name==='phone')">{{errors.find(v=>v.name==='phone').text}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal mt-4">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label">User name<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder="" v-model="username">
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find(v=>v.name==='username')">{{errors.find(v=>v.name==='username').text}}</p>
|
|
<p class="help is-primary" v-else-if="info">{{info}}</p>
|
|
</div>
|
|
<div class="field is-narrow">
|
|
<label class="label">Account type<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<SearchBox v-bind="{api:'usertype', field:'name', column:['name'], first:true, position: 'top'}"
|
|
@option="selected('_type', $event)"></SearchBox>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find(v=>v.name==='type')">{{errors.find(v=>v.name==='type').text}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field is-horizontal mt-4">
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<label class="label">Password<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="field has-addons">
|
|
<p class="control is-expanded">
|
|
<input class="input" :type="showpass? 'text' : 'password'" placeholder="At least 6 characters including 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>
|
|
<p class="help is-danger" v-if="errors.find(v=>v.name==='password')">{{errors.find(v=>v.name==='password').text}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Retype password<b class="ml-1 has-text-danger">*</b></label>
|
|
<p class="control is-expanded">
|
|
<input class="input" :type="showpass? 'text' : 'password'" placeholder="" v-model="retypePassword">
|
|
</p>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find(v=>v.name==='retypePassword')">{{errors.find(v=>v.name==='retypePassword').text}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5 pt-2">
|
|
<button class="button is-primary has-text-white" @click="createAccount()" v-if="enable">Create user</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['pagename'],
|
|
data () {
|
|
return {
|
|
fullname: undefined,
|
|
username: undefined,
|
|
phone: undefined,
|
|
password: undefined,
|
|
retypePassword: undefined,
|
|
errors: [],
|
|
info: 'User name must not contain any spaces.',
|
|
showpass: true,
|
|
hash: undefined,
|
|
status: undefined,
|
|
user: undefined,
|
|
code: undefined,
|
|
option: undefined,
|
|
branch: [],
|
|
radio: undefined,
|
|
check: {},
|
|
branchOpt: undefined,
|
|
enable: true
|
|
}
|
|
},
|
|
mounted() {
|
|
let pass = this.$id()
|
|
this.password = pass
|
|
this.retypePassword = pass
|
|
window.addEventListener("keyup", (ev) => ev.key==='Enter' && this.$route.name==='signup'? this.createAccount() : false)
|
|
},
|
|
computed: {
|
|
common: {
|
|
get: function() {return this.$store.state.common},
|
|
set: function(val) {this.$store.commit("updateCommon", {common: val})}
|
|
},
|
|
registermethod: {
|
|
get: function() {return this.$store.state.registermethod},
|
|
set: function(val) {this.$store.commit("updateRegisterMethod", {registermethod: val})}
|
|
},
|
|
authmethod: {
|
|
get: function() {return this.$store.state.authmethod},
|
|
set: function(val) {this.$store.commit("updateAuthMethod", {authmethod: val})}
|
|
},
|
|
authstatus: {
|
|
get: function() {return this.$store.state.authstatus},
|
|
set: function(val) {this.$store.commit("updateAuthStatus", {authstatus: val})}
|
|
},
|
|
usertype: {
|
|
get: function() {return this.$store.state.usertype},
|
|
set: function(val) {this.$store.commit("updateUserType", {usertype: val})}
|
|
},
|
|
dialog: {
|
|
get: function() {return this.$store.state['dialog']},
|
|
set: function(val) {this.$store.commit('updateStore', {name: 'dialog', data: val})}
|
|
}
|
|
},
|
|
methods: {
|
|
checkError () {
|
|
this.errors = []
|
|
if (!this.$empty(this.fullname)) { this.fullname = this.fullname.trim() }
|
|
if (!this.$empty(this.username)) { this.username = this.username.trim().toLowerCase() }
|
|
if (this.$empty(this.fullname)) {
|
|
this.errors.push({ name: 'fullname', text: 'Họ và tên không được bỏ trống' })
|
|
} else if (this.fullname.length < 5) {
|
|
this.errors.push({ name: 'fullname', text: 'Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên' })
|
|
}
|
|
if (this.$empty(this.username)) {
|
|
this.errors.push({ name: 'username', text: 'Tài khoản không được bỏ trống' })
|
|
} else if (this.username!==this.username.replace(' ', '')) {
|
|
this.errors.push({ name: 'username', text: 'Tài khoản không được chứa khoảng trắng' })
|
|
} else if(this.username.length<5) {
|
|
this.errors.push({ name: 'fullname', text: 'Tài khoản quá ngắn. Yêu cầu từ 5 kí tự trở nên' })
|
|
}
|
|
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 gồm 6 kí tự trở nên 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 gồm 6 kí tự trở nên bao gồm chữ và số ' })
|
|
}
|
|
if (this.$empty(this.retypePassword)) {
|
|
this.errors.push({ name: 'retypePassword', text: 'Nhắc lại mật khẩu không được bỏ trống' })
|
|
} else if (this.password !== this.retypePassword) {
|
|
this.errors.push({ name: 'retypePassword', text: 'Nhắc lại mật khẩu phải giống với mật khẩu đã nhập' })
|
|
}
|
|
if(!this.$empty(this.phone)) {
|
|
this.phone = this.phone.trim()
|
|
if(this.$errPhone(this.phone)) this.errors.push({ name: 'phone', text: 'Số điện thoại không hợp lệ.' })
|
|
}
|
|
if(this.$empty(this.option)) {
|
|
this.errors.push({ name: 'type', text: 'Chưa chọn loại tài khoản.' })
|
|
}
|
|
let opts = this.radio==='all'? 'all' : []
|
|
if(opts.length===0) {
|
|
for (const [key, value] of Object.entries(this.check)) {
|
|
if(value) opts.push(key)
|
|
}
|
|
}
|
|
return this.errors.length>0? true : false
|
|
},
|
|
async createAccount() {
|
|
if(this.checkError()) return
|
|
let rs = await this.$insertapi('gethash', {text: this.password})
|
|
this.hash = rs.rows[0]
|
|
let data = await this.$getdata('user', {username: this.username}, undefined, true)
|
|
if(data) {
|
|
return this.errors.push({name: 'username', text: 'Tài khoản đã tồn tại trong hệ thống'})
|
|
}
|
|
data = { fullname: this.fullname, username: this.username, phone: this.$empty(this.phone)? undefined : this.phone, password: this.hash, type: this.option.id,
|
|
register_method: 1, auth_status: 2, auth_method: 1}
|
|
this.user = await this.$insertrow('user', data, undefined, this.pagename)
|
|
if(this.user==='error') return
|
|
// add rights
|
|
//let arr = this.$filter(this.common, {category: 'topmenu'}).map(v=>{return {user: this.user.id, function: v.id}})
|
|
//let result = await this.$insertapi('userrights', arr)
|
|
//this.$dialog('Account created successfully.', 'Success', 'Success', 10)
|
|
this.$emit('close')
|
|
},
|
|
selected(attr, obj) {
|
|
this.option = obj
|
|
},
|
|
doCheck(v) {
|
|
this.$set(this.check, v.code, this.check[v.code]? false : true)
|
|
}
|
|
}
|
|
}
|
|
</script>
|