[Feature] Implement Login and Signup for Client-Side

[abhijeetnishal]

Description:

We need to implement a responsive and visually appealing login and signup page for the client-side of our URL Shortener application. The page should be designed with a focus on user experience and should be fully functional, allowing users to successfully log in and sign up for an account.

Requirements:

• The login and signup pages should be built using Next.js with TypeScript.
• The design should be responsive, meaning it should adapt to different screen sizes and devices (desktop, tablet, mobile).
• The pages should be styled using Tailwind CSS.
• The login page should include the following fields:
  • Username or email address
  • Password
  • Login button
• The signup page should include the following fields:
  • name
  • email address
  • Password
  • Confirm password
  • Signup button
• Both pages should include error handling and validation for the input fields.
• The pages should be accessible and follow best practices for web accessibility.
• The design should be consistent with the overall aesthetic of the application.

Functional Requirements:

• The login page should authenticate users and redirect them to the dashboard or main application page upon successful login.
• The signup page should create a new user account and redirect them to the dashboard or main application.
• Both pages should handle errors and exceptions gracefully, providing user-friendly error messages.

Acceptance Criteria:

• The login and signup pages are fully functional and responsive.
• The design is consistent with the overall aesthetic of the application.
• The implementation meets the technical requirements and follows best practices.
• The code is well-organized, modular, and easy to maintain.

[rahul-2004-json]

@abhijeetnishal plz assign this feature to me under GSSOC'24. I am really eager to contribute and make this login and signup page for client side

[abhijeetnishal]

Hey @rahul-2004-json, share the UI you are planning to use for login/signup according to this project. Assigning this issue to you now.

[rahul-2004-json]

@abhijeetnishal thank you for assigning me this issue. I will do my best to complete the task

[abhijeetnishal]

Hey @rahul-2004-json, please share design/UI you are referencing before implementing so that we can verify design/UI looks good to this project or not.

[rahul-2004-json]

Will change it to dark mode as per application design I will try to implement anyone of the above with form validation and mongo dB connection also ... if there will be a need for different ui I will definitley change it ... if you have any suggestion you can tell me I will try to implement in that way.

[abhijeetnishal]

Hey @rahul-2004-json, use this UI for login/register page it looks clean. This UI is official tailwind site: https://tailwindui.com/components/application-ui/forms/sign-in-forms

Hey login and signup API endpoint is in progress #16 so don't need to worry about server focus on client side.

[rahul-2004-json]

Ok I will do it this way !!

[Manaswini123456]

@abhijeetnishal Kindly assign me with this issue, as I have worked with similar type in the past. I would like to provide my insights and solutions.

[prajna321]

@abhijeetnishal I'd love to work on it . Please assign me this issue!

[abhijeetnishal]

Hey @Manaswini123456, the issue is already assigned to @rahul-2004-json. Work on other issues or project, good luck

[Manaswini123456]

@abhijeetnishal will look into it. Thanks!