register new
This commit is contained in:
parent
eea15c3902
commit
5a45cc39b0
|
|
@ -18,6 +18,7 @@ import { Link } from 'react-router-dom'
|
||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import schema from 'async-validator'
|
import schema from 'async-validator'
|
||||||
import { startCase } from 'lodash';
|
import { startCase } from 'lodash';
|
||||||
|
import { Upload, Icon, message } from 'antd';
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
@observer
|
@observer
|
||||||
|
|
@ -31,7 +32,17 @@ class RegisterPage extends React.Component{
|
||||||
showPassword: false,
|
showPassword: false,
|
||||||
showConfirmPassword: false,
|
showConfirmPassword: false,
|
||||||
openDialog: false,
|
openDialog: false,
|
||||||
isLoading : false
|
isLoading: false,
|
||||||
|
no_ktp: '',
|
||||||
|
upload_ktp: '',
|
||||||
|
upload_photo: '',
|
||||||
|
address: '',
|
||||||
|
province: '',
|
||||||
|
city: '',
|
||||||
|
district: '',
|
||||||
|
sub_district: '',
|
||||||
|
zip_code: '',
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
|
@ -111,8 +122,50 @@ class RegisterPage extends React.Component{
|
||||||
// });
|
// });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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() {
|
render() {
|
||||||
const { classes } = this.props;
|
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 (
|
return (
|
||||||
<div className={classes.container}>
|
<div className={classes.container}>
|
||||||
{/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}
|
{/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}
|
||||||
|
|
@ -121,10 +174,10 @@ class RegisterPage extends React.Component{
|
||||||
<Grid item xs={12} className={classes.logoContainer}>
|
<Grid item xs={12} className={classes.logoContainer}>
|
||||||
<img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
|
<img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
|
||||||
</Grid>
|
</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}>
|
<Grid container spacing={24} className={classes.registerPaper}>
|
||||||
<Hidden smDown>
|
<Hidden smDown>
|
||||||
<Grid item xs={6}>
|
<Grid item xs={5}>
|
||||||
<img src={require('../../../../assets/images/register_image_2.png')} width={"80%"} />
|
<img src={require('../../../../assets/images/register_image_2.png')} width={"80%"} />
|
||||||
<Typography style={{ color: '#FFF' }} variant={"h6"}>
|
<Typography style={{ color: '#FFF' }} variant={"h6"}>
|
||||||
Redeem point, Get Your Item!
|
Redeem point, Get Your Item!
|
||||||
|
|
@ -134,7 +187,7 @@ class RegisterPage extends React.Component{
|
||||||
</Typography>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Hidden>
|
</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}>
|
<Paper className={classes.formRegister}>
|
||||||
<Typography variant="h6" gutterBottom>
|
<Typography variant="h6" gutterBottom>
|
||||||
Register Now
|
Register Now
|
||||||
|
|
@ -142,6 +195,12 @@ class RegisterPage extends React.Component{
|
||||||
<Typography variant="subtitle2" gutterBottom>
|
<Typography variant="subtitle2" gutterBottom>
|
||||||
Already have an account? <Link to={"/login"} replace>Back to Login</Link>
|
Already have an account? <Link to={"/login"} replace>Back to Login</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
|
<div style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row'
|
||||||
|
}}>
|
||||||
|
<Grid container spacing={12}>
|
||||||
|
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||||
<TextField
|
<TextField
|
||||||
id="name"
|
id="name"
|
||||||
label="Full name"
|
label="Full name"
|
||||||
|
|
@ -150,7 +209,10 @@ class RegisterPage extends React.Component{
|
||||||
margin="normal"
|
margin="normal"
|
||||||
type={"text"}
|
type={"text"}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
/>
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||||
<TextField
|
<TextField
|
||||||
id="phone"
|
id="phone"
|
||||||
label="Phone Number"
|
label="Phone Number"
|
||||||
|
|
@ -159,7 +221,11 @@ class RegisterPage extends React.Component{
|
||||||
margin="normal"
|
margin="normal"
|
||||||
type={"number"}
|
type={"number"}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
/>
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||||
<TextField
|
<TextField
|
||||||
id="email"
|
id="email"
|
||||||
label="Email"
|
label="Email"
|
||||||
|
|
@ -167,7 +233,118 @@ class RegisterPage extends React.Component{
|
||||||
onChange={this.handleChange('email')}
|
onChange={this.handleChange('email')}
|
||||||
margin="normal"
|
margin="normal"
|
||||||
variant="outlined"
|
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
|
<TextField
|
||||||
id="password"
|
id="password"
|
||||||
label="Password"
|
label="Password"
|
||||||
|
|
@ -175,8 +352,8 @@ class RegisterPage extends React.Component{
|
||||||
onChange={this.handleChange('password')}
|
onChange={this.handleChange('password')}
|
||||||
margin="normal"
|
margin="normal"
|
||||||
type={this.state.showPassword ? 'text' : 'password'}
|
type={this.state.showPassword ? 'text' : 'password'}
|
||||||
fullWidth
|
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
InputProps={{
|
InputProps={{
|
||||||
endAdornment: (
|
endAdornment: (
|
||||||
<InputAdornment position="end">
|
<InputAdornment position="end">
|
||||||
|
|
@ -190,6 +367,8 @@ class RegisterPage extends React.Component{
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||||
<TextField
|
<TextField
|
||||||
id="confirmPassword"
|
id="confirmPassword"
|
||||||
label="Re-type Password"
|
label="Re-type Password"
|
||||||
|
|
@ -212,6 +391,11 @@ class RegisterPage extends React.Component{
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div style={{ padding: 5, marginTop: 20 }}>
|
<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}>
|
<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"}
|
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,8 @@ export const styles = theme => ({
|
||||||
flexGrow : 1,
|
flexGrow : 1,
|
||||||
height : '100vh',
|
height : '100vh',
|
||||||
backgroundColor:'#024f8e',
|
backgroundColor:'#024f8e',
|
||||||
marginTop: '-56px'
|
marginTop: '-56px',
|
||||||
|
marginBottom:50
|
||||||
},
|
},
|
||||||
gridContainer : {
|
gridContainer : {
|
||||||
flex :1,
|
flex :1,
|
||||||
|
|
@ -32,5 +33,5 @@ export const styles = theme => ({
|
||||||
textAlign : 'center',
|
textAlign : 'center',
|
||||||
background : yellow['500'],
|
background : yellow['500'],
|
||||||
padding : 20
|
padding : 20
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue
Block a user