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

219
pages/account/auth.vue
View File

@@ -1,53 +1,68 @@
<template>
<div class="columns is-centered mt-6 mx-3">
<div class="column is-5 mx-0">
<Logo class="mb-5"></Logo>
<template v-if="!userAuth">
<article class="message is-primary">
<div class="message-body has-background-white py-3">
<strong> Mã xác thực tài khoản </strong> là chuỗi gồm <strong> 9 kí tự, </strong> chúng tôi đã gửi cho bạn
qua email <b>{{ $route.query.email ? ' ' + $route.query.email : '' }}</b
>. Hãy nhập dãy số đó vào ô dưới đây. Hoặc click vào đường link có trong email.
</div>
</article>
<div class="field mt-4">
<div class="control">
<input class="input is-primary" type="text" placeholder="Nhập mã xác thực" v-model="code" id="inputcode" />
</div>
<p class="help is-danger mt5 fs13" v-if="errors.find((v) => v.name === 'code')">
{{ errors.find((v) => v.name === 'code').text }}
</p>
<div class="auth-page" :style="!isShow ? { alignContent: 'center' } : {}">
<div class="columns is-centered" v-if="isShow">
<div class="column is-5 mx-0 auth-wrapper mt-6">
<div class="auth-header mb-5">
<Logo class="mb-5"></Logo>
<h2 class="title">Xác thực tài khoản</h2>
</div>
<div class="field mt-5">
<p class="control">
<a class="button is-primary" @click="checkCode()">Xác thực tài khoản</a>
</p>
<div class="auth-body">
<template v-if="!userAuth">
<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>{{ emailUser ? ' ' + emailUser : '' }}</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="code" :length="lengthCode" />
<p class="help is-danger mt5 fs13 has-text-centered" v-if="errors.find((v) => v.name === 'code')">
{{ errors.find((v) => v.name === 'code').text }}
</p>
</div>
</article>
<div class="field mt-5">
<p class="control has-text-centered">
<a class="button is-primary" @click="checkCode()">Xác thực tài khoản</a>
</p>
</div>
<p class="pt-4 has-text-danger has-text-centered" v-if="idUser">
<span>Bạn chưa nhận được mã xác thực?</span>
<br />
<button :class="`button is-dark is-light ${loading ? 'is-loading' : ''} mt-4`" @click="sendCode()">
Gửi lại mã
</button>
</p>
</template>
<template v-else-if="userAuth">
<article class="message" :class="success ? 'is-primary' : 'is-danger'" v-if="success !== undefined">
<div class="message-body has-background-white py-3">
{{ message }}
Xác thực tài khoản thành công.
</div>
</article>
<div class="field mt-5" v-if="action">
<p class="control">
<nuxt-link class="button is-primary" :to="action.to">
{{ action.text }}
</nuxt-link>
</p>
</div>
</template>
</div>
<p class="mt-5 pt-4 has-text-danger" v-if="$route.query.id">
<span>Không nhận được mã xác thực?</span>
<button :class="`button is-dark is-light ${loading ? 'is-loading' : ''} ml-4`" @click="sendCode()">
Gửi lại mã
</button>
</p>
</template>
<template v-else-if="userAuth">
<article class="message" :class="success ? 'is-primary' : 'is-danger'" v-if="success !== undefined">
<div class="message-body has-background-white py-3">
{{ message }}
</div>
</article>
<div class="field mt-5" v-if="action">
<p class="control">
<nuxt-link class="button is-primary" :to="action.to">
{{ action.text }}
</nuxt-link>
</p>
</div>
</template>
</div>
</div>
<div class="columns is-centered" v-else>
<Logo isLogoMain></Logo>
</div>
</div>
</template>
<script>
import Logo from '~/components/Logo.vue';
import sendVerificationEmail from '~/components/template/email';
export default {
data() {
return {
@@ -57,11 +72,38 @@ export default {
message: undefined,
success: undefined,
action: undefined,
code: undefined,
loading: false,
isVietnamese: true,
lengthCode: 9,
isShow: false,
idUser: undefined,
emailUser: undefined,
fullname: undefined,
};
},
created() {
watch: {
code(val) {
if (val.length === this.lengthCode) {
this.checkCode();
}
},
},
head() {
return {
title: `${this.isVietnamese ? 'Xác thực tài khoản' : 'Account Verification'} - ${this.$companyInfo().name}`,
};
},
async created() {
this.idUser = this.$route.query.id || undefined;
this.emailUser = this.$route.query.email || undefined;
if (!this.idUser && !this.emailUser) {
return this.goToLogin();
} else {
const resUser = await this.$getdata('user', { id: this.idUser, email: this.emailUser });
if (!resUser[0] || resUser[0]?.auth_status === 2) return this.goToLogin();
this.fullname = resUser[0].fullname;
}
this.isShow = true;
if (this.$route.query.code) {
this.code = this.$route.query.code;
this.checkCode();
@@ -88,29 +130,38 @@ export default {
this.message = undefined;
this.action = undefined;
this.errors = [];
if (this.$empty(this.code)) this.errors.push({ name: 'code', text: 'Mã xác thực không được bỏ trống' });
else if (this.code.length !== 9) this.errors.push({ name: 'code', text: 'Mã xác thực phải là 9 kí tự' });
if (this.errors.length > 0) return;
let found = { name: 'userauth', url: 'data/User_Auth', params: { filter: { code: this.code } } };
let result = await this.$getapi([found]);
let data = result[0].data.rows;
if (data.length > 0) {
this.userAuth = data[0];
if (this.userAuth.expiry) {
this.message = 'Bạn đã xác thực tài khoản thành công.';
this.success = true;
this.action = { name: 'signin', to: { path: '/signin' }, text: 'Đi tới trang đăng nhập' };
} else {
let found = { name: 'user', url: 'data/User', params: { filter: { id: this.userAuth.user } } };
result = await this.$getapi([found]);
let user = result[0].data.rows[0];
this.validateCode(this.code);
let resUserAuth = await this.$getdata('userauth', { code: this.code || 0, expiry: 0 });
let data = resUserAuth?.[0] || null;
if (data && this.errors.length === 0) {
this.userAuth = data;
if (!this.userAuth.expiry) {
let result = await this.$getdata('user', { id: this.userAuth.user });
let user = result[0];
user.auth_status = 2;
user.update_time = new Date();
result = await this.$updateapi('user', user);
this.processAuth(result);
return this.processAuth(result);
}
} else this.errors.push({ name: 'code', text: 'mã xác thực không hợp lệ' });
return this.goToLogin();
} else this.errors.push({ name: 'code', text: 'Mã xác thực không hợp lệ' });
},
validateCode(code) {
const value = String(code || '').trim();
if (!value) {
this.errors.push({ name: 'code', text: 'Mã xác thực không được bỏ trống' });
return;
}
if (value.length !== 9) {
this.errors.push({ name: 'code', text: 'Mã xác thực phải là 9 kí tự' });
return;
}
},
async processAuth(newVal) {
if (newVal !== 'error') {
this.message = 'Xác thực tài khoản thành công.';
@@ -118,7 +169,7 @@ export default {
this.action = { name: 'signin', to: { path: '/signin' }, text: 'Đi tới trang đăng nhập' };
this.userAuth.expiry = true;
this.userAuth.update_time = new Date();
let result = await this.$updateapi('userauth', this.userAuth);
await this.$updateapi('userauth', this.userAuth);
} else if (newVal === false) {
this.message = 'Có lỗi xẩy ra. Xác thực tài khoản thành công.';
this.success = false;
@@ -128,23 +179,41 @@ export default {
let code = this.$id();
let data = { user: this.$route.query.id, code: code };
let result = await this.$insertapi('userauth', data);
let query = this.$store.state.link ? { code: code, link: this.$store.state.link } : { code: code };
let query = this.$store.state.link
? { code: code, link: this.$store.state.link, id: this.idUser, email: this.emailUser }
: { code: code, id: this.idUser, email: this.emailUser };
let routeData = this.$router.resolve({ path: '/account/auth', query: query });
let path = window.location.origin + routeData.href;
let conn = this.$findapi('notiform');
conn.params.filter = { code: 'account-auth' };
result = await this.$getapi([conn]);
let msg = result[0].data.rows[0].detail;
msg = msg.replace(' [1]', '');
msg = msg.replace('[2]', code);
msg = msg.replace('[3]', path);
data = { subject: 'Xác thực tài khoản BigDataTechCloud', content: msg, to: this.$route.query.email, sender: 2 };
const contentEmail = sendVerificationEmail(this.fullname, this.emailUser, code, path);
data = { subject: 'Xác thực tài khoản BigDataTechCloud', content: contentEmail, to: this.emailUser };
this.loading = true;
result = await this.$insertapi('sendemailnow', data);
let text = `Hãy mở email <b>${this.$route.query.email}</b> để nhận mã xác thực`;
result = await this.$insertapi('sendemail', data);
let text = `Hãy mở email <b>${this.emailUser}</b> để nhận mã xác thực`;
this.$dialog(text, 'Mã xác thực', undefined, 10);
this.loading = false;
},
goToLogin() {
return this.$router.push('/signin');
},
},
};
</script>
<style lang="scss">
.auth-page {
min-height: 100vh;
background-color: var(--bg-accent);
.auth-wrapper {
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--primary-200);
background-color: #fff;
.title {
font-size: 2rem;
text-align: center;
}
}
}
</style>