414 lines
22 KiB
JavaScript
414 lines
22 KiB
JavaScript
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 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 schema from 'async-validator'
|
|
import { startCase } from 'lodash';
|
|
import { Upload, Icon, message } from 'antd';
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
class RegisterPage extends React.Component {
|
|
state = {
|
|
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) {
|
|
super(props);
|
|
this.authStore = props.appstate.auth;
|
|
// this.global_ui = props.store.global_ui;
|
|
}
|
|
|
|
handleChange = name => event => {
|
|
this.setState({
|
|
[name]: event.target.value,
|
|
});
|
|
};
|
|
|
|
viewPassword = () => {
|
|
this.setState({
|
|
showPassword: !this.state.showPassword
|
|
})
|
|
};
|
|
|
|
viewConfirmPassword = () => {
|
|
this.setState({
|
|
showConfirmPassword: !this.state.showConfirmPassword
|
|
})
|
|
};
|
|
|
|
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
|
|
}
|
|
this.authStore.register(data).then(res => {
|
|
setTimeout(() => {
|
|
this.setState({ isLoading: false });
|
|
}, 1000);
|
|
}).catch(err => {
|
|
this.setState({ isLoading: false });
|
|
})
|
|
// 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)
|
|
// });
|
|
};
|
|
|
|
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()}/>*/}
|
|
|
|
<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={10} className={classes.registerContainer}>
|
|
<Grid container spacing={24} className={classes.registerPaper}>
|
|
<Hidden smDown>
|
|
<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"}>
|
|
Get promo and benefits with BTN
|
|
</Typography>
|
|
</Grid>
|
|
</Hidden>
|
|
<Grid item xs={12} sm={12} md={7} style={{ paddingLeft: 50, paddingRight: 50 }}>
|
|
<Paper className={classes.formRegister}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Register Now
|
|
</Typography>
|
|
<Typography variant="subtitle2" gutterBottom>
|
|
Already have an account? <Link to={"/login"} replace>Back to Login</Link>
|
|
</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
|
|
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>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(RegisterPage); |