Gjør /logg-inn til den ekte innloggingssiden

/logg-inn (clubhouse-palett, TeeCupAuth) var en foreldreløs V0-
utforskning -- ingenting i appen lenket eller redirectet dit, og
TeeCupAuth var 100% mock (sleep()-baserte stubber, hardkodet
demo-passord, falske invitasjonskoder, en falsk "2FA-kode sendes"-tekst
som aldri sendte noe). Flagget eksplisitt til bruker før arbeid startet,
siden dette er sikkerhetskritisk kode og omfanget var langt større enn
en ren redirect-ombytting.

Full port: ekte POST /auth/request-link, POST /auth/login-password
(identisk LoginResult-statushåndtering som den gamle LoginForm), GET
/public/tournaments/by-code/{code}. TwoFactorVerifyForm/
TwoFactorSetupForm gjenbrukt UENDRET (lavest mulig risiko for
sikkerhetskritisk 2FA-kode). app/page.tsx redusert til en tynn
videresending (autentisert -> /dashboard//account, uautentisert ->
/logg-inn), beholdt for gamle bokmerker. Gammel LoginForm slettet.
Alle ~11 uautentisert-redirect-steder (committet i forrige commit)
pekte allerede til /logg-inn.

Én reell bug funnet og rettet under scratch-verifisering:
app/logg-inn/page.tsx kalte redirect() INNI en try/catch som fanget
Next.js sin egen NEXT_REDIRECT-kontrollflyt-exception stille -- en
allerede innlogget bruker fikk se innloggingsskjemaet på nytt i stedet
for å bli sendt videre. Rettet ved å flytte redirect()-kallet utenfor
try/catch, samme mønster som den opprinnelige /-siden alltid brukte.

Se CHANGELOG.md punkt 42 for full verifiseringsdetalj.

frontend/app/logg-inn/page.tsx

@@ -1,4 +1,6 @@
 import type { Metadata } from "next"
+import { cookies } from "next/headers"
+import { redirect } from "next/navigation"
 import { TeeCupWordmark } from "@/components/teecup/wordmark"
 import { TeeCupAuth } from "@/components/teecup/teecup-auth"
 
@@ -7,7 +9,48 @@ export const metadata: Metadata = {
   description: "Logg inn på TeeCup for live-scoring og golfturneringer med vennegjengen, klubben eller bedriften.",
 }
 
