remco-vermeer
53bf667f54
Experts (Module 4) - Pagina Experts (CRM): experts uitnodigen per e-mail (zonder SMTP wordt de link getoond), rondes koppelen, opnieuw uitnodigen, verwijderen en "Inloggen als" (alleen lezen) om mee te kijken - Uitnodigingspagina waar een expert zijn wachtwoord instelt (token 7 dagen geldig, eenmalig, alleen als hash opgeslagen) - Expertpagina: projecten in waardebepaling uit de eigen rondes, project plan lezen en eigen beoordeling geven (3 scores, advies Bonus/Malus, toelichting) - Rollen admin/expert: alle beheerpagina's en -acties controleren de rol - Rikx calculatie gebruikt de beoordelingen van de experts in plaats van de handmatige expertkolommen; experts koppelen ook vanaf de rondepagina Waardebepaling projecten - Nieuwe pagina met projecten in waardebepaling op kosten/impact (laag naar hoog), filter op ronde, Rikx Waarde-veld dat live doorrekent en opslaat in de ronde, en een 75%-lijn bij een gekozen ronde Projecten - Rikx calculatie als tab, zichtbaar vanaf status Waardebepaling, met keuze rekenmethode (Arbeid; Jeugd nog niet beschikbaar) en beoordeling goedgekeurd/afgekeurd met reden - Impactmaker gekoppeld aan een sociaal ondernemer - Opslaan-knop bovenaan; ongeldige velden op een verborgen tab worden getoond - Project toevoegen maakt direct een project aan; aparte pagina verwijderd - Waarderingssystematiek Rikx juni 2023 toegevoegd aan _doc Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
80 lines
3.7 KiB
TypeScript
80 lines
3.7 KiB
TypeScript
import Link from "next/link";
|
|
import { MIN_WACHTWOORD_LENGTE, findInvite } from "../../../lib/experts";
|
|
import { setPassword } from "./actions";
|
|
|
|
// Openbare pagina (zonder login): een uitgenodigde expert stelt hier zijn wachtwoord in.
|
|
export default async function UitnodigingPage({
|
|
params,
|
|
searchParams,
|
|
}: {
|
|
params: Promise<{ token: string }>;
|
|
searchParams: Promise<{ error?: string }>;
|
|
}) {
|
|
const { token } = await params;
|
|
const { error } = await searchParams;
|
|
const invite = findInvite(token);
|
|
|
|
const inputClass =
|
|
"h-10 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-rikx-orange";
|
|
const errorMsg =
|
|
error === "kort"
|
|
? `Kies een wachtwoord van minimaal ${MIN_WACHTWOORD_LENGTE} tekens.`
|
|
: error === "verschil"
|
|
? "De wachtwoorden zijn niet gelijk."
|
|
: null;
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-zinc-50 dark:bg-zinc-950">
|
|
<header className="bg-rikx-orange">
|
|
<div className="max-w-5xl mx-auto px-4 sm:px-6 py-3">
|
|
<span className="text-white text-4xl font-extrabold tracking-tight leading-none">Rikx</span>
|
|
</div>
|
|
</header>
|
|
<main className="flex-1 flex items-start justify-center px-4 py-16">
|
|
<div className="w-full max-w-sm">
|
|
{!invite ? (
|
|
<div className="bg-white dark:bg-zinc-900 p-8 rounded-xl border border-zinc-200 dark:border-zinc-800 flex flex-col gap-3">
|
|
<h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Uitnodiging niet geldig</h1>
|
|
<p className="text-sm text-zinc-600 dark:text-zinc-400">
|
|
Deze link is verlopen of al gebruikt. Vraag een nieuwe uitnodiging aan bij Rikx, of log in als je al een
|
|
wachtwoord hebt ingesteld.
|
|
</p>
|
|
<Link href="/login" className="text-sm text-rikx-orange-dark hover:underline">
|
|
Naar inloggen
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<form
|
|
action={setPassword}
|
|
className="flex flex-col gap-4 bg-white dark:bg-zinc-900 p-8 rounded-xl border border-zinc-200 dark:border-zinc-800"
|
|
>
|
|
<div>
|
|
<h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Welkom, {invite.name}</h1>
|
|
<p className="text-sm text-zinc-500 mt-1">
|
|
Stel een wachtwoord in voor het Rikx expertteam. Je logt daarna in met {invite.email}.
|
|
</p>
|
|
</div>
|
|
{errorMsg && <p className="text-sm text-red-600 dark:text-red-400">{errorMsg}</p>}
|
|
<input type="hidden" name="token" value={token} />
|
|
<label className="flex flex-col gap-1">
|
|
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Wachtwoord</span>
|
|
<input name="password" type="password" required minLength={MIN_WACHTWOORD_LENGTE} autoComplete="new-password" className={inputClass} />
|
|
</label>
|
|
<label className="flex flex-col gap-1">
|
|
<span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Herhaal wachtwoord</span>
|
|
<input name="password_herhaal" type="password" required minLength={MIN_WACHTWOORD_LENGTE} autoComplete="new-password" className={inputClass} />
|
|
</label>
|
|
<button
|
|
type="submit"
|
|
className="rounded-lg bg-rikx-maroon hover:bg-rikx-maroon-light px-5 py-2 text-sm font-medium text-white transition-colors"
|
|
>
|
|
Wachtwoord instellen
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|