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

Base Login

Browse Source
This commit is contained in:
ThienPhamVan
2026-03-25 10:06:01 +07:00
commit 3a2e16cf19
81 changed files with 27983 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

696
pages/signup.vue Normal file
View File

@@ -0,0 +1,696 @@
<template>
<div class="login-page">
<div class="columns is-centered px-0 mx-0 my-0">
<div :class="`column wrapper-login is-${viewport >= 4 ? 4 : 6}`">
<div class="px-6 py-6 login-box">
<div class="login-header">
<Logo />
<h2 class="title mt-4 has-text-centered">
{{ isVietnamese ? 'Đăng ký tài khoản' : 'Register an account' }}
</h2>
</div>
<div class="login-body">
<div class="form-login">
<div class="field mt-5 pt-1">
<label class="label">Họ và tên<b class="ml-1 has-text-danger">*</b></label>
<div class="control">
<input
class="input"
type="text"
placeholder=""
v-model="fullname"
@blur="validateFullName(fullname)"
/>
</div>
<p class="help is-danger" v-if="errors.find((v) => v.name === 'fullname')">
{{ errors.find((v) => v.name === 'fullname').text }}
</p>
</div>
<div class="field mt-4">
<label class="label">Điện thoại</label>
<div class="control">
<input class="input" type="text" placeholder="" v-model="phone" @blur="validatePhone(phone)" />
</div>
<p class="help is-danger" v-if="errors.find((v) => v.name === 'phone')">
{{ errors.find((v) => v.name === 'phone').text }}
</p>
</div>
<div class="field mt-4">
<label class="label">Email<b class="ml-1 has-text-danger">*</b></label>
<div class="control">
<input class="input" type="email" placeholder="" v-model="email" @blur="validateEmail(email)" />
</div>
<p class="help is-danger" v-if="errors.find((v) => v.name === 'email')">
{{ errors.find((v) => v.name === 'email').text }}
</p>
<p class="help is-primary" v-else-if="info">{{ info }}</p>
</div>
<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="password"
@blur="validatePassword(password)"
/>
</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-4">
<div class="control">
<b-checkbox v-model="checkbox"
>Tôi đồng ý với <a @click="$router.push('/policy')">các điều khoản và điều kiện</a></b-checkbox
>
</div>
<p class="help is-danger" v-if="errors.find((v) => v.name === 'checkbox')">
{{ errors.find((v) => v.name === 'checkbox').text }}
</p>
</div>
<div class="field mt-5 pt-1 group-action">
<button class="button is-primary" @click="createAccount()">Tạo tài khoản</button>
<!-- <a class="ml-2" @click="$router.push('/signin')">Đăng nhập</a> -->
</div>
</div>
<div class="social-login">
<div class="social-header my-4">
<span>Hoặc</span>
</div>
<div class="social-body">
<div class="social-item">
<GoogleLogin class="button" :onSuccess="onSuccess" :params="params">
<img class="icon" src="/icons/google.svg" alt="Google" />
<span>Đăng ký với Google</span>
</GoogleLogin>
</div>
<div class="social-item">
<button class="button" @click="logInWithFacebook()">
<img class="icon" src="/icons/facebook.svg" alt="Facebook" />
<span> Đăng ký với Facebook </span>
</button>
</div>
</div>
</div>
<p class="mt-5 has-text-centered">
Bạn đã có tài khoản?
<nuxt-link class="ml-2" to="/signin">Đăng nhập</nuxt-link>
</p>
<div class="info-support mt-4">
<div class="support-header">
<h5 class="title">Cần hỗ trợ</h5>
</div>
<div class="support-body">
<p class="support-item">
<a :href="`tel:${company.phone.support}`" target="_blank">
<img src="/icons/phone-call.svg" alt="Support" width="24" height="24" />
<span>{{ company.phone.support }}</span>
</a>
</p>
<p class="support-item">
<a :href="`mailto:${company.email.support}`">
<img src="/icons/email.svg" alt="" width="24" height="24" />
<span>{{ company.email.support }}</span>
</a>
</p>
</div>
</div>
</div>
<div class="login-footer">
<img src="/icons/shield.svg" alt="" width="24" />
<span> {{ new Date().getFullYear() }} </span> &nbsp;
<span v-if="isVietnamese">
Bản quyền thuộc về
<a
:href="company.parent.website"
target="_blank"
rel="noopener noreferrer"
:title="company.parent.slogan"
>{{ company.parent.name }}</a
>
</span>
<span v-else>
Copyright by
<a
:href="company.parent.website"
target="_blank"
rel="noopener noreferrer"
:title="company.parent.sloganEn"
>{{ company.parent.name }}</a
>
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import GoogleLogin from 'vue-google-login';
export default {
components: { GoogleLogin },
head() {
return { title: `${this.isVietnamese ? 'Đăng ký tài khoản' : 'Register an account'} - ${this.company.name}` };
},
//
data() {
return {
fullname: undefined,
email: undefined,
password: undefined,
retypePassword: undefined,
errors: [],
info: 'Hệ thống gửi mã xác thực qua email. Sau khi tạo vui lòng kiểm tra email trong Inbox hoặc Spam',
showpass: false,
hash: undefined,
checkbox: false,
params: { client_id: '389310749372-mnfsd09ukgl0ahbdrm94dsepremlfgs9.apps.googleusercontent.com' },
type: undefined,
status: undefined,
user: undefined,
code: undefined,
isLoaded: false,
show: true,
discount: undefined,
authEmail: undefined,
phone: undefined,
validTo: this.$dayjs().add(30, 'day').format('DD/MM/YYYY'),
company: this.$companyInfo(),
isVietnamese: true,
};
},
async mounted() {
window.addEventListener('keyup', (ev) =>
ev.key === 'Enter' && this.$route.name === 'signup' ? this.createAccount() : false,
);
if (!this.$empty(this.$route.query.referer)) this.referer = this.$route.query.referer;
if (this.referer) this.discount = await this.$getdata('commission', { code: 'customer' }, undefined, true);
},
watch: {
isLoaded: function (newVal) {
if (newVal) {
let self = this;
window.FB.login(function (response) {
if (response.authResponse) {
let userId = response.authResponse.userID;
self.getUserInfo(userId);
}
});
}
},
},
computed: {
registermethod: {
get: function () {
return this.$store.state.registermethod;
},
set: function (val) {
this.$store.commit('updateRegisterMethod', { registermethod: val });
},
},
authmethod: {
get: function () {
return this.$store.state.authmethod;
},
set: function (val) {
this.$store.commit('updateAuthMethod', { authmethod: val });
},
},
authstatus: {
get: function () {
return this.$store.state.authstatus;
},
set: function (val) {
this.$store.commit('updateAuthStatus', { authstatus: val });
},
},
usertype: {
get: function () {
return this.$store.state.usertype;
},
set: function (val) {
this.$store.commit('updateUserType', { usertype: val });
},
},
dialog: {
get: function () {
return this.$store.state['dialog'];
},
set: function (val) {
this.$store.commit('updateStore', { name: 'dialog', data: val });
},
},
viewport: {
get: function () {
return this.$store.state.viewport;
},
set: function (val) {
this.$store.commit('updateViewPort', { viewport: val });
},
},
referer: {
get: function () {
return this.$store.state['referer'];
},
set: function (val) {
this.$store.commit('updateStore', { name: 'referer', data: val });
},
},
},
methods: {
checkError() {
this.errors = [];
if (!this.$empty(this.fullname)) {
this.fullname = this.fullname.trim();
}
if (!this.$empty(this.email)) {
this.email = this.email.trim().toLowerCase();
}
// if (this.$empty(this.fullname)) {
// this.errors.push({ name: 'fullname', text: 'Họ và tên không được bỏ trống.' });
// } else if (this.fullname.length < 5) {
// this.errors.push({ name: 'fullname', text: 'Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên.' });
// }
// if (!this.$empty(this.phone)) {
// if (!this.$regexPhone(this.phone)) {
// this.errors.push({ name: 'phone', text: 'Số điện thoại không hợp lệ.' });
// }
// }
this.validateFullName(this.fullname);
this.validatePhone(this.phone);
this.validateEmail(this.email);
this.validatePassword(this.password);
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.password !== 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.checkbox)
this.errors.push({ name: 'checkbox', text: 'Bạn chưa chọn đồng ý với điều khoản và điều kiện của chúng tôi.' });
return this.errors.length > 0 ? true : false;
},
validateFullName(fullName) {
// Xóa lỗi cũ
this.errors = this.errors.filter((err) => err.name !== 'fullname');
if (this.$empty(fullName)) {
this.errors.push({
name: 'fullname',
text: 'Họ và tên không được để trống.',
});
return false;
}
if (fullName.length < 5) {
this.errors.push({
name: 'fullname',
text: 'Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên.',
});
return false;
}
return true;
},
validateEmail(email) {
// Xóa lỗi cũ
this.errors = this.errors.filter((err) => err.name !== 'email');
if (this.$empty(email)) {
this.errors.push({
name: 'email',
text: 'Email không được để trống.',
});
return false;
}
if (!this.$regexEmail(String(email).toLowerCase())) {
this.errors.push({
name: 'email',
text: 'Email không đúng định dạng.',
});
return false;
}
return true;
},
validatePassword(password) {
// Xóa lỗi cũ
this.errors = this.errors.filter((err) => err.name !== 'password');
if (this.$empty(password)) {
this.errors.push({
name: 'password',
text: 'Mật khẩu không được để trống.',
});
return false;
}
if (!this.$regexPassword(String(password).toLowerCase())) {
this.errors.push({
name: 'password',
text: 'Mật khẩu không đúng định dạng.',
});
return false;
}
return true;
},
validatePhone(phone) {
// Xóa lỗi cũ
this.errors = this.errors.filter((err) => err.name !== 'phone');
if (!this.$empty(phone)) {
if (!this.$regexPhone(phone)) {
this.errors.push({
name: 'phone',
text: 'Số điện thoại không hợp lệ.',
});
return false;
}
}
return true;
},
async createAccount() {
if (this.checkError()) return;
const userRes = await this.$getdata('user', { email: this.email });
const customerRes = await this.$getdata('customer', { email: this.email });
if (userRes.length > 0 || customerRes.length > 0) {
return this.errors.push({ name: 'email', text: 'Tài khoản đã tồn tại trong hệ thống.' });
}
let rs = await this.$insertapi('gethash', { text: this.password });
this.hash = rs.rows[0];
let ele = this.$findapi('user');
ele.params = { filter: { email: this.email } };
let result = await this.$getapi([ele]);
let data = result.find((v) => v.name === 'user').data.rows;
if (data.length > 0) {
return this.errors.push({ name: 'email', text: 'Tài khoản đã tồn tại trong hệ thống.' });
}
let registerMethod = this.registermethod.find((v) => v.code === 'create-account').id;
if (this.type) {
if (this.authEmail !== this.email) this.type = undefined;
else registerMethod = this.registermethod.find((v) => v.code === this.type).id;
}
this.status = this.authstatus.find((v) => v.code === 'auth');
if (!this.type && this.email.indexOf('@') >= 0) this.status = this.authstatus.find((v) => v.code === 'wait');
data = {
fullname: this.fullname,
email: this.email,
password: this.hash,
type: this.usertype.find((v) => v.code === 'customer').id,
register_method: registerMethod,
auth_status: this.status.id,
phone: this.phone,
auth_method:
this.email.indexOf('@') >= 0
? this.authmethod.find((v) => v.code === 'email').id
: this.authmethod.find((v) => v.code === 'phone').id,
display_name: this.fullname,
};
this.$route.query.type === 'employee' ? (data.type = this.usertype.find((v) => v.code === 'employee').id) : false;
if (this.referer) data.referer = this.referer;
this.user = await this.$insertapi('user', data);
const customer = await this.$insertapi('customer', { ...data, type: null });
if (this.user !== 'error' && customer != 'error') {
let text = 'Bạn đã đăng ký tài khoản thành công. Hệ thống tự động chuyển tới trang đăng nhập.';
if (this.status.code === 'wait')
text = 'Bạn đã đăng ký tài khoản thành công. Hệ thống tự động chuyển tới trang xác thực tài khoản';
this.$dialog(text, 'Xác thực tài khoản', undefined, 5);
}
if (this.status.code === 'wait') {
this.code = this.$id();
let data = { user: this.user.id, code: this.code };
result = await this.$insertapi('userauth', data);
this.processAuth();
} else this.$router.push({ path: '/signin' });
},
async processAuth() {
let query = this.$store.state.link ? { code: this.code, link: this.$store.state.link } : { code: this.code };
let routeData = this.$router.resolve({ path: '/account/auth', query: query });
let path = window.location.origin + routeData.href;
let conn = this.$findapi('userauth');
conn.params.filter = { user: this.user.id };
let result = await this.$getapi([conn]);
let msg = result[0].data.rows[0].code;
msg = msg.replace('[1]', this.fullname);
msg = msg.replace('[2]', this.code);
msg = msg.replace('[3]', path);
let data = { subject: 'Xác thực tài khoản BigDataTechCloud', content: msg, to: this.user.email };
result = await this.$insertapi('sendemail', data);
this.$router.push({ path: '/account/auth', query: { id: this.user.id, email: this.email } });
},
onSuccess(googleUser) {
let info = googleUser.getBasicProfile();
console.log('Google info', info);
let keys = Object.keys(info);
this.email = info[keys[5]];
this.fullname = info[keys[1]];
this.type = 'google';
this.authEmail = this.$copy(this.email);
},
async logInWithFacebook() {
if (window.FB) {
let self = this;
window.FB.login(
function (response) {
if (response.authResponse) {
let userId = response.authResponse.userID;
self.getUserInfo(userId);
}
},
{
scope: 'public_profile,email',
return_scopes: true,
auth_type: 'rerequest',
},
);
} else {
await this.loadFacebookSDK(document, 'script', 'facebook-jssdk');
await this.initFacebook();
}
},
async initFacebook() {
let self = this;
window.fbAsyncInit = function () {
window.FB.init({
appId: '434259677606053',
cookie: true,
version: 'v8.0',
});
self.isLoaded = true;
};
},
async loadFacebookSDK(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
},
getUserInfo(userId) {
let self = this;
window.FB.api('/me?fields=id,name,email', function (response) {
self.username = response.email;
self.fullname = response.name;
self.type = 'facebook';
self.authEmail = self.$copy(self.username);
});
},
},
};
</script>
<style lang="scss">
.login-page {
background-color: #f0fdf4;
min-height: 100vh;
align-content: center;
button.is-primary {
background-color: #53b147;
box-shadow: 0 4px 12px rgba(83, 177, 71, 0.25);
&:hover {
background: #45963a;
transform: translateY(-1px);
}
}
.wrapper-login {
border-radius: 20px;
overflow: hidden;
border: 1px solid #bbf7d0;
background-color: #fff;
padding: 0;
// .login-header {
// }
.login-body {
.form-login {
.group-action {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.social-login {
.social-header {
text-align: center;
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background-color: #ddd;
}
span {
position: relative;
z-index: 1;
background-color: #fff;
padding: 0 10px;
}
}
.social-body {
display: flex;
align-items: center;
gap: 10px;
.social-item {
flex: 1;
button {
height: fit-content;
width: 100%;
font-weight: 600;
&:hover {
background-color: #bbf7d0;
border-color: #bbf7d0;
}
}
.icon {
width: 24px;
height: 24px;
}
}
}
}
.info-support {
background-color: #fff;
border: 1px solid #bbf7d0;
border-radius: 16px;
overflow: hidden;
.support-header {
background-color: #f0fdf4;
text-align: center;
padding: 14px 0;
.title {
font-weight: bold;
font-size: 16px;
}
}
.support-body {
display: flex;
padding: 16px 0;
align-items: center;
justify-content: space-around;
.support-item {
a {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #374151;
&:hover {
color: #16a34a;
img {
filter: brightness(0) saturate(100%) invert(40%) sepia(80%) saturate(400%) hue-rotate(90deg);
}
}
}
}
}
}
}
.login-footer {
margin-top: 24px;
padding-top: 12px;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #9ca3af;
span {
white-space: nowrap;
}
}
}
}
</style>