-export default function LoggInnPage() {
+// Server-side, IKKE nettleser-fetch -- går derfor IKKE gjennom
+// next.config.mjs sin rewrites() (samme mønster som generateMetadata i
+// app/t/[id]/page.tsx og den forrige app/page.tsx). Peker direkte på API-et.
+const API_ORIGIN = process.env.TEECUP_API_ORIGIN || "http://localhost:8000"
+// Må matche SESSION_COOKIE_NAME i app/auth.py -- ingen delt konstant på
+// tvers av Python/TypeScript, samme mønster som andre API-kontrakt-felt
+// som dupliseres bevisst i frontend-koden.
+const SESSION_COOKIE_NAME = "teecup_session"
+
+export default async function LoggInnPage() {
+  // Samme allerede-innlogget-sjekk som /-siden hadde (2026-08-08: /logg-inn
+  // overtok rollen som ekte innloggingsside, se CHANGELOG.md) -- en bruker
+  // med gyldig sesjonscookie skal aldri se innloggingsskjemaet på nytt.
+  const cookieStore = await cookies()
+  const session = cookieStore.get(SESSION_COOKIE_NAME)
+  let authenticated = false
+  let profileComplete = true
+  if (session) {
+    try {
+      const res = await fetch(`${API_ORIGIN}/auth/me`, {
+        headers: { Cookie: `${SESSION_COOKIE_NAME}=${session.value}` },
+        cache: "no-store",
+      })
+      authenticated = res.ok
+      if (res.ok) {
+        const data = await res.json()
+        profileComplete = Boolean(data.profile_complete)
+      }
+    } catch {
+      // API utilgjengelig -- vis innloggingsskjemaet i stedet for å henge.
+      authenticated = false
+    }
+  }
+  // redirect() kaster en egen NEXT_REDIRECT-kontrollflyt-exception som MÅ
+  // boble videre til Next.js -- må derfor stå UTENFOR try/catch-en over
+  // (en catch der ville slukt den stille og latt innloggingsskjemaet vises
+  // i stedet for å omdirigere, reell bug funnet under scratch-verifisering
+  // 2026-08-08, se CHANGELOG.md).
+  if (authenticated) {
+    redirect(profileComplete ? "/dashboard" : "/account")
+  }
+
   return (
     <main className="relative flex min-h-dvh flex-col items-center justify-center overflow-hidden bg-clubhouse-bg px-4 py-8 text-clubhouse-ink">
       {/* Quiet turf-horizon backdrop — the one bit of atmosphere, kept subtle. */}

frontend/app/page.tsx

@@ -1,6 +1,5 @@
 import { cookies } from "next/headers"
 import { redirect } from "next/navigation"
-import { LoginForm } from "@/components/login-form"
 
 // Server-side, IKKE nettleser-fetch -- går derfor IKKE gjennom
 // next.config.mjs sin rewrites() (samme mønster som generateMetadata i
@@ -38,27 +37,15 @@ export default async function Page() {
       authenticated = false
     }
   }
-  if (authenticated) {
   // Obligatorisk profil-fullføring (2026-07-22): en innlogget bruker som
   // ennå ikke har fylt ut de obligatoriske profilfeltene sendes til
   // /account (som selv viser en fokusert fullførings-visning) i stedet
   // for dashbordet -- se AccountSettings sin profile_complete-gren.
-    redirect(profileComplete ? "/dashboard" : "/account")
+  //
-  }
+  // /logg-inn overtok rollen som ekte innloggingsside 2026-08-08 (se
-
+  // CHANGELOG.md) -- denne siden (root) er nå bare en tynn videresending,
-  return (
+  // beholdt for gamle bokmerker/lenker til teecup.golf/. Selve
-    <main className="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-5 py-10">
+  // innloggingsskjemaet (LoginForm, Forest Green) er fjernet -- erstattet
-      <div className="flex w-full max-w-sm flex-col gap-8">
+  // av TeeCupAuth (clubhouse-palett) på /logg-inn.
-        {/* Redesignet kort (2026-08-01, V0/Forest Green) har sin egen
+  redirect(authenticated ? (profileComplete ? "/dashboard" : "/account") : "/logg-inn")
-            innebygde header (logo + tittel/undertekst per tilstand) --
-            den forrige separate Wordmark+tagline-headeren over kortet er
-            derfor fjernet for å unngå dobbel "TeeCup"-overskrift. */}
-        <LoginForm />
-
-        <p className="text-center text-xs leading-relaxed text-muted-foreground text-pretty">
-          Ved å logge inn godtar du våre vilkår og personvernregler.
-        </p>
-      </div>
-    </main>
-  )
 }

frontend/components/login-form.tsx

@@ -1,675 +0,0 @@
-"use client"
-
-import type React from "react"
-import { useEffect, useRef, useState } from "react"
-import { useRouter } from "next/navigation"
-import {
-  Mail,
-  Lock,
-  KeyRound,
-  ArrowLeft,
-  CheckCircle2,
-  Eye,
-  EyeOff,
-  Flag,
-} from "lucide-react"
-import { TwoFactorSetupForm, TwoFactorVerifyForm } from "@/components/two-factor-flow"
-
-// Locked "Forest Green" palette (V0-redesign 2026-08-01, basert på Stitch --
-// se DESIGN_SYSTEM.md sitt notat om denne runden). Anvendt inline med vilje,
-// slik at ingenting tolkes om ved en senere V0-reeksport.
-const C = {
-  card: "rgba(255, 255, 255, 0.72)",
-  ink: "#012c11", // primærtekst + primærknapp-bakgrunn
-  inkOn: "#ffffff",
-  accent: "#1a4325", // mørkegrønne aksenter (header-gradient)
-  accentMuted: "#bfeec4", // dempet tekst PÅ mørkegrønn -- ALDRI #84b089/#a4a5a5 her (målt ~4.5:1, under vårt AAA-mål)
-  successBg: "#91f78e",
-  successInk: "#00731e",
-  muted: "#424941", // dempet brødtekst på hvit bakgrunn
-  border: "#c1c9bf",
-  fieldBg: "#ffffff",
-} as const
-
-const RESEND_COOLDOWN = 30 // seconds
-
-type SessionUser = {
-  id: string
-  email: string
-  display_name: string
-  preferred_locale: string
-}
-
-type LoginResult = {
-  status: "success" | "2fa_required" | "2fa_setup_required"
-  user?: SessionUser
-  two_factor_method?: "totp" | "email"
-}
-
-// ADR-021 Beslutning E: primær-autentisering (magic-link ELLER passord) kan
-// returnere tre ulike utfall -- delt mellom denne komponenten og
-// verify-form.tsx sin håndtering av magic-link-svaret.
-type PostAuthMode = "2fa-verify" | "2fa-setup" | null
-
-type Mode = "default" | "sent" | "password" | "join" | "verify"
-
-function isValidEmail(value: string) {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim())
-}
-
-export function LoginForm() {
-  const router = useRouter()
-  const [mode, setMode] = useState<Mode>("default")
-  const [postAuth, setPostAuth] = useState<PostAuthMode>(null)
-  const [twoFactorMethod, setTwoFactorMethod] = useState<"totp" | "email" | null>(null)
-  const [email, setEmail] = useState("")
-  const [emailTouched, setEmailTouched] = useState(false)
-  const [sending, setSending] = useState(false)
-  const [cooldown, setCooldown] = useState(0)
-  const [error, setError] = useState<string | null>(null)
-
-  const emailValid = isValidEmail(email)
-  const emailError = emailTouched && email.length > 0 && !emailValid
-
-  function handleLoginResult(result: LoginResult) {
-    if (result.status === "success") {
-      router.replace("/dashboard")
-    } else if (result.status === "2fa_required") {
-      setTwoFactorMethod(result.two_factor_method ?? "totp")
-      setPostAuth("2fa-verify")
-    } else {
-      setPostAuth("2fa-setup")
-    }
-  }
-
-  function handleTwoFactorSuccess() {
-    router.replace("/dashboard")
-  }
-
-  // Countdown timer for the resend cooldown.
-  useEffect(() => {
-    if (cooldown <= 0) return
-    const id = setInterval(() => setCooldown((c) => (c <= 1 ? 0 : c - 1)), 1000)
-    return () => clearInterval(id)
-  }, [cooldown])
-
-  async function sendLink() {
-    setSending(true)
-    setError(null)
-    try {
-      // Alltid samme suksess-respons uansett om e-posten finnes (anti-
-      // enumerering, se ADR-009) -- kun nettverks-/serverfeil havner i catch.
-      const res = await fetch("/auth/request-link", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ email: email.trim(), locale: "nb" }),
-      })
-      if (!res.ok) throw new Error(`request-link: ${res.status}`)
-      setMode("sent")
-      setCooldown(RESEND_COOLDOWN)
-    } catch {
-      setError("Klarte ikke å sende lenken. Sjekk tilkoblingen og prøv igjen.")
-    } finally {
-      setSending(false)
-    }
-  }
-
-  function submitDefault(e: React.FormEvent) {
-    e.preventDefault()
-    setEmailTouched(true)
-    if (!emailValid || sending) return
-    void sendLink()
-  }
-
-  function resend() {
-    if (cooldown > 0 || sending) return
-    void sendLink()
-  }
-
-  function backToDefault() {
-    setMode("default")
-    setEmailTouched(false)
-    setError(null)
-  }
-
-  return (
-    <div className="relative w-full">
-      {/* Soft green glow behind the card so the glass blur has something to work against */}
-      <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 overflow-visible">
-        <div
-          className="absolute -left-10 -top-12 size-40 rounded-full blur-3xl"
-          style={{ backgroundColor: "rgba(26, 67, 37, 0.18)" }}
-        />
-        <div
-          className="absolute -bottom-14 -right-8 size-44 rounded-full blur-3xl"
-          style={{ backgroundColor: "rgba(145, 247, 142, 0.28)" }}
-        />
-      </div>
-
-      <div
-        className="w-full overflow-hidden rounded-3xl border backdrop-blur-xl"
-        style={{
-          backgroundColor: C.card,
-          borderColor: C.border,
-          boxShadow: "0 24px 60px -24px rgba(1, 44, 17, 0.45), 0 8px 20px -12px rgba(1, 44, 17, 0.2)",
-        }}
-      >
-        {/* 2FA bruker de EKSISTERENDE, sikkerhetskritiske komponentene uendret
-            (egen intern overskrift) -- kun logo-raden fra det nye headeret
-            vises over dem, ikke tittel/undertekst-blokken, for å unngå
-            dobbel overskrift. */}
-        <CardHeader mode={mode} showTitle={postAuth === null} />
-
-        <div className="flex flex-col gap-6 p-6 sm:p-7">
-          {postAuth === "2fa-verify" ? (
-            <TwoFactorVerifyForm
-              method={twoFactorMethod ?? "totp"}
-              onSuccess={handleTwoFactorSuccess}
-              onBack={() => setPostAuth(null)}
-            />
-          ) : postAuth === "2fa-setup" ? (
-            <TwoFactorSetupForm forced onSuccess={handleTwoFactorSuccess} />
-          ) : mode === "default" ? (
-            <DefaultState
-              email={email}
-              setEmail={setEmail}
-              emailError={emailError}
-              onBlur={() => setEmailTouched(true)}
-              onSubmit={submitDefault}
-              sending={sending}
-              error={error}
-              onPassword={() => setMode("password")}
-              onJoin={() => setMode("join")}
-            />
-          ) : mode === "sent" ? (
-            <SentState
-              email={email}
-              cooldown={cooldown}
-              sending={sending}
-              error={error}
-              onResend={resend}
-              onBack={backToDefault}
-            />
-          ) : mode === "password" ? (
-            <PasswordState onResult={handleLoginResult} onBack={() => setMode("default")} />
-          ) : (
-            <JoinState onBack={() => setMode("default")} />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-/* --- Shared shell -------------------------------------------------------- */
-
-const HEADINGS: Record<Mode, { title: string; subtitle: string }> = {
-  default: {
-    title: "Velkommen til TeeCup",
-    subtitle: "Logg inn for å følge turneringen din live.",
-  },
-  sent: {
-    title: "Sjekk innboksen din",
-    subtitle: "Vi har sendt deg en sikker innloggingslenke.",
-  },
-  password: {
-    title: "Logg inn med passord",
-    subtitle: "Skriv inn e-post og passord for å fortsette.",
-  },
-  join: {
-    title: "Gå rett til turneringen",
-    subtitle: "Har du fått en invitasjonskode? Skriv den inn her.",
-  },
-  verify: {
-    title: "Bekreft innloggingen",
-    subtitle: "Vi har sendt en kode for å bekrefte at det er deg.",
-  },
-}
-
-function CardHeader({ mode, showTitle }: { mode: Mode; showTitle: boolean }) {
-  const { title, subtitle } = HEADINGS[mode]
-  return (
-    <div
-      className="flex flex-col items-center gap-3 px-6 pt-8 pb-6 text-center"
-      style={{
-        background: `linear-gradient(180deg, ${C.accent} 0%, #123019 100%)`,
-      }}
-    >
-      <div className="flex items-center gap-2.5">
-        <div
-          className="flex size-11 items-center justify-center rounded-2xl"
-          style={{ backgroundColor: "rgba(255,255,255,0.12)" }}
-        >
-          <Flag aria-hidden="true" className="size-6 text-brand-orange" fill="currentColor" />
-        </div>
-        <span className="text-2xl font-extrabold tracking-tight" style={{ color: C.inkOn }}>
-          TeeCup
-        </span>
-      </div>
-      {showTitle && (
-        <div className="flex flex-col gap-1">
-          <h1 className="text-xl font-bold tracking-tight text-balance" style={{ color: C.inkOn }}>
-            {title}
-          </h1>
-          <p className="text-sm leading-relaxed text-pretty" style={{ color: C.accentMuted }}>
-            {subtitle}
-          </p>
-        </div>
-      )}
-    </div>
-  )
-}
-
-/* --- Reusable field + button -------------------------------------------- */
-
-function FieldLabel({ htmlFor, children }: { htmlFor: string; children: React.ReactNode }) {
-  return (
-    <label htmlFor={htmlFor} className="text-sm font-semibold" style={{ color: C.ink }}>
-      {children}
-    </label>
-  )
-}
-
-function TextInput({
-  id,
-  icon: Icon,
-  invalid,
-  trailing,
-  ...props
-}: React.InputHTMLAttributes<HTMLInputElement> & {
-  id: string
-  icon: typeof Mail
-  invalid?: boolean
-  trailing?: React.ReactNode
-}) {
-  return (
-    <div className="relative">
-      <Icon
-        aria-hidden="true"
-        className="pointer-events-none absolute left-4 top-1/2 size-5 -translate-y-1/2"
-        style={{ color: C.muted }}
-      />
-      <input
-        id={id}
-        name={id}
-        className="h-14 w-full rounded-2xl border pl-12 pr-4 text-base font-medium outline-none transition-shadow placeholder:font-normal focus-visible:ring-2 focus-visible:ring-[#1a4325] focus-visible:ring-offset-1"
-        style={{
-          backgroundColor: C.fieldBg,
-          borderColor: invalid ? "#b3261e" : C.border,
-          color: C.ink,
-        }}
-        {...props}
-      />
-      {trailing}
-    </div>
-  )
-}
-
-function PrimaryButton({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
-  return (
-    <button
-      className="flex h-14 w-full items-center justify-center rounded-2xl text-base font-bold transition-opacity disabled:opacity-60"
-      style={{ backgroundColor: C.ink, color: C.inkOn }}
-      {...props}
-    >
-      {children}
-    </button>
-  )
-}
-
-function BackLink({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="inline-flex min-h-12 items-center justify-center gap-1.5 rounded-xl px-3 text-sm font-semibold transition-colors hover:underline"
-      style={{ color: C.accent }}
-    >
-      <ArrowLeft aria-hidden="true" className="size-4" />
-      {children}
-    </button>
-  )
-}
-
-function SecondaryLink({
-  icon: Icon,
-  children,
-  onClick,
-}: {
-  icon: typeof Lock
-  children: React.ReactNode
-  onClick: () => void
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className="inline-flex min-h-12 items-center gap-2.5 rounded-xl px-2 text-left text-sm font-semibold transition-colors hover:underline"
-      style={{ color: C.accent }}
-    >
-      <Icon aria-hidden="true" className="size-4 shrink-0" />
-      {children}
-    </button>
-  )
-}
-
-/* --- State 1: Default (magic link), ekte /auth/request-link -------------- */
-
-function DefaultState({
-  email,
-  setEmail,
-  emailError,
-  onBlur,
-  onSubmit,
-  sending,
-  error,
-  onPassword,
-  onJoin,
-}: {
-  email: string
-  setEmail: (v: string) => void
-  emailError: boolean
-  onBlur: () => void
-  onSubmit: (e: React.FormEvent) => void
-  sending: boolean
-  error: string | null
-  onPassword: () => void
-  onJoin: () => void
-}) {
-  return (
-    <form onSubmit={onSubmit} className="flex flex-col gap-6" noValidate>
-      <div className="flex flex-col gap-2">
-        <FieldLabel htmlFor="email">E-post</FieldLabel>
-        <TextInput
-          id="email"
-          icon={Mail}
-          type="email"
-          inputMode="email"
-          autoComplete="email"
-          autoFocus
-          placeholder="deg@epost.no"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          onBlur={onBlur}
-          invalid={emailError}
-          aria-invalid={emailError}
-          aria-describedby={emailError ? "email-error" : undefined}
-        />
-        {emailError && (
-          <p id="email-error" className="text-sm font-medium" style={{ color: "#b3261e" }}>
-            Skriv inn en gyldig e-postadresse.
-          </p>
-        )}
-      </div>
-
-      {error && (
-        <p role="alert" className="text-center text-sm font-medium" style={{ color: "#b3261e" }}>
-          {error}
-        </p>
-      )}
-
-      <PrimaryButton type="submit" disabled={sending}>
-        {sending ? "Sender …" : "Send innloggingslenke"}
-      </PrimaryButton>
-
-      <p className="text-center text-sm leading-relaxed text-pretty" style={{ color: C.muted }}>
-        Ingen passord nødvendig. Vi sender deg en sikker lenke på e-post.
-      </p>
-
-      <div className="flex flex-col gap-1 border-t pt-4" style={{ borderColor: C.border }}>
-        <SecondaryLink icon={Lock} onClick={onPassword}>
-          Logg inn med e-post og passord i stedet
-        </SecondaryLink>
-        <SecondaryLink icon={KeyRound} onClick={onJoin}>
-          Har du en invitasjonskode? Gå rett til turneringen
-        </SecondaryLink>
-      </div>
-    </form>
-  )
-}
-
-/* --- State 2: Link sent, ekte resend/cooldown ----------------------------- */
-
-function SentState({
-  email,
-  cooldown,
-  sending,
-  error,
-  onResend,
-  onBack,
-}: {
-  email: string
-  cooldown: number
-  sending: boolean
-  error: string | null
-  onResend: () => void
-  onBack: () => void
-}) {
-  const liveRef = useRef<HTMLDivElement>(null)
-  useEffect(() => {
-    liveRef.current?.focus()
-  }, [])
-
-  return (
-    <div className="flex flex-col items-center gap-5 text-center">
-      <div
-        ref={liveRef}
-        tabIndex={-1}
-        className="flex size-16 items-center justify-center rounded-2xl outline-none"
-        style={{ backgroundColor: C.successBg }}
-      >
-        <CheckCircle2 aria-hidden="true" className="size-9" style={{ color: C.successInk }} />
-      </div>
-
-      <div className="w-full rounded-2xl px-4 py-3" style={{ backgroundColor: C.successBg }} aria-live="polite">
-        <p className="text-sm font-semibold leading-relaxed" style={{ color: C.successInk }}>
-          Lenke sendt til <span className="font-extrabold">{email || "din e-post"}</span>
-        </p>
-      </div>
-
-      <p className="text-sm leading-relaxed text-pretty" style={{ color: C.muted }}>
-        Åpne lenken på denne enheten for å logge inn. Det kan ta et minutt før den kommer frem.
-      </p>
-
-      {error && (
-        <p role="alert" className="text-sm font-medium" style={{ color: "#b3261e" }}>
-          {error}
-        </p>
-      )}
-
-      <div className="w-full">
-        {cooldown > 0 ? (
-          <p className="text-sm" style={{ color: C.muted }} aria-live="polite">
-            Fikk du ingen e-post? Send igjen om{" "}
-            <span className="font-bold tabular-nums" style={{ color: C.ink }}>
-              {cooldown}s
-            </span>
-          </p>
-        ) : (
-          <button
-            type="button"
-            onClick={onResend}
-            disabled={sending}
-            className="inline-flex min-h-12 items-center justify-center rounded-xl px-4 text-sm font-bold transition-opacity hover:underline disabled:opacity-60"
-            style={{ color: C.ink }}
-          >
-            {sending ? "Sender …" : "Send lenken igjen"}
-          </button>
-        )}
-      </div>
-
-      <div className="w-full border-t pt-4" style={{ borderColor: C.border }}>
-        <BackLink onClick={onBack}>Bruk en annen e-postadresse</BackLink>
-      </div>
-    </div>
-  )
-}
-
-/* --- State 3: Password, ekte /auth/login-password ------------------------ */
-
-function PasswordState({
-  onResult,
-  onBack,
-}: {
-  onResult: (result: LoginResult) => void
-  onBack: () => void
-}) {
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-  const [showPassword, setShowPassword] = useState(false)
-  const [submitting, setSubmitting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    if (!email.trim() || !password || submitting) return
-    setSubmitting(true)
-    setError(null)
-    try {
-      const res = await fetch("/auth/login-password", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ email: email.trim(), password }),
-      })
-      if (!res.ok) {
-        const body = await res.json().catch(() => null)
-        throw new Error(body?.detail?.message ?? "E-post eller passord er feil.")
-      }
-      onResult(await res.json())
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Noe gikk galt. Prøv igjen.")
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-6" noValidate>
-      <div className="flex flex-col gap-2">
-        <FieldLabel htmlFor="pw-email">E-post</FieldLabel>
-        <TextInput
-          id="pw-email"
-          icon={Mail}
-          type="email"
-          inputMode="email"
-          autoComplete="email"
-          autoFocus
-          placeholder="deg@epost.no"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-      </div>
-
-      <div className="flex flex-col gap-2">
-        <FieldLabel htmlFor="pw-pass">Passord</FieldLabel>
-        {/* Bevisst ingen begrensning på tegn -- spesialtegn/mellomrom skal fungere. */}
-        <TextInput
-          id="pw-pass"
-          icon={Lock}
-          type={showPassword ? "text" : "password"}
-          autoComplete="current-password"
-          placeholder="Passordet ditt"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          trailing={
-            <button
-              type="button"
-              onClick={() => setShowPassword((v) => !v)}
-              aria-label={showPassword ? "Skjul passord" : "Vis passord"}
-              className="absolute right-2 top-1/2 flex size-11 -translate-y-1/2 items-center justify-center rounded-xl transition-colors"
-              style={{ color: C.muted }}
-            >
-              {showPassword ? <EyeOff aria-hidden="true" className="size-5" /> : <Eye aria-hidden="true" className="size-5" />}
-            </button>
-          }
-        />
-      </div>
-
-      {error && (
-        <p role="alert" className="text-center text-sm font-medium" style={{ color: "#b3261e" }}>
-          {error}
-        </p>
-      )}
-
-      <PrimaryButton type="submit" disabled={submitting || !email.trim() || !password}>
-        {submitting ? "Logger inn …" : "Logg inn"}
-      </PrimaryButton>
-
-      <div className="border-t pt-4" style={{ borderColor: C.border }}>
-        <BackLink onClick={onBack}>Bruk innloggingslenke på e-post i stedet</BackLink>
-      </div>
-    </form>
-  )
-}
-
-/* --- State 4: Join by code, ekte /public/tournaments/by-code -------------- */
-
-function JoinState({ onBack }: { onBack: () => void }) {
-  const router = useRouter()
-  const [code, setCode] = useState("")
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    const trimmed = code.trim()
-    if (!trimmed || loading) return
-    setLoading(true)
-    setError(null)
-    try {
-      const res = await fetch(`/public/tournaments/by-code/${encodeURIComponent(trimmed)}`)
-      if (!res.ok) {
-        const body = await res.json().catch(() => null)
-        setError(body?.detail?.message ?? "Fant ingen turnering med denne koden.")
-        return
-      }
-      const data: { tournament_id: string } = await res.json()
-      router.push(`/t/${data.tournament_id}?code=${encodeURIComponent(trimmed)}`)
-    } catch {
-      setError("Klarte ikke å slå opp koden. Sjekk tilkoblingen og prøv igjen.")
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-6" noValidate>
-      <div className="flex flex-col gap-2">
-        <FieldLabel htmlFor="invite-code">Invitasjonskode</FieldLabel>
-        <TextInput
-          id="invite-code"
-          icon={KeyRound}
-          type="text"
-          inputMode="text"
-          autoCapitalize="characters"
-          autoComplete="off"
-          autoFocus
-          placeholder="F.eks. RAPWAR"
-          value={code}
-          onChange={(e) => setCode(e.target.value.toUpperCase())}
-          style={{ letterSpacing: "0.08em" }}
-        />
-        <p className="text-sm leading-relaxed" style={{ color: C.muted }}>
-          Fått en kode muntlig eller på en lapp? Skriv den inn her — du trenger ikke logge inn for å
-          se turneringen eller melde deg på.
-        </p>
-      </div>
-
-      {error && (
-        <p role="alert" className="text-center text-sm font-medium" style={{ color: "#b3261e" }}>
-          {error}
-        </p>
-      )}
-
-      <PrimaryButton type="submit" disabled={loading || !code.trim()}>
-        {loading ? "Sjekker …" : "Gå til turnering"}
-      </PrimaryButton>
-
-      <div className="border-t pt-4" style={{ borderColor: C.border }}>
-        <BackLink onClick={onBack}>Tilbake til innlogging</BackLink>
-      </div>
-    </form>
-  )
-}

frontend/components/teecup/teecup-auth.tsx

@@ -1,8 +1,10 @@
 "use client"
 
 import type React from "react"
-import { useEffect, useId, useRef, useState } from "react"
+import { useEffect, useId, useState } from "react"
+import { useRouter } from "next/navigation"
 import { cn } from "@/lib/utils"
+import { TwoFactorSetupForm, TwoFactorVerifyForm } from "@/components/two-factor-flow"
 
 /* ------------------------------------------------------------------ */
 /* Icons — inline SVG (currentColor), so every action can pair an      */
@@ -123,40 +125,23 @@ const backBtn = cn(
   focusRing,
 )
 
-/* ------------------------------------------------------------------ */
-/* Mocked backend — stands in for the real API so the flow actually    */
-/* runs (loading, success, and error responses are all real here).     */
-/* ------------------------------------------------------------------ */
-const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms))
 const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-
