Frontend: Refactor Login/Signup Modal

[laryhills]

🔐 Split Combined Login/Signup Modal into Separate Components

Description
Currently, the login and signup functionality is combined into a single LoginModal.tsx component that toggles between modes using an internal isSignup state. This creates a tightly coupled component that handles multiple responsibilities. Split this into separate, focused components and let the header determine whether to show the login or signup form in the popover content.

Current Implementation Issues

• Single component handles both login and signup logic
• Internal state switching between modes creates complexity
• Header has no control over which form to display initially
• Difficult to maintain and extend with additional auth flows

Proposed Components Structure

• LoginForm.tsx - Dedicated login component
• SignupForm.tsx - Dedicated signup component
• AuthModal.tsx - Wrapper component that renders the appropriate form based on props
• Header controls which auth mode to display via props

Tasks

1. Create separate LoginForm component

   • Extract login-specific fields (email, password)
   • Include "Remember me" checkbox
   • Include "Forgot Password" link
   • Handle login submission and validation
   • Maintain existing styling and UX

2. Create separate SignupForm component

   • Extract signup-specific fields (email, username, password)
   • Handle signup submission and validation
   • Include terms/policy acceptance if needed
   • Maintain existing styling and UX

3. Create AuthModal wrapper component

   • Accept mode prop ('login' | 'signup')
   • Render appropriate form based on mode
   • Handle modal close functionality
   • Maintain common modal styling and structure

4. Update Header component

   • Add state to track desired auth mode
   • Keep current "Login / Sign up" button trigger
   • Pass mode prop to AuthModal
   • Update popover content to use new AuthModal

5. Add cross-navigation between forms

   • Login form includes "Sign up" link that switches to signup mode
   • Signup form includes "Login" link that switches to login mode
   • Modal stays open during mode transitions
   • Smooth UX transition between forms

6. Preserve existing functionality

   • Google OAuth integration
   • Error handling and display
   • Loading states
   • Form validation
   • Success/redirect behavior
   • Modal close on outside interaction prevention

Acceptance Criteria

• Login and signup are separate, focused components
• Header can control which auth form to display via mode state
• Modal stays open when switching between login and signup modes
• Smooth navigation between authentication modes within the same modal
• All existing functionality is preserved (OAuth, validation, error handling)
• Components are reusable and can be used independently
• Clean separation of concerns between authentication modes
• Existing styling and UX patterns are maintained
• Current "Login / Sign up" button behavior is preserved
• No breaking changes to authentication flow

[laryhills]

Hi, I’d love to take this one!

✅ Plan: I’ll split the combined modal into LoginForm.tsx, SignupForm.tsx, and an AuthModal.tsx wrapper that accepts mode: 'login' | 'signup'. I’ll update the Header to control mode state and pass it to AuthModal, keep Google OAuth, validation, loading, and error handling intact, and add cross-links to switch modes without closing the modal (smooth transition). I’ll preserve styling/UX, prevent outside-close when disallowed, and ensure components are reusable and independently testable.

📌 Why Me: I’ve refactored complex auth UIs into modular forms before—maintaining OAuth flows and UX parity—so I can deliver a clean separation of concerns with zero regressions.

Recommended by OnlyDust for high-quality and dependable contributions.