text: import React, { useState } from 'react';
  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 Paper from '@material-ui/core/Paper';
  import Box from '@material-ui/core/Box';
  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 axios from 'axios';
  import API from '../utils/API';
  
  //TODO: find photos to add to rotating side photos on signin page
  function Copyright() {
      return (
          <Typography id='copyright' variant="body2" color="textSecondary" align="center">
              {'Copyright © '}
              <Link color="inherit" href="https://material-ui.com/">
                  MKCWB Group
              </Link>{' '}
              {new Date().getFullYear()}
              {'.'}
          </Typography>
      );
  }
  
  const useStyles = makeStyles((theme) => ({
      root: {
          height: '100vh',
      },
      image: {
          backgroundImage: 'url(https://source.unsplash.com/900x1600/?landscaping,gardening,garden-house)',
          backgroundRepeat: 'no-repeat',
          backgroundColor:
              theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
          backgroundSize: 'cover',
          backgroundPosition: 'center',
      },
      paper: {
          margin: theme.spacing(8, 4),
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
      },
      avatar: {
          margin: theme.spacing(1),
          backgroundColor: theme.palette.secondary.main,
      },
      form: {
          width: '100%', // Fix IE 11 issue.
          marginTop: theme.spacing(1),
      },
      submit: {
          margin: theme.spacing(3, 0, 2),
      },
  }));
  
  const Login = ({ setUser }) => {
      const classes = useStyles();
  
      const [username, setUsername] = useState("");
      const [password, setPassword] = useState("");
  
      const handleLogin = async (event) => {
          event.preventDefault();
          await axios({
              method: "POST",
              data: {
                  username: username,
                  password: password
              },
              withCredentials: true,
              url: '/auth/login'
          }).then(res => setUser(res.data))
  
              .catch(err => console.log(err));
      };
  
  
      return (
          <Grid container component="main" className={classes.root}>
              <CssBaseline />
              <Grid item xs={false} sm={4} md={7} className={classes.image} />
              <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square id='login-page'>
                  <div  className={classes.paper}>
                      <Avatar className={classes.avatar}>
                          <LockOutlinedIcon />
                      </Avatar>
                      <Typography component="h1" variant="h5" id='sign-in-txt'>
                          Sign in
                      </Typography>
                      <form onSubmit={handleLogin} id='sign-in-form' className={classes.form} noValidate>
                          <TextField
                              variant="outlined"
                              margin="normal"
                              required
                              fullWidth
                              id="username"
                              label="Username"
                              name="username"
                              autoComplete="username"
                              autoFocus
                              onChange={e => setUsername(e.target.value)}
                          />
                          <TextField
                              variant="outlined"
                              margin="normal"
                              required
                              fullWidth
                              name="password"
                              label="Password"
                              type="password"
                              id="password"
                              autoComplete="current-password"
                              onChange={e => setPassword(e.target.value)}
                          />
                          <FormControlLabel
                              control={<Checkbox value="remember" />}
                              label="Remember me"
                              id='remember-me'
                          />
                          <Button
                              type="submit"
                              fullWidth
                              variant="contained"
                              onClick={handleLogin}
                              className={classes.submit}
                              id='sign-in-btn'
                          >
                              Sign In
                          </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> */}
                          <Box mt={5}>
                              <Copyright />
  
                          </Box>
                      </form>
                  </div>
              </Grid>
          </Grid>
      );
  }
  
  
  export default Login;
  