Add database and Prisma configurations, enhance event and leaderboard components with API integration, and update navigation for session management

2025-12-09 08:24:14 +01:00
parent f57a30eb4d
commit 4486f305f2
41 changed files with 9094 additions and 167 deletions
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import Navigation from "@/components/Navigation";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const result = await signIn("credentials", {
+        email,
+        password,
+        redirect: false,
+        callbackUrl: "/",
+      });
+
+      if (result?.error) {
+        setError("Email ou mot de passe incorrect");
+        setLoading(false);
+      } else if (result?.ok) {
+        router.push("/");
+        router.refresh();
+      } else {
+        setError("Une erreur est survenue lors de la connexion");
+        setLoading(false);
+      }
+    } catch (err) {
+      console.error("Login error:", err);
+      setError("Une erreur est survenue");
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-black relative">
+      <Navigation />
+      <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24">
+        {/* Background Image */}
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+          style={{
+            backgroundImage: `url('/got-2.jpg')`,
+          }}
+        >
+          <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
+        </div>
+
+        {/* Login Form */}
+        <div className="relative z-10 w-full max-w-md mx-auto px-8">
+          <div className="bg-black/80 border border-pixel-gold/30 rounded-lg p-8 backdrop-blur-sm">
+            <h1 className="text-4xl font-gaming font-black mb-2 text-center">
+              <span className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent">
+                CONNEXION
+              </span>
+            </h1>
+            <p className="text-gray-400 text-sm text-center mb-8">
+              Connectez-vous à votre compte
+            </p>
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {error && (
+                <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm">
+                  {error}
+                </div>
+              )}
+
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
+                >
+                  Email
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition"
+                  placeholder="votre@email.com"
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
+                >
+                  Mot de passe
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition"
+                  placeholder="••••••••"
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full px-6 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? "Connexion..." : "Se connecter"}
+              </button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-gray-400 text-sm">
+                Pas encore de compte ?{" "}
+                <Link
+                  href="/register"
+                  className="text-pixel-gold hover:text-orange-400 transition"
+                >
+                  S'inscrire
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+