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,47 @@
|
||||
import type { Metadata } from "next";
|
||||
import { redirect } from "next/navigation";
|
||||
import { Container, SectionHeading, Button } from "@/components/ui";
|
||||
import { getCurrentCustomer, getTwoFactorBackupCodesDisplay } from "@/lib/auth";
|
||||
import { dismissBackupCodesAction } from "../../actions";
|
||||
import { getLocale } from "@/i18n/locale";
|
||||
import { getDictionary } from "@/i18n/get-dictionary";
|
||||
|
||||
export const metadata: Metadata = { title: "Backup-Codes" };
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function ZweiFaktorBackupCodesPage() {
|
||||
const t = getDictionary(await getLocale());
|
||||
const customer = await getCurrentCustomer();
|
||||
if (!customer) redirect("/konto");
|
||||
|
||||
const codes = await getTwoFactorBackupCodesDisplay();
|
||||
if (!codes) redirect("/konto/zwei-faktor");
|
||||
|
||||
return (
|
||||
<div className="py-20">
|
||||
<Container className="max-w-md">
|
||||
<SectionHeading
|
||||
eyebrow={t.twoFactorBackupCodesPage.eyebrow}
|
||||
title={t.twoFactorBackupCodesPage.title}
|
||||
subtitle={t.twoFactorBackupCodesPage.subtitle}
|
||||
/>
|
||||
|
||||
<ul className="mt-8 border border-ink/10 divide-y divide-ink/10 font-mono text-sm">
|
||||
{codes.map((code) => (
|
||||
<li key={code} className="px-4 py-3">
|
||||
{code}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<p className="mt-6 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">
|
||||
{t.twoFactorBackupCodesPage.warning}
|
||||
</p>
|
||||
|
||||
<form action={dismissBackupCodesAction} className="mt-8">
|
||||
<Button type="submit">{t.twoFactorBackupCodesPage.done}</Button>
|
||||
</form>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import type { Metadata } from "next";
|
||||
import { redirect } from "next/navigation";
|
||||
import { Container, SectionHeading, Button } from "@/components/ui";
|
||||
import { BackLink } from "@/components/back-link";
|
||||
import { getCurrentCustomer, getTwoFactorSetup } from "@/lib/auth";
|
||||
import { generateTotpQrCodeDataUrl } from "@/lib/two-factor";
|
||||
import { confirmTwoFactorSetupAction } from "../../actions";
|
||||
import { getLocale } from "@/i18n/locale";
|
||||
import { getDictionary } from "@/i18n/get-dictionary";
|
||||
|
||||
export const metadata: Metadata = { title: "Zwei-Faktor-Authentifizierung einrichten" };
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function ZweiFaktorEinrichtenPage(
|
||||
props: PageProps<"/konto/zwei-faktor/einrichten">
|
||||
) {
|
||||
const t = getDictionary(await getLocale());
|
||||
const { error } = await props.searchParams;
|
||||
|
||||
const customer = await getCurrentCustomer();
|
||||
if (!customer) redirect("/konto");
|
||||
|
||||
const setup = await getTwoFactorSetup();
|
||||
if (!setup || setup.customerId !== customer.id) redirect("/konto/zwei-faktor");
|
||||
|
||||
const qrCodeDataUrl = await generateTotpQrCodeDataUrl(setup.secret, customer.email);
|
||||
|
||||
return (
|
||||
<div className="py-20">
|
||||
<Container className="max-w-md">
|
||||
<BackLink href="/konto/zwei-faktor" label={t.twoFactorSetupPage.backLabel} />
|
||||
<SectionHeading
|
||||
eyebrow={t.twoFactorSetupPage.eyebrow}
|
||||
title={t.twoFactorSetupPage.title}
|
||||
subtitle={t.twoFactorSetupPage.subtitle}
|
||||
/>
|
||||
|
||||
{error ? (
|
||||
<p className="mt-6 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">{error}</p>
|
||||
) : null}
|
||||
|
||||
<div className="mt-8 border border-ink/10 p-6 flex flex-col items-center">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- Data-URI, kein Next-Image-Optimierungspfad noetig */}
|
||||
<img src={qrCodeDataUrl} alt={t.twoFactorSetupPage.qrAlt} width={240} height={240} />
|
||||
<p className="mt-4 text-xs text-ink/65 break-all text-center">
|
||||
{t.twoFactorSetupPage.manualEntryLabel} <span className="font-mono">{setup.secret}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action={confirmTwoFactorSetupAction} className="mt-8 space-y-4">
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.twoFactorSetupPage.appCodeLabel}</span>
|
||||
<input
|
||||
name="code"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
required
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 tracking-widest focus:outline-none focus:border-forest"
|
||||
/>
|
||||
</label>
|
||||
<Button type="submit">{t.twoFactorSetupPage.activate}</Button>
|
||||
</form>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import type { Metadata } from "next";
|
||||
import { redirect } from "next/navigation";
|
||||
import { Container, SectionHeading, Button } from "@/components/ui";
|
||||
import { BackLink } from "@/components/back-link";
|
||||
import { ShieldIcon } from "@/components/account-ui";
|
||||
import { PasswordField } from "@/components/password-field";
|
||||
import { getCurrentCustomer } from "@/lib/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { startTwoFactorSetupAction, disableTwoFactorAction } from "../actions";
|
||||
import { getLocale } from "@/i18n/locale";
|
||||
import { getDictionary } from "@/i18n/get-dictionary";
|
||||
|
||||
export const metadata: Metadata = { title: "Zwei-Faktor-Authentifizierung" };
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function ZweiFaktorPage(props: PageProps<"/konto/zwei-faktor">) {
|
||||
const t = getDictionary(await getLocale());
|
||||
const { error, message } = await props.searchParams;
|
||||
|
||||
const customer = await getCurrentCustomer();
|
||||
if (!customer) redirect("/konto");
|
||||
|
||||
const remainingBackupCodes = customer.twoFactorEnabled
|
||||
? await prisma.twoFactorBackupCode.count({ where: { customerId: customer.id, usedAt: null } })
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="py-20">
|
||||
<Container className="max-w-md">
|
||||
<BackLink href="/konto" label={t.twoFactorPage.backLabel} />
|
||||
<SectionHeading
|
||||
eyebrow={t.twoFactorPage.eyebrow}
|
||||
title={t.twoFactorPage.title}
|
||||
subtitle={t.twoFactorPage.subtitle}
|
||||
/>
|
||||
|
||||
{error ? (
|
||||
<p className="mt-6 text-sm text-red-700 bg-red-50 border border-red-200 px-4 py-3">{error}</p>
|
||||
) : null}
|
||||
{message ? (
|
||||
<p className="mt-6 text-sm text-forest bg-forest/5 border border-forest/20 px-4 py-3">{message}</p>
|
||||
) : null}
|
||||
|
||||
{customer.twoFactorEnabled ? (
|
||||
<div className="mt-8 space-y-6">
|
||||
<p className="flex items-center gap-3 text-sm text-forest bg-forest/5 border border-forest/20 px-4 py-3">
|
||||
<ShieldIcon />
|
||||
<span>
|
||||
{t.twoFactorPage.activeStatus(remainingBackupCodes)}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<form action={disableTwoFactorAction} className="space-y-4 border border-ink/10 p-6">
|
||||
<h2 className="text-forest">{t.twoFactorPage.disableHeading}</h2>
|
||||
<PasswordField
|
||||
name="password"
|
||||
label={t.twoFactorPage.passwordConfirmLabel}
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
<Button type="submit" variant="ghost">
|
||||
{t.twoFactorPage.disableButton}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<form action={startTwoFactorSetupAction} className="mt-8">
|
||||
<Button type="submit">{t.twoFactorPage.setupButton}</Button>
|
||||
</form>
|
||||
)}
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user