|
|
|
|
@ -1,429 +1,431 @@
|
|
|
|
|
import React, {Component} from 'react';
|
|
|
|
|
|
|
|
|
|
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
|
|
|
|
|
|
|
|
|
|
import {getImageUrl, DragValidator} from 'educoder';
|
|
|
|
|
import {Tabs, Input, Checkbox, Button, notification} from 'antd';
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import './common.css'
|
|
|
|
|
|
|
|
|
|
const TabPane = Tabs.TabPane
|
|
|
|
|
const loginInputsyl = {
|
|
|
|
|
"width": " 100%",
|
|
|
|
|
"height": "40px",
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//父组件 EducoderLogin.js
|
|
|
|
|
class LoginRegisterComponent extends Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
this.state = {
|
|
|
|
|
login: "",
|
|
|
|
|
password: "",
|
|
|
|
|
passwords: "",
|
|
|
|
|
seconds: 60,
|
|
|
|
|
codes: "",
|
|
|
|
|
getverificationcodes: true,
|
|
|
|
|
Phonenumberisnotco: undefined,
|
|
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
s: 'text',
|
|
|
|
|
classpass: "text",
|
|
|
|
|
readonlyInput: true,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
openNotification = (messge) => {
|
|
|
|
|
notification.open({
|
|
|
|
|
message: "提示",
|
|
|
|
|
description:
|
|
|
|
|
messge,
|
|
|
|
|
onClick: () => {
|
|
|
|
|
console.log('Notification Clicked!');
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
StudyMakeMoney = () => { // 调用父组件方法
|
|
|
|
|
this.props.Setshowbool();
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点击表单后，改变type
|
|
|
|
|
changeType = () => {
|
|
|
|
|
this.setState({classpass: 'password'});
|
|
|
|
|
}
|
|
|
|
|
changeTypey = () => {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//倒计时
|
|
|
|
|
getverificationcode = () => {
|
|
|
|
|
if (this.state.Phonenumberisnotcobool === false) {
|
|
|
|
|
if (this.state.login.length === 0) {
|
|
|
|
|
this.openNotification("请输入手机号或邮箱");
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//短信验证
|
|
|
|
|
SMSverification = () => {
|
|
|
|
|
var url = `/accounts/get_verification_code.json`;
|
|
|
|
|
axios.get((url), {
|
|
|
|
|
params: {
|
|
|
|
|
login: this.state.login,
|
|
|
|
|
type: 2,
|
|
|
|
|
}
|
|
|
|
|
}).then((result) => {
|
|
|
|
|
//验证有问题{"status":1,"message":"success"}
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
console.log(error);
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
cancelReadOnly = () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
readonlyInput: false,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
//找回密码
|
|
|
|
|
Retrievepassword = () => {
|
|
|
|
|
if (this.state.Phonenumberisnotcobool === false) {
|
|
|
|
|
if (this.state.login.length === 0) {
|
|
|
|
|
this.openNotification("请输入手机号或邮箱");
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.openNotification("请输入正确的手机号或邮箱");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.state.login === undefined || this.state.login == "") {
|
|
|
|
|
this.openNotification(`请输入登录手机号码或邮箱`);
|
|
|
|
|
return
|
|
|
|
|
} else if (this.state.password === undefined || this.state.password == "") {
|
|
|
|
|
this.openNotification(`请输入密码`);
|
|
|
|
|
return
|
|
|
|
|
} else if (this.state.passwords === undefined || this.state.passwords == "") {
|
|
|
|
|
this.openNotification(`请输入密码`);
|
|
|
|
|
return
|
|
|
|
|
} else if (this.state.password !== this.state.passwords) {
|
|
|
|
|
this.openNotification(`两次密码不相同`);
|
|
|
|
|
return
|
|
|
|
|
} else if (this.state.codes === undefined || this.state.codes == "") {
|
|
|
|
|
this.openNotification(`请输入验证码`);
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
var url = "/accounts/reset_password.json";
|
|
|
|
|
axios.post(url, {
|
|
|
|
|
login: this.state.login,
|
|
|
|
|
code: this.state.codes,
|
|
|
|
|
new_password: this.state.password,
|
|
|
|
|
new_password_confirmation: this.state.passwords,
|
|
|
|
|
}).then((result) => {
|
|
|
|
|
// console.log(result);
|
|
|
|
|
//登录成功，会生成session
|
|
|
|
|
this.openNotification("找回密码成功，请重新登入。");
|
|
|
|
|
window.location.href = "/login"
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
openNotification = (messge) => {
|
|
|
|
|
notification.open({
|
|
|
|
|
message: "提示",
|
|
|
|
|
description:
|
|
|
|
|
messge,
|
|
|
|
|
onClick: () => {
|
|
|
|
|
console.log('Notification Clicked!');
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
loginInputonChange = (e) => {
|
|
|
|
|
// console.log(e.target.value);
|
|
|
|
|
this.setState({
|
|
|
|
|
login: e.target.value,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
loginInputonChanges = (e) => {
|
|
|
|
|
// console.log(e.target.value);
|
|
|
|
|
this.setState({
|
|
|
|
|
password: e.target.value,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
loginInputonChangess = (e) => {
|
|
|
|
|
// console.log(e.target.value);
|
|
|
|
|
this.setState({
|
|
|
|
|
passwords: e.target.value,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//获取code
|
|
|
|
|
codesonChange = (e) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
codes: e.target.value
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
inputOnBlur = (e) => {
|
|
|
|
|
this.isCorrectname(e.target.value);
|
|
|
|
|
// this.Emailphonenumberverification(e.target.value, id);
|
|
|
|
|
}
|
|
|
|
|
isCorrectname = (value) => {
|
|
|
|
|
console.log(value.length);
|
|
|
|
|
if (value.length === 0) {
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: undefined,
|
|
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
})
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// var telephone = $("#telephoneAdd.tianjia_phone").val();
|
|
|
|
|
var regph = /^[1][3,4,5,6,7,8][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(value)) {
|
|
|
|
|
stringdata = "手机号格式不正确";
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: stringdata,
|
|
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: undefined,
|
|
|
|
|
Phonenumberisnotcobool: true,
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!regemail.test(value)) {
|
|
|
|
|
if ((value.indexOf("@") != -1) === true) {
|
|
|
|
|
stringdata = "邮箱格式不正确";
|
|
|
|
|
} else {
|
|
|
|
|
stringdata = "手机号格式不正确";
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: stringdata,
|
|
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
this.Emailphonenumberverification(value)
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: undefined,
|
|
|
|
|
Phonenumberisnotcobool: true,
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//邮箱手机号验证
|
|
|
|
|
Emailphonenumberverification = (value) => {
|
|
|
|
|
var url = `/accounts/valid_email_and_phone.json`;
|
|
|
|
|
axios.get((url), {
|
|
|
|
|
params: {
|
|
|
|
|
login: value,
|
|
|
|
|
type: 2,
|
|
|
|
|
}
|
|
|
|
|
}).then((result) => {
|
|
|
|
|
//验证有问题{"status":1,"message":"success"}
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
console.log(error);
|
|
|
|
|
// this.setState({
|
|
|
|
|
// login:"",
|
|
|
|
|
// logins:"",
|
|
|
|
|
// })
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const {
|
|
|
|
|
activeKey,
|
|
|
|
|
// 登录
|
|
|
|
|
autoLogin,
|
|
|
|
|
// 注册
|
|
|
|
|
readAgreement, dragOk,
|
|
|
|
|
login,
|
|
|
|
|
password,
|
|
|
|
|
passwords,
|
|
|
|
|
classpass,
|
|
|
|
|
seconds,
|
|
|
|
|
getverificationcodes,
|
|
|
|
|
Phonenumberisnotco,
|
|
|
|
|
readonlyInput,
|
|
|
|
|
codes,
|
|
|
|
|
} = this.state
|
|
|
|
|
// height: 346px;
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
|
|
<div className="login_register_content">
|
|
|
|
|
<Input type="text" name="username" value={"namename"}
|
|
|
|
|
style={{height: '0', width: '0', border: 'none', display: "none"}}/>
|
|
|
|
|
<Input type="password" name="password" id="password" value={"123123123"}
|
|
|
|
|
style={{height: '0', width: '0', border: 'none', display: "none"}}/>
|
|
|
|
|
<style>{`
|
|
|
|
|
|
|
|
|
|
.login_section .section_header {
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-bottom: 1px solid rgb(234, 234, 234);
|
|
|
|
|
height: 72px;
|
|
|
|
|
color: #05101A;
|
|
|
|
|
line-height: 73px;
|
|
|
|
|
}
|
|
|
|
|
`}</style>
|
|
|
|
|
|
|
|
|
|
<div className="login_section">
|
|
|
|
|
<div className="section_header">
|
|
|
|
|
找回密码
|
|
|
|
|
</div>
|
|
|
|
|
<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;
|
|
|
|
|
}
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<Input style={loginInputsyl} type="text" autoComplete="off" onClick={this.changeTypey}
|
|
|
|
|
placeholder="输入注册手机号或邮箱" value={this.state.login} onBlur={(e) => this.inputOnBlur(e)}
|
|
|
|
|
onChange={this.loginInputonChange} style={{marginTop: '10px'}}></Input>
|
|
|
|
|
{
|
|
|
|
|
Phonenumberisnotco && Phonenumberisnotco != "" ?
|
|
|
|
|
<p className="color-red mt5 mb5" style={{width: " 100%", height: "20px"}}>
|
|
|
|
|
<span>{Phonenumberisnotco}</span>
|
|
|
|
|
</p>
|
|
|
|
|
: <div className="mt10 mb10"></div>
|
|
|
|
|
}
|
|
|
|
|
<DragValidator
|
|
|
|
|
height={38} className="loginInput" successGreenColor="#45E15F"
|
|
|
|
|
dragOkCallback={this.dragOkCallback}
|
|
|
|
|
></DragValidator>
|
|
|
|
|
<Input className="loginInput mb20" type={classpass}
|
|
|
|
|
onClick={this.changeType} autoComplete="new-password" onChange={this.loginInputonChanges}
|
|
|
|
|
value={this.state.password} placeholder="输入8~16位密码，区分大小写"></Input>
|
|
|
|
|
<Input className="loginInput mb20" type={classpass}
|
|
|
|
|
onClick={this.changeType} autoComplete="new-password"
|
|
|
|
|
onChange={this.loginInputonChangess} value={this.state.passwords}
|
|
|
|
|
placeholder="再次输入新密码"></Input>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<Input className="fl mr5" type="text" autoComplete="off" style={{
|
|
|
|
|
"width": "210px",
|
|
|
|
|
"margin-bottom": "16px",
|
|
|
|
|
"height": "38px",
|
|
|
|
|
}} placeholder="请输入验证码"
|
|
|
|
|
onChange={this.codesonChange}
|
|
|
|
|
value={codes}
|
|
|
|
|
>
|
|
|
|
|
</Input>
|
|
|
|
|
{
|
|
|
|
|
getverificationcodes === undefined ?
|
|
|
|
|
<Button className="fl ml5 " disabled
|
|
|
|
|
style={{"width": "120px", "text-align": "center", "height": "38px",}}
|
|
|
|
|
size={"large"}>重新发送{seconds}s</Button>
|
|
|
|
|
: getverificationcodes === true ?
|
|
|
|
|
<Button className="fl ml5 "
|
|
|
|
|
style={{"width": "120px", "text-align": "center", "height": "38px"}}
|
|
|
|
|
type="primary"
|
|
|
|
|
onClick={() => this.getverificationcode()} size={"large"}>验证码</Button>
|
|
|
|
|
:
|
|
|
|
|
<Button className="fl ml5 "
|
|
|
|
|
style={{"width": "120px", "text-align": "center", "height": "38px"}}
|
|
|
|
|
type="primary"
|
|
|
|
|
onClick={() => this.getverificationcode()} size={"large"}>重新发送</Button>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Button className="login_btn" size={"large"} type="primary"
|
|
|
|
|
onClick={this.Retrievepassword}>完成</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default (LoginRegisterComponent);
|
|
|
|
|
import React, {Component} from 'react';
|
|
|
|
|
|
|
|
|
|
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
|
|
|
|
|
|
|
|
|
|
import {getImageUrl, DragValidator} from 'educoder';
|
|
|
|
|
import {Tabs, Input, Checkbox, Button, notification} from 'antd';
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import './common.css'
|
|
|
|
|
|
|
|
|
|
const TabPane = Tabs.TabPane
|
|
|
|
|
const loginInputsyl = {
|
|
|
|
|
"width": " 100%",
|
|
|
|
|
"height": "40px",
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//父组件 EducoderLogin.js
|
|
|
|
|
class LoginRegisterComponent extends Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
this.state = {
|
|
|
|
|
login: "",
|
|
|
|
|
password: "",
|
|
|
|
|
passwords: "",
|
|
|
|
|
seconds: 60,
|
|
|
|
|
codes: "",
|
|
|
|
|
getverificationcodes: true,
|
|
|
|
|
Phonenumberisnotco: undefined,
|
|
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
s: 'text',
|
|
|
|
|
classpass: "text",
|
|
|
|
|
readonlyInput: true,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
openNotification = (messge) => {
|
|
|
|
|
notification.open({
|
|
|
|
|
message: "提示",
|
|
|
|
|
description:
|
|
|
|
|
messge,
|
|
|
|
|
onClick: () => {
|
|
|
|
|
console.log('Notification Clicked!');
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
StudyMakeMoney = () => { // 调用父组件方法
|
|
|
|
|
this.props.Setshowbool();
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点击表单后，改变type
|
|
|
|
|
changeType = () => {
|
|
|
|
|
this.setState({classpass: 'password'});
|
|
|
|
|
}
|
|
|
|
|
changeTypey = () => {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//倒计时
|
|
|
|
|
getverificationcode = () => {
|
|
|
|
|
if (this.state.Phonenumberisnotcobool === false ||this.state.Phonenumberisnotcobool === undefined) {
|
|
|
|
|
if (this.state.login&&this.state.login.length === 0) {
|
|
|
|
|
this.openNotification("请输入手机号或邮箱");
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//短信验证
|
|
|
|
|
SMSverification = () => {
|
|
|
|
|
var url = `/accounts/get_verification_code.json`;
|
|
|
|
|
axios.get((url), {
|
|
|
|
|
params: {
|
|
|
|
|
login: this.state.login,
|
|
|
|
|
type: 2,
|
|
|
|
|
}
|
|
|
|
|
}).then((result) => {
|
|
|
|
|
//验证有问题{"status":1,"message":"success"}
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
console.log(error);
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
cancelReadOnly = () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
readonlyInput: false,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
//找回密码
|
|
|
|
|
Retrievepassword = () => {
|
|
|
|
|
if (this.state.Phonenumberisnotcobool === false) {
|
|
|
|
|
if (this.state.login.length === 0) {
|
|
|
|
|
this.openNotification("请输入手机号或邮箱");
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.openNotification("请输入正确的手机号或邮箱");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.state.login === undefined || this.state.login == "") {
|
|
|
|
|
this.openNotification(`请输入登录手机号码或邮箱`);
|
|
|
|
|
return
|
|
|
|
|
} else if (this.state.password === undefined || this.state.password == "") {
|
|
|
|
|
this.openNotification(`请输入密码`);
|
|
|
|
|
return
|
|
|
|
|
} else if (this.state.passwords === undefined || this.state.passwords == "") {
|
|
|
|
|
this.openNotification(`请输入密码`);
|
|
|
|
|
return
|
|
|
|
|
} else if (this.state.password !== this.state.passwords) {
|
|
|
|
|
this.openNotification(`两次密码不相同`);
|
|
|
|
|
return
|
|
|
|
|
} else if (this.state.codes === undefined || this.state.codes == "") {
|
|
|
|
|
this.openNotification(`请输入验证码`);
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
var url = "/accounts/reset_password.json";
|
|
|
|
|
axios.post(url, {
|
|
|
|
|
login: this.state.login,
|
|
|
|
|
code: this.state.codes,
|
|
|
|
|
new_password: this.state.password,
|
|
|
|
|
new_password_confirmation: this.state.passwords,
|
|
|
|
|
}).then((result) => {
|
|
|
|
|
// console.log(result);
|
|
|
|
|
//登录成功，会生成session
|
|
|
|
|
this.openNotification("找回密码成功，请重新登入。");
|
|
|
|
|
window.location.href = "/login"
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
openNotification = (messge) => {
|
|
|
|
|
notification.open({
|
|
|
|
|
message: "提示",
|
|
|
|
|
description:
|
|
|
|
|
messge,
|
|
|
|
|
onClick: () => {
|
|
|
|
|
console.log('Notification Clicked!');
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
loginInputonChange = (e) => {
|
|
|
|
|
// console.log(e.target.value);
|
|
|
|
|
this.setState({
|
|
|
|
|
login: e.target.value,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
loginInputonChanges = (e) => {
|
|
|
|
|
// console.log(e.target.value);
|
|
|
|
|
this.setState({
|
|
|
|
|
password: e.target.value,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
loginInputonChangess = (e) => {
|
|
|
|
|
// console.log(e.target.value);
|
|
|
|
|
this.setState({
|
|
|
|
|
passwords: e.target.value,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//获取code
|
|
|
|
|
codesonChange = (e) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
codes: e.target.value
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
inputOnBlur = (e) => {
|
|
|
|
|
this.isCorrectname(e.target.value);
|
|
|
|
|
// this.Emailphonenumberverification(e.target.value, id);
|
|
|
|
|
}
|
|
|
|
|
isCorrectname = (value) => {
|
|
|
|
|
console.log(value.length);
|
|
|
|
|
if (value.length === 0) {
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: undefined,
|
|
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
})
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// var telephone = $("#telephoneAdd.tianjia_phone").val();
|
|
|
|
|
var regph = /^[1][3,4,5,6,7,8][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(value)) {
|
|
|
|
|
stringdata = "手机号格式不正确";
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: stringdata,
|
|
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: undefined,
|
|
|
|
|
Phonenumberisnotcobool: true,
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!regemail.test(value)) {
|
|
|
|
|
if ((value.indexOf("@") != -1) === true) {
|
|
|
|
|
stringdata = "邮箱格式不正确";
|
|
|
|
|
} else {
|
|
|
|
|
stringdata = "手机号格式不正确";
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: stringdata,
|
|
|
|
|
Phonenumberisnotcobool: false,
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
this.Emailphonenumberverification(value)
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
this.setState({
|
|
|
|
|
Phonenumberisnotco: undefined,
|
|
|
|
|
Phonenumberisnotcobool: true,
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//邮箱手机号验证
|
|
|
|
|
Emailphonenumberverification = (value) => {
|
|
|
|
|
var url = `/accounts/valid_email_and_phone.json`;
|
|
|
|
|
axios.get((url), {
|
|
|
|
|
params: {
|
|
|
|
|
login: value,
|
|
|
|
|
type: 2,
|
|
|
|
|
}
|
|
|
|
|
}).then((result) => {
|
|
|
|
|
//验证有问题{"status":1,"message":"success"}
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
console.log(error);
|
|
|
|
|
// this.setState({
|
|
|
|
|
// login:"",
|
|
|
|
|
// logins:"",
|
|
|
|
|
// })
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const {
|
|
|
|
|
activeKey,
|
|
|
|
|
// 登录
|
|
|
|
|
autoLogin,
|
|
|
|
|
// 注册
|
|
|
|
|
readAgreement, dragOk,
|
|
|
|
|
login,
|
|
|
|
|
password,
|
|
|
|
|
passwords,
|
|
|
|
|
classpass,
|
|
|
|
|
seconds,
|
|
|
|
|
getverificationcodes,
|
|
|
|
|
Phonenumberisnotco,
|
|
|
|
|
readonlyInput,
|
|
|
|
|
codes,
|
|
|
|
|
} = this.state
|
|
|
|
|
// height: 346px;
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
|
|
<div className="login_register_content" style={{height: "482px"}}>
|
|
|
|
|
<Input type="text" name="username" value={"namename"}
|
|
|
|
|
style={{height: '0', width: '0', border: 'none', display: "none"}}/>
|
|
|
|
|
<Input type="password" name="password" id="password" value={"123123123"}
|
|
|
|
|
style={{height: '0', width: '0', border: 'none', display: "none"}}/>
|
|
|
|
|
<style>{`
|
|
|
|
|
|
|
|
|
|
.login_section .section_header {
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-bottom: 1px solid rgb(234, 234, 234);
|
|
|
|
|
height: 69px;
|
|
|
|
|
color: #05101A;
|
|
|
|
|
line-height: 69px;
|
|
|
|
|
}
|
|
|
|
|
`}</style>
|
|
|
|
|
|
|
|
|
|
<div className="login_section">
|
|
|
|
|
<div className="section_header">
|
|
|
|
|
找回密码
|
|
|
|
|
</div>
|
|
|
|
|
<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;
|
|
|
|
|
}
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<Input style={loginInputsyl} type="text" autoComplete="off" onClick={this.changeTypey}
|
|
|
|
|
placeholder="输入注册手机号或邮箱" value={this.state.login} onBlur={(e) => this.inputOnBlur(e)}
|
|
|
|
|
onChange={this.loginInputonChange} style={{marginTop: '10px',height: "38px"}}></Input>
|
|
|
|
|
{
|
|
|
|
|
Phonenumberisnotco && Phonenumberisnotco != "" ?
|
|
|
|
|
<p className="color-red mt5 mb5" style={{width: " 100%", height: "20px"}}>
|
|
|
|
|
<span>{Phonenumberisnotco}</span>
|
|
|
|
|
</p>
|
|
|
|
|
: <div style={{height: "25px"}}></div>
|
|
|
|
|
}
|
|
|
|
|
<DragValidator
|
|
|
|
|
height={38} successGreenColor="#45E15F"
|
|
|
|
|
style={{height:"38px",width:"100%"}}
|
|
|
|
|
dragOkCallback={this.dragOkCallback}
|
|
|
|
|
></DragValidator>
|
|
|
|
|
<Input type={classpass}
|
|
|
|
|
onClick={this.changeType} autoComplete="new-password" onChange={this.loginInputonChanges}
|
|
|
|
|
value={this.state.password} style={{width:"100%",height:"38px",marginTop:'25px'}} placeholder="输入8~16位密码，区分大小写"></Input>
|
|
|
|
|
<Input type={classpass}
|
|
|
|
|
onClick={this.changeType} autoComplete="new-password"
|
|
|
|
|
onChange={this.loginInputonChangess} value={this.state.passwords}
|
|
|
|
|
style={{height:"38px",marginTop:'25px',width:"100%"}}
|
|
|
|
|
placeholder="再次输入新密码"></Input>
|
|
|
|
|
|
|
|
|
|
<div className={"mt25"}>
|
|
|
|
|
<Input className="fl mr5" type="text" autoComplete="off" style={{
|
|
|
|
|
width: "210px",
|
|
|
|
|
height: "38px",
|
|
|
|
|
}} placeholder="请输入验证码"
|
|
|
|
|
onChange={this.codesonChange}
|
|
|
|
|
value={codes}
|
|
|
|
|
>
|
|
|
|
|
</Input>
|
|
|
|
|
{
|
|
|
|
|
getverificationcodes === undefined ?
|
|
|
|
|
<Button className="fl ml5 " disabled
|
|
|
|
|
style={{"width": "120px", "text-align": "center", "height": "38px",}}
|
|
|
|
|
size={"large"}>重新发送{seconds}s</Button>
|
|
|
|
|
: getverificationcodes === true ?
|
|
|
|
|
<Button className="fl ml5 "
|
|
|
|
|
style={{"width": "120px", "text-align": "center", "height": "38px"}}
|
|
|
|
|
type="primary"
|
|
|
|
|
onClick={() => this.getverificationcode()} size={"large"}>获取验证码</Button>
|
|
|
|
|
:
|
|
|
|
|
<Button className="fl ml5 "
|
|
|
|
|
style={{"width": "120px", "text-align": "center", "height": "38px"}}
|
|
|
|
|
type="primary"
|
|
|
|
|
onClick={() => this.getverificationcode()} size={"large"}>重新发送</Button>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Button className="login_btn" size={"large"} type="primary"
|
|
|
|
|
style={{height:"46px"}}
|
|
|
|
|
onClick={this.Retrievepassword}>完成</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default (LoginRegisterComponent);
|
|
|
|
|
|
