PodTui/tasks/podcast-tui-app/26-oauth-placeholders.md

25. Implement 8-Character Code Validation Flow

meta: id: podcast-tui-app-25 feature: podcast-tui-app priority: P2 depends_on: [24] tags: [code-validation, auth, sync, solidjs]

objective:

• Create 8-character code input component
• Implement code validation logic
• Handle code submission
• Show validation results

deliverables:

• src/components/CodeInput.tsx with code field
• src/utils/code-validator.ts with validation logic
• src/components/CodeValidationResult.tsx with result display

steps:

• Create src/utils/code-validator.ts:
  • validateCode(code: string): boolean
  • Check length (8 characters)
  • Check format (alphanumeric)
  • Validate against stored codes
• Create src/components/CodeInput.tsx:
  • 8-character code input
  • Auto-formatting
  • Clear button
  • Validation error display
• Create src/components/CodeValidationResult.tsx:
  • Success message
  • Error message
  • Retry button
  • Link to alternative auth

tests:

• Unit: Test code validation logic
• Unit: Test code input formatting
• Unit: Test validation result display

acceptance_criteria:

• Code input accepts 8 characters
• Validation checks length and format
• Validation results display correctly
• Error handling works

validation:

• Run application and test code validation
• Enter valid 8-character code
• Enter invalid code
• Test validation error display

notes:

• Code format: alphanumeric (A-Z, 0-9)
• No real backend validation
• Store codes in localStorage for testing
• Link to OAuth placeholder
• Link to email/password login