init

tasks/podcast-tui-app/25-code-validation.md

@@ -0,0 +1,69 @@
+# 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