# Sign-In Page Alignment Update

## Summary

Update the sign-in page to feel like "one unified action" by aligning all authentication options (OAuth + email) with consistent full-width styling, inspired by Cloudflare's sign-in design.

## Current State

- OAuth buttons (Google/Apple) are left-aligned, partial width
- Email sign-in/registration accessed via text links that switch to separate form views
- Buttons feel like disconnected, separate actions

## Target State

- All authentication options vertically stacked with consistent full-width styling
- OAuth buttons followed by "OR" divider, then inline email/password form
- Toggle between sign-in and sign-up modes via text link (only difference: confirm password field)
- Smart defaults based on URL parameters

## Design Specification

### Layout (top to bottom)

1. **Heading** - "Access Your Dashboard" / "Subscribe to {Plan} Plan" (unchanged)
2. **Subtitle** - "Sign in to continue" (unchanged)
3. **Google OAuth button** - full-width, white bg, gray border, centered icon+text
4. **Apple OAuth button** - same styling as Google
5. **OR divider** - `#ffffff1a` lines with light accessible "OR" text centered
6. **Email input** - full-width
7. **Password input** - full-width
8. **Confirm Password input** - sign-up mode only, slides in/out with animation
9. **Submit button** - "Sign In" or "Create Account", matches OAuth button styling
10. **Toggle link** - "Don't have an account? Create one with email." (or inverse)
11. **Disclaimer** - "By signing in, you agree to our terms of service and privacy policy."

### Behavior

| URL Pattern                | Default Mode | Form Fields                       |
| -------------------------- | ------------ | --------------------------------- |
| `/auth/signin`             | Sign In      | Email, Password                   |
| `/auth/signin?...plan=...` | Sign Up      | Email, Password, Confirm Password |

- Toggle link switches between modes
- Form values are **preserved** when switching modes
- Confirm password field **slides in/out** smoothly (height animation)
- Submit button text changes: "Sign In" ↔ "Create Account"

### Styling Details

**OAuth Buttons:**

- Width: 100% of container
- Height: 56px (h-14)
- Background: white
- Border: 1px solid gray-200
- Border radius: rounded-lg (8px)
- Text: gray-700, text-lg, font-medium
- Icon + text centered with gap-3

**OR Divider:**

- Lines: `#ffffff1a` (white at 10% opacity)
- Text: Light gray, accessible contrast on dark background
- Layout: flex with lines on each side of "OR" text

**Email Form Inputs:**

- Full-width
- Match existing input styling from EmailSignInForm/EmailRegistrationForm
- Consistent spacing between fields

**Submit Button:**

- Matches OAuth button styling exactly (white bg, gray border, centered text)
- Same height (h-14)

**Toggle Link:**

- Below submit button
- Muted text color with underline
- On click: toggles mode, preserves form values

**Disclaimer:**

- At very bottom
- Italic, muted text
- "By signing in, you agree to our terms of service and privacy policy."

---

## Implementation Plan

### Task 1: Create unified EmailAuthForm component

**File:** `app/auth/signin/EmailAuthForm.tsx`

Create a new component that combines sign-in and sign-up functionality:

- Props: `mode: 'signin' | 'signup'`, `onModeChange`, `callbackUrl`
- State: `email`, `password`, `confirmPassword`, `isLoading`, `error`
- Confirm password field visibility controlled by `mode` prop
- Slide animation for confirm password using CSS transitions
- Form values preserved across mode changes (lifted state or kept internal)
- Submit handler calls appropriate API based on mode

**Key implementation details:**

```typescript
interface EmailAuthFormProps {
  defaultMode: 'signin' | 'signup';
  callbackUrl: string;
  onSuccess?: () => void;
}
```

### Task 2: Create OR divider component

**File:** `app/auth/signin/OrDivider.tsx`

Simple presentational component:

- Horizontal flex container
- Two `<hr>` elements with `border-color: #ffffff1a`
- "OR" text in the middle with appropriate text color

### Task 3: Update SignInContent.tsx

**File:** `app/auth/signin/SignInContent.tsx`

Refactor to use new unified layout:

1. Remove the three-view system (`oauth`, `signin`, `register`)
2. Replace with single view containing:
   - OAuth buttons (keep existing, ensure full-width)
   - OrDivider component
   - EmailAuthForm component
   - Disclaimer text (move to bottom)

3. Determine default mode from props:

   ```typescript
   const defaultEmailMode = isSubscriptionFlow ? 'signup' : 'signin';
   ```

4. Pass mode and toggle handler to EmailAuthForm

### Task 4: Style OAuth buttons for full-width consistency

**File:** `app/auth/signin/SignInContent.tsx`

Verify/update OAuth button classes:

- Ensure `w-full` is applied
- Ensure consistent `h-14` height
- Ensure centered content with `justify-center`
- Current classes look correct, but verify rendered width

### Task 5: Handle form submission for both modes

**File:** `app/auth/signin/EmailAuthForm.tsx`

Sign-in mode:

- Call `signIn('credentials', { email, password, callbackUrl })`
- Handle errors (display inline)

Sign-up mode:

- Call `/api/auth/register` endpoint
- Handle email verification flow if enabled
- On success, either auto-sign-in or show verification UI

### Task 6: Add slide animation for confirm password

**File:** `app/auth/signin/EmailAuthForm.tsx` (or CSS module)

CSS transition for height/opacity:

```css
.confirm-password-container {
  overflow: hidden;
  transition:
    max-height 0.3s ease-out,
    opacity 0.3s ease-out;
}

.confirm-password-container.hidden {
  max-height: 0;
  opacity: 0;
}

.confirm-password-container.visible {
  max-height: 100px;
  opacity: 1;
}
```

### Task 7: Update tests

**Files:**

- `app/auth/signin/__tests__/SignInContent.test.tsx`
- Create `app/auth/signin/__tests__/EmailAuthForm.test.tsx`

Update/create tests for:

- Default mode based on subscription flow
- Mode toggle preserves form values
- Submit calls correct API based on mode
- Confirm password visibility matches mode

### Task 8: Remove deprecated components (after verification)

**Files to potentially remove:**

- `app/auth/signin/EmailSignInForm.tsx`
- `app/auth/signin/EmailRegistrationForm.tsx`
- Associated test files

Only remove after new implementation is working and tested.

---

## Verification Checklist

- [ ] OAuth buttons render full-width with consistent styling
- [ ] OR divider displays correctly with `#ffffff1a` lines
- [ ] Email form appears below OR divider
- [ ] Default mode is "Sign In" on `/auth/signin`
- [ ] Default mode is "Sign Up" on `/auth/signin?...plan=...`
- [ ] Toggle link switches mode
- [ ] Form values preserved when switching modes
- [ ] Confirm password slides in/out smoothly
- [ ] Sign-in submission works (credentials provider)
- [ ] Sign-up submission works (register API)
- [ ] Email verification flow works (if enabled)
- [ ] Disclaimer appears at bottom
- [ ] All existing tests pass or are updated
- [ ] Visual comparison matches design intent