Jan Remmer Siebels
ed6a02232e
- 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
124 lines
6.5 KiB
HTML
124 lines
6.5 KiB
HTML
{% 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-shield-alt text-success"></i>
|
|
Zwei-Faktor-Authentifizierung verwalten
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-success">
|
|
<h6><i class="fas fa-check-circle"></i> 2FA ist aktiviert</h6>
|
|
<p class="mb-0">
|
|
Ihr Konto ist mit Zwei-Faktor-Authentifizierung geschützt.
|
|
Sie benötigen bei jeder Anmeldung einen Code aus Ihrer Authenticator-App.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-key"></i>
|
|
Backup-Codes
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted small">
|
|
Backup-Codes ermöglichen den Zugriff auf Ihr Konto,
|
|
wenn Ihre Authenticator-App nicht verfügbar ist.
|
|
</p>
|
|
|
|
{% if backup_token_count > 0 %}
|
|
<p class="mb-2">
|
|
<strong>{{ backup_token_count }} Backup-Codes</strong> verfügbar
|
|
</p>
|
|
<div class="d-grid">
|
|
<a href="{% url 'stiftung:backup_tokens' %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-eye"></i>
|
|
Codes verwalten
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-warning small">
|
|
<strong>Keine Backup-Codes vorhanden!</strong><br>
|
|
Es wird empfohlen, Backup-Codes zu generieren.
|
|
</div>
|
|
<div class="d-grid">
|
|
<a href="{% url 'stiftung:backup_tokens' %}" class="btn btn-warning">
|
|
<i class="fas fa-plus"></i>
|
|
Backup-Codes generieren
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-cog"></i>
|
|
Einstellungen
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-muted small">
|
|
Verwalten Sie Ihre 2FA-Einstellungen oder
|
|
deaktivieren Sie die Zwei-Faktor-Authentifizierung.
|
|
</p>
|
|
|
|
<div class="d-grid gap-2">
|
|
<a href="{% url 'stiftung:two_factor_disable' %}" class="btn btn-outline-danger">
|
|
<i class="fas fa-times-circle"></i>
|
|
2FA deaktivieren
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<small class="text-muted">
|
|
<strong>Gerät eingerichtet:</strong><br>
|
|
Standard TOTP-Device
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="alert alert-info">
|
|
<h6><i class="fas fa-lightbulb"></i> Tipps für 2FA:</h6>
|
|
<ul class="mb-0 small">
|
|
<li><strong>Authenticator-Apps:</strong> Google Authenticator, Microsoft Authenticator, Authy</li>
|
|
<li><strong>Backup-Codes:</strong> Bewahren Sie diese sicher auf (z.B. Passwort-Manager)</li>
|
|
<li><strong>Sicherheit:</strong> 2FA schützt auch bei kompromittierten Passwörtern</li>
|
|
<li><strong>Neues Gerät:</strong> Bei Gerätewechsel 2FA deaktivieren und neu einrichten</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 %} |