Dateien
Hetzner-Backup/v2_adminpanel/templates/index.html
2025-06-07 23:46:27 +02:00

245 Zeilen
9.8 KiB
HTML
Originalformat Blame Verlauf

Diese Datei enthält mehrdeutige Unicode-Zeichen
Diese Datei enthält Unicode-Zeichen, die mit anderen Zeichen verwechselt werden können. Wenn du glaubst, dass das absichtlich so ist, kannst du diese Warnung ignorieren. Benutze den „Escape“-Button, um versteckte Zeichen anzuzeigen.
{% 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="/batch" class="btn btn-primary">🔑 Batch</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-12">
<label for="customerSelect" class="form-label">Kunde auswählen</label>
<select class="form-select" id="customerSelect" name="customer_id" required>
<option value="">🔍 Kunde suchen oder neuen Kunden anlegen...</option>
<option value="new"> Neuer Kunde</option>
</select>
</div>
<div class="col-md-6" id="customerNameDiv" style="display: none;">
<label for="customerName" class="form-label">Kundenname</label>
<input type="text" class="form-control" id="customerName" name="customer_name" accept-charset="UTF-8">
</div>
<div class="col-md-6" id="emailDiv" style="display: none;">
<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];
// Initialisiere Select2 für Kundenauswahl
$('#customerSelect').select2({
theme: 'bootstrap-5',
placeholder: '🔍 Kunde suchen oder neuen Kunden anlegen...',
allowClear: true,
ajax: {
url: '/api/customers',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page || 1
};
},
processResults: function (data, params) {
params.page = params.page || 1;
// "Neuer Kunde" Option immer oben anzeigen
const results = data.results || [];
if (params.page === 1) {
results.unshift({
id: 'new',
text: ' Neuer Kunde',
isNew: true
});
}
return {
results: results,
pagination: data.pagination
};
},
cache: true
},
minimumInputLength: 0,
language: {
inputTooShort: function() { return ''; },
noResults: function() { return 'Keine Kunden gefunden'; },
searching: function() { return 'Suche...'; },
loadingMore: function() { return 'Lade weitere Ergebnisse...'; }
}
});
// Event Handler für Kundenauswahl
$('#customerSelect').on('select2:select', function (e) {
const selectedValue = e.params.data.id;
const nameDiv = document.getElementById('customerNameDiv');
const emailDiv = document.getElementById('emailDiv');
const nameInput = document.getElementById('customerName');
const emailInput = document.getElementById('email');
if (selectedValue === 'new') {
// Zeige Eingabefelder für neuen Kunden
nameDiv.style.display = 'block';
emailDiv.style.display = 'block';
nameInput.required = true;
emailInput.required = true;
} else {
// Verstecke Eingabefelder bei bestehendem Kunden
nameDiv.style.display = 'none';
emailDiv.style.display = 'none';
nameInput.required = false;
emailInput.required = false;
nameInput.value = '';
emailInput.value = '';
}
});
// Clear handler
$('#customerSelect').on('select2:clear', function (e) {
document.getElementById('customerNameDiv').style.display = 'none';
document.getElementById('emailDiv').style.display = 'none';
document.getElementById('customerName').required = false;
document.getElementById('email').required = false;
});
});
</script>
{% endblock %}