Sign up/Log in form nest into AuthUser

src/components/AuthUser/SignUpForm/SignUpForm.tsx

+import React, { FC } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { Button } from '@material-ui/core';
+import { InputField } from 'components/AuthUser/InputField/InputField';
+import { useStyles } from 'components/AuthUser/SignUpForm/useStyles';
+import axios from 'axios';
+
+export const SignUpForm: FC = () => {
+  type FormData = {
+    firstName: string;
+    lastName: string;
+    phoneNumber: number;
+    homeAddress: string;
+    cardNumber: number;
+    email: string;
+    password: string;
+  };
+
+  const { control, errors, handleSubmit } = useForm<FormData>();
+
+  const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
+    axios.post(
+      '/api/web/',
+      {
+        values,
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+  };
+
+  const classes = useStyles();
+  return (
+    <>
+      <form
+        className={classes.form}
+        onSubmit={handleSubmit(onSubmit)}
+        data-testid="Form"
+      >
+        <InputField
+          name="firstName"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[A-Za-z]$/.test(value),
+            required: {
+              value: true,
+              message: 'firstName is not valid',
+            },
+          }}
+          label="First name"
+          error={!!errors.firstName}
+          errorMessage="Insert firstName"
+        />
+
+        <InputField
+          name="lastName"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[A-Za-z]$/.test(value),
+            required: {
+              value: true,
+              message: 'lastName is not valid',
+            },
+          }}
+          label="Last name"
+          error={!!errors.lastName}
+          errorMessage="Insert lastName"
+        />
+
+        <InputField
+          name="phoneNumber"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[/d]$/.test(value),
+            required: {
+              value: true,
+              message: 'phoneNumber is not valid',
+            },
+          }}
+          label="Phone number"
+          error={!!errors.phoneNumber}
+          errorMessage="Insert phoneNumber"
+        />
+
+        <InputField
+          name="cardNumber"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[/d]$/.test(value),
+            required: {
+              value: true,
+              message: 'cardNumber is not valid',
+            },
+          }}
+          label="Card number"
+          error={!!errors.cardNumber}
+          errorMessage="Insert cardNumber"
+        />
+
+        <InputField
+          name="homeAddress"
+          control={control}
+          rules={{
+            validate: (value: string) => /^[A-Za-z]$/.test(value),
+            required: {
+              value: true,
+              message: 'homeAddress is not valid',
+            },
+          }}
+          label="Home address"
+          error={!!errors.homeAddress}
+          errorMessage="Insert homeAddress"
+        />
+
+        <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: 'Email is not valid',
+            },
+          }}
+          label="Email"
+          error={!!errors.email}
+          errorMessage="Insert email"
+        />
+
+        <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 Up
+        </Button>
+      </form>
+    </>
+  );
+};