update : interface registration
This commit is contained in:
enggar_ganteng
parent
8888150605
commit
7b524049ba
179
src/common/pages/RegisterNew/index.js
Normal file
179
src/common/pages/RegisterNew/index.js
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
import React from 'react';
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
import {styles} from './styles';
|
||||
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 InputAdornment from '@material-ui/core/InputAdornment';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import { Link } from 'react-router-dom'
|
||||
import {inject, observer} from "mobx-react";
|
||||
import schema from 'async-validator'
|
||||
import {startCase} from 'lodash';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
class RegisterPage extends React.Component{
|
||||
state = {
|
||||
phone_number : "",
|
||||
email : "",
|
||||
password : "",
|
||||
full_name : "",
|
||||
showPassword : false,
|
||||
openDialog : false
|
||||
};
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
// this.global_ui = props.store.global_ui;
|
||||
}
|
||||
|
||||
handleChange = name => event => {
|
||||
this.setState({
|
||||
[name]: event.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
viewPassword = ()=>{
|
||||
this.setState({
|
||||
showPassword : !this.state.showPassword
|
||||
})
|
||||
};
|
||||
|
||||
register = ()=>{
|
||||
// let rules = {
|
||||
// full_name : {
|
||||
// type : 'string',
|
||||
// required : true,
|
||||
// min : 3
|
||||
// },
|
||||
// phone_number : {
|
||||
// type : 'string',
|
||||
// required : true,
|
||||
// min : 8
|
||||
// },
|
||||
// email : {
|
||||
// type : 'email',
|
||||
// required : true
|
||||
// }
|
||||
// };
|
||||
// const validator = new schema(rules);
|
||||
// validator.validate(this.state, (errors, fields) => {
|
||||
// if(errors) {
|
||||
// this.global_ui.openAlert({
|
||||
// type : 'error',
|
||||
// title : startCase(errors[0].message),
|
||||
// subtitle : 'Please validate the input'
|
||||
// });
|
||||
// return false;
|
||||
// }
|
||||
// this.global_ui.openLoader();
|
||||
// setTimeout(()=>{
|
||||
// this.global_ui.closeLoader();
|
||||
// this.global_ui.openAlert({
|
||||
// title : "Registration Succeed",
|
||||
// subtitle : 'Thank you for register and enjoy your day',
|
||||
// type : 'success'
|
||||
// });
|
||||
// },1000)
|
||||
// });
|
||||
};
|
||||
|
||||
render(){
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
<div className={classes.container}>
|
||||
{/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}
|
||||
|
||||
<Grid container spacing={0} className={classes.gridContainer}>
|
||||
<Grid item xs={12} className={classes.logoContainer}>
|
||||
<img src={require('../../../../assets/images/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/register_image_2.png')} width={"80%"}/>
|
||||
<Typography style={{color : '#FFF'}} variant={"h6"}>
|
||||
Redeem point, Get Your Item!
|
||||
</Typography>
|
||||
<Typography style={{color : '#FFF'}} variant={"subtitle2"}>
|
||||
Get promo and benefits with BTN
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Hidden>
|
||||
<Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
|
||||
<Paper className={classes.formRegister}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Register Now
|
||||
</Typography>
|
||||
<TextField
|
||||
id="name"
|
||||
label="Full name"
|
||||
value={this.state.full_name}
|
||||
onChange={this.handleChange('full_name')}
|
||||
margin="normal"
|
||||
type={"text"}
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
id="phone"
|
||||
label="Phone Number"
|
||||
value={this.state.phone_number}
|
||||
onChange={this.handleChange('phone_number')}
|
||||
margin="normal"
|
||||
type={"number"}
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
id="email"
|
||||
label="Email"
|
||||
value={this.state.email}
|
||||
onChange={this.handleChange('email')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
/>
|
||||
{/*<div style={{display : 'flex',alignItems : 'center'}}>*/}
|
||||
{/*<TextField*/}
|
||||
{/*id="password"*/}
|
||||
{/*label="Password"*/}
|
||||
{/*value={this.state.password}*/}
|
||||
{/*onChange={this.handleChange('password')}*/}
|
||||
{/*margin="normal"*/}
|
||||
{/*type={this.state.showPassword ? 'text' : 'password'}*/}
|
||||
{/*fullWidth*/}
|
||||
{/*variant="outlined"*/}
|
||||
{/*InputProps={{*/}
|
||||
{/*endAdornment: (*/}
|
||||
{/*<InputAdornment position="end">*/}
|
||||
{/*<IconButton*/}
|
||||
{/*aria-label="Toggle password visibility"*/}
|
||||
{/*onClick={this.viewPassword}*/}
|
||||
{/*>*/}
|
||||
{/*{this.state.showPassword ? <VisibilityOff /> : <Visibility />}*/}
|
||||
{/*</IconButton>*/}
|
||||
{/*</InputAdornment>*/}
|
||||
{/*),*/}
|
||||
{/*}}*/}
|
||||
{/*/>*/}
|
||||
<div style={{padding : 5,marginTop : 20}}>
|
||||
<Button fullWidth variant="contained" style={{backgroundColor:'#ffeb3b'}} onClick={this.register}>
|
||||
Sign Up
|
||||
</Button>
|
||||
</div>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(RegisterPage);
|
||||
36
src/common/pages/RegisterNew/styles.js
Normal file
36
src/common/pages/RegisterNew/styles.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',
|
||||
backgroundColor:'#024f8e',
|
||||
marginTop: '-56px'
|
||||
},
|
||||
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
|
||||
}
|
||||
});
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom";
|
||||
import RegisterComponent from "./pages/Register";
|
||||
import RegisterComponent from "./pages/RegisterNew";
|
||||
import LoginComponent from "./pages/Login";
|
||||
import ForgotPasswordComponent from "./pages/ForgotPassword";
|
||||
import ChangePassword from './pages/ChangePassword';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user