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

Merge branch 'master' of gitlab.com:asacreative/redemption-point/new-frontend-customer-redemption-point

Browse Source
This commit is contained in:
enggar_ganteng 2019-02-01 15:01:58 +07:00
commit 2836995c66
3 changed files with 119 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,7 +95,7 @@ class OtpPage extends React.Component{
let data = { let data = {
code : this.state.otpText, code : this.state.otpText,
login_request_id : this.state.otpData.login_request_id login_request_id : this.state.otpData.login_request_id
} };
console.log("data",data); console.log("data",data);
this.setState({isLoading:true}); this.setState({isLoading:true});
// if(this.checkIsExpired){ // if(this.checkIsExpired){
@ -105,19 +105,19 @@ class OtpPage extends React.Component{
// },2000); // },2000);
// } // }
// else{ // else{
this.authStore.validateOtp(data).then(res=>{ // this.authStore.validateOtp(data).then(res=>{
setTimeout(()=>{ // setTimeout(()=>{
this.props.history.push(LINKS.DASHBOARD); // this.props.history.push(LINKS.DASHBOARD);
this.setState({isLoading:false}); // this.setState({isLoading:false});
},1000); // },1000);
}).catch(err=>{ // }).catch(err=>{
setTimeout(()=>{ // setTimeout(()=>{
this.setState({isLoading:false,isOtpWrong:true}); // this.setState({isLoading:false,isOtpWrong:true});
},2000); // },2000);
setTimeout(()=>{ // setTimeout(()=>{
this.setState({isOtpWrong:false}); // this.setState({isOtpWrong:false});
},4000) // },4000)
}); // });
// } // }
}; };
@ -133,7 +133,7 @@ class OtpPage extends React.Component{
ContentProps={{ ContentProps={{
'aria-describedby': 'message-id', 'aria-describedby': 'message-id',
}} }}
message={<span id="message-id">Wrong OTP code</span>} message={<span id="message-id">Kode OTP Salah</span>}
/> />
<Snackbar <Snackbar
anchorOrigin={{ vertical : 'top', horizontal: 'center' }} anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
@ -142,7 +142,7 @@ class OtpPage extends React.Component{
ContentProps={{ ContentProps={{
'aria-describedby': 'message-id', '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 <Snackbar
anchorOrigin={{ vertical : 'top', horizontal: 'center' }} anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
@ -151,7 +151,7 @@ class OtpPage extends React.Component{
ContentProps={{ ContentProps={{
'aria-describedby': 'message-id', '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 container spacing={0} className={classes.gridContainer}>
<Grid item xs={12} className={classes.logoContainer}> <Grid item xs={12} className={classes.logoContainer}>
@ -162,16 +162,22 @@ class OtpPage extends React.Component{
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}> <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
<Paper className={classes.formRegister}> <Paper className={classes.formRegister}>
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
Input Your OTP Code Masukkan Kode OTP Anda
</Typography>
<Typography variant="subtitle2" gutterBottom>
Still not received OTP Code? <a onClick={()=>this.resendCode()}>Resend Code</a>
</Typography> </Typography>
{/*<Typography variant="subtitle2" gutterBottom>*/}
{/*Still not received OTP Code? <a onClick={()=>this.resendCode()}>Resend Code</a>*/}
{/*</Typography>*/}
<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 => { <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 !== '') { if (event.target.value !== '') {
this.setState({otpText:this.state.otpText+event.target.value}, () => { this.setState({otpText:this.state.otpText+event.target.value}, () => {
if (x < 5) { if (x < 5) {
@ -186,13 +192,18 @@ class OtpPage extends React.Component{
this.setState({otpText:otpText.join("")}); 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>
))} ))}
</Grid> </Grid>
<div style={{padding : 5,marginTop : 20}}> <div style={{padding : 5,marginTop : 20}}>
<Button onClick={() => this.login()} fullWidth variant="contained" style={{background:'#ffeb3b'}} disabled={this.state.otpText.length < 6}> <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> </Button>
</div> </div>
</Paper> </Paper>

25
src/common/pages/RegisterCompleted/index.js
View File

@ -75,31 +75,32 @@ export default class RegisterCompletedComponent extends React.Component{
<Grid item xs={6}> <Grid item xs={6}>
<img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/> <img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
<Typography style={{color : '#FFF'}} variant={"h6"}> <Typography style={{color : '#FFF'}} variant={"h6"}>
Welcome to BTN Points Selamat Datang di BTN Point
</Typography> </Typography>
<Typography style={{color : '#FFF'}} variant={"subtitle2"}> <Typography style={{color : '#FFF'}} variant={"subtitle2"}>
Sign in to get various voucher and items Daftar untuk mendapatkan berbagai macam manfaat dan keuntungan
</Typography> </Typography>
</Grid> </Grid>
</Hidden> </Hidden>
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}> <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
<Paper className={classes.formRegister}> <Paper className={classes.formRegister}>
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
Registration Completed Pendaftaran Berhasil
</Typography> </Typography>
<Typography variant="body1" gutterBottom> <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> </Typography>
<div style={{padding : 5,marginTop : 20}}> {/*<div style={{padding : 5,marginTop : 20}}>*/}
<Link {/*<Link*/}
to={LINKS.LOGIN}> {/*to={LINKS.LOGIN}>*/}
<Button fullWidth variant="contained" style={{background:'#ffeb3b'}}> {/*<Button fullWidth variant="contained" style={{background:'#ffeb3b'}}>*/}
Back to Login {/*Back to Login*/}
</Button> {/*</Button>*/}
</Link> {/*</Link>*/}
</div> {/*</div>*/}
</Paper> </Paper>
</Grid> </Grid>

114
src/common/pages/RegisterNew/index.js
View File

@ -300,21 +300,21 @@ class RegisterPage extends React.Component {
<Grid item xs={5}> <Grid item xs={5}>
<img src={require('../../../../assets/images/register_image_2.png')} width={"80%"} /> <img src={require('../../../../assets/images/register_image_2.png')} width={"80%"} />
<Typography style={{ color: '#FFF' }} variant={"h6"}> <Typography style={{ color: '#FFF' }} variant={"h6"}>
Redeem point, Get Your Item! Tukarkan point!
</Typography> </Typography>
<Typography style={{ color: '#FFF' }} variant={"subtitle2"}> <Typography style={{ color: '#FFF' }} variant={"subtitle2"}>
Get promo and benefits with BTN Dapatkan promo dan keuntungan dengan BTN
</Typography> </Typography>
</Grid> </Grid>
</Hidden> </Hidden>
<Grid item xs={12} sm={12} md={7} style={{ paddingLeft: 50, paddingRight: 50 }}> <Grid item xs={12} sm={12} md={7} style={{ paddingLeft: 50, paddingRight: 50 }}>
<Paper className={classes.formRegister}> <Paper className={classes.formRegister}>
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
Register Now Daftar Sekarang
</Typography>
<Typography variant="subtitle2" gutterBottom>
Already have an account? <Link to={"/login"} replace>Back to Login</Link>
</Typography> </Typography>
{/*<Typography variant="subtitle2" gutterBottom>*/}
{/*Already have an account? <Link to={"/login"} replace>Back to Login</Link>*/}
{/*</Typography>*/}
<div style={{ <div style={{
display: 'flex', display: 'flex',
flexDirection: 'row' flexDirection: 'row'
@ -323,7 +323,7 @@ class RegisterPage extends React.Component {
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="name" id="name"
label="Full name" label="Nama Lengkap"
value={this.state.full_name} value={this.state.full_name}
onChange={this.handleChange('full_name')} onChange={this.handleChange('full_name')}
margin="normal" margin="normal"
@ -335,7 +335,7 @@ class RegisterPage extends React.Component {
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="phone" id="phone"
label="Phone Number" label="Nomer Telfon"
value={this.state.phone_number} value={this.state.phone_number}
onChange={this.handleChange('phone_number')} onChange={this.handleChange('phone_number')}
margin="normal" margin="normal"
@ -472,54 +472,54 @@ class RegisterPage extends React.Component {
{/*/>*/} {/*/>*/}
{/*</Grid>*/} {/*</Grid>*/}
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> {/*<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>*/}
<TextField {/*<TextField*/}
id="password" {/*id="password"*/}
label="Password" {/*label="Password"*/}
value={this.state.password} {/*value={this.state.password}*/}
onChange={this.handleChange('password')} {/*onChange={this.handleChange('password')}*/}
margin="normal" {/*margin="normal"*/}
type={this.state.showPassword ? 'text' : 'password'} {/*type={this.state.showPassword ? 'text' : 'password'}*/}
variant="outlined" {/*variant="outlined"*/}
fullWidth {/*fullWidth*/}
InputProps={{ {/*InputProps={{*/}
endAdornment: ( {/*endAdornment: (*/}
<InputAdornment position="end"> {/*<InputAdornment position="end">*/}
<IconButton {/*<IconButton*/}
aria-label="Toggle password visibility" {/*aria-label="Toggle password visibility"*/}
onClick={this.viewPassword} {/*onClick={this.viewPassword}*/}
> {/*>*/}
{this.state.showPassword ? <VisibilityOff /> : <Visibility />} {/*{this.state.showPassword ? <VisibilityOff /> : <Visibility />}*/}
</IconButton> {/*</IconButton>*/}
</InputAdornment> {/*</InputAdornment>*/}
), {/*),*/}
}} {/*}}*/}
/> {/*/>*/}
</Grid> {/*</Grid>*/}
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}> {/*<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>*/}
<TextField {/*<TextField*/}
id="confirmPassword" {/*id="confirmPassword"*/}
label="Re-type Password" {/*label="Re-type Password"*/}
value={this.state.confirmPassword} {/*value={this.state.confirmPassword}*/}
onChange={this.handleChange('confirmPassword')} {/*onChange={this.handleChange('confirmPassword')}*/}
margin="normal" {/*margin="normal"*/}
type={this.state.showConfirmPassword ? 'text' : 'password'} {/*type={this.state.showConfirmPassword ? 'text' : 'password'}*/}
fullWidth {/*fullWidth*/}
variant="outlined" {/*variant="outlined"*/}
InputProps={{ {/*InputProps={{*/}
endAdornment: ( {/*endAdornment: (*/}
<InputAdornment position="end"> {/*<InputAdornment position="end">*/}
<IconButton {/*<IconButton*/}
aria-label="Toggle password visibility" {/*aria-label="Toggle password visibility"*/}
onClick={this.viewConfirmPassword} {/*onClick={this.viewConfirmPassword}*/}
> {/*>*/}
{this.state.showConfirmPassword ? <VisibilityOff style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} /> : <Visibility style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} />} {/*{this.state.showConfirmPassword ? <VisibilityOff style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} /> : <Visibility style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} />}*/}
</IconButton> {/*</IconButton>*/}
</InputAdornment> {/*</InputAdornment>*/}
), {/*),*/}
}} {/*}}*/}
/> {/*/>*/}
</Grid> {/*</Grid>*/}
</Grid> </Grid>
</div> </div>
@ -546,7 +546,7 @@ class RegisterPage extends React.Component {
<Button <Button
fullWidth fullWidth
variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}> variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}>
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"} {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Daftar"}
</Button> </Button>
</div> </div>
</Paper> </Paper>