ethiele/signage
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Info Tab und MFA

Browse Source
This commit is contained in:
Erik Thiele
2026-06-28 15:14:06 +02:00
parent 1243910d4b
commit 297b52e50c
15 changed files with 5203 additions and 6363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
templates/mfa_setup.html Normal file
View File

@@ -0,0 +1,101 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>MFA einrichten – CANCOM Signage</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script>
(() => {
const stored = window.localStorage.getItem("signage-theme");
const theme = stored === "dark" || stored === "light" ? stored : "light";
document.documentElement.setAttribute("data-bs-theme", theme);
})();
</script>
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<script defer src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
{% include '_styles.html' %}
</head>
<body>
{% include '_header.html' %}
<div class="page-wrapper">
<div class="page-body" style="min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;">
<div class="container-xl">
<div class="row justify-content-center">
<div class="col-lg-8 col-xl-6">
{% if recovered %}
<div class="alert alert-warning">
<strong>Hinweis:</strong> Du hast einen Recovery-Code verwendet. Bitte richte MFA neu ein.
</div>
{% endif %}
{% if disabled %}
<div class="alert alert-info">MFA wurde deaktiviert.</div>
{% endif %}
<div class="card">
<div class="card-body text-center py-5">
{% if current_user.mfa_enabled %}
<h2 class="mb-2">✅ MFA ist aktiv</h2>
<p class="text-muted mb-4">Dein Konto ist durch Zwei-Faktor-Authentifizierung geschützt.</p>
<p class="text-muted small mb-2">Möchtest du MFA deaktivieren? Gib dein Passwort ein:</p>
<form method="post" action="/mfa/disable" class="row justify-content-center">
<div class="col-auto">
<div class="input-group">
<input type="password" name="password" class="form-control" placeholder="Passwort" required>
<button class="btn btn-danger" type="submit">Deaktivieren</button>
</div>
</div>
</form>
{% else %}
<h2 class="mb-2">MFA einrichten</h2>
<p class="text-muted mb-4">Scanne den QR-Code mit deiner Authenticator-App (z. B. Google Authenticator, Authy).</p>
{% if error %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endif %}
{% if qr_data %}
<div class="mb-4">
<img src="data:image/png;base64,{{ qr_data }}" alt="QR-Code"
style="width:220px;height:220px;border:1px solid #ddd;border-radius:8px;">
</div>
<p class="text-muted small">Alternativ: Secret manuell eingeben</p>
<div class="mb-4">
<kbd style="font-size:1.1rem;padding:6px 14px;border-radius:6px;user-select:all;">{{ secret }}</kbd>
</div>
<hr class="my-4" style="max-width:300px;margin-left:auto;margin-right:auto;">
<h4>Code verifizieren</h4>
<p class="text-muted small mb-3">Gib den 6-stelligen Code aus der App ein, um MFA zu aktivieren.</p>
<form method="post" class="row justify-content-center">
<div class="col-auto">
<div class="d-flex gap-2">
<input type="text" name="code" class="form-control form-control-lg text-center"
placeholder="000000" inputmode="numeric" maxlength="6"
pattern="[0-9]{6}" required autofocus style="max-width:160px;">
<button class="btn btn-success" type="submit">Aktivieren</button>
</div>
</div>
</form>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{% include '_footer.html' %}
</div>
</body>
</html>