MST-18: Create reusable Login component in component library

[devin-ai-integration]

MST-18: Create reusable Login component in component library

Summary

This PR creates a reusable Login component in the component library and replaces the existing login forms in browse-app, vg-browse, and my-account-app. The component is fully parameterized to support different themes, logos, and social sign-in options across all three applications.

Key Changes:

• Component Library: Added new Login component following the SearchBar pattern with Login.js, Login.css, and index.js
• Cross-app Integration: Successfully integrated the component into all three target applications
• Theme Customization: Component supports theme colors, brand logos, and configurable social login options
• Bug Fixes: Fixed React instance conflicts, removed duplicated white backgrounds, and updated viagogo theme to correct green color (#70b42c)
• CSS Conflict Resolution: Removed conflicting styles in my-account-app that caused social login buttons to overlap

Review & Testing Checklist for Human

⚠️ CRITICAL - Authentication Flow Testing (5 items):

• Test actual login authentication in all three apps - verify email/password login works end-to-end, not just UI rendering
• Verify social login buttons trigger correct authentication flows (Facebook, Apple, Google) in each app
• Test forgot password functionality works correctly in browse-app (has forgot password flow)
• Verify "Sign in with Email Code" button works in vg-browse and displays correct green theme
• Test responsive design on mobile devices across all three applications

Recommended Test Plan:

1. Start all three dev servers locally
2. Navigate to each login page and verify UI appearance matches brand expectations
3. Attempt actual login with test credentials in each app
4. Test social login buttons (may need test accounts)
5. Test forgot password flow in browse-app
6. Test on mobile devices and different browsers
7. Deploy to staging/preview environments and verify production builds work correctly

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TB
    CL["component-library/src/components/Login/"]:::major-edit
    CLIndex["component-library/src/index.js"]:::minor-edit
    
    BA["browse-app/src/Login.js"]:::major-edit
    BAApp["browse-app/src/App.css"]:::minor-edit
    
    VG["vg-browse/src/Login.js"]:::major-edit
    VGApp["vg-browse/src/App.css"]:::minor-edit
    
    MA["my-account-app/src/components/Login.tsx"]:::major-edit
    MASite["my-account-app/src/styles/site.css"]:::minor-edit
    
    CL --> BA
    CL --> VG  
    CL --> MA
    
    CLIndex -.-> CL
    BAApp -.-> BA
    VGApp -.-> VG
    MASite -.-> MA
    
    subgraph Legend
        L1["Major Edit"]:::major-edit
        L2["Minor Edit"]:::minor-edit
        L3["Context/No Edit"]:::context
    end
    
    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB
    classDef context fill:#FFFFFF

Loading

Notes

• React Instance Conflicts: Resolved by removing React from component library dependencies and using peerDependencies pattern. Used npm pack for Create React App environments.
• CSS Conflicts: Found and removed conflicting social login button styles in my-account-app/src/styles/site.css that were causing layout overlap issues.
• Theme Colors: viagogo now uses correct green theme (#70b42c) instead of purple, and all apps have proper theme color application.
• Build System Compatibility: Component works with both Create React App (browse-app, vg-browse) and Vite (my-account-app) build systems.

Session Details:

• Link to Devin run: https://app.devin.ai/sessions/8ff48278395143fd9afd3ed1402e0e17
• Requested by: @ben-windsurf
• JIRA Ticket: MST-18

⚠️ Important: This PR only includes UI component replacement. Actual authentication logic integration should be thoroughly tested before merging to ensure login flows work correctly in production.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring