From ac165bcf466e6887b9753a74a6033dd796a64c4b Mon Sep 17 00:00:00 2001
From: enggar_ganteng <ismailadiazz@gmail.com>
Date: Mon, 28 Jan 2019 18:42:46 +0700
Subject: [PATCH] update : register handler

---
 src/common/pages/RegisterNew/index.js | 103 +++++++++++++++++++-------
 1 file changed, 77 insertions(+), 26 deletions(-)

diff --git a/src/common/pages/RegisterNew/index.js b/src/common/pages/RegisterNew/index.js
index cfd3d73..3e3cbd9 100644
--- a/src/common/pages/RegisterNew/index.js
+++ b/src/common/pages/RegisterNew/index.js
@@ -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>