feat: panele auth sistemi ekle (kullanıcı/şifre + oturum + middleware)
Panel şu ana kadar herkese açıktı — URL'yi bilen herkes kanal ekleyip/silebilir, cookie güncelleyebilir, kayıt indirebilirdi. - users tablosu (bcrypt şifre hash'i) - /login: hiç kullanıcı yoksa "ilk admin hesabı oluştur" formu, varsa normal giriş formu - jose ile imzalanmış, httpOnly çerezde tutulan 30 günlük oturum - middleware.ts: /login hariç tüm rotaları korur (video stream route'u dahil — aynı origin istekleri çerezi otomatik taşır) - layout: oturum yoksa nav hiç gösterilmiyor, varsa kullanıcı adı + çıkış butonu ekleniyor SESSION_SECRET production'da zorunlu (docker-compose derleme zamanında kontrol ediyor); Coolify'a rastgele bir değer eklendi. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -1,20 +1,37 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import "./globals.css";
|
||||
import { getSession } from "../lib/auth";
|
||||
import { logout } from "./login/actions";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "StreamClipper AI — Panel",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
export default async function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
const session = await getSession();
|
||||
|
||||
return (
|
||||
<html lang="tr">
|
||||
<body>
|
||||
<nav className="nav">
|
||||
<Link href="/">Kanal Durumu</Link>
|
||||
<Link href="/segments">Segment & Aday Kütüphanesi</Link>
|
||||
<Link href="/settings">Ayarlar</Link>
|
||||
</nav>
|
||||
{session && (
|
||||
<nav className="nav">
|
||||
<Link href="/">Kanal Durumu</Link>
|
||||
<Link href="/segments">Segment & Aday Kütüphanesi</Link>
|
||||
<Link href="/settings">Ayarlar</Link>
|
||||
<span style={{ marginLeft: "auto", display: "flex", gap: "1rem", alignItems: "center" }}>
|
||||
<span className="mono">{session.username}</span>
|
||||
<form action={logout}>
|
||||
<button
|
||||
type="submit"
|
||||
style={{ background: "none", border: "none", color: "var(--muted)", cursor: "pointer", font: "inherit" }}
|
||||
>
|
||||
Çıkış Yap
|
||||
</button>
|
||||
</form>
|
||||
</span>
|
||||
</nav>
|
||||
)}
|
||||
<main>{children}</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
"use server";
|
||||
|
||||
import { cookies } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
import bcrypt from "bcryptjs";
|
||||
import { prisma } from "@streamclipper/db";
|
||||
import { createSessionToken, SESSION_COOKIE_NAME } from "../../lib/auth";
|
||||
|
||||
const SESSION_MAX_AGE_SEC = 60 * 60 * 24 * 30;
|
||||
|
||||
async function setSessionCookie(userId: string, username: string) {
|
||||
const token = await createSessionToken({ sub: userId, username });
|
||||
const jar = await cookies();
|
||||
jar.set(SESSION_COOKIE_NAME, token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "lax",
|
||||
path: "/",
|
||||
maxAge: SESSION_MAX_AGE_SEC,
|
||||
});
|
||||
}
|
||||
|
||||
export async function bootstrapAdmin(formData: FormData) {
|
||||
const username = String(formData.get("username") ?? "").trim();
|
||||
const password = String(formData.get("password") ?? "");
|
||||
|
||||
if (!username || password.length < 8) {
|
||||
throw new Error("Kullanıcı adı gerekli, şifre en az 8 karakter olmalı.");
|
||||
}
|
||||
|
||||
const existing = await prisma.user.count();
|
||||
if (existing > 0) {
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
const passwordHash = await bcrypt.hash(password, 12);
|
||||
const user = await prisma.user.create({ data: { username, passwordHash } });
|
||||
|
||||
await setSessionCookie(user.id, user.username);
|
||||
redirect("/");
|
||||
}
|
||||
|
||||
export async function login(formData: FormData) {
|
||||
const username = String(formData.get("username") ?? "").trim();
|
||||
const password = String(formData.get("password") ?? "");
|
||||
|
||||
const user = await prisma.user.findUnique({ where: { username } });
|
||||
if (!user || !(await bcrypt.compare(password, user.passwordHash))) {
|
||||
redirect("/login?error=1");
|
||||
}
|
||||
|
||||
await setSessionCookie(user.id, user.username);
|
||||
redirect("/");
|
||||
}
|
||||
|
||||
export async function logout() {
|
||||
const jar = await cookies();
|
||||
jar.delete(SESSION_COOKIE_NAME);
|
||||
redirect("/login");
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { prisma } from "@streamclipper/db";
|
||||
import { bootstrapAdmin, login } from "./actions";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
const fieldStyle = {
|
||||
background: "var(--bg)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "6px",
|
||||
padding: "0.6rem 0.7rem",
|
||||
color: "var(--text)",
|
||||
fontSize: "0.9rem",
|
||||
};
|
||||
|
||||
const buttonStyle = {
|
||||
background: "var(--accent)",
|
||||
border: "none",
|
||||
borderRadius: "6px",
|
||||
padding: "0.6rem 1rem",
|
||||
color: "#fff",
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
cursor: "pointer",
|
||||
};
|
||||
|
||||
export default async function LoginPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ error?: string }>;
|
||||
}) {
|
||||
const { error } = await searchParams;
|
||||
const userCount = await prisma.user.count();
|
||||
const isBootstrap = userCount === 0;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: "360px", margin: "4rem auto" }}>
|
||||
<h1>{isBootstrap ? "İlk Yönetici Hesabını Oluştur" : "Giriş Yap"}</h1>
|
||||
|
||||
{isBootstrap && (
|
||||
<p className="empty" style={{ marginBottom: "1rem" }}>
|
||||
Henüz kullanıcı yok — panele erişecek ilk admin hesabını burada oluştur.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!isBootstrap && error && (
|
||||
<p style={{ color: "var(--err)", fontSize: "0.9rem", marginBottom: "1rem" }}>
|
||||
Kullanıcı adı veya şifre hatalı.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<form
|
||||
action={isBootstrap ? bootstrapAdmin : login}
|
||||
className="card"
|
||||
style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}
|
||||
>
|
||||
<input name="username" placeholder="Kullanıcı adı" required style={fieldStyle} />
|
||||
<input
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="Şifre"
|
||||
required
|
||||
minLength={isBootstrap ? 8 : undefined}
|
||||
style={fieldStyle}
|
||||
/>
|
||||
<button type="submit" style={buttonStyle}>
|
||||
{isBootstrap ? "Hesabı Oluştur" : "Giriş Yap"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user