99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { FormEvent, useState } from "react";
|
|
import { siteConfig } from "../lib/server-config";
|
|
|
|
type FormStatus = {
|
|
tone: "success" | "error";
|
|
message: string;
|
|
} | null;
|
|
|
|
export default function MinecraftWhitelistForm() {
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [status, setStatus] = useState<FormStatus>(null);
|
|
|
|
async function submitRequest(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
const form = event.currentTarget;
|
|
setSubmitting(true);
|
|
setStatus(null);
|
|
|
|
const formData = new FormData(form);
|
|
const payload = {
|
|
game_username: String(formData.get("username") ?? ""),
|
|
message: String(formData.get("reason") ?? ""),
|
|
server_slug: "minecraft",
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(`${siteConfig.apiUrl}/api/access-requests`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const result = await response.json().catch(() => ({})) as { message?: string };
|
|
throw new Error(result.message ?? "Demande refusée.");
|
|
}
|
|
|
|
form.reset();
|
|
setStatus({
|
|
tone: "success",
|
|
message: "Demande envoyée.",
|
|
});
|
|
} catch (error) {
|
|
setStatus({
|
|
tone: "error",
|
|
message:
|
|
error instanceof Error
|
|
? error.message
|
|
: "Impossible d'envoyer la demande.",
|
|
});
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form className="whitelist-form block-panel" onSubmit={submitRequest}>
|
|
<div className="form-field form-field--full">
|
|
<label htmlFor="minecraft-username">Pseudo Minecraft</label>
|
|
<input
|
|
id="minecraft-username"
|
|
name="username"
|
|
type="text"
|
|
autoComplete="username"
|
|
minLength={3}
|
|
maxLength={16}
|
|
pattern="[A-Za-z0-9_]{3,16}"
|
|
placeholder="Leon"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-field form-field--full">
|
|
<label htmlFor="minecraft-reason">Message</label>
|
|
<textarea
|
|
id="minecraft-reason"
|
|
name="reason"
|
|
maxLength={255}
|
|
rows={5}
|
|
placeholder="Je voudrais rejoindre le serveur..."
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button className="whitelist-submit" type="submit" disabled={submitting}>
|
|
<span>{submitting ? "Envoi..." : "Envoyer la demande"}</span>
|
|
</button>
|
|
|
|
{status ? (
|
|
<p className={`whitelist-message whitelist-message--${status.tone}`} role="status">
|
|
{status.message}
|
|
</p>
|
|
) : null}
|
|
</form>
|
|
);
|
|
}
|