Base Login
This commit is contained in:
150
pages/account/auth.vue
Normal file
150
pages/account/auth.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: undefined,
|
||||
errors: [],
|
||||
userAuth: undefined,
|
||||
message: undefined,
|
||||
success: undefined,
|
||||
action: undefined,
|
||||
code: undefined,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
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 = [];
|
||||
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];
|
||||
user.auth_status = 2;
|
||||
user.update_time = new Date();
|
||||
result = await this.$updateapi('user', user);
|
||||
this.processAuth(result);
|
||||
}
|
||||
} else this.errors.push({ name: 'code', text: 'mã xác thực không hợp lệ' });
|
||||
},
|
||||
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();
|
||||
let result = 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 } : { code: code };
|
||||
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 };
|
||||
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`;
|
||||
this.$dialog(text, 'Mã xác thực', undefined, 10);
|
||||
this.loading = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
194
pages/account/recovery.vue
Normal file
194
pages/account/recovery.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<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 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="control">
|
||||
<input
|
||||
class="input is-primary"
|
||||
type="text"
|
||||
placeholder="Email đã dùng để mở tài khoản"
|
||||
v-model="email"
|
||||
ref="inputcode"
|
||||
@change="checkInfo()"
|
||||
/>
|
||||
</div>
|
||||
<p class="help is-danger" v-if="errors.find((v) => v.name === 'email')">
|
||||
{{ errors.find((v) => v.name === 'email').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>
|
||||
</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()"
|
||||
/>
|
||||
</div>
|
||||
<p class="help is-danger mt5 fs13" v-if="errors.find((v) => v.name === 'email')">
|
||||
{{ errors.find((v) => v.name === 'email').text }}
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: undefined,
|
||||
errors: [],
|
||||
user: undefined,
|
||||
message: undefined,
|
||||
success: undefined,
|
||||
action: undefined,
|
||||
code: undefined,
|
||||
refcode: undefined,
|
||||
username: undefined,
|
||||
isPhone: false,
|
||||
email: undefined,
|
||||
authcode: undefined,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.refcode = this.$id().substring(0, 4);
|
||||
if (this.$refs.inputcode) this.$refs.inputcode.focus();
|
||||
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;
|
||||
},
|
||||
checkEmail() {
|
||||
this.errors = [];
|
||||
let result = this.$errEmail(this.email);
|
||||
if (result) this.errors.push({ name: 'email', text: 'Email không hợp lệ' });
|
||||
},
|
||||
async getPassword() {
|
||||
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,
|
||||
},
|
||||
},
|
||||
};
|
||||
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);
|
||||
|
||||
console.log('=====>', result);
|
||||
|
||||
this.sendEmail(result);
|
||||
} else {
|
||||
this.errors.push({ name: 'username', text: 'Tài khoản không tồn tại' });
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user