Add customer registration and deployment updates

2026-03-12 16:02:16 +01:00
parent fb8e3c8ef6
commit 8ebb4d06e5
23 changed files with 851 additions and 425 deletions
--- a/frontend/src/layout/AppShell.tsx
+++ b/frontend/src/layout/AppShell.tsx
@@ -1,13 +1,6 @@
 import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useSession } from "../lib/session";

-const NAV_ITEMS = [
-  { to: "/home", label: "Start" },
-  { to: "/samples/new", label: "Neue Probe" },
-  { to: "/admin", label: "Verwaltung" },
-  { to: "/portal", label: "Portal" },
-];
-
 const PAGE_TITLES: Record<string, string> = {
  "/home": "Startseite",
  "/samples/new": "Neuanlage einer Probe",
@@ -35,6 +28,14 @@ export default function AppShell() {
  const { user, setUser } = useSession();
  const location = useLocation();
  const navigate = useNavigate();
+  const navItems = user?.role === "ADMIN"
+    ? [{ to: "/portal", label: "Benutzerverwaltung" }]
+    : [
+        { to: "/home", label: "Start" },
+        { to: "/samples/new", label: "Neue Probe" },
+        { to: "/admin", label: "Verwaltung" },
+        { to: "/portal", label: "Portal" },
+      ];

  return (
    <div className="app-shell">
@@ -44,7 +45,7 @@ export default function AppShell() {
        </div>

        <nav className="sidebar__nav">
-          {NAV_ITEMS.map((item) => (
+          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
@@ -78,12 +79,6 @@ export default function AppShell() {
          <div className="topbar__headline">
            <h2>{resolvePageTitle(location.pathname)}</h2>
          </div>
-
-          <div className="topbar__actions">
-            <button type="button" className="accent-button" onClick={() => navigate("/samples/new")}>
-              Neuanlage
-            </button>
-          </div>
        </header>

        <main className="content-area">
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,9 +1,56 @@
-const API_ROOT = import.meta.env.VITE_API_URL ?? "http://localhost:8090/api";
+import { USER_STORAGE_KEY } from "./storage";
+
+const API_ROOT = import.meta.env.VITE_API_URL ?? (import.meta.env.DEV ? "http://localhost:8090/api" : "/api");
+
+type ApiErrorPayload = {
+  message?: string;
+  error?: string;
+  detail?: string;
+};
+
+async function readErrorMessage(response: Response): Promise<string> {
+  const contentType = response.headers.get("content-type") ?? "";
+
+  if (contentType.includes("application/json")) {
+    const payload = (await response.json()) as ApiErrorPayload;
+    const message = payload.message?.trim() || payload.detail?.trim();
+    if (message) {
+      return message;
+    }
+    if (payload.error?.trim()) {
+      return `Anfrage fehlgeschlagen: ${payload.error.trim()}`;
+    }
+  }
+
+  const text = (await response.text()).trim();
+  if (text) {
+    return text;
+  }
+
+  return `Anfrage fehlgeschlagen (${response.status})`;
+}
+
+function actorHeaders(): Record<string, string> {
+  if (typeof window === "undefined") {
+    return {};
+  }
+
+  const rawUser = window.localStorage.getItem(USER_STORAGE_KEY);
+  if (!rawUser) {
+    return {};
+  }
+
+  try {
+    const user = JSON.parse(rawUser) as { id?: string | null };
+    return user.id ? { "X-MUH-Actor-Id": user.id } : {};
+  } catch {
+    return {};
+  }
+}

 async function handleResponse<T>(response: Response): Promise<T> {
  if (!response.ok) {
-    const text = await response.text();
-    throw new Error(text || "Unbekannter API-Fehler");
+    throw new Error(await readErrorMessage(response));
  }
  if (response.status === 204) {
    return undefined as T;
@@ -12,14 +59,21 @@ async function handleResponse<T>(response: Response): Promise<T> {
 }

 export async function apiGet<T>(path: string): Promise<T> {
-  return handleResponse<T>(await fetch(`${API_ROOT}${path}`));
+  return handleResponse<T>(
+    await fetch(`${API_ROOT}${path}`, {
+      headers: actorHeaders(),
+    }),
+  );
 }

 export async function apiPost<T>(path: string, body: unknown): Promise<T> {
  return handleResponse<T>(
    await fetch(`${API_ROOT}${path}`, {
      method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: {
+        "Content-Type": "application/json",
+        ...actorHeaders(),
+      },
      body: JSON.stringify(body),
    }),
  );
@@ -29,7 +83,10 @@ export async function apiPut<T>(path: string, body: unknown): Promise<T> {
  return handleResponse<T>(
    await fetch(`${API_ROOT}${path}`, {
      method: "PUT",
-      headers: { "Content-Type": "application/json" },
+      headers: {
+        "Content-Type": "application/json",
+        ...actorHeaders(),
+      },
      body: JSON.stringify(body),
    }),
  );
@@ -39,7 +96,10 @@ export async function apiPatch<T>(path: string, body: unknown): Promise<T> {
  return handleResponse<T>(
    await fetch(`${API_ROOT}${path}`, {
      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
+      headers: {
+        "Content-Type": "application/json",
+        ...actorHeaders(),
+      },
      body: JSON.stringify(body),
    }),
  );
@@ -49,6 +109,7 @@ export async function apiDelete(path: string): Promise<void> {
  await handleResponse<void>(
    await fetch(`${API_ROOT}${path}`, {
      method: "DELETE",
+      headers: actorHeaders(),
    }),
  );
 }
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -16,7 +16,7 @@ export type MedicationCategory =
  | "SYSTEMIC_PAIN"
  | "DRY_SEALER"
  | "DRY_ANTIBIOTIC";
-export type UserRole = "APP" | "ADMIN" | "CUSTOMER";
+export type UserRole = "ADMIN" | "CUSTOMER";

 export interface FarmerOption {
  businessKey: string;
@@ -50,6 +50,7 @@ export interface UserOption {
  companyName: string | null;
  address: string | null;
  email: string | null;
+  phoneNumber: string | null;
  portalLogin: string | null;
  role: UserRole;
 }
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -83,10 +83,7 @@ export default function HomePage() {
            />
          </label>
          <button type="submit" className="accent-button">
-            Probe oeffnen
-          </button>
-          <button type="button" className="secondary-button" onClick={() => navigate("/samples/new")}>
-            Neuanlage einer Probe
+            Probe öffnen
          </button>
        </form>

@@ -162,7 +159,7 @@ export default function HomePage() {
                          )
                        }
                      >
-                        Oeffnen
+                        Öffnen
                      </button>
                    </td>
                  </tr>
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -1,5 +1,5 @@
-import { FormEvent, useEffect, useState } from "react";
-import { apiGet, apiPost } from "../lib/api";
+import { FormEvent, useState } from "react";
+import { apiPost } from "../lib/api";
 import { useSession } from "../lib/session";
 import type { UserOption } from "../lib/types";

@@ -9,56 +9,36 @@ type FeedbackState =
  | null;

 export default function LoginPage() {
-  const [users, setUsers] = useState<UserOption[]>([]);
-  const [manualCode, setManualCode] = useState("");
+  const [showRegistration, setShowRegistration] = useState(false);
  const [identifier, setIdentifier] = useState("");
  const [password, setPassword] = useState("");
  const [registration, setRegistration] = useState({
    companyName: "",
-    address: "",
+    street: "",
+    houseNumber: "",
+    postalCode: "",
+    city: "",
    email: "",
+    phoneNumber: "",
    password: "",
+    passwordConfirmation: "",
  });
-  const [loading, setLoading] = useState(true);
  const [feedback, setFeedback] = useState<FeedbackState>(null);
  const { setUser } = useSession();

-  async function loadUsers() {
-    setLoading(true);
-    setFeedback(null);
-    try {
-      const response = await apiGet<UserOption[]>("/session/users");
-      setUsers(response);
-    } catch (loadError) {
-      setFeedback({ type: "error", text: (loadError as Error).message });
-      setUsers([]);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    void loadUsers();
-  }, []);
-
-  async function handleCodeLogin(code: string) {
-    if (!code.trim()) {
-      setFeedback({ type: "error", text: "Bitte ein Benutzerkuerzel eingeben oder auswaehlen." });
+  async function handlePasswordLogin(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!identifier.trim() || !password.trim()) {
+      setFeedback({
+        type: "error",
+        text: "Bitte E-Mail oder Benutzername und Passwort eingeben.",
+      });
      return;
    }
    try {
-      const response = await apiPost<UserOption>("/session/login", { code });
-      setUser(response);
-    } catch (loginError) {
-      setFeedback({ type: "error", text: (loginError as Error).message });
-    }
-  }
-
-  async function handlePasswordLogin(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    try {
+      setFeedback(null);
      const response = await apiPost<UserOption>("/session/password-login", {
-        identifier,
+        identifier: identifier.trim(),
        password,
      });
      setUser(response);
@@ -69,8 +49,31 @@ export default function LoginPage() {

  async function handleRegister(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
+    if (
+      !registration.companyName.trim()
+      || !registration.street.trim()
+      || !registration.houseNumber.trim()
+      || !registration.postalCode.trim()
+      || !registration.city.trim()
+      || !registration.email.trim()
+      || !registration.phoneNumber.trim()
+      || !registration.password.trim()
+    ) {
+      setFeedback({
+        type: "error",
+        text: "Bitte alle Pflichtfelder inklusive Telefonnummer fuer die Registrierung ausfuellen.",
+      });
+      return;
+    }
+    if (registration.password !== registration.passwordConfirmation) {
+      setFeedback({ type: "error", text: "Die beiden Passwoerter stimmen nicht ueberein." });
+      return;
+    }
    try {
-      const response = await apiPost<UserOption>("/session/register", registration);
+      setFeedback(null);
+      const { passwordConfirmation, ...registrationPayload } = registration;
+      void passwordConfirmation;
+      const response = await apiPost<UserOption>("/session/register", registrationPayload);
      setFeedback({
        type: "success",
        text: `Registrierung erfolgreich. Willkommen ${response.companyName ?? response.displayName}.`,
@@ -98,8 +101,8 @@ export default function LoginPage() {
          <p className="eyebrow">Zugang</p>
          <h2>Anmelden oder registrieren</h2>
          <p className="muted-text">
-            Weiterhin moeglich: Direktanmeldung per Benutzerkuerzel. Neu: Login mit
-            E-Mail/Benutzername und Passwort.
+            Anmeldung per E-Mail oder Benutzername mit Passwort sowie direkte
+            Kundenregistrierung.
          </p>

          {feedback ? (
@@ -108,146 +111,156 @@ export default function LoginPage() {
            </div>
          ) : null}

-          <div className="login-panel__section">
-            <div className="section-card__header">
-              <div>
-                <p className="eyebrow">Schnelllogin</p>
-                <h3>Benutzerkuerzel</h3>
-              </div>
-              <button type="button" className="secondary-button" onClick={() => void loadUsers()}>
-                Neu laden
-              </button>
-            </div>
-
-            {loading ? (
-              <div className="empty-state">Benutzer werden geladen ...</div>
-            ) : users.length ? (
-              <div className="user-grid">
-                {users.map((user) => (
-                  <button
-                    key={user.id}
-                    type="button"
-                    className="user-card"
-                    onClick={() => void handleCodeLogin(user.code)}
-                  >
-                    <span className="user-card__code">{user.code}</span>
-                    <strong>{user.displayName}</strong>
-                    <small>
-                      {user.role === "ADMIN"
-                        ? "Admin"
-                        : user.role === "CUSTOMER"
-                          ? "Kunde"
-                          : "App"}
-                    </small>
-                  </button>
-                ))}
-              </div>
-            ) : (
-              <div className="page-stack">
-                <div className="empty-state">
-                  Es wurden keine aktiven Benutzer geladen. Das Kuersel kann trotzdem direkt
-                  eingegeben werden.
-                </div>
+          <div className="auth-grid">
+            {!showRegistration ? (
+              <form className="login-panel__section" onSubmit={handlePasswordLogin}>
                <label className="field">
-                  <span>Benutzerkuerzel</span>
+                  <span>E-Mail / Benutzername</span>
                  <input
-                    value={manualCode}
-                    onChange={(event) => setManualCode(event.target.value.toUpperCase())}
-                    placeholder="z. B. SV"
+                    value={identifier}
+                    onChange={(event) => setIdentifier(event.target.value)}
+                    placeholder="z. B. admin oder name@hof.de"
+                  />
+                </label>
+                <label className="field">
+                  <span>Passwort</span>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(event) => setPassword(event.target.value)}
                  />
                </label>
                <div className="page-actions">
+                  <button type="submit" className="accent-button">
+                    Mit Passwort anmelden
+                  </button>
                  <button
                    type="button"
-                    className="accent-button"
-                    onClick={() => void handleCodeLogin(manualCode)}
+                    className="secondary-button"
+                    onClick={() => {
+                      setFeedback(null);
+                      setShowRegistration(true);
+                    }}
                  >
-                    Mit Kuerzel anmelden
+                    Registrieren
                  </button>
                </div>
-              </div>
+              </form>
+            ) : (
+              <form className="login-panel__section" onSubmit={handleRegister}>
+                <div className="field-grid">
+                  <label className="field field--wide">
+                    <span>Firmenname</span>
+                    <input
+                      value={registration.companyName}
+                      onChange={(event) =>
+                        setRegistration((current) => ({ ...current, companyName: event.target.value }))
+                      }
+                      placeholder="z. B. Muster Agrar GmbH"
+                    />
+                  </label>
+                  <label className="field">
+                    <span>Strasse</span>
+                    <input
+                      value={registration.street}
+                      onChange={(event) =>
+                        setRegistration((current) => ({ ...current, street: event.target.value }))
+                      }
+                      placeholder="z. B. Dorfstrasse"
+                    />
+                  </label>
+                  <label className="field">
+                    <span>Hausnummer</span>
+                    <input
+                      value={registration.houseNumber}
+                      onChange={(event) =>
+                        setRegistration((current) => ({ ...current, houseNumber: event.target.value }))
+                      }
+                      placeholder="z. B. 12a"
+                    />
+                  </label>
+                  <label className="field">
+                    <span>PLZ</span>
+                    <input
+                      value={registration.postalCode}
+                      onChange={(event) =>
+                        setRegistration((current) => ({ ...current, postalCode: event.target.value }))
+                      }
+                      placeholder="z. B. 12345"
+                    />
+                  </label>
+                  <label className="field">
+                    <span>Ort</span>
+                    <input
+                      value={registration.city}
+                      onChange={(event) =>
+                        setRegistration((current) => ({ ...current, city: event.target.value }))
+                      }
+                      placeholder="z. B. Musterstadt"
+                    />
+                  </label>
+                  <label className="field">
+                    <span>E-Mail</span>
+                    <input
+                      type="email"
+                      value={registration.email}
+                      onChange={(event) =>
+                        setRegistration((current) => ({ ...current, email: event.target.value }))
+                      }
+                    />
+                  </label>
+                  <label className="field">
+                    <span>Telefonnummer</span>
+                    <input
+                      value={registration.phoneNumber}
+                      onChange={(event) =>
+                        setRegistration((current) => ({ ...current, phoneNumber: event.target.value }))
+                      }
+                      placeholder="z. B. 04531 181424"
+                    />
+                  </label>
+                  <label className="field field--wide">
+                    <span>Passwort</span>
+                    <input
+                      type="password"
+                      value={registration.password}
+                      onChange={(event) =>
+                        setRegistration((current) => ({ ...current, password: event.target.value }))
+                      }
+                    />
+                  </label>
+                  <label className="field field--wide">
+                    <span>Passwort wiederholen</span>
+                    <input
+                      type="password"
+                      value={registration.passwordConfirmation}
+                      onChange={(event) =>
+                        setRegistration((current) => ({
+                          ...current,
+                          passwordConfirmation: event.target.value,
+                        }))
+                      }
+                    />
+                  </label>
+                </div>
+                <div className="page-actions">
+                  <button type="submit" className="accent-button">
+                    Registrieren
+                  </button>
+                  <button
+                    type="button"
+                    className="secondary-button"
+                    onClick={() => {
+                      setFeedback(null);
+                      setShowRegistration(false);
+                    }}
+                  >
+                    Zurück
+                  </button>
+                </div>
+              </form>
            )}
          </div>
-
-          <div className="divider-label">oder mit Passwort</div>
-
-          <div className="auth-grid">
-            <form className="login-panel__section" onSubmit={handlePasswordLogin}>
-              <p className="eyebrow">Login</p>
-              <h3>E-Mail oder Benutzername</h3>
-              <label className="field">
-                <span>E-Mail / Benutzername</span>
-                <input
-                  value={identifier}
-                  onChange={(event) => setIdentifier(event.target.value)}
-                  placeholder="z. B. admin oder name@hof.de"
-                />
-              </label>
-              <label className="field">
-                <span>Passwort</span>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(event) => setPassword(event.target.value)}
-                />
-              </label>
-              <div className="page-actions">
-                <button type="submit" className="accent-button">
-                  Mit Passwort anmelden
-                </button>
-              </div>
-            </form>
-
-            <form className="login-panel__section" onSubmit={handleRegister}>
-              <p className="eyebrow">Kundenregistrierung</p>
-              <h3>Neues Kundenkonto anlegen</h3>
-              <label className="field">
-                <span>Firmenname</span>
-                <input
-                  value={registration.companyName}
-                  onChange={(event) =>
-                    setRegistration((current) => ({ ...current, companyName: event.target.value }))
-                  }
-                  placeholder="z. B. Muster Agrar GmbH"
-                />
-              </label>
-              <label className="field">
-                <span>Adresse</span>
-                <textarea
-                  value={registration.address}
-                  onChange={(event) =>
-                    setRegistration((current) => ({ ...current, address: event.target.value }))
-                  }
-                  placeholder="Strasse, Hausnummer, PLZ Ort"
-                />
-              </label>
-              <label className="field">
-                <span>E-Mail</span>
-                <input
-                  type="email"
-                  value={registration.email}
-                  onChange={(event) =>
-                    setRegistration((current) => ({ ...current, email: event.target.value }))
-                  }
-                />
-              </label>
-              <label className="field">
-                <span>Passwort</span>
-                <input
-                  type="password"
-                  value={registration.password}
-                  onChange={(event) =>
-                    setRegistration((current) => ({ ...current, password: event.target.value }))
-                  }
-                />
-              </label>
-              <div className="page-actions">
-                <button type="submit" className="accent-button">
-                  Registrieren
-                </button>
-              </div>
-            </form>
-          </div>
        </div>
      </section>
    </div>
--- a/frontend/src/pages/PortalPage.tsx
+++ b/frontend/src/pages/PortalPage.tsx
@@ -1,5 +1,6 @@
 import { FormEvent, useEffect, useMemo, useState } from "react";
 import { apiDelete, apiGet, apiPatch, apiPost, pdfUrl } from "../lib/api";
+import { useSession } from "../lib/session";
 import type { PortalSnapshot, UserRole } from "../lib/types";

 function formatDate(value: string | null) {
@@ -13,12 +14,8 @@ function formatDate(value: string | null) {
 }

 export default function PortalPage() {
+  const { user } = useSession();
  const [snapshot, setSnapshot] = useState<PortalSnapshot | null>(null);
-  const [selectedFarmer, setSelectedFarmer] = useState("");
-  const [farmerQuery, setFarmerQuery] = useState("");
-  const [cowQuery, setCowQuery] = useState("");
-  const [sampleNumberQuery, setSampleNumberQuery] = useState("");
-  const [dateQuery, setDateQuery] = useState("");
  const [selectedReports, setSelectedReports] = useState<string[]>([]);
  const [message, setMessage] = useState<string | null>(null);
  const [userForm, setUserForm] = useState({
@@ -27,29 +24,13 @@ export default function PortalPage() {
    email: "",
    portalLogin: "",
    password: "",
-    role: "APP" as UserRole,
+    role: "CUSTOMER" as UserRole,
  });
  const [passwordDrafts, setPasswordDrafts] = useState<Record<string, string>>({});
+  const isAdmin = user?.role === "ADMIN";

  async function loadSnapshot() {
-    const params = new URLSearchParams();
-    if (selectedFarmer) {
-      params.set("farmerBusinessKey", selectedFarmer);
-    }
-    if (farmerQuery) {
-      params.set("farmerQuery", farmerQuery);
-    }
-    if (cowQuery) {
-      params.set("cowQuery", cowQuery);
-    }
-    if (sampleNumberQuery) {
-      params.set("sampleNumber", sampleNumberQuery);
-    }
-    if (dateQuery) {
-      params.set("date", dateQuery);
-    }
-
-    const response = await apiGet<PortalSnapshot>(`/portal/snapshot?${params.toString()}`);
+    const response = await apiGet<PortalSnapshot>("/portal/snapshot");
    setSnapshot(response);
    setSelectedReports(response.reportCandidates.map((candidate) => candidate.sampleId));
  }
@@ -69,16 +50,6 @@ export default function PortalPage() {
    );
  }

-  async function handleSearch(event?: FormEvent) {
-    event?.preventDefault();
-    try {
-      setMessage(null);
-      await loadSnapshot();
-    } catch (loadError) {
-      setMessage((loadError as Error).message);
-    }
-  }
-
  async function handleDispatchReports() {
    try {
      const response = await apiPost<{ mailDeliveryActive: boolean }>("/portal/reports/send", {
@@ -97,6 +68,10 @@ export default function PortalPage() {

  async function handleCreateUser(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
+    if (!isAdmin) {
+      setMessage("Nur Administratoren koennen Benutzer anlegen.");
+      return;
+    }
    try {
      await apiPost("/portal/users", {
        ...userForm,
@@ -108,7 +83,7 @@ export default function PortalPage() {
        email: "",
        portalLogin: "",
        password: "",
-        role: "APP",
+        role: "CUSTOMER",
      });
      setMessage("Benutzer gespeichert.");
      await loadSnapshot();
@@ -203,163 +178,114 @@ export default function PortalPage() {
          </div>
        </article>

-        <article className="section-card">
-          <p className="eyebrow">Benutzerverwaltung</p>
-          <form className="field-grid" onSubmit={handleCreateUser}>
-            <label className="field">
-              <span>Kuerzel</span>
-              <input
-                value={userForm.code}
-                onChange={(event) => setUserForm((current) => ({ ...current, code: event.target.value }))}
-              />
-            </label>
-            <label className="field">
-              <span>Name</span>
-              <input
-                value={userForm.displayName}
-                onChange={(event) =>
-                  setUserForm((current) => ({ ...current, displayName: event.target.value }))
-                }
-              />
-            </label>
-            <label className="field">
-              <span>Login</span>
-              <input
-                value={userForm.portalLogin}
-                onChange={(event) =>
-                  setUserForm((current) => ({ ...current, portalLogin: event.target.value }))
-                }
-              />
-            </label>
-            <label className="field">
-              <span>E-Mail</span>
-              <input
-                type="email"
-                value={userForm.email}
-                onChange={(event) => setUserForm((current) => ({ ...current, email: event.target.value }))}
-              />
-            </label>
-            <label className="field">
-              <span>Passwort</span>
-              <input
-                value={userForm.password}
-                onChange={(event) => setUserForm((current) => ({ ...current, password: event.target.value }))}
-                type="password"
-              />
-            </label>
-            <label className="field">
-              <span>Rolle</span>
-              <select
-                value={userForm.role}
-                onChange={(event) => setUserForm((current) => ({ ...current, role: event.target.value as UserRole }))}
-              >
-                <option value="APP">APP</option>
-                <option value="ADMIN">ADMIN</option>
-              </select>
-            </label>
-            <div className="page-actions">
-              <button type="submit" className="accent-button">
-                Benutzer anlegen
-              </button>
-            </div>
-          </form>
+        {isAdmin ? (
+          <article className="section-card">
+            <p className="eyebrow">Benutzerverwaltung</p>
+            <form className="field-grid" onSubmit={handleCreateUser}>
+              <label className="field">
+                <span>Kuerzel</span>
+                <input
+                  value={userForm.code}
+                  onChange={(event) => setUserForm((current) => ({ ...current, code: event.target.value }))}
+                />
+              </label>
+              <label className="field">
+                <span>Name</span>
+                <input
+                  value={userForm.displayName}
+                  onChange={(event) =>
+                    setUserForm((current) => ({ ...current, displayName: event.target.value }))
+                  }
+                />
+              </label>
+              <label className="field">
+                <span>Login</span>
+                <input
+                  value={userForm.portalLogin}
+                  onChange={(event) =>
+                    setUserForm((current) => ({ ...current, portalLogin: event.target.value }))
+                  }
+                />
+              </label>
+              <label className="field">
+                <span>E-Mail</span>
+                <input
+                  type="email"
+                  value={userForm.email}
+                  onChange={(event) => setUserForm((current) => ({ ...current, email: event.target.value }))}
+                />
+              </label>
+              <label className="field">
+                <span>Passwort</span>
+                <input
+                  value={userForm.password}
+                  onChange={(event) => setUserForm((current) => ({ ...current, password: event.target.value }))}
+                  type="password"
+                />
+              </label>
+              <label className="field">
+                <span>Rolle</span>
+                <select
+                  value={userForm.role}
+                  onChange={(event) => setUserForm((current) => ({ ...current, role: event.target.value as UserRole }))}
+                >
+                  <option value="CUSTOMER">CUSTOMER</option>
+                  <option value="ADMIN">ADMIN</option>
+                </select>
+              </label>
+              <div className="page-actions">
+                <button type="submit" className="accent-button">
+                  Benutzer anlegen
+                </button>
+              </div>
+            </form>

-          <div className="table-shell">
-            <table className="data-table">
-              <thead>
-                <tr>
-                  <th>Kuerzel</th>
-                  <th>Name</th>
-                  <th>E-Mail</th>
-                  <th>Login</th>
-                  <th>Rolle</th>
-                  <th>Passwort</th>
-                  <th />
-                </tr>
-              </thead>
-              <tbody>
-                {snapshot.users.map((user) => (
-                  <tr key={user.id}>
-                    <td>{user.code}</td>
-                    <td>{user.displayName}</td>
-                    <td>{user.email ?? "-"}</td>
-                    <td>{user.portalLogin ?? "-"}</td>
-                    <td>{user.role}</td>
-                    <td>
-                      <input
-                        type="password"
-                        value={passwordDrafts[user.id] ?? ""}
-                        onChange={(event) =>
-                          setPasswordDrafts((current) => ({ ...current, [user.id]: event.target.value }))
-                        }
-                        placeholder="Neues Passwort"
-                      />
-                    </td>
-                    <td className="table-actions">
-                      <button type="button" className="table-link" onClick={() => void handlePasswordChange(user.id)}>
-                        Speichern
-                      </button>
-                      <button type="button" className="table-link table-link--danger" onClick={() => void handleDeleteUser(user.id)}>
-                        Loeschen
-                      </button>
-                    </td>
+            <div className="table-shell">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Kuerzel</th>
+                    <th>Name</th>
+                    <th>E-Mail</th>
+                    <th>Login</th>
+                    <th>Rolle</th>
+                    <th>Passwort</th>
+                    <th />
                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </article>
-      </section>
-
-      <section className="section-card">
-        <form className="field-grid" onSubmit={handleSearch}>
-          <label className="field">
-            <span>Landwirt suchen</span>
-            <input value={farmerQuery} onChange={(event) => setFarmerQuery(event.target.value)} />
-          </label>
-          <label className="field">
-            <span>Gefundener Landwirt</span>
-            <select value={selectedFarmer} onChange={(event) => setSelectedFarmer(event.target.value)}>
-              <option value="">alle / noch keiner</option>
-              {snapshot.farmers.map((farmer) => (
-                <option key={farmer.businessKey} value={farmer.businessKey}>
-                  {farmer.name}
-                </option>
-              ))}
-            </select>
-          </label>
-          <label className="field">
-            <span>Kuh</span>
-            <input value={cowQuery} onChange={(event) => setCowQuery(event.target.value)} />
-          </label>
-          <label className="field">
-            <span>Probe-Nr.</span>
-            <input value={sampleNumberQuery} onChange={(event) => setSampleNumberQuery(event.target.value)} />
-          </label>
-          <label className="field">
-            <span>Datum</span>
-            <input type="date" value={dateQuery} onChange={(event) => setDateQuery(event.target.value)} />
-          </label>
-          <div className="page-actions page-actions--align-end">
-            <button type="submit" className="accent-button">
-              Suche starten
-            </button>
-            <button
-              type="button"
-              className="secondary-button"
-              onClick={() => {
-                setSelectedFarmer("");
-                setFarmerQuery("");
-                setCowQuery("");
-                setSampleNumberQuery("");
-                setDateQuery("");
-                void handleSearch();
-              }}
-            >
-              Zuruecksetzen
-            </button>
-          </div>
-        </form>
+                </thead>
+                <tbody>
+                  {snapshot.users.map((user) => (
+                    <tr key={user.id}>
+                      <td>{user.code}</td>
+                      <td>{user.displayName}</td>
+                      <td>{user.email ?? "-"}</td>
+                      <td>{user.portalLogin ?? "-"}</td>
+                      <td>{user.role}</td>
+                      <td>
+                        <input
+                          type="password"
+                          value={passwordDrafts[user.id] ?? ""}
+                          onChange={(event) =>
+                            setPasswordDrafts((current) => ({ ...current, [user.id]: event.target.value }))
+                          }
+                          placeholder="Neues Passwort"
+                        />
+                      </td>
+                      <td className="table-actions">
+                        <button type="button" className="table-link" onClick={() => void handlePasswordChange(user.id)}>
+                          Speichern
+                        </button>
+                        <button type="button" className="table-link table-link--danger" onClick={() => void handleDeleteUser(user.id)}>
+                          Loeschen
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </article>
+        ) : null}
      </section>

      <section className="section-card">
--- a/frontend/src/pages/SampleRegistrationPage.tsx
+++ b/frontend/src/pages/SampleRegistrationPage.tsx
@@ -138,7 +138,7 @@ export default function SampleRegistrationPage() {
        {message ? <div className="alert alert--error">{message}</div> : null}
      </section>

-      <section className="form-grid">
+      <section className="form-grid form-grid--stacked">
        <article className="section-card">
          <p className="eyebrow">Stammdaten</p>
          <div className="field-grid">
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -57,16 +57,21 @@ a {
  display: grid;
  grid-template-columns: minmax(228px, 280px) minmax(0, 1fr);
  min-height: 100vh;
+  align-items: start;
 }

 .sidebar {
+  position: sticky;
+  top: 0;
  display: flex;
  flex-direction: column;
-  justify-content: space-between;
  padding: 28px 24px;
+  min-height: 100vh;
+  height: 100vh;
  background: rgba(23, 34, 41, 0.92);
  color: #f8f3ed;
  backdrop-filter: blur(16px);
+  overflow: hidden;
 }

 .sidebar__brand {
@@ -89,8 +94,8 @@ a {
  align-items: center;
  justify-content: center;
  width: 100%;
-  min-height: 108px;
-  padding: 16px 24px;
+  min-height: 54px;
+  padding: 8px 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, #1d9485, #0f5b53);
  font-weight: 700;
@@ -100,7 +105,9 @@ a {
 .sidebar__nav {
  display: grid;
  gap: 10px;
-  margin: 32px 0 auto;
+  margin: 32px 0 0;
+  flex: 1 1 auto;
+  align-content: start;
 }

 .nav-link {
@@ -121,6 +128,8 @@ a {
 .sidebar__footer {
  display: grid;
  gap: 12px;
+  margin-top: auto;
+  padding-top: 24px;
 }

 .user-chip {
@@ -263,6 +272,14 @@ a {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

+.form-grid--stacked {
+  grid-template-columns: 1fr;
+}
+
+.portal-grid > :only-child {
+  grid-column: 1 / -1;
+}
+
 .metric-card {
  padding: 22px 24px;
  border-radius: var(--radius-lg);
@@ -307,6 +324,10 @@ a {
  gap: 8px;
 }

+.field--wide {
+  grid-column: 1 / -1;
+}
+
 .field span {
  font-size: 0.9rem;
  color: var(--muted);
@@ -399,7 +420,7 @@ a {
 }

 .auth-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: 1fr;
  margin-top: 18px;
 }

@@ -582,10 +603,10 @@ a {

 .login-hero {
  display: grid;
-  grid-template-columns: 1.1fr 0.9fr;
+  grid-template-columns: 1fr;
  gap: 28px;
  align-items: stretch;
-  width: min(1240px, 100%);
+  width: min(960px, 100%);
 }

 .login-hero__copy {
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -1,4 +1,5 @@
 interface ImportMetaEnv {
+  readonly DEV: boolean;
  readonly VITE_API_URL?: string;
 }