feat: mise à jour sécurité CVE-2025-55182 (Next.js 15.5.7, React 19.1.2)

This commit is contained in:
jessy-david-dev
2026-02-08 17:24:48 +01:00
commit b9a9d687b6
64 changed files with 15638 additions and 0 deletions
+87
View File
@@ -0,0 +1,87 @@
'use client';
import { motion } from 'framer-motion';
const TAGS = [
{ id: 'spawn', label: 'Spawn', cls: 'bg-purple-700/30 text-purple-300' },
{ id: 'build', label: 'Build', cls: 'bg-emerald-600/25 text-emerald-300' },
{ id: 'usine', label: 'Usine', cls: 'bg-orange-600/20 text-orange-300' },
];
export default function AProposPage() {
return (
<main className="flex min-h-screen flex-col bg-[#0e0e10]">
<section className="mx-auto w-full max-w-4xl flex-1 px-4 py-16 text-gray-200">
<motion.h1
className="relative mb-10 text-4xl font-extrabold tracking-tight text-red-600"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: .6 }}
>
À&nbsp;propos
</motion.h1>
<motion.div
className="space-y-6 leading-relaxed text-lg"
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: .15, duration: .6 }}
>
<p>
Cette application&nbsp;web permet à la communauté du serveur&nbsp;
<strong className="text-red-600">Aystone</strong> de référencer, suivre
et partager ses projets&nbsp;Minecraft dans les différents mondes&nbsp;:
<span className="ml-1 rounded-full bg-emerald-600/25 px-2 py-0.5 text-xs font-semibold text-emerald-300">Overworld</span>,
<span className="mx-1 rounded-full bg-red-700/25 px-2 py-0.5 text-xs font-semibold text-red-300">Nether</span>,
<span className="rounded-full bg-purple-700/30 px-2 py-0.5 text-xs font-semibold text-purple-300">End</span>.
</p>
<p>
Le tableau liste&nbsp;: joueur, état, monde, nom, description,
coordonnées et tags personnalisés. Linterface responsive et
épurée garantit une expérience fluide sur mobile comme sur desktop.
</p>
<p>
Sous le capot&nbsp;: <strong>Next&nbsp;15</strong>, <strong>React&nbsp;19</strong>,
<strong> Tailwind&nbsp;4</strong> et <strong>Framer&nbsp;Motion</strong> pour les
animations. Aucune donnée sensible nest stockée : on se connecte
simplement via discord&nbsp;.
<br />
Sur le dashboard, vous pouvez ajouter votre pseudo Minecraft dans la section <strong>Infos du compte</strong>
</p>
<section>
<h2 className="mb-3 text-2xl font-semibold">Légende des tags</h2>
<div className="flex flex-wrap gap-3">
{TAGS.map(t => (
<span
key={t.id}
className={`${t.cls} inline-block rounded-full px-3 py-1 text-sm font-semibold`}
>
{t.label}
</span>
))}
</div>
</section>
<section>
<h2 className="mb-3 text-2xl font-semibold">Code source</h2>
<p>
Le projet est entièrement open-source&nbsp;:{" "}
<a
href="https://github.com/UltraLionfr/aystone-manager"
target="_blank"
rel="noopener noreferrer"
className="text-orange-400 underline hover:text-orange-500"
>
dépôt&nbsp;GitHub
</a>.
Déployé sur&nbsp;<strong>Coolify</strong>.
</p>
</section>
</motion.div>
</section>
</main>
);
}
+11
View File
@@ -0,0 +1,11 @@
import AdsGalleryClient from "@/components/AdsGalleryClient";
import { getAdFiles } from "@/lib/getAds";
export const metadata = {
title: "Galerie des publicités Aystone",
};
export default async function AdsGalleryPage() {
const files = await getAdFiles();
return <AdsGalleryClient files={files} />;
}
+3
View File
@@ -0,0 +1,3 @@
import { handlers } from "@/auth";
export const { GET, POST } = handlers;
+26
View File
@@ -0,0 +1,26 @@
import { Palette } from "lucide-react";
import Image from "next/image";
export const metadata = {
title: "Charte des couleurs Minecraft",
};
export default function CouleursPage() {
return (
<div className="min-h-screen bg-[#0e0e10] text-amber-50 px-4 py-12 flex flex-col items-center">
<h1 className="text-4xl font-bold mb-6 text-center flex items-center justify-center gap-2">
<Palette className="w-8 h-8 text-amber-50" />
Charte des couleurs Minecraft
</h1>
<div className="w-full max-w-4xl">
<Image
src="/charte-couleurs.png"
alt="Charte des couleurs Minecraft"
width={1000}
height={563}
className="rounded-xl shadow-xl w-full h-auto"
/>
</div>
</div>
);
}
+63
View File
@@ -0,0 +1,63 @@
"use client";
import {
LayoutDashboard,
PlusCircle,
TableProperties,
User
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
const LINKS = [
{ name: "Tableau", href: "/dashboard", icon: LayoutDashboard },
{ name: "Profil", href: "/dashboard/profil", icon: User },
{ name: "Ajouter", href: "/dashboard/ajouter", icon: PlusCircle },
{ name: "Mes Projets", href: "/dashboard/projets", icon: TableProperties },
];
export default function Sidebar() {
const pathname = usePathname();
return (
<aside className="flex flex-col w-56 bg-[#0e0e10]/80 backdrop-blur-lg border-r border-white/10">
{/* Liens de navigation */}
<nav className="flex-1 px-4 py-6 space-y-1">
{LINKS.map(({ name, href, icon: Icon }) => {
const active = pathname === href;
return (
<Link
key={href}
href={href}
className={`
group flex items-center gap-3 px-3 py-2 text-sm rounded-lg transition
${active
? "bg-white/10 border-l-4 border-red-500"
: "hover:bg-white/10"}
`}
>
<Icon
size={18}
className={`
flex-shrink-0 transition
${active
? "text-red-500"
: "text-amber-50/60 group-hover:text-amber-50"}
`}
/>
<span
className={`transition ${
active
? "text-red-500"
: "text-amber-50/60 group-hover:text-amber-50"
}`}
>
{name}
</span>
</Link>
);
})}
</nav>
</aside>
);
}
+28
View File
@@ -0,0 +1,28 @@
"use client";
import { motion } from "framer-motion";
import { ReactNode } from "react";
type Props = {
title: string;
value: string | number;
icon?: ReactNode;
};
export default function StatCard({ title, value, icon }: Props) {
return (
<motion.div
whileHover={{ translateY: -4, boxShadow: "0 8px 24px rgba(0,0,0,0.4)" }}
className="relative rounded-lg bg-white/5 p-6 backdrop-blur
ring-1 ring-white/10 transition"
>
{icon && (
<div className="absolute -top-4 right-4 text-4xl opacity-20">
{icon}
</div>
)}
<h3 className="text-sm font-medium text-amber-50/70">{title}</h3>
<p className="mt-2 text-3xl font-semibold text-amber-50">{value}</p>
</motion.div>
);
}
+103
View File
@@ -0,0 +1,103 @@
"use server";
import { auth } from "@/auth";
import { prisma } from "@/lib/prisma";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
export async function createProject(form: FormData) {
const session = await auth();
if (!session) throw new Error("unauth");
const currentUser = await prisma.user.findUnique({
where: { email: session.user!.email! },
});
const joueur =
(form.get("joueur") as string | null)?.trim() ||
currentUser?.mcName ||
session.user!.name!;
const coords = form.get("coords")?.toString().trim();
const tagsRaw = form.get("tags")?.toString() ?? "";
const data = {
joueur,
etat: (form.get("etat") as string) ?? "En cours",
monde: (form.get("monde") as string) ?? "Overworld",
projet: (form.get("projet") as string).trim(),
description: (form.get("description") as string).trim(),
coords: coords && coords.length > 0 ? coords : null,
tags: tagsRaw
.split(",")
.map((t) => t.trim())
.filter(Boolean),
};
await prisma.project.create({ data });
revalidatePath("/dashboard");
redirect("/dashboard");
}
export async function updateProject(projectId: string, form: FormData) {
const session = await auth();
if (!session) throw new Error("unauth");
const coords = form.get("coords")?.toString().trim();
const tagsRaw = form.get("tags")?.toString() ?? "";
const data = {
etat: (form.get("etat") as string),
monde: (form.get("monde") as string),
projet: (form.get("projet") as string).trim(),
description: (form.get("description") as string).trim(),
coords: coords && coords.length > 0 ? coords : null,
tags: tagsRaw
.split(",")
.map((t) => t.trim())
.filter(Boolean),
};
await prisma.project.update({
where: { id: projectId },
data,
});
revalidatePath("/dashboard");
redirect("/dashboard");
}
export async function updateMinecraftName(form: FormData) {
const session = await auth();
if (!session) throw new Error("unauth");
const mcName = (form.get("mcName") as string).trim();
if (!/^[A-Za-z0-9_]{3,16}$/.test(mcName)) throw new Error("invalid");
const user = await prisma.user.findUnique({
where: { email: session.user!.email! },
});
if (!user) {
await prisma.user.create({
data: {
email: session.user!.email!,
name: session.user!.name,
image: session.user!.image,
mcName,
},
});
} else {
if (user.mcName) {
throw new Error("Le pseudo Minecraft ne peut pas être modifié après avoir été défini.");
}
await prisma.user.update({
where: { email: session.user!.email! },
data: { mcName },
});
}
revalidatePath("/dashboard");
revalidatePath("/");
}
+192
View File
@@ -0,0 +1,192 @@
"use client";
import { motion } from "framer-motion";
import { Layers3, MapPin, Plus, Tags, User, X } from "lucide-react";
import { useSession } from "next-auth/react";
import { useState } from "react";
import { createProject } from "../actions";
const PREDEF = ["build", "usine", "spawn"] as const;
type TagColor = (typeof PREDEF)[number];
const palette: Record<TagColor, string> = {
build: "bg-emerald-600/90",
usine: "bg-orange-600/90",
spawn: "bg-fuchsia-700/90",
};
const isValidCoord = (value: string) => /^-?\d*$/.test(value);
export default function AddProjectForm() {
const { data: session } = useSession();
const [tags, setTags] = useState<string[]>([]);
const [tagInput, setInput] = useState("");
const [x, setX] = useState("");
const [y, setY] = useState("");
const [z, setZ] = useState("");
const addTag = (t: string) => {
const val = t.trim().toLowerCase();
if (!val || tags.includes(val) || tags.length >= 5) return;
setTags([...tags, val]);
};
const del = (t: string) => setTags(tags.filter((x) => x !== t));
const getTagClass = (t: string) => {
return palette[t as TagColor] ?? "bg-gray-600";
};
return (
<motion.form
action={createProject}
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
className="max-w-xl mx-auto bg-gray-800/60 rounded-xl shadow-lg p-6 space-y-6"
>
{/* nom */}
<div className="relative">
<Layers3 className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
<input
name="projet"
placeholder="Nom du projet"
required
className="w-full rounded-lg bg-gray-700 py-2 pl-10 pr-3 text-amber-50 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
/>
</div>
{/* joueur */}
{session?.user?.email === "ultralionfr@gmail.com" && (
<div className="relative">
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
<input
name="joueur"
placeholder="Pseudo Minecraft"
required
className="w-full rounded-lg bg-gray-700 py-2 pl-10 pr-3 text-amber-50 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
/>
</div>
)}
{/* coords */}
<div className="grid grid-cols-3 gap-3">
{[
{ name: "x", value: x, setValue: setX },
{ name: "y", value: y, setValue: setY },
{ name: "z", value: z, setValue: setZ },
].map(({ name, value, setValue }) => (
<div className="relative" key={name}>
<MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
<input
name={name}
placeholder={name.toUpperCase()}
value={value}
onChange={(e) => {
if (isValidCoord(e.target.value)) setValue(e.target.value);
}}
className="w-full rounded-lg bg-gray-700 py-2 pl-9 pr-3 text-amber-50 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
/>
</div>
))}
</div>
{/* Tags */}
<div className="space-y-2">
<label className="flex items-center gap-1 text-sm text-gray-300">
<Tags size={16} /> Tags <span className="text-xs text-gray-400">(max 5)</span>
</label>
<div className="flex flex-wrap gap-2">
{tags.map((t) => (
<button
key={t}
type="button"
onClick={() => del(t)}
className={`rounded-full px-3 py-1 text-xs ${getTagClass(t)} text-amber-50 flex items-center gap-1 hover:opacity-80`}
>
{t} <X size={12} />
</button>
))}
</div>
<div className="flex flex-col sm:flex-row gap-3">
<select
onChange={(e) => {
addTag(e.target.value);
e.target.value = "";
}}
className="w-full sm:w-1/2 rounded-lg bg-gray-700 py-2 px-3 text-amber-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"
defaultValue=""
>
<option value="">Choisir un tag pré-défini</option>
{PREDEF.map((t) => (
<option key={t}>{t}</option>
))}
</select>
<div className="relative flex-1">
<input
value={tagInput}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) =>
e.key === "Enter" && (e.preventDefault(), addTag(tagInput), setInput(""))
}
placeholder="Ajouter un tag personnalisé"
className="w-full rounded-lg bg-gray-700 py-2 pl-3 pr-12 text-amber-50 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
/>
<button
type="button"
onClick={() => {
addTag(tagInput);
setInput("");
}}
className="absolute right-1 top-1 rounded-lg bg-indigo-500 hover:bg-indigo-600 p-1"
>
<Plus size={16} className="text-amber-50" />
</button>
</div>
</div>
</div>
{/* description */}
<textarea
name="description"
rows={4}
placeholder="Description du projet"
className="w-full rounded-lg bg-gray-700 p-3 text-amber-50 placeholder-gray-400 resize-y focus:outline-none focus:ring-2 focus:ring-indigo-500"
/>
{/* état + monde */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<select name="etat" className="input-style bg-gray-700 text-amber-50">
<option>En cours</option>
<option>Terminé</option>
<option>Pause</option>
</select>
<select name="monde" className="input-style bg-gray-700 text-amber-50">
<option>Overworld</option>
<option>Nether</option>
<option>End</option>
</select>
</div>
{/* hidden */}
<input type="hidden" name="tags" value={tags.join(",")} />
<input type="hidden" name="coords" id="coordsField" value="" />
{/* submit */}
<button
type="submit"
className="cursor-pointer w-full rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 py-3 text-amber-50 font-semibold shadow-md hover:shadow-lg transition duration-300"
onClick={(e) => {
const form = (e.target as HTMLButtonElement).form!;
const coordsField = form.coords as HTMLInputElement;
coordsField.value = [form.x.value, form.y.value, form.z.value].filter(Boolean).join(" ");
}}
>
Ajouter le projet
</button>
</motion.form>
);
}
+22
View File
@@ -0,0 +1,22 @@
import { auth } from "@/auth";
import { redirect } from "next/navigation";
import AddProjectForm from "./AddProjectForm";
export const dynamic = "force-dynamic";
export const metadata = { title: "Ajouter un projet | Dashboard" };
export default async function AddProjectPage() {
const session = await auth();
if (!session) redirect("/");
return (
<section className="mx-auto max-w-xl px-4 py-10">
<div className="">
<h1 className="text-xl font-semibold text-red-400">
Ajouter un projet
</h1><br />
<AddProjectForm />
</div>
</section>
);
}
+19
View File
@@ -0,0 +1,19 @@
import Providers from "@/app/providers";
import Sidebar from "./Sidebar";
export const metadata = { title: "Dashboard | Aystone" };
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<Providers>
<div className="flex min-h-screen bg-[#0e0e10] text-amber-50">
<Sidebar />
<main className="flex-1 p-6">{children}</main>
</div>
</Providers>
);
}
+48
View File
@@ -0,0 +1,48 @@
import { auth } from "@/auth";
import { prisma } from "@/lib/prisma";
import { Info } from "lucide-react";
import { redirect } from "next/navigation";
import StatCard from "./StatCard";
export const dynamic = "force-dynamic";
export const revalidate = 0;
export default async function DashboardHome() {
const session = await auth();
if (!session) return redirect("/");
const user = await prisma.user.findUnique({
where: { email: session.user!.email! },
});
const joueur = user?.mcName ?? session.user!.name!;
const [projectCount, userCount] = await Promise.all([
prisma.project.count({ where: { joueur } }),
prisma.user.count(),
]);
return (
<div className="p-6 space-y-8">
<h1 className="text-4xl font-bold tracking-tight">Tableau de bord</h1>
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
<Info className="h-6 w-6 text-blue-600" />
<div>
<h2 className="font-semibold text-blue-800">Important</h2>
<p className="text-blue-700">
Pensez à compléter votre profil avec votre pseudo Minecraft pour pouvoir créer et associer vos projets à votre compte.
</p>
<p className="text-blue-700">
Vous pouvez mettre qu&apos;une seul fois votre pseudo Minecraft et pas le changer par la suite.
</p>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
<StatCard title="Mes projets" value={projectCount} />
<StatCard title="Membres inscrits" value={userCount} />
</div>
</div>
);
}
+79
View File
@@ -0,0 +1,79 @@
import { auth } from "@/auth";
import { prisma } from "@/lib/prisma";
import Image from "next/image";
import { redirect } from "next/navigation";
import { updateMinecraftName } from "../actions";
export const dynamic = "force-dynamic";
export const metadata = { title: "Profil | Dashboard" };
export default async function ProfilPage() {
const session = await auth();
if (!session) redirect("/");
const user = await prisma.user.findUnique({
where: { email: session.user!.email! },
});
return (
<section className="mx-auto max-w-lg px-4 py-10">
<h1 className="mb-6 text-2xl font-bold">Profil</h1>
<div className="card space-y-8">
{/* avatar Discord */}
<div className="flex items-center gap-4">
<Image
src={session.user?.image ?? ""}
alt=""
width={56}
height={56}
className="rounded-full"
/>
<div>
<p className="text-lg font-semibold">{session.user?.name}</p>
<p className="text-sm text-white/60">{session.user?.email}</p>
</div>
</div>
{/* pseudo Minecraft */}
<form action={updateMinecraftName} className="space-y-4">
<label className="mb-1 block text-sm text-white/70">
Pseudo Minecraft
</label>
<div className="relative w-full max-w-md">
{user?.mcName && (
<Image
src={`https://mc-heads.net/avatar/${user.mcName}/28`}
alt=""
width={28}
height={28}
className="absolute left-2 top-1/2 -translate-y-1/2 rounded"
unoptimized
/>
)}
{/* padding-left 48 px pour laisser la place à lavatar */}
<input
name="mcName"
defaultValue={user?.mcName ?? ""}
placeholder="Pseudo MC"
required
pattern="[A-Za-z0-9_]{3,16}"
disabled={Boolean(user?.mcName)}
className="input pl-12 disabled:opacity-60"
/>
</div>
<button
type="submit"
disabled={Boolean(user?.mcName)}
className="rounded bg-indigo-600 px-4 py-2 text-sm font-medium hover:bg-indigo-700 disabled:opacity-50"
>
Enregistrer
</button>
</form>
</div>
</section>
);
}
+106
View File
@@ -0,0 +1,106 @@
"use client";
import { SafeProject } from "@/lib/validators/project";
import { motion } from "framer-motion";
import {
BadgeCheck,
FileText,
Globe,
MapPin,
Pencil,
Tag,
} from "lucide-react";
import Link from "next/link";
export default function UserProjectsTable({ projects }: { projects: SafeProject[] }) {
const headers = [
{ label: "Projet", icon: FileText },
{ label: "État", icon: BadgeCheck },
{ label: "Monde", icon: Globe },
{ label: "Coordonnées", icon: MapPin },
{ label: "Tags", icon: Tag },
{ label: "Actions", icon: Pencil },
];
return (
<section className="mx-auto max-w-6xl px-4 py-10">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
className="flex items-center justify-between mb-6"
>
<h1 className="text-2xl font-bold text-amber-50">Mes projets</h1>
<Link
href="/dashboard/ajouter"
className="inline-flex items-center gap-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium hover:bg-green-700"
>
Ajouter un projet
</Link>
</motion.div>
{projects.length === 0 ? (
<p className="mt-6 text-center text-amber-50/60">Vous navez encore créé aucun projet.</p>
) : (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.1 }}
className="overflow-x-auto rounded-t-2xl"
>
<table className="w-full border-collapse text-left text-[13px]">
<thead>
<tr className="bg-slate-800 text-amber-50 [&>th:first-child]:rounded-tl-xl [&>th:last-child]:rounded-tr-xl">
{headers.map(({ label, icon: Icon }) => (
<th key={label} className="px-3 py-2 font-semibold">
<div className="flex items-center gap-1">
<Icon size={14} className="opacity-70" />
{label}
</div>
</th>
))}
</tr>
</thead>
<tbody>
{projects.map((p) => (
<tr key={p.id} className="bg-[#0f111c]">
<td className="px-3 py-2">{p.projet}</td>
<td className="px-3 py-2">
<span className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${
p.etat === "En cours" ? "bg-yellow-400/90 text-black" :
p.etat === "Terminé" ? "bg-green-600/90" : "bg-red-600/90"
}`}>{p.etat}</span>
</td>
<td className="px-3 py-2">
<span className={`rounded-full px-2 py-0.5 text-[11px] ${
p.monde === "Overworld" ? "bg-emerald-700/80" :
p.monde === "Nether" ? "bg-red-700/80" : "bg-violet-800/90"
}`}>{p.monde}</span>
</td>
<td className="px-3 py-2 font-mono tabular-nums">{p.coords ?? "—"}</td>
<td className="px-3 py-2">
<div className="flex flex-wrap gap-1">
{p.tags.map((t, i) => (
<span key={t + i} className="rounded-full bg-white/10 px-2 py-0.5 text-xs">
{t}
</span>
))}
</div>
</td>
<td className="px-3 py-2">
<Link
href={`/dashboard/projets/${p.id}`}
className="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-indigo-400 hover:bg-white/10"
>
<Pencil size={12} /> Modifier
</Link>
</td>
</tr>
))}
</tbody>
</table>
</motion.div>
)}
</section>
);
}
@@ -0,0 +1,165 @@
"use client";
import { motion } from "framer-motion";
import { Layers3, MapPin, Tags } from "lucide-react";
import { useState } from "react";
import { Project } from "../../../../components/ProjectsTable";
import { updateProject } from "../../actions";
type Props = {
project: Project;
};
/** Formulaire client pour éditer un projet existant */
export default function EditProjectForm({ project }: Props) {
const [tags, setTags] = useState<string[]>(project.tags ?? []);
const [customTag, setCustomTag] = useState("");
const PREDEF = ["build", "usine", "spawn"] as const;
const addTag = (t: string) => {
const val = t.trim().toLowerCase();
if (!val || tags.includes(val) || tags.length >= 5) return;
setTags([...tags, val]);
};
const removeTag = (t: string) => {
setTags(tags.filter((x) => x !== t));
};
const coordsParts = (project.coords ?? "").split(" ");
return (
<motion.form
action={(formData: FormData) => updateProject(project.id!, formData)}
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
className="space-y-6"
>
{/* Titre du projet */}
<div className="relative">
<Layers3 size={18} className="absolute left-3 top-3 text-amber-50/40" />
<input
name="projet"
defaultValue={project.projet}
placeholder="Titre du projet"
required
className="input pl-10"
/>
</div>
{/* Coordonnées X Y Z */}
<div className="grid grid-cols-3 gap-4">
{["X", "Y", "Z"].map((axis, idx) => (
<div key={axis} className="relative">
<MapPin size={16} className="absolute left-3 top-3 text-amber-50/40" />
<input
name={axis.toLowerCase()}
defaultValue={coordsParts[idx] ?? ""}
placeholder={axis}
className="input pl-10"
/>
</div>
))}
</div>
{/* Description */}
<textarea
name="description"
defaultValue={project.description}
rows={4}
placeholder="Description détaillée"
className="input w-full resize-y"
/>
{/* État & Monde */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<select name="etat" defaultValue={project.etat} className="input">
<option>En cours</option>
<option>Terminé</option>
<option>Pause</option>
</select>
<select name="monde" defaultValue={project.monde} className="input">
<option>Overworld</option>
<option>Nether</option>
<option>End</option>
</select>
</div>
{/* Tags */}
<div className="space-y-2">
<label className="flex items-center gap-2 text-sm text-amber-50/70">
<Tags size={16} /> Tags (max 5)
</label>
<div className="flex flex-wrap gap-2">
{tags.map((t) => (
<button
key={t}
type="button"
onClick={() => removeTag(t)}
className="rounded-full bg-slate-700/70 px-2 py-0.5 text-xs hover:bg-red-600/80"
>
{t}
</button>
))}
</div>
<div className="flex gap-2">
<select
onChange={(e) => {
addTag(e.target.value);
e.target.value = "";
}}
className="input flex-1"
defaultValue=""
>
<option value="">Tag prédéfini</option>
{PREDEF.map((t) => (
<option key={t}>{t}</option>
))}
</select>
<input
value={customTag}
onChange={(e) => setCustomTag(e.target.value)}
onKeyDown={(e) =>
e.key === "Enter" &&
(e.preventDefault(), addTag(customTag), setCustomTag(""))
}
placeholder="Ajouter tag..."
className="input flex-1"
/>
<button
type="button"
onClick={() => {
addTag(customTag);
setCustomTag("");
}}
className="rounded bg-indigo-600 px-4 py-2 text-sm hover:bg-indigo-700"
>
Ajouter
</button>
</div>
</div>
{/* Champs cachés */}
<input type="hidden" name="tags" value={tags.join(",")} />
<input type="hidden" name="coords" value="" />
{/* Bouton de soumission */}
<button
type="submit"
className="w-full rounded-full bg-gradient-to-r from-green-500 to-emerald-600 py-2.5 font-semibold shadow hover:brightness-110"
onClick={(e) => {
const f = (e.target as HTMLButtonElement).form!;
const x = (f.x as HTMLInputElement).value;
const y = (f.y as HTMLInputElement).value;
const z = (f.z as HTMLInputElement).value;
(f.coords as HTMLInputElement).value = [x, y, z]
.filter(Boolean)
.join(" ");
}}
>
Mettre à jour le projet
</button>
</motion.form>
);
}
+41
View File
@@ -0,0 +1,41 @@
import { auth } from "@/auth";
import { prisma } from "@/lib/prisma";
import { notFound, redirect } from "next/navigation";
import { z } from "zod";
import EditProjectForm from "./EditProjectForm";
type Props = { params: { id: string } };
// Définition stricte du schéma
const ProjectSchema = z.object({
id: z.string(),
joueur: z.string(),
projet: z.string(),
description: z.string(),
coords: z.string().nullable().transform((val) => val ?? ""),
tags: z.string().array(),
etat: z.enum(["En cours", "Terminé", "Pause"]),
monde: z.enum(["Overworld", "Nether", "End"]),
createdAt: z.date(),
});
export default async function EditProjectPage({ params }: Props) {
const session = await auth();
if (!session) redirect("/");
const data = await prisma.project.findUnique({
where: { id: params.id },
});
if (!data) notFound();
// ✅ Cast via zod
const project = ProjectSchema.parse(data);
return (
<section className="mx-auto max-w-xl px-4 py-10">
<h1 className="text-2xl font-bold mb-6">Modifier le projet</h1>
<EditProjectForm project={project} />
</section>
);
}
+41
View File
@@ -0,0 +1,41 @@
import { auth } from "@/auth";
import { prisma } from "@/lib/prisma";
import { redirect } from "next/navigation";
import { z } from "zod";
import UserProjectsTable from "./UserProjectsTable";
// Définition stricte du schéma
const ProjectSchema = z.object({
id: z.string(),
joueur: z.string(),
projet: z.string(),
description: z.string(),
coords: z.string().nullable(),
tags: z.string().array(),
etat: z.enum(["En cours", "Terminé", "Pause"]),
monde: z.enum(["Overworld", "Nether", "End"]),
createdAt: z.date(),
});
export const dynamic = "force-dynamic";
export default async function UserProjectsPage() {
const session = await auth();
if (!session) redirect("/");
const user = await prisma.user.findUnique({
where: { email: session.user.email! },
});
const joueur = user?.mcName ?? session.user.name!;
const projectsRaw = await prisma.project.findMany({
where: { joueur },
orderBy: { createdAt: "desc" },
});
// ✅ Valide les projets pour forcer le bon typage
const projects = projectsRaw.map((p) => ProjectSchema.parse(p));
return <UserProjectsTable projects={projects} />;
}
+11
View File
@@ -0,0 +1,11 @@
@import "tailwindcss";
.input {
@apply w-full rounded-md bg-[#20222e] px-10 py-2.5 text-sm text-white
placeholder-white/40 ring-1 ring-white/10 outline-none
focus:ring-2 focus:ring-indigo-500 transition;
}
.card {
@apply rounded-2xl bg-[#111320]/70 p-8 ring-1 ring-white/10 backdrop-blur
shadow-[0_6px_20px_rgba(0,0,0,0.45)];
}
+33
View File
@@ -0,0 +1,33 @@
import Providers from "@/app/providers";
import AdsSideBanners from "@/components/AdsSideBanners";
import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "AyStone Instance Cobble",
description: "Ce petit site est une application de gestion de projets Minecraft, pensée spécialement pour la communauté du serveur Aystone.",
icons: {
icon: "/aystone.png",
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="fr">
<body className="bg-[#0e0e10] text-amber-50 antialiased">
<AdsSideBanners />
<Providers>
<Navbar />
<main className="min-h-screen">{children}</main>
<Footer />
</Providers>
</body>
</html>
);
}
+14
View File
@@ -0,0 +1,14 @@
"use client";
import { signIn, useSession } from "next-auth/react";
import { useEffect } from "react";
export default function LoginPage() {
const { data: session } = useSession();
useEffect(() => {
if (session) window.location.replace("/dashboard");
else signIn("discord", { callbackUrl: "/dashboard" });
}, [session]);
return <p className="p-8 text-center">Redirection vers Discord</p>;
}
+9
View File
@@ -0,0 +1,9 @@
import MapsClient from "@/components/MapsClient";
export const metadata = {
title: "Carte dynamique | Aystone",
};
export default function MapsPage() {
return <MapsClient />;
}
+32
View File
@@ -0,0 +1,32 @@
"use client";
import { motion } from "framer-motion";
import { Frown } from "lucide-react";
import Link from "next/link";
export default function NotFound() {
return (
<div className="min-h-screen flex items-center justify-center bg-[#0f1117] px-4">
<motion.div
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: "easeOut" }}
className="text-center max-w-md"
>
<div className="mb-4 flex justify-center">
<Frown className="h-12 w-12 text-red-500" />
</div>
<h1 className="text-3xl font-bold text-amber-50 mb-2">404 Page introuvable</h1>
<p className="text-amber-50/70 mb-6">
La page que tu cherches n&apos;existe pas ou a é déplacée.
</p>
<Link
href="/"
className="inline-block rounded-lg bg-red-500 px-4 py-2 text-sm font-semibold text-amber-50 transition hover:bg-red-600"
>
Retour à l&apos;accueil
</Link>
</motion.div>
</div>
);
}
+10
View File
@@ -0,0 +1,10 @@
import OutilsPage from "@/components/OutilsPage";
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Outils | Aystone",
};
export default function Page() {
return <OutilsPage />;
}
+31
View File
@@ -0,0 +1,31 @@
import Banner from "@/components/Banner";
import ProjectsTable, { Project } from "@/components/ProjectsTable";
import { prisma } from "@/lib/prisma";
import MotionHeading from "../components/MotionHeading";
export const dynamic = "force-dynamic";
export default async function Home() {
const rawProjects = await prisma.project.findMany({
orderBy: { createdAt: "desc" },
});
const projects: Project[] = rawProjects.map((p) => ({
id: p.id,
joueur: p.joueur,
etat: p.etat as Project["etat"],
monde: p.monde as Project["monde"],
projet: p.projet,
description: p.description,
coords: p.coords ?? "",
tags: p.tags,
}));
return (
<>
<Banner />
<MotionHeading />
<ProjectsTable data={projects} />
</>
);
}
+7
View File
@@ -0,0 +1,7 @@
"use client";
import { SessionProvider } from "next-auth/react";
import { ReactNode } from "react";
export default function Providers({ children }: { children: ReactNode }) {
return <SessionProvider>{children}</SessionProvider>;
}
+48
View File
@@ -0,0 +1,48 @@
import Banner from "@/components/Banner";
import ProjectsTable, { Project } from "@/components/ProjectsTable";
import { prisma } from "@/lib/prisma";
import { notFound } from "next/navigation";
type Props = {
params: { username: string };
};
export default async function UserProfilePage({ params }: Props) {
const username = params.username;
const user = await prisma.user.findUnique({
where: { mcName: username },
});
if (!user) return notFound();
const rawProjects = await prisma.project.findMany({
where: { joueur: username },
orderBy: { createdAt: "desc" },
});
const projects: Project[] = rawProjects.map((p) => ({
id: p.id,
joueur: p.joueur,
etat: p.etat as Project["etat"],
monde: p.monde as Project["monde"],
projet: p.projet,
description: p.description,
coords: p.coords ?? "",
tags: p.tags,
}));
return (
<section className="p-4">
<Banner />
<h1 className="text-2xl font-bold text-amber-50 text-center">
Projets de <span className="text-yellow-300">{username}</span>
</h1>
{projects.length === 0 ? (
<p className="mt-4 text-amber-50/60">Aucun projet enregistré.</p>
) : (
<ProjectsTable data={projects} hidePlayerFilter />
)}
</section>
);
}