text: import React, { useState, useEffect } from "react";
  import { Redirect } from "react-router-dom";
  import { useSelector, useDispatch } from "react-redux";
  import { login } from "../../actions/auth";
  import Avatar from "@mui/material/Avatar";
  import Button from "@mui/material/Button";
  import CssBaseline from "@mui/material/CssBaseline";
  import TextField from "@mui/material/TextField";
  import FormControlLabel from "@mui/material/FormControlLabel";
  import Checkbox from "@mui/material/Checkbox";
  import Link from "@mui/material/Link";
  import Paper from "@mui/material/Paper";
  import Box from "@mui/material/Box";
  import Grid from "@mui/material/Grid";
  import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
  import Typography from "@mui/material/Typography";
  import { createTheme, ThemeProvider } from "@mui/material/styles";
  import useStyles from "../../utils/formStyles";
  import Modal from "../popup/modal";
  
  function Copyright(props) {
    return (
      <Typography
        variant="body2"
        color="text.secondary"
        align="center"
        {...props}
      >
        {"Copyright © "}
        <Link color="inherit" href="/">
          PMT
        </Link>{" "}
        {new Date().getFullYear()}
        {"."}
      </Typography>
    );
  }
  
  const theme = createTheme();
  
  export default function SignInSide() {
    const [open2, setOpen2] = useState(false);
    const [formData, setFormData] = useState({
      email: "",
      password: "",
    });
    const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
    const dispatch = useDispatch();
  
    const { email, password } = formData;
  
    useEffect(() => {
      document.title = "PMT | Sign In";
    }, []);
  
    const onChange = (e) =>
      setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = async (e) => {
      e.preventDefault();
      dispatch(login(email, password));
    };
  
    if (isAuthenticated) {
      return <Redirect to="/dashboard" />;
    }
  
    return (
      <ThemeProvider theme={theme}>
        <Grid container component="main" sx={{ height: "100vh" }}>
          <CssBaseline />
          <Grid
            item
            xs={false}
            sm={4}
            md={7}
            sx={{
              backgroundColor: " #63d471",
              backgroundImage: "linear-gradient(315deg, #63d471 0%, #233329 74%)",
            }}
          />
          <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
            <Box
              sx={{
                my: 8,
                mx: 4,
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <Avatar
                sx={{
                  m: 1,
                  bgcolor: "#63d471",
                  backgroundImage:
                    "linear-gradient(315deg, #63d471 0%, #233329 74%)",
                }}
              >
                <LockOutlinedIcon />
              </Avatar>
              <Typography component="h1" variant="h5">
                Sign in
              </Typography>
              <Box
                component="form"
                noValidate
                onSubmit={(e) => onSubmit(e)}
                sx={{ mt: 1 }}
              >
                <TextField
                  variant="outlined"
                  margin="normal"
                  required
                  fullWidth
                  label="Email Address"
                  name="email"
                  autoComplete="email"
                  autoFocus
                  value={email}
                  onChange={(e) => onChange(e)}
                />
                <TextField
                  variant="outlined"
                  margin="normal"
                  required
                  fullWidth
                  name="password"
                  label="Password"
                  type="password"
                  autoComplete="current-password"
                  value={password}
                  onChange={(e) => onChange(e)}
                />
                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  sx={{ mt: 3, mb: 2 }}
                  style={{
                    backgroundColor: " #63d471",
                    backgroundImage:
                      "linear-gradient(315deg, #63d471 0%, #233329 74%)",
                  }}
                >
                  Sign In
                </Button>
                <Grid container justifyContent="flex-end">
                  <Grid item xs>
                    <Link
                      style={{
                        color: " #63d471",
                        textDecoration: 'none'
                      }}
                      variant="body2"
                    >
                      <div onClick={() => setOpen2(true)}>Free Trial</div>
                    </Link>
                  </Grid>
                  <Grid item>
                    <Link
                      style={{
                        color: " #63d471",
                        textDecoration: 'none'
                      }}
                      href="/register"
                      variant="body2"
                    >
                      {"Don't have an account? Sign Up"}
                    </Link>
                  </Grid>
                </Grid>
                <Copyright sx={{ mt: 5 }} />
              </Box>
            </Box>
          </Grid>
        </Grid>
        {open2 ? <Modal open2={true} setOpen2={setOpen2} /> : null}
      </ThemeProvider>
    );
  }
  