Basic form api and implement cookie entrypoint

src/components/AuthUser/SignInForm/SignInForm.tsx

-import React, { useState } from 'react';
+import React, { FC } from 'react';
+import { useForm, Controller } from 'react-hook-form';
 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 { TextField, Button } from '@material-ui/core';
+import { DevTool } from '@hookform/devtools';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -20,69 +20,99 @@ 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, register, errors, handleSubmit } = useForm<FormData>({
+    mode: 'onChange',
+    reValidateMode: 'onChange',
+    defaultValues,
+  });
 
+  const onSubmit: any = (values: FormData) => {
+    // Send data
+  };
   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>
+        <Controller
+          name="email"
+          control={control}
+          defaultValues
+          rules={{
+            required: true,
+            pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+          }}
+          render={() => (
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+              error={Boolean(errors.email)}
+              helperText={errors.email && 'Incorrect entry.'}
+            />
+          )}
+        />
+
+        <Controller
+          name="password"
+          control={control}
+          defaultValues
+          rules={{
+            required: true,
+            min: 8,
+            max: 60,
+          }}
+          render={() => (
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="password"
+              autoFocus
+              error={Boolean(errors.password)}
+              helperText={errors.password && '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 */}
+    </>
   );
 };