Frontend: Create the Sign-In Page and Implement Sign-In Logic Using Email and Password Only #9
Description
🎯 Objective
Develop a Sign-In Page that allows users to log into their accounts securely. The page should match the Figma design and include form validation, loading states, and error handling using React Query.
🔍 Context
The Sign-In Page is a crucial entry point for users. It should provide a smooth authentication experience with proper error feedback and a responsive UI.
📋 Tasks
- Create a
SignIn.tsxpage insidepages/auth/. - Implement a sign-in form with:
- Email and password fields.
- A submit button.
- A link to the Sign-Up Page.
- Validate inputs before submission.
- Implement React Query for handling authentication requests.
- Show loading states when signing in.
- Display error messages for incorrect credentials.
- Redirect users to the home page after a successful login.
💻 Technical Implementation
1️⃣ Create SignIn.tsx inside pages/auth/
2️⃣ Add a Route for Sign-In in routes/AppRoutes.tsx
3️⃣ Implement the Sign-In logic in services/AuthService.ts.
📌 Contributor Reminders
✅ Check the Contribution Guidelines before making changes:🔗 CONTRIBUTING.md
✅ Sync with the Latest Changes from the LogiQuest repository before working on this issue.
📝 Acceptance Criteria
✅ The Sign-In page matches the Figma design.
✅ Form validation prevents empty submissions.
✅ React Query handles authentication requests.
✅ Shows loading states and error messages.
✅ Redirects to the home page upon successful login.
💪 Skills Required
- React
- React Query
- API Integration
- Tailwind CSS
- React Router
📈 Difficulty
Medium
⏳ Timeframe
✅ Please complete this issue within 2 days of assignment to keep the project on track.