Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update : otp handler

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-29 15:48:28 +07:00
parent 06f7a633ce
commit a1142a6b04
1 changed files with 75 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/common/pages/Otp/index.js
View File

@ -19,9 +19,9 @@ import InputAdornment from '@material-ui/core/InputAdornment';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import CircularProgress from '@material-ui/core/CircularProgress'; import CircularProgress from '@material-ui/core/CircularProgress';
import Snackbar from '@material-ui/core/Snackbar'; import Snackbar from '@material-ui/core/Snackbar';
import Text from 'material-ui/TextField'; import Text from 'material-ui/TextField';
import moment from 'moment';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {inject, observer} from 'mobx-react'; import {inject, observer} from 'mobx-react';
import {LINKS} from "../../routes"; import {LINKS} from "../../routes";
@ -30,6 +30,8 @@ import {LINKS} from "../../routes";
@observer @observer
class OtpPage extends React.Component{ class OtpPage extends React.Component{
otp = []; otp = [];
urlParams = new URLSearchParams(window.location.search);
constructor(props) { constructor(props) {
super(props); super(props);
this.props = props; this.props = props;
@ -42,7 +44,10 @@ class OtpPage extends React.Component{
isNeedEmailVerification: false, isNeedEmailVerification: false,
otp: [], otp: [],
otpText : "", otpText : "",
isResending: false otpData : {},
isResending: false,
isOtpExpired : false,
isOtpWrong: false,
}; };
this.defaultState = Object.assign({}, this.state); this.defaultState = Object.assign({}, this.state);
this.authStore = props.appstate.auth; this.authStore = props.appstate.auth;
@ -50,7 +55,27 @@ class OtpPage extends React.Component{
componentDidMount(){ componentDidMount(){
this.otp[0].focus(); 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 => { handleChange = name => event => {
@ -67,31 +92,58 @@ class OtpPage extends React.Component{
} }
login = () => { 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}); this.setState({isLoading:true});
setTimeout(()=>{ // if(this.checkIsExpired){
this.setState({isLoading:false}); // this.setState({isOtpExpired:true});
},1000); // setTimeout(()=>{
// this.authStore.login(data).then(res => { // this.setState({isOtpExpired:false});
// if(!res.need_email_verification){ // },2000);
// setTimeout(()=>{ // }
// this.props.history.push(LINKS.DASHBOARD); // else{
// this.setState({isLoading:false}); this.authStore.validateOtp(data).then(res=>{
// },1000); setTimeout(()=>{
// } this.props.history.push(LINKS.DASHBOARD);
// else{ this.setState({isLoading:false});
// this.setState({isNeedEmailVerification:true}); },1000);
// } }).catch(err=>{
// }).catch(err => { setTimeout(()=>{
// this.setState({loginFailed:true,isLoading:false}); this.setState({isLoading:false,isOtpWrong:true});
// setTimeout(()=>this.setState({loginFailed:false}),3000); },2000);
// }); setTimeout(()=>{
}; this.setState({isOtpWrong:false});
},4000)
});
// }
};
render(){ render(){
const { classes } = this.props; const { classes } = this.props;
return ( return (
<div className={classes.container}> <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 <Snackbar
anchorOrigin={{ vertical : 'top', horizontal: 'center' }} anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
open={this.state.isResending} open={this.state.isResending}
@ -129,7 +181,7 @@ class OtpPage extends React.Component{
<Grid container justify="center" spacing={8}> <Grid container justify="center" spacing={8}>
{[0, 1, 2, 3, 4, 5].map(x => ( {[0, 1, 2, 3, 4, 5].map(x => (
<Grid item xs={1}> <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>
))} ))}
</Grid> </Grid>