184 lines
8.4 KiB
HTML
184 lines
8.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<h2>Switch Verwaltung</h2>
|
|
|
|
<!-- Button zum Hinzufügen -->
|
|
<button class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#addSwitchModal">Neuen Switch hinzufügen</button>
|
|
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Hostname</th>
|
|
<th>IP-Adresse</th>
|
|
<th>Username</th>
|
|
<th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for s in switches %}
|
|
<tr>
|
|
<td>{{ s['hostname'] }}</td>
|
|
<td>{{ s['ip'] }}</td>
|
|
<td>{{ s['username'] }}</td>
|
|
<td>
|
|
<!-- Bearbeiten -->
|
|
<button class="btn btn-sm button login white" data-bs-toggle="modal" data-bs-target="#editSwitchModal{{ loop.index }}">Bearbeiten</button>
|
|
|
|
<!-- Löschen -->
|
|
<form method="post" action="{{ url_for('delete_switch', hostname=s['hostname']) }}" style="display:inline;">
|
|
<button class="btn btn-danger btn-sm" onclick="return confirm('Willst du den Switch wirklich löschen?');">
|
|
Löschen
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Bearbeiten Modal -->
|
|
<div class="modal fade" id="editSwitchModal{{ loop.index }}" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title text-dark">Switch bearbeiten</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form method="post" onsubmit="return validateSwitchForm(this, '{{ loop.index }}')">
|
|
<div class="modal-body">
|
|
<input type="hidden" name="edit_switch" value="1">
|
|
<input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
|
|
<div class="mb-3">
|
|
<label class="form-label">Hostname</label>
|
|
<input type="text" name="hostname" class="form-control" value="{{ s['hostname'] }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">IP-Adresse</label>
|
|
<input type="text" name="ip" class="form-control" value="{{ s['ip'] }}" required placeholder="z.B. 192.168.1.100">
|
|
<div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Username</label>
|
|
<input type="text" name="username" class="form-control" value="{{ s['username'] }}" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Neues Passwort</label>
|
|
<input type="password" id="password_edit_{{ loop.index }}" name="password" class="form-control" placeholder="Neues Passwort (optional)">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Passwort bestätigen</label>
|
|
<input type="password" id="password_confirm_edit_{{ loop.index }}" name="password_confirm" class="form-control" placeholder="Bestätigen">
|
|
<div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
|
<button class="btn button login white" type="submit">Speichern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Hinzufügen Modal -->
|
|
<div class="modal fade" id="addSwitchModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title text-dark">Neuen Switch hinzufügen</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form method="post" onsubmit="return validateSwitchForm(this, 'add')">
|
|
<div class="modal-body">
|
|
<input type="hidden" name="add_switch" value="1">
|
|
<div class="mb-3">
|
|
<label class="form-label">Hostname</label>
|
|
<input type="text" name="hostname" class="form-control" required placeholder="z.B. Switch01">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">IP-Adresse</label>
|
|
<input type="text" name="ip" class="form-control" required placeholder="z.B. 192.168.1.100">
|
|
<div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben (z. B. 192.168.1.100).</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Username</label>
|
|
<input type="text" name="username" class="form-control" required placeholder="z.B. admin">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Passwort</label>
|
|
<input type="password" id="password_add" name="password" class="form-control" required placeholder="z.B. geheim123">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Passwort bestätigen</label>
|
|
<input type="password" id="password_confirm_add" name="password_confirm" class="form-control" required placeholder="Passwort wiederholen">
|
|
<div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
|
<button class="btn button login white" type="submit">Hinzufügen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JS: Passwort + IP-Validierung -->
|
|
<script>
|
|
// Passwortcheck
|
|
function validatePassword(id, isEdit) {
|
|
let pass = document.getElementById(isEdit ? `password_edit_${id}` : `password_${id}`) || document.getElementById('password_add');
|
|
let confirm = document.getElementById(isEdit ? `password_confirm_edit_${id}` : `password_confirm_${id}`) || document.getElementById('password_confirm_add');
|
|
|
|
if (!pass || !confirm) return true;
|
|
if (pass.value !== confirm.value) {
|
|
confirm.classList.add("is-invalid");
|
|
return false;
|
|
} else {
|
|
confirm.classList.remove("is-invalid");
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// -------------------
|
|
// IP-Validierung
|
|
// -------------------
|
|
const ipPattern = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
|
|
|
|
function validateIP(input) {
|
|
if (!ipPattern.test(input.value)) {
|
|
input.classList.add("is-invalid");
|
|
return false;
|
|
} else {
|
|
input.classList.remove("is-invalid");
|
|
return true;
|
|
}
|
|
}
|
|
|
|
function validateSwitchForm(form, id) {
|
|
const ipInput = form.querySelector("input[name='ip']");
|
|
let valid = true;
|
|
if (ipInput) valid = validateIP(ipInput) && valid;
|
|
|
|
// Passwortcheck
|
|
valid = validatePassword(id, id !== 'add') && valid;
|
|
|
|
return valid;
|
|
}
|
|
|
|
// Live-Feedback IP & Passwort
|
|
document.addEventListener('input', e => {
|
|
if (e.target.name === "ip") validateIP(e.target);
|
|
if (e.target.id.startsWith('password_confirm')) {
|
|
const id = e.target.id.replace('password_confirm_', '');
|
|
const pass = document.getElementById('password_' + id);
|
|
if (pass && pass.value !== e.target.value) {
|
|
e.target.classList.add('is-invalid');
|
|
} else {
|
|
e.target.classList.remove('is-invalid');
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|