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 Link from '@material-ui/core/Link';
  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 { Modal } from '@material-ui/core';
  import { useState } from 'react';
  import SignUp from '../components/SignUp';
  import { useMutation } from '@apollo/client';
  import Auth from '../utils/auth';
  import { LOGIN } from '../utils/mutations';
  
  function Copyright() {
  	return (
  		<Typography variant="body2" color="textSecondary" align="center">
  			{'Copyright © '}
  			<Link color="inherit" href="/">
  				HomeFax
  			</Link>{' '}
  			{new Date().getFullYear()}
  			{'.'}
  		</Typography>
  	);
  }
  
  const useStyles = makeStyles((theme) => ({
  	root: {
  		height: '100vh',
  	},
  	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),
  	},
  	modal: {
  		width: '50%',
  		justifyContent: 'center',
  		backgroundColor: theme.palette.background.paper,
  		borderRadius: '1rem',
  	},
  }));
  
  export default function SignIn() {
  	const classes = useStyles();
  	const handleOpen = () => {
  		setOpen(true);
  	};
  
  	const handleClose = () => {
  		setOpen(false);
  	};
  
  	const [open, setOpen] = useState(false);
  
  	const modal = (
  		<div className={classes.modal}>
  			<SignUp></SignUp>
  		</div>
  	);
  
  	const [formState, setFormState] = useState({ identifier: '', password: '' });
  	const [login, { error }] = useMutation(LOGIN);
  
  	const handleFormSubmit = async (event) => {
  		event.preventDefault();
  		try {
  			const mutationResponse = await login({
  				variables: {
  					identifier: formState.identifier.toLowerCase(),
  					password: formState.password,
  				},
  			});
  			const token = mutationResponse.data.login.token;
  			Auth.login(token);
  		} catch (e) {
  			console.log(e);
  		}
  	};
  
  	const handleChange = (event) => {
  		const { name, value } = event.target;
  		setFormState({
  			...formState,
  			[name]: value,
  		});
  	};
  
  	return (
  		<div>
  			<CssBaseline />
  
  			<div className={classes.paper}>
  				<Avatar className={classes.avatar}>
  					<LockOutlinedIcon />
  				</Avatar>
  				<Typography component="h1" variant="h5">
  					Sign in
  				</Typography>
  				<form className={classes.form} noValidate>
  					<TextField
  						variant="outlined"
  						margin="normal"
  						required
  						fullWidth
  						id="identifier"
  						label="Email/Username"
  						name="identifier"
  						autoComplete="identifier"
  						autoFocus
  						onChange={handleChange}
  					/>
  					<TextField
  						variant="outlined"
  						margin="normal"
  						required
  						fullWidth
  						name="password"
  						label="Password"
  						type="password"
  						id="password"
  						autoComplete="current-password"
  						onChange={handleChange}
  					/>
  					<br></br>
  					<Button
  						onClick={handleFormSubmit}
  						type="submit"
  						fullWidth
  						variant="contained"
  						color="primary"
  						className={classes.submit}
  					>
  						Sign In
  					</Button>
  					<Grid container>
  						<Grid item xs>
  							<Link href="#" variant="body2">
  								Forgot password?
  							</Link>
  						</Grid>
  						<Grid item>
  							<Link href="#" variant="body2" onClick={handleOpen}>
  								Or Sign Up
  							</Link>
  							{/* <button type="button" onClick={handleOpen}>
  								Or Sign Up
  							</button> */}
  							<Modal
  								open={open}
  								onClose={handleClose}
  								aria-labelledby="simple-modal-title"
  								aria-describedby="simple-modal-description"
  								style={{
  									display: 'flex',
  									alignItems: 'center',
  									justifyContent: 'center',
  								}}
  							>
  								{modal}
  							</Modal>
  						</Grid>
  					</Grid>
  					<Box mt={5}>
  						<Copyright />
  					</Box>
  				</form>
  			</div>
  		</div>
  	);
  }
  