213 lines
8.0 KiB
Vue
Executable File
213 lines
8.0 KiB
Vue
Executable File
<template>
|
|
<div class="columns is-centered px-0 mx-0">
|
|
<div :class="`column is-${viewport>=4? 4 : 6}`">
|
|
<div class="has-background-white px-6 py-6 mt-6">
|
|
<Logo />
|
|
<Caption :class="`mt-5 pt-${viewport===1? 0 : 3}`" v-bind="{title: 'Sign in', size: 19}"></Caption>
|
|
<div class="field mt-5">
|
|
<label class="label">User name<b class="ml-1 has-text-danger">*</b></label>
|
|
<div class="control">
|
|
<input class="input" type="text" placeholder v-model="username" />
|
|
</div>
|
|
<p
|
|
class="help is-danger"
|
|
v-if="errors.find(v=>v.name==='username')"
|
|
v-html="errors.find(v=>v.name==='username').text"></p>
|
|
</div>
|
|
<div class="field mt-5">
|
|
<label class="label">Password<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
|
|
v-model="password"
|
|
/>
|
|
</p>
|
|
<div class="control">
|
|
<a class="button" @click="showpass=!showpass">
|
|
<span class="icon">
|
|
<SvgIcon v-bind="{name: showpass? 'eye-off.svg' : 'view.svg', type: 'gray'}"/>
|
|
</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 is-grouped mt-5">
|
|
<div class="control is-expanded">
|
|
<button class="button is-primary" @click="signin()">Login</button>
|
|
</div>
|
|
<div class="control">
|
|
<a class="is-primary" @click="accountRecovery()">Forgot Password?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Bowser from "bowser"
|
|
export default {
|
|
head() {
|
|
return {title: 'Signin'}
|
|
},
|
|
data() {
|
|
return {
|
|
fullname: undefined,
|
|
username: undefined,
|
|
password: undefined,
|
|
errors: [],
|
|
showpass: false,
|
|
registers: [],
|
|
type: undefined,
|
|
isLoaded: false,
|
|
data: undefined,
|
|
account: undefined
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener("keyup", (ev) => ev.key==='Enter' && this.$route.name==='signup'? this.signin() : false)
|
|
if(!this.module) return this.$router.push('/welcome')
|
|
},
|
|
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})}
|
|
},
|
|
module: {
|
|
get: function() {return this.$store.state['module']},
|
|
set: function(val) {this.$store.commit('updateStore', {name: 'module', data: val})}
|
|
}
|
|
},
|
|
methods: {
|
|
checkError() {
|
|
this.errors = []
|
|
if (!this.$empty(this.username)) {
|
|
this.username = this.username.trim().toLowerCase();
|
|
}
|
|
if (this.$empty(this.username)) {
|
|
this.errors.push({
|
|
name: "username",
|
|
text: "Email không được bỏ trống."
|
|
});
|
|
}
|
|
if (this.$empty(this.password)) {
|
|
this.errors.push({
|
|
name: "password",
|
|
text: "Mật khẩu không được bỏ trống."
|
|
});
|
|
} else if (this.password.length < 6) {
|
|
this.errors.push({
|
|
name: "password",
|
|
text: "Mật khẩu gồm 6 kí tự trở nên bao gồm chữ và số ."
|
|
});
|
|
} else if (
|
|
!(/\d/.test(this.password) && /[a-zA-Z]/.test(this.password))
|
|
) {
|
|
this.errors.push({
|
|
name: "password",
|
|
text: "Mật khẩu gồm 6 kí tự trở nên bao gồm chữ và số ."
|
|
})
|
|
}
|
|
return this.errors.length>0? true : false
|
|
},
|
|
async signin() {
|
|
if(this.checkError()) return
|
|
let conn = this.$findapi('login')
|
|
conn.params.filter = {username: this.username, password: this.password}
|
|
let result= await this.$getapi([conn])
|
|
if(result==='error') {
|
|
return this.$dialog('Đã xảy ra lỗi. Vui lòng thử lại hoặc liên hệ số hotline để được hỗ trợ.', 'Lỗi kết nối', 'Error', 10)
|
|
}
|
|
let data = result.find(v => v.name==="login").data.rows
|
|
this.account = data
|
|
this.fillData(data)
|
|
},
|
|
invalidLogin(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: "username", text: text})
|
|
this.errors.push({ name: "password", text: text})
|
|
} else if(data.blocked) {
|
|
this.errors.push({name: "username", 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: "username", text: `Tài khoản đang chờ xác thực.`})
|
|
}
|
|
return this.errors.length>0? true : false
|
|
},
|
|
async fillData(data) {
|
|
if(this.invalidLogin(data)) return
|
|
//check permision
|
|
if(this.module!=='website') {
|
|
let userapps = await this.$getdata('userapps', {user: data.id, apps__code: this.module}, undefined, true)
|
|
if(!userapps) return this.$router.push('/welcome')
|
|
}
|
|
this.login = data //store login
|
|
if(this.$store.state.link) {
|
|
let ele = this.$copy(data)
|
|
//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)
|
|
let link = this.$store.state.link
|
|
if(data.type===3 && link.indexOf('y99')>=0) {
|
|
link = link.indexOf('dev')>=0? 'https://dev.ctv.y99.vn' : 'https://ctv.y99.vn'
|
|
}
|
|
let href = `${link}?username=${ele.username}&token=${ele.token}&fullname=${ele.fullname}&userid=${ele.id}`
|
|
if(ele.avatar) href = `${href}&avatar=${ele.avatar}`
|
|
window.location.href = href
|
|
} 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.username)
|
|
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)
|
|
},
|
|
accountRecovery() {
|
|
this.$router.push({path: '/account/recovery'})
|
|
},
|
|
async redirectUrl() {
|
|
this.$router.push(this.$route.query.href || '/welcome')
|
|
}
|
|
}
|
|
}
|
|
</script> |