Skip to content

G
gdtel-gztel-school-center-ui
Commit a7cada7f by 邝钲钞
Options

模糊登陆错误信息，对用户名错误及密码错误均提示”用户名或密码错误，请重新入“

parent 8dd1b0e7
Showing with 265 additions and 240 deletions
src/views/user/Login.vue
......@@ -9,27 +9,37 @@
<a-form-item>
<a-input
size="large"
v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
type="text"
placeholder="请输入帐户名">
size="large"
v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
type="text"
placeholder="请输入帐户名">
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-form-item>
<a-input
v-decorator="['password',validatorRules.password]"
size="large"
type="password"
autocomplete="false"
placeholder="密码">
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<a-row :gutter="0">
<a-col :span="14">
<a-form-item>
<a-input
v-decorator="['inputCode',validatorRules.inputCode]"
size="large"
type="text"
@change="inputCodeChange"
placeholder="请输入验证码">
v-decorator="['inputCode',validatorRules.inputCode]"
size="large"
type="text"
@change="inputCodeChange"
placeholder="请输入验证码">
<a-icon
slot="prefix"
v-if=" inputCodeContent==verifiedCode "
type="smile"
:style="{ color: 'rgba(0,0,0,.25)' }"/>
slot="prefix"
v-if=" inputCodeContent==verifiedCode "
type="smile"
:style="{ color: 'rgba(0,0,0,.25)' }"/>
<a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
......@@ -39,82 +49,74 @@
</a-col>
</a-row>
<a-row :gutter="0">
<a-col :span="14">
<a-form-item>
<a-input
:disabled="!loginBtn"
v-decorator="['phonecode',validatorRules.phoneCode]"
size="large"
type="text"
placeholder="请输入手机验证码">
<a-icon slot="prefix" type="message" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="10">
<a-button
size="small"
type="primary"
htmlType="submit"
class="code-button"
@click.stop.prevent="getCode"
:disabled="!loginBtn">{{codeMsg}}
</a-button>
<!-- <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>-->
</a-col>
</a-row>
<a-form-item>
<a-input
:disabled="!loginBtn"
v-decorator="['password',validatorRules.password]"
size="large"
type="password"
autocomplete="false"
placeholder="密码">
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
<div style="top:10px;float: left;font-size: 12px;color: #8b8b8b">
<a-checkbox v-model="single" disabled></a-checkbox>&nbsp;
我已阅读<a @click="commitmentSubmit">《用户个人信息保护承诺书》</a>
</div><br/>
<div class="register"><router-link :to="{path: '/user/register'}">找回密码</router-link></div>
<a-row :gutter="0">
<a-col :span="14">
<a-form-item>
<a-input
:disabled="!loginBtn"
v-decorator="['phonecode',validatorRules.phoneCode]"
size="large"
type="text"
placeholder="请输入手机验证码">
<a-icon slot="prefix" type="message" :style="{ color: 'rgba(0,0,0,.25)' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="10">
<a-button
size="small"
type="primary"
htmlType="submit"
class="code-button"
@click.stop.prevent="getCode"
:disabled="!loginBtn">{{ codeMsg }}
</a-button>
<!-- <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>-->
</a-col>
</a-row>
<div style="top:10px;float: left;font-size: 12px;color: #8b8b8b">
<a-checkbox v-model="single" disabled></a-checkbox>&nbsp;
我已阅读<a @click="commitmentSubmit">《用户个人信息保护承诺书》</a>
</div>
<br/>
<div class="register">
<router-link :to="{path: '/user/register'}">找回密码</router-link>
</div>
<a-form-item style="margin-top:24vw/@vw">
<a-button
size="large"
type="primary"
htmlType="submit"
class="login-button"
@click.stop.prevent="handleSubmit"
:disabled="!loginBtn">{{buttondata}}
size="large"
type="primary"
htmlType="submit"
class="login-button"
@click.stop.prevent="handleSubmit"
:disabled="!loginBtn">{{ buttondata }}
</a-button>
</a-form-item>
</a-form>
<two-step-captcha
v-if="requiredTwoStepCaptcha"
:visible="stepCaptchaVisible"
@success="stepCaptchaSuccess"
@cancel="stepCaptchaCancel">
v-if="requiredTwoStepCaptcha"
:visible="stepCaptchaVisible"
@success="stepCaptchaSuccess"
@cancel="stepCaptchaCancel">
</two-step-captcha>
<LeakProofModel :v-model="LeakProofModel"></LeakProofModel>
<commitment ref="commitment" :countNum="countNum" @appendData="appendData" v-show="commitment"></commitment>
</div>
</div>
</div>
</template>
<script>
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import {mapActions} from "vuex"
import { getPhoneCode } from "@/api/login"
import {getPhoneCode} from "@/api/login"
import {timeFix} from "@/utils/util"
import Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import JGraphicCode from '@/components/jeecg/JGraphicCode'
import LeakProofModel from '@/views/user/protocol/Leak-proof-model'
import commitment from '@/views/user/protocol/commitment'
import {setMaxDigits , RSAKeyPair , encryptedString} from '@/utils/RSA'
import {setMaxDigits, RSAKeyPair, encryptedString} from '@/utils/RSA'
export default {
......@@ -126,12 +128,12 @@ export default {
},
data() {
return {
flag:false,
LeakProofModel:true,
commitment:false,
countNum:0,
single:false,
buttondata:"登录",
flag: false,
LeakProofModel: true,
commitment: false,
countNum: 0,
single: false,
buttondata: "登录",
customActiveKey: "tab1",
loginBtn: false,
// login type: 0 email, 1 username, 2 telephone
......@@ -139,7 +141,7 @@ export default {
requiredTwoStepCaptcha: false,
stepCaptchaVisible: false,
form: this.$form.createForm(this),
updateTime:'',
updateTime: '',
formLogin: {
username: "",
password: "",
......@@ -186,22 +188,24 @@ export default {
// 验证码60秒倒计时
if (!this.timer) {
let username = encodeURIComponent(this.getPass(this.formLogin.username));
let password = encodeURIComponent(this.getPass(this.formLogin.password));
let data = {
username: username,
password: password
}
getPhoneCode(data).then(res => {
if (res.code == 200) {
this.$notification.success({
message: res.message ? res.message :"发送成功",
message: res.message ? res.message : "发送成功",
});
return null;
}
this.$notification.error({
message: res.message ? res.message :"发送错误",
message: res.message ? res.message : "发送错误",
});
})
//初始化倒计时
this.countdown=60;
this.countdown = 60;
this.timer = setInterval(() => {
if (this.countdown > 0 && this.countdown <= 60) {
this.countdown--;
......@@ -222,8 +226,8 @@ export default {
this.single = data.single;
this.commitment = data.commitment;
},
commitmentSubmit(){
if(!this.flag){
commitmentSubmit() {
if (!this.flag) {
this.countNum = 0;
}
this.commitment = true;
......@@ -231,7 +235,7 @@ export default {
this.$refs.commitment.setTimer();
},
handleSubmit() {
if(!this.flag){
if (!this.flag) {
this.commitmentSubmit();
return;
}
......@@ -240,12 +244,12 @@ export default {
smsCode: "xxxx"
};
// 使用账户密码登陆
that.form.validateFields(['username', 'password', 'inputCode',"phonecode"], {force: true}, (err, values) => {
that.form.validateFields(['username', 'password', 'inputCode', "phonecode"], {force: true}, (err, values) => {
if (!err) {
loginParams.username = values.username;
loginParams.password = encodeURIComponent(this.getPass(values.password));
loginParams.remember = that.formLogin.remember;
loginParams.phonecode=encodeURIComponent(this.getPass(values.phonecode));
loginParams.phonecode = encodeURIComponent(this.getPass(values.phonecode));
//console.log(loginParams);
that.Login(loginParams).then((res) => {
this.updateTime = res.updateTime
......@@ -258,7 +262,7 @@ export default {
})
},
//密码加密
getPass(text){
getPass(text) {
/*let keyss = setMaxDigits(130);
keyss = new RSAKeyPair("10001","","a5d210338760bdbe2baabef73c410582e812dad8d9669d8c6ebfe026450e5cc10005290f17a0474c7351031edbff81bd8217a518bdf1a02855f53105ead0370e8a9e30b8560feab1d333a0b055b29419476b0eea1ea54315662ddfc46ec066f076e9490ec34c825afad9e44cf38e5ab600f3136acfe3a0ac0e672e2cb8e50371");
let password = encryptedString(keyss,text);*/
......@@ -313,15 +317,15 @@ export default {
if (!value || this.verifiedCode == this.inputCodeContent) {
callback();
} else {
this.loginBtn=false
this.loginBtn = false
callback("您输入的验证码不正确!");
}
},
validatephoneCode(rule, value, callback){
callback();
validatephoneCode(rule, value, callback) {
callback();
},
generateCode(value) {
this.loginBtn=false;
this.loginBtn = false;
this.verifiedCode = value.toLowerCase()
},
inputCodeChange(e) {
......@@ -335,15 +339,15 @@ export default {
if (this.verifiedCode == this.inputCodeContent) {
this.form.validateFields(['username'], {force: true}, (err, values) => {
if (!err&&this.countdown==0) {
if (!err && this.countdown == 0) {
clearInterval(this.timer);
this.codeMsg = "获取验证码";
this.countdown = 60;
this.timer = null;
this.formLogin.username=values.username
this.formLogin.username = values.username
this.getCode()
}
this.loginBtn=true
this.loginBtn = true
})
}
},
......@@ -363,168 +367,189 @@ export default {
<style lang="less" scoped>
@import '~@/assets/less/style';
.main{
.code-button{
width:calc(100% - 10vw/@vw);
height:68vw/@vw;
margin-left: 10vw/@vw;
background:#e6e6e6;
/*border-radius:40vw/@vw;*/
font-size:24vw/@vw;
font-family:PingFang SC;
font-weight:bold;
color:#adadad;
}
.caption{
width: 666vw/@vw;
height: 792vw/@vw;
background: url("~@/assets/bg_content_new.jpg") no-repeat center;
background-size: cover;
float: left;
}
.register{
margin-bottom: 10vw/@vw;
font-size: 12px;
width: 50px;
}
.form{
width: calc(100% - 666vw/@vw);
height: 792vw/@vw;
padding:80vw/@vw 80vw/@vw 0 60vw/@vw;
box-sizing: border-box;
float:left;
.form_title{
font-size:40vw/@vw;
font-family:PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
display: inline-block;
height: 55vw/@vw;
margin: 25vw/@vw 0vw/@vw 50vw/@vw 0;
border-bottom: 6vw/@vw solid #57bbff;
}
/deep/ .ant-form-item{
margin-bottom: 24vw/@vw;
}
@media (min-width: 1920px) {
/deep/.ant-input-affix-wrapper .ant-input-prefix{
font-size: 22vw/@vw;
top: 38% !important;
}
}
@media (min-width: 1400px) {
/deep/.ant-input-affix-wrapper .ant-input-prefix{
font-size: 22vw/@vw;
top: 40.5% !important;
}
}
/deep/.ant-input-affix-wrapper .ant-input-prefix{
font-size: 22vw/@vw;
top: 39%;
}
/deep/ .user-layout-login div .ant-input{
width:100%;
height:68vw/@vw;
margin-bottom: 15vw/@vw;
padding-left: 44vw/@vw;
background:rgba(245,245,245,1);
border:1vw/@vw solid rgba(221,221,221,1);
opacity:0.5;
border-radius:4vw/@vw;
&::-webkit-input-placeholder {
font-size:24vw/@vw;
font-family:PingFang SC;
font-weight:500;
color:#333;
line-height:88vw/@vw;
}
&::-moz-placeholder {
font-size:24vw/@vw;
font-family:PingFang SC;
font-weight:500;
color:#333;
line-height:88vw/@vw;
}
&:-ms-input-placeholder {
font-size:24vw/@vw;
font-family:PingFang SC;
font-weight:500;
color:#333;
line-height:88vw/@vw;
}
}
/deep/ #gc-canvas{
height: 67vw/@vw;
}
/deep/ .user-layout-login button.login-button{
width:595vw/@vw;
height:80vw/@vw;
background:rgba(87,148,255,1);
border-radius:40vw/@vw;
font-size:36vw/@vw;
font-family:PingFang SC;
font-weight:bold;
color:rgba(255,255,255,1);
}
}
@import '~@/assets/less/style';
.main {
.code-button {
width: calc(100% - 10vw / @vw);
height: 68vw / @vw;
margin-left: 10vw / @vw;
background: #e6e6e6;
/*border-radius:40vw/@vw;*/
font-size: 24vw / @vw;
font-family: PingFang SC;
font-weight: bold;
color: #adadad;
}
.caption {
width: 666vw / @vw;
height: 792vw / @vw;
background: url("~@/assets/bg_content_new.jpg") no-repeat center;
background-size: cover;
float: left;
}
.register {
margin-bottom: 10vw / @vw;
font-size: 12px;
width: 50px;
}
.form {
width: calc(100% - 666vw / @vw);
height: 792vw / @vw;
padding: 80vw / @vw 80vw / @vw 0 60vw / @vw;
box-sizing: border-box;
float: left;
.form_title {
font-size: 40vw / @vw;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
display: inline-block;
height: 55vw / @vw;
margin: 25vw / @vw 0vw / @vw 50vw / @vw 0;
border-bottom: 6vw / @vw solid #57bbff;
}
/deep/ .ant-form-item {
margin-bottom: 24vw / @vw;
}
@media (min-width: 1920px) {
/deep/ .ant-input-affix-wrapper .ant-input-prefix {
font-size: 22vw / @vw;
top: 38% !important;
}
}
/*.user-layout-login {
margin-top: 20px;
@media (min-width: 1400px) {
/deep/ .ant-input-affix-wrapper .ant-input-prefix {
font-size: 22vw / @vw;
top: 40.5% !important;
}
}
label {
font-size: 14px;
}
/deep/ .ant-input-affix-wrapper .ant-input-prefix {
font-size: 22vw / @vw;
top: 39%;
}
.getCaptcha {
display: block;
width: 100%;
height: 40px;
}
/deep/ .user-layout-login div .ant-input {
width: 100%;
height: 68vw / @vw;
margin-bottom: 15vw / @vw;
padding-left: 44vw / @vw;
background: rgba(245, 245, 245, 1);
border: 1vw / @vw solid rgba(221, 221, 221, 1);
opacity: 0.5;
border-radius: 4vw / @vw;
.forge-password {
font-size: 14px;
}
&
::-webkit-input-placeholder {
font-size: 24vw / @vw;
font-family: PingFang SC;
font-weight: 500;
color: #333;
line-height: 88vw / @vw;
}
button.login-button {
padding: 0 15px;
font-size: 16px;
height: 40px;
width: 100%;
}
&
::-moz-placeholder {
font-size: 24vw / @vw;
font-family: PingFang SC;
font-weight: 500;
color: #333;
line-height: 88vw / @vw;
}
.user-login-other {
text-align: left;
margin-top: 24px;
line-height: 22px;
.item-icon {
font-size: 24px;
color: rgba(0, 0, 0, .2);
margin-left: 16px;
vertical-align: middle;
cursor: pointer;
transition: color .3s;
&:hover {
color: #1890ff;
}
}
&
:-ms-input-placeholder {
font-size: 24vw / @vw;
font-family: PingFang SC;
font-weight: 500;
color: #333;
line-height: 88vw / @vw;
}
}
/deep/ #gc-canvas {
height: 67vw / @vw;
}
.register {
float: right;
/deep/ .user-layout-login button.login-button {
width: 595vw / @vw;
height: 80vw / @vw;
background: rgba(87, 148, 255, 1);
border-radius: 40vw / @vw;
font-size: 36vw / @vw;
font-family: PingFang SC;
font-weight: bold;
color: rgba(255, 255, 255, 1);
}
}
}
/*.user-layout-login {
margin-top: 20px;
label {
font-size: 14px;
}
.getCaptcha {
display: block;
width: 100%;
height: 40px;
}
.forge-password {
font-size: 14px;
}
button.login-button {
padding: 0 15px;
font-size: 16px;
height: 40px;
width: 100%;
}
.user-login-other {
text-align: left;
margin-top: 24px;
line-height: 22px;
.item-icon {
font-size: 24px;
color: rgba(0, 0, 0, .2);
margin-left: 16px;
vertical-align: middle;
cursor: pointer;
transition: color .3s;
&:hover {
color: #1890ff;
}
}
}*/
.register {
float: right;
}
}
}*/
</style>
<style>
.valid-error .ant-select-selection__placeholder {
color: #f5222d;
}
.ant-modal-wrap{
top:10%
}
.valid-error .ant-select-selection__placeholder {
color: #f5222d;
}
.ant-modal-wrap {
top: 10%
}
</style>
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment