Implement LoginPage component with authentication functionality

[Copilot]

This PR implements the complete LoginPage component with authentication functionality for the checkout flow, addressing all requirements specified in the issue.

Overview

The LoginPage component previously existed as a shell without actual login functionality. This implementation adds complete authentication capabilities including form fields, validation, API integration, and proper navigation flow.

Key Features Implemented

1. Field Component Enhancement

Enhanced the existing Field component with a new manageState property that allows disabling form data storage in the checkout form store. This enables password fields to bypass state management for security reasons while maintaining backward compatibility.

// Password field with disabled state storage
<Field
  name="password"
  form={form}
  type="password"
  manageState={false}  // New property prevents state storage
  className="mb-3"
/>

2. LoginFields Component

Replaced the stub implementation with a fully functional login form containing:

• Email field: Pre-filled from existing form data and disabled/readonly
• Password field: Uses manageState: false to prevent storage in form store
• Proper form validation using Zod schema
• Complete internationalization support

3. Authentication Service

Created a new authentication service following existing codebase patterns:

• Calls the edxapp login endpoint at ${LMS_BASE_URL}/api/user/v1/account/login_session/
• Integrates with setAuthenticatedUser from @edx/frontend-platform
• Returns proper TypeScript-typed responses

4. Route Protection

Implemented authentication checking that:

• Uses getAuthenticatedUser() to check current authentication state
• Automatically redirects to /plan-details if user is already logged in when accessing /plan-details/login
• Maintains proper navigation flow throughout the checkout process

5. Form Submission with React Query

Integrated React Query mutation for login handling:

• Shows loading state ("Signing in...") during authentication
• Navigates to /plan-details on successful login
• Proper error handling structure for failed login attempts
• Follows existing mutation patterns in the codebase

Technical Implementation

Schema and Type Updates

• Added LoginSchema with email and password validation using Zod
• Created LoginData type with full TypeScript integration
• Updated stepper constants to include login schema exports

Route Configuration

• Route: /plan-details/login (already configured)
• Step Title: "Plan Details"
• Substep Title: "Log in to your account"
• Proper integration with existing stepper navigation system

Form Handling

The implementation supports different form types for different pages within the same component:

• PlanDetailsData for the main plan details form
• LoginData for the login form
• Proper form state management and validation for each context

Testing

• All existing tests continue to pass
• Added proper mocks for React Query mutations and authentication functions
• TypeScript compilation passes without errors
• Build process succeeds with no warnings

Code Quality

• Follows existing codebase patterns and conventions
• Maintains backward compatibility for all existing functionality
• Comprehensive TypeScript typing throughout
• Proper separation of concerns between authentication, form handling, and navigation
• Clean integration with existing stepper and form state management systems

The login functionality is now fully implemented and ready for backend integration. The authentication service is configured to work with the edxapp login endpoint, and all form handling, validation, and navigation flows are properly implemented according to the requirements.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.