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
89 lines
3.7 KiB
HTML
89 lines
3.7 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-6 col-lg-4">
|
|
<div class="card shadow">
|
|
<div class="card-header text-center">
|
|
<h4 class="mb-0">
|
|
<i class="fas fa-shield-alt text-primary"></i>
|
|
Zwei-Faktor-Authentifizierung
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="text-center text-muted mb-4">
|
|
Geben Sie den 6-stelligen Code aus Ihrer Authenticator-App ein
|
|
oder verwenden Sie einen Backup-Code.
|
|
</p>
|
|
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
{% if next %}
|
|
<input type="hidden" name="next" value="{{ next }}">
|
|
{% endif %}
|
|
|
|
<div class="mb-4">
|
|
<label for="otp_token" class="form-label">Authentifizierungscode</label>
|
|
<input type="text"
|
|
class="form-control form-control-lg text-center"
|
|
id="otp_token"
|
|
name="otp_token"
|
|
placeholder="000000"
|
|
maxlength="8"
|
|
required
|
|
autocomplete="off"
|
|
autofocus>
|
|
<div class="form-text text-center">
|
|
6-stelliger Code aus der App oder 8-stelliger Backup-Code
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-sign-in-alt"></i>
|
|
Bestätigen
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="text-center mt-4">
|
|
<details>
|
|
<summary class="text-muted small">Probleme beim Anmelden?</summary>
|
|
<div class="mt-2 small text-muted">
|
|
<p>Falls Sie keinen Zugriff auf Ihre Authenticator-App haben:</p>
|
|
<ul class="text-start">
|
|
<li>Verwenden Sie einen der 8-stelligen Backup-Codes</li>
|
|
<li>Kontaktieren Sie den Administrator</li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tokenInput = document.getElementById('otp_token');
|
|
if (tokenInput) {
|
|
// Auto-submit when 6 digits entered (TOTP) or 8 characters (backup code)
|
|
tokenInput.addEventListener('input', function() {
|
|
const value = this.value.trim();
|
|
if ((value.length === 6 && /^\d{6}$/.test(value)) ||
|
|
(value.length === 8 && /^[a-f0-9]{8}$/i.test(value))) {
|
|
// Small delay to allow user to see complete input
|
|
setTimeout(() => {
|
|
this.closest('form').submit();
|
|
}, 300);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |