70 lines
1.8 KiB
Markdown
70 lines
1.8 KiB
Markdown
# 24. Build Simple Login Screen (Email/Password)
|
|
|
|
meta:
|
|
id: podcast-tui-app-24
|
|
feature: podcast-tui-app
|
|
priority: P2
|
|
depends_on: [23]
|
|
tags: [login, auth, form, solidjs, opentui]
|
|
|
|
objective:
|
|
- Create login screen component
|
|
- Implement email input field
|
|
- Implement password input field
|
|
- Add login validation and error handling
|
|
|
|
deliverables:
|
|
- `src/components/LoginScreen.tsx` with login form
|
|
- `src/components/EmailInput.tsx` with email field
|
|
- `src/components/PasswordInput.tsx` with password field
|
|
- `src/components/LoginButton.tsx` with submit button
|
|
|
|
steps:
|
|
- Create `src/components/EmailInput.tsx`:
|
|
- Email input field using `<input>` component
|
|
- Email validation regex
|
|
- Error message display
|
|
- Focus state styling
|
|
- Create `src/components/PasswordInput.tsx`:
|
|
- Password input field
|
|
- Show/hide password toggle
|
|
- Password validation rules
|
|
- Error message display
|
|
- Create `src/components/LoginButton.tsx`:
|
|
- Submit button
|
|
- Loading state
|
|
- Disabled state
|
|
- Error state
|
|
- Create `src/components/LoginScreen.tsx`:
|
|
- Combine inputs and button
|
|
- Login form validation
|
|
- Error handling
|
|
- Link to code validation
|
|
- Link to OAuth placeholder
|
|
|
|
tests:
|
|
- Unit: Test email validation
|
|
- Unit: Test password validation
|
|
- Unit: Test login form submission
|
|
- Integration: Test login screen displays correctly
|
|
|
|
acceptance_criteria:
|
|
- Login screen accepts email and password
|
|
- Validation works correctly
|
|
- Error messages display properly
|
|
- Form submission handled
|
|
|
|
validation:
|
|
- Run application and navigate to login
|
|
- Enter valid credentials
|
|
- Enter invalid credentials
|
|
- Test error handling
|
|
|
|
notes:
|
|
- Use OpenTUI `<input>` component
|
|
- Email validation: regex pattern
|
|
- Password validation: minimum length
|
|
- No real authentication, just UI
|
|
- Link to code validation for sync
|
|
- Link to OAuth placeholder
|