update : otp handler
This commit is contained in:
enggar_ganteng
parent
06f7a633ce
commit
a1142a6b04
|
|
@ -19,9 +19,9 @@ import InputAdornment from '@material-ui/core/InputAdornment';
|
|||
import IconButton from '@material-ui/core/IconButton';
|
||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||
import Snackbar from '@material-ui/core/Snackbar';
|
||||
|
||||
import Text from 'material-ui/TextField';
|
||||
|
||||
import moment from 'moment';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {LINKS} from "../../routes";
|
||||
|
|
@ -30,6 +30,8 @@ import {LINKS} from "../../routes";
|
|||
@observer
|
||||
class OtpPage extends React.Component{
|
||||
otp = [];
|
||||
urlParams = new URLSearchParams(window.location.search);
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
|
|
@ -42,7 +44,10 @@ class OtpPage extends React.Component{
|
|||
isNeedEmailVerification: false,
|
||||
otp: [],
|
||||
otpText : "",
|
||||
isResending: false
|
||||
otpData : {},
|
||||
isResending: false,
|
||||
isOtpExpired : false,
|
||||
isOtpWrong: false,
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.authStore = props.appstate.auth;
|
||||
|
|
@ -50,7 +55,27 @@ class OtpPage extends React.Component{
|
|||
|
||||
componentDidMount(){
|
||||
this.otp[0].focus();
|
||||
console.log("otp",this.otp);
|
||||
if(this.urlParams.has('login_request_id') && this.urlParams.has('expired_at')) {
|
||||
console.log(this.urlParams);
|
||||
this.setState({
|
||||
otpData:{
|
||||
login_request_id : urlParams.get('login_request_id'),
|
||||
expired_at : urlParams.get('expired_at')
|
||||
}
|
||||
});
|
||||
}
|
||||
else{
|
||||
this.setState({otpData:this.authStore.otpData});
|
||||
}
|
||||
}
|
||||
|
||||
checkIsExpired(){
|
||||
console.log(Date.parse(Date().toISOString()),this.state.otpData.expired_at);
|
||||
if(Date.parse(Date().toISOString()) < Date.parse(this.state.otpData.expired_at)){
|
||||
return false;
|
||||
}else{
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = name => event => {
|
||||
|
|
@ -67,31 +92,58 @@ class OtpPage extends React.Component{
|
|||
}
|
||||
|
||||
login = () => {
|
||||
console.log("otpText",this.state.otpText);
|
||||
let data = {
|
||||
code : this.state.otpText,
|
||||
login_request_id : this.state.otpData.login_request_id
|
||||
}
|
||||
console.log("data",data);
|
||||
this.setState({isLoading:true});
|
||||
setTimeout(()=>{
|
||||
this.setState({isLoading:false});
|
||||
},1000);
|
||||
// this.authStore.login(data).then(res => {
|
||||
// if(!res.need_email_verification){
|
||||
// setTimeout(()=>{
|
||||
// this.props.history.push(LINKS.DASHBOARD);
|
||||
// this.setState({isLoading:false});
|
||||
// },1000);
|
||||
// }
|
||||
// else{
|
||||
// this.setState({isNeedEmailVerification:true});
|
||||
// }
|
||||
// }).catch(err => {
|
||||
// this.setState({loginFailed:true,isLoading:false});
|
||||
// setTimeout(()=>this.setState({loginFailed:false}),3000);
|
||||
// });
|
||||
};
|
||||
// if(this.checkIsExpired){
|
||||
// this.setState({isOtpExpired:true});
|
||||
// setTimeout(()=>{
|
||||
// this.setState({isOtpExpired:false});
|
||||
// },2000);
|
||||
// }
|
||||
// else{
|
||||
this.authStore.validateOtp(data).then(res=>{
|
||||
setTimeout(()=>{
|
||||
this.props.history.push(LINKS.DASHBOARD);
|
||||
this.setState({isLoading:false});
|
||||
},1000);
|
||||
}).catch(err=>{
|
||||
setTimeout(()=>{
|
||||
this.setState({isLoading:false,isOtpWrong:true});
|
||||
},2000);
|
||||
setTimeout(()=>{
|
||||
this.setState({isOtpWrong:false});
|
||||
},4000)
|
||||
});
|
||||
// }
|
||||
|
||||
};
|
||||
|
||||
render(){
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
<div className={classes.container}>
|
||||
<Snackbar
|
||||
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
|
||||
open={this.state.isOtpWrong}
|
||||
onClose={()=>this.setState({isOtpWrong:false})}
|
||||
ContentProps={{
|
||||
'aria-describedby': 'message-id',
|
||||
}}
|
||||
message={<span id="message-id">Wrong OTP code</span>}
|
||||
/>
|
||||
<Snackbar
|
||||
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
|
||||
open={this.state.isOtpExpired}
|
||||
onClose={()=>this.setState({isOtpExpired:false})}
|
||||
ContentProps={{
|
||||
'aria-describedby': 'message-id',
|
||||
}}
|
||||
message={<span id="message-id">Your OTP code has expired</span>}
|
||||
/>
|
||||
<Snackbar
|
||||
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
|
||||
open={this.state.isResending}
|
||||
|
|
@ -129,7 +181,7 @@ class OtpPage extends React.Component{
|
|||
<Grid container justify="center" spacing={8}>
|
||||
{[0, 1, 2, 3, 4, 5].map(x => (
|
||||
<Grid item xs={1}>
|
||||
<Text onChange={event=>this.setState({otpText:this.state.otpText+event.target.value})} autoFocus={true} ref={(input) => { this.otp[x] = input; }} key={x} id={x} inputStyle={{textAlign:'center'}} style={{width:'100%'}} type="tel" maxlength="1"/>
|
||||
<Text onChange={event=>this.setState({otpText:this.state.otpText+event.target.value})} autoFocus={true} ref={(input) => { this.otp[x] = input; }} key={x} id={x} inputStyle={{textAlign:'center'}} style={{width:'100%'}} type="tel" maxLength="1"/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user