ajaynegi33 / ajaynegi33/LibraryMan

[FEATURE] Implement Login and Signup Functionality (Frontend)

未关闭
#86 3 条评论 0 个 reaction 已指派 1 人 已被 @NidhiJain08 认领 在 GitHub 查看
enhancement good first issue hacktoberfest Hacktoberfest-accepted status: ready for dev
主要语言
JavaScript
星标
33
派生
25
PR 合并指标
30 天内没有已合并 PR

描述

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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。