220 lines
7.4 KiB
Vue
220 lines
7.4 KiB
Vue
<template>
|
|
<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="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>
|
|
</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 {
|
|
code: undefined,
|
|
errors: [],
|
|
userAuth: undefined,
|
|
message: undefined,
|
|
success: undefined,
|
|
action: undefined,
|
|
loading: false,
|
|
isVietnamese: true,
|
|
lengthCode: 9,
|
|
isShow: false,
|
|
idUser: undefined,
|
|
emailUser: undefined,
|
|
fullname: undefined,
|
|
};
|
|
},
|
|
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();
|
|
} else if (this.$route.query.action === 'sendcode') this.sendCode();
|
|
},
|
|
mounted() {
|
|
let doc = document.getElementById('inputcode');
|
|
if (doc) doc.focus();
|
|
window.addEventListener('keyup', (ev) => (ev.key === 'Enter' && !this.success ? this.checkCode() : false));
|
|
},
|
|
computed: {
|
|
login: {
|
|
get: function () {
|
|
return this.$store.state.login;
|
|
},
|
|
set: function (val) {
|
|
this.$store.commit('updateLogin', { login: val });
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
async checkCode() {
|
|
this.success = undefined;
|
|
this.message = undefined;
|
|
this.action = undefined;
|
|
this.errors = [];
|
|
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);
|
|
return this.processAuth(result);
|
|
}
|
|
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.';
|
|
this.success = true;
|
|
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();
|
|
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;
|
|
}
|
|
},
|
|
async sendCode() {
|
|
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, 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;
|
|
|
|
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('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>
|