164 lines
5.4 KiB
JavaScript
164 lines
5.4 KiB
JavaScript
|
import { login, forgotPassword } from '../../reducers/login';
|
||
|
import { useState } from 'react';
|
||
|
import Button from '@material-ui/core/Button';
|
||
|
import Grid from '@material-ui/core/Grid';
|
||
|
import InputAdornment from '@material-ui/core/InputAdornment';
|
||
|
import IconButton from '@material-ui/core/IconButton';
|
||
|
import TextField from '@material-ui/core/TextField';
|
||
|
import Typography from '@material-ui/core/Typography';
|
||
|
import Visibility from '@material-ui/icons/Visibility';
|
||
|
import VisibilityOff from '@material-ui/icons/VisibilityOff';
|
||
|
import { connect } from 'react-redux';
|
||
|
import { withStyles } from '@material-ui/styles';
|
||
|
|
||
|
const styles = (theme) => {};
|
||
|
|
||
|
const LoginPage = (props) => {
|
||
|
const [email, setEmail] = useState('');
|
||
|
const [password, setPassword] = useState('');
|
||
|
const [visible, setVisible] = useState(false);
|
||
|
const [error, setError] = useState(false);
|
||
|
const [forgotPassword, setForgotPassword] = useState(false);
|
||
|
|
||
|
const handleForgotPassword = () => {
|
||
|
if (!!email) {
|
||
|
props.forgotPassword(email);
|
||
|
setForgotPassword(false);
|
||
|
setError(false);
|
||
|
setEmail('');
|
||
|
} else {
|
||
|
setError(true);
|
||
|
}
|
||
|
};
|
||
|
return (
|
||
|
<Grid container alignItems='center' justify='center'>
|
||
|
<Grid item>
|
||
|
<form>
|
||
|
<div>
|
||
|
<Typography align='center' variant='h6' gutterBottom>
|
||
|
{forgotPassword ? 'Reset Password' : 'Sign in'}
|
||
|
</Typography>
|
||
|
<TextField
|
||
|
autoComplete='current-email'
|
||
|
error={error}
|
||
|
label='Email'
|
||
|
name='email'
|
||
|
type='email'
|
||
|
value={email}
|
||
|
variant='outlined'
|
||
|
onChange={(event) => {
|
||
|
return setEmail(event.target.value ?? '');
|
||
|
}}
|
||
|
onKeyPress={(event) => {
|
||
|
if (event.key === 'Enter') {
|
||
|
forgotPassword ? props.forgotPassword(email) : props.login(email, password);
|
||
|
}
|
||
|
}}
|
||
|
/>
|
||
|
{forgotPassword === false ? (
|
||
|
<>
|
||
|
<div>
|
||
|
<TextField
|
||
|
autoComplete='current-password'
|
||
|
label='Password'
|
||
|
name='password'
|
||
|
type={visible ? 'text' : 'password'}
|
||
|
value={password}
|
||
|
variant='outlined'
|
||
|
onChange={(event) => {
|
||
|
setPassword(event.target.value ?? '');
|
||
|
}}
|
||
|
onKeyPress={(event) => {
|
||
|
if (event.key === 'Enter') {
|
||
|
props.login(email, password);
|
||
|
}
|
||
|
}}
|
||
|
InputProps={{
|
||
|
endAdornment: (
|
||
|
<InputAdornment position='end'>
|
||
|
<IconButton
|
||
|
aria-label='toggle password visibility'
|
||
|
onClick={() => {
|
||
|
return setVisible(!visible);
|
||
|
}}
|
||
|
edge='end'>
|
||
|
{visible ? <VisibilityOff /> : <Visibility />}
|
||
|
</IconButton>
|
||
|
</InputAdornment>
|
||
|
)
|
||
|
}}
|
||
|
/>
|
||
|
<div>
|
||
|
<Button
|
||
|
id='forgot-password-toggle-button'
|
||
|
color='secondary'
|
||
|
onClick={() => {
|
||
|
return setForgotPassword(true);
|
||
|
}}
|
||
|
size='small'>
|
||
|
Forgot Password?
|
||
|
</Button>
|
||
|
</div>
|
||
|
</div>
|
||
|
<Button
|
||
|
id='login-button'
|
||
|
variant='contained'
|
||
|
color='primary'
|
||
|
onClick={() => {
|
||
|
props.login(email, password);
|
||
|
}}>
|
||
|
Login
|
||
|
</Button>
|
||
|
</>
|
||
|
) : (
|
||
|
<Grid container>
|
||
|
<Grid item>
|
||
|
<Button
|
||
|
id='forgot-password-cancel-button'
|
||
|
variant='contained'
|
||
|
fullWidth
|
||
|
color='primary'
|
||
|
onClick={() => {
|
||
|
setForgotPassword(false);
|
||
|
setError(false);
|
||
|
}}>
|
||
|
Cancel
|
||
|
</Button>
|
||
|
</Grid>
|
||
|
<Grid item>
|
||
|
<Button
|
||
|
id='forgot-password-submit-button'
|
||
|
variant='contained'
|
||
|
color='secondary'
|
||
|
fullWidth
|
||
|
onClick={() => {
|
||
|
handleForgotPassword();
|
||
|
}}>
|
||
|
Continue
|
||
|
</Button>
|
||
|
</Grid>
|
||
|
</Grid>
|
||
|
)}
|
||
|
</div>
|
||
|
</form>
|
||
|
</Grid>
|
||
|
</Grid>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default connect(
|
||
|
(state) => {
|
||
|
return {};
|
||
|
},
|
||
|
(dispatch, props) => {
|
||
|
return {
|
||
|
login: (email, password) => {
|
||
|
dispatch(login(email, password));
|
||
|
},
|
||
|
forgotPassword: (email) => {
|
||
|
dispatch(forgotPassword(email));
|
||
|
}
|
||
|
};
|
||
|
}
|
||
|
)(withStyles(styles)(LoginPage));
|