SignInForm.tsx

import React, { FC, useContext, useEffect, useState } from 'react';
import axios from 'axios';
import { SubmitHandler, useForm } from 'react-hook-form';
import { Button } from '@material-ui/core';
import { InputField } from 'components/AuthUser/InputField/InputField';
import { useHistory } from 'react-router-dom';
import { AuthRoutes } from 'api/routes';
import { AuthContext } from 'components/AuthUser/AuthContext';
import { useStyles } from './useStyles';
import { fetchCookie } from './fetchCookie';
import { CredentialsType } from './CredentialsType';

const defaultValues: CredentialsType = {
  username: '',
  password: '',
};

export const SignInForm: FC = () => {
  const [isCookieFetched, setIsCookieFetched] = useState<string>('');

  useEffect(() => {
    if (!isCookieFetched) fetchCookie(setIsCookieFetched);
  }, [isCookieFetched]);

  const history = useHistory();
  const { setRole } = useContext(AuthContext);

  const { control, errors, setError, handleSubmit } = useForm<CredentialsType>({
    defaultValues,
  });

  const onSubmit: SubmitHandler<CredentialsType> = (
    values: CredentialsType,
  ) => {
    axios
      .post(
        '/api/web/login',
        {
          username: values.username,
          password: values.password,
          csrfmiddlewaretoken: isCookieFetched,
        },
        {
          headers: {
            'Content-Type': 'application/json',
          },
        },
      )
      .then((response) => {
        if (response.data.status === 'fail') {
          setError('username', {
            type: 'server',
            message: 'Something went wrong with username',
          });
          setError('password', {
            type: 'server',
            message: 'Something went wrong with password',
          });
        } else if (response.data.status === 'success') {
          setRole(response.data.role);
          history.replace(AuthRoutes.dashboard);
        }
      });
  };

  const classes = useStyles();
  return (
    <>
      <form
        className={classes.form}
        onSubmit={handleSubmit(onSubmit)}
        data-testid="Form"
      >
        <InputField
          name="username"
          control={control}
          rules={{
            required: {
              value: true,
              message: 'Username is not valid',
            },
          }}
          label="username"
          error={!!errors.username}
          errorMessage="Insert username"
        />

        <InputField
          name="password"
          control={control}
          rules={{
            minLength: 8,
            maxLength: 60,
            required: {
              value: true,
              message: 'Insert valid password',
            },
          }}
          label="Password"
          error={!!errors.password}
          errorMessage="Insert valid password"
        />

        <Button
          data-testid="Submit"
          type="submit"
          fullWidth
          variant="contained"
          color="primary"
          className={classes.submit}
        >
          Sign In
        </Button>
      </form>
    </>
  );
};