# Page: Login

# Page Spec: Login

## Route
`/login`

## Architecture Status
**Core**

## Figma Reference
`login.png`

## Visual Description from Figma

The login page shows:

- **Top section:** Drop logo — green rounded square with white dollar-sign icon (with circular arrows around it) and a small gold/orange dot on the top-right corner of the icon. Below the icon: "drop" in bold serif font (Fraunces). Below that: "Enklere betalinger. Lavere gebyrer." in green italic text.
- **Form card:** White rounded card with subtle shadow containing:
  1. **E-postadresse** — label above, input field with mail/envelope icon on the left. Placeholder: "navn@eksempel.no". Field has light gray background with rounded corners and subtle border.
  2. **Passord** — label above, input field with lock icon on the left and an eye/visibility toggle icon on the right. Shows dots (password masked). Same styling as email field.
  3. **"Glemt passord?"** — right-aligned green link text below the password field.
  4. **"Logg inn"** button — full width, dark green background (`#0B6E35`), white text, rounded corners. Has a right arrow icon next to the text.
  5. **Divider:** **NOT IMPLEMENTED** (claimed in Figma spec but missing from code)
  6. **Social login buttons:** **NOT IMPLEMENTED** (BankID + Vipps claimed in Figma spec but missing from code)
- **Bottom text:** "Har du ikke konto? Opprett konto" — "Opprett konto" is a green bold link.

Background is light gray. The entire form is centered vertically and horizontally on the page.

## Page Layout

```
Full-page centered (no bottom nav — auth page)
├── Logo Section (centered)
│   ├── Drop icon (64x64)
│   ├── "drop" wordmark (Fraunces serif bold)
│   └── Tagline italic green
├── Form Card (white rounded)
│   ├── E-postadresse input (mail icon)
│   ├── Passord input (lock icon + eye toggle)
│   ├── "Glemt passord?" link (right-aligned) **NOT IMPLEMENTED** (href="#")
│   └── "Logg inn" button (green, full width, arrow icon)
└── "Har du ikke konto? Opprett konto" link
```

## Components

### Logo Block
```tsx
<div className="flex flex-col items-center space-y-2">
  <Image src="/drop-icon.png" alt="Drop" width={64} height={64} />
  <h1 className="font-[family-name:var(--font-fraunces)] text-3xl font-bold text-[#1A1A1A]">drop</h1>
  <p className="text-sm italic text-[#0B6E35]">Enklere betalinger. Lavere gebyrer.</p>
</div>
```

### Form Card
```tsx
<div className="rounded-2xl bg-white p-6 shadow-sm space-y-4">
  {/* form fields + buttons */}
</div>
```

### Email Input
```tsx
<div>
  <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">E-postadresse</label>
  <div className="relative">
    <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
    <input type="email" className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm outline-none transition-colors focus:border-[#0B6E35] focus:ring-1 focus:ring-[#0B6E35]" placeholder="navn@eksempel.no" />
  </div>
</div>
```

### Password Input
```tsx
<div>
  <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">Passord</label>
  <div className="relative">
    <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
    <input type={showPassword ? "text" : "password"} className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-10 text-sm outline-none transition-colors focus:border-[#0B6E35] focus:ring-1 focus:ring-[#0B6E35]" placeholder="........" />
    <button className="absolute right-3 top-1/2 -translate-y-1/2">
      <Eye className="h-4 w-4 text-[#9CA3AF]" />
    </button>
  </div>
  <div className="mt-1 text-right">
    <Link href="/forgot-password" className="text-xs font-medium text-[#0B6E35] hover:underline">Glemt passord?</Link>
  </div>
</div>
```

### Login Button
```tsx
<Button className="h-12 w-full rounded-xl bg-[#0B6E35] text-white text-sm font-semibold hover:bg-[#095C2C] transition-colors flex items-center justify-center gap-2">
  Logg inn
  <ArrowRight className="h-4 w-4" />
</Button>
```

