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

update : register handler

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-28 18:42:46 +07:00
parent 0714b06177
commit ac165bcf46
1 changed files with 77 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,9 @@ import Button from '@material-ui/core/Button';
import Hidden from '@material-ui/core/Hidden'; import Hidden from '@material-ui/core/Hidden';
import InputAdornment from '@material-ui/core/InputAdornment'; import InputAdornment from '@material-ui/core/InputAdornment';
import IconButton from '@material-ui/core/IconButton'; 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 { 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'
@ -23,13 +26,17 @@ class RegisterPage extends React.Component{
phone_number : "", phone_number : "",
email : "", email : "",
password : "", password : "",
confirmPassword : "",
full_name : "", full_name : "",
showPassword : false, showPassword : false,
openDialog : false showConfirmPassword : false,
openDialog : false,
isLoading : false
}; };
constructor(props){ constructor(props){
super(props); super(props);
this.authStore = props.appstate.auth;
// this.global_ui = props.store.global_ui; // this.global_ui = props.store.global_ui;
} }
@ -45,7 +52,27 @@ class RegisterPage extends React.Component{
}) })
}; };
viewConfirmPassword = ()=>{
this.setState({
showConfirmPassword : !this.state.showConfirmPassword
})
};
register = ()=>{ 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 = { // let rules = {
// full_name : { // full_name : {
// type : 'string', // type : 'string',
@ -112,6 +139,9 @@ class RegisterPage extends React.Component{
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
Register Now Register Now
</Typography> </Typography>
<Typography variant="subtitle2" gutterBottom>
Already have an account? <Link to={"/login"} replace>Back to Login</Link>
</Typography>
<TextField <TextField
id="name" id="name"
label="Full name" label="Full name"
@ -138,32 +168,53 @@ class RegisterPage extends React.Component{
margin="normal" margin="normal"
variant="outlined" variant="outlined"
/> />
{/*<div style={{display : 'flex',alignItems : 'center'}}>*/} <TextField
{/*<TextField*/} id="password"
{/*id="password"*/} label="Password"
{/*label="Password"*/} value={this.state.password}
{/*value={this.state.password}*/} 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
{/*fullWidth*/} variant="outlined"
{/*variant="outlined"*/} InputProps={{
{/*InputProps={{*/} endAdornment: (
{/*endAdornment: (*/} <InputAdornment position="end">
{/*<InputAdornment position="end">*/} <IconButton
{/*<IconButton*/} aria-label="Toggle password visibility"
{/*aria-label="Toggle password visibility"*/} onClick={this.viewPassword}
{/*onClick={this.viewPassword}*/} >
{/*>*/} {this.state.showPassword ? <VisibilityOff /> : <Visibility />}
{/*{this.state.showPassword ? <VisibilityOff /> : <Visibility />}*/} </IconButton>
{/*</IconButton>*/} </InputAdornment>
{/*</InputAdornment>*/} ),
{/*),*/} }}
{/*}}*/} />
{/*/>*/} <TextField
id="confirmPassword"
label="Re-type Password"
value={this.state.confirmPassword}
onChange={this.handleChange('confirmPassword')}
margin="normal"
type={this.state.showPassword ? '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>
),
}}
/>
<div style={{padding : 5,marginTop : 20}}> <div style={{padding : 5,marginTop : 20}}>
<Button fullWidth variant="contained" style={{backgroundColor:'#ffeb3b'}} onClick={this.register}> <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}>
Sign Up {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign Up"}
</Button> </Button>
</div> </div>
</Paper> </Paper>