From d7724bda5a4de438c53324d8bc79a875cb47f581 Mon Sep 17 00:00:00 2001 From: enggar_ganteng Date: Mon, 28 Jan 2019 21:06:58 +0700 Subject: [PATCH] feat : page otp --- src/common/pages/Otp/index.js | 139 ++++++++++++++++++++++++++++++++ src/common/pages/Otp/style.js | 36 +++++++++ src/common/pages/Otp/style.scss | 83 +++++++++++++++++++ 3 files changed, 258 insertions(+) create mode 100644 src/common/pages/Otp/index.js create mode 100644 src/common/pages/Otp/style.js create mode 100644 src/common/pages/Otp/style.scss diff --git a/src/common/pages/Otp/index.js b/src/common/pages/Otp/index.js new file mode 100644 index 0000000..193a460 --- /dev/null +++ b/src/common/pages/Otp/index.js @@ -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 ( +
+ + + + + + + {/* + + + + Welcome to BTN Points + + + Sign in to get various voucher and items + + + */} + + + + Input Your OTP Code + + + Still not received OTP Code? Resend Code + + + {[0, 1, 2, 3, 4, 5].map(x => ( + + 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"/> + + ))} + +
+ +
+ + + + + +
+ ) + } +} + +export default withStyles(styles)(OtpPage); \ No newline at end of file diff --git a/src/common/pages/Otp/style.js b/src/common/pages/Otp/style.js new file mode 100644 index 0000000..24f9058 --- /dev/null +++ b/src/common/pages/Otp/style.js @@ -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 + } +}); \ No newline at end of file diff --git a/src/common/pages/Otp/style.scss b/src/common/pages/Otp/style.scss new file mode 100644 index 0000000..6e0b2a4 --- /dev/null +++ b/src/common/pages/Otp/style.scss @@ -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; +} +