Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

register new

Browse Source
This commit is contained in:
enggar_ganteng
2019-01-29 04:36:57 +07:00
parent eea15c3902
commit 5a45cc39b0
2 changed files with 297 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
src/common/pages/RegisterNew/index.js
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import withStyles from "@material-ui/core/styles/withStyles"; import withStyles from "@material-ui/core/styles/withStyles";
import {styles} from './styles'; import { styles } from './styles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography'; 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 Snackbar from '@material-ui/core/Snackbar';
import { Link } from 'react-router-dom' 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
class RegisterPage extends React.Component{ class RegisterPage extends React.Component {
state = { state = {
phone_number : "", phone_number: "",
email : "", email: "",
password : "", password: "",
confirmPassword : "", confirmPassword: "",
full_name : "", full_name: "",
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) {
super(props); super(props);
this.authStore = props.appstate.auth; this.authStore = props.appstate.auth;
// this.global_ui = props.store.global_ui; // this.global_ui = props.store.global_ui;
@@ -46,32 +57,32 @@ class RegisterPage extends React.Component{
}); });
}; };
viewPassword = ()=>{ viewPassword = () => {
this.setState({ this.setState({
showPassword : !this.state.showPassword showPassword: !this.state.showPassword
}) })
}; };
viewConfirmPassword = ()=>{ viewConfirmPassword = () => {
this.setState({ this.setState({
showConfirmPassword : !this.state.showConfirmPassword showConfirmPassword: !this.state.showConfirmPassword
}) })
}; };
register = ()=>{ register = () => {
this.setState({isLoading:true}); this.setState({ isLoading: true });
let data = { let data = {
full_name : this.state.full_name, full_name: this.state.full_name,
email : this.state.email, email: this.state.email,
phone_number : this.state.phone_number, phone_number: this.state.phone_number,
password : this.state.password password: this.state.password
} }
this.authStore.register(data).then(res=>{ this.authStore.register(data).then(res => {
setTimeout(()=>{ setTimeout(() => {
this.setState({isLoading:false}); this.setState({ isLoading: false });
},1000); }, 1000);
}).catch(err=>{ }).catch(err => {
this.setState({isLoading:false}); this.setState({ isLoading: false });
}) })
// let rules = { // let rules = {
// full_name : { // 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 { 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,20 +174,20 @@ 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!
</Typography> </Typography>
<Typography style={{color : '#FFF'}} variant={"subtitle2"}> <Typography style={{ color: '#FFF' }} variant={"subtitle2"}>
Get promo and benefits with BTN Get promo and benefits with BTN
</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,79 +195,210 @@ 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>
<TextField <div style={{
id="name" display: 'flex',
label="Full name" flexDirection: 'row'
value={this.state.full_name} }}>
onChange={this.handleChange('full_name')} <Grid container spacing={12}>
margin="normal" <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
type={"text"} <TextField
variant="outlined" id="name"
/> label="Full name"
<TextField value={this.state.full_name}
id="phone" onChange={this.handleChange('full_name')}
label="Phone Number" margin="normal"
value={this.state.phone_number} type={"text"}
onChange={this.handleChange('phone_number')} variant="outlined"
margin="normal" fullWidth
type={"number"} />
variant="outlined" </Grid>
/> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
<TextField <TextField
id="email" id="phone"
label="Email" label="Phone Number"
value={this.state.email} value={this.state.phone_number}
onChange={this.handleChange('email')} onChange={this.handleChange('phone_number')}
margin="normal" margin="normal"
variant="outlined" type={"number"}
/> variant="outlined"
<TextField fullWidth
id="password" />
label="Password" </Grid>
value={this.state.password}
onChange={this.handleChange('password')} <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
margin="normal" <TextField
type={this.state.showPassword ? 'text' : 'password'} id="email"
fullWidth label="Email"
variant="outlined" value={this.state.email}
InputProps={{ onChange={this.handleChange('email')}
endAdornment: ( margin="normal"
<InputAdornment position="end"> variant="outlined"
<IconButton fullWidth
aria-label="Toggle password visibility" />
onClick={this.viewPassword} </Grid>
> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
{this.state.showPassword ? <VisibilityOff /> : <Visibility />} <TextField
</IconButton> id="ktp"
</InputAdornment> label="Nomor KTP"
), value={this.state.ktp}
}} onChange={this.handleChange('ktp')}
/> margin="normal"
<TextField type={"number"}
id="confirmPassword" variant="outlined"
label="Re-type Password" fullWidth
value={this.state.confirmPassword} />
onChange={this.handleChange('confirmPassword')} </Grid>
margin="normal"
type={this.state.showConfirmPassword ? 'text' : 'password'} <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5,paddingTop:16 }}>
fullWidth <Upload
variant="outlined" name="avatar"
InputProps={{ listType="picture-card"
endAdornment: ( className="avatar-uploader"
<InputAdornment position="end"> showUploadList={false}
<IconButton action="//jsonplaceholder.typicode.com/posts/"
aria-label="Toggle password visibility" onChange={this.handleChangeUploadKtp}
onClick={this.viewConfirmPassword} >
> {upload_ktp ? <img src={upload_ktp} alt="avatar" /> : uploadButtonKtp}
{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'}}/>} </Upload>
</IconButton> </Grid>
</InputAdornment> <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5, paddingTop:16 }}>
), <Upload
}} style={{ marginTop: 16, marginBottom: 8 }}
/> name="avatar"
<div style={{padding : 5,marginTop : 20}}> listType="picture-card"
<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}> className="avatar-uploader"
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"} 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> </Button>
</div> </div>
</Paper> </Paper>

5
src/common/pages/RegisterNew/styles.js
View File

@@ -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
} },
}); });