Voeg tenant beheer toe aan rikx-offerte
- Login pagina met HMAC-sessie authenticatie - /tenants overzicht: lijst alle rikx-platform accounts - Nieuw tenant aanmaken (naam, slug, admin gebruiker) - Tenant verwijderen (cascade via foreign keys) - Leest rikx-platform SQLite DB via /rikx-platform-data mount - Homepage redirect naar /tenants of /login Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maarten Elsenaar
+2
-2
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Rikx Beheer",
|
||||
description: "Rikx platform beheer",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: LayoutProps<"/">) {
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
"use server";
|
||||
|
||||
import { redirect } from "next/navigation";
|
||||
import { getUserByEmail, verifyPassword, createSession } from "../../lib/auth";
|
||||
import { getSession } from "../../lib/auth";
|
||||
|
||||
export default async function LoginPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ error?: string }>;
|
||||
}) {
|
||||
const session = await getSession();
|
||||
if (session) redirect("/tenants");
|
||||
|
||||
const { error } = await searchParams;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-zinc-950">
|
||||
<div className="w-full max-w-sm">
|
||||
<h1 className="text-2xl font-semibold text-center mb-8 text-zinc-900 dark:text-zinc-100">
|
||||
Rikx Beheer
|
||||
</h1>
|
||||
<form
|
||||
action={async (formData: FormData) => {
|
||||
"use server";
|
||||
const email = formData.get("email") as string;
|
||||
const password = formData.get("password") as string;
|
||||
const user = getUserByEmail(email);
|
||||
if (!user || !verifyPassword(password, user.password_hash)) {
|
||||
redirect("/login?error=1");
|
||||
}
|
||||
await createSession({ userId: user.id, email: user.email, name: user.name });
|
||||
redirect("/tenants");
|
||||
}}
|
||||
className="flex flex-col gap-4 bg-white dark:bg-zinc-900 p-8 rounded-xl border border-zinc-200 dark:border-zinc-800"
|
||||
>
|
||||
{error && (
|
||||
<p className="text-sm text-red-600 dark:text-red-400">
|
||||
Ongeldig e-mailadres of wachtwoord.
|
||||
</p>
|
||||
)}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
E-mailadres
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
className="rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Wachtwoord
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
className="rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="mt-2 rounded-lg bg-zinc-900 dark:bg-zinc-100 px-4 py-2 text-sm font-medium text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors"
|
||||
>
|
||||
Inloggen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+5
-67
@@ -1,69 +1,7 @@
|
||||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getSession } from "../lib/auth";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert h-5 w-[100px]"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the{" "}
|
||||
<code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
|
||||
page.tsx
|
||||
</code>{" "}
|
||||
file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert h-[14px] w-4"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={14}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
export default async function Home() {
|
||||
const session = await getSession();
|
||||
redirect(session ? "/tenants" : "/login");
|
||||
}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
"use server";
|
||||
|
||||
import { redirect } from "next/navigation";
|
||||
import { randomBytes, scryptSync } from "crypto";
|
||||
import { getPlatformDb } from "../../lib/platform-db";
|
||||
import { getSession } from "../../lib/auth";
|
||||
|
||||
function requireAuth() {
|
||||
// Called inside server actions — session check is synchronous-safe via cache
|
||||
}
|
||||
|
||||
function hashPassword(password: string): string {
|
||||
const salt = randomBytes(16).toString("hex");
|
||||
const hash = scryptSync(password, salt, 64).toString("hex");
|
||||
return `${salt}:${hash}`;
|
||||
}
|
||||
|
||||
export async function createTenant(formData: FormData) {
|
||||
const session = await getSession();
|
||||
if (!session) redirect("/login");
|
||||
|
||||
const name = (formData.get("name") as string).trim();
|
||||
const slug = (formData.get("slug") as string).trim().toLowerCase().replace(/[^a-z0-9-]/g, "-");
|
||||
const adminEmail = (formData.get("admin_email") as string).trim();
|
||||
const adminPassword = formData.get("admin_password") as string;
|
||||
const adminName = (formData.get("admin_name") as string).trim();
|
||||
|
||||
if (!name || !slug || !adminEmail || !adminPassword || !adminName) {
|
||||
redirect("/tenants?error=missing");
|
||||
}
|
||||
|
||||
const db = getPlatformDb();
|
||||
|
||||
const existing = db.prepare("SELECT id FROM accounts WHERE slug = ?").get(slug);
|
||||
if (existing) redirect("/tenants?error=slug");
|
||||
|
||||
db.prepare("INSERT INTO accounts (name, slug) VALUES (?, ?)").run(name, slug);
|
||||
const account = db.prepare("SELECT id FROM accounts WHERE slug = ?").get(slug) as { id: number };
|
||||
|
||||
db.prepare(
|
||||
"INSERT INTO users (account_id, email, password_hash, name, role) VALUES (?, ?, ?, ?, 'admin')"
|
||||
).run(account.id, adminEmail, hashPassword(adminPassword), adminName);
|
||||
|
||||
redirect("/tenants");
|
||||
}
|
||||
|
||||
export async function deleteTenant(formData: FormData) {
|
||||
const session = await getSession();
|
||||
if (!session) redirect("/login");
|
||||
|
||||
const accountId = Number(formData.get("account_id"));
|
||||
if (!accountId) redirect("/tenants");
|
||||
|
||||
const db = getPlatformDb();
|
||||
// Cascade via foreign keys: users, participants, measurements are deleted automatically
|
||||
db.prepare("DELETE FROM accounts WHERE id = ?").run(accountId);
|
||||
|
||||
redirect("/tenants");
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { getSession, destroySession } from "../../lib/auth";
|
||||
import { listAccounts } from "../../lib/platform-db";
|
||||
import { createTenant, deleteTenant } from "./actions";
|
||||
|
||||
export default async function TenantsPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ error?: string }>;
|
||||
}) {
|
||||
const session = await getSession();
|
||||
if (!session) redirect("/login");
|
||||
|
||||
const { error } = await searchParams;
|
||||
const accounts = listAccounts();
|
||||
|
||||
const errorMsg =
|
||||
error === "slug"
|
||||
? "Slug is al in gebruik."
|
||||
: error === "missing"
|
||||
? "Vul alle velden in."
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
|
||||
<header className="bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800">
|
||||
<div className="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
|
||||
<span className="font-semibold text-zinc-900 dark:text-zinc-100">Rikx Beheer</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-sm text-zinc-500">{session.email}</span>
|
||||
<form
|
||||
action={async () => {
|
||||
"use server";
|
||||
await destroySession();
|
||||
redirect("/login");
|
||||
}}
|
||||
>
|
||||
<button className="text-sm text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">
|
||||
Uitloggen
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-5xl mx-auto px-6 py-10 flex flex-col gap-10">
|
||||
{/* Overzicht */}
|
||||
<section>
|
||||
<h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
|
||||
Tenants ({accounts.length})
|
||||
</h2>
|
||||
{accounts.length === 0 ? (
|
||||
<p className="text-sm text-zinc-500">Nog geen tenants aangemaakt.</p>
|
||||
) : (
|
||||
<div className="rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-zinc-50 dark:bg-zinc-900 text-zinc-500 dark:text-zinc-400">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-3 font-medium">Naam</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Slug</th>
|
||||
<th className="text-left px-4 py-3 font-medium">URL</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Gebruikers</th>
|
||||
<th className="text-left px-4 py-3 font-medium">Aangemaakt</th>
|
||||
<th className="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||
{accounts.map((a) => (
|
||||
<tr key={a.id} className="bg-white dark:bg-zinc-950 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors">
|
||||
<td className="px-4 py-3 font-medium text-zinc-900 dark:text-zinc-100">{a.name}</td>
|
||||
<td className="px-4 py-3 text-zinc-600 dark:text-zinc-400 font-mono">{a.slug}</td>
|
||||
<td className="px-4 py-3">
|
||||
<a
|
||||
href={`https://${a.slug}.rikxplatform.nl`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 dark:text-blue-400 hover:underline"
|
||||
>
|
||||
{a.slug}.rikxplatform.nl
|
||||
</a>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-zinc-600 dark:text-zinc-400">{a.user_count}</td>
|
||||
<td className="px-4 py-3 text-zinc-500 dark:text-zinc-500 text-xs">
|
||||
{new Date(a.created_at).toLocaleDateString("nl-NL")}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<form action={deleteTenant}>
|
||||
<input type="hidden" name="account_id" value={a.id} />
|
||||
<button
|
||||
type="submit"
|
||||
className="text-xs text-red-500 hover:text-red-700 dark:hover:text-red-400 transition-colors"
|
||||
onClick={() => {}}
|
||||
>
|
||||
Verwijderen
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Nieuw tenant formulier */}
|
||||
<section>
|
||||
<h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
|
||||
Nieuwe tenant aanmaken
|
||||
</h2>
|
||||
{errorMsg && (
|
||||
<p className="text-sm text-red-600 dark:text-red-400 mb-4">{errorMsg}</p>
|
||||
)}
|
||||
<form
|
||||
action={createTenant}
|
||||
className="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 grid grid-cols-1 sm:grid-cols-2 gap-4"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Bedrijfsnaam
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
required
|
||||
placeholder="Acme B.V."
|
||||
className="rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Slug <span className="text-zinc-400 font-normal">(URL-naam, bijv. acme)</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="slug"
|
||||
required
|
||||
placeholder="acme"
|
||||
pattern="[a-z0-9-]+"
|
||||
className="rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-mono text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Admin naam
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="admin_name"
|
||||
required
|
||||
placeholder="Jan Jansen"
|
||||
className="rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Admin e-mailadres
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="admin_email"
|
||||
required
|
||||
placeholder="jan@acme.nl"
|
||||
className="rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 sm:col-span-2">
|
||||
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||
Tijdelijk wachtwoord
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="admin_password"
|
||||
required
|
||||
placeholder="Sterk wachtwoord"
|
||||
className="rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-mono text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-lg bg-zinc-900 dark:bg-zinc-100 px-5 py-2 text-sm font-medium text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors"
|
||||
>
|
||||
Tenant aanmaken
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user