+const RESEND_SECONDS = 30
-async function apiSendMagicLink(_email: string) {
-  await sleep(1100)
-  return { ok: true as const }
-}
-async function apiPasswordLogin(_email: string, password: string) {
-  await sleep(1100)
-  // Demo credential so the success path is reachable; anything else fails.
-  if (password === "teecup123") return { ok: true as const }
-  return { ok: false as const, error: "Feil e-post eller passord. Prøv igjen." }
-}
-async function apiJoinByCode(code: string) {
-  await sleep(1000)
-  const known: Record<string, string> = {
-    TEECUP: "Lørdagsrunden",
-    "RYDER-25": "Ryder Cup 2025",
-    HOST2026: "Høstcupen 2026",
-  }
-  const name = known[code.trim().toUpperCase()]
-  if (name) return { ok: true as const, name }
-  return {
-    ok: false as const,
-    error: `Fant ingen turnering med koden «${code.trim()}». Sjekk at den er riktig skrevet.`,
-  }
-}
 
 type Mode = "email" | "sent" | "password" | "code"
-const RESEND_SECONDS = 30
+type PostAuthMode = "2fa-verify" | "2fa-setup" | null
+
+type SessionUser = {
+  id: string
+  email: string
+  display_name: string
+  preferred_locale: string
+}
+type LoginResult = {
+  status: "success" | "2fa_required" | "2fa_setup_required"
+  user?: SessionUser
+  two_factor_method?: "totp" | "email"
+}
 
 /* ------------------------------------------------------------------ */
 /* Small building blocks                                               */
