feat : page otp
This commit is contained in:
enggar_ganteng
parent
7368bc5b07
commit
d7724bda5a
139
src/common/pages/Otp/index.js
Normal file
139
src/common/pages/Otp/index.js
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
import React from 'react';
|
||||||
|
import withStyles from "@material-ui/core/styles/withStyles";
|
||||||
|
import {styles} from './style';
|
||||||
|
|
||||||
|
import Grid from '@material-ui/core/Grid';
|
||||||
|
import Paper from '@material-ui/core/Paper';
|
||||||
|
import Typography from '@material-ui/core/Typography';
|
||||||
|
import TextField from '@material-ui/core/TextField';
|
||||||
|
import Visibility from '@material-ui/icons/Visibility';
|
||||||
|
import VisibilityOff from '@material-ui/icons/VisibilityOff';
|
||||||
|
import Button from '@material-ui/core/Button';
|
||||||
|
import Hidden from '@material-ui/core/Hidden';
|
||||||
|
import Dialog from '@material-ui/core/Dialog';
|
||||||
|
import DialogActions from '@material-ui/core/DialogActions';
|
||||||
|
import DialogContent from '@material-ui/core/DialogContent';
|
||||||
|
import DialogContentText from '@material-ui/core/DialogContentText';
|
||||||
|
import DialogTitle from '@material-ui/core/DialogTitle';
|
||||||
|
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 { Link } from 'react-router-dom';
|
||||||
|
import {inject, observer} from 'mobx-react';
|
||||||
|
import {LINKS} from "../../routes";
|
||||||
|
|
||||||
|
@inject('appstate')
|
||||||
|
@observer
|
||||||
|
class OtpPage extends React.Component{
|
||||||
|
otp = [];
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.props = props;
|
||||||
|
this.state = {
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
showPassword : false,
|
||||||
|
isLoading: false,
|
||||||
|
loginFailed: false,
|
||||||
|
isNeedEmailVerification: false,
|
||||||
|
otp: [],
|
||||||
|
otpText : "",
|
||||||
|
isResending: false
|
||||||
|
};
|
||||||
|
this.defaultState = Object.assign({}, this.state);
|
||||||
|
this.authStore = props.appstate.auth;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount(){
|
||||||
|
this.otp[0].focus();
|
||||||
|
console.log("otp",this.otp);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange = name => event => {
|
||||||
|
this.setState({
|
||||||
|
[name]: event.target.value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
resendCode = () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
login = () => {
|
||||||
|
console.log("otpText",this.state.otpText);
|
||||||
|
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);
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
render(){
|
||||||
|
const { classes } = this.props;
|
||||||
|
return (
|
||||||
|
<div className={classes.container}>
|
||||||
|
<Grid container spacing={0} className={classes.gridContainer}>
|
||||||
|
<Grid item xs={12} className={classes.logoContainer}>
|
||||||
|
<img src={require('../../../../assets/images/login/logo_new.png')} className={classes.logo} />
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={12} md={10} lg={6} className={classes.registerContainer}>
|
||||||
|
<Grid container spacing={24} className={classes.registerPaper}>
|
||||||
|
{/* <Hidden smDown>
|
||||||
|
<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
|
||||||
|
</Typography>
|
||||||
|
<Typography style={{color : '#FFF'}} variant={"subtitle2"}>
|
||||||
|
Sign in to get various voucher and items
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Hidden> */}
|
||||||
|
<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? <Link to={"/register"}>Resend Code</Link>
|
||||||
|
</Typography>
|
||||||
|
<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"/>
|
||||||
|
</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"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withStyles(styles)(OtpPage);
|
||||||
36
src/common/pages/Otp/style.js
Normal file
36
src/common/pages/Otp/style.js
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import yellow from '@material-ui/core/colors/yellow';
|
||||||
|
export const styles = theme => ({
|
||||||
|
container : {
|
||||||
|
flex :1,
|
||||||
|
flexGrow : 1,
|
||||||
|
height : '100vh',
|
||||||
|
marginTop: "-56px !important",
|
||||||
|
background : '#024F8E'
|
||||||
|
},
|
||||||
|
gridContainer : {
|
||||||
|
flex :1,
|
||||||
|
justifyContent:'center'
|
||||||
|
},
|
||||||
|
registerContainer: {
|
||||||
|
marginTop : 50
|
||||||
|
},
|
||||||
|
formRegister : {
|
||||||
|
padding : 20,
|
||||||
|
display : 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
textAlign : 'center'
|
||||||
|
},
|
||||||
|
registerPaper : {
|
||||||
|
flex :1,
|
||||||
|
flexDirection : 'row',
|
||||||
|
justifyContent:'center'
|
||||||
|
},
|
||||||
|
logo : {
|
||||||
|
width : '200px'
|
||||||
|
},
|
||||||
|
logoContainer : {
|
||||||
|
textAlign : 'center',
|
||||||
|
background : yellow['500'],
|
||||||
|
padding : 20
|
||||||
|
}
|
||||||
|
});
|
||||||
83
src/common/pages/Otp/style.scss
Normal file
83
src/common/pages/Otp/style.scss
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Thasadith');
|
||||||
|
|
||||||
|
.loginWrapper{
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
//background-color: #aaafff;
|
||||||
|
background-image: url("../../../../assets/images/login/background.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
background-position: center bottom;
|
||||||
|
margin-top: -56px !important;
|
||||||
|
|
||||||
|
.formContainer{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: -17.5vh;
|
||||||
|
|
||||||
|
.logoLogin{
|
||||||
|
width: 200px;
|
||||||
|
height: auto;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textLogin{
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5vh;
|
||||||
|
margin-bottom: 6.5vh;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: lighter;
|
||||||
|
color: #555;
|
||||||
|
font-family: 'Thasadith', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formParent{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.inputContainer{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 14px 28px rgba(0,0,0,0.06), 0 10px 10px rgba(0,0,0,0.03);
|
||||||
|
|
||||||
|
.usernameForm{
|
||||||
|
border: 0px;
|
||||||
|
padding: 15px;
|
||||||
|
width: 20vw;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.passwordForm{
|
||||||
|
border: 0px;
|
||||||
|
padding: 15px;
|
||||||
|
width: 20vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonLogin{
|
||||||
|
width: 100px;
|
||||||
|
height: 35px;
|
||||||
|
align-self: center;
|
||||||
|
margin-left: -3vw;
|
||||||
|
box-shadow: 0 14px 28px rgba(0,0,0,0.09), 0 10px 10px rgba(0,0,0,0.06) !important;
|
||||||
|
color: #fff;
|
||||||
|
border: 0px;
|
||||||
|
background-color: #6772e5;
|
||||||
|
border-radius: 2.5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonLogin:hover{
|
||||||
|
background-color: #424770;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea:focus, input:focus{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user