ajaynegi33 / ajaynegi33/LibraryMan

[FEATURE] Implement Login and Signup Functionality (Frontend)

Open
#86 3 comments 0 reactions 1 assignee Claimed by @NidhiJain08 View on GitHub
enhancement good first issue hacktoberfest Hacktoberfest-accepted status: ready for dev
Dominant language
JavaScript
Stars
33
Forks
25
PR merge metrics
No merged PRs in 30d

Description

### 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](https://github.com/ajaynegi45/LibraryMan-API/tree/security) - [Issues](https://github.com/ajaynegi45/LibraryMan-API/issues/29)

### 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.