@@ -186,7 +171,10 @@ function FormAlert({ children }: { children: React.ReactNode }) {
 /* Main component                                                      */
 /* ------------------------------------------------------------------ */
 export function TeeCupAuth() {
+  const router = useRouter()
   const [mode, setMode] = useState<Mode>("email")
+  const [postAuth, setPostAuth] = useState<PostAuthMode>(null)
+  const [twoFactorMethod, setTwoFactorMethod] = useState<"totp" | "email">("totp")
 
   // shared field state (email persists across email <-> password)
   const [email, setEmail] = useState("")
@@ -200,25 +188,50 @@ export function TeeCupAuth() {
   const [formError, setFormError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
 
-  /* ---- State 1: magic link ---- */
+  function handleLoginResult(result: LoginResult) {
+    if (result.status === "success") {
+      router.replace("/dashboard")
+    } else if (result.status === "2fa_required") {
+      setTwoFactorMethod(result.two_factor_method ?? "totp")
+      setPostAuth("2fa-verify")
+    } else {
+      setPostAuth("2fa-setup")
+    }
+  }
+
+  function handleTwoFactorSuccess() {
+    router.replace("/dashboard")
+  }
+
+  /* ---- State 1: magic link, ekte /auth/request-link ---- */
   async function handleSendLink(e: React.FormEvent) {
     e.preventDefault()
     setEmailTouched(true)
-    if (!EMAIL_RE.test(email)) return
+    if (!EMAIL_RE.test(email) || loading) return
     setFormError(null)
     setLoading(true)
-    const res = await apiSendMagicLink(email)
+    try {
+      // Alltid samme suksess-respons uansett om e-posten finnes (anti-
+      // enumerering, se ADR-009) -- kun nettverks-/serverfeil havner i catch.
+      const res = await fetch("/auth/request-link", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ email: email.trim(), locale: "nb" }),
+      })
+      if (!res.ok) throw new Error(`request-link: ${res.status}`)
+      setMode("sent")
+      setCooldown(RESEND_SECONDS)
+    } catch {
+      setFormError("Klarte ikke å sende lenken. Sjekk tilkoblingen og prøv igjen.")
+    } finally {
       setLoading(false)
-    if (res.ok) setMode("sent")
+    }
   }
 
   /* ---- State 2: cooldown ---- */
   const [cooldown, setCooldown] = useState(0)
   const [resentNote, setResentNote] = useState(false)
-  useEffect(() => {
-    if (mode !== "sent") return
-    setCooldown(RESEND_SECONDS)
-  }, [mode])
   useEffect(() => {
     if (cooldown <= 0) return
     const t = setInterval(() => setCooldown((c) => (c <= 1 ? 0 : c - 1)), 1000)
@@ -228,55 +241,80 @@ export function TeeCupAuth() {
   async function handleResend() {
     if (cooldown > 0 || loading) return
     setResentNote(false)
+    setFormError(null)
     setLoading(true)
-    await apiSendMagicLink(email)
+    try {
-    setLoading(false)
+      const res = await fetch("/auth/request-link", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ email: email.trim(), locale: "nb" }),
+      })
+      if (!res.ok) throw new Error(`request-link: ${res.status}`)
       setCooldown(RESEND_SECONDS)
       setResentNote(true)
+    } catch {
+      setFormError("Klarte ikke å sende lenken. Sjekk tilkoblingen og prøv igjen.")
+    } finally {
+      setLoading(false)
+    }
   }
 
-  /* ---- State 3: password ---- */
+  /* ---- State 3: password, ekte /auth/login-password ---- */
   const [password, setPassword] = useState("")
   const [showPassword, setShowPassword] = useState(false)
   const pwIds = useId()
 
   async function handlePasswordLogin(e: React.FormEvent) {
     e.preventDefault()
-    if (!email || !password) return
+    if (!email.trim() || !password || loading) return
     setFormError(null)
     setLoading(true)
-    const res = await apiPasswordLogin(email, password)
+    try {
+      const res = await fetch("/auth/login-password", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify({ email: email.trim(), password }),
+      })
+      if (!res.ok) {
+        const body = await res.json().catch(() => null)
+        throw new Error(body?.detail?.message ?? "E-post eller passord er feil.")
+      }
+      handleLoginResult(await res.json())
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "Noe gikk galt. Prøv igjen.")
+    } finally {
       setLoading(false)
-    if (res.ok) {
-      setSuccess("Logget inn! Neste steg er en engangskode på e-post (2FA).")
-    } else {
-      setFormError(res.error)
     }
   }
 
