[LOGIN-101] Login Flow for CraftMerge Platform

[mehalyna]

🔐 User Story: Login Flow for CraftMerge Platform

🎯 Story Overview

As a
Registered user of CraftMerge,

I want to
log in to the platform using my email and password,

So that I can
access my personalized dashboard and use the platform's features.

---

✅ Acceptance Criteria

#	Criteria
1	The login form must have two required fields: Email and Password.
2	The "Увійти" (Login) button must be disabled until both fields are filled.
3	The email input must validate correct email format and display an error like: Введіть адресу електронної пошти у форматі name@example.com.
4	Incorrect credentials must result in an error message: Електронна пошта чи пароль вказані некоректно.
5	The "Забули пароль?" (Forgot Password?) link should lead to a password reset flow.
6	The "Зареєструйтесь" (Register) link below the login form should redirect to the registration page.
7	Input fields must display red borders and error text when validation fails.
8	Support copy-paste, password visibility toggle, and keyboard accessibility.

---

📲 UI/UX Notes

• Password visibility toggle (eye icon) allows users to view/hide their password input.
• All labels and error messages are shown in Ukrainian.
• Red border and error messages appear in real-time on validation failures.
• Login form is centered on the page for optimal user focus.
• Footer includes company information and navigation.

---

🔗 Dependencies

• Authentication API (with secure token generation)
• Password hashing and validation on backend
• Error messaging and translation support
• Link to password recovery page

---

🧪 Example Screens from UI Mockups

Screen	Description
🔘 Default	User sees a clean login screen with disabled login button
❌ Invalid Email	Email field shows error when format is incorrect
❌ Wrong Credentials	Message shown if login credentials don’t match
✅ Valid Format, Invalid Login	Green password input but credentials still rejected
✅ Attempt with Incorrect Email	System shows error for both email/password

---

📌 Navigation

• Увійти → Calls login API with entered credentials
• Забули пароль? → Redirects to password reset flow
• Зареєструйтесь → Redirects to registration form

---

📄 Error Messages (Ukrainian)

• Invalid email format: Введіть адресу електронної пошти у форматі name@example.com
• Incorrect credentials: Електронна пошта чи пароль вказані некоректно

🔧 Sub-tasks for LOGIN-101: User Login Flow

🛠 Frontend Implementation

• LOGIN-101-1: Design login form layout with fields for email and password
• LOGIN-101-2: Add real-time email format validation with error message display
• LOGIN-101-3: Add password input with toggle visibility functionality (eye icon)
• LOGIN-101-4: Disable "Увійти" button until both fields are non-empty
• LOGIN-101-5: Implement form error states with red borders and messages
• LOGIN-101-6: Add navigation to:
  • “Забули пароль?” → Password recovery flow
  • “Зареєструйтесь” → Registration page

---

🔐 Backend Integration

• LOGIN-101-7: Create secure login API endpoint to verify credentials
• LOGIN-101-8: Return detailed error codes for:
  • Invalid email format
  • Invalid email/password combo
• LOGIN-101-9: Implement rate limiting / basic brute-force protection
• LOGIN-101-10: Generate and return session token upon successful login

---

✅ Validation and Error Handling

• LOGIN-101-11: Display error: Введіть адресу електронної пошти у форматі name@example.com on invalid email
• LOGIN-101-12: Display error: Електронна пошта чи пароль вказані некоректно for incorrect credentials
• LOGIN-101-13: Clear validation messages upon field change or correction

---

🧪 QA & Testing

• LOGIN-101-14: Unit tests for frontend form validations
• LOGIN-101-15: Integration tests for login API with correct and incorrect data
• LOGIN-101-16: UI tests for:
  • Disabled state of submit button
  • Error display
  • Password toggle
• LOGIN-101-17: Cross-browser compatibility testing (Chrome, Firefox, Safari, Edge)
• LOGIN-101-18: Mobile responsiveness testing (iOS & Android)

---

📄 Documentation

• LOGIN-101-19: Document login API endpoint (method, params, responses)
• LOGIN-101-20: Add login flow to user manual or onboarding guide