text: import { Link as RouterLink, useNavigate } from 'react-router-dom';
  import { Helmet } from 'react-helmet';
  import * as Yup from 'yup';
  import { Formik } from 'formik';
  import {
    Box,
    Button,
    Container,
    Grid,
    Link,
    TextField,
    Typography
  } from '@material-ui/core';
  import { firebaseLogin } from 'src/utils/FirebaseUtil';
  
  const Login = () => {
    const navigate = useNavigate();
  
    const iniciarSesion = async (credenciales) =>{
      let sessionStarted = await firebaseLogin(credenciales.email, credenciales.password);
  
      if(sessionStarted){
        navigate('/app/dashboard', { replace: true });
      }
      else{
        alert("Las credenciales no son correctas");
      }
    }
  
    return (
      <>
        <Helmet>
          <title>Login | Material Kit</title>
        </Helmet>
        <Box
          sx={{
            backgroundColor: 'background.default',
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
            justifyContent: 'center'
          }}
        >
          <Container maxWidth="sm">
            <Formik
              initialValues={{
                email: 'demo@devias.io',
                password: 'Password123'
              }}
              validationSchema={Yup.object().shape({
                email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
                password: Yup.string().max(255).required('Password is required')
              })}
              onSubmit={iniciarSesion}
            >
              {({
                errors,
                handleBlur,
                handleChange,
                handleSubmit,
                isSubmitting,
                touched,
                values
              }) => (
                <form onSubmit={handleSubmit}>
                  <Box sx={{ mb: 6 }}>
                    <Typography
                      color="textPrimary"
                      variant="h2"
                      align='center'
                    >
                      Sign in
                    </Typography>
                  </Box>
                  <TextField
                    error={Boolean(touched.email && errors.email)}
                    fullWidth
                    helperText={touched.email && errors.email}
                    label="Email Address"
                    margin="normal"
                    name="email"
                    onBlur={handleBlur}
                    onChange={handleChange}
                    type="email"
                    value={values.email}
                    variant="outlined"
                  />
                  <TextField
                    error={Boolean(touched.password && errors.password)}
                    fullWidth
                    helperText={touched.password && errors.password}
                    label="Password"
                    margin="normal"
                    name="password"
                    onBlur={handleBlur}
                    onChange={handleChange}
                    type="password"
                    value={values.password}
                    variant="outlined"
                  />
                  <Box sx={{ py: 2 }}>
                    <Button
                      color="primary"
                      disabled={isSubmitting}
                      fullWidth
                      size="large"
                      type="submit"
                      variant="contained"
                    >
                      Iniciar sesión
                    </Button>
                  </Box>
                  <Typography
                    color="textSecondary"
                    variant="body1"
                  >
                    Don&apos;t have an account?
                    {' '}
                    <Link component={RouterLink} to="/register" variant="h6" underline="hover">
                      Sign up
                    </Link>
                  </Typography>
                </form>
              )}
            </Formik>
          </Container>
        </Box>
      </>
    );
  };
  
  export default Login;
  