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: "[email protected]". 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

<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

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

Email Input

<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="[email protected]" />
  </div>
</div>

Password Input

<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

<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

<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

<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

<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

<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	[email protected]
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.