WiS/Aruba-PoE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

srv/poe_manager/templates/switche.html aktualisiert

Browse Source
This commit is contained in:
Tim Eertmoed
2025-10-08 18:22:17 +02:00
parent d8a4b17b28
commit 93a93e2289
1 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
srv/poe_manager/templates/switche.html
View File

@@ -41,7 +41,7 @@
<h5 class="modal-title text-dark">Switch bearbeiten</h5> <h5 class="modal-title text-dark">Switch bearbeiten</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button> <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div> </div>
<form method="post" onsubmit="return validatePassword('{{ loop.index }}', true)"> <form method="post" onsubmit="return validateSwitchForm(this, '{{ loop.index }}')">
<div class="modal-body"> <div class="modal-body">
<input type="hidden" name="edit_switch" value="1"> <input type="hidden" name="edit_switch" value="1">
<input type="hidden" name="old_hostname" value="{{ s['hostname'] }}"> <input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
@@ -51,7 +51,8 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">IP-Adresse</label> <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>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Username</label> <label class="form-label">Username</label>
@@ -87,28 +88,29 @@
<h5 class="modal-title text-dark">Neuen Switch hinzufügen</h5> <h5 class="modal-title text-dark">Neuen Switch hinzufügen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button> <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div> </div>
<form method="post" onsubmit="return validatePassword('add', false)"> <form method="post" onsubmit="return validateSwitchForm(this, 'add')">
<div class="modal-body"> <div class="modal-body">
<input type="hidden" name="add_switch" value="1"> <input type="hidden" name="add_switch" value="1">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Hostname</label> <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>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">IP-Adresse</label> <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>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Username</label> <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>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Passwort</label> <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>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Passwort bestätigen</label> <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 class="invalid-feedback">Passwörter stimmen nicht überein!</div>
</div> </div>
</div> </div>
@@ -121,8 +123,9 @@
</div> </div>
</div> </div>
<!-- JS: Passwortvalidierung --> <!-- JS: Passwort + IP-Validierung -->
<script> <script>
// Passwortcheck
function validatePassword(id, isEdit) { function validatePassword(id, isEdit) {
let pass = document.getElementById(isEdit ? `password_edit_${id}` : `password_${id}`) || document.getElementById('password_add'); 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'); 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 => { document.addEventListener('input', e => {
if (e.target.name === "ip") validateIP(e.target);
if (e.target.id.startsWith('password_confirm')) { if (e.target.id.startsWith('password_confirm')) {
const id = e.target.id.replace('password_confirm_', ''); const id = e.target.id.replace('password_confirm_', '');
const pass = document.getElementById('password_' + id); const pass = document.getElementById('password_' + id);