srv/poe_manager/templates/switche.html aktualisiert
This commit is contained in:
@@ -41,7 +41,7 @@
|
||||
<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 validatePassword('{{ loop.index }}', true)">
|
||||
<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'] }}">
|
||||
@@ -51,7 +51,8 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">IP-Adresse</label>
|
||||
<input type="text" name="ip" class="form-control" value="{{ s['ip'] }}" required>
|
||||
<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>
|
||||
@@ -87,28 +88,29 @@
|
||||
<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 validatePassword('add', false)">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -121,8 +123,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JS: Passwortvalidierung -->
|
||||
<!-- 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');
|
||||
@@ -137,8 +140,35 @@ function validatePassword(id, isEdit) {
|
||||
}
|
||||
}
|
||||
|
||||
// Live-Feedback beim Tippen
|
||||
// -------------------
|
||||
// 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);
|
||||
|
||||
Reference in New Issue
Block a user