index.tsx

import React, { useState } from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      '& > *': {
        margin: theme.spacing(0),
      },
    },
    form: {
      width: '100%', // Fix IE 11 issue.
      marginTop: theme.spacing(1),
    },
    submit: {
      margin: theme.spacing(3, 0, 2),
    },
  }),
);

export const Form: React.FC = () => {
  interface formData {
    email: string;
    password: string;
    errors: Array<string>;
  }

  const defaultValues: formData = {
    email: '',
    password: '',
    errors: [],
  };
  const [formValues, setFormValues] = useState<formData>(defaultValues);

  const isEmailValid: any = () => {
    /**
     * The following is the RFC 5322 valid email regex
     * Hinted from question https://stackoverflow.com/questions/201323/how-to-validate-an-email-address-using-a-regular-expression
     * More on http://emailregex.com/
     */
    // eslint-disable-next-line
    const VALID_EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return VALID_EMAIL_REGEX.test(String(formValues.email).toLowerCase());
  };

  const handleSubmit: any = (event: any) => {
    event.preventDefault();
    const errors: Array<string> = [];
    if (!isEmailValid()) {
      errors.push('email');
      console.log('Email address not valid');
    } else {
      console.log(formValues);
    }
  };

  const classes = useStyles();

  return (
    <form className={classes.form} onSubmit={handleSubmit}>
      <TextField
        variant="outlined"
        margin="normal"
        required
        fullWidth
        id="email"
        label="Email Address"
        name="email"
        autoComplete="email"
        autoFocus
        onChange={(event) =>
          setFormValues({ ...formValues, email: String(event.target.value) })
        }
      />
      <TextField
        variant="outlined"
        margin="normal"
        required
        fullWidth
        name="password"
        label="Password"
        type="password"
        id="password"
        autoComplete="current-password"
        onChange={(event) =>
          setFormValues({ ...formValues, password: String(event.target.value) })
        }
      />
      <Button
        type="submit"
        fullWidth
        variant="contained"
        color="primary"
        className={classes.submit}
      >
        Sign In
      </Button>
    </form>
  );
};