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:
 
 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. 
 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. 
 "Glemt passord?" — right-aligned green link text below the password field. 
 "Logg inn" button — full width, dark green background ( #0B6E35 ), white text, rounded corners. Has a right arrow icon next to the text. 
 Divider: NOT IMPLEMENTED (claimed in Figma spec but missing from code) 
 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="navn@eksempel.no" />
 </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 
 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.