florian.wildeandClaude Opus 5.5
d1ba822a4a
Anmeldung, Einrichtung des zweiten Faktors fuer den Notfall-Admin, erneute Bestaetigung vor kritischen Aktionen und die Seite fuer fehlende Rechte. Die Huelle zeigt jetzt den echten Benutzer, und jede Seite prueft die Sitzung selbst; ein struktureller Test haelt das fest. Die Ablaeufe sind im gebauten Stand gegen den Mock-OIDC geprueft (pnpm test:e2e): Admin, Konto ohne Gruppe, Notfall-Admin mit TOTP. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import type { ComponentProps } from "react";
|
||
import { clsx } from "clsx";
|
||
|
||
/** Eingabefeld mit Beschriftung (#004). Mindesthoehe 44 px wie alle Klickflaechen. */
|
||
export function Feld({
|
||
beschriftung,
|
||
hinweis,
|
||
mono = false,
|
||
className,
|
||
id,
|
||
name,
|
||
...rest
|
||
}: ComponentProps<"input"> & { beschriftung: string; hinweis?: string; mono?: boolean }) {
|
||
const feldId = id ?? `feld-${name}`;
|
||
return (
|
||
<div className={clsx("flex flex-col gap-1.5", className)}>
|
||
<label htmlFor={feldId} className="text-muted text-[13px] font-medium">
|
||
{beschriftung}
|
||
</label>
|
||
<input
|
||
id={feldId}
|
||
name={name}
|
||
{...rest}
|
||
className={clsx(
|
||
"bg-bg border-border-strong text-text rounded-feld min-h-11 border px-3 text-[15px]",
|
||
"placeholder:text-muted/70 focus-visible:border-accent",
|
||
mono && "font-mono tracking-wide",
|
||
)}
|
||
/>
|
||
{hinweis && <p className="text-muted text-[12.5px]">{hinweis}</p>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Fehlermeldung eines Formulars – mit role=alert, damit Screenreader sie vorlesen. */
|
||
export function Formularfehler({ text }: { text?: string }) {
|
||
if (!text) return null;
|
||
return (
|
||
<p
|
||
role="alert"
|
||
className="border-danger-border bg-danger-soft text-danger rounded-box border px-3 py-2.5 text-[14px]"
|
||
>
|
||
{text}
|
||
</p>
|
||
);
|
||
}
|