Base Login
This commit is contained in:
ThienPhamVan
625
pages/signin.vue
Normal file
625
pages/signin.vue
Normal file
@@ -0,0 +1,625 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="columns is-centered px-0 mx-0 my-0">
|
||||
<div :class="`column wrapper-login is-4-desktop is-6-tablet`">
|
||||
<div class="px-6 py-6 login-box">
|
||||
<div class="login-header">
|
||||
<Logo />
|
||||
<h2 class="title mt-4 has-text-centered">{{ isVietnamese ? 'Đăng nhập' : 'Login' }}</h2>
|
||||
</div>
|
||||
<div class="login-body">
|
||||
<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"
|
||||
type="email"
|
||||
placeholder="Nhập email"
|
||||
v-model="email"
|
||||
@blur="validateEmail(email)"
|
||||
/>
|
||||
</div>
|
||||
<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 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="Nhập mật khẩu"
|
||||
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-5 pt-1 group-action">
|
||||
<button class="button is-primary" @click="signin()">Đăng nhập</button>
|
||||
<a class="is-primary" @click="accountRecovery()">Quên mật khẩu?</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 nhập 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 nhập với Facebook </span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-5 has-text-centered">
|
||||
Chưa có tài khoản?
|
||||
<nuxt-link class="ml-2" to="/signup">Tạo tài khoản</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>
|
||||
<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 Bowser from 'bowser';
|
||||
import GoogleLogin from 'vue-google-login';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GoogleLogin,
|
||||
},
|
||||
head() {
|
||||
return { title: `${this.isVietnamese ? 'Đăng nhập' : 'Login'} - ${this.company.name}` };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fullname: undefined,
|
||||
username: undefined,
|
||||
email: undefined,
|
||||
password: undefined,
|
||||
errors: [],
|
||||
showpass: false,
|
||||
registers: [],
|
||||
params: { client_id: '389310749372-mnfsd09ukgl0ahbdrm94dsepremlfgs9.apps.googleusercontent.com' },
|
||||
type: undefined,
|
||||
isLoaded: false,
|
||||
data: undefined,
|
||||
account: undefined,
|
||||
company: this.$companyInfo(),
|
||||
isVietnamese: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('keyup', (ev) =>
|
||||
ev.key === 'Enter' && this.$route.name === 'signup' ? this.signin() : false,
|
||||
);
|
||||
},
|
||||
watch: {
|
||||
isLoaded: function (newVal) {
|
||||
if (this.isLoaded) {
|
||||
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',
|
||||
},
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
login: {
|
||||
get: function () {
|
||||
return this.$store.state.login;
|
||||
},
|
||||
set: function (val) {
|
||||
this.$store.commit('updateLogin', { login: val });
|
||||
},
|
||||
},
|
||||
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 });
|
||||
},
|
||||
},
|
||||
viewport: {
|
||||
get: function () {
|
||||
return this.$store.state.viewport;
|
||||
},
|
||||
set: function (val) {
|
||||
this.$store.commit('updateViewPort', { viewport: val });
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
checkError() {
|
||||
this.errors = [];
|
||||
if (!this.$empty(this.email)) {
|
||||
this.email = this.email.trim().toLowerCase();
|
||||
}
|
||||
|
||||
this.validateEmail(this.email);
|
||||
this.validatePassword(this.password);
|
||||
|
||||
return this.errors.length > 0 ? true : false;
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
|
||||
async signin() {
|
||||
if (this.checkError()) return;
|
||||
let conn = this.$findapi('login');
|
||||
conn.params.filter = { email: this.email, password: this.password };
|
||||
let result = await this.$getapi([conn]);
|
||||
let data = result?.find((v) => v.name === 'login').data.rows;
|
||||
this.account = data;
|
||||
this.fillData(data);
|
||||
},
|
||||
onSuccess(googleUser) {
|
||||
let info = googleUser.getBasicProfile();
|
||||
|
||||
let keys = Object.keys(info);
|
||||
this.email = info[keys[5]];
|
||||
this.fullname = info[keys[1]];
|
||||
this.username = info[keys[0]];
|
||||
this.type = 'google';
|
||||
if (!this.$empty(this.email)) this.checkAccount();
|
||||
},
|
||||
async checkAccount() {
|
||||
if (this.$empty(this.email)) return;
|
||||
let found = this.$findapi('user');
|
||||
found.params = { filter: { email: this.email } };
|
||||
let result = await this.$getapi([found]);
|
||||
let data = result.find((v) => v.name === 'user').data.rows;
|
||||
if (data.length > 0) this.fillData(data[0]);
|
||||
else {
|
||||
let rs = await this.$insertapi('gethash', { text: this.$id() });
|
||||
let hash = rs.rows[0];
|
||||
let registerMethod = this.registermethod.find((v) => v.code === 'create-account').id;
|
||||
if (this.type) registerMethod = this.registermethod.find((v) => v.code === this.type).id;
|
||||
data = {
|
||||
fullname: this.fullname,
|
||||
username: this.username ?? this.email,
|
||||
email: this.email,
|
||||
password: hash,
|
||||
type: this.usertype.find((v) => v.code === 'customer').id,
|
||||
register_method: registerMethod,
|
||||
auth_status: this.authstatus.find((v) => v.code === 'auth').id,
|
||||
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,
|
||||
};
|
||||
|
||||
let res = await this.$insertapi('user', data);
|
||||
if (res !== 'error') {
|
||||
this.login = res;
|
||||
this.redirectUrl();
|
||||
}
|
||||
}
|
||||
},
|
||||
invalidLogin(data) {
|
||||
console.log('login', data);
|
||||
|
||||
if (!data) {
|
||||
const text = 'Tài khoản hoặc mật khẩu không chính xác';
|
||||
this.errors.push({ name: 'email', text: text });
|
||||
this.errors.push({ name: 'password', text: text });
|
||||
} else if (data.blocked) {
|
||||
this.errors.push({ name: 'email', text: 'Tài khoản đang bị khóa. Đăng nhập không thành công' });
|
||||
} else if (data.auth_status === 1) {
|
||||
this.errors.push({
|
||||
name: 'email',
|
||||
text: `Tài khoản đang chờ xác thực. <a @click="$emit('resend')">Gửi lại mã</a>`,
|
||||
});
|
||||
}
|
||||
return this.errors.length > 0 ? true : false;
|
||||
},
|
||||
async fillData(data) {
|
||||
if (this.invalidLogin(data)) return;
|
||||
this.login = data; //store login
|
||||
if (data.type === 1 || data.type__code === 'customer') {
|
||||
this.redirectUrl();
|
||||
} else if (this.$store.state.link) {
|
||||
let ele = this.$copy(data);
|
||||
if (
|
||||
this.$store.state.link.indexOf('bigdatatech.vn') < 0 &&
|
||||
this.$store.state.link.indexOf('localhost:3000') < 0
|
||||
) {
|
||||
return this.$redirectWeb(ele);
|
||||
}
|
||||
//get token & redirect link
|
||||
const browser = Bowser.getParser(window.navigator.userAgent);
|
||||
let obj = {
|
||||
browser: browser.getBrowserName(),
|
||||
browser_version: browser.getBrowserVersion(),
|
||||
platform: browser.getPlatform().type,
|
||||
os: browser.getOSName(),
|
||||
user: data.id,
|
||||
token: this.$id(),
|
||||
};
|
||||
ele.token = obj.token;
|
||||
await this.$insertapi('authtoken', obj);
|
||||
//await this.sendNoti(obj)
|
||||
this.$redirectWeb(ele);
|
||||
} else this.redirectUrl();
|
||||
},
|
||||
async sendNoti(obj) {
|
||||
let found = this.$findapi('notiform');
|
||||
found.params.filter = { code: 'login-alert' };
|
||||
const result = await this.$getapi([found]);
|
||||
let data = result[0].data.rows[0];
|
||||
let content = data.detail;
|
||||
content = content.replace('[1]', this.email);
|
||||
content = content.replace('[2]', obj.browser);
|
||||
content = content.replace('[3]', obj.browser_version);
|
||||
content = content.replace('[4]', obj.platform);
|
||||
content = content.replace('[5]', obj.os);
|
||||
content = content.replace('[6]', this.$dayjs().format('DD/MM/YYYY HH:mm'));
|
||||
let ele = { title: data.name, content: content, user: [obj.user.toString()], type: 1 };
|
||||
await this.$insertapi('notification', ele);
|
||||
},
|
||||
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: '314849628253331',
|
||||
cookie: true,
|
||||
xfbml: 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.email = response.email;
|
||||
self.fullname = response.name;
|
||||
self.type = 'facebook';
|
||||
self.checkAccount();
|
||||
});
|
||||
},
|
||||
accountRecovery() {
|
||||
this.$router.push({ path: '/account/recovery' });
|
||||
},
|
||||
// async resendAuthcode() {
|
||||
// let code = this.$id();
|
||||
// let result = await this.$insertapi('userauth', { user: this.account.id, code: code });
|
||||
// let query = this.$store.state.link ? { link: this.$store.state.link } : {};
|
||||
// query.id = this.account.id;
|
||||
// query.email = this.email;
|
||||
// query.action = 'sendcode';
|
||||
// this.$router.push({ path: '/account/auth', query: query });
|
||||
// },
|
||||
async redirectUrl() {
|
||||
this.$router.push(this.$route.query.href || '/welcome');
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
Reference in New Issue
Block a user