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.
127 lines
3.6 KiB
127 lines
3.6 KiB
import React, { Component } from 'react'; |
|
|
|
export default class Code extends Component { |
|
constructor(props) { |
|
super(props); |
|
this.state = { |
|
auth_code1: '', |
|
auth_code2: '', |
|
auth_code3: '', |
|
auth_code4: '', |
|
flag: false, |
|
} |
|
} |
|
|
|
flagSetter = () => { |
|
this.setState({ |
|
flag: true, |
|
}) |
|
} |
|
|
|
changeValue = (e) => { |
|
if (e.target.value.match("^[0-9]{1}$")) { |
|
this.setState({ |
|
[e.target.name]: e.target.value, |
|
}) |
|
if(e.target.name === 'auth_code1'){ |
|
this.setState({o1:e.target.value}) |
|
this.inputRef2.focus(); |
|
}else if(e.target.name === 'auth_code2'){ |
|
this.setState({o2:e.target.value}) |
|
this.inputRef3.focus(); |
|
}else if(e.target.name === 'auth_code3'){ |
|
this.setState({o3:e.target.value}) |
|
this.inputRef4.focus(); |
|
}else if(e.target.name === 'auth_code4'){ |
|
const o4 = e.target.value; |
|
const {o1,o2,o3} = this.state |
|
this.props.parent.setState({otp:`${o1}${o2}${o3}${o4}`}) |
|
return; |
|
|
|
} |
|
} else{ |
|
return; |
|
} |
|
} |
|
|
|
keyboardEvent = (e) => { |
|
if (e.keyCode === 8) { |
|
this.setState({ |
|
[e.target.name]: '', |
|
}); |
|
if(e.target.name === 'auth_code1'){ |
|
return; |
|
}else if(e.target.name === 'auth_code2'){ |
|
this.inputRef1.focus(); |
|
return; |
|
}else if(e.target.name === 'auth_code3'){ |
|
this.inputRef2.focus(); |
|
return; |
|
}else if(e.target.name === 'auth_code4'){ |
|
this.inputRef3.focus(); |
|
return; |
|
} |
|
} |
|
} |
|
|
|
componentDidMount() { |
|
this.inputRef1.focus(); |
|
} |
|
|
|
render() { |
|
return( |
|
<> |
|
<div className="login-code__top d-flex flex-column"> |
|
<div>میخوام مطمئن شم که خودتی</div> |
|
<p>کد تایید رو برات فرستادم. اینجا واردش کن</p> |
|
</div> |
|
<div className="login-code__bottom d-flex"> |
|
<input |
|
name="auth_code1" |
|
type="number" |
|
onChange={(e) => this.changeValue(e)} |
|
maxLength="1" |
|
ref={(input) => { this.inputRef1 = input }} |
|
autoComplete="false" |
|
value={this.state.auth_code1} |
|
onKeyDown={e => this.keyboardEvent(e)} |
|
/> |
|
<input |
|
name="auth_code2" |
|
type="number" |
|
onChange={(e) => this.changeValue(e)} |
|
maxLength="1" |
|
ref={(input) => { this.inputRef2 = input }} |
|
autoComplete="false" |
|
value={this.state.auth_code2} |
|
onKeyDown={e => this.keyboardEvent(e)} |
|
/> |
|
<input |
|
name="auth_code3" |
|
type="number" |
|
onChange={(e) => this.changeValue(e)} |
|
maxLength="1" |
|
ref={(input) => { this.inputRef3 = input }} |
|
autoComplete="false" |
|
value={this.state.auth_code3} |
|
onKeyDown={e => this.keyboardEvent(e)} |
|
/> |
|
<input |
|
name="auth_code4" |
|
type="number" |
|
onChange={(e) => this.changeValue(e)} |
|
maxLength="1" |
|
ref={(input) => { this.inputRef4 = input }} |
|
autoComplete="false" |
|
value={this.state.auth_code4} |
|
onKeyDown={e => this.keyboardEvent(e)} |
|
/> |
|
<div className="logo__footer d-flex align-self-center"> |
|
<h2 style={{fontFamily : 'IRANSansNumeralBold',marginRight : 10, color : "rgb(108, 72, 191)"}}>Eema</h2> |
|
<h2 style={{fontSize :17, color : "rgb(108, 72, 191)"}}>Entertainments</h2> |
|
</div> |
|
</div> |
|
</> |
|
); |
|
} |
|
} |