The signup page should contain the following fields and behaviors:
Acceptance criteria:
UI Components:
Header: "Sign Up" should be prominently displayed.
Username Field: A text field where users enter their desired username.
Email Field: A text field for entering the user’s email address.
Password Field: A password input field that hides characters by default.
Retype Password Field: A password confirmation field that validates against the Password field.
Login Button: If the user already has an account, provide a button/link to navigate to the Login page.
Sign in buttons : To make it easy for the users, add Sign in buttons with Google and github.
Tasks:
[ ] Username Already Exists Check:
When a user submits the form, if the username already exists in the database, show an error message:
"The user already exists, please choose a different username."
[ ] Password Validation:
The password field should validate the following criteria (as per the Login page's validation):
Must be at least 8 characters long.
Must contain at least one uppercase letter.
Must contain at least one lowercase letter.
Must contain at least one number.
Must contain at least one special character (e.g., @$!%*#?&).
The user should be able to toggle password visibility.
[ ] Password Matching:
As the user types in the Retype Password field, display a tick mark if the characters match the Password field.
Show feedback during typing indicating whether the passwords match.
[ ] Success and Error Messages:
After successful signup, display the following message:
"Successfully signed up! You can login now."
UI Design Reference:
Refer to the Figma Prototype for design inspiration. Implement the layout and UI to closely match the provided design.
Backend: Node.js, Express (for form submission handling)
Database: MongoDB (for storing user details)
Create a Signup page in the web application based on the following design reference:
https://www.figma.com/design/ywMImKNdRD9JRZ5Pz9BME6/Sign-Up-Page?node-id=0-1&t=sk5FPwE4anp05dSt-1
The signup page should contain the following fields and behaviors:
Acceptance criteria:
UI Components: Header: "Sign Up" should be prominently displayed. Username Field: A text field where users enter their desired username. Email Field: A text field for entering the user’s email address. Password Field: A password input field that hides characters by default. Retype Password Field: A password confirmation field that validates against the Password field. Login Button: If the user already has an account, provide a button/link to navigate to the Login page. Sign in buttons : To make it easy for the users, add Sign in buttons with Google and github.
Tasks:
Backend: Node.js, Express (for form submission handling) Database: MongoDB (for storing user details)