503 lines
17 KiB
Vue
503 lines
17 KiB
Vue
<template>
|
|
<div>
|
|
<div class="reset-password-page">
|
|
<div class="columns is-centered">
|
|
<div class="column is-5 reset-password-wrapper mt-6">
|
|
<div class="reset-password-header mb-5">
|
|
<Logo class="mb-5" />
|
|
<h2 class="title">Đặt lại mật khẩu</h2>
|
|
</div>
|
|
<div class="reset-password-body">
|
|
<!-- ============================> STEP EMAIL <============================ -->
|
|
<div class="reset-step-email" v-if="!showStepVerify && !showStepPassword">
|
|
<p class="has-text-centered mb-4">
|
|
Vui lòng nhập email và mã xác thực để lấy lại mật khẩu. <br />
|
|
Sau khi xác nhận thành công, chúng tôi sẽ gửi cho bạn một email để đặt lại mật khẩu.
|
|
</p>
|
|
|
|
<div class="form-login">
|
|
<div class="field mt-5">
|
|
<label class="label">Email<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
type="email"
|
|
placeholder="Nhập email"
|
|
v-model="email"
|
|
@blur="validateEmail(email)"
|
|
@keyup.enter="getPassword()"
|
|
/>
|
|
</div>
|
|
<p
|
|
class="help is-danger"
|
|
v-if="errors.find((v) => v.name === 'email')"
|
|
v-html="errors.find((v) => v.name === 'email').text"
|
|
></p>
|
|
</div>
|
|
<div class="field mt-5">
|
|
<label for="ref-code" class="label">Mã xác thực<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="field-body">
|
|
<div class="field has-addons">
|
|
<p class="control">
|
|
<input
|
|
class="input has-text-centered"
|
|
type="text"
|
|
v-model="generatedCode"
|
|
disabled
|
|
name="generated-code"
|
|
/>
|
|
</p>
|
|
<p class="control is-expanded">
|
|
<input
|
|
class="input"
|
|
id="ref-code"
|
|
type="text"
|
|
:placeholder="`Nhập ${generatedCode} vào đây`"
|
|
v-model="refCode"
|
|
@keyup.enter="getPassword()"
|
|
@blur="validateRefCode()"
|
|
autocomplete="off"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find((v) => v.name === 'refCode')">
|
|
{{ errors.find((v) => v.name === 'refCode').text }}
|
|
</p>
|
|
</div>
|
|
<div class="field mt-5 pt-1 group-action">
|
|
<button :class="['button', 'is-primary', isLoading && 'is-loading']" @click="getPassword()">
|
|
Lấy lại mật khẩu
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================> STEP VERIFY <============================ -->
|
|
<div class="reset-step-verify" v-if="showStepVerify && !showStepPassword">
|
|
<article class="">
|
|
<div class="py-3">
|
|
<p class="has-text-centered mb-4">
|
|
Chúng tôi đã gửi mã xác thực gồm 9 ký tự đến email
|
|
<strong>{{ email ? ' ' + email : '' }}</strong
|
|
>.
|
|
<br />
|
|
Vui lòng nhập mã bên dưới hoặc kiểm tra email để xác thực.
|
|
</p>
|
|
<OtpInput v-model="inputCodeVerify" :length="lengthCodeVerify" />
|
|
<p
|
|
class="help is-danger mt5 fs13 has-text-centered"
|
|
v-if="errors.find((v) => v.name === 'codeVerify')"
|
|
>
|
|
{{ errors.find((v) => v.name === 'codeVerify').text }}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<div class="field mt-5">
|
|
<p class="control has-text-centered">
|
|
<a class="button is-primary" @click="verifyCode()">Xác nhận</a>
|
|
</p>
|
|
</div>
|
|
<p class="pt-4 has-text-danger has-text-centered" v-if="user">
|
|
<span>Bạn chưa nhận được mã xác thực?</span>
|
|
<br />
|
|
<button :class="`button is-dark is-light ${isLoading ? 'is-loading' : ''} mt-4`" @click="sendCode()">
|
|
Gửi lại mã
|
|
</button>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- ============================> STEP PASSWORD <============================ -->
|
|
<div class="reset-step-password" v-if="showStepPassword && !showStepVerify">
|
|
<div class="field mt-4">
|
|
<label class="label">Mật khẩu<b class="ml-1 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="Mật khẩu phải có ít nhất 8 ký tự, bao gồm chữ hoa, chữ thường, số và ký tự đặc biệt."
|
|
v-model="inputPassword"
|
|
@blur="validatePassword(inputPassword)"
|
|
/>
|
|
</p>
|
|
<div class="control">
|
|
<a class="button" @click="showpass = !showpass">
|
|
<span class="icon">
|
|
<i
|
|
:class="
|
|
showpass
|
|
? 'mdi mdi-eye-outline has-text-dark fs22'
|
|
: 'mdi mdi-eye-off-outline has-text-dark fs22'
|
|
"
|
|
/>
|
|
</span>
|
|
</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-4">
|
|
<label class="label">Nhập lại mật khẩu<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<p class="control is-expanded">
|
|
<input
|
|
class="input"
|
|
:type="showpass ? 'text' : 'password'"
|
|
placeholder=""
|
|
v-model="retypePassword"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="help is-danger" v-if="errors.find((v) => v.name === 'retypePassword')">
|
|
{{ errors.find((v) => v.name === 'retypePassword').text }}
|
|
</p>
|
|
</div>
|
|
<div class="field mt-5">
|
|
<p class="control has-text-centered">
|
|
<a class="button is-primary" @click="changePassword()">Đổi mật khẩu</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Error system -->
|
|
<p class="help is-danger mt5 fs13 has-text-centered" v-if="errors.find((v) => v.name === 'system')">
|
|
{{ errors.find((v) => v.name === 'system').text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { sendResetPasswordEmail } from '~/components/template/email';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
code: undefined,
|
|
errors: [],
|
|
user: undefined,
|
|
message: undefined,
|
|
success: undefined,
|
|
action: undefined,
|
|
refCode: undefined,
|
|
generatedCode: undefined,
|
|
email: undefined,
|
|
authcode: undefined,
|
|
isLoading: false,
|
|
isVietnamese: true,
|
|
idUser: undefined,
|
|
// ========================> step-verify <========================
|
|
showStepVerify: false,
|
|
codeVerify: undefined,
|
|
lengthCodeVerify: 9,
|
|
inputCodeVerify: undefined,
|
|
// ========================> step-password <========================
|
|
showStepPassword: false,
|
|
showpass: false,
|
|
inputPassword: undefined,
|
|
retypePassword: undefined,
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
refCode(val) {
|
|
if (val === this.generatedCode) {
|
|
this.getPassword();
|
|
}
|
|
},
|
|
// step-verify
|
|
inputCodeVerify(val) {
|
|
if (val?.length === this.lengthCodeVerify) {
|
|
this.checkCode();
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
authstatus: {
|
|
get: function () {
|
|
return this.$store.state.authstatus;
|
|
},
|
|
set: function (val) {
|
|
this.$store.commit('updateAuthStatus', { authstatus: val });
|
|
},
|
|
},
|
|
},
|
|
|
|
head() {
|
|
return {
|
|
title: `${this.isVietnamese ? 'Đặt lại mật khẩu' : 'Reset password'} - ${this.$companyInfo().name}`,
|
|
};
|
|
},
|
|
async created() {
|
|
const { email, id, code } = this.$route.query;
|
|
|
|
this.email = this.$validateEmail(email)?.status ? email.trim() : undefined;
|
|
this.idUser = id?.trim() || undefined;
|
|
this.inputCodeVerify = code?.trim() || undefined;
|
|
|
|
if (this.email && this.idUser) {
|
|
const resUser = await this.getInfoUser(this.email, this.idUser);
|
|
this.user = resUser;
|
|
}
|
|
|
|
const isValidQuery = this.idUser && this.email && this.inputCodeVerify;
|
|
|
|
if (isValidQuery) {
|
|
this.showStepVerify = true;
|
|
this.verifyCode();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.generatedCode = this.$id().substring(0, 4);
|
|
window.addEventListener('keyup', (ev) => (ev.key === 'Enter' && !this.success ? this.getPassword() : false));
|
|
},
|
|
methods: {
|
|
validateEmail(email) {
|
|
// Xóa lỗi cũ
|
|
this.errors = this.errors.filter((err) => err.name !== 'email');
|
|
|
|
const res = this.$validateEmail(email);
|
|
|
|
if (!res.status) {
|
|
this.errors.push({
|
|
name: 'email',
|
|
text: res.message,
|
|
});
|
|
}
|
|
},
|
|
|
|
validatePassword(password) {
|
|
// Xóa lỗi cũ
|
|
this.errors = this.errors.filter((err) => err.name !== 'password');
|
|
|
|
const res = this.$validatePassword(password);
|
|
|
|
if (!res.status) {
|
|
this.errors.push({
|
|
name: 'password',
|
|
text: res.message,
|
|
});
|
|
}
|
|
},
|
|
|
|
validateRefCode() {
|
|
// Xóa lỗi cũ
|
|
this.errors = this.errors.filter((err) => err.name !== 'refCode');
|
|
|
|
if (this.$empty(this.refCode)) {
|
|
this.errors.push({ name: 'refCode', text: 'Chưa nhập mã xác thực' });
|
|
return;
|
|
}
|
|
if (this.refCode !== this.generatedCode) this.errors.push({ name: 'refCode', text: 'Mã xác thực không đúng' });
|
|
},
|
|
|
|
async getInfoUser(email, id) {
|
|
let query = {
|
|
email: email,
|
|
};
|
|
|
|
if (id) query.id = id;
|
|
|
|
const resUser = await this.$getdata('user', query);
|
|
return resUser?.[0] ?? null;
|
|
},
|
|
|
|
async createAccountRecovery(user, code) {
|
|
let payload = {
|
|
user: user,
|
|
code: code,
|
|
};
|
|
await this.$insertapi('accountrecovery', payload);
|
|
},
|
|
|
|
// ============================> STEP EMAIL <============================
|
|
async getPassword() {
|
|
this.isLoading = true;
|
|
|
|
this.success = undefined;
|
|
this.message = undefined;
|
|
this.action = undefined;
|
|
this.errors = [];
|
|
|
|
this.validateEmail(this.email);
|
|
this.validateRefCode();
|
|
|
|
if (this.errors.length > 0) {
|
|
this.isLoading = false;
|
|
return;
|
|
}
|
|
|
|
const resUser = await this.getInfoUser(this.email);
|
|
|
|
if (!resUser) {
|
|
this.isLoading = false;
|
|
this.errors.push({ name: 'email', text: 'Tài khoản không tồn tại' });
|
|
return;
|
|
}
|
|
|
|
this.user = resUser;
|
|
this.authcode = this.$id();
|
|
this.idUser = resUser.id;
|
|
this.createAccountRecovery(resUser.id, this.authcode);
|
|
this.sendEmailGetPassword(resUser);
|
|
},
|
|
async sendEmailGetPassword(data) {
|
|
this.isLoading = true;
|
|
console.log('data', data);
|
|
|
|
let query = { id: data.id, code: this.authcode, email: data.email };
|
|
if (this.$store.state.link) query.link = this.$store.state.link;
|
|
let routeData = this.$router.resolve({ path: '/account/recovery', query: query });
|
|
let path = window.location.origin + routeData.href;
|
|
const contentEmail = sendResetPasswordEmail(data.fullname, data.email, this.authcode, path);
|
|
|
|
const dataSendEmail = {
|
|
subject: `[${this.$companyInfo().name}] Mã xác thực đặt lại mật khẩu của bạn`,
|
|
content: contentEmail,
|
|
to: this.email,
|
|
};
|
|
|
|
const resSendMail = await this.$insertapi('sendemail', dataSendEmail);
|
|
console.log('resSendMail', resSendMail);
|
|
|
|
this.isLoading = false;
|
|
|
|
let text = `Hãy mở email <b>${this.email}</b> để nhận mã xác thực`;
|
|
this.$dialog(text, 'Mã xác thực', undefined, 5);
|
|
setTimeout(() => {
|
|
this.showStepVerify = true;
|
|
}, 6000);
|
|
},
|
|
|
|
// ============================> STEP VERIFY <============================
|
|
|
|
async verifyCode() {
|
|
this.success = undefined;
|
|
this.message = undefined;
|
|
this.action = undefined;
|
|
this.errors = [];
|
|
|
|
this.validateEmail(this.email);
|
|
|
|
if (this.$empty(this.inputCodeVerify)) this.errors.push({ name: 'codeVerify', text: 'Chưa nhập mã xác thực' });
|
|
|
|
if (this.errors.length > 0) {
|
|
this.isLoading = false;
|
|
return;
|
|
}
|
|
|
|
this.checkCode();
|
|
},
|
|
|
|
async checkCode() {
|
|
this.errors = [];
|
|
if (!this.idUser || !this.email || !this.inputCodeVerify) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const resAccountRecovery = await this.$getdata('accountrecovery', {
|
|
user: this.idUser,
|
|
code: this.inputCodeVerify,
|
|
});
|
|
const tempData = resAccountRecovery?.[0] ?? null;
|
|
if (!tempData) {
|
|
this.errors.push({ name: 'codeVerify', text: 'Mã xác thực không đúng' });
|
|
return;
|
|
}
|
|
if (tempData.expiry) {
|
|
this.errors.push({ name: 'codeVerify', text: 'Mã xác thực đã hết hạn' });
|
|
return;
|
|
}
|
|
|
|
this.showStepVerify = false;
|
|
this.showStepPassword = true;
|
|
resAccountRecovery[0].expiry = true;
|
|
await this.$updateapi('accountrecovery', resAccountRecovery[0]);
|
|
} catch (error) {
|
|
this.errors.push({ name: 'system', text: 'Có lỗi xảy ra, vui lòng thử lại sau' });
|
|
}
|
|
},
|
|
|
|
sendCode() {
|
|
if (!this.idUser || !this.email) {
|
|
return;
|
|
}
|
|
this.authcode = this.$id();
|
|
this.createAccountRecovery(this.idUser, this.authcode);
|
|
this.sendEmailGetPassword(this.user);
|
|
},
|
|
|
|
// ============================> STEP PASSWORD <============================
|
|
|
|
async changePassword() {
|
|
this.success = undefined;
|
|
this.message = undefined;
|
|
this.action = undefined;
|
|
this.errors = [];
|
|
|
|
this.validatePassword(this.inputPassword);
|
|
|
|
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.inputPassword !== 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.errors.length > 0) {
|
|
this.isLoading = false;
|
|
return;
|
|
}
|
|
if (this.idUser && this.email) {
|
|
const resUser = await this.$getdata('user', {
|
|
id: this.idUser,
|
|
email: this.email,
|
|
});
|
|
|
|
let hasPass = await this.$insertapi('gethash', { text: this.inputPassword });
|
|
|
|
resUser[0].password = hasPass.rows[0];
|
|
const resUpdateUser = await this.$updateapi('user', resUser[0]);
|
|
if (resUpdateUser.errors) {
|
|
this.errors.push({ name: 'retypePassword', text: 'Đổi mật khẩu thất bại' });
|
|
} else {
|
|
let text = `Mật khẩu của tài khoản <b>${this.email}</b> đã được cập nhật thành công. Bạn có thể đăng nhập lại bằng mật khẩu mới.`;
|
|
this.$dialog(text, 'Mã xác thực', undefined, 5);
|
|
setTimeout(() => {
|
|
this.$router.push('/signin');
|
|
}, 6000);
|
|
}
|
|
} else {
|
|
this.errors.push({ name: 'retypePassword', text: 'Đổi mật khẩu thất bại' });
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.reset-password-page {
|
|
min-height: var(--layout-full-height);
|
|
background-color: var(--bg-accent);
|
|
.reset-password-wrapper {
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--primary-200);
|
|
background-color: #fff;
|
|
.title {
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|