Signup Page

[06unnati]

Tracking Info

Resolves #3

Changes

• I created the sign up page which includes the name, email, password, and the submit button.

Testing

• ran npm run dev, and went to the local link to see what the output was.

Confirmation of Change

[Miyuki-L]

Looks great just needs to match the design.

[Miyuki-L]

Fix the linter warning

[Miyuki-L]

type="password"

[Miyuki-L]

can we add react-hook-form and zod here as well to handle the form data and validate

[Miyuki-L]

can we put the file under src/app/signup/page.tsx

having the folder signup is what next.js uses to create the routes and page.tsx is the confention for the fiel name

[Miyuki-L]

missing the purple border around linke in the design

and extra color difference around the actual form

see how the design looks from the figma

[Miyuki-L]

type="email"

[Miyuki-L]

wrong color for the buttons should be the purple button present in throughout the app with the same hover effect color

[Miyuki-L]

text is the wrong color

[r800360]

Hey Unnati, excellent work on this feature!

Helen is correct in the requested changes in that we need react-hook-form and zod here as well to handle the form data and validate.

A simple example is that I used fields - "Rohan", "Sachdeva", "notANEMAIL", and "notANEMAIL" for the four fields, which incorrectly Signed me up, so the email validation is not handled properly. I am not sure what the specific password requirements are but I see in the code that there is a minimum 8 characters, and other standard requirements that are not handled are:

At least 1 uppercase character.
At least 1 lowercase character.
At least 1 digit.
At least 1 special character.

The use of react-hook-form and zod should make it easier to handle these and other password requirements. I will leave the purple border and extra color difference around the form as issues for you to fix, but I made sure to fix the simpler things Helen described including:

-- moving the file under src/app/signup/page.tsx
-- the linter warning (type instead of an interface) - see line 5
-- text color - see lines 45 through 49
-- type="email" - see lines 83 through 94
-- type="password" - see lines 97 through 108
-- Update of color for the buttons to be the purple button presentin throughout the app with the same hover effect color as shown in Figma -- see lines 110 through 125

According to my manual testing, everything seems to still work the same.

On a separate note, it seems there are some issues with backend CI/CD that I will attempt to fix or simply revert for this PR to be merged in.

In summary, all that's left should be:
-- react-hook-form and zod to handle the form data and validate
-- purple border
-- extra color difference around the form

Make sure to pull the changes and best of luck completing the feature!

[Miyuki-L]

I would suggest writing your own css for the future as opossed to leveraging tailwind unless you really understand how to use tailwind and its applied rules.

[Miyuki-L]

keep the original page.tsx file.

[Miyuki-L]

To resolve this linter error you might need to do

  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    void handleSubmit(onSubmit)();
  };

and call this new function here instead of handleSubmit

[Miyuki-L]

There should be no package files in the root

[Miyuki-L]

There should be no backage files in the root. did you install react-hook-form by mistake in the root?

This should be in the frontend folder and react-hook-form is missing

[Miyuki-L]

Still doesn't match the designs.

Becaues of the way next.js works

the purple background should be applied conditionally in the layout.tsx page inside the app folder
because layout.tsx adds a padding which the thing giving you a white surrounding

[Miyuki-L]

having the max-w-md makes the component width too small

[Miyuki-L]

min-h-screen here is plus the padding added by the layout.tsx is causing the screen to scroll which is not what we want