95 lines
2.4 KiB
TypeScript
95 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { linkDiscordId } from "@/actions/link-discord";
|
|
|
|
export function DiscordVerifyForm() {
|
|
const [discordId, setDiscordId] = useState("");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isPending, setIsPending] = useState(false);
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setSuccess(false);
|
|
setIsPending(true);
|
|
try {
|
|
const result = await linkDiscordId(discordId);
|
|
if (result === null) {
|
|
setSuccess(true);
|
|
} else {
|
|
setError(result);
|
|
}
|
|
} catch {
|
|
setError("Er is een fout opgetreden");
|
|
} finally {
|
|
setIsPending(false);
|
|
}
|
|
}
|
|
|
|
if (success) {
|
|
return (
|
|
<div
|
|
className="rounded-md p-4 text-center"
|
|
style={{ backgroundColor: "#14532d", color: "white" }}
|
|
>
|
|
<p className="text-lg font-bold mb-1">Geverifieerd!</p>
|
|
<p className="text-sm opacity-90">
|
|
Je Discord account is gekoppeld en je account is geverifieerd.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="flex flex-col gap-3">
|
|
{error && (
|
|
<div
|
|
className="p-3 rounded-md text-sm"
|
|
style={{ backgroundColor: "#ef4444", color: "white" }}
|
|
>
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<p
|
|
className="text-sm"
|
|
style={{
|
|
color: "var(--color-text-muted-readable, var(--color-text-muted))",
|
|
}}
|
|
>
|
|
Open Discord, ga naar{" "}
|
|
<strong>Instellingen → Geavanceerd → Ontwikkelaarsmodus</strong> (aan).
|
|
Klik met rechts op je eigen naam en kies <strong>ID kopiëren</strong>.
|
|
Plak dat hier:
|
|
</p>
|
|
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
placeholder="Plak je Discord ID hier"
|
|
value={discordId}
|
|
onChange={(e) => setDiscordId(e.target.value)}
|
|
className="flex-1 focus:ring-0 border-4 rounded text-sm px-3 py-2"
|
|
style={{
|
|
backgroundColor: "var(--color-background)",
|
|
color: "var(--color-text-readable, var(--color-text))",
|
|
borderColor:
|
|
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
|
}}
|
|
required
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={isPending}
|
|
className="rounded px-4 py-2 text-white font-semibold whitespace-nowrap"
|
|
style={{ backgroundColor: "#5865F2", border: "2px solid #7983F5" }}
|
|
>
|
|
{isPending ? "Bezig..." : "Verifiëren"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|