bigdatacloud/login-v2
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Account

Browse Source
This commit is contained in:
ThienPhamVan
2026-03-30 14:09:41 +07:00
parent e7e8f0b38a
commit e1b9d9c15d
11 changed files with 1029 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

580
pages/account/recovery.vue
View File

@@ -1,96 +1,184 @@
<template>
<div class="columns is-centered mt-6 mx-0">
<div class="column is-5">
<div class="mb-5">
<Logo></Logo>
</div>
<section class="hero">
<div class="hero-body px-3 pt-3">
<template v-if="!action">
<article class="message is-primary">
<div class="message-body has-background-white py-1">
<strong> Để lấy lại mật khẩu </strong> vui lòng nhập email và mã kiểm tra. Nếu thông tin là hợp lệ chúng
tôi sẽ gửi cho bạn một email chứa đường link để thay đổi mật khẩu.
</div>
</article>
<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="field is-horizontal mt-2">
<div class="field-body">
<div class="field">
<label class="label has-text-dark">Nhập email</label>
<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 is-primary"
type="text"
placeholder="Email đã dùng để mở tài khoản"
class="input"
type="email"
placeholder="Nhập email"
v-model="email"
ref="inputcode"
@change="checkInfo()"
@blur="validateEmail(email)"
@keyup.enter="getPassword()"
/>
</div>
<p class="help is-danger" v-if="errors.find((v) => v.name === 'email')">
{{ errors.find((v) => v.name === 'email').text }}
<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 is-narrow">
<label class="label has-text-dark"> Mã kiểm tra : {{ refcode }} </label>
<div class="control">
<input
class="input is-primary"
type="text"
:placeholder="'Nhập ' + refcode + ' vào đây'"
v-model="code"
/>
</div>
<p class="help is-danger" v-if="errors.find((v) => v.name === 'code')">
{{ errors.find((v) => v.name === 'code').text }}
</p>
<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>
<div class="field mt-4" v-if="isPhone">
<label class="label has-text-dark"> Vui lòng cung cấp email để nhận link </label>
<div class="control">
<input
class="input is-primary"
type="text"
placeholder="Nhập email"
v-model="email"
@change="checkEmail()"
/>
<!-- ============================> 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="help is-danger mt5 fs13" v-if="errors.find((v) => v.name === 'email')">
{{ errors.find((v) => v.name === 'email').text }}
<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>
<div class="field mt-5">
<p class="control">
<a class="button is-primary" :class="loading ? 'is-loading' : ''" @click="getPassword()">
Lấy lại mật khẩu</a
>
</p>
<!-- ============================> 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>
</template>
<template v-else>
<article class="message" :class="success ? 'is-primary' : 'is-danger'" v-if="success !== undefined">
<div class="message-body fs18 has-background-white py-2" v-html="message"></div>
</article>
<div class="field mt-5">
<p class="control">
<nuxt-link class="button is-primary" :to="action.to">
{{ action.text }}
</nuxt-link>
</p>
</div>
</template>
<!-- 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>
</section>
</div>
</div>
</div>
</template>
<script>
import { sendResetPasswordEmail } from '~/components/template/email';
export default {
data() {
return {
@@ -100,95 +188,315 @@ export default {
message: undefined,
success: undefined,
action: undefined,
code: undefined,
refcode: undefined,
username: undefined,
isPhone: false,
refCode: undefined,
generatedCode: undefined,
email: undefined,
authcode: undefined,
loading: false,
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.refcode = this.$id().substring(0, 4);
if (this.$refs.inputcode) this.$refs.inputcode.focus();
this.generatedCode = this.$id().substring(0, 4);
window.addEventListener('keyup', (ev) => (ev.key === 'Enter' && !this.success ? this.getPassword() : false));
},
methods: {
checkInfo() {
this.errors = [];
if (!this.$empty(this.username)) this.username = this.username.trim().toLowerCase();
let result = this.$errEmail(this.username);
if (result) this.errors.push({ name: 'username', text: 'Email không hợp lệ' });
else this.isPhone = this.username.indexOf('@') >= 0 ? false : true;
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,
});
}
},
checkEmail() {
this.errors = [];
let result = this.$errEmail(this.email);
if (result) this.errors.push({ name: 'email', text: 'Email không hợp lệ' });
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 = [];
let result = this.$errEmail(this.username);
if (result) this.errors.push({ name: 'username', text: 'Email không hợp lệ' });
if (this.$empty(this.code)) this.errors.push({ name: 'code', text: 'Chưa nhập mã kiểm tra' });
else if (this.refcode !== this.code) this.errors.push({ name: 'code', text: 'Mã kiểm tra không đúng' });
if (this.errors.length > 0) return;
let found = {
name: 'user',
url: 'data/User/',
params: {
filter: {
email: this.username,
},
},
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,
};
result = await this.$getapi([found]);
console.log('===>', result);
let data = result[0].data.rows;
if (data.length > 0) {
this.user = data[0];
this.authcode = this.$id();
let ele = { user: this.user.id, code: this.authcode };
result = await this.$insertapi('accountrecovery', ele);
const resSendMail = await this.$insertapi('sendemail', dataSendEmail);
console.log('resSendMail', resSendMail);
console.log('=====>', result);
this.isLoading = false;
this.sendEmail(result);
} else {
this.errors.push({ name: 'username', text: 'Tài khoản không tồn tại' });
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' });
}
},
async sendEmail(data) {
let query = { id: this.user.id, code: this.authcode };
if (this.$store.state.link) query.link = this.$store.state.link;
let routeData = this.$router.resolve({ path: '/get-password', query: query });
let path = window.location.origin + routeData.href;
let conn = this.$findapi('notiform');
console.log('conn =====>', conn);
conn.params.filter = { code: 'get-password' };
let result = await this.$getapi([conn]);
let msg = result[0].data.rows[0].detail;
msg = msg.replace('[1]', this.user.fullname);
msg = msg.replace('[3]', path);
data = {
subject: 'Phục hồi tài khoản BigDataTech.vn',
content: msg,
to: this.email ? this.email : this.username,
sender: 2,
};
this.loading = true;
result = await this.$insertapi('sendemailnow', data);
this.message = `<b>Thành công</b>. Hãy mở email <b>${this.username}</b> để lấy lại mật khẩu.`;
this.success = true;
this.action = { name: 'signin', to: { path: '/signin' }, text: 'Đi tới trang đăng nhập' };
this.loading = false;
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>