153 lines
4.4 KiB
Vue
153 lines
4.4 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", {
|
|
first: true,
|
|
params: { filter: { id: this.row.id } },
|
|
});
|
|
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.$snackbar("Có lỗi xảy ra. Hãy thử lại một lần nữa", "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>
|