feat: translate, fix otp

This commit is contained in:
ahmadzuhdi 2019-02-01 14:14:30 +07:00
parent a4974f0bb0
commit 2cf1761b80
3 changed files with 64 additions and 52 deletions

View File

@ -95,7 +95,7 @@ class OtpPage extends React.Component{
let data = {
code : this.state.otpText,
login_request_id : this.state.otpData.login_request_id
}
};
console.log("data",data);
this.setState({isLoading:true});
// if(this.checkIsExpired){
@ -105,19 +105,19 @@ class OtpPage extends React.Component{
// },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)
});
// 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)
// });
// }
};
@ -133,7 +133,7 @@ class OtpPage extends React.Component{
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">Wrong OTP code</span>}
message={<span id="message-id">Kode OTP Salah</span>}
/>
<Snackbar
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
@ -142,7 +142,7 @@ class OtpPage extends React.Component{
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">Your OTP code has expired</span>}
message={<span id="message-id">Kode OTP sudah tidak berlaku</span>}
/>
<Snackbar
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
@ -151,7 +151,7 @@ class OtpPage extends React.Component{
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">OTP Code Re-sended</span>}
message={<span id="message-id">Kode OTP sudah di kirim ulang</span>}
/>
<Grid container spacing={0} className={classes.gridContainer}>
<Grid item xs={12} className={classes.logoContainer}>
@ -162,37 +162,48 @@ class OtpPage extends React.Component{
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
<Paper className={classes.formRegister}>
<Typography variant="h6" gutterBottom>
Input Your OTP Code
</Typography>
<Typography variant="subtitle2" gutterBottom>
Still not received OTP Code? <a onClick={()=>this.resendCode()}>Resend Code</a>
Masukkan Kode OTP Anda
</Typography>
{/*<Typography variant="subtitle2" gutterBottom>*/}
{/*Still not received OTP Code? <a onClick={()=>this.resendCode()}>Resend Code</a>*/}
{/*</Typography>*/}
<Grid container justify="center" spacing={8}>
{[0, 1, 2, 3, 4, 5].map(x => (
<Grid item xs={1}>
<Text onChange={event => {
<Text
onKeyDown={event => {
if (event.keyCode === 8 && x > 0 && event.target.value.length === 0) {
this.otp[x-1].focus();
}
}}
onChange={event => {
// console.log(event);
if (event.target.value !== '') {
this.setState({otpText:this.state.otpText+event.target.value}, () => {
if (x < 5) {
this.otp[x+1].focus();
} else {
this.login();
}
});
} else {
const otpText = this.state.otpText.split("");
otpText[x] = "";
this.setState({otpText:otpText.join("")});
}
if (event.target.value !== '') {
this.setState({otpText:this.state.otpText+event.target.value}, () => {
if (x < 5) {
this.otp[x+1].focus();
} else {
this.login();
}
});
} else {
const otpText = this.state.otpText.split("");
otpText[x] = "";
this.setState({otpText:otpText.join("")});
}
}} autoFocus={x === 0} ref={(input) => { this.otp[x] = input; }} key={x} id={x} inputStyle={{textAlign:'center'}} style={{width:'100%'}} type="tel" maxLength="1"/>
}}
autoFocus={x === 0}
ref={(input) => { this.otp[x] = input; }}
key={x}
id={x}
inputStyle={{textAlign:'center'}} style={{width:'100%'}} type="tel" maxLength="1"/>
</Grid>
))}
</Grid>
<div style={{padding : 5,marginTop : 20}}>
<Button onClick={() => this.login()} fullWidth variant="contained" style={{background:'#ffeb3b'}} disabled={this.state.otpText.length < 6}>
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign In"}
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Konfirmasi"}
</Button>
</div>
</Paper>

View File

@ -75,31 +75,32 @@ export default class RegisterCompletedComponent extends React.Component{
<Grid item xs={6}>
<img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
<Typography style={{color : '#FFF'}} variant={"h6"}>
Welcome to BTN Points
Selamat Datang di BTN Point
</Typography>
<Typography style={{color : '#FFF'}} variant={"subtitle2"}>
Sign in to get various voucher and items
Daftar untuk mendapatkan berbagai macam manfaat dan keuntungan
</Typography>
</Grid>
</Hidden>
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
<Paper className={classes.formRegister}>
<Typography variant="h6" gutterBottom>
Registration Completed
Pendaftaran Berhasil
</Typography>
<Typography variant="body1" gutterBottom>
We have sent an email with a confirmation link to your email address. Please allow 5-10 minutes for this message to arrive.
Kami telah mengirim sebuah surat elektronik yang berisi tautan untuk konfirmasi pendaftaran ke email anda, harap menunggu 5 sampai 10 menit untuk surat sampai
{/*We have sent an email with a confirmation link to your email address. Please allow 5-10 minutes for this message to arrive.*/}
</Typography>
<div style={{padding : 5,marginTop : 20}}>
{/*<div style={{padding : 5,marginTop : 20}}>*/}
<Link
to={LINKS.LOGIN}>
<Button fullWidth variant="contained" style={{background:'#ffeb3b'}}>
Back to Login
</Button>
</Link>
</div>
{/*<Link*/}
{/*to={LINKS.LOGIN}>*/}
{/*<Button fullWidth variant="contained" style={{background:'#ffeb3b'}}>*/}
{/*Back to Login*/}
{/*</Button>*/}
{/*</Link>*/}
{/*</div>*/}
</Paper>
</Grid>

View File

@ -300,10 +300,10 @@ class RegisterPage extends React.Component {
<Grid item xs={5}>
<img src={require('../../../../assets/images/register_image_2.png')} width={"80%"} />
<Typography style={{ color: '#FFF' }} variant={"h6"}>
Redeem point, Get Your Item!
Tukarkan point!
</Typography>
<Typography style={{ color: '#FFF' }} variant={"subtitle2"}>
Get promo and benefits with BTN
Dapatkan promo dan keuntungan dengan BTN
</Typography>
</Grid>
</Hidden>