ajaynegi33/LibraryMan

[FEATURE] Implement Login and Signup Functionality (Frontend)

Aperta

#86 aperta il 29 set 2024

 (3 commenti) (0 reazioni) (1 assegnatario)JavaScript (25 fork)auto 404
Hacktoberfest-acceptedenhancementgood first issuehacktoberfeststatus: ready for dev

Metriche repository

Star
 (33 stelle)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

Is this feature already requested?

  • 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:

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.

Guida contributor