<template>
|
<div class="admin-login-container">
|
<div v-if="!haslogin" class="admin-login-container-welcom"
|
:style="{background: `url('${backgroundImage}') no-repeat top center`,backgroundSize: `cover`}">
|
<el-row v-if="languages&&languages.length>0"
|
style="position: fixed;top: 10px;right:10px;background-color:rgba(255, 255, 255, 0.8);border-radius: 5px;">
|
<el-col>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<svg-icon style="margin-top: 2px;" width="18" height="18" name="webpage" color="var(--el-color-primary)"/>
|
</div>
|
<div>
|
<el-select size="small" style="width: 160px;" v-model="selectedLanguage"
|
@change="onLanguageChange">
|
<el-option v-for="lang in languages" :key="lang.key" :label="lang.value"
|
:value="lang.key">
|
{{ lang.value }}
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col>
|
<div class="admin-login-container-loginform">
|
<el-row>
|
<el-col>
|
<h3 class="admin-login-title">{{ $t('message.WelcomeBack') }}</h3>
|
</el-col>
|
</el-row>
|
<el-row style="padding-bottom: 10px;">
|
<el-col>
|
<el-tabs>
|
<el-tab-pane>
|
<template #label>
|
<span>
|
<el-icon><Lock/></el-icon>
|
{{ $t('label.LoginByUsernamePassword') }}
|
</span>
|
</template>
|
<el-form :rules="rules" ref="loginByUPForm"
|
element-loading-text="Please wait a moment..."
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.7)" :model="model"
|
size="default">
|
<el-row>
|
<el-col>
|
<el-form-item prop="username">
|
<el-input size="default" link maxlength="64"
|
:prefix-icon="icon.User" v-model="model.username"
|
auto-complete="off"
|
:placeholder="$t('label.UserName')"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col>
|
<el-form-item prop="password">
|
<el-input size="default" type="password" maxlength="64"
|
:prefix-icon="icon.Key" v-model="model.password"
|
auto-complete="off"
|
:placeholder="$t('label.Password')"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col>
|
<el-form-item v-if="needverifycode" prop="verifycode">
|
<el-row>
|
<el-col :span="15">
|
<el-input size="default" link
|
v-model="model.verifycode" auto-complete="off"
|
maxlength="64"
|
:placeholder="$t('label.VerifyCode')"
|
@keydown.enter.native="submitLogin"></el-input>
|
</el-col>
|
<el-col :span="1"></el-col>
|
<el-col :span="8">
|
<el-image :src="vcUrl" fit='cover' @click="updateVerifyCode"/>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col>
|
<el-alert v-if="haserrormessage" type="error"
|
:title="errormessage ? errormessage : $t('message.UnknownSystemMessage')"
|
style="margin-bottom: 10px;" show-icon :closable="false"/>
|
</el-col>
|
</el-row>
|
<el-button size="default" type="primary" style="width: 100%;"
|
:loading="loading"
|
:icon="icon.SwitchButton" @click="submitLogin">
|
{{ $t('button.SignIn') }}
|
</el-button>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane>
|
<template #label>
|
<span>
|
<el-icon><Cellphone/></el-icon>
|
{{ $t('label.LoginBySMSCode') }}
|
</span>
|
</template>
|
<el-form :rules="rulessms" ref="loginBySMSForm"
|
element-loading-text="Please wait a moment..."
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.7)" :model="modelsms"
|
size="default">
|
<el-row>
|
<el-col>
|
<el-form-item prop="cellphone">
|
<el-input size="default" link maxlength="64"
|
:prefix-icon="icon.Cellphone"
|
v-model="modelsms.cellphone"
|
auto-complete="off"
|
:placeholder="$t('label.Cellphone')"></el-input>
|
</el-form-item>
|
<el-form-item prop="randomcode">
|
<el-row>
|
<el-col :span="15">
|
<el-input size="default" link
|
v-model="modelsms.randomcode"
|
:prefix-icon="icon.Promotion"
|
auto-complete="off"
|
maxlength="64"
|
:placeholder="$t('label.RandomCode')"
|
@keydown.enter.native="submitLoginSMSCode"></el-input>
|
</el-col>
|
<el-col :span="1"></el-col>
|
<el-col :span="8">
|
<el-button size="default" type="primary"
|
v-if="!hassentsmscode" style="width: 100%;"
|
:icon="icon.Promotion" @click="sendSMSCode">
|
{{ $t('button.SendSMSCode') }}
|
</el-button>
|
<el-button size="default" type="primary" v-else
|
disabled="disabled" style="width: 100%;"
|
@click="sendSMSCode">
|
{{ countdown }}s {{ $t('button.ReSendSMSCode') }}
|
</el-button>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
<el-alert v-if="haserrormessage" type="error"
|
style="margin-bottom: 10px;" show-icon :closable="false">
|
<template #header>
|
{{ errormessage ? errormessage : $t('message.UnknownSystemMessage') }}
|
</template>
|
</el-alert>
|
</el-col>
|
</el-row>
|
<el-button size="default" type="primary" style="width: 100%;"
|
:loading="loading"
|
:icon="icon.SwitchButton" @click="submitLoginSMSCode">
|
{{ $t('button.SignIn') }}
|
</el-button>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row style="position: fixed;bottom: 0;left:calc(50% - 180px)">
|
<el-col :span="24">
|
<div class="portal-login-footer-context">
|
<div>
|
<p>
|
<el-row>
|
<el-col :span="24">
|
<span>{{ $t('AgreementStatement') }}</span>
|
<a href="/license" style="color: var(--el-color-primary)">
|
{{ $t('ServiceAgreement') }}
|
</a>
|
-
|
<a href="/license/secrecy" style="color: var(--el-color-primary)">
|
{{ $t('PrivacyPolicy') }}
|
</a>
|
</el-col>
|
</el-row>
|
</p>
|
</div>
|
<p>{{ $t('copyright', {name: currentyear}) }}</p>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div v-else class="admin-login-container-welcom"
|
:style="{backgroundImage: `url(${backgroundImage})`}">
|
<el-card v-loading="true" :element-loading-text="`${$t('label.Loading')}...`" shadow="always"
|
class="admin-login-welcome">
|
<h3 class="admin-login-title">{{ $t('message.WelcomeBack') }}</h3>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as icon from '@element-plus/icons-vue'
|
import {getCurrentInstance, onActivated, onBeforeUnmount, onMounted, reactive, toRefs} from "vue";
|
import {GetConfigs} from "@/api/admin/system";
|
import Cookies from "js-cookie";
|
import {
|
getVerifyCodeUrl,
|
doLogin,
|
SendSMSCode,
|
loginBySMSCode
|
} from "@/api/admin/security";
|
import {useBasicInfoStore} from "@/store/basicInfo";
|
|
export default {
|
name: "AdminLogin",
|
setup() {
|
let {proxy} = getCurrentInstance();
|
const store = useBasicInfoStore()
|
const state = reactive({
|
staticDomain: WGURL.staticDomain,
|
backgroundImage: WGURL.staticDomain + 'image/background-login.jpg',
|
currentyear: '',
|
languages: [],
|
selectedLanguage: Cookies.get("language"),
|
haslogin: false,
|
hassentsmscode: false,
|
countdown: 60,
|
loading: false,
|
vcUrl: "",
|
model: {
|
username: '',
|
password: '',
|
verifycode: ''
|
},
|
modelsms: {
|
cellphone: '',
|
randomcode: ''
|
},
|
sesstionverifycode: '',
|
readAndApproved: false,
|
needverifycode: false,
|
haserrormessage: false,
|
errormessage: `* ${proxy.$t('message.UnknownSystemMessage')}`,
|
rules: {
|
username: [{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.UserName')})}`,
|
trigger: 'blur'
|
}],
|
password: [{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.Password')})}`,
|
trigger: 'blur'
|
}],
|
verifycode: [{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.VerifyCode')})}`,
|
trigger: 'blur'
|
}]
|
},
|
rulessms: {
|
cellphone: [
|
{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.Cellphone')})}`,
|
trigger: 'blur'
|
},
|
{
|
validator: function (rule, value, callback) {
|
if (/^1[34578]\d{9}$/.test(value) === false) {
|
callback(new Error(`${proxy.$t('message.DataFormatHasError', {name: proxy.$t('label.Cellphone')})}`))
|
} else {
|
callback()
|
}
|
}, trigger: 'blur'
|
}
|
],
|
randomcode: [{
|
required: true,
|
message: `${proxy.$t('message.IsRequired', {name: proxy.$t('label.VerifyCode')})}`,
|
trigger: 'blur'
|
}]
|
}
|
});
|
|
onMounted(() => {
|
Init();
|
LoadData();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
onActivated(() => {
|
state.haslogin = false;
|
});
|
|
const Init = () => {
|
let date = new Date();
|
state.currentyear = date.getFullYear();
|
|
if (state.needverifycode) {
|
updateVerifyCode();
|
} else {
|
state.model.verifycode = '';
|
}
|
|
state.model.username = localStorage.getItem("loginform-username");
|
state.model.password = localStorage.getItem("loginform-password");
|
|
//Clear old layout page tags;
|
store.tags = [{
|
name: 'Workbench',
|
closable: false,
|
icon: 'workbench',
|
languagekey: 'Workbench'
|
}]
|
};
|
const LoadData = () => {
|
let condition = {
|
permissionLevel: store.permissionLevel,
|
}
|
GetConfigs(condition).then(resp => {
|
state.loading = false;
|
if (resp.data) {
|
state.configs = resp.data.data;
|
if (state.configs) {
|
state.languages = state.configs.filter(e => e.category === 'language');
|
localStorage.setItem("languages", JSON.stringify(state.languages))
|
}
|
}
|
}).catch(err => {
|
console.error(err);
|
});
|
};
|
|
const updateVerifyCode = () => {
|
state.vcUrl = getVerifyCodeUrl(state.model.username);
|
state.model.verifycode = '';
|
};
|
const sendSMSCode = () => {
|
if (!state.modelsms.cellphone) {
|
proxy.$refs.loginBySMSForm.validate((valid) => {
|
return false;
|
});
|
} else {
|
let sendsmscodetimer = setInterval(function () {
|
if (state.countdown > 0) {
|
state.hassentsmscode = true;
|
state.countdown -= 1;
|
} else {
|
state.hassentsmscode = false;
|
sendsmscodetimer = null;
|
}
|
}, 1000);
|
SendSMSCode(state.modelsms.cellphone)
|
.then(success => {
|
state.loading = false;
|
let resp = success.data;
|
if (resp) {
|
if (resp.code == 200) {
|
|
} else if (resp.code = 500) {
|
state.loading = false;
|
state.errormessage = `${proxy.$t('message.' + resp.message)}`;
|
state.haserrormessage = true;
|
}
|
}
|
})
|
.catch(error => {
|
state.loading = false;
|
state.errormessage = error;
|
state.haserrormessage = true;
|
});
|
}
|
}
|
|
const submitLogin = () => {
|
proxy.$refs.loginByUPForm.validate((valid) => {
|
if (valid) {
|
state.loading = true;
|
doLogin(state.model)
|
.then(resp => {
|
state.loading = false;
|
let data = resp.data;
|
if (data && data.code === 200) {
|
LoginSuccessCallBack(data);
|
} else {
|
LoginFailedCallBack(data);
|
}
|
})
|
.catch(error => {
|
|
});
|
} else {
|
state.haslogin = false;
|
}
|
});
|
}
|
const submitLoginSMSCode = () => {
|
proxy.$refs.loginBySMSForm.validate((valid) => {
|
if (valid) {
|
state.loading = true;
|
loginBySMSCode(state.modelsms)
|
.then(resp => {
|
state.loading = false;
|
let data = resp.data;
|
if (data && data.code === 200) {
|
LoginSuccessCallBack(data);
|
} else {
|
LoginFailedCallBack(data);
|
}
|
})
|
.catch(error => {
|
|
});
|
} else {
|
state.haslogin = false;
|
}
|
});
|
}
|
|
const LoginSuccessCallBack = (data) => {
|
localStorage.setItem("loginform-username", state.model.username);
|
localStorage.setItem("loginform-password", "");
|
|
store.setSessionData(data);
|
|
state.haslogin = true;
|
proxy.$router.replace("/admin/workbench");
|
}
|
const LoginFailedCallBack = (resp) => {
|
let message = `* ${proxy.$t('message.UnknownSystemMessage')}`;
|
if (resp) {
|
message = resp.message;
|
if (message) {
|
message = `* ${proxy.$t('message.' + message)}`;
|
}
|
}
|
|
state.haslogin = false;
|
state.loading = false;
|
state.errormessage = message;
|
state.haserrormessage = true;
|
|
state.needverifycode = true;
|
|
updateVerifyCode();
|
}
|
|
const onLanguageChange = (lang) => {
|
let language = lang;
|
if (language) {
|
Cookies.set("language", language, {domain: WGURL.cookieDomain});
|
|
window.history.go(0);
|
}
|
};
|
|
return {
|
...toRefs(state),
|
updateVerifyCode,
|
submitLogin,
|
sendSMSCode,
|
submitLoginSMSCode,
|
onLanguageChange,
|
icon
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang='scss'>
|
.admin-login-container {
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
color: #2c3e50;
|
margin: 0px 0px;
|
padding: 0px;
|
height: 100%;
|
}
|
|
.admin-login-container-welcom {
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
color: #2c3e50;
|
margin: 0px 0px;
|
padding: 10px;
|
height: 100%;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-attachment: fixed;
|
background-position: center;
|
}
|
|
.admin-login-container-loginform {
|
height: auto;
|
width: 300px;
|
position: fixed;
|
top: 30%;
|
right: 0;
|
left: 0;
|
margin: auto;
|
border-radius: 15px;
|
background-clip: padding-box;
|
padding: 15px 35px 15px 35px;
|
background: rgba(255, 255, 255, 0.8);;
|
border: 1px solid #eaeaea;
|
text-align: left;
|
}
|
|
.admin-login-welcome {
|
height: 50%;
|
width: 50%;
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
margin: auto;
|
border-radius: 15px;
|
background-clip: padding-box;
|
padding: 15px 35px 15px 35px;
|
background: rgba(255, 255, 255, 0.8);;
|
border: 1px solid #eaeaea;
|
text-align: center;
|
}
|
|
.admin-login-title {
|
margin: 10px auto 10px auto;
|
text-align: center;
|
color: #505458;
|
}
|
|
.admin-login-policy {
|
text-align: left;
|
margin: 0px 0px 10px 0px;
|
}
|
|
.el-form-item__content {
|
display: flex;
|
align-items: center;
|
}
|
|
.portal-login-footer-context {
|
text-align: center;
|
font-size: 12px;
|
}
|
</style>
|
