|
|
import React, {Component} from 'react';
|
|
|
|
|
|
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
|
|
|
|
|
|
import {getImageUrl,broadcastChannelPostMessage} from 'educoder';
|
|
|
import {Tabs, Input, Checkbox, Button, notification,Menu} from 'antd';
|
|
|
import passopen from '../../../src/images/login/passopen.png';
|
|
|
import passoff from '../../../src/images/login/passoff.png';
|
|
|
import axios from 'axios';
|
|
|
import CheckInputysl1 from './CheckInputysl';
|
|
|
import CheckInputysl2 from './CheckInputysl';
|
|
|
import Notcompletedysl from './Notcompletedysl';
|
|
|
import './common.css'
|
|
|
import './commontwo.css'
|
|
|
const { TabPane } = Tabs;
|
|
|
const loginInputsyl = {
|
|
|
"width":"434px",
|
|
|
"height": "462px",
|
|
|
"-webkit-box-shadow": "3px 10px 21px 0px rgba(76,76,76,0.15)",
|
|
|
"box-shadow": "3px 10px 21px 0px rgba(76,76,76,0.15)",
|
|
|
"border-radius": "6px",
|
|
|
"background": "#fff"
|
|
|
}
|
|
|
|
|
|
//父组件EducoderLogin.js
|
|
|
class LoginRegisterComponent extends Component {
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
|
|
|
|
|
|
//
|
|
|
// console.log("LoginRegisterComponent");
|
|
|
// console.log("29");
|
|
|
// console.log(props.loginstatus);
|
|
|
if(props.loginstatus === true){
|
|
|
// console.log(props.loginstatus);
|
|
|
this.state = {
|
|
|
tab:["0"],
|
|
|
classpass: "text",
|
|
|
// 登录
|
|
|
passopens: passoff,
|
|
|
seconds: 60,
|
|
|
discodeBtn: false,
|
|
|
clearInterval: false,
|
|
|
autoLogin: true,
|
|
|
classpassbool: false,
|
|
|
// 注册
|
|
|
readAgreement: false,
|
|
|
getverificationcodes: true,
|
|
|
dragOk: false,
|
|
|
Agreetotheterms: true,
|
|
|
login: "",
|
|
|
password: "",
|
|
|
logins: "",
|
|
|
passwords: "",
|
|
|
codes: "",
|
|
|
Phonenumberisnotco: undefined,
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcosyzm:undefined,
|
|
|
Phonenumberisnotcosymmm:undefined,
|
|
|
Phonenumberisnotcosytdhk:undefined,
|
|
|
Phonenumberisnotcosyfwtk:undefined,
|
|
|
Phonenumberisnotcodmm:undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
Whethertoverify:false,
|
|
|
pciphone:true,
|
|
|
MyEduCoderModals:false,
|
|
|
registered:undefined,
|
|
|
Phonenumberisnotcodmms:undefined,
|
|
|
|
|
|
}
|
|
|
}
|
|
|
if(props.loginstatus === false){
|
|
|
// console.log(props.loginstatus);
|
|
|
this.state = {
|
|
|
tab:["1"],
|
|
|
classpass: "text",
|
|
|
// 登录
|
|
|
passopens: passoff,
|
|
|
seconds: 60,
|
|
|
discodeBtn: false,
|
|
|
clearInterval: false,
|
|
|
autoLogin: true,
|
|
|
classpassbool: false,
|
|
|
// 注册
|
|
|
readAgreement: false,
|
|
|
getverificationcodes: true,
|
|
|
dragOk: false,
|
|
|
Agreetotheterms: true,
|
|
|
login: "",
|
|
|
password: "",
|
|
|
logins: "",
|
|
|
passwords: "",
|
|
|
codes: "",
|
|
|
Phonenumberisnotco: undefined,
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcosyzm:undefined,
|
|
|
Phonenumberisnotcosymmm:undefined,
|
|
|
Phonenumberisnotcosytdhk:undefined,
|
|
|
Phonenumberisnotcosyfwtk:undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
Phonenumberisnotcodmm:undefined,
|
|
|
Whethertoverify:false,
|
|
|
pciphone:true,
|
|
|
MyEduCoderModals:false,
|
|
|
registered:undefined,
|
|
|
Phonenumberisnotcodmms:undefined,
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//判断是否是手机端
|
|
|
IsPC=()=> {
|
|
|
var userAgentInfo = navigator.userAgent;
|
|
|
var Agents = ["Android", "iPhone",
|
|
|
"SymbianOS", "Windows Phone",
|
|
|
"iPad", "iPod"];
|
|
|
var flag = true;//这个意思是说自己的是pc 端
|
|
|
for (var v = 0; v < Agents.length; v++) {
|
|
|
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
|
|
flag = false;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
return flag;
|
|
|
}
|
|
|
// 点击表单后，改变type
|
|
|
changeType = () => {
|
|
|
this.setState({classpass: 'password'});
|
|
|
}
|
|
|
componentDidMount = () => {
|
|
|
// console.log("componentDidUpdate");
|
|
|
// console.log(this.props);
|
|
|
let pcipns=this.IsPC();
|
|
|
if (this.props.match.url === "/login") {
|
|
|
console.log("11111111111111111111111111");
|
|
|
this.state = {
|
|
|
tab:["0"],
|
|
|
|
|
|
}
|
|
|
} else if (this.props.match.url === "/register") {
|
|
|
this.state = {
|
|
|
tab:["1"],
|
|
|
|
|
|
}
|
|
|
}
|
|
|
this.setState({
|
|
|
pciphone:pcipns,
|
|
|
})
|
|
|
|
|
|
|
|
|
}
|
|
|
openNotification = (messge,type) => {
|
|
|
// type 1 成功提示绿色 2提醒颜色黄色 3错误提示红色
|
|
|
notification.open({
|
|
|
message: "提示",
|
|
|
description: messge,
|
|
|
onClick: () => {
|
|
|
console.log('Notification Clicked!');
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
StudyMakeMoney = () => { // 调用父组件方法
|
|
|
|
|
|
// this.props.Setlogins(3);
|
|
|
this.setState({
|
|
|
login: "",
|
|
|
password: "",
|
|
|
logins: "",
|
|
|
passwords: "",
|
|
|
codes: "",
|
|
|
});
|
|
|
try {
|
|
|
this.props.Setshowbool(3);
|
|
|
}catch (e) {
|
|
|
|
|
|
}
|
|
|
}
|
|
|
onTabChange = (activeKey) => {
|
|
|
console.log("onTabChange");
|
|
|
}
|
|
|
// -------------------- LOGIN START
|
|
|
//下次自动登入
|
|
|
onAutoLoginChange = (e) => {
|
|
|
this.setState({autoLogin: e.target.checked})
|
|
|
}
|
|
|
|
|
|
// -------------------- LOGIN END
|
|
|
|
|
|
isCorrectname = (value, id) => {
|
|
|
if (id === 1) {
|
|
|
console.log(value.length);
|
|
|
if (value.length === 0) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotco: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
} else if (id === 2) {
|
|
|
if (value.length === 0) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
this.Emailphonenumberverification(value, id)
|
|
|
|
|
|
}
|
|
|
// -------------------- REGISTER START
|
|
|
onReadAgreementChange = (e) => {
|
|
|
this.setState({readAgreement: e.target.checked})
|
|
|
}
|
|
|
//是否验证通过
|
|
|
dragOkCallback = () => {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcosytdhk:undefined,
|
|
|
})
|
|
|
if (this.state.logins.length === 0) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos:"账号不能为空",
|
|
|
Phonenumberisnotcobool: true,
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
console.log("s0");
|
|
|
|
|
|
return;
|
|
|
}
|
|
|
// var telephone = $("#telephoneAdd.tianjia_phone").val();
|
|
|
var regph = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
|
|
// var email = $("#add_email.tianjia_email").val();
|
|
|
var regemail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
|
|
|
|
|
|
// [1]手机号开头必须是1 [3,4,5,6,7,8] 第二位是3-8中的一个 [0-9]{9} 后边9位可以是0-9的任意数字。
|
|
|
var stringdata = undefined;
|
|
|
if (!regph.test(this.state.logins)) {
|
|
|
stringdata = "手机号格式不正确";
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
dragOk:true,
|
|
|
})
|
|
|
console.log("s1");
|
|
|
} else {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
dragOk:true,
|
|
|
});
|
|
|
this.Emailphonenumberverification(this.state.logins, 2);
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (!regemail.test(this.state.logins)) {
|
|
|
if ((this.state.logins.indexOf("@") != -1) === true) {
|
|
|
stringdata = "邮箱格式不正确";
|
|
|
} else {
|
|
|
stringdata = "手机号格式不正确";
|
|
|
|
|
|
}
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: stringdata,
|
|
|
Phonenumberisnotcobool: true,
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
});
|
|
|
console.log("s2");
|
|
|
|
|
|
return
|
|
|
} else {
|
|
|
console.log("s222222");
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
dragOk:true,
|
|
|
})
|
|
|
this.Emailphonenumberverification(this.state.logins, 2);
|
|
|
return
|
|
|
}
|
|
|
|
|
|
this.setState({
|
|
|
Phonenumberisnotcosytdhk:undefined,
|
|
|
})
|
|
|
this.Emailphonenumberverification(this.state.logins, 2)
|
|
|
|
|
|
}
|
|
|
// -------------------- REGISTER END
|
|
|
|
|
|
//是否同意
|
|
|
onChange = (e) => {
|
|
|
this.setState({
|
|
|
Agreetotheterms: e.target.checked,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//登入接口
|
|
|
postLogin = () => {
|
|
|
|
|
|
if (this.state.login === undefined || this.state.login == "") {
|
|
|
this.setState({
|
|
|
Phonenumberisnotco:"账号不能为空",
|
|
|
})
|
|
|
return
|
|
|
} else if (this.state.password === undefined || this.state.password == "") {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcodmm:"密码不能为空",
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
var url = "/accounts/login.json";
|
|
|
axios.post(url, {
|
|
|
login: this.state.login,
|
|
|
password: this.state.password,
|
|
|
}).then((response) => {
|
|
|
debugger
|
|
|
if (response === undefined) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if(response.data.status === -2){
|
|
|
if(response.data.message==="该手机号尚未注册" || response.data.message==="该邮箱尚未注册"){
|
|
|
this.setState({
|
|
|
Phonenumberisnotco:response.data.message,
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
else if(response.data.message==="错误的账号或密码"){
|
|
|
this.setState({
|
|
|
Phonenumberisnotcodmms:response.data.message,
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
else if(response.data.message==="违反平台使用规范，账号已被锁定"){
|
|
|
this.setState({
|
|
|
Phonenumberisnotco:response.data.message,
|
|
|
})
|
|
|
|
|
|
return;
|
|
|
}
|
|
|
else {
|
|
|
this.openNotification(response.data.message);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
// if(response.data.profile_completed !== null || response.data.profile_completed === false){
|
|
|
// this.setMyEduCoderModals();
|
|
|
// return;
|
|
|
// }
|
|
|
|
|
|
if (response.status === 200) {
|
|
|
if (response.data.status === 402) {
|
|
|
window.location.href = response.data.url;
|
|
|
} else {
|
|
|
broadcastChannelPostMessage('refreshPage')
|
|
|
this.setState({
|
|
|
isRender: false
|
|
|
})
|
|
|
var weekArray = JSON.parse(window.sessionStorage.getItem('yslgeturls'));
|
|
|
if(weekArray===undefined){
|
|
|
weekArray="/";
|
|
|
}
|
|
|
if(weekArray===null){
|
|
|
weekArray="/";
|
|
|
}
|
|
|
if(weekArray==="null"){
|
|
|
weekArray="/";
|
|
|
}
|
|
|
window.location.href = weekArray;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
//注册接口
|
|
|
postregistered = () => {
|
|
|
// if (this.state.logins === undefined || this.state.logins === "") {
|
|
|
// this.openNotification(`请输入登录手机号码或邮箱`,2);
|
|
|
//
|
|
|
// return
|
|
|
// } else if (this.state.dragOk === false) {
|
|
|
// this.openNotification(`请拖动滑块验证`,2);
|
|
|
// return
|
|
|
// } else if (this.state.codes === undefined || this.state.codes == "") {
|
|
|
// this.openNotification(`请输入验证码`,2);
|
|
|
// return
|
|
|
// } else if (this.state.passwords === undefined || this.state.passwords == "") {
|
|
|
// this.openNotification(`请输入密码`,2);
|
|
|
// return
|
|
|
// } else if (this.state.Agreetotheterms === false) {
|
|
|
// this.openNotification(`请同意服务协议条款`,2);
|
|
|
// return;
|
|
|
// }
|
|
|
if (this.state.logins === undefined || this.state.logins === ""||this.state.logins.length===0) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos:"账号不能为空",
|
|
|
Phonenumberisnotcobool: true,
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
if(this.state.pciphone===true){
|
|
|
if (this.state.dragOk === false) {
|
|
|
// this.openNotification(`请拖动滑块完成验证`,2);
|
|
|
this.setState({
|
|
|
Phonenumberisnotcosytdhk:"请拖动滑块完成验证",
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (this.state.codes === undefined || this.state.codes == ""||this.state.codes.length===0) {
|
|
|
// this.openNotification(`请输入验证码`,2);
|
|
|
this.setState({
|
|
|
Phonenumberisnotcosyzm:"验证码不能为空",
|
|
|
})
|
|
|
return
|
|
|
} else if (this.state.passwords === undefined || this.state.passwords == "" ||this.state.passwords.length===0) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcosymmm:"密码不能为空",
|
|
|
})
|
|
|
return
|
|
|
} else if (this.state.passwords !==undefined &&this.state.passwords.length>0&&this.state.passwords.length<8){
|
|
|
this.setState({
|
|
|
Phonenumberisnotcosymmm:"密码不能少于8位",
|
|
|
})
|
|
|
return
|
|
|
} else if (this.state.passwords !==undefined &&this.state.passwords.length>0&&this.state.passwords.length>16){
|
|
|
this.setState({
|
|
|
Phonenumberisnotcosymmm:"密码不能超过16位",
|
|
|
})
|
|
|
return
|
|
|
} else if (this.state.Agreetotheterms === false) {
|
|
|
this.openNotification(`请同意服务协议条款`,2);
|
|
|
return;
|
|
|
}
|
|
|
var url = "/accounts/register.json";
|
|
|
axios.post(url, {
|
|
|
login: this.state.logins,
|
|
|
password: this.state.passwords,
|
|
|
code: this.state.codes,
|
|
|
}).then((result) => {
|
|
|
if(result){
|
|
|
if(result.data.status===-2){
|
|
|
if(result.data.message==="验证码不正确"){
|
|
|
this.setState({
|
|
|
Phonenumberisnotcosyzm:"验证码不正确",
|
|
|
})
|
|
|
|
|
|
return;
|
|
|
}else if(result.data.message==="验证码已失效"){
|
|
|
this.setState({
|
|
|
Phonenumberisnotcosyzm:"验证码不正确",
|
|
|
})
|
|
|
|
|
|
return;
|
|
|
}else {
|
|
|
this.openNotification(result.data.message);
|
|
|
return;
|
|
|
}
|
|
|
}else {
|
|
|
// this.setState({
|
|
|
// logins: "",
|
|
|
// dragOk: false,
|
|
|
// codes: "",
|
|
|
// passwords: "",
|
|
|
// Agreetotheterms: "",
|
|
|
// })
|
|
|
this.setMyEduCoderModals();
|
|
|
}
|
|
|
}
|
|
|
}).catch((error) => {
|
|
|
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//邮箱手机号验证
|
|
|
Emailphonenumberverification = (value, id) => {
|
|
|
var url = `/accounts/valid_email_and_phone.json`;
|
|
|
axios.get((url), {
|
|
|
params: {
|
|
|
login: value,
|
|
|
type: 1,
|
|
|
}
|
|
|
}).then((result) => {
|
|
|
|
|
|
//验证有问题{"status":1,"message":"success"}
|
|
|
// console.log(result);
|
|
|
// this.setState({dragOk: true})
|
|
|
|
|
|
if(result){
|
|
|
if(result.data.status===-2){
|
|
|
if (id === 1) {
|
|
|
if(result.data.message==="该手机号码或邮箱已被注册"){
|
|
|
this.setState({
|
|
|
Phonenumberisnotco: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
dragOk:true,
|
|
|
})
|
|
|
}else {
|
|
|
this.setState({
|
|
|
Phonenumberisnotco: result.data.message,
|
|
|
Phonenumberisnotcobool: true,
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
console.log("s5");
|
|
|
|
|
|
}
|
|
|
return;
|
|
|
} else if (id === 2) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: result.data.message,
|
|
|
Phonenumberisnotcobool: true,
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
console.log("s6");
|
|
|
|
|
|
return;
|
|
|
}
|
|
|
}else {
|
|
|
if (id === 1) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotco: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
dragOk:true,
|
|
|
})
|
|
|
return;
|
|
|
} else if (id === 2) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
dragOk:true,
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
|
})
|
|
|
};
|
|
|
//短信验证
|
|
|
SMSverification = () => {
|
|
|
var url = `/accounts/get_verification_code.json`;
|
|
|
axios.get((url), {
|
|
|
params: {
|
|
|
login: this.state.logins,
|
|
|
type: 1,
|
|
|
}
|
|
|
}).then((result) => {
|
|
|
//验证有问题{"status":1,"message":"success"}
|
|
|
// console.log(result);
|
|
|
this.openNotification("验证码已发送，请注意查收!",2);
|
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
|
console.log(error);
|
|
|
|
|
|
})
|
|
|
}
|
|
|
//显示和不显示密码
|
|
|
Showandhide = (e) => {
|
|
|
console.log("显示于隐藏");
|
|
|
if (this.state.classpassbool === true) {
|
|
|
this.setState({
|
|
|
passopens:passoff ,
|
|
|
classpass: "text",
|
|
|
classpassbool: false,
|
|
|
})
|
|
|
} else {
|
|
|
this.setState({
|
|
|
passopens: passopen ,
|
|
|
classpass: "password",
|
|
|
classpassbool: true,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//倒计时
|
|
|
getverificationcode = () => {
|
|
|
debugger
|
|
|
// console.log(this.state.Phonenumberisnotcobool);
|
|
|
// console.log(this.state.dragOk);
|
|
|
if(this.state.logins === undefined || this.state.logins.length===0){
|
|
|
this.openNotification("请输入手机号或邮箱");
|
|
|
return;
|
|
|
}
|
|
|
//这是判断是否手机正确
|
|
|
if(this.state.Phonenumberisnotcobool === true){
|
|
|
this.openNotification(this.state.Phonenumberisnotcos);
|
|
|
this.setState({
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
if(this.state.pciphone===true) {
|
|
|
if (this.state.dragOk === false) {
|
|
|
this.openNotification("拖动滑块验证");
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (this.state.getverificationcodes === true) {
|
|
|
this.setState({
|
|
|
getverificationcodes: undefined,
|
|
|
})
|
|
|
let timer = setInterval(() => {
|
|
|
this.setState((preState) => ({
|
|
|
seconds: preState.seconds - 1,
|
|
|
}), () => {
|
|
|
if (this.state.seconds == 0) {
|
|
|
clearInterval(timer);
|
|
|
this.setState({
|
|
|
getverificationcodes: false,
|
|
|
seconds: 60,
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
}, 1000)
|
|
|
this.SMSverification();
|
|
|
} else {
|
|
|
this.setState({
|
|
|
getverificationcodes: undefined,
|
|
|
})
|
|
|
let timer = setInterval(() => {
|
|
|
this.setState((preState) => ({
|
|
|
seconds: preState.seconds - 1,
|
|
|
}), () => {
|
|
|
if (this.state.seconds == 0) {
|
|
|
clearInterval(timer);
|
|
|
this.setState({
|
|
|
getverificationcodes: false,
|
|
|
seconds: 60,
|
|
|
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
}, 1000)
|
|
|
this.SMSverification();
|
|
|
}
|
|
|
}
|
|
|
//滑动验证手机号
|
|
|
|
|
|
//获取登入
|
|
|
loginInputonChange = (e) => {
|
|
|
// console.log(e.target.value);
|
|
|
var stirngt;
|
|
|
if(e.target.value.length>0){
|
|
|
var str= e.target.value.replace(/\s*/g,"")
|
|
|
stirngt=str;
|
|
|
}else{
|
|
|
stirngt= e.target.value;
|
|
|
}
|
|
|
|
|
|
if (e.target.value.length === 0) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotco: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
Phonenumberisnotcodmms:undefined,
|
|
|
login: stirngt,
|
|
|
})
|
|
|
}else{
|
|
|
this.setState({
|
|
|
login: stirngt,
|
|
|
Phonenumberisnotco:undefined,
|
|
|
Phonenumberisnotcodmms:undefined,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
}
|
|
|
//失去焦点判断
|
|
|
inputOnBlur = (e, id) => {
|
|
|
this.Emailphonenumberverification(e.target.value, 1);
|
|
|
}
|
|
|
inputOnBlurzhuche = (e, id) => {
|
|
|
if (e.target.value.length === 0) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
})
|
|
|
return;
|
|
|
}
|
|
|
// var telephone = $("#telephoneAdd.tianjia_phone").val();
|
|
|
var regph = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
|
|
|
// var email = $("#add_email.tianjia_email").val();
|
|
|
var regemail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
|
|
|
|
|
|
// [1]手机号开头必须是1 [3,4,5,6,7,8] 第二位是3-8中的一个 [0-9]{9} 后边9位可以是0-9的任意数字。
|
|
|
var stringdata = undefined;
|
|
|
if (!regph.test(e.target.value)) {
|
|
|
stringdata = "手机号格式不正确";
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: stringdata,
|
|
|
Phonenumberisnotcobool: true,
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
} else {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (!regemail.test(e.target.value)) {
|
|
|
if ((e.target.value.indexOf("@") != -1) === true) {
|
|
|
stringdata = "邮箱格式不正确";
|
|
|
} else {
|
|
|
stringdata = "手机号格式不正确";
|
|
|
|
|
|
}
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: stringdata,
|
|
|
Phonenumberisnotcobool: true,
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
return
|
|
|
} else {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
|
})
|
|
|
this.Emailphonenumberverification(e.target.value, id);
|
|
|
return
|
|
|
}
|
|
|
this.Emailphonenumberverification(e.target.value, id);
|
|
|
}
|
|
|
//获取登入密码
|
|
|
passwordonChange = (e) => {
|
|
|
// console.log(e.target.value);
|
|
|
var stirngt;
|
|
|
if(e.target.value.length>0){
|
|
|
var str= e.target.value.replace(/\s*/g,"")
|
|
|
stirngt=str;
|
|
|
}else{
|
|
|
stirngt= e.target.value;
|
|
|
}
|
|
|
this.setState({
|
|
|
password: stirngt,
|
|
|
Phonenumberisnotcodmm:undefined,
|
|
|
Phonenumberisnotcodmms:undefined,
|
|
|
})
|
|
|
// this.setState({
|
|
|
// password: e.target.value
|
|
|
// })
|
|
|
}
|
|
|
//获取注册登入
|
|
|
loginInputonChanges = (e) => {
|
|
|
console.log(e.target.value);
|
|
|
var stirngt;
|
|
|
if(e.target.value.length>0){
|
|
|
var str= e.target.value.replace(/\s*/g,"")
|
|
|
stirngt=str;
|
|
|
}else{
|
|
|
stirngt= e.target.value;
|
|
|
}
|
|
|
if (e.target.value.length === 0) {
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
Phonenumberisnotcobool: false,
|
|
|
logins: stirngt,
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
}else{
|
|
|
this.setState({
|
|
|
logins: stirngt,
|
|
|
Phonenumberisnotcos: undefined,
|
|
|
dragOk:false,
|
|
|
Whethertoverify:this.state.Whethertoverify===true?false:true,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
}
|
|
|
//获取注册密码
|
|
|
passwordonChanges = (e) => {
|
|
|
// console.log(e.target.value);
|
|
|
var stirngt;
|
|
|
if(e.target.value.length>0){
|
|
|
var str= e.target.value.replace(/\s*/g,"")
|
|
|
stirngt=str;
|
|
|
}else{
|
|
|
stirngt= e.target.value;
|
|
|
}
|
|
|
this.setState({
|
|
|
passwords: stirngt,
|
|
|
Phonenumberisnotcosymmm:undefined,
|
|
|
})
|
|
|
}
|
|
|
//获取code
|
|
|
codesonChange = (e) => {
|
|
|
this.setState({
|
|
|
codes: e.target.value,
|
|
|
Phonenumberisnotcosyzm:undefined,
|
|
|
})
|
|
|
}
|
|
|
//切换tab
|
|
|
changeTab=(e)=>{
|
|
|
this.setState({
|
|
|
tab:e.key
|
|
|
})
|
|
|
console.log(e.key);
|
|
|
if(e.key === 0){
|
|
|
this.setState({
|
|
|
Phonenumberisnotcos:undefined
|
|
|
})
|
|
|
}else{
|
|
|
this.setState({
|
|
|
Phonenumberisnotco:undefined
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
// this.props.history.push(`/courses/${this.props.match.params.coursesId}/exercises/${this.props.match.params.Id}/student_exercise_list?tab=`+e.key)
|
|
|
|
|
|
}
|
|
|
loginonkeyup =(e)=>{
|
|
|
if(e.keyCode==32){
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
};
|
|
|
setNotcompleteds=()=>{
|
|
|
this.setState({
|
|
|
Notcompleteds:true,
|
|
|
MyEduCoderModals:false,
|
|
|
registered:undefined,
|
|
|
|
|
|
})
|
|
|
};
|
|
|
setMyEduCoderModals=()=>{
|
|
|
this.setState({
|
|
|
MyEduCoderModals:true,
|
|
|
registered:"注册成功"
|
|
|
})
|
|
|
};
|
|
|
render() {
|
|
|
const {
|
|
|
// 登录
|
|
|
autoLogin,
|
|
|
classpass,
|
|
|
passopens,
|
|
|
seconds,
|
|
|
getverificationcodes,
|
|
|
Agreetotheterms,
|
|
|
Phonenumberisnotco,
|
|
|
Phonenumberisnotcos,
|
|
|
codes,
|
|
|
tab,
|
|
|
dragOk,
|
|
|
Whethertoverify,
|
|
|
classpassbool,
|
|
|
Phonenumberisnotcosytdhk,
|
|
|
Phonenumberisnotcosyzm,
|
|
|
Phonenumberisnotcosymmm,
|
|
|
Phonenumberisnotcodmm,
|
|
|
// 注册
|
|
|
readAgreement,
|
|
|
pciphone,
|
|
|
Phonenumberisnotcodmms,
|
|
|
} = this.state
|
|
|
// height: 346px;
|
|
|
if (this.state.seconds === 0) {
|
|
|
// window.location.href='http://www.cnblogs.com/a-cat/';
|
|
|
}
|
|
|
|
|
|
console.log(classpass);
|
|
|
return (
|
|
|
|
|
|
<div className="login_register_content login_register_contents" style={ parseInt(tab[0])==0?{height: "366px"} :{height: "510px"}}>
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.login_register_contents, .login_register_contents .ant-tabs-tabpane {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<div>
|
|
|
<Menu mode="horizontal" selectedKeys={tab} onClick={this.changeTab} className="mt20">
|
|
|
<Menu.Item key="0" className={tab===0?"active font-18":"font-18"} > 登录</Menu.Item>
|
|
|
<Menu.Item key="1" className={tab===1?"active font-18 ":"font-18 "} style={{marginLeft:"10px"}} >注册</Menu.Item>
|
|
|
</Menu>
|
|
|
|
|
|
{
|
|
|
parseInt(tab[0])==0 &&
|
|
|
<div style={{width: '340px'}}>
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.ant-input {
|
|
|
font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
-webkit-box-sizing: border-box;
|
|
|
box-sizing: border-box;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
list-style: none;
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
padding: 4px 11px;
|
|
|
width: 100%;
|
|
|
height: 38px;
|
|
|
font-size: 14px;
|
|
|
line-height: 1.5;
|
|
|
color: rgba(0, 0, 0, 0.65);
|
|
|
background-color: #fff;
|
|
|
background-image: none;
|
|
|
border: 1px solid #d9d9d9;
|
|
|
border-radius: 4px;
|
|
|
-webkit-transition: all .3s;
|
|
|
-o-transition: all .3s;
|
|
|
transition: all .3s;
|
|
|
}
|
|
|
.loginInputzhuche{
|
|
|
width: 100%;
|
|
|
background-color: #fff!important;
|
|
|
height: 45px !important;
|
|
|
padding: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<Input placeholder="请输入登录手机号码或邮箱" value={this.state.login}
|
|
|
onChange={this.loginInputonChange}
|
|
|
name="username"
|
|
|
className={Phonenumberisnotco && Phonenumberisnotco !== "" ?" color-grey-9 loginInputzhucheyslass bor-reds":" color-grey-9 loginInputzhuche"}
|
|
|
onBlur={(e) => this.inputOnBlur(e, 1)}
|
|
|
style={{marginTop: '30px', height: '38px'}}></Input>
|
|
|
|
|
|
{
|
|
|
Phonenumberisnotco && Phonenumberisnotco != "" ?
|
|
|
<p className="color-red mt5 mb5" style={{width: " 100%", height: "20px"}}>
|
|
|
<span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotco}</span>
|
|
|
</p>
|
|
|
: <div style={{height:"25px"}}></div>
|
|
|
}
|
|
|
|
|
|
<Input type="password" name="password" id="password" value={this.state.password}
|
|
|
onChange={this.passwordonChange}
|
|
|
className={Phonenumberisnotcodmm && Phonenumberisnotcodmm !== "" ?" color-grey-9 loginInputzhucheyslass bor-reds":" color-grey-9 loginInputzhuche"}
|
|
|
placeholder="密码"></Input>
|
|
|
{
|
|
|
Phonenumberisnotcodmm && Phonenumberisnotcodmm != "" ?
|
|
|
<p className="color-red mt5 mb5" style={{width: " 100%", height: "20px"}}>
|
|
|
<span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcodmm}</span>
|
|
|
</p>
|
|
|
: (Phonenumberisnotcodmms=== undefined?<div style={{height:"25px"}}></div>:"")
|
|
|
}
|
|
|
{
|
|
|
Phonenumberisnotcodmms && Phonenumberisnotcodmms != "" ?
|
|
|
<p className="color-red mt5 mb5" style={{width: " 100%", height: "20px"}}>
|
|
|
<span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcodmms}</span>
|
|
|
</p>
|
|
|
: ""
|
|
|
}
|
|
|
|
|
|
<div className="left_right font-12 " style={{color: '#676767'}}>
|
|
|
<Checkbox onChange={this.onAutoLoginChange} checked={autoLogin}>下次自动登录</Checkbox>
|
|
|
|
|
|
<a onClick={()=>this.StudyMakeMoney()}
|
|
|
className="mr3 color-grey-9 mt3 font-12">找回密码</a>
|
|
|
</div>
|
|
|
|
|
|
<Button className="login_btn font-16" type="primary" style={{height:"46px"}} onClick={() => this.postLogin()}
|
|
|
size={"large"}>登录</Button>
|
|
|
</div>
|
|
|
}
|
|
|
|
|
|
|
|
|
{
|
|
|
parseInt(tab[0])==1 &&
|
|
|
<div style={{width: '340px'}}>
|
|
|
<Input placeholder="请使用手机号/邮箱账号进行注册"
|
|
|
className={Phonenumberisnotcos && Phonenumberisnotcos !== "" ?" color-grey-9 loginInputzhucheyslass bor-reds":" color-grey-9 loginInputzhuche"}
|
|
|
value={this.state.logins}
|
|
|
type="text" autoComplete="off"
|
|
|
onChange={this.loginInputonChanges}
|
|
|
// onBlur={(e) => this.inputOnBlurzhuche(e, 2)}
|
|
|
style={{marginTop: '30px' , height: '38px',color:'#999999',fontSize:"14px"}}></Input>
|
|
|
{
|
|
|
Phonenumberisnotcos && Phonenumberisnotcos !== "" ?
|
|
|
<p className="color-red mt5 mb5 " style={{width: " 100%", height: "20px"}}>
|
|
|
<span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcos}</span>
|
|
|
</p>
|
|
|
: <div style={{height:"25px"}}></div>
|
|
|
|
|
|
}
|
|
|
{this.state.MyEduCoderModals===true? <Notcompletedysl
|
|
|
modalsType={this.state.MyEduCoderModals}
|
|
|
registered={this.state.registered}
|
|
|
setNotcompleteds={()=>{this.setNotcompleteds()}}
|
|
|
/>:""}
|
|
|
|
|
|
{
|
|
|
Whethertoverify===false&&pciphone===true?
|
|
|
<CheckInputysl1
|
|
|
dragOkCallback={this.dragOkCallback}
|
|
|
>
|
|
|
</CheckInputysl1>
|
|
|
:
|
|
|
""
|
|
|
|
|
|
}
|
|
|
{
|
|
|
Whethertoverify===true&&pciphone===true?
|
|
|
<CheckInputysl2
|
|
|
dragOkCallback={this.dragOkCallback}
|
|
|
>
|
|
|
</CheckInputysl2>
|
|
|
:
|
|
|
""
|
|
|
}
|
|
|
|
|
|
<div>
|
|
|
{
|
|
|
pciphone===true?
|
|
|
(
|
|
|
Phonenumberisnotcosytdhk && Phonenumberisnotcosytdhk !== "" ?
|
|
|
<p className="color-red mt5 mb5 " style={{width: " 100%", height: "20px"}}>
|
|
|
<span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcosytdhk}</span>
|
|
|
</p>
|
|
|
: <div style={{height:"25px"}}></div>
|
|
|
|
|
|
)
|
|
|
:""
|
|
|
}
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div className="yslbutondls">
|
|
|
|
|
|
<Input
|
|
|
className={Phonenumberisnotcosyzm && Phonenumberisnotcosyzm !== "" ?" mr5 font-14 color-grey-9 loginInputzhucheyslass bor-reds":" mr5 font-14 color-grey-9 loginInputzhuche"}
|
|
|
name="codes" type="text" autoComplete="off" readonly
|
|
|
onfocus="this.removeAttribute('readonly')" style={{
|
|
|
width:'210px',
|
|
|
height:'38px',
|
|
|
}} placeholder="请输入验证码"
|
|
|
onChange={this.codesonChange}
|
|
|
value={codes}
|
|
|
>
|
|
|
</Input>
|
|
|
{
|
|
|
getverificationcodes === undefined ?
|
|
|
<Button className=" ml5 font-14" disabled style={{"width": "120px","text-align":"center", "height": "45px",}}
|
|
|
size={"large"}>重新发送{seconds}s</Button>
|
|
|
: getverificationcodes === true ?
|
|
|
<Button className=" ml5 font-14" type="primary" style={{"width": "120px","text-align":"center", "height": "45px",}}
|
|
|
onClick={() => this.getverificationcode()} size={"large"}>获取验证码</Button>
|
|
|
:
|
|
|
<Button className=" ml5 font-14 " type="primary" style={{"width": "120px","text-align":"center", "height": "45px",}}
|
|
|
onClick={() => this.getverificationcode()} size={"large"}>重新发送</Button>
|
|
|
}
|
|
|
|
|
|
</div>
|
|
|
<div>
|
|
|
{
|
|
|
Phonenumberisnotcosyzm && Phonenumberisnotcosyzm !== "" ?
|
|
|
<p className="color-red mt5 mb5 " style={{width: " 100%", height: "20px"}}>
|
|
|
<span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcosyzm}</span>
|
|
|
</p>
|
|
|
: <div style={{height:"25px"}}></div>
|
|
|
|
|
|
}
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
{
|
|
|
`
|
|
|
.ant-input-affix-wrapper .ant-input-suffix {
|
|
|
right: 12px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
.mymimasysl {
|
|
|
border-right: none !important;
|
|
|
}
|
|
|
`
|
|
|
}
|
|
|
</style>
|
|
|
<Input placeholder="输入8~16位密码，区分大小写"
|
|
|
type={classpassbool===false?"text":"password"}
|
|
|
className={Phonenumberisnotcosymmm && Phonenumberisnotcosymmm !== "mymimasysl" ?" font-14 color-grey-9 loginInputzhucheysl mymimasysl":" font-14 color-grey-9 loginInputzhuche mymimasysl"}
|
|
|
autoComplete="new-password"
|
|
|
onClick={this.changeType}
|
|
|
value={this.state.passwords} onChange={this.passwordonChanges}
|
|
|
addonAfter={
|
|
|
<img className={"mt5"} src={passopens} onClick={(key) => this.Showandhide(key)}>
|
|
|
</img>
|
|
|
}></Input>
|
|
|
{
|
|
|
Phonenumberisnotcosymmm && Phonenumberisnotcosymmm !== "" ?
|
|
|
<p className="color-red mt5 mb5 " style={{width: " 100%", height: "20px"}}>
|
|
|
<span className="fl" style={{textAlign:"left",width: " 100%"}}>{Phonenumberisnotcosymmm}</span>
|
|
|
</p>
|
|
|
: <div style={{height:"25px"}}></div>
|
|
|
|
|
|
}
|
|
|
<Checkbox onChange={this.onChange}
|
|
|
checked={Agreetotheterms}
|
|
|
><span className="font-14 " style={{
|
|
|
color: '#676767',
|
|
|
}}>我已阅读并同意
|
|
|
<span>
|
|
|
<a href={'/help?index=4'} target="_blank" >《服务协议条款》</a>
|
|
|
</span></span></Checkbox>
|
|
|
<Button className=" font-16" type="primary" style={{height:"46px", width: "100%",marginTop:"26px"}} onClick={() => this.postregistered()}
|
|
|
size={"large"}>注册</Button>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
}
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default (LoginRegisterComponent);
|
