feat (login page): add a sign in / log in page

2026-03-03 14:47:07 +01:00
parent 7905adb55d
commit 53c5d952b5
19 changed files with 1756 additions and 50 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ npm-debug.log*
 .vscode/
 dist/
 build/
+/app/generated/prisma
--- a/app/api/auth/[...nextauth]/route.ts
+++ b/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,2 @@
+import { handlers } from "@/lib/auth";
+export const { GET, POST } = handlers;
--- a/app/api/auth/register/route.ts
+++ b/app/api/auth/register/route.ts
@@ -0,0 +1,28 @@
+import { NextResponse } from "next/server";
+import bcrypt from "bcryptjs";
+import { prisma } from "@/lib/prisma";
+
+export async function POST(req: Request) {
+    try {
+        const { email, password, name } = await req.json();
+
+        if (!email || !password) {
+            return NextResponse.json({ error: "Email et mot de passe requis" }, { status: 400 });
+        }
+
+        const existing = await prisma.user.findUnique({ where: { email } });
+        if (existing) {
+            return NextResponse.json({ error: "Email déjà utilisé" }, { status: 400 });
+        }
+
+        const hashed = await bcrypt.hash(password, 12);
+
+        const user = await prisma.user.create({
+            data: { email, password: hashed, name },
+        });
+
+        return NextResponse.json({ id: user.id, email: user.email }, { status: 201 });
+    } catch {
+        return NextResponse.json({ error: "Erreur serveur" }, { status: 500 });
+    }
+}
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -2,16 +2,30 @@

 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import Sidebar from "@/components/Sidebar";

 export default function AuthLayout({ children }: { children: React.ReactNode }) {
+    const { status } = useSession();
    const router = useRouter();

    useEffect(() => {
-        if (sessionStorage.getItem("wyview_auth") !== "true") {
+        if (status === "unauthenticated") {
            router.push("/");
        }
-    }, [router]);
+    }, [status, router]);
+
+    if (status === "loading") {
+        return (
+            <div className="min-h-screen bg-[#0a0d0f] flex items-center justify-center">
+                <span className="text-[#4aff8c]/40 font-mono text-xs tracking-widest animate-pulse">
+                    CHARGEMENT...
+                </span>
+            </div>
+        );
+    }
+
+    if (status !== "authenticated") return null;

    return (
        <div className="flex min-h-screen">
--- a/app/finances/layout.tsx
+++ b/app/finances/layout.tsx
@@ -2,16 +2,21 @@

 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import Sidebar from "@/components/Sidebar";

 export default function AuthLayout({ children }: { children: React.ReactNode }) {
+    const { status } = useSession();
    const router = useRouter();

    useEffect(() => {
-        if (sessionStorage.getItem("wyview_auth") !== "true") {
+        if (status === "unauthenticated") {
            router.push("/");
        }
-    }, [router]);
+    }, [status, router]);
+
+    if (status === "loading") return null;
+    if (status !== "authenticated") return null;

    return (
        <div className="flex min-h-screen">
--- a/app/instagram/layout.tsx
+++ b/app/instagram/layout.tsx
@@ -2,16 +2,21 @@

 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import Sidebar from "@/components/Sidebar";

 export default function AuthLayout({ children }: { children: React.ReactNode }) {
+    const { status } = useSession();
    const router = useRouter();

    useEffect(() => {
-        if (sessionStorage.getItem("wyview_auth") !== "true") {
+        if (status === "unauthenticated") {
            router.push("/");
        }
-    }, [router]);
+    }, [status, router]);
+
+    if (status === "loading") return null;
+    if (status !== "authenticated") return null;

    return (
        <div className="flex min-h-screen">
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { SessionProvider } from "next-auth/react";

 export const metadata: Metadata = {
    title: "WYVIEW",
@@ -10,7 +11,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
    return (
        <html lang="fr">
        <body className="bg-[#0a0d0f] text-white antialiased">
+        <SessionProvider>
            {children}
+        </SessionProvider>
        </body>
        </html>
    );
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,39 +2,107 @@

 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { signIn } from "next-auth/react";
 import DragonEye from "@/components/DragonEye";

-export default function LoginPage() {
-    const [password, setPassword] = useState("");
-    const [error, setError] = useState(false);
-    const [loading, setLoading] = useState(false);
+export default function AuthPage() {
+    const [tab, setTab] = useState<"login" | "register">("login");
+
+    // Login state
+    const [loginEmail, setLoginEmail] = useState("");
+    const [loginPassword, setLoginPassword] = useState("");
+    const [loginError, setLoginError] = useState("");
+    const [loginLoading, setLoginLoading] = useState(false);
+
+    // Register state
+    const [regName, setRegName] = useState("");
+    const [regEmail, setRegEmail] = useState("");
+    const [regPassword, setRegPassword] = useState("");
+    const [regConfirm, setRegConfirm] = useState("");
+    const [regError, setRegError] = useState("");
+    const [regSuccess, setRegSuccess] = useState("");
+    const [regLoading, setRegLoading] = useState(false);
+
    const router = useRouter();

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();
-        setLoading(true);
-        setError(false);
-        await new Promise((r) => setTimeout(r, 500));
+        setLoginLoading(true);
+        setLoginError("");

-        if (password === process.env.NEXT_PUBLIC_PASSWORD) {
-            sessionStorage.setItem("wyview_auth", "true");
+        const result = await signIn("credentials", {
+            email: loginEmail,
+            password: loginPassword,
+            redirect: false,
+        });
+
+        if (result?.ok) {
            router.push("/dashboard");
        } else {
-            setError(true);
-            setLoading(false);
+            setLoginError("Email ou mot de passe incorrect.");
+            setLoginLoading(false);
        }
    };

+    const handleRegister = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setRegError("");
+        setRegSuccess("");
+
+        if (regPassword !== regConfirm) {
+            setRegError("Les mots de passe ne correspondent pas.");
+            return;
+        }
+
+        setRegLoading(true);
+
+        const res = await fetch("/api/auth/register", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ email: regEmail, password: regPassword, name: regName }),
+        });
+
+        const data = await res.json();
+
+        if (!res.ok) {
+            setRegError(data.error || "Erreur lors de l'inscription.");
+            setRegLoading(false);
+            return;
+        }
+
+        setRegSuccess("Compte créé ! Connexion en cours...");
+        const result = await signIn("credentials", {
+            email: regEmail,
+            password: regPassword,
+            redirect: false,
+        });
+
+        if (result?.ok) {
+            router.push("/dashboard");
+        } else {
+            setRegError("Compte créé mais connexion échouée. Veuillez vous connecter.");
+            setRegLoading(false);
+        }
+    };
+
+    const inputClass = (hasError: boolean) =>
+        `w-full bg-[#0d1210] border px-4 py-3 text-sm font-mono text-white placeholder-[#2a3a2a] outline-none rounded-sm transition-all duration-200 ${
+            hasError ? "border-red-500/50" : "border-[#1a2a1a] focus:border-[#4aff8c]/40"
+        }`;
+
    return (
        <main className="min-h-screen bg-[#0a0d0f] flex flex-col items-center justify-center relative overflow-hidden">
-            <div className="absolute inset-0 opacity-20 pointer-events-none" style={{
+            <div
+                className="absolute inset-0 opacity-20 pointer-events-none"
+                style={{
                    backgroundImage: `linear-gradient(rgba(74,255,140,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(74,255,140,0.05) 1px, transparent 1px)`,
                    backgroundSize: "40px 40px",
-            }} />
-
+                }}
+            />
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full bg-[#4aff8c]/[0.02] blur-3xl pointer-events-none" />

            <div className="relative z-10 flex flex-col items-center gap-8 w-full max-w-sm px-6">
+                {/* Header */}
                <div className="flex flex-col items-center gap-5">
                    <DragonEye size={80} />
                    <div className="text-center">
@@ -47,27 +115,112 @@ export default function LoginPage() {
                    </div>
                </div>

+                {/* Tabs */}
+                <div className="w-full flex border border-[#1a2a1a] rounded-sm overflow-hidden">
+                    <button
+                        onClick={() => { setTab("login"); setLoginError(""); }}
+                        className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${
+                            tab === "login"
+                                ? "bg-[#4aff8c]/10 text-[#4aff8c] border-r border-[#1a2a1a]"
+                                : "text-[#2a4a2a] hover:text-[#4aff8c]/60 border-r border-[#1a2a1a]"
+                        }`}
+                    >
+                        CONNEXION
+                    </button>
+                    <button
+                        onClick={() => { setTab("register"); setRegError(""); setRegSuccess(""); }}
+                        className={`flex-1 py-2 text-[10px] font-mono tracking-[0.3em] uppercase transition-all duration-200 ${
+                            tab === "register"
+                                ? "bg-[#4aff8c]/10 text-[#4aff8c]"
+                                : "text-[#2a4a2a] hover:text-[#4aff8c]/60"
+                        }`}
+                    >
+                        INSCRIPTION
+                    </button>
+                </div>
+
+                {/* Login Form */}
+                {tab === "login" && (
                    <form onSubmit={handleLogin} className="w-full flex flex-col gap-3">
+                        <input
+                            type="email"
+                            placeholder="Adresse email"
+                            value={loginEmail}
+                            autoComplete="email"
+                            onChange={(e) => { setLoginEmail(e.target.value); setLoginError(""); }}
+                            className={inputClass(!!loginError)}
+                        />
                        <input
                            type="password"
                            placeholder="Mot de passe"
-                        value={password}
-                        onChange={(e) => { setPassword(e.target.value); setError(false); }}
-                        className={`w-full bg-[#0d1210] border px-4 py-3 text-sm font-mono text-white placeholder-[#2a3a2a] outline-none rounded-sm transition-all duration-200 ${
-                            error ? "border-red-500/50" : "border-[#1a2a1a] focus:border-[#4aff8c]/40"
-                        }`}
+                            value={loginPassword}
+                            autoComplete="current-password"
+                            onChange={(e) => { setLoginPassword(e.target.value); setLoginError(""); }}
+                            className={inputClass(!!loginError)}
                        />
-                    {error && (
-                        <p className="text-red-400/80 text-[11px] font-mono tracking-widest">— ACCÈS REFUSÉ</p>
+                        {loginError && (
+                            <p className="text-red-400/80 text-[11px] font-mono tracking-widest">— {loginError}</p>
                        )}
                        <button
                            type="submit"
-                        disabled={loading || !password}
+                            disabled={loginLoading || !loginEmail || !loginPassword}
                            className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold border border-[#4aff8c]/30 text-[#4aff8c] hover:bg-[#4aff8c]/8 hover:border-[#4aff8c]/60 transition-all duration-200 rounded-sm disabled:opacity-30 disabled:cursor-not-allowed"
                        >
-                        {loading ? "VÉRIFICATION..." : "ACCÉDER"}
+                            {loginLoading ? "CONNEXION..." : "ACCÉDER"}
                        </button>
                    </form>
+                )}
+
+                {/* Register Form */}
+                {tab === "register" && (
+                    <form onSubmit={handleRegister} className="w-full flex flex-col gap-3">
+                        <input
+                            type="text"
+                            placeholder="Nom (optionnel)"
+                            value={regName}
+                            autoComplete="name"
+                            onChange={(e) => { setRegName(e.target.value); setRegError(""); }}
+                            className={inputClass(false)}
+                        />
+                        <input
+                            type="email"
+                            placeholder="Adresse email"
+                            value={regEmail}
+                            autoComplete="email"
+                            onChange={(e) => { setRegEmail(e.target.value); setRegError(""); }}
+                            className={inputClass(!!regError)}
+                        />
+                        <input
+                            type="password"
+                            placeholder="Mot de passe"
+                            value={regPassword}
+                            autoComplete="new-password"
+                            onChange={(e) => { setRegPassword(e.target.value); setRegError(""); }}
+                            className={inputClass(!!regError)}
+                        />
+                        <input
+                            type="password"
+                            placeholder="Confirmer le mot de passe"
+                            value={regConfirm}
+                            autoComplete="new-password"
+                            onChange={(e) => { setRegConfirm(e.target.value); setRegError(""); }}
+                            className={inputClass(!!regError && regPassword !== regConfirm)}
+                        />
+                        {regError && (
+                            <p className="text-red-400/80 text-[11px] font-mono tracking-widest">— {regError}</p>
+                        )}
+                        {regSuccess && (
+                            <p className="text-[#4aff8c]/80 text-[11px] font-mono tracking-widest">✓ {regSuccess}</p>
+                        )}
+                        <button
+                            type="submit"
+                            disabled={regLoading || !regEmail || !regPassword || !regConfirm}
+                            className="w-full py-3 text-[11px] font-mono tracking-[0.3em] uppercase font-bold border border-[#4aff8c]/30 text-[#4aff8c] hover:bg-[#4aff8c]/8 hover:border-[#4aff8c]/60 transition-all duration-200 rounded-sm disabled:opacity-30 disabled:cursor-not-allowed"
+                        >
+                            {regLoading ? "CRÉATION..." : "CRÉER UN COMPTE"}
+                        </button>
+                    </form>
+                )}

                <div className="text-[9px] font-mono text-[#1a3a1a] tracking-[0.3em]">
                    WYVIEW v1.0 /// CROWMATE
--- a/app/tiktok/layout.tsx
+++ b/app/tiktok/layout.tsx
@@ -2,16 +2,21 @@

 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import Sidebar from "@/components/Sidebar";

 export default function AuthLayout({ children }: { children: React.ReactNode }) {
+    const { status } = useSession();
    const router = useRouter();

    useEffect(() => {
-        if (sessionStorage.getItem("wyview_auth") !== "true") {
+        if (status === "unauthenticated") {
            router.push("/");
        }
-    }, [router]);
+    }, [status, router]);
+
+    if (status === "loading") return null;
+    if (status !== "authenticated") return null;

    return (
        <div className="flex min-h-screen">
--- a/app/twitch/layout.tsx
+++ b/app/twitch/layout.tsx
@@ -2,16 +2,21 @@

 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import Sidebar from "@/components/Sidebar";

 export default function AuthLayout({ children }: { children: React.ReactNode }) {
+    const { status } = useSession();
    const router = useRouter();

    useEffect(() => {
-        if (sessionStorage.getItem("wyview_auth") !== "true") {
+        if (status === "unauthenticated") {
            router.push("/");
        }
-    }, [router]);
+    }, [status, router]);
+
+    if (status === "loading") return null;
+    if (status !== "authenticated") return null;

    return (
        <div className="flex min-h-screen">
--- a/app/youtube/layout.tsx
+++ b/app/youtube/layout.tsx
@@ -2,16 +2,21 @@

 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import Sidebar from "@/components/Sidebar";

 export default function AuthLayout({ children }: { children: React.ReactNode }) {
+    const { status } = useSession();
    const router = useRouter();

    useEffect(() => {
-        if (sessionStorage.getItem("wyview_auth") !== "true") {
+        if (status === "unauthenticated") {
            router.push("/");
        }
-    }, [router]);
+    }, [status, router]);
+
+    if (status === "loading") return null;
+    if (status !== "authenticated") return null;

    return (
        <div className="flex min-h-screen">
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { useRouter, usePathname } from "next/navigation";
+import { signOut } from "next-auth/react";
 import DragonEye from "@/components/DragonEye";
 import {
    LayoutDashboard,
@@ -26,8 +27,7 @@ export default function Sidebar() {
    const pathname = usePathname();

    const handleLogout = () => {
-        sessionStorage.clear();
-        router.push("/");
+        signOut({ callbackUrl: "/" });
    };

    return (
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -0,0 +1,46 @@
+import NextAuth from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+import bcrypt from "bcryptjs";
+import { prisma } from "@/lib/prisma";
+
+export const { handlers, signIn, signOut, auth } = NextAuth({
+    providers: [
+        Credentials({
+            credentials: {
+                email: { label: "Email", type: "email" },
+                password: { label: "Mot de passe", type: "password" },
+            },
+            async authorize(credentials) {
+                if (!credentials?.email || !credentials?.password) return null;
+
+                const user = await prisma.user.findUnique({
+                    where: { email: credentials.email as string },
+                });
+
+                if (!user) return null;
+
+                const valid = await bcrypt.compare(
+                    credentials.password as string,
+                    user.password
+                );
+
+                if (!valid) return null;
+
+                return { id: user.id, email: user.email, name: user.name };
+            },
+        }),
+    ],
+    callbacks: {
+        async session({ session, token }) {
+            return session;
+        },
+        async jwt({ token, user }) {
+            if (user) token.id = user.id;
+            return token;
+        },
+    },
+    pages: {
+        signIn: "/",
+    },
+    session: { strategy: "jwt" },
+});
--- a/lib/prisma.ts
+++ b/lib/prisma.ts
@@ -0,0 +1,21 @@
+import { PrismaClient } from "@/app/generated/prisma/client";
+import { PrismaPg } from "@prisma/adapter-pg";
+import { Pool } from "pg";
+
+const globalForPrisma = globalThis as unknown as {
+    prisma: PrismaClient | undefined;
+    pool: Pool | undefined;
+};
+
+const pool = globalForPrisma.pool ?? new Pool({
+    connectionString: process.env.DATABASE_URL,
+});
+
+const adapter = new PrismaPg(pool);
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient({ adapter });
+
+if (process.env.NODE_ENV !== "production") {
+    globalForPrisma.prisma = prisma;
+    globalForPrisma.pool = pool;
+}
--- a/middleware.ts
+++ b/middleware.ts
@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getToken } from "next-auth/jwt";
+
+const protectedPaths = ["/dashboard", "/finances", "/instagram", "/tiktok", "/twitch", "/youtube"];
+
+export async function middleware(req: NextRequest) {
+    const { pathname } = req.nextUrl;
+    const isProtected = protectedPaths.some((p) => pathname.startsWith(p));
+
+    const token = await getToken({ req, secret: process.env.AUTH_SECRET });
+
+    if (isProtected && !token) {
+        const loginUrl = new URL("/", req.url);
+        return NextResponse.redirect(loginUrl);
+    }
+
+    // Redirect already-authenticated users away from login page
+    if (pathname === "/" && token) {
+        const dashboardUrl = new URL("/dashboard", req.url);
+        return NextResponse.redirect(dashboardUrl);
+    }
+
+    return NextResponse.next();
+}
+
+export const config = {
+    matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -20,16 +20,26 @@
  },
  "homepage": "https://github.com/CrowMate/Wyview#readme",
  "dependencies": {
+    "@prisma/adapter-pg": "^7.4.2",
+    "@prisma/client": "^7.4.2",
    "@types/node": "^25.3.2",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "autoprefixer": "^10.4.27",
+    "bcryptjs": "^3.0.3",
    "lucide-react": "^0.575.0",
    "next": "^15.5.12",
+    "next-auth": "^5.0.0-beta.30",
+    "pg": "^8.19.0",
    "postcss": "^8.5.6",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
    "tailwindcss": "^3.4.19",
    "typescript": "^5.9.3"
+  },
+  "devDependencies": {
+    "@types/bcryptjs": "^2.4.6",
+    "@types/pg": "^8.18.0",
+    "prisma": "^7.4.2"
  }
 }
--- a/prisma.config.ts
+++ b/prisma.config.ts
@@ -0,0 +1,12 @@
+import "dotenv/config";
+import { defineConfig } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: process.env.DATABASE_URL!,
+  },
+});
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -0,0 +1,39 @@
+generator client {
+  provider = "prisma-client"
+  output   = "../app/generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  password  String
+  name      String?
+  role      String   @default("member")
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  accounts  TrackedAccount[]
+}
+
+model TrackedAccount {
+  id        String   @id @default(cuid())
+  platform  String
+  username  String
+  accountId String
+  userId    String
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  snapshots Snapshot[]
+  createdAt DateTime @default(now())
+}
+
+model Snapshot {
+  id        String         @id @default(cuid())
+  accountId String
+  account   TrackedAccount @relation(fields: [accountId], references: [id], onDelete: Cascade)
+  followers Int
+  views     Int
+  createdAt DateTime       @default(now())
+}