You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/react/src/modules/user/LoginRegisterComponent.js

1302 lines
48 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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,
weixinlogin:false,
qqlogin:false
}
}
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,
weixinlogin:false,
qqlogin:false
}
}
}
//判断是否是手机端
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'});
}
IsPC=()=>{
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
componentDidMount = () => {
let flag = this.IsPC(); //true为PC端false为手机端
this.setState({
isphone:flag
})
// console.log("componentDidUpdate");
// console.log(this.props);
let pcipns=this.IsPC();
if (this.props.match.url === "/login") {
console.log("11111111111111111111111111");
// this.state = {
// tab:["0"],
//
// }
this.setState({
tab:["0"]
})
} else if (this.props.match.url === "/register") {
console.log("11111111111111111111111111");
// this.state = {
// tab:["1"],
//
// }
this.setState({
tab:["1"]
})
}
this.setState({
pciphone:pcipns,
})
}
openNotification = (messge,type) => {
// type 1 成功提示绿色 2提醒颜色黄色 3错误提示红色
notification.open({
message: "提示",
description: messge,
onClick: () => {
console.log('Notification Clicked12312313123!');
},
});
}
openNotifications = (btn) => {
// type 1 成功提示绿色 2提醒颜色黄色 3错误提示红色
notification.open({
message: "提示",
description: btn,
onClick: () => {
},
});
}
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 if (response.data.message === "登录密码出错已达上限,账号已被锁定, 请10分钟后重新登录或找回密码") {
const messge = (
<div>
<p>
登录密码出错已达上限账号已被锁定
</p>
<p className="mt10">
请10分钟后重新登录或<a href={'/changepassword'} style={{
textDecoration: "underline",
color: "#4CACFF",
}}>找回密码</a>
</p>
</div>
)
this.openNotifications(messge);
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:"注册成功"
})
};
openweixinlogin=()=>{
this.setState({
weixinlogin:true
})
}
hideweixinlogin=()=>{
this.setState({
weixinlogin:false,
qqlogin:false,
tab:["0"]
})
}
openqqlogin=()=>{
this.setState({
qqlogin:true
})
//window.location.href=`https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101508858&redirect_uri=https%3a%2f%2f${window.location.host}%2otherloginqq&response_type=code`
window.location.href=`https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101508858&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginqq&state=null,${window.location.host}&response_type=code`
// window.location.href=`https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101508858&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginstart&tp=qq&response_type=code`
}
openphoneqqlogin=()=>{
window.open(
`https://xui.ptlogin2.qq.com/cgi-bin/xlogin?appid=716027609&pt_3rd_aid=101508858&daid=383&pt_skey_valid=0&style=35&s_url=http%3A%2F%2Fconnect.qq.com&refer_cgi=authorize&which=&client_id=101508858&response_type=code&scope=get_user_info&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginqq&state=null,${window.location.host}&response_type=code`
)
}
render() {
const {
// 登录
autoLogin,
classpass,
passopens,
seconds,
getverificationcodes,
Agreetotheterms,
Phonenumberisnotco,
Phonenumberisnotcos,
codes,
tab,
dragOk,
Whethertoverify,
classpassbool,
Phonenumberisnotcosytdhk,
Phonenumberisnotcosyzm,
Phonenumberisnotcosymmm,
Phonenumberisnotcodmm,
// 注册
readAgreement,
pciphone,
Phonenumberisnotcodmms,
weixinlogin
} = this.state
// height: 346px;
if (this.state.seconds === 0) {
// window.location.href='http://www.cnblogs.com/a-cat/';
}
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>
{weixinlogin===false?<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>:""}
{
weixinlogin===false&&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'}}
onPressEnter={() => this.postLogin()}
></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}
onPressEnter={() => this.postLogin()}
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>
{this.props.user&&this.props.user.main_site===true?this.state.isphone===true?<p className="clearfix mb10 textcenter">
<span className={"startlogin"}> 快速登录 </span>
<div className={"mt10"}>
<a onClick={()=>this.openweixinlogin()}>
<img src={require('./img/WeChat.png')} alt="微信登录"/>
</a>
<a onClick={()=>this.openqqlogin()} className={"ml10"}>
<img src={require('./img/qq.png')} alt="qq登录"/>
</a>
</div>
</p>:<p className="clearfix mb10 textcenter">
<span className={"startlogin"}> 快速登录 </span>
<div className={"mt10"}>
{/*<a onClick={()=>this.openweixinlogin()}>*/}
{/*<img src={require('./WeChat.png')} alt="微信登录"/>*/}
{/*</a>*/}
<a onClick={()=>this.openphoneqqlogin()}>
<img src={require('./img/qq.png')} alt="qq登录"/>
</a>
</div>
</p>:""}
</div>
}
{
weixinlogin===false&&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;
}
.ant-input-group-addon{
background-color: #fff;s
}
.ant-input-group .ant-input:hover {
z-index: 0 !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={'https://forge.educoder.net/help?index=4'} target="_blank" className={"color-blue"}>服务协议条款</a>
</span></span></Checkbox>
<Button className=" font-16 mb20" type="primary" style={{height:"46px", width: "100%",marginTop:"26px"}} onClick={() => this.postregistered()}
size={"large"}>注册</Button>
{this.props.user&&this.props.user.main_site===true?this.state.isphone===true?<p className="clearfix mb10 textcenter">
<span className={"startlogin"}> 快速登录 </span>
<div className={"mt10"}>
<a onClick={()=>this.openweixinlogin()}>
<img src={require('./img/WeChat.png')} alt="微信登录"/>
</a>
<a onClick={()=>this.openqqlogin()} className={"ml10"}>
<img src={require('./img/qq.png')} alt="qq登录"/>
</a>
</div>
</p>:<p className="clearfix mb10 textcenter">
<span className={"startlogin"}> 快速登录 </span>
<div className={"mt10"}>
{/*<a onClick={()=>this.openweixinlogin()}>*/}
{/*<img src={require('./WeChat.png')} alt="微信登录"/>*/}
{/*</a>*/}
<a onClick={()=>this.openphoneqqlogin()}>
<img src={require('./img/qq.png')} alt="qq登录"/>
</a>
</div>
</p>:""
}
</div>
}
{weixinlogin===true?<iframe
className={"weixinheight390 mt20"}
frameBorder="0"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
scrolling="no"
src={`https://open.weixin.qq.com/connect/qrconnect?appid=wx6b119e2d829c13fa&redirect_uri=https%3a%2f%2fwww.educoder.net%2fotherloginstart&response_type=code&scope=snsapi_login&state=null,${window.location.host}#wechat_redirect`}></iframe>:""}
{weixinlogin===true?<p className="clearfix mb20 textcenter">
<a className={"startlogin color-blue"} onClick={()=>this.hideweixinlogin()}>返回登录注册</a>
</p>:""}
</div>
</div>
);
}
}
export default (LoginRegisterComponent);