From fb4430c348b08ba046d337182362f323f4d5203b Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Thu, 29 Apr 2021 15:29:23 +0200
Subject: [PATCH] Create SignUpForm
---
.../AuthUser/SignUpForm/SignUpForm.test.tsx | 10 ++
.../AuthUser/SignUpForm/SignUpForm.tsx | 152 ++++++++++++++++++
.../AuthUser/SignUpForm/useStyles.ts | 18 +++
3 files changed, 180 insertions(+)
create mode 100644 src/components/AuthUser/SignUpForm/SignUpForm.test.tsx
create mode 100644 src/components/AuthUser/SignUpForm/SignUpForm.tsx
create mode 100644 src/components/AuthUser/SignUpForm/useStyles.ts
diff --git a/src/components/AuthUser/SignUpForm/SignUpForm.test.tsx b/src/components/AuthUser/SignUpForm/SignUpForm.test.tsx
new file mode 100644
index 0000000..0b7bcb9
--- /dev/null
+++ b/src/components/AuthUser/SignUpForm/SignUpForm.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SignUpForm } from './SignUpForm';
+
+describe('<SignUpForm />', () => {
+ it('should render form', () => {
+ const wrapper = render(<SignUpForm />);
+ expect(wrapper.queryByTestId('Form')).toBeTruthy();
+ });
+});
diff --git a/src/components/AuthUser/SignUpForm/SignUpForm.tsx b/src/components/AuthUser/SignUpForm/SignUpForm.tsx
new file mode 100644
index 0000000..e6c1ccb
--- /dev/null
+++ b/src/components/AuthUser/SignUpForm/SignUpForm.tsx
@@ -0,0 +1,152 @@
+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';
+
+export const SignUpForm: FC = () => {
+ interface 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) => {
+ // Submit data
+ };
+
+ 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="Email"
+ 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="Email"
+ 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="Email"
+ 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="cardNumber"
+ 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="Email"
+ 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>
+ </>
+ );
+};
diff --git a/src/components/AuthUser/SignUpForm/useStyles.ts b/src/components/AuthUser/SignUpForm/useStyles.ts
new file mode 100644
index 0000000..4a510bf
--- /dev/null
+++ b/src/components/AuthUser/SignUpForm/useStyles.ts
@@ -0,0 +1,18 @@
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ '& > *': {
+ margin: theme.spacing(0),
+ },
+ },
+ form: {
+ width: '100%', // Fix IE 11 issue.
+ marginTop: theme.spacing(1),
+ },
+ submit: {
+ margin: theme.spacing(3, 0, 2),
+ },
+ }),
+);
--
GitLab