text: import React, {useState, useEffect, useContext} from 'react';
  import { useHttp } from '../hooks/http.hook';
  import { useMessage } from '../hooks/message.hook';
  import { AuthContext } from '../context/AuthContext';
  
  import Avatar from '@material-ui/core/Avatar';
  import Button from '@material-ui/core/Button';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import TextField from '@material-ui/core/TextField';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Checkbox from '@material-ui/core/Checkbox';
  import Link from '@material-ui/core/Link';
  import Grid from '@material-ui/core/Grid';
  import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
  import Typography from '@material-ui/core/Typography';
  import { makeStyles } from '@material-ui/core/styles';
  import Container from '@material-ui/core/Container';
  
  const useStyles = makeStyles((theme) => ({
  
      paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      },
      avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main,
      },
      form: {
        width: '100%',
        marginTop: theme.spacing(3),
        marginLeft: theme.spacing(3),
      },
      submit: {
        margin: theme.spacing(3, 0, 2),
      },
  }));
  
  export const AuthPage = () => {
  
      const auth = useContext(AuthContext);
      const {loading, error, request, clearError} = useHttp();
      const message = useMessage();
      /*Add more validation to front end as well, there's basic validation on backend as well*/
      const [form, setForm] = useState({
          email: '', password: ''
      });
  
      useEffect( () => {
          message(error);
          clearError();
      }, [error, message, clearError]);
  
      useEffect( () => {
          window.M.updateTextFields();
      }, []);
  
      const changeHandler = event => {
          setForm({...form, [event.target.name]: event.target.value });
      }
  
      const registerHandler = async () => {
          try {
              const data = await request('/api/auth/register', 'POST', {...form});
              message(data.message);
          } catch(e) {}
      }
  
      const loginHandler = async () => {
          try {
              const data = await request('/api/auth/login', 'POST', {...form});
              auth.login(data.token, data.userId);
          } catch(e) {}
      }
  
      const classes = useStyles();
  
      return (
          <div className={classes.formDiv}>
          <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
              <Avatar className={classes.avatar}>
                <LockOutlinedIcon />
              </Avatar>
              <Typography component="h1" variant="h5">
                Welcome
              </Typography>
              <form className={classes.form} noValidate>
                <TextField
                  variant="standard"
                  margin="normal"
                  required
                  fullWidth
                  id="email"
                  label="Email Address"
                  name="email"
                  autoComplete="email"
                  onChange = {changeHandler}
                  autoFocus
                />
                <TextField
                  variant="standard"
                  margin="normal"
                  required
                  fullWidth
                  name="password"
                  label="Password"
                  type="password"
                  id="password"
                  autoComplete="current-password"
                  onChange = {changeHandler}
                />
                <FormControlLabel
                  control={<Checkbox value="remember" color="primary" />}
                  label="Remember me"
                />
                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                  disabled = {loading}
                  onClick = {loginHandler}
                >
                  Sign In
                </Button>
  
                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                  disabled = {loading}
                  onClick = {registerHandler}
                >
                  Register
                </Button>
  
                <Grid container>
                  <Grid item xs>
                    <Link href="#" variant="body2">
                      Forgot password?
                    </Link>
                  </Grid>
                  <Grid item>
                    <Link href="#" variant="body2">
                      {"Don't have an account? Sign Up"}
                    </Link>
                  </Grid>
                </Grid>
              </form>
            </div>
          </Container>
          </div>
        );
  }
  