add login page

src/common/components/Alert/AlertSuccess.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import withStyles from "@material-ui/core/styles/withStyles";
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Zoom from '@material-ui/core/Zoom';
+import Typography from "@material-ui/core/Typography/Typography";
+import {inject, observer} from "mobx-react";
+import withMobileDialog from '@material-ui/core/withMobileDialog';
+
+function Transition(props) {
+    return <Zoom in={true} {...props} />;
+}
+
+@inject('store')
+@observer
+class AlertSuccess extends React.Component{
+    // state = {
+    //     open: this.props.open,
+    //     callback : this.props.onClose
+    // };
+
+    constructor(props){
+        super(props);
+        this.global_ui = props.store.global_ui;
+    }
+
+    // componentDidUpdate(prevProps){
+    //     if (this.props.open !== prevProps.open) {
+    //         this.setState({open : this.props.open});
+    //     }
+    // }
+
+    handleClose = () => {
+        this.global_ui.closeAlert();
+    };
+
+    onActionClick = async ()=>{
+        if(typeof this.global_ui.successAlertCB === 'function') {
+            let cbResult = this.global_ui.successAlertCB();
+            if(cbResult && cbResult.then && typeof cbResult.then === 'function'){
+                await cbResult
+            }
+        }
+        this.global_ui.closeAlert()
+    };
+
+    renderIcon = (type)=>{
+        if(type === 'success'){
+            return <img src={require('../../../../assets/images/login/success_new.gif')}/>
+        }
+        else {
+            return (<Zoom in={true}>
+                <img src={require('../../../../assets/images/login/error.png')} width={"30%"} style={{transitionDelay: '2000ms',marginBottom : 20}}/>
+            </Zoom>)
+        }
+    };
+
+    render() {
+            let actions = this.props.actions.length ? this.props.actions : [<Button onClick={this.onActionClick} color="primary">Ok</Button>];
+            const { fullScreen } = this.props;
+            return (
+            <Dialog
+                open={this.global_ui.alertDialog.open}
+                TransitionComponent={Transition}
+                keepMounted
+                fullWidth
+                fullScreen={fullScreen}
+                onClose={this.handleClose}
+                aria-labelledby="alert-dialog-slide-title"
+                aria-describedby="alert-dialog-slide-description"
+                disableBackdropClick
+                disableEscapeKeyDown
+            >
+                        <DialogContent style={{display:'flex',alignItems : 'center',justifyContent : 'center',flexDirection : 'column'}}>
+                                {
+                                    this.renderIcon(this.global_ui.alertDialog.type)
+                                }
+
+                                <Typography variant={"h6"} gutterBottom={true}>
+                                    {this.global_ui.alertDialog.title}
+                                </Typography>
+                                <Typography variant={"subtitle2"} gutterBottom={true}>
+                                    {this.global_ui.alertDialog.subtitle}
+                                </Typography>
+                        </DialogContent>
+                <DialogActions>
+                    {
+                        actions.map(it=>it)
+                    }
+                </DialogActions>
+            </Dialog>
+        );
+    }
+}
+
+AlertSuccess.defaultProps = {
+    open : false,
+    title : 'Alert',
+    subtitle : '',
+    onClose : ()=>{},
+    actions : [],
+    type : 'error'
+};
+
+export default withMobileDialog()(AlertSuccess);

