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

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