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

---
 srv/poe_manager/templates/devices.html | 53 +++++++++++++++++---------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/srv/poe_manager/templates/devices.html b/srv/poe_manager/templates/devices.html
index ec3fff1..f1db549 100644
--- a/srv/poe_manager/templates/devices.html
+++ b/srv/poe_manager/templates/devices.html
@@ -67,7 +67,7 @@
 <div class="modal fade" id="deviceModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
-      <form method="post" onsubmit="return validateIPField(this);">
+      <form method="post" onsubmit="return validateDeviceForm(this);">
         <div class="modal-header">
           <h5 class="modal-title black">Neues Gerät hinzufügen</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
@@ -76,20 +76,21 @@
             <input type="hidden" name="add_device" value="1">
             <div class="mb-3">
                 <label>Hostname</label>
-                <input type="text" name="name" class="form-control" required>
+                <input type="text" name="name" class="form-control" required placeholder="z.B. Sensor01">
             </div>
             <div class="mb-3">
                 <label>IP-Adresse</label>
-                <input type="text" name="rpi_ip" class="form-control" required>
+                <input type="text" name="rpi_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>MAC-Adresse</label>
-                <input type="text" name="mac" class="form-control" required>
+                <input type="text" name="mac" class="form-control" required placeholder="z.B. AA:BB:CC:DD:EE:FF">
+                <div class="invalid-feedback">Bitte eine gültige MAC-Adresse eingeben (xx:xx:xx:xx:xx:xx).</div>
             </div>
             <div class="mb-3">
                 <label>Port</label>
-                <input type="text" name="port" class="form-control" required>
+                <input type="text" name="port" class="form-control" required placeholder="z.B. 3">
             </div>
             <div class="mb-3">
                 <label>Switch</label>
@@ -113,7 +114,7 @@
 <div class="modal fade" id="editDeviceModal" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
-      <form method="post" onsubmit="return validateIPField(this);">
+      <form method="post" onsubmit="return validateDeviceForm(this);">
         <input type="hidden" name="edit_device" value="1">
         <input type="hidden" name="old_mac" id="edit_old_mac">
         <div class="modal-header">
@@ -123,20 +124,21 @@
         <div class="modal-body">
             <div class="mb-3">
                 <label>Hostname</label>
-                <input type="text" name="name" id="edit_name" class="form-control" required>
+                <input type="text" name="name" id="edit_name" class="form-control" required placeholder="z.B. Sensor01">
             </div>
             <div class="mb-3">
                 <label>IP-Adresse</label>
-                <input type="text" name="rpi_ip" id="edit_ip" class="form-control" required>
+                <input type="text" name="rpi_ip" id="edit_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>MAC-Adresse</label>
-                <input type="text" name="mac" id="edit_mac" class="form-control" required>
+                <input type="text" name="mac" id="edit_mac" class="form-control" required placeholder="z.B. AA:BB:CC:DD:EE:FF">
+                <div class="invalid-feedback">Bitte eine gültige MAC-Adresse eingeben (xx:xx:xx:xx:xx:xx).</div>
             </div>
             <div class="mb-3">
                 <label>Port</label>
-                <input type="text" name="port" id="edit_port" class="form-control" required>
+                <input type="text" name="port" id="edit_port" class="form-control" required placeholder="z.B. 3">
             </div>
         </div>
         <div class="modal-footer">
@@ -198,6 +200,11 @@ function openSwitchModal(mac, switch_hostname) {
 // -------------------
 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}$/;
 
+// -------------------
+// MAC-Validierung
+// -------------------
+const macPattern = /^([0-9A-Fa-f]{2}:){5}[0-9A-Fa-f]{2}$/;
+
 function validateIP(input) {
     if (!ipPattern.test(input.value)) {
         input.classList.add("is-invalid");
@@ -208,19 +215,29 @@ function validateIP(input) {
     }
 }
 
-function validateIPField(form) {
-    const ipInput = form.querySelector("input[name='rpi_ip']");
-    if (ipInput) {
-        return validateIP(ipInput);
+function validateMAC(input) {
+    if (!macPattern.test(input.value)) {
+        input.classList.add("is-invalid");
+        return false;
+    } else {
+        input.classList.remove("is-invalid");
+        return true;
     }
-    return true;
+}
+
+function validateDeviceForm(form) {
+    const ipInput = form.querySelector("input[name='rpi_ip']");
+    const macInput = form.querySelector("input[name='mac']");
+    let valid = true;
+    if (ipInput) valid = validateIP(ipInput) && valid;
+    if (macInput) valid = validateMAC(macInput) && valid;
+    return valid;
 }
 
 // Live-Feedback beim Tippen
 document.addEventListener("input", function(e) {
-    if (e.target.name === "rpi_ip") {
-        validateIP(e.target);
-    }
+    if (e.target.name === "rpi_ip") validateIP(e.target);
+    if (e.target.name === "mac") validateMAC(e.target);
 });
 </script>