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 React from "react";
|
||||||
import {observer, inject} from 'mobx-react';
|
import {observer, inject} from 'mobx-react';
|
||||||
import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom";
|
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 LoginComponent from "./pages/Login";
|
||||||
import ForgotPasswordComponent from "./pages/ForgotPassword";
|
import ForgotPasswordComponent from "./pages/ForgotPassword";
|
||||||
import ChangePassword from './pages/ChangePassword';
|
import ChangePassword from './pages/ChangePassword';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user