From 7b524049baeb93f6e72701f3c24edf4d86f17112 Mon Sep 17 00:00:00 2001
From: enggar_ganteng <ismailadiazz@gmail.com>
Date: Mon, 28 Jan 2019 16:06:04 +0700
Subject: [PATCH] update : interface registration

---
 src/common/pages/RegisterNew/index.js  | 179 +++++++++++++++++++++++++
 src/common/pages/RegisterNew/styles.js |  36 +++++
 src/common/routes.js                   |   2 +-
 3 files changed, 216 insertions(+), 1 deletion(-)
 create mode 100644 src/common/pages/RegisterNew/index.js
 create mode 100644 src/common/pages/RegisterNew/styles.js

diff --git a/src/common/pages/RegisterNew/index.js b/src/common/pages/RegisterNew/index.js
new file mode 100644
index 0000000..cfd3d73
--- /dev/null
+++ b/src/common/pages/RegisterNew/index.js
@@ -0,0 +1,179 @@
+import React from 'react';
+import withStyles from "@material-ui/core/styles/withStyles";
+import {styles} from './styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import TextField from '@material-ui/core/TextField';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+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 { Link } from 'react-router-dom'
+import {inject, observer} from "mobx-react";
+import schema from 'async-validator'
+import {startCase} from 'lodash';
+
+@inject('appstate')
+@observer
+class RegisterPage extends React.Component{
+    state = {
+        phone_number : "",
+        email : "",
+        password : "",
+        full_name : "",
+        showPassword : false,
+        openDialog : false
+    };
+
+    constructor(props){
+        super(props);
+        // this.global_ui = props.store.global_ui;
+    }
+
+    handleChange = name => event => {
+        this.setState({
+            [name]: event.target.value,
+        });
+    };
+
+    viewPassword = ()=>{
+        this.setState({
+            showPassword : !this.state.showPassword
+        })
+    };
+
+    register = ()=>{
+        // let rules = {
+        //     full_name : {
+        //         type : 'string',
+        //         required : true,
+        //         min : 3
+        //     },
+        //     phone_number : {
+        //         type : 'string',
+        //         required : true,
+        //         min : 8
+        //     },
+        //     email : {
+        //         type : 'email',
+        //         required : true
+        //     }
+        // };
+        // const validator = new schema(rules);
+        // validator.validate(this.state, (errors, fields) => {
+        //     if(errors) {
+        //         this.global_ui.openAlert({
+        //             type : 'error',
+        //             title : startCase(errors[0].message),
+        //             subtitle : 'Please validate the input'
+        //         });
+        //         return false;
+        //     }
+        //     this.global_ui.openLoader();
+        //     setTimeout(()=>{
+        //         this.global_ui.closeLoader();
+        //         this.global_ui.openAlert({
+        //             title : "Registration Succeed",
+        //             subtitle : 'Thank you for register and enjoy your day',
+        //             type : 'success'
+        //         });
+        //     },1000)
+        // });
+    };
+
+    render(){
+        const { classes } = this.props;
+        return (
+            <div className={classes.container}>
+                {/*<AlertSuccess open={appStore.global_ui.openSuccess} onClose={()=>appStore.global_ui.closeAlertSuccess()}/>*/}
+
+                <Grid container spacing={0} className={classes.gridContainer}>
+                    <Grid item xs={12} className={classes.logoContainer}>
+                        <img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
+                    </Grid>
+                    <Grid item xs={12} sm={12} md={10} lg={6} className={classes.registerContainer}>
+                        <Grid container spacing={24} className={classes.registerPaper}>
+                            <Hidden smDown>
+                                <Grid item xs={6}>
+                                    <img src={require('../../../../assets/images/register_image_2.png')} width={"80%"}/>
+                                    <Typography style={{color : '#FFF'}} variant={"h6"}>
+                                        Redeem point, Get Your Item!
+                                    </Typography>
+                                    <Typography style={{color : '#FFF'}} variant={"subtitle2"}>
+                                        Get promo and benefits with BTN
+                                    </Typography>
+                                </Grid>
+                            </Hidden>
+                            <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
+                                <Paper className={classes.formRegister}>
+                                    <Typography variant="h6" gutterBottom>
+                                        Register Now
+                                    </Typography>
+                                    <TextField
+                                        id="name"
+                                        label="Full name"
+                                        value={this.state.full_name}
+                                        onChange={this.handleChange('full_name')}
+                                        margin="normal"
+                                        type={"text"}
+                                        variant="outlined"
+                                    />
+                                    <TextField
+                                        id="phone"
+                                        label="Phone Number"
+                                        value={this.state.phone_number}
+                                        onChange={this.handleChange('phone_number')}
+                                        margin="normal"
+                                        type={"number"}
+                                        variant="outlined"
+                                    />
+                                    <TextField
+                                        id="email"
+                                        label="Email"
+                                        value={this.state.email}
+                                        onChange={this.handleChange('email')}
+                                        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>*/}
+                                            {/*),*/}
+                                        {/*}}*/}
+                                    {/*/>*/}
+                                    <div style={{padding : 5,marginTop : 20}}>
+                                        <Button fullWidth variant="contained" style={{backgroundColor:'#ffeb3b'}} onClick={this.register}>
+                                            Sign Up
+                                        </Button>
+                                    </div>
+                                </Paper>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </div>
+        )
+    }
+}
+
+export default withStyles(styles)(RegisterPage);
\ No newline at end of file
diff --git a/src/common/pages/RegisterNew/styles.js b/src/common/pages/RegisterNew/styles.js
new file mode 100644
index 0000000..2f40d31
--- /dev/null
+++ b/src/common/pages/RegisterNew/styles.js
@@ -0,0 +1,36 @@
+import yellow from '@material-ui/core/colors/yellow';
+export const styles = theme => ({
+    container : {
+        flex :1,
+        flexGrow : 1,
+        height : '100vh',
+        backgroundColor:'#024f8e',
+        marginTop: '-56px'
+    },
+    gridContainer : {
+        flex :1,
+        justifyContent:'center'
+    },
+    registerContainer: {
+        marginTop : 50
+    },
+    formRegister : {
+        padding : 20,
+        display : 'flex',
+        flexDirection: 'column',
+        textAlign : 'center'
+    },
+    registerPaper : {
+        flex :1,
+        flexDirection : 'row',
+        justifyContent:'center'
+    },
+    logo : {
+        width : '200px'
+    },
+    logoContainer : {
+        textAlign : 'center',
+        background : yellow['500'],
+        padding : 20
+    }
+});
\ No newline at end of file
diff --git a/src/common/routes.js b/src/common/routes.js
index 22350b7..dbd132b 100644
--- a/src/common/routes.js
+++ b/src/common/routes.js
@@ -1,7 +1,7 @@
 import React from "react";
 import {observer, inject} from 'mobx-react';
 import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom";
-import RegisterComponent from "./pages/Register";
+import RegisterComponent from "./pages/RegisterNew";
 import LoginComponent from "./pages/Login";
 import ForgotPasswordComponent from "./pages/ForgotPassword";
 import ChangePassword from './pages/ChangePassword';