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