src/common/pages/Login/LoginBtn.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import withStyles from "@material-ui/core/styles/withStyles";
+import {styles} from '../Register/registerStyle';
+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'
+
+class BTNLoginPage extends React.Component{
+    state = {
+        email : "",
+        password : "",
+        showPassword : false
+    };
+
+    handleChange = name => event => {
+        this.setState({
+            [name]: event.target.value,
+        });
+    };
+
+    viewPassword = ()=>{
+        this.setState({
+            showPassword : !this.state.showPassword
+        })
+    };
+
+    render(){
+        const { classes } = this.props;
+        return (
+            <div className={classes.container}>
+                <Grid container spacing={0} className={classes.gridContainer}>
+                    <Grid item xs={12} className={classes.logoContainer}>
+                        <img src={require('../../../../assets/images/login/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/login/register_image_2.png')} width={"80%"}/>
+                                    <Typography style={{color : '#FFF'}} variant={"h6"}>
+                                        Welcome to BTN Points
+                                    </Typography>
+                                    <Typography style={{color : '#FFF'}} variant={"subtitle2"}>
+                                        Sign in to get various voucher and items
+                                    </Typography>
+                                </Grid>
+                            </Hidden>
+                            <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
+                                <Paper className={classes.formRegister}>
+                                    <Typography variant="h6" gutterBottom>
+                                        Login to BTN Point
+                                    </Typography>
+                                    <Typography variant="subtitle2" gutterBottom>
+                                        Doesn't have an account? <Link to={"/register"}>Register</Link>
+                                    </Typography>
+                                    <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" color="secondary">
+                                            Sign In
+                                        </Button>
+                                    </div>
+                                </Paper>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </div>
+        )
+    }
+}
+
+export default withStyles(styles)(BTNLoginPage);

src/common/pages/Login/style.scss

@@ -80,3 +80,4 @@
 textarea:focus, input:focus{
   outline: none;
 }
+

src/common/pages/Register/registerStyle.js

@@ -0,0 +1,36 @@
+import yellow from '@material-ui/core/colors/yellow';
+export const styles = theme => ({
+    container : {
+        flex :1,
+        flexGrow : 1,
+        height : '100vh',
+        marginTop: "-56px !important",
+        background : '#024F8E'
+    },
+    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
+    }
+});

src/common/routes.js

@@ -3,6 +3,7 @@ import {observer, inject} from 'mobx-react';
 import {BrowserRouter as Router, Route, Switch, Redirect} from "react-router-dom";
 import RegisterComponent from "./pages/Register";
 import LoginComponent from "./pages/Login";
+import LoginBTNComponent from "./pages/Login/LoginBtn";
 import ForgotPasswordComponent from "./pages/ForgotPassword";
 import ChangePassword from './pages/ChangePassword';
 import AppContainer from "./pages/App";
@@ -155,7 +156,7 @@ export default class Routes extends React.Component {
               pathname: this.authStore.isLoggedIn ? LINKS.DASHBOARD : LINKS.LOGIN
             }}/>)}/>
           <Route exact path={LINKS.REGISTER} component={RegisterComponent}/>
-          <Route exact path={LINKS.LOGIN} component={LoginComponent}/>
+          <Route exact path={LINKS.LOGIN} component={LoginBTNComponent}/>
           <Route exact path={LINKS.FORGOT_PASSWORD} component={ForgotPasswordComponent}/>
           <Route exact path={LINKS.INVITE_CONFIRMATION} component={InviteConfirmationComponent}/>
           <Route exact path={LINKS.INVITE_CONFIRMATION_LOGIN} component={InviteConfirmationLoginComponent}/>

src/common/stores/global_ui.js

@@ -149,4 +149,29 @@ export default class GlobalUI {
     this.globalAlert = '';
     this[DIALOG.UI.ALERT] = false;
   }
+
+  @observable successAlertCB = ()=>{
+      this.closeAlert();
+  };
+
+  @action
+  openAlert({title=false,subtitle=false,cb=false,type='error'}){
+      if(typeof cb === 'function'){
+          this.successAlertCB = cb;
+      }
+      this.alertDialog= {
+          title : title,
+          open : true,
+          subtitle : subtitle,
+          type : type
+      }
+  };
+
+  @action
+  closeAlert(){
+      this.alertDialog.title = false;
+      this.alertDialog.open = false;
+      this.alertDialog.subtitle = false;
+      this.successAlertCB = ()=>this.closeAlert();
+  }
 }