feat: Implement TOTP-based Two-Factor Authentication
- Add django-otp and qrcode dependencies - Create comprehensive 2FA views and templates in German - Add 2FA setup, verification, and management interfaces - Implement backup token system with 10 recovery codes - Add TwoFactorMiddleware for session enforcement - Integrate 2FA controls into user navigation menu - Support QR code generation for authenticator apps - Add forms for secure 2FA operations with validation - Configure OTP settings and admin site integration Features: - Optional 2FA (users can enable/disable) - TOTP compatible with Google Authenticator, Authy, etc. - Backup codes for emergency access - German language interface - Session-based 2FA enforcement - Password confirmation for sensitive operations - Production-ready with HTTPS support
This commit is contained in:
146
app/templates/stiftung/auth/backup_tokens_manage.html
Normal file
146
app/templates/stiftung/auth/backup_tokens_manage.html
Normal file
@@ -0,0 +1,146 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="mb-0">
|
||||
<i class="fas fa-key text-primary"></i>
|
||||
Backup-Codes verwalten
|
||||
</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if has_tokens %}
|
||||
<div class="alert alert-info">
|
||||
<h6><i class="fas fa-info-circle"></i> Backup-Codes Status</h6>
|
||||
<p class="mb-0">
|
||||
Sie haben derzeit <strong>{{ token_count }} Backup-Codes</strong> verfügbar.
|
||||
Aus Sicherheitsgründen werden die Codes nicht angezeigt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Neue Backup-Codes generieren</h5>
|
||||
<p class="text-muted">
|
||||
Wenn Sie neue Backup-Codes benötigen (z.B. weil Sie alle verbraucht haben
|
||||
oder sie verloren haben), können Sie neue generieren.
|
||||
</p>
|
||||
|
||||
<div class="alert alert-warning small">
|
||||
<strong>Warnung:</strong> Das Generieren neuer Codes macht alle
|
||||
bisherigen Backup-Codes ungültig.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h5>Passwort eingeben</h5>
|
||||
<p class="text-muted">
|
||||
Geben Sie Ihr Passwort ein, um neue Backup-Codes zu generieren:
|
||||
</p>
|
||||
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="regenerate" value="1">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Passwort</label>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-warning">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
Neue Backup-Codes generieren
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-warning">
|
||||
<h6><i class="fas fa-exclamation-triangle"></i> Keine Backup-Codes vorhanden</h6>
|
||||
<p class="mb-0">
|
||||
Sie haben derzeit keine Backup-Codes. Das kann passieren, wenn:
|
||||
</p>
|
||||
<ul class="mb-0 mt-2">
|
||||
<li>Sie alle Codes bereits verwendet haben</li>
|
||||
<li>Die Zwei-Faktor-Authentifizierung neu eingerichtet wurde</li>
|
||||
<li>Die Codes aus anderen Gründen gelöscht wurden</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Neue Backup-Codes generieren</h5>
|
||||
<p class="text-muted">
|
||||
Generieren Sie neue Backup-Codes, um sicherzustellen, dass Sie
|
||||
auch ohne Authenticator-App auf Ihr Konto zugreifen können.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h5>Passwort eingeben</h5>
|
||||
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="regenerate" value="1">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Passwort</label>
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i>
|
||||
Backup-Codes generieren
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<h6><i class="fas fa-lightbulb"></i> Über Backup-Codes:</h6>
|
||||
<ul class="mb-0 small">
|
||||
<li><strong>Zweck:</strong> Zugriff auf Ihr Konto, wenn die Authenticator-App nicht verfügbar ist</li>
|
||||
<li><strong>Anzahl:</strong> 10 Codes werden generiert</li>
|
||||
<li><strong>Verwendung:</strong> Jeder Code kann nur einmal verwendet werden</li>
|
||||
<li><strong>Format:</strong> 8 Zeichen (Buchstaben und Zahlen)</li>
|
||||
<li><strong>Sicherheit:</strong> Codes sollten sicher aufbewahrt werden</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-3">
|
||||
<a href="{% url 'stiftung:dashboard' %}" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
Zurück zum Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user