Basic form api and implement cookie entrypoint

src/components/AuthUser/SignInForm/SignInForm.tsx

-import React, { useState } from 'react';
+import React, { FC } from 'react';
+import axios from 'axios';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { useIntl } from 'react-intl';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
-import { isEmailValid } from './emailValidator';
+import { Button } from '@material-ui/core';
+import { DevTool } from '@hookform/devtools';
+import { InputField } from './InputField';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -21,68 +24,87 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export const SignInForm: React.FC = () => {
-  interface formData {
+// TODO: real time form validation
+export const SignInForm: FC = () => {
+  interface FormData {
     email: string;
     password: string;
-    errors: Array<string>;
   }
 
-  const defaultValues: formData = {
+  const defaultValues: FormData = {
     email: '',
     password: '',
-    errors: [],
   };
-  const [formValues, setFormValues] = useState<formData>(defaultValues);
 
-  const handleSubmit = (event: React.FormEvent): void => {
-    event.preventDefault();
-    const errors: Array<string> = [];
-    if (!isEmailValid(formValues.email)) errors.push('email');
-  };
+  const { control, errors, handleSubmit } = useForm<FormData>({
+    defaultValues,
+  });
 
+  const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
+    axios
+      .post('/api/web/login', {
+        values,
+      })
+      .then((response) => {
+        // Handle server reponse
+      })
+      .catch((error) => {
+        // Handle error
+      });
+  };
+  const intl = useIntl();
   const classes = useStyles();
-
   return (
-    <form className={classes.form} onSubmit={handleSubmit} data-testid="Form">
-      <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"
-        data-testid="Submit"
-        className={classes.submit}
+    <>
+      <form
+        className={classes.form}
+        onSubmit={handleSubmit(onSubmit)}
+        data-testid="Form"
       >
-        Sign In
-      </Button>
-    </form>
+        <InputField
+          name="email"
+          control={control}
+          rules={{
+            validate: (value: string) =>
+              /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
+            required: {
+              value: true,
+              message: intl.formatMessage({ id: 'email' }),
+            },
+          }}
+          label={intl.formatMessage({ id: 'email' })}
+          error={!!errors.email}
+          errorMessage={intl.formatMessage({ id: 'email-error' })}
+        />
+
+        <InputField
+          name="password"
+          control={control}
+          rules={{
+            minLength: 8,
+            maxLength: 60,
+            required: {
+              value: true,
+              message: intl.formatMessage({ id: 'password' }),
+            },
+          }}
+          label={intl.formatMessage({ id: 'password' })}
+          error={!!errors.password}
+          errorMessage={intl.formatMessage({ id: 'password-error' })}
+        />
+
+        <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 */}
+    </>
   );
 };