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.
142 lines
3.8 KiB
142 lines
3.8 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> |
|
</> |
|
); |
|
} |
|
}
|
|
|