# Adaptive Sign-In Page Design

**Date:** 2025-11-11
**Route:** `/auth/signin`
**Purpose:** Single sign-in page that adapts for both new dealer subscriptions and returning dealer logins

---

## Overview

The `/auth/signin` page will serve two distinct user flows based on URL parameters:

1. **Subscription Flow** - New dealers subscribing to a plan
2. **Login Flow** - Returning dealers accessing their dashboard

This approach maintains a single sign-in page while providing contextually appropriate messaging and post-authentication flows.

---

## User Flows

### Subscription Flow

**Trigger:** URL includes `plan` parameter (e.g., `/auth/signin?plan=growth`)
**Source:** Subscribe buttons on `index.html`

**Left Panel:**

- Heading: "Subscribe to the {Plan} Plan"
- Subtitle: "Sign in to Continue"
- OAuth buttons (Google + Apple)
- Disclaimer: Terms and privacy policy

**Right Panel:**

- Heading: "What Happens Next?"
- Checklist items:
  - Authenticate with Google OAuth
  - Complete payment via Stripe
  - Set up your dealer page
  - Publish your site and go live!

**Post-Authentication:**

- Continue to Stripe checkout session
- Proceed through registration flow

---

### Login Flow

**Trigger:** No `plan` parameter in URL (e.g., `/auth/signin`)
**Source:** Login links (location TBD), bookmarks, direct navigation

**Left Panel:**

- Heading: "Access Your Dashboard"
- Subtitle: "Sign in to continue"
- OAuth buttons (Google + Apple)
- Disclaimer: Terms and privacy policy

**Right Panel:**

- Heading: "What's New"
- Placeholder update items (lorem ipsum for now):
  - New dealer information editor features
  - Enhanced performance dashboard now available
  - AMSOIL corporate content library updated
  - Mobile experience improvements

**Post-Authentication:**

- Redirect directly to `/dashboard`
- No subscription or registration flow

---

## Technical Implementation

### File Changes

**Primary file:** `app/auth/signin/page.tsx`

- Add conditional rendering based on `plan` parameter presence
- Maintain existing subscription flow when `plan` is present
- Add new login flow when `plan` is absent

**Reused components:**

- `RegistrationLogoBar` - Top branding bar
- `SignInContent` - OAuth button client component
- CSS variables from `app/styles/registration-theme.css`

**No new files required** - all functionality fits within existing structure.

### Conditional Logic

```typescript
// Detect flow type
const isSubscriptionFlow = !!planName;

// Conditional content
const heading = isSubscriptionFlow
  ? `Subscribe to the ${displayPlanName} Plan`
  : 'Access Your Dashboard';

const subtitle = isSubscriptionFlow
  ? 'Sign in to Continue'
  : 'Sign in to continue';

const rightPanelHeading = isSubscriptionFlow
  ? 'What Happens Next?'
  : 'What's New';
```

### Authentication Callback

**Subscription flow:**

- Existing behavior (callbackUrl with plan parameter)
- Continues to Stripe checkout

**Login flow:**

- New behavior: `callbackUrl="/dashboard"`
- Direct redirect to dashboard

---

## Design Consistency

Both flows maintain:

- Split-screen layout (content left, info panel right)
- Dark theme with navy background
- AMSOIL branding via RegistrationLogoBar
- Triangle divider between columns
- Responsive mobile stacking
- Same OAuth providers and styling

---

## Future Considerations

### Login Link Placement

Location for returning dealer login links is TBD. Potential options:

- Homepage navigation
- Dashboard "Login" link for logged-out users
- Email notifications
- Bookmark recommendation

### Right Panel Content

"What's New" section currently uses placeholder content. Future implementation could:

- Pull from CMS or database
- Show actual system announcements
- Display recent feature releases
- Personalize based on plan tier (post-authentication)

### Plan Detection for Logged-In Users

If a logged-in dealer visits `/auth/signin?plan=growth`:

- Could show upgrade/downgrade options
- Could redirect to plan management
- Could show "already subscribed" message

---

## Success Criteria

- [x] Single sign-in page serves both use cases
- [x] Clear visual distinction between subscription and login flows
- [x] No confusion between similar routes (`/login` vs `/signin`)
- [x] Maintains existing subscription flow without breaking changes
- [x] Provides appropriate post-auth redirect for each flow
- [x] Reuses existing components and styling