Untitled

import React, { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';
import brand from 'enl-api/dummy/brand';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import Hidden from '@material-ui/core/Hidden';
import { NavLink } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import { LoginFormFirebase } from 'enl-components';
import logo from 'enl-images/logo-dark-icon.png';
import styles from 'enl-components/Forms/user-jss';
import { FormattedMessage } from 'react-intl';
import { loginWithEmail } from 'enl-redux/actions/authActions';
import messages from './messages';
import { Box, Grid } from '@mui/material';
import "./login.css";

function Login(props) {
  const { classes, handleLogin } = props;
  const title = brand.name + ' - Login';
  const description = brand.desc;
  const [valueForm, setValueForm] = useState(null);

  const submitForm = (values) => setValueForm(values);

  useEffect(() => {
    if (valueForm) {
      handleLogin(valueForm.email, valueForm.password); // eslint-disable-line
    }
  }, [valueForm]);

  return (
    <div id="loginpage" className={classes.rootFull}>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="twitter:title" content={title} />
        <meta property="twitter:description" content={description} />
      </Helmet>

      <Grid container style={{ height: "100vh" }}>
        {/* Left side with the background image */}
        <Grid
          id="bglogind"
          item
          xs={12}
          md={7}
          style={{
            backgroundImage: `url('./new2.png')`, // Add the path to your image
            backgroundSize: "cover",
            backgroundPosition: "center",
          }}
        />

        <Grid
          item
          xs={12}
          md={5}
          container
          alignItems="center"
          justifyContent="center"
          style={{ width: "100%" }}
        >
          <Box
            display="flex"
            flexDirection="column"
            alignItems="center"
            style={{ width: "100%", position:"relative" }}
          >
            <LoginFormFirebase onSubmit={(values) => submitForm(values)} />
          </Box>
        </Grid>
      </Grid>
    </div>
  );
}

Login.propTypes = {
  classes: PropTypes.object.isRequired,
  handleLogin: PropTypes.func.isRequired,
};

function LoginWrap(props) {
  const { handleLoginWithEmail } = props;
  const LoginStyled = withStyles(styles)(Login);
  return (
    <LoginStyled handleLogin={handleLoginWithEmail} />
  );
}

LoginWrap.propTypes = {
  handleLoginWithEmail: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
  state: state.authReducer
});

const mapDispatchToProps = dispatch => ({
  handleLoginWithEmail: bindActionCreators(loginWithEmail, dispatch)
});

const LoginMapped = connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginWrap);

export default LoginMapped;