242 lines
11 KiB
JavaScript
242 lines
11 KiB
JavaScript
import React from 'react';
|
|
import withStyles from "@material-ui/core/styles/withStyles";
|
|
import {styles} from '../Register/registerStyle';
|
|
import {notification} from 'antd';
|
|
|
|
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 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 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 {LINKS} from "../../routes";
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
class BTNLoginPage extends React.Component{
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
email: "",
|
|
password: "",
|
|
showPassword : false,
|
|
isLoading: false,
|
|
loginFailed: false,
|
|
isNeedEmailVerification: false,
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.authStore = props.appstate.auth;
|
|
}
|
|
|
|
componentDidMount() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
if(urlParams.has('key')) {
|
|
this.setState({
|
|
isLoading: true
|
|
});
|
|
|
|
this.authStore.verifyEmail(urlParams.get('key')).then((res) => {
|
|
if(res.login_request_id) {
|
|
notification.open({
|
|
message: 'Email Verification',
|
|
description: 'Email verification success'
|
|
});
|
|
this.setState({
|
|
isLoading: false
|
|
});
|
|
//redirect to otp page
|
|
} else {
|
|
notification.open({
|
|
message: 'Email Verification',
|
|
description: res.message
|
|
});
|
|
this.setState({
|
|
isLoading: false
|
|
});
|
|
// res.message
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
handleChange = name => event => {
|
|
this.setState({
|
|
[name]: event.target.value,
|
|
});
|
|
};
|
|
|
|
viewPassword = ()=>{
|
|
this.setState({
|
|
showPassword : !this.state.showPassword
|
|
})
|
|
};
|
|
|
|
login = () => {
|
|
this.setState({isLoading:true});
|
|
const email = this.state.email;
|
|
const password = this.state.password;
|
|
const data = {
|
|
username: email,
|
|
password: password,
|
|
}
|
|
this.authStore.login(data).then(res => {
|
|
console.log("res login",res);
|
|
if(res.state == "verified"){
|
|
setTimeout(()=>{
|
|
this.props.history.push(LINKS.DASHBOARD);
|
|
this.setState({isLoading:false});
|
|
},1000);
|
|
}
|
|
else if(res.state == "email_verification"){
|
|
this.setState({isNeedEmailVerification:true,isLoading:false});
|
|
}
|
|
}).catch(err => {
|
|
console.log("err login",err);
|
|
this.setState({loginFailed:true,isLoading:false});
|
|
setTimeout(()=>this.setState({loginFailed:false}),3000);
|
|
});
|
|
};
|
|
|
|
render(){
|
|
const { classes } = this.props;
|
|
return (
|
|
<div className={classes.container}>
|
|
{/* <Dialog
|
|
open={this.state.open}
|
|
onClose={this.handleClose}
|
|
aria-labelledby="alert-dialog-title"
|
|
aria-describedby="alert-dialog-description"
|
|
>
|
|
<DialogTitle id="alert-dialog-title">{"Information"}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText id="alert-dialog-description">
|
|
Wrong Username or Password
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={this.handleClose} color="primary" autoFocus>
|
|
OK
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog> */}
|
|
<Snackbar
|
|
anchorOrigin={{ vertical : 'top', horizontal: 'center' }}
|
|
open={this.state.loginFailed}
|
|
onClose={()=>this.setState({loginFailed:false})}
|
|
ContentProps={{
|
|
'aria-describedby': 'message-id',
|
|
}}
|
|
message={<span id="message-id">Wrong username or password</span>}
|
|
/>
|
|
<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}}>
|
|
{
|
|
this.state.isNeedEmailVerification &&
|
|
<Paper className={classes.formRegister}>
|
|
<Typography variant="h6" gutterBottom>
|
|
Your account still need email verification
|
|
</Typography>
|
|
<Typography variant="subtitle2" gutterBottom>
|
|
Still not received any email? <Link to={"/register"}>Resend email</Link>
|
|
</Typography>
|
|
|
|
<div style={{padding : 5,marginTop : 20}}>
|
|
<Button onClick={() => this.setState({isNeedEmailVerification : false})} fullWidth variant="contained" style={{background:'#ffeb3b'}}>
|
|
Back to Login
|
|
</Button>
|
|
</div>
|
|
</Paper>
|
|
}
|
|
|
|
{
|
|
!this.state.isNeedEmailVerification &&
|
|
<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 onClick={() => this.login()} fullWidth variant="contained" style={{background:'#ffeb3b'}} disabled={this.state.email == '' || this.state.password == ''}>
|
|
{this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Sign In"}
|
|
</Button>
|
|
</div>
|
|
</Paper>
|
|
}
|
|
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(BTNLoginPage);
|