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

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