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.
2026-08-17 14:30:28 +02:00
1 parent 5c76fcc266
commit c7927f2883
@@ -0,0 +1,131 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+import { Container, SectionHeading, Button } from "@/components/ui";
+import { BackLink } from "@/components/back-link";
+import { AccountEmptyState, AddressIcon } from "@/components/account-ui";
+import { getCurrentCustomer } from "@/lib/auth";
+import { getAddressesForCustomer } from "@/lib/account-data";
+import { addAddressAction, deleteAddressAction, setDefaultAddressAction } from "../actions";
+import { getLocale } from "@/i18n/locale";
+import { getDictionary } from "@/i18n/get-dictionary";
+
+export const metadata: Metadata = { title: "Meine Adressen" };
+export const dynamic = "force-dynamic";
+
+export default async function KontoAdressenPage(props: PageProps<"/konto/adressen">) {
+  const t = getDictionary(await getLocale());
+  const { error } = await props.searchParams;
+  const customer = await getCurrentCustomer();
+  if (!customer) redirect("/konto");
+
+  const addresses = await getAddressesForCustomer(customer.id);
+
+  return (
+    <div className="py-20">
+      <Container className="max-w-3xl">
+        <BackLink href="/konto" label={t.ordersPage.backToAccount} />
+        <SectionHeading eyebrow={t.account.eyebrow} title={t.addressesPage.title} />
+
+        {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-10 space-y-4">
+          {addresses.map((address) => (
+            <div
+              key={address.id}
+              className="border border-ink/10 p-6 flex justify-between gap-4 transition-colors hover:border-ink/25"
+            >
+              <div className="flex gap-4">
+                <span className="flex-shrink-0 flex items-center justify-center w-11 h-11 border border-ink/15 text-forest">
+                  <AddressIcon />
+                </span>
+                <div>
+                  <p className="text-forest">
+                    {address.label}{" "}
+                    {address.isDefault ? <span className="text-honey-dark text-xs">· {t.addressesPage.standard}</span> : null}
+                  </p>
+                  <p className="text-sm text-ink/70 mt-1">
+                    {address.firstName} {address.lastName}
+                    <br />
+                    {address.street}
+                    <br />
+                    {address.zip} {address.city}
+                  </p>
+                </div>
+              </div>
+              <div className="flex flex-col items-end gap-2 text-sm flex-shrink-0">
+                {!address.isDefault ? (
+                  <form action={setDefaultAddressAction}>
+                    <input type="hidden" name="addressId" value={address.id} />
+                    <button type="submit" className="text-forest hover:underline">
+                      {t.addressesPage.setDefault}
+                    </button>
+                  </form>
+                ) : null}
+                <form action={deleteAddressAction}>
+                  <input type="hidden" name="addressId" value={address.id} />
+                  <button type="submit" className="text-ink/65 hover:text-red-700 hover:underline">
+                    {t.addressesPage.delete}
+                  </button>
+                </form>
+              </div>
+            </div>
+          ))}
+          {addresses.length === 0 ? (
+            <AccountEmptyState
+              icon={<AddressIcon />}
+              title={t.addressesPage.emptyTitle}
+              description={t.addressesPage.emptyDescription}
+            />
+          ) : null}
+        </div>
+
+        <div className="mt-14 border-t border-ink/10 pt-10">
+          <h2 className="text-lg text-forest mb-6">{t.addressesPage.addNewHeading}</h2>
+          <form action={addAddressAction} className="space-y-4 max-w-md">
+            <Field name="label" label={t.addressesPage.labelField} defaultValue={t.addressesPage.labelDefaultValue} required />
+            <div className="grid grid-cols-2 gap-4">
+              <Field name="firstName" label={t.account.firstNameLabel} required />
+              <Field name="lastName" label={t.account.lastNameLabel} required />
+            </div>
+            <Field name="street" label={t.checkoutPage.streetLabel} required />
+            <div className="grid grid-cols-2 gap-4">
+              <Field name="zip" label={t.checkoutPage.zipLabel} required />
+              <Field name="city" label={t.checkoutPage.cityLabel} required />
+            </div>
+            <label className="flex items-center gap-2 text-sm text-ink/70">
+              <input type="checkbox" name="isDefault" />
+              {t.addressesPage.useAsDefault}
+            </label>
+            <Button type="submit">{t.addressesPage.save}</Button>
+          </form>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+function Field({
+  name,
+  label,
+  defaultValue,
+  required = false,
+}: {
+  name: string;
+  label: string;
+  defaultValue?: string;
+  required?: boolean;
+}) {
+  return (
+    <label className="block text-sm">
+      <span className="text-ink/70">{label}</span>
+      <input
+        name={name}
+        defaultValue={defaultValue}
+        required={required}
+        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
+      />
+    </label>
+  );
+}