51 lines
3.3 KiB
TypeScript
51 lines
3.3 KiB
TypeScript
import { redirect } from "next/navigation";
|
||
import { requireCurrentUser } from "@/lib/auth/user-session";
|
||
import { addFirstMinecraftAccount } from "../actions";
|
||
|
||
const errors: Record<string, string> = {
|
||
"invalid-format": "Java usernames use 3–16 letters, numbers, or underscores.",
|
||
"already-registered": "That Minecraft account is already registered.",
|
||
"vpn-blocked": "Turn off your VPN, proxy, or Tor connection before adding a Minecraft account.",
|
||
"ip-check-unavailable": "We could not verify your network. Try again without a VPN or contact an administrator.",
|
||
};
|
||
|
||
export default async function MinecraftStepPage({
|
||
searchParams,
|
||
}: {
|
||
searchParams: Promise<{ error?: string; unverified?: string }>;
|
||
}) {
|
||
const user = await requireCurrentUser("/welcome/minecraft");
|
||
if (!user.firstName) redirect("/welcome");
|
||
const query = await searchParams;
|
||
|
||
return (
|
||
<main className="grid min-h-screen place-items-center bg-canvas px-6 py-12 text-ink">
|
||
<section className="w-full max-w-2xl border border-line bg-panel p-8 shadow-[10px_10px_0_var(--color-shadow)] sm:p-12">
|
||
<p className="font-mono text-xs font-bold uppercase tracking-[0.25em] text-accent">Step 2 / 3 · Java Edition</p>
|
||
<h1 className="mt-5 font-display text-5xl font-black uppercase leading-none tracking-tight">Add your player.</h1>
|
||
<p className="mt-6 text-lg leading-8 text-muted">We’ll verify the username with Mojang and store its UUID for secure matching.</p>
|
||
|
||
{query.unverified ? (
|
||
<form action={addFirstMinecraftAccount} className="mt-9 border-l-2 border-accent pl-6">
|
||
<h2 className="font-display text-2xl font-black uppercase">We couldn’t verify “{query.unverified}”.</h2>
|
||
<p className="mt-3 leading-7 text-muted">Check the spelling. If you’re certain it is correct, continue without a UUID. The server can associate it after a successful online-mode login.</p>
|
||
<input name="username" type="hidden" value={query.unverified} />
|
||
<input name="confirmUnverified" type="hidden" value="yes" />
|
||
<div className="mt-6 flex flex-wrap gap-4">
|
||
<button className="border border-ink bg-ink px-5 py-3 font-mono text-xs font-bold uppercase tracking-wider text-canvas" type="submit">Yes, continue</button>
|
||
<a className="border border-line px-5 py-3 font-mono text-xs font-bold uppercase tracking-wider" href="/welcome/minecraft">Check spelling</a>
|
||
</div>
|
||
</form>
|
||
) : (
|
||
<form action={addFirstMinecraftAccount} className="mt-9">
|
||
<label className="font-mono text-xs font-bold uppercase tracking-wider" htmlFor="username">Minecraft username</label>
|
||
<input className="mt-3 w-full border border-line bg-canvas px-4 py-4 font-mono text-lg outline-none focus:border-accent" id="username" maxLength={16} minLength={3} name="username" pattern="[A-Za-z0-9_]{3,16}" required autoFocus />
|
||
{query.error && <p className="mt-3 text-sm text-accent">{errors[query.error] ?? "We could not add that account."}</p>}
|
||
<button className="mt-7 border border-ink bg-ink px-6 py-3 font-mono text-xs font-bold uppercase tracking-wider text-canvas hover:bg-accent" type="submit">Verify account</button>
|
||
</form>
|
||
)}
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|