Hetzner-Backup/v2_adminpanel/templates/index.html

{% extends "base.html" %}

{% block title %}Admin Panel{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Neue Lizenz erstellen</h2>
        <div>
            <a href="/" class="btn btn-secondary">📊 Dashboard</a>
            <a href="/licenses" class="btn btn-secondary">📋 Lizenzen</a>
            <a href="/customers" class="btn btn-secondary">👥 Kunden</a>
            <a href="/sessions" class="btn btn-secondary">🟢 Sessions</a>
            <a href="/audit" class="btn btn-secondary">📋 Audit</a>
            <a href="/backups" class="btn btn-secondary">💾 Backups</a>
        </div>
    </div>

    <form method="post" action="/create" accept-charset="UTF-8">
        <div class="row g-3">
            <div class="col-md-6">
                <label for="customerName" class="form-label">Kundenname</label>
                <input type="text" class="form-control" id="customerName" name="customer_name" accept-charset="UTF-8" required>
            </div>
            <div class="col-md-6">
                <label for="email" class="form-label">E-Mail</label>
                <input type="email" class="form-control" id="email" name="email" accept-charset="UTF-8">
            </div>
            <div class="col-md-4">
                <label for="licenseKey" class="form-label">Lizenzschlüssel</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="licenseKey" name="license_key" 
                           placeholder="AF-YYYYMMFT-XXXX-YYYY-ZZZZ" required
                           pattern="AF-\d{6}[FT]-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}"
                           title="Format: AF-YYYYMMFT-XXXX-YYYY-ZZZZ">
                    <button type="button" class="btn btn-outline-primary" onclick="generateLicenseKey()">
                        🔑 Generieren
                    </button>
                </div>
                <div class="form-text">Format: AF-YYYYMMFT-XXXX-YYYY-ZZZZ (F=Full, T=Test)</div>
            </div>
            <div class="col-md-4">
                <label for="licenseType" class="form-label">Lizenztyp</label>
                <select class="form-select" id="licenseType" name="license_type" required>
                    <option value="full">Vollversion</option>
                    <option value="test">Testversion</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="validFrom" class="form-label">Kaufdatum</label>
                <input type="date" class="form-control" id="validFrom" name="valid_from" required>
            </div>
            <div class="col-md-2">
                <label for="validUntil" class="form-label">Ablaufdatum</label>
                <input type="date" class="form-control" id="validUntil" name="valid_until" required>
            </div>
        </div>

        <div class="mt-4">
            <button type="submit" class="btn btn-primary">➕ Lizenz erstellen</button>
        </div>
    </form>
</div>

<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
            {% for category, message in messages %}
                <div class="toast show align-items-center text-white bg-{{ 'danger' if category == 'error' else 'success' }} border-0" role="alert">
                    <div class="d-flex">
                        <div class="toast-body">
                            {{ message }}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endwith %}

<script>
// License Key Generator
function generateLicenseKey() {
    const licenseType = document.getElementById('licenseType').value;
    
    // Zeige Ladeindikator
    const button = event.target;
    const originalText = button.innerHTML;
    button.disabled = true;
    button.innerHTML = '⏳ Generiere...';
    
    // API-Call
    fetch('/api/generate-license-key', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({type: licenseType})
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('licenseKey').value = data.key;
            // Visuelles Feedback
            document.getElementById('licenseKey').classList.add('border-success');
            setTimeout(() => {
                document.getElementById('licenseKey').classList.remove('border-success');
            }, 2000);
        } else {
            alert('Fehler bei der Key-Generierung: ' + (data.error || 'Unbekannter Fehler'));
        }
    })
    .catch(error => {
        console.error('Fehler:', error);
        alert('Netzwerkfehler bei der Key-Generierung');
    })
    .finally(() => {
        // Button zurücksetzen
        button.disabled = false;
        button.innerHTML = originalText;
    });
}

// Event Listener für Lizenztyp-Änderung
document.getElementById('licenseType').addEventListener('change', function() {
    const keyField = document.getElementById('licenseKey');
    if (keyField.value && keyField.value.startsWith('AF-')) {
        // Prüfe ob der Key zum neuen Typ passt
        const currentType = this.value;
        const keyType = keyField.value.charAt(9); // Position des F/T im Key
        
        if ((currentType === 'full' && keyType === 'T') || 
            (currentType === 'test' && keyType === 'F')) {
            if (confirm('Der aktuelle Key passt nicht zum gewählten Lizenztyp. Neuen Key generieren?')) {
                generateLicenseKey();
            }
        }
    }
});

// Auto-Uppercase für License Key Input
document.getElementById('licenseKey').addEventListener('input', function(e) {
    e.target.value = e.target.value.toUpperCase();
});

// Setze heutiges Datum als Standard für valid_from
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('validFrom').value = today;
    
    // Setze valid_until auf 1 Jahr später als Standard
    const oneYearLater = new Date();
    oneYearLater.setFullYear(oneYearLater.getFullYear() + 1);
    document.getElementById('validUntil').value = oneYearLater.toISOString().split('T')[0];
});
</script>
{% endblock %}