-  /* ---- State 4: join by code ---- */
+  /* ---- State 4: join by code, ekte /public/tournaments/by-code ---- */
   const [code, setCode] = useState("")
   async function handleJoin(e: React.FormEvent) {
     e.preventDefault()
-    if (!code.trim()) return
+    const trimmed = code.trim()
+    if (!trimmed || loading) return
     setFormError(null)
     setLoading(true)
-    const res = await apiJoinByCode(code)
+    try {
+      const res = await fetch(`/public/tournaments/by-code/${encodeURIComponent(trimmed)}`)
+      if (!res.ok) {
+        const body = await res.json().catch(() => null)
+        throw new Error(body?.detail?.message ?? "Fant ingen turnering med denne koden.")
+      }
+      const data: { tournament_id: string } = await res.json()
+      router.push(`/t/${data.tournament_id}?code=${encodeURIComponent(trimmed)}`)
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "Klarte ikke å slå opp koden. Sjekk tilkoblingen og prøv igjen.")
+    } finally {
       setLoading(false)
-    if (res.ok) {
-      setSuccess(`Fant turneringen «${res.name}». Sender deg dit …`)
-    } else {
-      setFormError(res.error)
     }
   }
 
-  /* ---- shared success confirmation ---- */
-  const [success, setSuccess] = useState<string | null>(null)
-
   // Reset transient per-mode state when switching modes.
   function switchMode(next: Mode, opts?: { clearEmail?: boolean }) {
     setFormError(null)
-    setSuccess(null)
     setPassword("")
     setShowPassword(false)
     setResentNote(false)
@@ -288,22 +326,19 @@ export function TeeCupAuth() {
     setMode(next)
   }
 
-  /* ---------------- success view (shared continuation) ------------- */
+  /* ---------------- 2FA continuation (shared with password login) --- */
-  if (success) {
+  if (postAuth === "2fa-verify") {
     return (
-      <div className="text-center">
+      <TwoFactorVerifyForm
-        <div className="mx-auto mb-5 flex size-16 items-center justify-center rounded-full bg-tee/20 text-tee-strong">
+        method={twoFactorMethod}
-          <CheckIcon className="size-8" />
+        onSuccess={handleTwoFactorSuccess}
-        </div>
+        onBack={() => setPostAuth(null)}
-        <h2 className="text-pretty text-xl font-bold text-clubhouse-ink">Alt klart</h2>
+      />
-        <p className="mx-auto mt-2 max-w-xs text-pretty text-base leading-relaxed text-clubhouse-muted">{success}</p>
-        <button type="button" className={cn(backBtn, "mt-6 justify-center")} onClick={() => switchMode("email", { clearEmail: true })}>
-          <ArrowLeftIcon className="size-5" />
-          Tilbake til innlogging
-        </button>
-      </div>
     )
   }
+  if (postAuth === "2fa-setup") {
+    return <TwoFactorSetupForm forced onSuccess={handleTwoFactorSuccess} />
+  }
 
   return (
     <div>
@@ -338,6 +373,8 @@ export function TeeCupAuth() {
             {emailInvalid && <FieldError id={emailErrId}>Skriv inn en gyldig e-postadresse, f.eks. navn@klubb.no.</FieldError>}
           </div>
 
+          {formError && <div className="mt-4">{<FormAlert>{formError}</FormAlert>}</div>}
+
           <button type="submit" disabled={loading} className={cn(primaryBtn, "mt-5")}>
             {loading ? <Spinner className="size-5" /> : <MailIcon className="size-5" />}
             {loading ? "Sender …" : "Send innloggingslenke"}
@@ -375,7 +412,9 @@ export function TeeCupAuth() {
             Åpne lenken på denne enheten for å logge inn. Det kan ta et minutt før den kommer frem.
           </p>
 
-          {resentNote && (
+          {formError && <div className="mt-4">{<FormAlert>{formError}</FormAlert>}</div>}
+
+          {resentNote && !formError && (
             <p role="status" className="mt-4 flex items-center gap-2 text-[0.9375rem] font-medium text-tee-strong">
               <CheckIcon className="size-5 shrink-0" />
               Lenken er sendt på nytt.
@@ -454,7 +493,7 @@ export function TeeCupAuth() {
             </div>
           </div>
 
-          <button type="submit" disabled={loading || !email || !password} className={cn(primaryBtn, "mt-6")}>
+          <button type="submit" disabled={loading || !email.trim() || !password} className={cn(primaryBtn, "mt-6")}>
             {loading ? <Spinner className="size-5" /> : <KeyIcon className="size-5" />}
             {loading ? "Logger inn …" : "Logg inn"}
           </button>
@@ -494,12 +533,8 @@ export function TeeCupAuth() {
               placeholder="F.EKS. RYDER-25"
               value={code}
               onChange={(e) => setCode(e.target.value.toUpperCase())}
-              aria-describedby="invite-hint"
               className={cn(inputBase, "border-clubhouse-border font-mono tracking-[0.15em] uppercase")}
             />
-            <p id="invite-hint" className="mt-1.5 text-[0.875rem] text-clubhouse-muted">
-              Prøv <span className="font-mono font-semibold text-clubhouse-ink">TEECUP</span> for en demo.
-            </p>
           </div>
 
           <button type="submit" disabled={loading || !code.trim()} className={cn(primaryBtn, "mt-6")}>

frontend/components/two-factor-flow.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-// Delt mellom login-form.tsx (passord-modus) og verify-form.tsx (magic-link)
+// Delt mellom teecup-auth.tsx (passord-modus, /logg-inn) og verify-form.tsx
-// -- begge kan returnere status "2fa_required"/"2fa_setup_required" fra
+// (magic-link) -- begge kan returnere status "2fa_required"/
-// backend (ADR-021 Beslutning E), og trenger identisk oppfølging.
+// "2fa_setup_required" fra backend (ADR-021 Beslutning E), og trenger
+// identisk oppfølging.
 
 import type React from "react"
 import { useEffect, useState } from "react"

frontend/components/verify-form.tsx

@@ -171,7 +171,7 @@ export function VerifyForm() {
         </Button>
 
         <a
-          href="/"
+          href="/logg-inn"
           className="text-center text-sm font-semibold text-muted-foreground transition-colors hover:text-foreground"
         >
           Be om en ny lenke