# Page: Register

# Page Spec: Register

## Route
`/register`

## Architecture Status
**Core**

## Figma Reference
`onboarding.png`

## Implementation Status
**SPEC DOCUMENTS STEP 1 ONLY.** The actual implementation has 4 steps:
1. **Personal Info** (documented below) — name, email, phone, DOB, password
2. **Phone Verification** (NOT DOCUMENTED) — OTP input
3. **PIN Setup** (NOT DOCUMENTED) — 4-digit PIN with number pad
4. **Success Screen** (NOT DOCUMENTED) — welcome message + navigate to dashboard

This spec covers ONLY step 1. Steps 2-4 need separate specs or this spec needs expansion.

## Visual Description from Figma

The register page (called "Opprett konto" in Figma) has step 1 of 3:

- **Top section:** Drop logo (green rounded square with white $ icon and gold dot top-right), "drop" wordmark in bold serif font, tagline "Enklere betalinger. Lavere gebyrer." in green italic text.
- **Progress indicator:** Three-segment horizontal bar below the tagline. First segment is filled dark green (active), other two segments are light gray. This indicates "step 1 of 3" in a multi-step registration.
- **Form card:** White rounded card containing the form with heading "Opprett konto" in bold.
- **Form fields (6 total):**
  1. **Fornavn** and **Etternavn** — side by side in a 2-column layout. Each has a user icon (person outline) on the left. Placeholders: "Amir" / "Hadzic".
  2. **E-postadresse** — full width, mail/envelope icon left. Placeholder: "amir@eksempel.no".
  3. **Telefonnummer** — full width, phone icon left. Placeholder shows "+47" prefix.
  4. **Fodselsdato** — full width, calendar icon left. Placeholder: "mm/dd/yyyy". Has a calendar picker icon on the right.
  5. **Passord** — full width, lock icon left. Placeholder: "Minst 8 tegn". Eye/visibility toggle icon on the right.
- **"Fortsett" button:** Full-width green button below the card (appears slightly muted green, not as saturated as the login button).
- **Bottom text:** "Har du allerede konto? Logg inn" — "Logg inn" is a green link.

Background is light gray (`#EEEEEE`). All input fields have light gray backgrounds with subtle borders.

## Page Layout

```
Full-page centered (no bottom nav — auth page)
├── Logo Section (centered)
│   ├── Drop icon (64x64)
│   ├── "drop" wordmark (Fraunces serif bold)
│   └── Tagline italic green
├── Progress Bar (3 steps)
│   ├── Step 1: filled green (active)
│   ├── Step 2: gray
│   └── Step 3: gray
├── Form Card (white rounded)
│   ├── "Opprett konto" heading
│   ├── Row: Fornavn | Etternavn (2-col)
│   ├── E-postadresse input
│   ├── Telefonnummer input (+47)
│   ├── Fodselsdato input (date picker)
│   └── Passord input (toggle visibility)
├── "Fortsett" button (full width, outside card)
└── "Har du allerede konto? Logg inn" 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>
```

### Progress Bar (3-step)
```tsx
<div className="flex gap-2">
  <div className="h-1 flex-1 rounded-full bg-[#0B6E35]" />  {/* active */}
  <div className="h-1 flex-1 rounded-full bg-[#E5E7EB]" />  {/* inactive */}
  <div className="h-1 flex-1 rounded-full bg-[#E5E7EB]" />  {/* inactive */}
</div>
```

### Form Card
```tsx
<div className="rounded-2xl bg-white p-6 shadow-sm">
  <h2 className="mb-4 text-xl font-bold text-[#1A1A1A]">Opprett konto</h2>
  {/* form fields */}
</div>
```

### Name Fields (2-column)
```tsx
<div className="grid grid-cols-2 gap-3">
  <div>
    <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">Fornavn</label>
    <div className="relative">
      <User className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
      <input className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm" placeholder="Amir" />
    </div>
  </div>
  <div>
    <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">Etternavn</label>
    <div className="relative">
      <User className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
      <input className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm" placeholder="Hadzic" />
    </div>
  </div>
</div>
```

### Standard Input (email, phone, DOB, password)
```tsx
<div>
  <label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">{label}</label>
  <div className="relative">
    <Icon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
    <input 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]" />
  </div>
</div>
```

### Password Input (with eye toggle)
```tsx
<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" placeholder="Minst 8 tegn" />
  <button className="absolute right-3 top-1/2 -translate-y-1/2">
    <Eye className="h-4 w-4 text-[#9CA3AF]" />
  </button>
</div>
```

### Submit Button
```tsx
<Button className="h-12 w-full rounded-xl bg-[#0B6E35] text-white text-sm font-semibold hover:bg-[#095C2C] transition-colors">
  Fortsett
</Button>
```

### 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/register` with form data

## User Interactions
| Element | Action | Result |
|---------|--------|--------|
| Fornavn input | Type | Captures first name |
| Etternavn input | Type | Captures last name |
| E-postadresse input | Type | Captures email |
| Telefonnummer input | Type | Captures phone (+47 prefix) |
| Fodselsdato input | Click/type | Opens date picker, captures DOB |
| Passord input | Type | Captures password (min 8 chars) |
| Eye icon | Click | Toggle password visibility |
| "Fortsett" button | Click | Validate all fields, POST /api/auth/register, on success navigate to /login |
| "Logg inn" link | Click | Navigate to /login |

### Validation Rules
| Field | Rule | Error Message |
|-------|------|---------------|
| Fornavn | Required, min 2 chars | Fornavn er paakrevd |
| Etternavn | Required, min 2 chars | Etternavn er paakrevd |
| E-postadresse | Required, valid email format | Ugyldig e-postadresse |
| Telefonnummer | Required, starts with +47, 8 digits | Ugyldig telefonnummer |
| Fodselsdato | Required, age >= 18 | Du ma vaere minst 18 ar |
| Passord | Required, min 8 chars | Passordet ma vaere minst 8 tegn |

## Norwegian Labels
| Element | Norwegian Text |
|---------|---------------|
| Page heading | Opprett konto |
| First name label | Fornavn |
| Last name label | Etternavn |
| Email label | E-postadresse |
| Email placeholder | amir@eksempel.no |
| Phone label | Telefonnummer |
| Phone placeholder | +47 |
| DOB label | Fodselsdato |
| DOB placeholder | mm/dd/yyyy |
| Password label | Passord |
| Password placeholder | Minst 8 tegn |
| Submit button | Fortsett |
| Login prompt | Har du allerede konto? |
| Login link | Logg inn |

## Design Tokens
| Token | Value |
|-------|-------|
| Page bg | `#EEEEEE` |
| Card bg | `#FFFFFF` |
| Input bg | `#F9FAFB` |
| Primary | `#0B6E35` |
| Primary hover | `#095C2C` |
| Border | `#E5E7EB` |
| Progress active | `#0B6E35` |
| Progress inactive | `#E5E7EB` |
| Text primary | `#1A1A1A` |
| Text muted | `#6B7280` |
| Text light | `#9CA3AF` |
| Error | `#EF4444` |
| 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.