update : login interface

src/common/pages/Login/LoginBtn.js

@@ -1,6 +1,7 @@
 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';
@@ -9,9 +10,17 @@ 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 Snackbar from '@material-ui/core/Snackbar';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import IconButton from '@material-ui/core/IconButton';
-import { Link } from 'react-router-dom'
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import { Link } from 'react-router-dom';
 import {inject, observer} from 'mobx-react';
 import {LINKS} from "../../routes";
 
@@ -25,7 +34,9 @@ class BTNLoginPage extends React.Component{
         this.state = {
           email: "",
           password: "",
-          showPassword : false
+          showPassword : false,
+          isLoading: false,
+          loginFailed: false
         };
         this.defaultState = Object.assign({}, this.state);
         this.authStore = props.appstate.auth;
@@ -44,6 +55,7 @@ class BTNLoginPage extends React.Component{
     };
 
     login = () => {
+        this.setState({isLoading:true});
         const email = this.state.email;
         const password = this.state.password;
         const data = {
@@ -51,9 +63,13 @@ class BTNLoginPage extends React.Component{
             password: password,
         }
         this.authStore.login(data).then(res => {
-          this.props.history.push(LINKS.DASHBOARD);
+          setTimeout(()=>{
+            this.props.history.push(LINKS.DASHBOARD);
+            this.setState({isLoading:false});
+          },1000);
         }).catch(err => {
-          alert(err.message);
+            this.setState({loginFailed:true,isLoading:false});
+            setTimeout(()=>this.setState({loginFailed:false}),3000);
         });
       };
 
@@ -61,6 +77,33 @@ class BTNLoginPage extends React.Component{
         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} />
@@ -118,8 +161,8 @@ class BTNLoginPage extends React.Component{
                                         }}
                                     />
                                     <div style={{padding : 5,marginTop : 20}}>
-                                        <Button onClick={() => this.login()} fullWidth variant="contained" style={{background:'#ffeb3b'}}>
-                                            Sign In
+                                        <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>