text: import * as React from 'react';
  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 Link from '@mui/material/Link';
  import Grid from '@mui/material/Grid';
  import Box from '@mui/material/Box';
  import PasswordOutlinedIcon from '@mui/icons-material/PasswordOutlined';
  import Typography from '@mui/material/Typography';
  import Container from '@mui/material/Container';
  import { createTheme, ThemeProvider } from '@mui/material/styles';
  import { forgotPassword } from '../utils/functions';
  
  const theme = createTheme();
  
  export default function ForgotPassword(props) {
    const handleSubmit = (event) => {
      event.preventDefault();
      const data = new FormData(event.currentTarget);
      const email = data.get('email');
  
      if (! /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
        alert("Email is not valid.");
        return
      }
      const req = {
        email: email
      };
  
      forgotPassword(req).then((res) => {
        console.log(res);
        if (res.status === 200) {
          alert("If the email is registered you'll receive an email to restore your password");
          props.history.push("/");
        } else {
          alert("An Error has ocurred");
        }
      })
  
    };
  
    return (
      <ThemeProvider theme={theme}>
        <Container component="main" maxWidth="xs">
          <CssBaseline />
          <Box
            sx={{
              marginTop: 8,
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
              <PasswordOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              Forgot Password
            </Typography>
            <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
              <TextField
                margin="normal"
                required
                fullWidth
                id="email"
                label="Email Address"
                name="email"
                autoComplete="email"
                autoFocus
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
              >
                Request password change
              </Button>
              <Grid container>
                <Grid item>
                  <Link href="/login" variant="body2">
                    Already have an account? Sign in
                  </Link>
                </Grid>
              </Grid>
            </Box>
          </Box>
        </Container>
      </ThemeProvider>
    );
  }