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
129 lines
6.2 KiB
HTML
129 lines
6.2 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-primary"></i>
|
|
Zwei-Faktor-Authentifizierung einrichten
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Schritt 1: Authenticator App installieren</h5>
|
|
<p class="text-muted">
|
|
Installieren Sie eine Authenticator-App auf Ihrem Smartphone:
|
|
</p>
|
|
<ul class="mb-4">
|
|
<li><strong>Google Authenticator</strong> (iOS/Android)</li>
|
|
<li><strong>Microsoft Authenticator</strong> (iOS/Android)</li>
|
|
<li><strong>Authy</strong> (iOS/Android/Desktop)</li>
|
|
<li><strong>1Password</strong> (Premium)</li>
|
|
</ul>
|
|
|
|
<h5>Schritt 2: QR-Code scannen</h5>
|
|
<p class="text-muted">
|
|
Scannen Sie den QR-Code mit Ihrer Authenticator-App:
|
|
</p>
|
|
<div class="text-center mb-4">
|
|
<img src="{% url 'stiftung:two_factor_qr' %}"
|
|
alt="QR Code für 2FA Setup"
|
|
class="img-fluid border rounded"
|
|
style="max-width: 200px;">
|
|
</div>
|
|
|
|
<details class="mb-4">
|
|
<summary class="text-muted small">Manueller Setup-Code anzeigen</summary>
|
|
<div class="mt-2 p-2 bg-light rounded">
|
|
<small class="font-monospace">{{ device.key }}</small>
|
|
</div>
|
|
<small class="text-muted d-block mt-1">
|
|
Falls der QR-Code nicht funktioniert, können Sie diesen Code manuell eingeben.
|
|
</small>
|
|
</details>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h5>Schritt 3: Bestätigen</h5>
|
|
<p class="text-muted">
|
|
Geben Sie den 6-stelligen Code aus Ihrer Authenticator-App ein:
|
|
</p>
|
|
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<div class="mb-3">
|
|
<label for="token" class="form-label">Bestätigungscode</label>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="token"
|
|
name="token"
|
|
placeholder="000000"
|
|
maxlength="6"
|
|
pattern="[0-9]{6}"
|
|
required
|
|
autocomplete="off">
|
|
<div class="form-text">
|
|
Der Code wechselt alle 30 Sekunden.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-check"></i>
|
|
Zwei-Faktor-Authentifizierung aktivieren
|
|
</button>
|
|
<a href="{% url 'stiftung:dashboard' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-times"></i>
|
|
Abbrechen
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="alert alert-info">
|
|
<h6><i class="fas fa-info-circle"></i> Wichtige Hinweise:</h6>
|
|
<ul class="mb-0 small">
|
|
<li>Nach der Aktivierung erhalten Sie Backup-Codes für den Notfall</li>
|
|
<li>Bewahren Sie diese Backup-Codes sicher auf</li>
|
|
<li>Sie benötigen bei jeder Anmeldung einen Code aus der App</li>
|
|
<li>Die Zwei-Faktor-Authentifizierung erhöht die Sicherheit Ihres Kontos erheblich</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Auto-focus on token input
|
|
const tokenInput = document.getElementById('token');
|
|
if (tokenInput) {
|
|
tokenInput.focus();
|
|
|
|
// Auto-submit when 6 digits entered
|
|
tokenInput.addEventListener('input', function() {
|
|
if (this.value.length === 6 && /^\d{6}$/.test(this.value)) {
|
|
// Small delay to allow user to see complete input
|
|
setTimeout(() => {
|
|
this.closest('form').submit();
|
|
}, 300);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |