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: 
 
 Personal Info (documented below) — name, email, phone, DOB, password 
 Phone Verification (NOT DOCUMENTED) — OTP input 
 PIN Setup (NOT DOCUMENTED) — 4-digit PIN with number pad 
 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): 
 
 Fornavn and Etternavn — side by side in a 2-column layout. Each has a user icon (person outline) on the left. Placeholders: "Amir" / "Hadzic". 
 E-postadresse — full width, mail/envelope icon left. Placeholder: "amir@eksempel.no". 
 Telefonnummer — full width, phone icon left. Placeholder shows "+47" prefix. 
 Fodselsdato — full width, calendar icon left. Placeholder: "mm/dd/yyyy". Has a calendar picker icon on the right. 
 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 
 <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) 
 <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 
 <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) 
 <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) 
 <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) 
 <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 
 <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 
 <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.