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

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>
</>
);
}
}