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,169 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { api } from "../../api";
|
||||
import { useAuth } from "../../auth";
|
||||
import { useConfirm } from "../../confirm";
|
||||
import { useToast } from "../../toast";
|
||||
import Icon from "../../components/Icon";
|
||||
|
||||
/**
|
||||
* Backup zurückladen – zweistufig wie der CSV-Import: erst prüfen lassen, was
|
||||
* in der Datei steckt, dann bewusst bestätigen. Der Server schreibt beim Prüfen
|
||||
* nichts.
|
||||
*/
|
||||
export default function RestoreCard() {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const confirm = useConfirm();
|
||||
const navigate = useNavigate();
|
||||
const { logout } = useAuth();
|
||||
const dateiFeld = useRef(null);
|
||||
|
||||
const [datei, setDatei] = useState(null);
|
||||
const [vorschau, setVorschau] = useState(null);
|
||||
const [modus, setModus] = useState("replace");
|
||||
const [fehler, setFehler] = useState(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
function zuruecksetzen() {
|
||||
setDatei(null);
|
||||
setVorschau(null);
|
||||
setFehler(null);
|
||||
if (dateiFeld.current) dateiFeld.current.value = "";
|
||||
}
|
||||
|
||||
async function pruefen(f) {
|
||||
setDatei(f);
|
||||
setVorschau(null);
|
||||
setFehler(null);
|
||||
if (!f) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
setVorschau(await api.restorePreview(f));
|
||||
} catch (err) {
|
||||
setFehler(err.message);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function einspielen() {
|
||||
const systemweit = vorschau.scope === "system";
|
||||
if (modus === "replace") {
|
||||
const ok = await confirm({
|
||||
title: t("restore.confirmTitle"),
|
||||
message: systemweit ? t("restore.confirmSystem") : t("restore.confirmReplace"),
|
||||
confirmLabel: t("restore.start"),
|
||||
danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
}
|
||||
setBusy(true);
|
||||
setFehler(null);
|
||||
try {
|
||||
const res = await api.restoreBackup(datei, systemweit ? "replace" : modus);
|
||||
if (res.logout_required) {
|
||||
// Die eigene Sitzung wurde beim Ersetzen der Benutzertabelle mit
|
||||
// gelöscht – sauber abmelden statt in 401er zu laufen.
|
||||
toast(t("restore.doneSystem"));
|
||||
await logout();
|
||||
navigate("/login");
|
||||
return;
|
||||
}
|
||||
toast(t("restore.done"));
|
||||
zuruecksetzen();
|
||||
// Konten, Kategorien und Einstellungen sind komplett andere – neu laden
|
||||
// ist ehrlicher als jeden Zwischenspeicher einzeln zu erneuern.
|
||||
window.location.reload();
|
||||
} catch (err) {
|
||||
setFehler(err.message);
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card" style={{ maxWidth: 520, marginTop: "var(--sp-4)" }}>
|
||||
<h2 style={{ display: "flex", alignItems: "center", gap: "var(--sp-2)", marginTop: 0 }}>
|
||||
<Icon name="upload" size={18} /> {t("restore.title")}
|
||||
</h2>
|
||||
<p className="muted small">{t("restore.hint")}</p>
|
||||
|
||||
{fehler && (
|
||||
<div className="alert error" style={{ marginBottom: "var(--sp-3)" }}>
|
||||
<Icon name="alert" size={16} /><span>{fehler}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<label>
|
||||
<span>{t("restore.file")}</span>
|
||||
<input ref={dateiFeld} type="file" accept="application/json,.json"
|
||||
onChange={(e) => pruefen(e.target.files?.[0] || null)} />
|
||||
</label>
|
||||
|
||||
{busy && !vorschau && <p className="muted small">{t("common.loading")}</p>}
|
||||
|
||||
{vorschau && (
|
||||
<>
|
||||
<div className="alert" style={{ marginTop: "var(--sp-3)" }}>
|
||||
<Icon name="check" size={16} />
|
||||
<div>
|
||||
<div>
|
||||
{vorschau.scope === "system"
|
||||
? t("restore.scopeSystem", { n: vorschau.user_count })
|
||||
: t("restore.scopeUser", { name: vorschau.username || "?" })}
|
||||
</div>
|
||||
<div className="muted small" style={{ marginTop: 2 }}>
|
||||
{t("restore.exportedAt", { when: vorschau.exported_at || "?" })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table className="restore-summary">
|
||||
<tbody>
|
||||
{vorschau.tables.map((z) => (
|
||||
<tr key={z.key}>
|
||||
<td>{z.label}</td>
|
||||
<td>{z.count}</td>
|
||||
</tr>
|
||||
))}
|
||||
{vorschau.tables.length === 0 && (
|
||||
<tr><td colSpan={2} className="muted">{t("restore.empty")}</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{vorschau.notes.map((n) => (
|
||||
<div className="alert warn" key={n} style={{ marginTop: "var(--sp-3)" }}>
|
||||
<Icon name="alert" size={16} /><span>{n}</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{vorschau.scope === "user" && (
|
||||
<label style={{ marginTop: "var(--sp-3)" }}>
|
||||
<span>{t("restore.mode")}</span>
|
||||
<select value={modus} onChange={(e) => setModus(e.target.value)}>
|
||||
<option value="replace">{t("restore.modeReplace")}</option>
|
||||
<option value="merge">{t("restore.modeMerge")}</option>
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
<p className="muted small">
|
||||
{vorschau.scope === "system" || modus === "replace"
|
||||
? t("restore.modeReplaceHint")
|
||||
: t("restore.modeMergeHint")}
|
||||
</p>
|
||||
|
||||
<div className="btn-pair">
|
||||
<button className="btn danger-solid" disabled={busy} onClick={einspielen}>
|
||||
{busy ? t("common.loading") : t("restore.start")}
|
||||
</button>
|
||||
<button className="btn ghost" disabled={busy} onClick={zuruecksetzen}>
|
||||
{t("common.cancel")}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user