Skip to content
Snippets Groups Projects
Commit c49d477e authored by fmazzini's avatar fmazzini
Browse files

Adjust Sign Up Page

parent 483e70b0
No related branches found
No related tags found
1 merge request!60New component to search senior (see #12). Enhance responsiveness and solve #10 and #11
Pipeline #12572 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/Auth/SignInForm/SignInForm.tsx
+ 6
− 1
View file @ c49d477e
......@@ -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? &nbsp;
<Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signUp}`}>
......
src/components/Auth/SignInForm/useStyles.ts
+ 3
− 0
View file @ c49d477e
......@@ -17,5 +17,8 @@ export const useStyles = makeStyles((theme: Theme) =>
paddingTop: {
paddingTop: theme.spacing(10),
},
paddingBottom: {
paddingBottom: theme.spacing(10),
},
}),
);
src/components/Auth/SignUpForm/SignUpForm.tsx
+ 209
− 156
View file @ c49d477e
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? &nbsp;
<Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signIn}`}>
Log in.
</Link>
</Typography>
</Grid>
</Grid>
</MuiThemeProvider>
</>
);
};
src/components/Auth/SignUpForm/useStyles.ts
+ 9
− 0
View file @ c49d477e
......@@ -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),
},
}),
);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment