Passwoerter verdeckt, Kontobereich mit eigenem Passwortwechsel
Zwei berechtigte Rueckmeldungen von Florian: 1. In der Benutzerverwaltung standen die Passwortfelder auf type='text', das Passwort war also im Klartext lesbar - vor fremden Augen und in jeder Bildschirmuebertragung. Alle Passwortfelder nutzen jetzt ein gemeinsames PasswordInput: verdeckt als Voreinstellung, mit Auge zum Aufdecken. Weil ein Administrator das Passwort weitergeben muss, gibt es daneben einen Generator fuer ein zufaelliges, vorlesbares Passwort in Vierergruppen. 2. Es gab keinen Kontobereich. Neu ist /konto mit Profil, den eigenen Gruppen samt Rollenerklaerung, Passwortwechsel und Abmelden. Im Kopfbereich fuehrt ein Namenskuerzel dorthin. Ist die Anmeldung ausgeschaltet, steht dort 'Ohne Anmeldung' und die Seite erklaert, wie man sie einschaltet - vorher suchte man den Abmelden-Knopf vergeblich. Dabei eine echte Luecke geschlossen: ein Benutzer konnte sein Passwort gar nicht selbst aendern, nur ein Administrator konnte es setzen. Der Wechsel verlangt das bisherige Passwort, lehnt ein identisches ab und beendet alle anderen Sitzungen - die eigene bleibt bestehen. Nebenbei: die Betriebsart-Knoepfe im Generator haben jetzt data-mode. Ueber aria-pressed waren sie nicht mehr eindeutig, seit das Passwortfeld einen eigenen Umschalter hat. Geprueft: 63 Pruefungen fuer Anmeldung inkl. Passwortwechsel und Konto, dazu 280 bestehende bei ausgeschalteter Anmeldung.
This commit is contained in:
Florian Wilde
@@ -8,7 +8,11 @@ import {
|
||||
MIN_PASSWORD_LENGTH,
|
||||
verifyPassword,
|
||||
} from "@/lib/auth/password";
|
||||
import { createSession, destroySession } from "@/lib/auth/session";
|
||||
import {
|
||||
createSession,
|
||||
destroyAllSessions,
|
||||
destroySession,
|
||||
} from "@/lib/auth/session";
|
||||
import { prisma } from "@/lib/db";
|
||||
import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
|
||||
import { QrRequestError } from "@/lib/qr/type-module";
|
||||
@@ -46,10 +50,21 @@ const setupSchema = z.object({
|
||||
|
||||
const logoutSchema = z.object({ action: z.literal("logout") });
|
||||
|
||||
const changePasswordSchema = z.object({
|
||||
action: z.literal("change-password"),
|
||||
currentPassword: z.string().min(1, {
|
||||
error: "Bitte gib dein bisheriges Passwort ein.",
|
||||
}),
|
||||
newPassword: z.string().min(MIN_PASSWORD_LENGTH, {
|
||||
error: `Das neue Passwort ist zu kurz. ${describePasswordRules()}`,
|
||||
}),
|
||||
});
|
||||
|
||||
const bodySchema = z.discriminatedUnion("action", [
|
||||
loginSchema,
|
||||
setupSchema,
|
||||
logoutSchema,
|
||||
changePasswordSchema,
|
||||
]);
|
||||
|
||||
/** Wer ist angemeldet? Von der Oberfläche für den Kopfbereich genutzt. */
|
||||
@@ -96,6 +111,9 @@ export async function POST(request: NextRequest): Promise<Response> {
|
||||
// Das `await` ist hier nicht optional: ohne es verlässt das Promise den
|
||||
// try-Block, bevor es sich auflöst — eine Ablehnung käme dann nie im
|
||||
// catch an und würde als nackter 500er beim Aufrufer landen.
|
||||
if (parsed.data.action === "change-password") {
|
||||
return await handleChangePassword(parsed.data);
|
||||
}
|
||||
if (parsed.data.action === "setup") {
|
||||
return await handleSetup(parsed.data);
|
||||
}
|
||||
@@ -105,6 +123,51 @@ export async function POST(request: NextRequest): Promise<Response> {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Eigenes Passwort ändern. Das bisherige muss stimmen — sonst könnte jemand
|
||||
* an einem unbeaufsichtigten Rechner das Konto übernehmen.
|
||||
*/
|
||||
async function handleChangePassword(
|
||||
input: z.infer<typeof changePasswordSchema>,
|
||||
): Promise<Response> {
|
||||
const actor = await getActor();
|
||||
if (actor.kind !== "user") {
|
||||
throw new QrRequestError("Bitte melde dich an.", 401);
|
||||
}
|
||||
|
||||
const user = await prisma.user.findUnique({ where: { id: actor.user.id } });
|
||||
if (!user) {
|
||||
throw new QrRequestError("Dieses Konto existiert nicht mehr.", 404);
|
||||
}
|
||||
|
||||
if (!(await verifyPassword(input.currentPassword, user.passwordHash))) {
|
||||
throw new QrRequestError("Das bisherige Passwort stimmt nicht.", 403);
|
||||
}
|
||||
|
||||
if (input.currentPassword === input.newPassword) {
|
||||
throw new QrRequestError(
|
||||
"Das neue Passwort ist mit dem bisherigen identisch.",
|
||||
);
|
||||
}
|
||||
|
||||
await prisma.user.update({
|
||||
where: { id: user.id },
|
||||
data: {
|
||||
passwordHash: await hashPassword(input.newPassword),
|
||||
failedLogins: 0,
|
||||
lockedUntil: null,
|
||||
},
|
||||
});
|
||||
|
||||
// Alle Sitzungen beenden — auch die eigene — und sofort eine neue
|
||||
// aufmachen. So fliegen andere Geräte raus, ohne dass man sich hier neu
|
||||
// anmelden muss.
|
||||
await destroyAllSessions(user.id);
|
||||
await createSession(user.id);
|
||||
|
||||
return Response.json({ ok: true });
|
||||
}
|
||||
|
||||
/** Legt den ersten Benutzer an — nur solange es noch keinen gibt. */
|
||||
async function handleSetup(
|
||||
input: z.infer<typeof setupSchema>,
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
|
||||
import { ChangePasswordForm, SignOutCard } from "@/components/account";
|
||||
import { Badge, Card, CardTitle, Notice } from "@/components/ui";
|
||||
import { isAuthEnabled } from "@/lib/auth/actor";
|
||||
import { requirePageActor } from "@/lib/auth/guard";
|
||||
import { MIN_PASSWORD_LENGTH } from "@/lib/auth/password";
|
||||
import { ROLE_DESCRIPTIONS, ROLE_LABELS } from "@/lib/auth/policy";
|
||||
|
||||
export const metadata: Metadata = { title: "Konto" };
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function AccountPage() {
|
||||
const actor = await requirePageActor();
|
||||
|
||||
// Bei ausgeschalteter Anmeldung gibt es kein Konto — dann erklärt die Seite,
|
||||
// wie sich das umstellen lässt, statt einfach leer zu sein.
|
||||
if (actor.kind !== "user") {
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl px-4 py-10 sm:px-6">
|
||||
<h1 className="text-2xl font-bold tracking-tight text-slate-900">
|
||||
Konto
|
||||
</h1>
|
||||
<div className="mt-5">
|
||||
<Notice tone="info">
|
||||
<span className="font-medium">Die Anmeldung ist ausgeschaltet.</span>{" "}
|
||||
Es gibt deshalb kein Konto und niemanden zum Abmelden — wer die
|
||||
Anwendung erreicht, darf alles. Zum Einschalten{" "}
|
||||
<code className="rounded bg-white/70 px-1.5 py-0.5 font-mono text-xs">
|
||||
AUTH_ENABLED=true
|
||||
</code>{" "}
|
||||
in der <code className="font-mono text-xs">.env</code> setzen und{" "}
|
||||
<code className="rounded bg-white/70 px-1.5 py-0.5 font-mono text-xs">
|
||||
docker compose up -d
|
||||
</code>{" "}
|
||||
ausführen. Beim nächsten Aufruf legst du den ersten Administrator
|
||||
an.
|
||||
</Notice>
|
||||
</div>
|
||||
<Link
|
||||
href="/"
|
||||
className="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
|
||||
>
|
||||
Zur Typ-Auswahl
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { user } = actor;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
|
||||
<div className="mb-7">
|
||||
<h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
|
||||
Konto
|
||||
</h1>
|
||||
<p className="mt-2 text-slate-600">
|
||||
Deine Anmeldedaten und die Gruppen, in denen du mitarbeitest.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardTitle>Angemeldet als</CardTitle>
|
||||
<dl className="space-y-2 text-sm">
|
||||
<div className="flex flex-wrap gap-x-2">
|
||||
<dt className="text-slate-500">Name:</dt>
|
||||
<dd className="text-slate-900">{user.name?.trim() || "—"}</dd>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-x-2">
|
||||
<dt className="text-slate-500">E-Mail:</dt>
|
||||
<dd className="text-slate-900">{user.email}</dd>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-2">
|
||||
<dt className="text-slate-500">Rolle:</dt>
|
||||
<dd>
|
||||
{user.isInstanceAdmin ? (
|
||||
<Badge tone="popular">Administrator der Installation</Badge>
|
||||
) : (
|
||||
<span className="text-slate-900">Benutzer</span>
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardTitle
|
||||
hint={
|
||||
user.isInstanceAdmin
|
||||
? "Als Administrator der Installation siehst du ohnehin alle Gruppen."
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
Meine Gruppen
|
||||
</CardTitle>
|
||||
{user.memberships.length === 0 ? (
|
||||
<p className="text-sm text-slate-600">
|
||||
Du bist in keiner Gruppe. Bitte einen Administrator, dich einer
|
||||
zuzuordnen — sonst kannst du keine Codes anlegen.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{user.memberships.map((membership) => (
|
||||
<li
|
||||
key={membership.groupId}
|
||||
className="flex flex-wrap items-center gap-2 rounded-lg border border-slate-200 p-3"
|
||||
>
|
||||
<span className="font-medium text-slate-900">
|
||||
{membership.groupName}
|
||||
</span>
|
||||
<Badge tone="neutral">{ROLE_LABELS[membership.role]}</Badge>
|
||||
<span className="w-full text-sm text-slate-500">
|
||||
{ROLE_DESCRIPTIONS[membership.role]}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{isAuthEnabled() ? (
|
||||
<>
|
||||
<ChangePasswordForm minLength={MIN_PASSWORD_LENGTH} />
|
||||
<SignOutCard />
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+32
-4
@@ -65,11 +65,21 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
|
||||
{isAuthEnabled() && actor.kind === "user" ? (
|
||||
<>
|
||||
<span
|
||||
className="ml-1 hidden max-w-[14rem] truncate text-slate-500 sm:inline"
|
||||
title={actor.user.email}
|
||||
aria-hidden="true"
|
||||
className="mx-1 hidden h-5 w-px bg-slate-200 sm:block"
|
||||
/>
|
||||
<Link
|
||||
href="/konto"
|
||||
title={`Konto von ${actor.user.email}`}
|
||||
className="flex max-w-[13rem] items-center gap-2 rounded-lg px-2.5 py-2 text-slate-700 transition-colors hover:bg-slate-100"
|
||||
>
|
||||
{actorLabel(actor)}
|
||||
</span>
|
||||
<span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-[0.7rem] font-semibold text-indigo-700 uppercase">
|
||||
{actorLabel(actor).slice(0, 2)}
|
||||
</span>
|
||||
<span className="hidden truncate sm:inline">
|
||||
{actorLabel(actor)}
|
||||
</span>
|
||||
</Link>
|
||||
<LogoutButton />
|
||||
</>
|
||||
) : null}
|
||||
@@ -79,6 +89,24 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
|
||||
Anmelden
|
||||
</Link>
|
||||
) : null}
|
||||
|
||||
{/* Ohne Anmeldung gibt es kein Konto. Das gehört sichtbar
|
||||
gesagt — sonst sucht man den Abmelden-Knopf vergeblich. */}
|
||||
{!isAuthEnabled() ? (
|
||||
<>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="mx-1 hidden h-5 w-px bg-slate-200 sm:block"
|
||||
/>
|
||||
<Link
|
||||
href="/konto"
|
||||
title="Die Anmeldung ist ausgeschaltet — hier steht, wie du sie einschaltest"
|
||||
className="rounded-lg px-3 py-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
|
||||
>
|
||||
Ohne Anmeldung
|
||||
</Link>
|
||||
</>
|
||||
) : null}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user