text: import React 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 Grid from '@material-ui/core/Grid';
  import Box from '@material-ui/core/Box';
  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 Copyright = ()=> {
      return (
        <Typography variant="body2" color="textSecondary" align="center">
          {'Copyright © '}
          <Link color="inherit" href="https://material-ui.com/">
            Paul Blackburn
          </Link>{' '}
          {new Date().getFullYear()}
          {'.'}
        </Typography>
      );
    }
  
  
  class Login extends React.Component{
      render(){
          return(
              <React.Fragment>
                  <Container component="main" maxWidth="xs">
                  <CssBaseline />
                  <div className={"paper"}>
                  <Avatar className={"avatar"}>
                      <LockOutlinedIcon />
                  </Avatar>
                  <Typography component="h1" variant="h5">
                      Passport Authentication
                  </Typography>
                  <form className={"form"} noValidate>
                      <TextField
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      id="email"
                      label="Email Address"
                      name="email"
                      autoComplete="email"
                      autoFocus
                      />
                      <TextField
                      variant="outlined"
                      margin="normal"
                      required
                      fullWidth
                      name="password"
                      label="Password"
                      type="password"
                      id="password"
                      autoComplete="current-password"
                      />
                      <br/>
                      {/* <FormControlLabel
                      control={<Checkbox value="remember" color="primary" />}
                      label="Remember me"
                      /> */}
                      <br/>
                      <Button
                      type="submit"
                      fullWidth
                      variant="contained"
                      color="primary"
                      className={"submit"}
                      >
                      Sign In
                      </Button>
                      <br/> <br/> 
                      <Grid container>
                      {/* <Grid item xs>
                          <Link href="#" variant="body2">
                          Forgot password?
                          </Link>
                      </Grid> */}
                      
                      <Grid item>
                          <Link href="/register" variant="body2">
                          {"Don't have an account? Sign Up"}
                          </Link>
                      </Grid>
                      </Grid>
                  </form>
                  </div>
                  <Box mt={8}>
                  <Copyright />
                  </Box>
              </Container>
             </React.Fragment>
          )
      }
  }
  
  export default Login;