Api login

src/components/AuthUser/SignInForm/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';
@@ -40,7 +41,17 @@ export const SignInForm: FC = () => {
   });
 
   const onSubmit: any = (values: FormData) => {
-    alert(JSON.stringify(values));
+    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();
@@ -55,6 +66,14 @@ export const SignInForm: FC = () => {
           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"
@@ -70,6 +89,11 @@ export const SignInForm: FC = () => {
         <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"