Turnering-landingssiden er live på https://teecup.teeoff.no/t/{id}. Oppsummert:
Kun én genuint ny fil denne gangen — public-tournament.tsx, resten av re-eksporten var kjent V0-revert. V0 bygde komponenten men ingen rute; jeg la selv til en bevisst flat /t/[id]-sti (ikke nøstet under org, siden det offentlige API-et kun trenger turnering-id). To reelle navnekollisjoner løst under wiring, ikke bare et rett-frem uttrekk: API-ets "waitlisted" → komponentens "waitlist", og skjemaets norske kjønnsvalg → API-ets ^[mfx]$-mønster. En driftsfeil funnet i selve testverktøyet, ikke i produktet: corepack hadde hentet en ny pnpm-versjon som gjorde et tidligere ufarlig varsel til en hard feil i dev-server-oppsettet mitt — rettet med samme flagg Dockerfile allerede bruker. Bekreftet at selve prod-bygget var upåvirket. Verifisert med en ekte kjørende frontend-dev-server, ikke bare next build: ekte turnering med beskrivelse/kapasitet/sponsor/økt hentet gjennom frontend-proxyen, og en ekte POST-registrering som økte påmeldingstallet fra 0 til 1.
This commit is contained in:
parent
2058d63db5
commit
7002f4c815
5 changed files with 824 additions and 5 deletions
|
|
@ -196,7 +196,11 @@
|
|||
"Bash(curl -s https://teecup.teeoff.no/public/tournaments/00000000-0000-0000-0000-000000000000)",
|
||||
"Bash(docker exec -i teeoff_db psql -U teeoff_admin -d teecup_scratch -v ON_ERROR_STOP=1 < /opt/teecup/test_isolation.sql 2>&1 | tail -8 *)",
|
||||
"Bash(python3 -m py_compile /opt/teecup/app/auth.py /opt/teecup/app/routers/tournaments.py /opt/teecup/app/routers/organizations.py /opt/teecup/app/routers/registration.py /opt/teecup/app/main.py)",
|
||||
"Bash(curl -s https://teecup.teeoff.no/public/orgs/finnes-ikke-garantert)"
|
||||
"Bash(curl -s https://teecup.teeoff.no/public/orgs/finnes-ikke-garantert)",
|
||||
"Bash(python3 -m zipfile -l \"tee-cup-login-screen \\(3\\).zip\")",
|
||||
"Bash(python3 -c \"import sys,json;print\\('confirmed_count:', json.load\\(sys.stdin\\)['confirmed_count']\\)\")",
|
||||
"Bash(rm -f /opt/teecup/.env.scratch /tmp/towner.txt)",
|
||||
"Bash(curl -s -o /dev/null -w '%{http_code}\\\\n' https://teecup.teeoff.no/t/00000000-0000-0000-0000-000000000000)"
|
||||
],
|
||||
"additionalDirectories": [
|
||||
"/opt/teeoff/deploy",
|
||||
|
|
|
|||
51
CLAUDE.md
51
CLAUDE.md
|
|
@ -508,11 +508,56 @@ Ferdig og verifisert:
|
|||
`/public/:path*`-mønsteret fra ADR-016 dekker allerede `/public/orgs/*`).
|
||||
**Gjenstår:** selve landingsside-SKJERMENE i frontend (V0), og
|
||||
MinIO/bildeopplasting — bevisst utsatt, egen runde.
|
||||
- **Offentlig turnering-landingsside LIVE (2026-07-18), samme dag:** fjerde
|
||||
V0-skjerm (`components/public-tournament.tsx`, ny rute `/t/[id]`) —
|
||||
banner (bevisst permanent farge-/gradient-utseende, ikke en "bilde
|
||||
kommer"-plassholder), presenterende tekst, status (datoer + "X av Y
|
||||
plasser"), program, sponsorer (navn+lenke), og et påmeldingsskjema med
|
||||
navn+e-post synlig først og resten bak en "flere detaljer"-utvidelse —
|
||||
tre distinkte bekreftelsestilstander (bekreftet/venteliste/godkjenning
|
||||
venter), ikke én generisk "takk".
|
||||
**Ingen ny reeksport-kollisjon denne gangen** — kun étt genuint nytt
|
||||
filnavn (`public-tournament.tsx`), resten var kjent V0-revert av
|
||||
allerede-tilpassede filer, samme mønster som før.
|
||||
**V0 opprettet komponenten, men ingen rute** — la selv til `app/t/[id]/
|
||||
page.tsx` (bevisst en FLAT `/t/[id]`-sti, ikke nøstet under `/orgs/...`
|
||||
som den innloggede turnering-detalj-siden, siden det offentlige API-et
|
||||
kun trenger turnering-id, ikke org-id).
|
||||
**Datalaget skrevet om fra V0s mock:** ekte `fetch` mot
|
||||
`GET /public/tournaments/{id}` + `/sessions`, ekte `POST .../register`.
|
||||
Håndterer 403 (`NOT_VISIBLE`, ADR-018) og 404 med en egen tilgang-avvist-
|
||||
tilstand V0 ikke hadde bedt om (fantes ikke i prompten, men trengs for at
|
||||
siden faktisk skal fungere for `org`/`participants`-synlige turneringer).
|
||||
Mappet `status:"waitlisted"` fra API-et til komponentens `"waitlist"`, og
|
||||
skjemaets norske kjønnsvalg ("kvinne"/"mann"/"annet") til API-ets
|
||||
`^[mfx]$`-mønster — to reelle navnekollisjoner mellom V0s UI-språk og
|
||||
API-kontrakten, ikke bare et rett-frem felt-for-felt-uttrekk.
|
||||
**Reell driftsfeil funnet OG rettet under scratch-test, ikke i
|
||||
produksjon:** `pnpm install` (uten `--ignore-scripts`) i dev-server-
|
||||
testoppsettet feilet stille med tom logg og exit 1 — corepack hadde
|
||||
hentet en NY pnpm-versjon (11.13.1 → 11.14.0) siden sist, som gjør
|
||||
"ignored builds"-varselet til en hard feil i stedet for bare en
|
||||
advarsel. Rettet ved å bruke samme `--ignore-scripts`-flagg som
|
||||
`frontend/Dockerfile` allerede bruker (upåvirket av denne — bekreftet
|
||||
ved at selve prod-buildet fortsatt gikk rent). **Lærdom:** `Dockerfile`
|
||||
sin pinning av *kode* er ikke det samme som å pinne *verktøyene rundt*
|
||||
(corepack henter alltid siste pnpm) — verdt å huske neste gang et
|
||||
scratch-dev-server-oppsett plutselig feiler uten åpenbar grunn.
|
||||
**Verifisert grundig mot fersk `teecup_scratch` + en ekte kjørende
|
||||
frontend-dev-server** (ikke bare `next build`): ekte turnering med
|
||||
beskrivelse, kapasitet, sponsor og økt opprettet via API-et, hentet
|
||||
gjennom frontend-proxyen (ikke direkte mot backend) og bekreftet
|
||||
byte-for-byte riktig — inkludert en ekte `POST`-registrering som økte
|
||||
`confirmed_count` fra 0 til 1.
|
||||
**Rullet ut live**, kun `teecup_frontend` (ingen backend-endring denne
|
||||
runden), `teeoff.no` upåvirket.
|
||||
**Gjenstår:** org-landingssiden (egen V0-prompt), Open Graph-metadata for
|
||||
deling, MinIO/bilder.
|
||||
|
||||
Neste steg:
|
||||
1. Landingssider (turnering/org): ADR-018 sin backend er ferdig og live
|
||||
(synlighet, org-profil/slug, sponsorer, PATCH-endepunkter) — gjenstår er
|
||||
selve skjermene i frontend (V0), pluss MinIO/bildeopplasting som egen,
|
||||
1. Org-landingsside (V0-prompt, samme mønster som turnering-siden) — siste
|
||||
skjerm i ADR-018. Deretter Open Graph-metadata (og:title/og:image/
|
||||
og:description) for delingsforhåndsvisning, så MinIO/bilder som egen,
|
||||
senere runde.
|
||||
2. Flere V0-skjermer (økt/program, blind draw, scorekort, leaderboard) —
|
||||
samme mønster: design i V0 (fortsett i samme prosjekt), FORVENT en full
|
||||
|
|
|
|||
|
|
@ -424,7 +424,8 @@ gjenstår, bevisst egne runder.
|
|||
| Del-metadata (Open Graph: og:title/og:image/og:description) | 📋 | Frontend-arbeid, ikke gjort ennå. |
|
||||
| Blind draw-skjuling på offentlig side | ✅ | Arves automatisk via delt `_fetch_sessions()`-hjelpefunksjon (ADR-018 Beslutning E) — ikke reimplementert. |
|
||||
| Antall påmeldte / ledige plasser vist åpent | ✅ | `confirmed_count` i `GET /public/tournaments/{id}`. |
|
||||
| Frontend-skjermer (turnering-/org-landingsside, påmeldingsskjema) | 📋 | Ikke startet — neste steg. |
|
||||
| Frontend: turnering-landingsside + påmeldingsskjema, LIVE | ✅ | `/t/[id]`. Tre bekreftelsestilstander (bekreftet/venteliste/godkjenning venter). Verifisert med ekte `POST`-registrering mot scratch. |
|
||||
| Frontend: org-landingsside | 📋 | Ikke startet — neste steg. |
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
10
frontend/app/t/[id]/page.tsx
Normal file
10
frontend/app/t/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { PublicTournament } from "@/components/public-tournament"
|
||||
|
||||
export default async function PublicTournamentPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>
|
||||
}) {
|
||||
const { id } = await params
|
||||
return <PublicTournament tournamentId={id} />
|
||||
}
|
||||
759
frontend/components/public-tournament.tsx
Normal file
759
frontend/components/public-tournament.tsx
Normal file
|
|
@ -0,0 +1,759 @@
|
|||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import { useEffect, useState } from "react"
|
||||
import {
|
||||
Calendar,
|
||||
Users,
|
||||
ChevronDown,
|
||||
CheckCircle2,
|
||||
Clock3,
|
||||
Hourglass,
|
||||
Lock,
|
||||
ShieldAlert,
|
||||
} from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Wordmark } from "@/components/wordmark"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
// --- Types -----------------------------------------------------------------
|
||||
// Interne visningstyper -- matcher ikke API-et 1:1 (se ApiTournamentInfo/
|
||||
// ApiSession under og mappingen i PublicTournament), men er det
|
||||
// presentasjonskomponentene under (uendret fra V0) faktisk konsumerer.
|
||||
|
||||
type Session = {
|
||||
id: string
|
||||
name: string
|
||||
format: string
|
||||
time?: string // ISO-streng, optional
|
||||
}
|
||||
|
||||
type Sponsor = {
|
||||
id: string
|
||||
name: string
|
||||
url: string
|
||||
}
|
||||
|
||||
type TournamentInfo = {
|
||||
name: string
|
||||
club: string
|
||||
intro: string
|
||||
startDate?: Date
|
||||
endDate?: Date
|
||||
registered: number
|
||||
capacity?: number // undefined = no cap
|
||||
sessions: Session[]
|
||||
sponsors: Sponsor[]
|
||||
}
|
||||
|
||||
// "waitlisted" fra API-et vises som "waitlist" her -- se mapOutcome().
|
||||
type Outcome = "confirmed" | "waitlist" | "pending"
|
||||
|
||||
// --- API-typer (matcher app/routers/registration.py) -----------------------
|
||||
|
||||
type ApiSponsor = { id: string; name: string; url: string | null }
|
||||
|
||||
type ApiTournamentInfo = {
|
||||
id: string
|
||||
name: string
|
||||
organization_name: string
|
||||
status: string
|
||||
visibility: string
|
||||
description: string | null
|
||||
start_date: string | null
|
||||
end_date: string | null
|
||||
registration_open: boolean
|
||||
registration_deadline: string | null
|
||||
registration_capacity: number | null
|
||||
confirmed_count: number
|
||||
sponsors: ApiSponsor[]
|
||||
}
|
||||
|
||||
type ApiSession = {
|
||||
id: string
|
||||
name: string
|
||||
format: string
|
||||
scheduled_at: string | null
|
||||
}
|
||||
|
||||
function mapOutcome(status: string): Outcome {
|
||||
return status === "waitlisted" ? "waitlist" : (status as Outcome)
|
||||
}
|
||||
|
||||
// --- Formatting helpers ----------------------------------------------------
|
||||
|
||||
const DATE_FMT = new Intl.DateTimeFormat("no-NO", {
|
||||
day: "numeric",
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
})
|
||||
const TIME_FMT = new Intl.DateTimeFormat("no-NO", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
|
||||
function formatDateRange(start?: Date, end?: Date) {
|
||||
if (!start) return "Ingen datoer satt"
|
||||
if (!end || start.toDateString() === end.toDateString()) {
|
||||
return DATE_FMT.format(start)
|
||||
}
|
||||
return `${DATE_FMT.format(start)} – ${DATE_FMT.format(end)}`
|
||||
}
|
||||
|
||||
// --- Root ------------------------------------------------------------------
|
||||
|
||||
export function PublicTournament({ tournamentId }: { tournamentId: string }) {
|
||||
const [info, setInfo] = useState<ApiTournamentInfo | null>(null)
|
||||
const [sessions, setSessions] = useState<Session[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [accessError, setAccessError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
async function load() {
|
||||
try {
|
||||
const res = await fetch(`/public/tournaments/${tournamentId}`, { credentials: "include" })
|
||||
if (res.status === 403 || res.status === 404) {
|
||||
const body = await res.json().catch(() => null)
|
||||
if (!cancelled) {
|
||||
setAccessError(
|
||||
body?.detail?.message ??
|
||||
(res.status === 404 ? "Turneringen finnes ikke." : "Du har ikke tilgang til denne turneringen."),
|
||||
)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (!res.ok) throw new Error(`tournament: ${res.status}`)
|
||||
const data: ApiTournamentInfo = await res.json()
|
||||
if (cancelled) return
|
||||
setInfo(data)
|
||||
|
||||
const sessionsRes = await fetch(`/public/tournaments/${tournamentId}/sessions`, {
|
||||
credentials: "include",
|
||||
})
|
||||
if (sessionsRes.ok) {
|
||||
const sessionData: ApiSession[] = await sessionsRes.json()
|
||||
if (!cancelled) {
|
||||
setSessions(
|
||||
sessionData.map((s) => ({
|
||||
id: s.id,
|
||||
name: s.name,
|
||||
format: s.format,
|
||||
time: s.scheduled_at ?? undefined,
|
||||
})),
|
||||
)
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) setAccessError("Klarte ikke å laste turneringen. Prøv å laste siden på nytt.")
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false)
|
||||
}
|
||||
}
|
||||
void load()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [tournamentId])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex min-h-[100dvh] flex-col items-center justify-center gap-4 bg-background">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="size-10 animate-spin rounded-full border-4 border-primary/20 border-t-primary"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (accessError || !info) {
|
||||
return (
|
||||
<div className="flex min-h-[100dvh] flex-col items-center justify-center gap-4 bg-background px-5 text-center">
|
||||
<div className="flex size-14 items-center justify-center rounded-2xl bg-muted">
|
||||
<ShieldAlert aria-hidden="true" className="size-7 text-muted-foreground" />
|
||||
</div>
|
||||
<p className="max-w-sm text-sm leading-relaxed text-muted-foreground text-pretty">
|
||||
{accessError ?? "Turneringen finnes ikke."}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const t: TournamentInfo = {
|
||||
name: info.name,
|
||||
club: info.organization_name,
|
||||
intro: info.description ?? "",
|
||||
startDate: info.start_date ? new Date(info.start_date) : undefined,
|
||||
endDate: info.end_date ? new Date(info.end_date) : undefined,
|
||||
registered: info.confirmed_count,
|
||||
capacity: info.registration_capacity ?? undefined,
|
||||
sessions,
|
||||
sponsors: info.sponsors.map((s) => ({ id: s.id, name: s.name, url: s.url ?? "#" })),
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-[100dvh] flex-col bg-background">
|
||||
<header className="border-b border-border bg-background/80 backdrop-blur">
|
||||
<div className="mx-auto flex w-full max-w-2xl items-center justify-center px-5 py-4">
|
||||
<Wordmark compact />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto w-full max-w-2xl flex-1 px-5 py-6 sm:py-8">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Banner name={t.name} club={t.club} />
|
||||
|
||||
{t.intro && (
|
||||
<section aria-label="Om turneringen">
|
||||
<p className="text-[15px] leading-relaxed text-foreground text-pretty">{t.intro}</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<StatusArea
|
||||
start={t.startDate}
|
||||
end={t.endDate}
|
||||
registered={t.registered}
|
||||
capacity={t.capacity}
|
||||
registrationOpen={info.registration_open}
|
||||
/>
|
||||
|
||||
<Program sessions={t.sessions} />
|
||||
|
||||
{info.registration_open ? (
|
||||
<RegistrationCard tournamentId={tournamentId} tournamentName={t.name} />
|
||||
) : (
|
||||
<ClosedCard />
|
||||
)}
|
||||
|
||||
<Sponsors sponsors={t.sponsors} />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Banner ----------------------------------------------------------------
|
||||
|
||||
function Banner({ name, club }: { name: string; club: string }) {
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-primary to-primary/80 px-6 py-10 shadow-lg shadow-primary/20 sm:px-8 sm:py-12">
|
||||
{/* Subtle decorative rings — intentional, part of the brand banner look. */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute -right-16 -top-16 size-56 rounded-full border-[12px] border-primary-foreground/10"
|
||||
/>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute -bottom-20 -left-10 size-48 rounded-full border-[12px] border-primary-foreground/10"
|
||||
/>
|
||||
<div className="relative flex flex-col gap-2">
|
||||
<span className="text-sm font-semibold uppercase tracking-wide text-primary-foreground/80">
|
||||
{club}
|
||||
</span>
|
||||
<h1 className="text-3xl font-extrabold leading-tight tracking-tight text-primary-foreground text-balance sm:text-4xl">
|
||||
{name}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Status area -----------------------------------------------------------
|
||||
|
||||
function StatusArea({
|
||||
start,
|
||||
end,
|
||||
registered,
|
||||
capacity,
|
||||
registrationOpen,
|
||||
}: {
|
||||
start?: Date
|
||||
end?: Date
|
||||
registered: number
|
||||
capacity?: number
|
||||
registrationOpen: boolean
|
||||
}) {
|
||||
const capacityText =
|
||||
capacity != null ? `${registered} av ${capacity} plasser` : `${registered} påmeldt`
|
||||
const full = capacity != null && registered >= capacity
|
||||
|
||||
return (
|
||||
<section className="grid gap-3 sm:grid-cols-2" aria-label="Status">
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-border bg-card p-4 shadow-sm shadow-black/5">
|
||||
<div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/15">
|
||||
<Calendar aria-hidden="true" className="size-5 text-primary" />
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Datoer
|
||||
</span>
|
||||
<span className="truncate text-sm font-bold text-foreground">
|
||||
{formatDateRange(start, end)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-border bg-card p-4 shadow-sm shadow-black/5">
|
||||
<div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/15">
|
||||
<Users aria-hidden="true" className="size-5 text-primary" />
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Påmelding
|
||||
</span>
|
||||
<span className="truncate text-sm font-bold text-foreground">
|
||||
{capacityText}
|
||||
{!registrationOpen && " · stengt"}
|
||||
{registrationOpen && full && " · fullt"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Program ---------------------------------------------------------------
|
||||
|
||||
function Program({ sessions }: { sessions: Session[] }) {
|
||||
return (
|
||||
<section aria-label="Program" className="flex flex-col gap-3">
|
||||
<h2 className="text-base font-bold text-foreground">Program</h2>
|
||||
<ul className="flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-sm shadow-black/5">
|
||||
{sessions.map((s) => {
|
||||
const time = s.time ? TIME_FMT.format(new Date(s.time)) : null
|
||||
return (
|
||||
<li
|
||||
key={s.id}
|
||||
className="flex items-center gap-4 border-b border-border px-4 py-3.5 last:border-b-0"
|
||||
>
|
||||
<div className="flex w-14 shrink-0 items-center gap-1.5 tabular-nums">
|
||||
{time ? (
|
||||
<span className="text-sm font-bold text-foreground">{time}</span>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">—</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="truncate font-semibold text-foreground">{s.name}</span>
|
||||
<span className="truncate text-sm text-muted-foreground">{s.format}</span>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Sponsors --------------------------------------------------------------
|
||||
|
||||
function Sponsors({ sponsors }: { sponsors: Sponsor[] }) {
|
||||
if (sponsors.length === 0) return null
|
||||
return (
|
||||
<section aria-label="Sponsorer" className="flex flex-col gap-3 border-t border-border pt-6">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Sponsorer
|
||||
</h2>
|
||||
<div className="flex flex-wrap items-center gap-x-5 gap-y-2">
|
||||
{sponsors.map((sp) => (
|
||||
<a
|
||||
key={sp.id}
|
||||
href={sp.url}
|
||||
className="text-sm font-semibold text-foreground underline-offset-4 transition-colors hover:text-primary hover:underline"
|
||||
>
|
||||
{sp.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Closed state ----------------------------------------------------------
|
||||
|
||||
function ClosedCard() {
|
||||
return (
|
||||
<section className="flex flex-col items-center gap-3 rounded-3xl border border-border bg-muted/40 px-6 py-8 text-center">
|
||||
<div className="flex size-14 items-center justify-center rounded-2xl bg-muted">
|
||||
<Lock aria-hidden="true" className="size-7 text-muted-foreground" />
|
||||
</div>
|
||||
<h2 className="text-xl font-extrabold tracking-tight text-foreground text-balance">
|
||||
Påmeldingen er stengt
|
||||
</h2>
|
||||
<p className="max-w-sm text-sm leading-relaxed text-muted-foreground text-pretty">
|
||||
Fristen for å melde seg på denne turneringen har gått ut. Ta kontakt med arrangøren dersom
|
||||
du har spørsmål.
|
||||
</p>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Registration ----------------------------------------------------------
|
||||
|
||||
function isValidEmail(value: string) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim())
|
||||
}
|
||||
|
||||
// nb-skjemaets kjønnsvalg -> API-ets ^[mfx]$ (app/routers/players.py).
|
||||
const GENDER_TO_API: Record<string, string> = { kvinne: "f", mann: "m", annet: "x" }
|
||||
|
||||
function RegistrationCard({
|
||||
tournamentId,
|
||||
tournamentName,
|
||||
}: {
|
||||
tournamentId: string
|
||||
tournamentName: string
|
||||
}) {
|
||||
const [name, setName] = useState("")
|
||||
const [email, setEmail] = useState("")
|
||||
const [touchedEmail, setTouchedEmail] = useState(false)
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
const [consent, setConsent] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [submitted, setSubmitted] = useState<Outcome | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const [optional, setOptional] = useState({
|
||||
mobile: "",
|
||||
birthDate: "",
|
||||
nickname: "",
|
||||
country: "",
|
||||
club: "",
|
||||
membershipNo: "",
|
||||
gender: "",
|
||||
handicap: "",
|
||||
})
|
||||
|
||||
const emailValid = isValidEmail(email)
|
||||
const showEmailError = touchedEmail && email.length > 0 && !emailValid
|
||||
const canSubmit = name.trim().length >= 2 && emailValid && consent && !submitting
|
||||
|
||||
function updateOptional(key: keyof typeof optional, value: string) {
|
||||
setOptional((prev) => ({ ...prev, [key]: value }))
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!canSubmit) return
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
try {
|
||||
const hcpRaw = optional.handicap.trim()
|
||||
const hcpValue = hcpRaw === "" ? undefined : Number(hcpRaw.replace(",", "."))
|
||||
const res = await fetch(`/public/tournaments/${tournamentId}/register`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({
|
||||
display_name: name.trim(),
|
||||
email: email.trim(),
|
||||
mobile: optional.mobile.trim() || undefined,
|
||||
birth_date: optional.birthDate || undefined,
|
||||
nickname: optional.nickname.trim() || undefined,
|
||||
country: optional.country.trim() || undefined,
|
||||
club: optional.club.trim() || undefined,
|
||||
club_member_number: optional.membershipNo.trim() || undefined,
|
||||
gender: GENDER_TO_API[optional.gender],
|
||||
handicap_index: hcpValue !== undefined && !Number.isNaN(hcpValue) ? hcpValue : undefined,
|
||||
consent,
|
||||
}),
|
||||
})
|
||||
if (!res.ok) {
|
||||
const body = await res.json().catch(() => null)
|
||||
throw new Error(body?.detail?.message ?? "Klarte ikke å melde deg på. Prøv igjen.")
|
||||
}
|
||||
const result: { id: string; status: string } = await res.json()
|
||||
setSubmitted(mapOutcome(result.status))
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Noe gikk galt. Prøv igjen.")
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (submitted) {
|
||||
return <RegistrationOutcome outcome={submitted} name={name} tournamentName={tournamentName} />
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-label="Påmelding"
|
||||
className="flex flex-col gap-6 rounded-3xl border border-border bg-card p-5 shadow-sm shadow-black/5 sm:p-6"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h2 className="text-lg font-extrabold tracking-tight text-foreground">Meld deg på</h2>
|
||||
<p className="text-sm leading-relaxed text-muted-foreground text-pretty">
|
||||
Fyll inn navn og e-post, så er du i gang. Resten kan du legge til senere.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-5" noValidate>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="reg-name" className="text-sm font-semibold">
|
||||
Navn
|
||||
</Label>
|
||||
<Input
|
||||
id="reg-name"
|
||||
autoComplete="name"
|
||||
placeholder="Ola Nordmann"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="h-13 rounded-2xl text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="reg-email" className="text-sm font-semibold">
|
||||
E-post
|
||||
</Label>
|
||||
<Input
|
||||
id="reg-email"
|
||||
type="email"
|
||||
inputMode="email"
|
||||
autoComplete="email"
|
||||
placeholder="deg@epost.no"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
onBlur={() => setTouchedEmail(true)}
|
||||
aria-invalid={showEmailError}
|
||||
aria-describedby={showEmailError ? "reg-email-error" : undefined}
|
||||
className="h-13 rounded-2xl text-base"
|
||||
/>
|
||||
{showEmailError && (
|
||||
<p id="reg-email-error" className="text-sm font-medium text-destructive">
|
||||
Skriv inn en gyldig e-postadresse.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Optional details ---------------------------------------------- */}
|
||||
<div className="rounded-2xl border border-border">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowMore((v) => !v)}
|
||||
aria-expanded={showMore}
|
||||
className="flex w-full items-center justify-between gap-2 rounded-2xl px-4 py-3.5 text-left transition-colors hover:bg-accent/40"
|
||||
>
|
||||
<span className="text-sm font-semibold text-foreground">Flere detaljer (valgfritt)</span>
|
||||
<ChevronDown
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
"size-5 text-muted-foreground transition-transform",
|
||||
showMore && "rotate-180",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
{showMore && (
|
||||
<div className="flex flex-col gap-4 border-t border-border p-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<OptionalField
|
||||
id="opt-mobile"
|
||||
label="Mobil"
|
||||
type="tel"
|
||||
value={optional.mobile}
|
||||
onChange={(v) => updateOptional("mobile", v)}
|
||||
/>
|
||||
<OptionalField
|
||||
id="opt-birth"
|
||||
label="Fødselsdato"
|
||||
type="date"
|
||||
value={optional.birthDate}
|
||||
onChange={(v) => updateOptional("birthDate", v)}
|
||||
/>
|
||||
<OptionalField
|
||||
id="opt-nick"
|
||||
label="Kallenavn"
|
||||
value={optional.nickname}
|
||||
onChange={(v) => updateOptional("nickname", v)}
|
||||
/>
|
||||
<OptionalField
|
||||
id="opt-country"
|
||||
label="Land"
|
||||
value={optional.country}
|
||||
onChange={(v) => updateOptional("country", v)}
|
||||
/>
|
||||
<OptionalField
|
||||
id="opt-club"
|
||||
label="Klubb"
|
||||
value={optional.club}
|
||||
onChange={(v) => updateOptional("club", v)}
|
||||
/>
|
||||
<OptionalField
|
||||
id="opt-membership"
|
||||
label="Medlemsnummer"
|
||||
value={optional.membershipNo}
|
||||
onChange={(v) => updateOptional("membershipNo", v)}
|
||||
/>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="opt-gender" className="text-sm font-semibold">
|
||||
Kjønn
|
||||
</Label>
|
||||
<select
|
||||
id="opt-gender"
|
||||
value={optional.gender}
|
||||
onChange={(e) => updateOptional("gender", e.target.value)}
|
||||
className="h-12 rounded-2xl border border-input bg-background px-3 text-base text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
>
|
||||
<option value="">Ikke oppgitt</option>
|
||||
<option value="kvinne">Kvinne</option>
|
||||
<option value="mann">Mann</option>
|
||||
<option value="annet">Annet</option>
|
||||
</select>
|
||||
</div>
|
||||
<OptionalField
|
||||
id="opt-handicap"
|
||||
label="Handicap-indeks"
|
||||
inputMode="decimal"
|
||||
value={optional.handicap}
|
||||
onChange={(v) => updateOptional("handicap", v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Consent ------------------------------------------------------- */}
|
||||
<label className="flex cursor-pointer items-start gap-3 rounded-2xl bg-muted/40 p-4">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={consent}
|
||||
onChange={(e) => setConsent(e.target.checked)}
|
||||
className="mt-0.5 size-5 shrink-0 cursor-pointer accent-primary"
|
||||
/>
|
||||
<span className="text-sm leading-relaxed text-foreground text-pretty">
|
||||
Jeg samtykker til at mine opplysninger behandles for denne turneringen.
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{error && (
|
||||
<p role="alert" className="text-center text-sm font-medium text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!canSubmit}
|
||||
className="h-14 rounded-2xl text-base font-bold shadow-sm"
|
||||
>
|
||||
{submitting ? "Sender …" : "Meld meg på"}
|
||||
</Button>
|
||||
</form>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function OptionalField({
|
||||
id,
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
type = "text",
|
||||
inputMode,
|
||||
}: {
|
||||
id: string
|
||||
label: string
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
type?: string
|
||||
inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"]
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor={id} className="text-sm font-semibold">
|
||||
{label}
|
||||
</Label>
|
||||
<Input
|
||||
id={id}
|
||||
type={type}
|
||||
inputMode={inputMode}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="h-12 rounded-2xl text-base"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Registration outcomes -------------------------------------------------
|
||||
|
||||
function RegistrationOutcome({
|
||||
outcome,
|
||||
name,
|
||||
tournamentName,
|
||||
}: {
|
||||
outcome: Outcome
|
||||
name: string
|
||||
tournamentName: string
|
||||
}) {
|
||||
const firstName = name.trim().split(/\s+/)[0] || "der"
|
||||
|
||||
const config = {
|
||||
confirmed: {
|
||||
icon: CheckCircle2,
|
||||
title: "Du er påmeldt!",
|
||||
accent: "text-primary",
|
||||
iconWrap: "bg-primary/15",
|
||||
ring: "border-primary/30",
|
||||
body: (
|
||||
<>
|
||||
Flott, {firstName}! Plassen din i{" "}
|
||||
<span className="font-semibold text-foreground">{tournamentName}</span> er bekreftet. Du
|
||||
får en bekreftelse på e-post med alle detaljer.
|
||||
</>
|
||||
),
|
||||
},
|
||||
waitlist: {
|
||||
icon: Clock3,
|
||||
title: "Du står på venteliste",
|
||||
accent: "text-brand-orange",
|
||||
iconWrap: "bg-brand-orange/15",
|
||||
ring: "border-brand-orange/40",
|
||||
body: (
|
||||
<>
|
||||
Turneringen er full akkurat nå, men du er satt på venteliste. Vi gir deg beskjed på e-post
|
||||
med en gang en plass blir ledig.
|
||||
</>
|
||||
),
|
||||
},
|
||||
pending: {
|
||||
icon: Hourglass,
|
||||
title: "Påmeldingen din venter på godkjenning",
|
||||
accent: "text-foreground",
|
||||
iconWrap: "bg-muted",
|
||||
ring: "border-border",
|
||||
body: (
|
||||
<>
|
||||
Takk, {firstName}! Arrangøren må godkjenne påmeldingen din før plassen er bekreftet. Du får
|
||||
en e-post så snart den er behandlet.
|
||||
</>
|
||||
),
|
||||
},
|
||||
}[outcome]
|
||||
|
||||
const Icon = config.icon
|
||||
|
||||
return (
|
||||
<section
|
||||
aria-live="polite"
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-4 rounded-3xl border bg-card px-6 py-9 text-center shadow-sm shadow-black/5",
|
||||
config.ring,
|
||||
)}
|
||||
>
|
||||
<div className={cn("flex size-16 items-center justify-center rounded-2xl", config.iconWrap)}>
|
||||
<Icon aria-hidden="true" className={cn("size-8", config.accent)} />
|
||||
</div>
|
||||
<h2 className="text-2xl font-extrabold tracking-tight text-foreground text-balance">
|
||||
{config.title}
|
||||
</h2>
|
||||
<p className="max-w-md text-sm leading-relaxed text-muted-foreground text-pretty">
|
||||
{config.body}
|
||||
</p>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue