From c49d477e9060e44573c7b7f6da14a8116efd3dc8 Mon Sep 17 00:00:00 2001
From: fmazzini <fmazzini@unibz.it>
Date: Thu, 3 Jun 2021 19:55:07 +0200
Subject: [PATCH] Adjust Sign Up Page
---
src/components/Auth/SignInForm/SignInForm.tsx | 7 +-
src/components/Auth/SignInForm/useStyles.ts | 3 +
src/components/Auth/SignUpForm/SignUpForm.tsx | 365 ++++++++++--------
src/components/Auth/SignUpForm/useStyles.ts | 9 +
4 files changed, 227 insertions(+), 157 deletions(-)
diff --git a/src/components/Auth/SignInForm/SignInForm.tsx b/src/components/Auth/SignInForm/SignInForm.tsx
index 114d391..26aace7 100644
--- a/src/components/Auth/SignInForm/SignInForm.tsx
+++ b/src/components/Auth/SignInForm/SignInForm.tsx
@@ -134,7 +134,12 @@ export const SignInForm: FC = () => {
<MuiThemeProvider theme={themeResp}>
<Grid item container>
- <Grid item xs={12} color="primary">
+ <Grid
+ item
+ xs={12}
+ color="primary"
+ className={classes.paddingBottom}
+ >
<Typography>
New here?
<Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signUp}`}>
diff --git a/src/components/Auth/SignInForm/useStyles.ts b/src/components/Auth/SignInForm/useStyles.ts
index 8711ab2..3af22d1 100644
--- a/src/components/Auth/SignInForm/useStyles.ts
+++ b/src/components/Auth/SignInForm/useStyles.ts
@@ -17,5 +17,8 @@ export const useStyles = makeStyles((theme: Theme) =>
paddingTop: {
paddingTop: theme.spacing(10),
},
+ paddingBottom: {
+ paddingBottom: theme.spacing(10),
+ },
}),
);
diff --git a/src/components/Auth/SignUpForm/SignUpForm.tsx b/src/components/Auth/SignUpForm/SignUpForm.tsx
index b947b51..4a80095 100644
--- a/src/components/Auth/SignUpForm/SignUpForm.tsx
+++ b/src/components/Auth/SignUpForm/SignUpForm.tsx
@@ -1,7 +1,16 @@
import React, { FC } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
-import { Button } from '@material-ui/core';
-
+import {
+ Button,
+ createMuiTheme,
+ responsiveFontSizes,
+ MuiThemeProvider,
+ Grid,
+ Typography,
+ Link,
+ Hidden,
+} from '@material-ui/core';
+import { AuthRoutes, NonAuthRoutes } from 'api/routes';
import axios from 'axios';
import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from 'components/Auth/SignUpForm/useStyles';
@@ -21,6 +30,9 @@ export const SignUpForm: FC = () => {
notes: string;
};
+ let themeResp = createMuiTheme();
+ themeResp = responsiveFontSizes(themeResp);
+
const { control, errors, handleSubmit } = useForm<FormData>();
const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
@@ -55,166 +67,207 @@ export const SignUpForm: FC = () => {
const classes = useStyles();
return (
<>
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container>
+ <Grid item xs={12} color="primary" className={classes.paddingTop}>
+ <Typography variant="h1">SIGN UP</Typography>
+ </Grid>
+ </Grid>
+ </MuiThemeProvider>
+
<form
className={classes.form}
onSubmit={handleSubmit(onSubmit)}
data-testid="Form"
>
- <InputField
- name="email"
- type="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"
- type="password"
- control={control}
- rules={{
- minLength: 8,
- maxLength: 60,
- required: {
- value: true,
- message: 'Insert valid password',
- },
- }}
- label="Password"
- error={!!errors.password}
- errorMessage="Insert valid password"
- />
-
- <InputField
- name="username"
- type="text"
- control={control}
- rules={{
- maxLength: 150,
- required: {
- value: true,
- message: 'Insert valid username',
- },
- }}
- label="Username"
- error={!!errors.username}
- errorMessage="Insert valid username"
- />
-
- <InputField
- name="firstName"
- type="text"
- control={control}
- rules={{
- maxLength: 150,
- required: {
- value: true,
- message: 'Insert valid first name',
- },
- }}
- label="First name"
- error={!!errors.firstName}
- errorMessage="Insert valid first name"
- />
-
- <InputField
- name="lastName"
- type="text"
- control={control}
- rules={{
- maxLength: 150,
- required: {
- value: true,
- message: 'Insert valid last name',
- },
- }}
- label="Last name"
- error={!!errors.lastName}
- errorMessage="Insert valid last name"
- />
-
- <InputField
- name="address"
- type="text"
- control={control}
- rules={{
- required: {
- value: true,
- message: 'Insert valid address',
- },
- }}
- label="Address"
- error={!!errors.address}
- errorMessage="Insert valid address"
- />
-
- <InputField
- name="phoneNumber"
- type="number"
- control={control}
- rules={{
- maxLength: 15,
- required: {
- value: true,
- message: 'Insert valid phone number',
- },
- }}
- label="Phone number"
- error={!!errors.phoneNumber}
- errorMessage="Insert valid phone number"
- />
-
- <InputField
- name="memberCardNumber"
- type="number"
- control={control}
- rules={{
- maxLength: 20,
- required: {
- value: true,
- message: 'Insert valid card number',
- },
- }}
- label="Card number"
- error={!!errors.memberCardNumber}
- errorMessage="Insert valid card number"
- />
-
- <InputField
- name="notes"
- type="text"
- control={control}
- rules={{
- required: {
- value: true,
- message: 'Add notes',
- },
- }}
- label="Notes"
- error={!!errors.notes}
- errorMessage="Insert notes"
- />
-
- <Button
- data-testid="Submit"
- type="submit"
- fullWidth
- variant="contained"
- color="primary"
- className={classes.submit}
- >
- Sign Up
- </Button>
+ <Grid item container>
+ <Grid item xs={12} md={5}>
+ <InputField
+ name="firstName"
+ type="text"
+ control={control}
+ rules={{
+ maxLength: 150,
+ required: {
+ value: true,
+ message: 'Insert valid first name',
+ },
+ }}
+ label="First name"
+ error={!!errors.firstName}
+ errorMessage="Insert valid first name"
+ />
+ </Grid>
+
+ <Hidden mdDown>
+ <Grid item xs={2} />
+ </Hidden>
+
+ <Grid item xs={12} md={5}>
+ <InputField
+ name="lastName"
+ type="text"
+ control={control}
+ rules={{
+ maxLength: 150,
+ required: {
+ value: true,
+ message: 'Insert valid last name',
+ },
+ }}
+ label="Last name"
+ error={!!errors.lastName}
+ errorMessage="Insert valid last name"
+ />
+ </Grid>
+
+ <InputField
+ name="address"
+ type="text"
+ control={control}
+ rules={{
+ required: {
+ value: true,
+ message: 'Insert valid address',
+ },
+ }}
+ label="Address"
+ error={!!errors.address}
+ errorMessage="Insert valid address"
+ />
+
+ <Grid item xs={12} md={5}>
+ <InputField
+ name="phoneNumber"
+ type="number"
+ control={control}
+ rules={{
+ maxLength: 15,
+ required: {
+ value: true,
+ message: 'Insert valid phone number',
+ },
+ }}
+ label="Phone number"
+ error={!!errors.phoneNumber}
+ errorMessage="Insert valid phone number"
+ />
+ </Grid>
+
+ <Hidden mdDown>
+ <Grid item xs={2} />
+ </Hidden>
+
+ <Grid item xs={12} md={5}>
+ <InputField
+ name="memberCardNumber"
+ type="number"
+ control={control}
+ rules={{
+ maxLength: 20,
+ required: {
+ value: true,
+ message: 'Insert valid card number',
+ },
+ }}
+ label="Card number"
+ error={!!errors.memberCardNumber}
+ errorMessage="Insert valid card number"
+ />
+ </Grid>
+
+ <Grid item xs={12} className={classes.paddingBottomSmall}>
+ <InputField
+ name="notes"
+ type="text"
+ control={control}
+ rules={{
+ required: {
+ value: true,
+ message: 'Add notes',
+ },
+ }}
+ label="Notes"
+ error={!!errors.notes}
+ errorMessage="Insert notes"
+ />
+ </Grid>
+
+ <InputField
+ name="username"
+ type="text"
+ control={control}
+ rules={{
+ maxLength: 150,
+ required: {
+ value: true,
+ message: 'Insert valid username',
+ },
+ }}
+ label="Username"
+ error={!!errors.username}
+ errorMessage="Insert valid username"
+ />
+
+ <InputField
+ name="email"
+ type="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"
+ type="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>
+ </Grid>
</form>
+
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container>
+ <Grid item xs={12} color="primary" className={classes.paddingBottom}>
+ <Typography>
+ Already have an account?
+ <Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signIn}`}>
+ Log in.
+ </Link>
+ </Typography>
+ </Grid>
+ </Grid>
+ </MuiThemeProvider>
</>
);
};
diff --git a/src/components/Auth/SignUpForm/useStyles.ts b/src/components/Auth/SignUpForm/useStyles.ts
index 4a510bf..2928c57 100644
--- a/src/components/Auth/SignUpForm/useStyles.ts
+++ b/src/components/Auth/SignUpForm/useStyles.ts
@@ -14,5 +14,14 @@ export const useStyles = makeStyles((theme: Theme) =>
submit: {
margin: theme.spacing(3, 0, 2),
},
+ paddingTop: {
+ paddingTop: theme.spacing(10),
+ },
+ paddingBottom: {
+ paddingBottom: theme.spacing(10),
+ },
+ paddingBottomSmall: {
+ paddingBottom: theme.spacing(5),
+ },
}),
);
--
GitLab