SignInForm.tsx

import React, { FC } from 'react';
import axios from 'axios';
import { useForm, Controller, appendErrors } from 'react-hook-form';
import { useIntl } from 'react-intl';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import { TextField, Button } from '@material-ui/core';
import { DevTool } from '@hookform/devtools';
import { InputField } from './InputField';

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),
    },
  }),
);

// TODO: real time form validation
export const SignInForm: FC = () => {
  interface FormData {
    email: string;
    password: string;
  }

  const defaultValues: FormData = {
    email: '',
    password: '',
  };

  const { control, register, errors, handleSubmit } = useForm<FormData>({
    defaultValues,
  });

  const onSubmit: any = (values: FormData) => {
    axios
      .post('/api/web/login', {
        values,
        token: sessionStorage.getItem('CSRF_TOKEN'),
      })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  const intl = useIntl();
  const classes = useStyles();
  return (
    <>
      <form
        className={classes.form}
        onSubmit={handleSubmit(onSubmit)}
        data-testid="Form"
      >
        <Controller
          name="email"
          control={control}
          defaultValues
          rules={{
            validate: (value) =>
              /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
            required: {
              value: true,
              message: intl.formatMessage({ id: 'email' }),
            },
          }}
          render={({ onChange, value }) => (
            <InputField
              id="email"
              value={value}
              onChange={onChange}
              label={intl.formatMessage({ id: 'email' })}
              error={!!errors.email}
              errorMessage={intl.formatMessage({ id: 'error' })}
            />
          )}
        />

        <Controller
          name="password"
          control={control}
          rules={{
            minLength: 8,
            maxLength: 60,
            required: { value: true, message: 'You must enter your name' },
          }}
          render={({ onChange, value }) => (
            <InputField
              id="password"
              value={value}
              onChange={onChange}
              label="Password"
              error={!!errors.password}
              errorMessage="Incorrect entry."
            />
          )}
        />

        <Button
          type="submit"
          fullWidth
          variant="contained"
          color="primary"
          data-testid="Submit"
          className={classes.submit}
        >
          Sign In
        </Button>
      </form>
      <DevTool control={control} /> {/* set up the dev tool */}
    </>
  );
};