358 lines
11 KiB
Vue
358 lines
11 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", { data: { text: this.password } });
|
|
this.hash = rs.rows[0];
|
|
let data = await this.$getdata("user", { first: true, filter: { username: this.username } });
|
|
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', { data: 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>
|