From 38ad40204851cd294f9f65057dfc512ff9b588df Mon Sep 17 00:00:00 2001
From: Tim Eertmoed <tim@eertmoed.de>
Date: Tue, 7 Oct 2025 18:27:25 +0200
Subject: [PATCH] srv/poe_manager/templates/switche.html aktualisiert

---
 srv/poe_manager/templates/switche.html | 56 ++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 8 deletions(-)

diff --git a/srv/poe_manager/templates/switche.html b/srv/poe_manager/templates/switche.html
index 14c2c6a..12fc940 100644
--- a/srv/poe_manager/templates/switche.html
+++ b/srv/poe_manager/templates/switche.html
@@ -3,9 +3,9 @@
 <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>
+<button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addSwitchModal">Neuen Switch hinzufügen</button>
 
-<table class="table table-bordered">
+<table class="table table-striped align-middle">
     <thead>
         <tr>
             <th>Hostname</th>
@@ -22,7 +22,7 @@
             <td>{{ s['username'] }}</td>
             <td>
                 <!-- Bearbeiten -->
-                <button class="btn btn-secondary btn-sm button login white" data-bs-toggle="modal" data-bs-target="#editSwitchModal{{ loop.index }}">Bearbeiten</button>
+                <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editSwitchModal{{ loop.index }}">Bearbeiten</button>
 
                 <!-- Löschen -->
                 <form method="post" style="display:inline;">
@@ -40,7 +40,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">
+                    <form method="post" onsubmit="return validatePassword('{{ loop.index }}', true)">
                         <div class="modal-body">
                             <input type="hidden" name="edit_switch" value="1">
                             <input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
@@ -57,8 +57,13 @@
                                 <input type="text" name="username" class="form-control" value="{{ s['username'] }}" required>
                             </div>
                             <div class="mb-3">
-                                <label class="form-label">Passwort</label>
-                                <input type="password" name="password" class="form-control" placeholder="Neues Passwort eingeben (optional)">
+                                <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">
@@ -81,7 +86,7 @@
                 <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">
+            <form method="post" onsubmit="return validatePassword('add', false)">
                 <div class="modal-body">
                     <input type="hidden" name="add_switch" value="1">
                     <div class="mb-3">
@@ -98,7 +103,12 @@
                     </div>
                     <div class="mb-3">
                         <label class="form-label">Passwort</label>
-                        <input type="password" name="password" class="form-control" required>
+                        <input type="password" id="password_add" name="password" class="form-control" required>
+                    </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>
+                        <div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
                     </div>
                 </div>
                 <div class="modal-footer">
@@ -109,4 +119,34 @@
         </div>
     </div>
 </div>
+
+<!-- JS: Passwortvalidierung -->
+<script>
+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;
+    }
+}
+
+// Live-Feedback beim Tippen
+document.addEventListener('input', e => {
+    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 %}