2021-06-27 18:44:09 +00:00
|
|
|
import { signup } 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) => {};
|
|
|
|
|
2021-06-17 21:00:56 +00:00
|
|
|
const SignupPage = (props) => {
|
2021-06-27 18:44:09 +00:00
|
|
|
const { classes } = props;
|
|
|
|
const [email, setEmail] = useState('');
|
|
|
|
const [password, setPassword] = useState('');
|
|
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
const [error, setError] = useState(false);
|
|
|
|
const checkSignup = () => {
|
|
|
|
if (password !== confirmPassword) {
|
|
|
|
setError(true);
|
|
|
|
} else {
|
|
|
|
setError(false);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Grid container alignItems='center' justify='center'>
|
|
|
|
<Grid item alignItems='center' justify='center'>
|
|
|
|
<form>
|
|
|
|
<div>
|
|
|
|
<Typography align='center' variant='h6' gutterBottom>
|
|
|
|
Sign Up
|
|
|
|
</Typography>
|
|
|
|
<TextField
|
|
|
|
autoComplete='new-email'
|
|
|
|
label='Email'
|
|
|
|
name='email'
|
|
|
|
type='email'
|
|
|
|
value={email}
|
|
|
|
variant='outlined'
|
|
|
|
fullWidth
|
|
|
|
onChange={(event) => {
|
|
|
|
return setEmail(event.target.value ?? '');
|
|
|
|
}}
|
|
|
|
onKeyPress={(event) => {
|
|
|
|
if (event.key === 'Enter') {
|
|
|
|
checkSignup();
|
|
|
|
if (!error) {
|
|
|
|
props.signup(email, password);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<div>
|
|
|
|
<TextField
|
|
|
|
autoComplete='new-password'
|
|
|
|
label='Password'
|
|
|
|
name='password'
|
|
|
|
type={visible ? 'text' : 'password'}
|
|
|
|
value={password}
|
|
|
|
variant='outlined'
|
|
|
|
fullWidth
|
|
|
|
onChange={(event) => {
|
|
|
|
setPassword(event.target.value ?? '');
|
|
|
|
}}
|
|
|
|
onKeyPress={(event) => {
|
|
|
|
if (event.key === 'Enter') {
|
|
|
|
checkSignup();
|
|
|
|
if (!error) {
|
|
|
|
props.signup(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>
|
|
|
|
<div>
|
|
|
|
<TextField
|
|
|
|
autoComplete='confirm-password'
|
|
|
|
label='Confirm Password'
|
|
|
|
name='confirm-password'
|
|
|
|
type={visible ? 'text' : 'password'}
|
|
|
|
error={error}
|
|
|
|
value={confirmPassword}
|
|
|
|
variant='outlined'
|
|
|
|
fullWidth
|
|
|
|
onChange={(event) => {
|
|
|
|
setConfirmPassword(event.target.value ?? '');
|
|
|
|
}}
|
|
|
|
onKeyPress={(event) => {
|
|
|
|
checkSignup();
|
|
|
|
if (event.key === 'Enter') {
|
|
|
|
if (!error) {
|
|
|
|
props.signup(email, password);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
InputProps={{
|
|
|
|
endAdornment: (
|
|
|
|
<InputAdornment position='end'>
|
|
|
|
<IconButton
|
|
|
|
aria-label='toggle confirm password visibility'
|
|
|
|
onClick={() => {
|
|
|
|
return setVisible(!visible);
|
|
|
|
}}
|
|
|
|
edge='end'>
|
|
|
|
{visible ? <VisibilityOff /> : <Visibility />}
|
|
|
|
</IconButton>
|
|
|
|
</InputAdornment>
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<Button
|
|
|
|
id='login-button'
|
|
|
|
variant='contained'
|
|
|
|
color='primary'
|
|
|
|
onClick={() => {
|
|
|
|
checkSignup();
|
|
|
|
if (!error) {
|
|
|
|
props.signup(email, password);
|
|
|
|
}
|
|
|
|
}}>
|
|
|
|
Sign Up
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</Grid>
|
|
|
|
</Grid>
|
|
|
|
);
|
2021-06-17 21:00:56 +00:00
|
|
|
};
|
|
|
|
|
2021-06-27 18:44:09 +00:00
|
|
|
export default connect(
|
|
|
|
(state) => {
|
|
|
|
return {};
|
|
|
|
},
|
|
|
|
(dispatch, props) => {
|
|
|
|
return {
|
|
|
|
signup: (email, password) => {
|
|
|
|
dispatch(signup(email, password));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
)(withStyles(styles)(SignupPage));
|