Sage/.planning/phases/01-authentication/01-03-PLAN.md

---
phase: 01-authentication
plan: 03
type: execute
wave: 2
depends_on: ["01-01", "01-02"]
files_modified: ["lib/features/authentication/presentation/pages/login_page.dart", "lib/features/authentication/presentation/pages/signup_page.dart", "lib/features/authentication/presentation/widgets/auth_form.dart", "lib/features/authentication/presentation/widgets/auth_button.dart"]
autonomous: true
user_setup: []

must_haves:
  truths:
    - "Login form accepts email and password input"
    - "Signup form accepts email and password input"
    - "Forms have proper validation and visual feedback"
    - "UI components are responsive and accessible"
  artifacts:
    - path: "lib/features/authentication/presentation/pages/login_page.dart"
      provides: "Login screen UI"
      min_lines: 40
    - path: "lib/features/authentication/presentation/pages/signup_page.dart"
      provides: "Signup screen UI"
      min_lines: 40
    - path: "lib/features/authentication/presentation/widgets/auth_form.dart"
      provides: "Reusable form components"
      min_lines: 30
    - path: "lib/features/authentication/presentation/widgets/auth_button.dart"
      provides: "Authentication buttons"
      min_lines: 20
  key_links:
    - from: "lib/features/authentication/presentation/pages/login_page.dart"
      to: "lib/features/authentication/presentation/widgets/auth_form.dart"
      via: "widget composition"
      pattern: "AuthForm|auth_form"
    - from: "lib/features/authentication/presentation/widgets/auth_form.dart"
      to: "lib/features/authentication/presentation/widgets/auth_button.dart"
      via: "button component usage"
      pattern: "AuthButton|auth_button"
---

<objective>
Create authentication UI screens with forms, validation, and reusable components.

Purpose: Provide user interface for signup and login flows with proper form validation and responsive design.
Output: Complete authentication screens ready to connect to auth repository implementation.
</objective>

<execution_context>
@~/.opencode/get-shit-done/workflows/execute-plan.md
@~/.opencode/get-shit-done/templates/summary.md
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/01-authentication/01-RESEARCH.md
</context>

<tasks>

<task type="auto">
  <name>Create reusable auth components</name>
  <files>lib/features/authentication/presentation/widgets/auth_form.dart, lib/features/authentication/presentation/widgets/auth_button.dart</files>
  <action>
    Create reusable widgets:
    
    1. AuthButton widget that:
       - Accepts onPressed callback, text, loading state
       - Shows loading indicator when disabled
       - Has proper styling and disabled states
       - Supports variant prop (primary, secondary)
       - Includes proper accessibility labels
    
    2. AuthForm widget that:
       - Accepts email and password field configurations
       - Provides form validation (email format, password strength)
       - Shows validation errors in real-time
       - Has onSubmit callback
       - Includes obscure text toggle for password
       - Proper text input types and keyboard types
       - Responsive layout for mobile/tablet
  </action>
  <verify>Widgets render without errors, handle user input properly, and show validation feedback</verify>
  <done>Reusable authentication components that handle form validation and user interactions</done>
</task>

<task type="auto">
  <name>Create login page</name>
  <files>lib/features/authentication/presentation/pages/login_page.dart</files>
  <action>
    Create LoginPage widget that:
    1. Uses AuthForm for email/password inputs
    2. Uses AuthButton for submit action
    3. Has "Forgot password?" link (placeholder for now)
    4. Has "Sign up" navigation link
    5. Properly handles form submission
    6. Shows loading states during authentication
    7. Has proper page structure with SafeArea
    8. Responsive design for different screen sizes
    9. Includes app bar if needed for navigation
    10. Proper accessibility labels and semantic structure
  </action>
  <verify>Login page renders correctly, form validation works, and all interactive elements respond to user input</verify>
  <done>Complete login screen ready to connect to authentication logic</done>
</task>

<task type="auto">
  <name>Create signup page</name>
  <files>lib/features/authentication/presentation/pages/signup_page.dart</files>
  <action>
    Create SignupPage widget that:
    1. Uses AuthForm for email/password inputs
    2. Includes password confirmation field
    3. Uses AuthButton for submit action
    4. Has "Sign in" navigation link
    5. Shows terms of service and privacy policy links (placeholder text)
    6. Properly handles form submission
    7. Shows loading states during registration
    8. Validates password matching
    9. Has proper page structure with SafeArea
    10. Responsive design for different screen sizes
    11. Includes app bar if needed for navigation
    12. Proper accessibility labels and semantic structure
  </action>
  <verify>Signup page renders correctly, form validation works for all fields, and password confirmation matches properly</verify>
  <done>Complete signup screen with password confirmation ready to connect to authentication logic</done>
</task>

</tasks>

<verification>
1. All authentication pages render without compilation errors
2. Form validation provides immediate and helpful feedback
3. Components are responsive across different screen sizes
4. Accessibility features work correctly (screen readers, semantic structure)
5. Loading states work properly during form submission
6. Navigation elements are present and functional (even if placeholder actions)
</verification>

<success_criteria>
Authentication UI is complete with proper form validation, responsive design, and reusable components ready for integration with auth logic.
</success_criteria>

<output>
After completion, create `.planning/phases/01-authentication/01-03-SUMMARY.md`
</output>