611 lines
29 KiB
JavaScript
611 lines
29 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';
|
|
|
|
import AutoComplete from './../../components/AutoComplete';
|
|
import {appConfig} from "../../config/app";
|
|
import {LINKS} from "../../routes";
|
|
|
|
// const province = require("./../../../../assets/data/province.json");
|
|
// const city = require("./../../../../assets/data/city.json");
|
|
// const district = require("./../../../../assets/data/district.json");
|
|
// const subdistrict = require("./../../../../assets/data/subdistrict.json");
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
class RegisterPage extends React.Component {
|
|
state = {
|
|
showPassword: false,
|
|
showConfirmPassword: false,
|
|
openDialog: false,
|
|
isLoading: false,
|
|
|
|
fileList_ktp: [],
|
|
fileList_photo: [],
|
|
|
|
query: {},
|
|
errors: {
|
|
email_exists: '',
|
|
phone_exists: '',
|
|
},
|
|
|
|
// form
|
|
confirmPassword: "",
|
|
phone_number: "",
|
|
email: "",
|
|
password: "",
|
|
full_name: "",
|
|
no_ktp: '',
|
|
upload_ktp: '',
|
|
upload_photo: '',
|
|
address: '',
|
|
province: '',
|
|
city: '',
|
|
district: '',
|
|
sub_district: '',
|
|
zip_code: '',
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.authStore = props.appstate.auth;
|
|
this.http = props.appstate.http;
|
|
this.place = props.appstate.places;
|
|
}
|
|
|
|
componentDidMount() {
|
|
let {location:{search}} = this.props;
|
|
search = search.substr(1);
|
|
|
|
const query = search.split("&")
|
|
.map(q => q.split('='))
|
|
.reduce((all, q) => {
|
|
all[q[0]] = q[1];
|
|
return all;
|
|
}, {});
|
|
|
|
this.setState({query});
|
|
|
|
this.place.getAllProvince();
|
|
}
|
|
|
|
onChangeProvince = (value) => {
|
|
this.setState({
|
|
province: value
|
|
});
|
|
this.place.getCitiesByProvince(value);
|
|
};
|
|
|
|
onChangeCity = (value) => {
|
|
this.setState({
|
|
city: value
|
|
});
|
|
this.place.getDistrictByCity(value);
|
|
};
|
|
|
|
onChangeDistrict = (value) => {
|
|
this.setState({
|
|
district: value
|
|
});
|
|
this.place.getSubdistrictByDistrict(value);
|
|
};
|
|
|
|
onChangeSubdistrict = (value) => {
|
|
this.setState({
|
|
subdistrict: value
|
|
});
|
|
};
|
|
|
|
handleChange = name => event => {
|
|
this.setState({
|
|
[name]: event.target.value,
|
|
});
|
|
};
|
|
|
|
viewPassword = () => {
|
|
this.setState({
|
|
showPassword: !this.state.showPassword
|
|
})
|
|
};
|
|
|
|
viewConfirmPassword = () => {
|
|
this.setState({
|
|
showConfirmPassword: !this.state.showConfirmPassword
|
|
})
|
|
};
|
|
|
|
register = () => {
|
|
|
|
// return this.props.history.push(LINKS.LOGIN);
|
|
|
|
// if (this.state.password.length < 8) {
|
|
// return message.warning("password need atleast 8 characters");
|
|
// }
|
|
|
|
// if (this.state.upload_photo === '') {
|
|
// return message.warning("please upload photo");
|
|
//}
|
|
//
|
|
|
|
if (this.state.phone_number === '') {
|
|
return this.setState({
|
|
errors: {
|
|
...this.state.errors,
|
|
phone_exists: 'Harap isi nomor handphone anda'
|
|
}
|
|
})
|
|
}
|
|
|
|
if (this.state.email === '') {
|
|
return this.setState({
|
|
errors: {
|
|
...this.state.errors,
|
|
email_exists: 'Harap isi email anda'
|
|
}
|
|
})
|
|
}
|
|
|
|
this.setState({ isLoading: true });
|
|
|
|
let data = {
|
|
fullname: this.state.full_name,
|
|
email: this.state.email,
|
|
phone_number: this.state.phone_number,
|
|
password: this.state.password,
|
|
nric_number: this.state.no_ktp,
|
|
// nric_photo_path: this.state.upload_ktp,
|
|
// photo: this.state.upload_photo,
|
|
// address: this.state.address,
|
|
// province_id: this.state.province,
|
|
// city_id: this.state.city,
|
|
// district_id: this.state.district,
|
|
// subdistrict_id: this.state.subdistrict,
|
|
// zip_code: this.state.zip_code,
|
|
referal: this.state.query.referal,
|
|
additional_data: {}
|
|
};
|
|
this.authStore.register(data).then(res => {
|
|
//message.success("Please check your email to confirm your account");this.props.history.push(LINKS.LOGIN);
|
|
setTimeout(() => {
|
|
this.setState({ isLoading: false });
|
|
this.props.history.push(LINKS.REGISTER_COMPLETED);
|
|
// this.props.history.push(LINKS.LOGIN);
|
|
}, 250);
|
|
}).catch(err => {
|
|
this.setState({ isLoading: false });
|
|
|
|
if (err.type === 'BodyValidationError') {
|
|
message.error(err.detail[0].message);
|
|
} else {
|
|
if (err.message.toLowerCase().includes('email')) {
|
|
this.setState({
|
|
errors: {
|
|
...this.state.errors,
|
|
email_exists: 'Email sudah terdaftar'
|
|
}
|
|
})
|
|
} else if (err.message.toLowerCase().includes('phone number')) {
|
|
this.setState({
|
|
errors: {
|
|
...this.state.errors,
|
|
phone_exists: 'Nomer handphone sudah terdaftar'
|
|
}
|
|
})
|
|
}
|
|
// message.error(err.message);
|
|
}
|
|
});
|
|
};
|
|
|
|
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,
|
|
}));
|
|
}
|
|
};
|
|
|
|
uploadOnChange = (key, info) => {
|
|
let fileList = info.fileList;
|
|
|
|
this.setState({
|
|
[`fileList_${key}`]: fileList
|
|
})
|
|
};
|
|
|
|
createUploadProps = (key) => {
|
|
return {
|
|
name: 'file',
|
|
multiple: false,
|
|
action: appConfig.apiUrl + 'upload',
|
|
customRequest: ({file, onProgress, onSuccess}) => {
|
|
this.setState({
|
|
uploading: true
|
|
});
|
|
this.http.upload(file)
|
|
.then(res => {
|
|
this.setState({
|
|
[`upload_${key}`]: appConfig.apiUrl + res.path.slice(1,res.path.length)
|
|
});
|
|
return res;
|
|
})
|
|
.then(res => {
|
|
message.success(`${file.name} file uploaded successfully.`);
|
|
|
|
const fileList = this.state[`fileList_${key}`];
|
|
|
|
console.log(key, fileList, this.state);
|
|
|
|
const selectedIndex = fileList.findIndex(f => f.name === file.name);
|
|
|
|
fileList[selectedIndex].status = "done";
|
|
fileList[selectedIndex].path = res.path;
|
|
onSuccess(fileList[selectedIndex]);
|
|
// form.setFieldsValue({path: res.path});
|
|
|
|
this.setState({
|
|
uploading: false,
|
|
// fileList: []
|
|
[`fileList_${key}`]: [fileList[selectedIndex]]
|
|
});
|
|
});
|
|
|
|
return {
|
|
abort: () => {}
|
|
}
|
|
},
|
|
fileList: this.state[`fileList_${key}`],
|
|
onChange: (info) => this.uploadOnChange(key, info),
|
|
onRemove: file => true
|
|
};
|
|
};
|
|
|
|
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 cols={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} style={{
|
|
alignSelf: 'center'
|
|
}}>
|
|
<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"}>
|
|
Selamat Datang di BTN Shop!
|
|
</Typography>
|
|
<Typography style={{ color: '#FFF' }} variant={"subtitle2"}>
|
|
Dapatkan promo dan keuntungan lebih dari 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>
|
|
Daftar Sekarang
|
|
</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={16}>
|
|
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 7, paddingRight: 5 }}>
|
|
<TextField
|
|
id="name"
|
|
label="Nama Lengkap"
|
|
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: 7 }}>
|
|
<TextField
|
|
id="phone"
|
|
label="Nomor Handphone"
|
|
value={this.state.phone_number}
|
|
onChange={this.handleChange('phone_number')}
|
|
margin="normal"
|
|
type={"number"}
|
|
variant="outlined"
|
|
fullWidth
|
|
error={!!this.state.errors.phone_exists}
|
|
helperText={this.state.errors.phone_exists}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 7, paddingRight: 5 }}>
|
|
<TextField
|
|
id="email"
|
|
label="Email"
|
|
value={this.state.email}
|
|
onChange={this.handleChange('email')}
|
|
margin="normal"
|
|
variant="outlined"
|
|
fullWidth
|
|
error={!!this.state.errors.email_exists}
|
|
helperText={this.state.errors.email_exists}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 7 }}>
|
|
<TextField
|
|
id="ktp"
|
|
label="Nomor KTP"
|
|
value={this.state.no_ktp}
|
|
onChange={this.handleChange('no_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}*/}
|
|
{/*{...this.createUploadProps("ktp")}*/}
|
|
{/*>*/}
|
|
{/*{upload_ktp ? <img src={upload_ktp} alt="avatar" style={{*/}
|
|
{/*width: 104,*/}
|
|
{/*height: 104*/}
|
|
{/*}}/> : 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}*/}
|
|
{/*{...this.createUploadProps("photo")}*/}
|
|
{/*>*/}
|
|
{/*{upload_photo ? <img src={upload_photo} alt="avatar" style={{*/}
|
|
{/*width: 104,*/}
|
|
{/*height: 104*/}
|
|
{/*}}/> : 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 }}>*/}
|
|
{/*<AutoComplete*/}
|
|
{/*placeholder={"Province"}*/}
|
|
{/*onChange={({value}) => this.onChangeProvince(value)}*/}
|
|
{/*suggestions={this.place.provinces.map(p => {*/}
|
|
|
|
{/*return {*/}
|
|
{/*label: p.name,*/}
|
|
{/*value: p.id*/}
|
|
{/*}*/}
|
|
{/*})}/>*/}
|
|
{/*</Grid>*/}
|
|
|
|
{/*<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>*/}
|
|
{/*<AutoComplete*/}
|
|
{/*placeholder={"City"}*/}
|
|
{/*onChange={({value}) => this.onChangeCity(value)}*/}
|
|
{/*suggestions={this.place.cities.map(p => {*/}
|
|
|
|
{/*return {*/}
|
|
{/*label: p.name,*/}
|
|
{/*value: p.id*/}
|
|
{/*}*/}
|
|
{/*})}/>*/}
|
|
{/*</Grid>*/}
|
|
{/*<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>*/}
|
|
{/*<AutoComplete*/}
|
|
{/*placeholder={"District"}*/}
|
|
{/*onChange={({value}) => this.onChangeDistrict(value)}*/}
|
|
{/*suggestions={this.place.districts.map(p => {*/}
|
|
|
|
{/*return {*/}
|
|
{/*label: p.name,*/}
|
|
{/*value: p.id*/}
|
|
{/*}*/}
|
|
{/*})}/>*/}
|
|
{/*</Grid>*/}
|
|
|
|
{/*<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>*/}
|
|
{/*<AutoComplete*/}
|
|
{/*placeholder={"Subdistrict"}*/}
|
|
{/*onChange={({value}) => this.onChangeSubdistrict(value)}*/}
|
|
{/*suggestions={this.place.subdistricts.map(p => {*/}
|
|
|
|
{/*return {*/}
|
|
{/*label: p.name,*/}
|
|
{/*value: p.id*/}
|
|
{/*}*/}
|
|
{/*})}/>*/}
|
|
{/*</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>
|
|
|
|
<Grid item xs={12} sm={12} md={12}>
|
|
<TextField
|
|
label="Kode Referal"
|
|
value={this.state.query.referal}
|
|
onChange={event => {
|
|
this.setState({
|
|
query: {
|
|
...this.state.query,
|
|
referal: event.target.value
|
|
}
|
|
})
|
|
}}
|
|
margin="normal"
|
|
type={"password"}
|
|
fullWidth
|
|
variant="outlined"
|
|
/>
|
|
</Grid>
|
|
|
|
<div style={{ padding: 5, marginTop: 20 }}>
|
|
<Button
|
|
fullWidth
|
|
variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}>
|
|
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Daftar"}
|
|
</Button>
|
|
|
|
<Typography variant="subtitle2" gutterBottom style={{
|
|
marginTop: 16
|
|
}}>
|
|
Belum menerima email? <Link to={"/resend_email"} replace>Kirim ulang email</Link>
|
|
</Typography>
|
|
|
|
<Typography variant="subtitle2" gutterBottom>
|
|
Belum menerima OTP? <Link to={"/resend_otp"} replace>Kirim ulang OTP</Link>
|
|
</Typography>
|
|
</div>
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(RegisterPage);
|