### Divider
```tsx
<div className="flex items-center gap-3">
  <div className="h-px flex-1 bg-[#D1D5DB]" />
  <span className="text-xs font-medium tracking-wide text-[#9CA3AF]">ELLER LOGG INN MED</span>
  <div className="h-px flex-1 bg-[#D1D5DB]" />
</div>
```

### Social Login Buttons
```tsx
<div className="flex gap-3">
  <button className="flex h-12 flex-1 items-center justify-center gap-2 rounded-xl border border-[#E5E7EB] bg-white text-sm font-medium text-[#1A1A1A] transition-colors hover:bg-[#F9FAFB]">
    <Image src="/bankid-icon.png" alt="BankID" width={20} height={20} />
    BankID
  </button>
  <button className="flex h-12 flex-1 items-center justify-center gap-2 rounded-xl border border-[#E5E7EB] bg-white text-sm font-medium text-[#1A1A1A] transition-colors hover:bg-[#F9FAFB]">
    <Image src="/vipps-icon.png" alt="Vipps" width={20} height={20} />
    Vipps
  </button>
</div>
```

### Register Link
```tsx
<p className="text-center text-sm text-[#6B7280]">
  Har du ikke konto? <Link href="/register" className="font-semibold text-[#0B6E35] hover:underline">Opprett konto</Link>
</p>
```

### Error Message
```tsx
<p className="text-sm text-[#EF4444] bg-[#EF4444]/10 rounded-md p-2">{error}</p>
```

## Data Displayed
- Static form (no pre-loaded data)
- On submit: POST `/api/auth/login` with email + password
- On success: JWT set in httpOnly cookie, redirect to `/dashboard`

## User Interactions
| Element | Action | Result |
|---------|--------|--------|
| E-postadresse input | Type | Captures email |
| Passord input | Type | Captures password |
| Eye icon | Click | Toggle password visibility |
| "Glemt passord?" link | Click | Navigate to forgot password flow |
| "Logg inn" button | Click | POST /api/auth/login, on success redirect to /dashboard |
| BankID button | Click | Initiate BankID auth flow (research ongoing) |
| Vipps button | Click | Initiate Vipps auth flow (research ongoing) |
| "Opprett konto" link | Click | Navigate to /register |

### Validation Rules
| Field | Rule | Error Message |
|-------|------|---------------|
| E-postadresse | Required, valid email | Ugyldig e-postadresse |
| Passord | Required, min 1 char | Passord er paakrevd |
| Auth failure | Invalid credentials | Feil e-postadresse eller passord |

## Norwegian Labels
| Element | Norwegian Text |
|---------|---------------|
| Email label | E-postadresse |
| Email placeholder | navn@eksempel.no |
| Password label | Passord |
| Forgot password link | Glemt passord? |
| Login button | Logg inn |
| Divider text | ELLER LOGG INN MED |
| BankID button | BankID |
| Vipps button | Vipps |
| Register prompt | Har du ikke konto? |
| Register link | Opprett konto |

## Design Tokens
| Token | Value |
|-------|-------|
| Page bg | `#EEEEEE` |
| Card bg | `#FFFFFF` |
| Input bg | `#F9FAFB` |
| Primary | `#0B6E35` |
| Primary hover | `#095C2C` |
| Border | `#E5E7EB` |
| Divider | `#D1D5DB` |
| Text primary | `#1A1A1A` |
| Text muted | `#6B7280` |
| Text light | `#9CA3AF` |
| Error | `#EF4444` |
| Brand font | `font-[family-name:var(--font-fraunces)]` |
| Card radius | `rounded-2xl` |
| Input radius | `rounded-lg` |
| Button radius | `rounded-xl` |
| Input height | `h-11` |
| Button height | `h-12` |

## Bottom Navigation
**No** — this is an auth page, no bottom nav.