feat: add authentication and user management features

- Implemented AuthButton component for Discord sign-in and sign-out functionality. - Created CopyButton component for copying server IP addresses. - Developed EventCard and GradeCard components for displaying events and grades. - Added Footer and Navbar components for site navigation and information. - Introduced PurchaseButton for handling grade purchases with Stripe integration. - Created SectionHeader component for consistent section titles. - Implemented session management with SessionProvider for NextAuth. - Set up PostgreSQL database with Docker and Prisma for data management. - Added admin guard functionality to restrict access to certain routes. - Configured NextAuth with Discord provider for user authentication. - Defined Prisma schema for user, admin, grade, event, and purchase models. - Seeded database with initial grades and events data. - Added SVG hero image for the landing page. - Extended NextAuth types to include additional user properties.
2026-06-16 00:02:35 +02:00 · 2026-04-28 21:09:55 +02:00
parent 87deccb662
commit b7010a1704
43 changed files with 2794 additions and 126 deletions
@@ -0,0 +1,87 @@
+"use client";
+
+import Link from "next/link";
+import { signIn, signOut, useSession } from "next-auth/react";
+
+type AuthButtonProps = {
+  className?: string;
+  label?: string;
+  compact?: boolean;
+};
+
+export default function AuthButton({
+  className = "",
+  label = "Se connecter avec Discord",
+  compact = false,
+}: AuthButtonProps) {
+  const { data: session, status } = useSession();
+
+  if (status === "loading") {
+    return (
+      <div
+        className={`inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs text-slate-200 ${className}`}
+      >
+        <span className="h-2 w-2 animate-pulse rounded-full bg-cyan-300" />
+        <span>Loading</span>
+      </div>
+    );
+  }
+
+  if (!session?.user) {
+    return (
+      <button
+        type="button"
+        onClick={() => signIn("discord", { callbackUrl: "/" })}
+        className={`inline-flex items-center justify-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-white transition hover:bg-white/10 ${className}`}
+      >
+        <span className="h-2 w-2 rounded-full bg-cyan-300" />
+        <span>{label}</span>
+      </button>
+    );
+  }
+
+  const avatarUrl = session.user.discordAvatar && session.user.discordId
+    ? `https://cdn.discordapp.com/avatars/${session.user.discordId}/${session.user.discordAvatar}.png`
+    : session.user.image ?? "";
+
+  return (
+    <div
+      className={`flex items-center gap-2 ${compact ? "" : "rounded-full border border-white/10 bg-white/5 px-3 py-2"} ${className}`}
+    >
+      {avatarUrl ? (
+        <img
+          src={avatarUrl}
+          alt={session.user.discordUsername ?? "Discord avatar"}
+          className="h-8 w-8 rounded-full border border-white/20 object-cover"
+        />
+      ) : (
+        <div className="h-8 w-8 rounded-full border border-white/20 bg-white/10" />
+      )}
+      <div className="hidden sm:flex sm:flex-col">
+        <span className="text-xs font-semibold text-white">
+          {session.user.discordUsername ?? session.user.name ?? "Player"}
+        </span>
+        <span className="text-[10px] uppercase tracking-[0.2em] text-slate-400">
+          {session.user.isAdmin ? "Admin" : "Connected"}
+        </span>
+      </div>
+      <div className="flex items-center gap-2">
+        {session.user.isAdmin ? (
+          <Link
+            href="/admin"
+            className="rounded-full border border-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.25em] text-cyan-200/90 transition hover:border-cyan-300/40"
+          >
+            Admin
+          </Link>
+        ) : null}
+        <button
+          type="button"
+          onClick={() => signOut({ callbackUrl: "/" })}
+          className="rounded-full border border-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.25em] text-white/80 transition hover:border-white/30"
+        >
+          Sign out
+        </button>
+      </div>
+    </div>
+  );
+}