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