[FEATURE] Implement Login and Signup Functionality (Frontend)

[ajaynegi45]

Is this feature already requested?

• [x] I have checked "open" and "closed" issues, and this is not a duplicate.

Feature Description

Develop and integrate a secure Login, Signup, and OTP verification feature, ensuring smooth user experience and secure authentication. This feature will involve only frontend UI design.

Backend:

• The backend is in Java spring boot. Repository - Issues

Design Resources:

• Figma Design

Requirements

Frontend:

• UI Design for the Login, Signup, and OTP Verification forms.
• Required fields:
  • Signup:
  • Username
  • Name
  • Email
  • Password
  • Confirm Password
  • Checkbox: "Get Upcoming Uttarakhand Festival & Fair Alerts!"
  • OTP input field (shown after submitting signup form)
  • Login:
  • Email or Username
  • Password
• OTP Flow:
  • After successful submission of the Signup form, the user should receive an OTP via email.
  • The user should enter the OTP on the verification screen to complete the signup process.
• Input validation (real-time feedback as the user types):
  • Password must meet the following criteria:
  • Minimum 8 characters.
  • At least one uppercase letter (A-Z).
  • At least one lowercase letter (a-z).
  • At least one number (0-9).
  • At least one special character (!, @, #, $, etc.).
  • Password confirmation should match the entered password.
  • Username should be unique.
  • OTP should be a 6-digit numeric code.
• Error/success messaging:
  • Display appropriate messages for password validation, OTP verification, and form submission status.
• Responsiveness: Ensure the design adapts seamlessly across various devices and screen sizes.
• Post-Login/Signup:
  • On successful signup and OTP verification, redirect the user to the homepage.
  • Replace the "Login" button with a profile icon once the user is authenticated.

[NidhiJain08]

Hi @ajaynegi45, I'd like to work on the signup and login pages for this issue, focusing on the frontend design and UI. Could you please assign this to me?

Thank you!

[ajaynegi45]

Hi @ajaynegi45, I'd like to work on the signup and login pages for this issue, focusing on the frontend design and UI. Could you please assign this to me?

Thank you!

Hi @NidhiJain08,

Thank you for expressing your interest in working on this issue. I'm delighted to inform you that I have assigned this issue to you. Your willingness to contribute to our project is much appreciated.

Before making any contributions, please read the Readme.md file carefully to better understand the project's goals and purpose. This will give you clarity on our mission. Also, make sure to review the Contributing.md file, which contains important guidelines to make the contribution process smoother, especially for newcomers.

Feel free to start working, and if you have any questions or need assistance during the process, please don't hesitate to reach out.

[NidhiJain08]

Hi @ajaynegi45,

I noticed that the issue shows "1 task done." Could you please let me know what has been completed so far? Also, should I create a separate button for the signup page or add a "Don’t have an account? Sign Up" link on the login page?