feat: 2FA, Passwortrichtlinie und wiederherstellbares JSON-Backup
Zwei-Faktor per TOTP mit zehn Einmal-Wiederherstellungscodes. Der Zwischenzustand "Passwort stimmt, Code fehlt" haengt an der vorhandenen Sitzungstabelle (pending_2fa, zehn Minuten Laufzeit) und gilt nirgends als angemeldet; nach dem Code wird das Cookie getauscht statt weiterverwendet. Der Wiederverwendungsschutz merkt sich das tatsaechlich getroffene Zeitfenster, nicht die aktuelle Uhrzeit - sonst liesse sich ein Code aus dem naechsten Fenster gleich darauf nochmal einloesen. Passwortrichtlinie (Laenge, Zeichenklassen, MFA-Pflicht) in der neuen globalen Tabelle app_settings, durchgesetzt beim Anlegen, Zuruecksetzen und Aendern von Passwoertern. Bestehende Passwoerter lassen sich nicht gegen eine neue Richtlinie pruefen - der Hash gibt nichts her. Beim Anmelden liegt das Passwort aber kurz im Klartext vor: dort wird geprueft und bei Verstoss ein Wechsel verlangt, mit passendem Grund fuer den Hinweistext. Nebenbei geschlossen: must_change_password war bisher nur im Frontend erzwungen, wer die API direkt ansprach kam vorbei. enforce_account_state haengt jetzt am /api-Sammelrouter und laesst nur noch durch, was man zum Erfuellen der Pflicht braucht. Das JSON-Backup liess sich bisher grundsaetzlich nicht zurueckladen: keine Version, Kategorien nur ueber mehrdeutige Namen, sieben Tabellen fehlten. Daneben steht nun ein Format v2, das Beziehungen ueber lokale IDs abbildet, je Benutzer oder systemweit. Zurueckgeladen wird nach einer Pruefansicht, wahlweise ersetzend oder ergaenzend; vor dem Ersetzen legt der Server einen Schnappschuss der Datenbank an. Der alte Ansichts-Export bleibt fuer Tabellenkalkulationen bestehen und wird beim Hochladen ausdruecklich abgewiesen, statt halb zu raten. Frontend: wiederverwendbares Passwortfeld mit Augensymbol, animierte Anforderungsliste, 2FA-Seite, Admin-Karte fuer die Richtlinie und Karte zum Zurueckladen. Neue Bewegung ist in prefers-reduced-motion hinterlegt; Secret und Codes sind markierbar, sonst verhinderte das globale user-select das Kopieren. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
co-authored by
Claude Opus 5
Claude Opus 5
parent
1d5b23c127
commit
7fc8763d57
@@ -0,0 +1,245 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Navigate, useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAuth } from "../auth";
|
||||
import { api } from "../api";
|
||||
import { useToast } from "../toast";
|
||||
import { useConfirm } from "../confirm";
|
||||
import Icon from "../components/Icon";
|
||||
import PasswordInput from "../components/PasswordInput";
|
||||
|
||||
/** Codeliste als Textdatei sichern – Zwischenablage ist nicht überall erlaubt. */
|
||||
function codesSichern(codes, benutzer) {
|
||||
const inhalt =
|
||||
`Certain Finance – Wiederherstellungscodes für ${benutzer}\n` +
|
||||
`Jeder Code funktioniert genau einmal. Sicher aufbewahren.\n\n` +
|
||||
codes.join("\n") + "\n";
|
||||
const url = URL.createObjectURL(new Blob([inhalt], { type: "text/plain;charset=utf-8" }));
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `certain-finance-wiederherstellungscodes_${benutzer}.txt`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/** Anzeige der frisch erzeugten Codes – sie sind danach nicht mehr abrufbar. */
|
||||
function CodeListe({ codes, benutzer, onFertig }) {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
|
||||
async function kopieren() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(codes.join("\n"));
|
||||
toast(t("twofactor.copied"));
|
||||
} catch {
|
||||
// Ohne sicheren Kontext (http) gibt es keine Zwischenablage – dann
|
||||
// bleibt der Download, und markieren geht ohnehin.
|
||||
codesSichern(codes, benutzer);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card" style={{ maxWidth: 520, marginTop: "var(--sp-4)", borderColor: "var(--warn)" }}>
|
||||
<h2 style={{ marginTop: 0 }}>{t("twofactor.codesTitle")}</h2>
|
||||
<p className="muted small">{t("twofactor.codesHint")}</p>
|
||||
<div className="tfa-codes selectable">
|
||||
{codes.map((c) => <span key={c}>{c}</span>)}
|
||||
</div>
|
||||
<div className="btn-pair">
|
||||
<button className="btn" onClick={kopieren}>
|
||||
<Icon name="copy" size={15} /> {t("twofactor.copy")}
|
||||
</button>
|
||||
<button className="btn" onClick={() => codesSichern(codes, benutzer)}>
|
||||
<Icon name="download" size={15} /> {t("twofactor.download")}
|
||||
</button>
|
||||
<button className="btn primary" onClick={onFertig}>{t("twofactor.codesSaved")}</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TwoFactor() {
|
||||
const { user, aktualisieren } = useAuth();
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const confirm = useConfirm();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [status, setStatus] = useState(null);
|
||||
const [policy, setPolicy] = useState(null);
|
||||
const [setup, setSetup] = useState(null); // { secret, otpauth_uri, qr_png }
|
||||
const [code, setCode] = useState("");
|
||||
const [codes, setCodes] = useState(null); // frisch erzeugte Wiederherstellungscodes
|
||||
const [fehler, setFehler] = useState(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function laden() {
|
||||
try {
|
||||
const [s, p] = await Promise.all([api.twoFactorStatus(), api.getPolicy()]);
|
||||
setStatus(s);
|
||||
setPolicy(p);
|
||||
} catch (err) {
|
||||
setFehler(err.message);
|
||||
}
|
||||
}
|
||||
useEffect(() => { laden(); }, []);
|
||||
|
||||
if (!user) return <Navigate to="/login" replace />;
|
||||
// Erst Passwort wechseln, dann zweiter Faktor – dieselbe Reihenfolge, die
|
||||
// der Server erzwingt.
|
||||
if (user.must_change_password) return <Navigate to="/passwort-aendern" replace />;
|
||||
|
||||
const pflicht = Boolean(policy?.mfa_required);
|
||||
const erzwungen = pflicht && !status?.enabled;
|
||||
|
||||
async function starten() {
|
||||
setFehler(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
setSetup(await api.twoFactorSetup());
|
||||
} catch (err) {
|
||||
setFehler(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function aktivieren(e) {
|
||||
e.preventDefault();
|
||||
setFehler(null);
|
||||
setBusy(true);
|
||||
try {
|
||||
const res = await api.twoFactorActivate(code.trim());
|
||||
setCodes(res.codes);
|
||||
setSetup(null);
|
||||
setCode("");
|
||||
// Die Sperre „MFA einrichten" fällt damit weg – Benutzer neu laden.
|
||||
aktualisieren(await api.me());
|
||||
await laden();
|
||||
} catch (err) {
|
||||
setFehler(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function abschalten() {
|
||||
const passwort = await confirm({
|
||||
title: t("twofactor.disableTitle"),
|
||||
message: t("twofactor.disableHint"),
|
||||
confirmLabel: t("twofactor.disable"),
|
||||
danger: true,
|
||||
prompt: true,
|
||||
inputType: "password",
|
||||
});
|
||||
if (!passwort) return;
|
||||
try {
|
||||
aktualisieren(await api.twoFactorDisable(passwort));
|
||||
toast(t("twofactor.disabled"));
|
||||
await laden();
|
||||
} catch (err) {
|
||||
setFehler(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function codesErneuern() {
|
||||
const passwort = await confirm({
|
||||
title: t("twofactor.newCodesTitle"),
|
||||
message: t("twofactor.newCodesHint"),
|
||||
confirmLabel: t("twofactor.newCodes"),
|
||||
prompt: true,
|
||||
inputType: "password",
|
||||
});
|
||||
if (!passwort) return;
|
||||
try {
|
||||
const res = await api.newRecoveryCodes(passwort);
|
||||
setCodes(res.codes);
|
||||
await laden();
|
||||
} catch (err) {
|
||||
setFehler(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>{t("twofactor.title")}</h1>
|
||||
|
||||
{fehler && (
|
||||
<div className="alert error" style={{ maxWidth: 520, marginBottom: "var(--sp-4)" }}>
|
||||
<Icon name="alert" size={16} />
|
||||
<span>{fehler}</span>
|
||||
</div>
|
||||
)}
|
||||
{erzwungen && (
|
||||
<div className="alert warn" style={{ maxWidth: 520, marginBottom: "var(--sp-4)" }}>
|
||||
<Icon name="shield" size={16} />
|
||||
<span>{t("twofactor.requiredHint")}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card" style={{ maxWidth: 520 }}>
|
||||
<h2 style={{ marginTop: 0, display: "flex", alignItems: "center", gap: "var(--sp-2)" }}>
|
||||
<Icon name="shield" size={18} />
|
||||
{status?.enabled ? t("twofactor.on") : t("twofactor.off")}
|
||||
</h2>
|
||||
<p className="muted small">{t("twofactor.intro")}</p>
|
||||
|
||||
{status?.enabled ? (
|
||||
<>
|
||||
<p className="small">
|
||||
{t("twofactor.codesLeft", { n: status.recovery_codes_left })}
|
||||
</p>
|
||||
<div className="btn-pair">
|
||||
<button className="btn" onClick={codesErneuern}>
|
||||
<Icon name="refresh-ccw" size={15} /> {t("twofactor.newCodes")}
|
||||
</button>
|
||||
{!pflicht && (
|
||||
<button className="btn danger" onClick={abschalten}>
|
||||
{t("twofactor.disable")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : setup ? (
|
||||
<form onSubmit={aktivieren}>
|
||||
<p className="small">{t("twofactor.scan")}</p>
|
||||
<img className="tfa-qr" src={setup.qr_png} alt={t("twofactor.qrAlt")} />
|
||||
<p className="muted small" style={{ marginTop: "var(--sp-3)" }}>
|
||||
{t("twofactor.manual")}
|
||||
</p>
|
||||
<code className="tfa-secret selectable">{setup.secret}</code>
|
||||
|
||||
<label className="field" style={{ marginTop: "var(--sp-4)" }}>
|
||||
<span>{t("twofactor.code")}</span>
|
||||
<input value={code} onChange={(e) => setCode(e.target.value)} required
|
||||
inputMode="numeric" maxLength={6} autoComplete="one-time-code"
|
||||
placeholder="123456" />
|
||||
</label>
|
||||
<div className="btn-pair" style={{ marginTop: "var(--sp-3)" }}>
|
||||
<button className="btn primary" type="submit" disabled={busy}>
|
||||
{busy ? t("common.loading") : t("twofactor.activate")}
|
||||
</button>
|
||||
<button className="btn ghost" type="button" onClick={() => { setSetup(null); setCode(""); }}>
|
||||
{t("common.cancel")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
) : (
|
||||
<button className="btn primary" onClick={starten} disabled={busy}>
|
||||
<Icon name="smartphone" size={15} /> {t("twofactor.start")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{codes && (
|
||||
<CodeListe
|
||||
codes={codes}
|
||||
benutzer={user.username}
|
||||
onFertig={() => { setCodes(null); if (erzwungen) navigate("/"); }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user