feat: register connect to backend
This commit is contained in:
parent
dfa4df84bf
commit
f6d91f51bb
|
|
@ -21,6 +21,7 @@ import { startCase } from 'lodash';
|
|||
import { Upload, Icon, message } from 'antd';
|
||||
|
||||
import AutoComplete from './../../components/AutoComplete';
|
||||
import {appConfig} from "../../config/app";
|
||||
|
||||
// const province = require("./../../../../assets/data/province.json");
|
||||
// const city = require("./../../../../assets/data/city.json");
|
||||
|
|
@ -36,12 +37,14 @@ class RegisterPage extends React.Component {
|
|||
openDialog: false,
|
||||
isLoading: false,
|
||||
|
||||
fileList_ktp: [],
|
||||
fileList_photo: [],
|
||||
|
||||
// form
|
||||
confirmPassword: "",
|
||||
phone_number: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
full_name: "",
|
||||
no_ktp: '',
|
||||
upload_ktp: '',
|
||||
|
|
@ -58,12 +61,40 @@ class RegisterPage extends React.Component {
|
|||
super(props);
|
||||
this.authStore = props.appstate.auth;
|
||||
this.http = props.appstate.http;
|
||||
this.place = props.appstate.places;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
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,
|
||||
|
|
@ -85,10 +116,20 @@ class RegisterPage extends React.Component {
|
|||
register = () => {
|
||||
this.setState({ isLoading: true });
|
||||
let data = {
|
||||
full_name: this.state.full_name,
|
||||
fullname: this.state.full_name,
|
||||
email: this.state.email,
|
||||
phone_number: this.state.phone_number,
|
||||
password: this.state.password
|
||||
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,
|
||||
additional_data: {}
|
||||
};
|
||||
this.authStore.register(data).then(res => {
|
||||
setTimeout(() => {
|
||||
|
|
@ -96,6 +137,12 @@ class RegisterPage extends React.Component {
|
|||
}, 1000);
|
||||
}).catch(err => {
|
||||
this.setState({ isLoading: false });
|
||||
|
||||
if (err.type === 'BodyValidationError') {
|
||||
message.error(err.detail[0].message);
|
||||
} else {
|
||||
message.error(err.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -127,6 +174,57 @@ class RegisterPage extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
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}) => {
|
||||
this.setState({
|
||||
uploading: true
|
||||
});
|
||||
return this.http.upload(file)
|
||||
.then(res => {
|
||||
this.setState({
|
||||
[`upload_${key}`]: res.path
|
||||
});
|
||||
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;
|
||||
|
||||
// form.setFieldsValue({path: res.path});
|
||||
|
||||
this.setState({
|
||||
uploading: false,
|
||||
// fileList: []
|
||||
[`fileList_${key}`]: [fileList[selectedIndex]]
|
||||
});
|
||||
});
|
||||
},
|
||||
fileList: this.state[`fileList_${key}`],
|
||||
onChange: (info) => this.uploadOnChange(key, info),
|
||||
onRemove: file => true
|
||||
};
|
||||
};
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
|
|
@ -152,10 +250,10 @@ class RegisterPage extends React.Component {
|
|||
{/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}
|
||||
|
||||
<Grid container spacing={0} className={classes.gridContainer}>
|
||||
<Grid item xs={16} className={classes.logoContainer}>
|
||||
<Grid item cols={12} className={classes.logoContainer}>
|
||||
<img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
|
||||
</Grid>
|
||||
<Grid item xs={16} sm={16} md={10} lg={10} 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={5}>
|
||||
|
|
@ -168,7 +266,7 @@ class RegisterPage extends React.Component {
|
|||
</Typography>
|
||||
</Grid>
|
||||
</Hidden>
|
||||
<Grid item xs={16} sm={16} md={7} 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
|
||||
|
|
@ -181,7 +279,7 @@ class RegisterPage extends React.Component {
|
|||
flexDirection: 'row'
|
||||
}}>
|
||||
<Grid container spacing={16}>
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="name"
|
||||
label="Full name"
|
||||
|
|
@ -193,7 +291,7 @@ class RegisterPage extends React.Component {
|
|||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="phone"
|
||||
label="Phone Number"
|
||||
|
|
@ -206,7 +304,7 @@ class RegisterPage extends React.Component {
|
|||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="email"
|
||||
label="Email"
|
||||
|
|
@ -217,12 +315,12 @@ class RegisterPage extends React.Component {
|
|||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<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')}
|
||||
value={this.state.no_ktp}
|
||||
onChange={this.handleChange('no_ktp')}
|
||||
margin="normal"
|
||||
type={"number"}
|
||||
variant="outlined"
|
||||
|
|
@ -230,33 +328,31 @@ class RegisterPage extends React.Component {
|
|||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5,paddingTop:16 }}>
|
||||
<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}
|
||||
{...this.createUploadProps("ktp")}
|
||||
>
|
||||
{upload_ktp ? <img src={upload_ktp} alt="avatar" /> : uploadButtonKtp}
|
||||
</Upload>
|
||||
</Grid>
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5, paddingTop:16 }}>
|
||||
<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}
|
||||
{...this.createUploadProps("photo")}
|
||||
>
|
||||
{upload_photo ? <img src={upload_photo} alt="avatar" /> : uploadButtonPhoto}
|
||||
</Upload>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="address"
|
||||
label="Address"
|
||||
|
|
@ -267,90 +363,57 @@ class RegisterPage extends React.Component {
|
|||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={16} sm={16} 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 item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<AutoComplete
|
||||
placeholder={"Province"}
|
||||
onChange={val => console.log(val)}
|
||||
suggestions={[
|
||||
{
|
||||
label: "Indonesia",
|
||||
value: "ID"
|
||||
onChange={({value}) => this.onChangeProvince(value)}
|
||||
suggestions={this.place.provinces.map(p => {
|
||||
|
||||
return {
|
||||
label: p.name,
|
||||
value: p.id
|
||||
}
|
||||
]}/>
|
||||
})}/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={16} sm={16} 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 item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<AutoComplete
|
||||
placeholder={"City"}
|
||||
onChange={val => console.log(val)}
|
||||
suggestions={[
|
||||
{
|
||||
label: "Indonesia",
|
||||
value: "ID"
|
||||
onChange={({value}) => this.onChangeCity(value)}
|
||||
suggestions={this.place.cities.map(p => {
|
||||
|
||||
return {
|
||||
label: p.name,
|
||||
value: p.id
|
||||
}
|
||||
]}/>
|
||||
})}/>
|
||||
</Grid>
|
||||
<Grid item xs={16} sm={16} 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 item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<AutoComplete
|
||||
placeholder={"District"}
|
||||
onChange={val => console.log(val)}
|
||||
suggestions={[
|
||||
{
|
||||
label: "Indonesia",
|
||||
value: "ID"
|
||||
onChange={({value}) => this.onChangeDistrict(value)}
|
||||
suggestions={this.place.districts.map(p => {
|
||||
|
||||
return {
|
||||
label: p.name,
|
||||
value: p.id
|
||||
}
|
||||
]}/>
|
||||
})}/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={16} sm={16} 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 item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<AutoComplete
|
||||
placeholder={"Subdistrict"}
|
||||
onChange={val => console.log(val)}
|
||||
suggestions={[
|
||||
{
|
||||
label: "Indonesia",
|
||||
value: "ID"
|
||||
onChange={({value}) => this.onChangeSubdistrict(value)}
|
||||
suggestions={this.place.subdistricts.map(p => {
|
||||
|
||||
return {
|
||||
label: p.name,
|
||||
value: p.id
|
||||
}
|
||||
]}/>
|
||||
})}/>
|
||||
</Grid>
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="zip_code"
|
||||
label="Zip Code"
|
||||
|
|
@ -362,7 +425,7 @@ class RegisterPage extends React.Component {
|
|||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="password"
|
||||
label="Password"
|
||||
|
|
@ -386,7 +449,7 @@ class RegisterPage extends React.Component {
|
|||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={16} sm={16} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
|
||||
<TextField
|
||||
id="confirmPassword"
|
||||
label="Re-type Password"
|
||||
|
|
@ -415,7 +478,7 @@ class RegisterPage extends React.Component {
|
|||
|
||||
|
||||
<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}>
|
||||
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ import Vouchers from './vouchers';
|
|||
import {PurchasedItemStore} from "./purchased_item";
|
||||
import WalletStore from "./wallet";
|
||||
import {PurchasedItemVouchserStore} from "./purchased_item_voucher";
|
||||
import {PlaceStore} from "./place";
|
||||
|
||||
export default class AppState {
|
||||
http = new Http(this.token);
|
||||
|
|
@ -122,6 +123,8 @@ export default class AppState {
|
|||
wallet = new WalletStore(this);
|
||||
purchased_voucher = new PurchasedItemVouchserStore(this);
|
||||
|
||||
places = new PlaceStore(this);
|
||||
|
||||
constructor(initialState) {
|
||||
this.token = initialState.token;
|
||||
this.http.token = this.token;
|
||||
|
|
@ -178,4 +181,4 @@ export default class AppState {
|
|||
|
||||
return tokenData;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export class Authentication {
|
|||
@action
|
||||
register(data) {
|
||||
this.isRegistering = true;
|
||||
return this.http.post("register", data)
|
||||
return this.http.post("authentication/register", data)
|
||||
.then(res => {
|
||||
this.isRegistering = false;
|
||||
return res;
|
||||
|
|
|
|||
45
src/common/stores/place.js
Normal file
45
src/common/stores/place.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import {observable, action, computed} from 'mobx';
|
||||
|
||||
export class PlaceStore {
|
||||
@observable provinces = [];
|
||||
@observable cities = [];
|
||||
@observable districts = [];
|
||||
@observable subdistricts = [];
|
||||
|
||||
constructor(context) {
|
||||
this.context = context;
|
||||
this.http = context.http;
|
||||
}
|
||||
|
||||
@action
|
||||
getAllProvince() {
|
||||
return this.http.get("places/provinces")
|
||||
.then(res => {
|
||||
this.provinces = res;
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
getCitiesByProvince(provinceId) {
|
||||
return this.http.get(`places/city?province_id=${provinceId}`)
|
||||
.then(res => {
|
||||
this.cities = res;
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
getDistrictByCity(cityId) {
|
||||
return this.http.get(`places/district?city_id=${cityId}`)
|
||||
.then(res => {
|
||||
this.districts = res;
|
||||
});
|
||||
}
|
||||
|
||||
@action
|
||||
getSubdistrictByDistrict(districtId) {
|
||||
return this.http.get(`places/subdistrict?district_id=${districtId}`)
|
||||
.then(res => {
|
||||
this.subdistricts = res;
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user