register new
This commit is contained in:
parent
eea15c3902
commit
5a45cc39b0
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import withStyles from "@material-ui/core/styles/withStyles";
|
||||
import {styles} from './styles';
|
||||
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';
|
||||
|
|
@ -15,26 +15,37 @@ import CircularProgress from '@material-ui/core/CircularProgress';
|
|||
import Snackbar from '@material-ui/core/Snackbar';
|
||||
|
||||
import { Link } from 'react-router-dom'
|
||||
import {inject, observer} from "mobx-react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import schema from 'async-validator'
|
||||
import {startCase} from 'lodash';
|
||||
import { startCase } from 'lodash';
|
||||
import { Upload, Icon, message } from 'antd';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
class RegisterPage extends React.Component{
|
||||
class RegisterPage extends React.Component {
|
||||
state = {
|
||||
phone_number : "",
|
||||
email : "",
|
||||
password : "",
|
||||
confirmPassword : "",
|
||||
full_name : "",
|
||||
showPassword : false,
|
||||
showConfirmPassword : false,
|
||||
openDialog : false,
|
||||
isLoading : false
|
||||
phone_number: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
full_name: "",
|
||||
showPassword: false,
|
||||
showConfirmPassword: false,
|
||||
openDialog: false,
|
||||
isLoading: false,
|
||||
no_ktp: '',
|
||||
upload_ktp: '',
|
||||
upload_photo: '',
|
||||
address: '',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
sub_district: '',
|
||||
zip_code: '',
|
||||
|
||||
};
|
||||
|
||||
constructor(props){
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.authStore = props.appstate.auth;
|
||||
// this.global_ui = props.store.global_ui;
|
||||
|
|
@ -46,32 +57,32 @@ class RegisterPage extends React.Component{
|
|||
});
|
||||
};
|
||||
|
||||
viewPassword = ()=>{
|
||||
viewPassword = () => {
|
||||
this.setState({
|
||||
showPassword : !this.state.showPassword
|
||||
showPassword: !this.state.showPassword
|
||||
})
|
||||
};
|
||||
|
||||
viewConfirmPassword = ()=>{
|
||||
viewConfirmPassword = () => {
|
||||
this.setState({
|
||||
showConfirmPassword : !this.state.showConfirmPassword
|
||||
showConfirmPassword: !this.state.showConfirmPassword
|
||||
})
|
||||
};
|
||||
|
||||
register = ()=>{
|
||||
this.setState({isLoading:true});
|
||||
register = () => {
|
||||
this.setState({ isLoading: true });
|
||||
let data = {
|
||||
full_name : this.state.full_name,
|
||||
email : this.state.email,
|
||||
phone_number : this.state.phone_number,
|
||||
password : this.state.password
|
||||
full_name: this.state.full_name,
|
||||
email: this.state.email,
|
||||
phone_number: this.state.phone_number,
|
||||
password: this.state.password
|
||||
}
|
||||
this.authStore.register(data).then(res=>{
|
||||
setTimeout(()=>{
|
||||
this.setState({isLoading:false});
|
||||
},1000);
|
||||
}).catch(err=>{
|
||||
this.setState({isLoading:false});
|
||||
this.authStore.register(data).then(res => {
|
||||
setTimeout(() => {
|
||||
this.setState({ isLoading: false });
|
||||
}, 1000);
|
||||
}).catch(err => {
|
||||
this.setState({ isLoading: false });
|
||||
})
|
||||
// let rules = {
|
||||
// full_name : {
|
||||
|
|
@ -111,8 +122,50 @@ class RegisterPage extends React.Component{
|
|||
// });
|
||||
};
|
||||
|
||||
render(){
|
||||
handleChangeUploadKtp = (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
this.setState({ loading: true });
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
// Get this url from response in real world.
|
||||
getBase64(info.file.originFileObj, imageUrl => this.setState({
|
||||
upload_ktp,
|
||||
loading: false,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
handleChangeUploadPhoto = (info) => {
|
||||
if (info.file.status === 'uploading') {
|
||||
this.setState({ loading: true });
|
||||
return;
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
// Get this url from response in real world.
|
||||
getBase64(info.file.originFileObj, imageUrl => this.setState({
|
||||
upload_photo,
|
||||
loading: false,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
const uploadButtonKtp = (
|
||||
<div>
|
||||
<Icon type={this.state.loading ? 'loading' : 'plus'} />
|
||||
<div className="ant-upload-text">Upload KTP</div>
|
||||
</div>
|
||||
);
|
||||
const uploadButtonPhoto = (
|
||||
<div>
|
||||
<Icon type={this.state.loading ? 'loading' : 'plus'} />
|
||||
<div className="ant-upload-text">Upload Photo</div>
|
||||
</div>
|
||||
);
|
||||
const upload_ktp = this.state.upload_ktp;
|
||||
const upload_photo = this.state.upload_photo;
|
||||
return (
|
||||
<div className={classes.container}>
|
||||
{/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}
|
||||
|
|
@ -121,20 +174,20 @@ class RegisterPage extends React.Component{
|
|||
<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 item xs={12} sm={12} md={10} lg={10} 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"}>
|
||||
<Grid item xs={5}>
|
||||
<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"}>
|
||||
<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}}>
|
||||
<Grid item xs={12} sm={12} md={7} style={{ paddingLeft: 50, paddingRight: 50 }}>
|
||||
<Paper className={classes.formRegister}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Register Now
|
||||
|
|
@ -142,79 +195,210 @@ class RegisterPage extends React.Component{
|
|||
<Typography variant="subtitle2" gutterBottom>
|
||||
Already have an account? <Link to={"/login"} replace>Back to Login</Link>
|
||||
</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"
|
||||
/>
|
||||
<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>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
id="confirmPassword"
|
||||
label="Re-type Password"
|
||||
value={this.state.confirmPassword}
|
||||
onChange={this.handleChange('confirmPassword')}
|
||||
margin="normal"
|
||||
type={this.state.showConfirmPassword ? 'text' : 'password'}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="Toggle password visibility"
|
||||
onClick={this.viewConfirmPassword}
|
||||
>
|
||||
{this.state.showConfirmPassword ? <VisibilityOff style={{color:this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green'}}/> : <Visibility style={{color:this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green'}}/>}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<div style={{padding : 5,marginTop : 20}}>
|
||||
<Button fullWidth variant="contained" style={{backgroundColor:'#ffeb3b'}} onClick={this.register} disabled={this.state.full_name == '' || this.state.email == '' || this.state.password == '' || this.state.password != this.state.confirmPassword}>
|
||||
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row'
|
||||
}}>
|
||||
<Grid container spacing={12}>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="name"
|
||||
label="Full name"
|
||||
value={this.state.full_name}
|
||||
onChange={this.handleChange('full_name')}
|
||||
margin="normal"
|
||||
type={"text"}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="phone"
|
||||
label="Phone Number"
|
||||
value={this.state.phone_number}
|
||||
onChange={this.handleChange('phone_number')}
|
||||
margin="normal"
|
||||
type={"number"}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="email"
|
||||
label="Email"
|
||||
value={this.state.email}
|
||||
onChange={this.handleChange('email')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="ktp"
|
||||
label="Nomor KTP"
|
||||
value={this.state.ktp}
|
||||
onChange={this.handleChange('ktp')}
|
||||
margin="normal"
|
||||
type={"number"}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5,paddingTop:16 }}>
|
||||
<Upload
|
||||
name="avatar"
|
||||
listType="picture-card"
|
||||
className="avatar-uploader"
|
||||
showUploadList={false}
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
onChange={this.handleChangeUploadKtp}
|
||||
>
|
||||
{upload_ktp ? <img src={upload_ktp} alt="avatar" /> : uploadButtonKtp}
|
||||
</Upload>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5, paddingTop:16 }}>
|
||||
<Upload
|
||||
style={{ marginTop: 16, marginBottom: 8 }}
|
||||
name="avatar"
|
||||
listType="picture-card"
|
||||
className="avatar-uploader"
|
||||
showUploadList={false}
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
onChange={this.handleChangeUploadPhoto}
|
||||
>
|
||||
{upload_photo ? <img src={upload_photo} alt="avatar" /> : uploadButtonPhoto}
|
||||
</Upload>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="address"
|
||||
label="Address"
|
||||
value={this.state.address}
|
||||
onChange={this.handleChange('address')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="province"
|
||||
label="Province"
|
||||
value={this.state.province}
|
||||
onChange={this.handleChange('province')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="city"
|
||||
label="City"
|
||||
value={this.state.city}
|
||||
onChange={this.handleChange('city')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="district"
|
||||
label="District"
|
||||
value={this.state.district}
|
||||
onChange={this.handleChange('district')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="sub_district"
|
||||
label="Sub district"
|
||||
value={this.state.sub_district}
|
||||
onChange={this.handleChange('sub_district')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="zip_code"
|
||||
label="Zip Code"
|
||||
value={this.state.zip_code}
|
||||
onChange={this.handleChange('zip_code')}
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="password"
|
||||
label="Password"
|
||||
value={this.state.password}
|
||||
onChange={this.handleChange('password')}
|
||||
margin="normal"
|
||||
type={this.state.showPassword ? 'text' : 'password'}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="Toggle password visibility"
|
||||
onClick={this.viewPassword}
|
||||
>
|
||||
{this.state.showPassword ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="confirmPassword"
|
||||
label="Re-type Password"
|
||||
value={this.state.confirmPassword}
|
||||
onChange={this.handleChange('confirmPassword')}
|
||||
margin="normal"
|
||||
type={this.state.showConfirmPassword ? 'text' : 'password'}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="Toggle password visibility"
|
||||
onClick={this.viewConfirmPassword}
|
||||
>
|
||||
{this.state.showConfirmPassword ? <VisibilityOff style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} /> : <Visibility style={{ color: this.state.password == '' ? this.state.confirmPassword == '' : this.state.password != this.state.confirmPassword ? 'red' : 'green' }} />}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
|
||||
<div style={{ padding: 5, marginTop: 20 }}>
|
||||
<Button fullWidth variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register} disabled={this.state.full_name == '' || this.state.email == '' || this.state.password == '' || this.state.password != this.state.confirmPassword}>
|
||||
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
|
||||
</Button>
|
||||
</div>
|
||||
</Paper>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ export const styles = theme => ({
|
|||
flexGrow : 1,
|
||||
height : '100vh',
|
||||
backgroundColor:'#024f8e',
|
||||
marginTop: '-56px'
|
||||
marginTop: '-56px',
|
||||
marginBottom:50
|
||||
},
|
||||
gridContainer : {
|
||||
flex :1,
|
||||
|
|
@ -32,5 +33,5 @@ export const styles = theme => ({
|
|||
textAlign : 'center',
|
||||
background : yellow['500'],
|
||||
padding : 20
|
||||
}
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user