@ -9,315 +9,315 @@ import './common.css'
const TabPane = Tabs . TabPane
const loginInputsyl = {
"width" : " 100%" ,
"height" : "40px" ,
"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 ( ) ;
}
// 点击表单后，
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);
//登录成功，
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);
this . openNotification ( "验证码已发送，请注意查收!" , 2 ) ;
} ) . 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 : " 482 px"} } >
< 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 > { `
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 ( ) ;
}
// 点击表单后，
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);
//登录成功，
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);
this . openNotification ( "验证码已发送，请注意查收!" , 2 ) ;
} ) . 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 : " 520 px"} } >
< 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 : 16 px ;
@ -329,104 +329,116 @@ class LoginRegisterComponent extends Component {
color : # 05101 A ;
line - height : 69 px ;
}
. loginInputzhuche {
width : 100 % ;
background - color : # fff ! important ;
height : 45 px ! important ;
padding : 5 px ;
}
` }</style>
< div className = "login_section" >
< div className = "section_header" >
找回密码
< / d i v >
< div style = { { width : '340px' } } >
< style >
{
`
< div className = "login_section" >
< div className = "section_header font-18" style = { { color : "#05101A" } } >
找回密码
< / d i v >
< 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 : 4 px 11 px ;
width : 100 % ;
height : 38 px ;
font - size : 14 px ;
line - height : 1.5 ;
color : rgba ( 0 , 0 , 0 , 0.65 ) ;
background - color : # fff ;
background - image : none ;
border : 1 px solid # d9d9d9 ;
border - radius : 4 px ;
- webkit - transition : all . 3 s ;
- o - transition : all . 3 s ;
transition : all . 3 s ;
}
`
}
< / s t y l e >
< 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" } } > < / I n p u t >
{
Phonenumberisnotco && Phonenumberisnotco != "" ?
< p className = "color-red mt5 mb5" style = { { width : " 100%" , height : "20px" } } >
< span className = "fl" style = { { textAlign : "center" , width : " 100%" } } > { Phonenumberisnotco } < / s p a n >
< / p >
: < div style = { { height : "25px" } } > < / d i v >
}
< DragValidator
height = { 38 } successGreenColor = "#45E15F"
style = { { height : "38px" , width : "100%" } }
dragOkCallback = { this . dragOkCallback }
> < / D r a g V a l i d a t o r >
< 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位密码， > < / I n p u t >
< Input type = { classpass }
onClick = { this . changeType } autoComplete = "new-password"
onChange = { this . loginInputonChangess } value = { this . state . passwords }
style = { { height : "38px" , marginTop : '25px' , width : "100%" } }
placeholder = "再次输入新密码" > < / I n p u t >
< div className = { "mt25" } >
< Input className = "fl mr5" type = "text" autoComplete = "off" style = { {
width : "210px" ,
height : "38px" ,
} } placeholder = "请输入验证码"
onChange = { this . codesonChange }
value = { codes }
>
< / I n p u t >
{
getverificationcodes === undefined ?
< Button className = "fl ml5 " disabled
style = { { "width" : "120px" , "text-align" : "center" , "height" : "38px" , } }
size = { "large" } > 重新发送 { seconds } s < / B u t t o n >
: getverificationcodes === true ?
< Button className = "fl ml5 "
style = { { "width" : "120px" , "text-align" : "center" , "height" : "38px" } }
type = "primary"
onClick = { ( ) => this . getverificationcode ( ) } size = { "large" } > 获取验证码 < / B u t t o n >
:
< Button className = "fl ml5 "
style = { { "width" : "120px" , "text-align" : "center" , "height" : "38px" } }
type = "primary"
onClick = { ( ) => this . getverificationcode ( ) } size = { "large" } > 重新发送 < / B u t t o n >
}
< / d i v >
< Button className = "login_btn" size = { "large" } type = "primary"
style = { { height : "46px" } }
onClick = { this . Retrievepassword } > 完成 < / B u t t o n >
< / d i v >
< / d i v >
< / d i v >
) ;
}
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 : 4 px 11 px ;
width : 100 % ;
height : 38 px ;
font - size : 14 px ;
line - height : 1.5 ;
color : rgba ( 0 , 0 , 0 , 0.65 ) ;
background - color : # fff ;
background - image : none ;
border : 1 px solid # d9d9d9 ;
border - radius : 4 px ;
- webkit - transition : all . 3 s ;
- o - transition : all . 3 s ;
transition : all . 3 s ;
}
`
}
< / s t y l e >
< Input style = { loginInputsyl } type = "text" autoComplete = "off" onClick = { this . changeTypey }
className = { "loginInputzhuche" }
placeholder = "输入注册手机号或邮箱" value = { this . state . login } onBlur = { ( e ) => this . inputOnBlur ( e ) }
onChange = { this . loginInputonChange } style = { { marginTop : '10px' , height : "38px" } } > < / I n p u t >
{
Phonenumberisnotco && Phonenumberisnotco != "" ?
< p className = "color-red mt5 mb5" style = { { width : " 100%" , height : "20px" } } >
< span className = "fl" style = { { textAlign : "center" , width : " 100%" } } > { Phonenumberisnotco } < / s p a n >
< / p >
: < div style = { { height : "25px" } } > < / d i v >
}
< DragValidator
height = { 38 } successGreenColor = "#45E15F"
style = { { height : "38px" , width : "100%" } }
dragOkCallback = { this . dragOkCallback }
> < / D r a g V a l i d a t o r >
< Input type = { classpass }
className = { "loginInputzhuche" }
onClick = { this . changeType } autoComplete = "new-password" onChange = { this . loginInputonChanges }
value = { this . state . password } style = { { width : "100%" , height : "38px" , marginTop : '25px' } }
placeholder = "输入8~16位密码， > < / I n p u t >
< Input type = { classpass }
className = { "loginInputzhuche" }
onClick = { this . changeType } autoComplete = "new-password"
onChange = { this . loginInputonChangess } value = { this . state . passwords }
style = { { height : "38px" , marginTop : '25px' , width : "100%" } }
placeholder = "再次输入新密码" > < / I n p u t >
< div className = { "mt25" } >
< Input className = "fl mr5 loginInputzhuche" type = "text" autoComplete = "off" style = { {
width : "210px" ,
height : "38px" ,
} } placeholder = "请输入验证码"
onChange = { this . codesonChange }
value = { codes }
>
< / I n p u t >
{
getverificationcodes === undefined ?
< Button className = "fl ml5 " disabled
style = { { "width" : "120px" , "text-align" : "center" , "height" : "45px" , } }
size = { "large" } > 重新发送 { seconds } s < / B u t t o n >
: getverificationcodes === true ?
< Button className = "fl ml5 "
style = { { "width" : "120px" , "text-align" : "center" , "height" : "45px" } }
type = "primary"
onClick = { ( ) => this . getverificationcode ( ) } size = { "large" } > 获取验证码 < / B u t t o n >
:
< Button className = "fl ml5 "
style = { { "width" : "120px" , "text-align" : "center" , "height" : "45px" } }
type = "primary"
onClick = { ( ) => this . getverificationcode ( ) } size = { "large" } > 重新发送 < / B u t t o n >
}
< / d i v >
< Button className = "login_btn" size = { "large" } type = "primary"
style = { { height : "46px" } }
onClick = { this . Retrievepassword } > 完成 < / B u t t o n >
< / d i v >
< / d i v >
< / d i v >
) ;
}
}
export default ( LoginRegisterComponent ) ;
