text: import * as React from "react";
  import Button from "@mui/material/Button";
  import TextField from "@mui/material/TextField";
  import Grid from "@mui/material/Grid";
  import Box from "@mui/material/Box";
  import Typography from "@mui/material/Typography";
  import Container from "@mui/material/Container";
  import { Link, useNavigate } from "react-router-dom";
  import Alert from "@mui/material/Alert";
  import axios from "axios";
  
  export default function SignIn() {
    const [error, setError] = React.useState({});
    const navigate = useNavigate();
  
    const handleSubmit = (event) => {
      event.preventDefault();
      const data = new FormData(event.currentTarget);
      const newUser = {
        email: data.get("email"),
        password: data.get("password"),
      };
      axios
        .post("/api/users/login", newUser)
        .then((res) => {
          localStorage.setItem("userid", res.data.id);
          if (res.data.role === "vendor") {
            navigate("/vendor");
          } else if (res.data.role === "buyer") {
            navigate("/buyer");
          }
        })
        .catch((err) => {
          console.log(err.request.response);
          setError(JSON.parse(err.request.response));
        });
    };
    return (
      <Container component="main" maxWidth="xs">
        <Box
          sx={{
            marginTop: 8,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
          }}
        >
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
            <TextField
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoFocus
            />
            <TextField
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
            />
            {(error.email || error.password) && (
              <Alert color="error">
                {error.email}
                {error.password}
              </Alert>
            )}
  
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            >
              Sign In
            </Button>
            <Grid container>
              <Grid item>
                <Link to="/register">{"Don't have an account? Sign Up"}</Link>
              </Grid>
            </Grid>
          </Box>
        </Box>
      </Container>
    );
  }
  