feat: phase 0 skeleton — next.js 16 + better-auth + prisma
This commit is contained in:
Semih
4
apps/web/src/app/api/auth/[...all]/route.ts
Normal file
4
apps/web/src/app/api/auth/[...all]/route.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
import { auth } from "@/lib/auth";
|
||||
import { toNextJsHandler } from "better-auth/next-js";
|
||||
|
||||
export const { GET, POST } = toNextJsHandler(auth);
|
||||
11
apps/web/src/app/api/health/route.ts
Normal file
11
apps/web/src/app/api/health/route.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/db";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
await prisma.$queryRaw`SELECT 1`;
|
||||
return NextResponse.json({ ok: true });
|
||||
} catch {
|
||||
return NextResponse.json({ ok: false }, { status: 503 });
|
||||
}
|
||||
}
|
||||
16
apps/web/src/app/globals.css
Normal file
16
apps/web/src/app/globals.css
Normal file
@@ -0,0 +1,16 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-bg: #0a0a0a;
|
||||
--color-surface: #111111;
|
||||
--color-border: #1f1f1f;
|
||||
--color-fg: #ededed;
|
||||
--color-muted: #8b8b8b;
|
||||
--color-accent: #f97316;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-fg);
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
16
apps/web/src/app/layout.tsx
Normal file
16
apps/web/src/app/layout.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Süper Panel",
|
||||
description: "Internal admin panel",
|
||||
robots: { index: false, follow: false },
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="tr" className="dark">
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
101
apps/web/src/app/login/page.tsx
Normal file
101
apps/web/src/app/login/page.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { signIn, twoFactor } from "@/lib/auth-client";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
const [stage, setStage] = useState<"creds" | "totp">("creds");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [code, setCode] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function submitCreds(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
const { data, error } = await signIn.email({ email, password });
|
||||
setLoading(false);
|
||||
if (error) return setError(error.message ?? "Login failed");
|
||||
if ((data as { twoFactorRedirect?: boolean })?.twoFactorRedirect) {
|
||||
setStage("totp");
|
||||
return;
|
||||
}
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
async function submitTotp(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
const { error } = await twoFactor.verifyTotp({ code });
|
||||
setLoading(false);
|
||||
if (error) return setError(error.message ?? "Invalid code");
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center px-4">
|
||||
<div className="w-full max-w-sm rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-8">
|
||||
<h1 className="text-xl font-semibold">Süper Panel</h1>
|
||||
<p className="mt-1 text-sm text-[var(--color-muted)]">
|
||||
{stage === "creds" ? "Sign in" : "Two-factor code"}
|
||||
</p>
|
||||
|
||||
{stage === "creds" ? (
|
||||
<form onSubmit={submitCreds} className="mt-6 space-y-3">
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
placeholder="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-sm outline-none focus:border-[var(--color-accent)]"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
minLength={12}
|
||||
placeholder="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-sm outline-none focus:border-[var(--color-accent)]"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full rounded-md bg-[var(--color-accent)] py-2 text-sm font-medium text-black disabled:opacity-60"
|
||||
>
|
||||
{loading ? "…" : "Sign in"}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={submitTotp} className="mt-6 space-y-3">
|
||||
<input
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
required
|
||||
maxLength={6}
|
||||
placeholder="123456"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
|
||||
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-center text-lg tracking-[0.4em] outline-none focus:border-[var(--color-accent)]"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || code.length !== 6}
|
||||
className="w-full rounded-md bg-[var(--color-accent)] py-2 text-sm font-medium text-black disabled:opacity-60"
|
||||
>
|
||||
{loading ? "…" : "Verify"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{error && <p className="mt-4 text-sm text-red-400">{error}</p>}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
47
apps/web/src/app/page.tsx
Normal file
47
apps/web/src/app/page.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { auth } from "@/lib/auth";
|
||||
import { headers } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default async function Home() {
|
||||
const session = await auth.api.getSession({ headers: await headers() });
|
||||
if (!session) redirect("/login");
|
||||
|
||||
return (
|
||||
<main className="min-h-screen p-8">
|
||||
<header className="mb-10 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Süper Panel</h1>
|
||||
<p className="text-sm text-[var(--color-muted)]">{session.user.email}</p>
|
||||
</div>
|
||||
<form action="/api/auth/sign-out" method="POST">
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-md border border-[var(--color-border)] px-3 py-1.5 text-sm hover:bg-[var(--color-surface)]"
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<section className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<Card title="Projects" value="0" hint="No spokes wired yet" />
|
||||
<Card title="Events (24h)" value="0" hint="Redis Streams idle" />
|
||||
<Card title="Audit (24h)" value="0" hint="No actions" />
|
||||
</section>
|
||||
|
||||
<p className="mt-10 text-xs text-[var(--color-muted)]">
|
||||
Phase 0 skeleton · Tailscale-only · sp.semih.ai
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function Card({ title, value, hint }: { title: string; value: string; hint: string }) {
|
||||
return (
|
||||
<div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-5">
|
||||
<div className="text-xs uppercase tracking-wide text-[var(--color-muted)]">{title}</div>
|
||||
<div className="mt-2 text-3xl font-semibold">{value}</div>
|
||||
<div className="mt-1 text-xs text-[var(--color-muted)]">{hint}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
91
apps/web/src/app/setup-2fa/page.tsx
Normal file
91
apps/web/src/app/setup-2fa/page.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { twoFactor, useSession } from "@/lib/auth-client";
|
||||
|
||||
export default function Setup2FA() {
|
||||
const router = useRouter();
|
||||
const { data: session, isPending } = useSession();
|
||||
const [password, setPassword] = useState("");
|
||||
const [otpAuthUri, setOtpAuthUri] = useState<string | null>(null);
|
||||
const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
|
||||
const [code, setCode] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPending && !session) router.replace("/login");
|
||||
}, [isPending, session, router]);
|
||||
|
||||
async function enable(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
const { data, error } = await twoFactor.enable({ password });
|
||||
if (error) return setError(error.message ?? "Failed");
|
||||
setOtpAuthUri(data?.totpURI ?? null);
|
||||
setBackupCodes(data?.backupCodes ?? null);
|
||||
}
|
||||
|
||||
async function verify(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
const { error } = await twoFactor.verifyTotp({ code });
|
||||
if (error) return setError(error.message ?? "Invalid code");
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen items-center justify-center px-4">
|
||||
<div className="w-full max-w-md rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-8">
|
||||
<h1 className="text-xl font-semibold">Enable two-factor</h1>
|
||||
<p className="mt-1 text-sm text-[var(--color-muted)]">Scan the URI in your authenticator</p>
|
||||
|
||||
{!otpAuthUri ? (
|
||||
<form onSubmit={enable} className="mt-6 space-y-3">
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
placeholder="current password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-sm outline-none"
|
||||
/>
|
||||
<button type="submit" className="w-full rounded-md bg-[var(--color-accent)] py-2 text-sm font-medium text-black">
|
||||
Generate TOTP
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div className="mt-6 space-y-4">
|
||||
<code className="block break-all rounded-md border border-[var(--color-border)] bg-black p-3 text-xs">
|
||||
{otpAuthUri}
|
||||
</code>
|
||||
{backupCodes && (
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-[var(--color-muted)]">Backup codes</p>
|
||||
<ul className="mt-1 grid grid-cols-2 gap-1 text-xs">
|
||||
{backupCodes.map((c) => <li key={c} className="font-mono">{c}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={verify} className="space-y-3">
|
||||
<input
|
||||
inputMode="numeric"
|
||||
required
|
||||
maxLength={6}
|
||||
placeholder="123456"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
|
||||
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-center text-lg tracking-[0.4em] outline-none"
|
||||
/>
|
||||
<button type="submit" className="w-full rounded-md bg-[var(--color-accent)] py-2 text-sm font-medium text-black">
|
||||
Verify & finish
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="mt-4 text-sm text-red-400">{error}</p>}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user