feat: Wabenhain Honig-Shop Anwendung
Vollstaendige Next.js/Prisma-E-Commerce-Anwendung fuer eine Imkerei: Shop, Warenkorb, Stripe-Checkout, Kundenkonto mit 2FA, Admin-Bereich (Produkte, Ernten, Chargen, Bestellungen, Gutscheine, admin-editierbare Website-Inhalte), i18n (DE/EN), Rate-Limiting/CSP/Audit-Log-Haertung, PostgreSQL- und MySQL-Unterstuetzung ueber austauschbare Prisma- Treiber-Adapter, Unit-/Komponenten-/E2E-Tests.
This commit is contained in:
Nick Szaunig committed
1 parent
5c76fcc266
commit
c7927f2883
240 files changed
+26096
-137
No files matched your search
@@ -0,0 +1,162 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { BackLink } from "@/components/back-link";
|
||||
import { ConfirmForm } from "@/components/confirm-form";
|
||||
import { getCurrentAdmin } from "@/lib/auth";
|
||||
import { formatDate } from "@/lib/format";
|
||||
import {
|
||||
updateCustomerAction,
|
||||
blockCustomerAction,
|
||||
unblockCustomerAction,
|
||||
deleteCustomerAction,
|
||||
sendCustomerPasswordResetAction,
|
||||
} from "../../actions";
|
||||
import { getLocale } from "@/i18n/locale";
|
||||
import { getDictionary } from "@/i18n/get-dictionary";
|
||||
|
||||
export default async function AdminBenutzerEditPage(props: PageProps<"/admin/benutzer/[id]">) {
|
||||
const t = getDictionary(await getLocale());
|
||||
const { id } = await props.params;
|
||||
const { error, message } = await props.searchParams;
|
||||
|
||||
const [admin, customer] = await Promise.all([
|
||||
getCurrentAdmin(),
|
||||
prisma.customer.findUnique({ where: { id } }),
|
||||
]);
|
||||
if (!customer) notFound();
|
||||
|
||||
const isSelf = customer.id === admin?.id;
|
||||
const isTemporarilyLocked = Boolean(customer.lockedUntil && customer.lockedUntil > new Date());
|
||||
|
||||
return (
|
||||
<div className="max-w-xl">
|
||||
<BackLink href="/admin/benutzer" label={t.adminUserEditPage.backToUsers} />
|
||||
<h1 className="text-2xl text-forest mb-2">
|
||||
{customer.firstName} {customer.lastName}
|
||||
</h1>
|
||||
<p className="text-sm text-ink/65 mb-8">{t.adminUserEditPage.createdOn(formatDate(customer.createdAt))}</p>
|
||||
|
||||
{error ? (
|
||||
<p className="mb-6 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">{error}</p>
|
||||
) : null}
|
||||
{message ? (
|
||||
<p className="mb-6 text-sm text-forest bg-forest/5 border border-forest/20 px-4 py-3">{message}</p>
|
||||
) : null}
|
||||
|
||||
<form action={updateCustomerAction} className="space-y-4 bg-background border border-ink/10 p-6">
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field name="firstName" label={t.adminUserEditPage.firstNameLabel} defaultValue={customer.firstName} required />
|
||||
<Field name="lastName" label={t.adminUserEditPage.lastNameLabel} defaultValue={customer.lastName} required />
|
||||
</div>
|
||||
<Field name="email" label={t.adminUserEditPage.emailLabel} type="email" defaultValue={customer.email} required />
|
||||
<Field name="phone" label={t.adminUserEditPage.phoneLabel} defaultValue={customer.phone ?? ""} />
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminUserEditPage.roleLabel}</span>
|
||||
<select
|
||||
name="role"
|
||||
defaultValue={customer.role}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
>
|
||||
<option value="KUNDE">{t.adminUserEditPage.roleCustomer}</option>
|
||||
<option value="ADMIN">{t.adminUserEditPage.roleAdmin}</option>
|
||||
</select>
|
||||
{isSelf ? (
|
||||
<span className="mt-1 block text-xs text-ink/65">{t.adminUserEditPage.cannotChangeOwnRole}</span>
|
||||
) : null}
|
||||
</label>
|
||||
|
||||
<button type="submit" className="bg-forest text-cream px-6 py-2 text-sm">
|
||||
{t.adminUserEditPage.save}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 bg-background border border-ink/10 p-6 space-y-4">
|
||||
<h2 className="text-sm text-ink/70">{t.adminUserEditPage.securityHeading}</h2>
|
||||
<dl className="text-sm space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-ink/65">{t.adminUserEditPage.twoFactorLabel}</dt>
|
||||
<dd>{customer.twoFactorEnabled ? t.adminUserEditPage.twoFactorActive : t.adminUserEditPage.twoFactorInactive}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-ink/65">{t.adminUserEditPage.statusLabel}</dt>
|
||||
<dd>
|
||||
{customer.blockedAt ? (
|
||||
<span className="text-red-700">
|
||||
{t.adminUserEditPage.blockedSince(formatDate(customer.blockedAt))}
|
||||
</span>
|
||||
) : isTemporarilyLocked ? (
|
||||
<span className="text-honey-dark">{t.adminUserEditPage.temporarilyLockedFailedAttempts}</span>
|
||||
) : (
|
||||
<span className="text-forest">{t.adminUserEditPage.statusActive}</span>
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<form action={sendCustomerPasswordResetAction}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="bg-forest text-cream px-5 py-2 text-sm">
|
||||
{t.adminUserEditPage.sendPasswordReset}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{!isSelf ? (
|
||||
<div className="flex items-center gap-4 pt-2 border-t border-ink/10">
|
||||
{customer.blockedAt ? (
|
||||
<form action={unblockCustomerAction}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="text-forest underline text-sm">
|
||||
{t.adminUserEditPage.unblock}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form action={blockCustomerAction}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="text-ink/70 underline text-sm">
|
||||
{t.adminUserEditPage.block}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
<ConfirmForm
|
||||
action={deleteCustomerAction}
|
||||
confirmMessage={t.adminUserEditPage.deleteConfirm(`${customer.firstName} ${customer.lastName}`)}
|
||||
>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="text-red-700 underline text-sm">
|
||||
{t.adminUserEditPage.deleteAccount}
|
||||
</button>
|
||||
</ConfirmForm>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
name,
|
||||
label,
|
||||
type = "text",
|
||||
defaultValue,
|
||||
required = false,
|
||||
}: {
|
||||
name: string;
|
||||
label: string;
|
||||
type?: string;
|
||||
defaultValue?: string;
|
||||
required?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{label}</span>
|
||||
<input
|
||||
name={name}
|
||||
type={type}
|
||||
defaultValue={defaultValue}
|
||||
required={required}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { BackLink } from "@/components/back-link";
|
||||
import { createCustomerAction } from "../../actions";
|
||||
import { getLocale } from "@/i18n/locale";
|
||||
import { getDictionary } from "@/i18n/get-dictionary";
|
||||
|
||||
export default async function AdminBenutzerNewPage(props: PageProps<"/admin/benutzer/neu">) {
|
||||
const t = getDictionary(await getLocale());
|
||||
const { error } = await props.searchParams;
|
||||
|
||||
return (
|
||||
<div className="max-w-xl">
|
||||
<BackLink href="/admin/benutzer" label={t.adminUserNewPage.backToUsers} />
|
||||
<h1 className="text-2xl text-forest mb-2">{t.adminUserNewPage.title}</h1>
|
||||
<p className="text-sm text-ink/70 mb-8">{t.adminUserNewPage.intro}</p>
|
||||
|
||||
{error ? (
|
||||
<p className="mb-6 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">{error}</p>
|
||||
) : null}
|
||||
|
||||
<form action={createCustomerAction} className="space-y-4 bg-background border border-ink/10 p-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field name="firstName" label={t.adminUserNewPage.firstNameLabel} required />
|
||||
<Field name="lastName" label={t.adminUserNewPage.lastNameLabel} required />
|
||||
</div>
|
||||
<Field name="email" label={t.adminUserNewPage.emailLabel} type="email" required />
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminUserNewPage.roleLabel}</span>
|
||||
<select
|
||||
name="role"
|
||||
defaultValue="KUNDE"
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
>
|
||||
<option value="KUNDE">{t.adminUserNewPage.roleCustomer}</option>
|
||||
<option value="ADMIN">{t.adminUserNewPage.roleAdmin}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button type="submit" className="bg-forest text-cream px-6 py-2 text-sm">
|
||||
{t.adminUserNewPage.createAndSend}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
name,
|
||||
label,
|
||||
type = "text",
|
||||
required = false,
|
||||
}: {
|
||||
name: string;
|
||||
label: string;
|
||||
type?: string;
|
||||
required?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{label}</span>
|
||||
<input
|
||||
name={name}
|
||||
type={type}
|
||||
required={required}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
import Link from "next/link";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { insensitiveContains } from "@/lib/prisma-search";
|
||||
import { BackLink } from "@/components/back-link";
|
||||
import { ConfirmForm } from "@/components/confirm-form";
|
||||
import { getCurrentAdmin } from "@/lib/auth";
|
||||
import { formatDate } from "@/lib/format";
|
||||
import { blockCustomerAction, unblockCustomerAction, deleteCustomerAction } from "../actions";
|
||||
import { getLocale } from "@/i18n/locale";
|
||||
import { getDictionary } from "@/i18n/get-dictionary";
|
||||
|
||||
export default async function AdminBenutzerPage(props: PageProps<"/admin/benutzer">) {
|
||||
const t = getDictionary(await getLocale());
|
||||
const roleLabels: Record<string, string> = { KUNDE: t.adminUsersPage.roleCustomer, ADMIN: t.adminUsersPage.roleAdmin };
|
||||
const { error, message, q } = await props.searchParams;
|
||||
const query = typeof q === "string" ? q.trim() : "";
|
||||
|
||||
const [admin, customers] = await Promise.all([
|
||||
getCurrentAdmin(),
|
||||
prisma.customer.findMany({
|
||||
where: query
|
||||
? {
|
||||
OR: [
|
||||
{ firstName: insensitiveContains(query) },
|
||||
{ lastName: insensitiveContains(query) },
|
||||
{ email: insensitiveContains(query) },
|
||||
],
|
||||
}
|
||||
: undefined,
|
||||
orderBy: { createdAt: "desc" },
|
||||
take: 100,
|
||||
}),
|
||||
]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BackLink href="/admin" label={t.adminUsersPage.backToDashboard} />
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h1 className="text-2xl text-forest">{t.adminUsersPage.title}</h1>
|
||||
<Link href="/admin/benutzer/neu" className="bg-forest text-cream px-5 py-2 text-sm">
|
||||
{t.adminUsersPage.newUser}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<p className="mb-6 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">{error}</p>
|
||||
) : null}
|
||||
{message ? (
|
||||
<p className="mb-6 text-sm text-forest bg-forest/5 border border-forest/20 px-4 py-3">{message}</p>
|
||||
) : null}
|
||||
|
||||
<form method="GET" className="flex flex-wrap items-end gap-3 mb-6">
|
||||
<label className="text-sm">
|
||||
<span className="block text-ink/65 text-xs mb-1">{t.adminUsersPage.searchLabel}</span>
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
defaultValue={query}
|
||||
placeholder={t.adminUsersPage.searchPlaceholder}
|
||||
className="border border-ink/20 bg-background px-3 py-2 text-sm w-64"
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" className="bg-forest text-cream px-4 py-2 text-sm">
|
||||
{t.adminUsersPage.filterButton}
|
||||
</button>
|
||||
{query ? (
|
||||
<Link href="/admin/benutzer" className="text-sm text-ink/65 underline">
|
||||
{t.adminUsersPage.resetFilter}
|
||||
</Link>
|
||||
) : null}
|
||||
</form>
|
||||
|
||||
<div className="overflow-x-auto bg-background border border-ink/10">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="text-left text-ink/65 border-b border-ink/10">
|
||||
<tr>
|
||||
<th className="p-4">{t.adminUsersPage.colName}</th>
|
||||
<th className="p-4">{t.adminUsersPage.colEmail}</th>
|
||||
<th className="p-4">{t.adminUsersPage.colRole}</th>
|
||||
<th className="p-4">{t.adminUsersPage.colStatus}</th>
|
||||
<th className="p-4">{t.adminUsersPage.col2fa}</th>
|
||||
<th className="p-4">{t.adminUsersPage.colCreated}</th>
|
||||
<th className="p-4" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-ink/10">
|
||||
{customers.map((customer) => {
|
||||
const isSelf = customer.id === admin?.id;
|
||||
const isTemporarilyLocked = Boolean(customer.lockedUntil && customer.lockedUntil > new Date());
|
||||
|
||||
return (
|
||||
<tr key={customer.id} className="transition-colors hover:bg-ink/[0.03]">
|
||||
<td className="p-4 text-forest">
|
||||
{customer.firstName} {customer.lastName}
|
||||
{isSelf ? <span className="text-ink/65">{t.adminUsersPage.youSuffix}</span> : null}
|
||||
</td>
|
||||
<td className="p-4">{customer.email}</td>
|
||||
<td className="p-4">{roleLabels[customer.role] ?? customer.role}</td>
|
||||
<td className="p-4">
|
||||
{customer.blockedAt ? (
|
||||
<span className="text-red-700">{t.adminUsersPage.statusBlocked}</span>
|
||||
) : isTemporarilyLocked ? (
|
||||
<span className="text-honey-dark">{t.adminUsersPage.statusTemporarilyLocked}</span>
|
||||
) : (
|
||||
<span className="text-forest">{t.adminUsersPage.statusActive}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="p-4">{customer.twoFactorEnabled ? t.adminUsersPage.statusActive : "—"}</td>
|
||||
<td className="p-4">{formatDate(customer.createdAt)}</td>
|
||||
<td className="p-4">
|
||||
<div className="flex items-center gap-3 whitespace-nowrap">
|
||||
<Link href={`/admin/benutzer/${customer.id}`} className="text-forest underline">
|
||||
{t.adminUsersPage.edit}
|
||||
</Link>
|
||||
{!isSelf ? (
|
||||
customer.blockedAt ? (
|
||||
<form action={unblockCustomerAction}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="text-forest underline">
|
||||
{t.adminUsersPage.unblock}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form action={blockCustomerAction}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="text-ink/70 underline">
|
||||
{t.adminUsersPage.block}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
) : null}
|
||||
{!isSelf ? (
|
||||
<ConfirmForm
|
||||
action={deleteCustomerAction}
|
||||
confirmMessage={t.adminUsersPage.deleteConfirm(`${customer.firstName} ${customer.lastName}`)}
|
||||
>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="text-red-700 underline">
|
||||
{t.adminUsersPage.delete}
|
||||
</button>
|
||||
</ConfirmForm>
|
||||
) : null}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{customers.length === 0 ? (
|
||||
<p className="p-6 text-ink/65">
|
||||
{query ? t.adminUsersPage.noResultsFiltered : t.adminUsersPage.noUsersYet}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user