customer-portal/customer_portal/web/templates/admin/settings_otp.html

{% extends "admin/base.html" %}
{% block title %}OTP & Sicherheit{% endblock %}

{% block content %}
<div class="mb-4">
    <h1><i class="bi bi-shield-lock me-2"></i>OTP & Sicherheit</h1>
    <p class="text-muted">Einstellungen fuer Einmalpasswoerter und Authentifizierung</p>
</div>

<div class="row">
    <div class="col-lg-8">
        <form method="POST" action="{{ url_for('admin.settings_otp') }}">
            <!-- OTP Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <i class="bi bi-key me-2"></i>
                    Einmalpasswort (OTP)
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="otp_expiry_minutes" class="form-label">Gueltigkeit (Minuten)</label>
                            <input type="number" class="form-control" id="otp_expiry_minutes" name="otp_expiry_minutes"
                                   value="{{ config.otp_expiry_minutes }}" min="1" max="60">
                            <div class="form-text">Wie lange ist ein OTP-Code gueltig?</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="otp_length" class="form-label">Code-Laenge (Ziffern)</label>
                            <input type="number" class="form-control" id="otp_length" name="otp_length"
                                   value="{{ config.otp_length }}" min="4" max="8">
                            <div class="form-text">Anzahl der Ziffern im Code</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="otp_max_attempts" class="form-label">Max. Fehlversuche</label>
                            <input type="number" class="form-control" id="otp_max_attempts" name="otp_max_attempts"
                                   value="{{ config.otp_max_attempts }}" min="1" max="10">
                            <div class="form-text">Bevor Code ungueltig wird</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Prefill Token Settings -->
            <div class="card mb-4">
                <div class="card-header">
                    <i class="bi bi-link-45deg me-2"></i>
                    Prefill-Token (WordPress-Integration)
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="prefill_token_expiry" class="form-label">Token-Gueltigkeit (Sekunden)</label>
                            <input type="number" class="form-control" id="prefill_token_expiry" name="prefill_token_expiry"
                                   value="{{ config.prefill_token_expiry }}" min="60" max="3600">
                            <div class="form-text">
                                Standard: 300 (5 Minuten). Maximaler Wert: 3600 (1 Stunde)
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-info mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        Prefill-Tokens werden von WordPress generiert, um Kundendaten automatisch
                        im Login-Formular vorzufuellen.
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-danger">
                <i class="bi bi-check-lg me-1"></i>
                Speichern
            </button>
        </form>
    </div>

    <div class="col-lg-4">
        <!-- Info Card -->
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-lightbulb me-2"></i>
                Empfehlungen
            </div>
            <div class="card-body small">
                <p class="mb-2"><strong>OTP-Gueltigkeit:</strong></p>
                <p class="text-muted mb-3">
                    10 Minuten sind ein guter Kompromiss zwischen Sicherheit und Benutzerfreundlichkeit.
                </p>

                <p class="mb-2"><strong>Code-Laenge:</strong></p>
                <p class="text-muted mb-3">
                    6 Ziffern bieten ausreichende Sicherheit (1 Million Kombinationen).
                </p>

                <p class="mb-2"><strong>Fehlversuche:</strong></p>
                <p class="text-muted mb-0">
                    3 Versuche schuetzen vor Brute-Force-Angriffen, ohne legitime Nutzer zu sehr einzuschraenken.
                </p>
            </div>
        </div>

        <!-- Current Values -->
        <div class="card">
            <div class="card-header">
                <i class="bi bi-gear me-2"></i>
                Aktuelle Werte
            </div>
            <div class="card-body">
                <table class="table table-dark table-sm mb-0">
                    <tr>
                        <td class="text-muted">OTP gueltig</td>
                        <td class="text-end">{{ config.otp_expiry_minutes }} Min.</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Code-Laenge</td>
                        <td class="text-end">{{ config.otp_length }} Ziffern</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Max. Versuche</td>
                        <td class="text-end">{{ config.otp_max_attempts }}</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Token-Gueltigkeit</td>
                        <td class="text-end">{{ config.prefill_token_expiry }} Sek.</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}