From 93a93e2289f596781a652445987a1d4a3b5afb62 Mon Sep 17 00:00:00 2001
From: Tim Eertmoed <tim@eertmoed.de>
Date: Wed, 8 Oct 2025 18:22:17 +0200
Subject: [PATCH] srv/poe_manager/templates/switche.html aktualisiert

---
 srv/poe_manager/templates/switche.html | 50 ++++++++++++++++++++------
 1 file changed, 40 insertions(+), 10 deletions(-)

diff --git a/srv/poe_manager/templates/switche.html b/srv/poe_manager/templates/switche.html
index 35ef649..100e43e 100644
--- a/srv/poe_manager/templates/switche.html
+++ b/srv/poe_manager/templates/switche.html
@@ -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);