update and fix

src/www/index.html

@@ -143,6 +143,8 @@
 
       .workspace { min-width: 0; }
       .topbar {
+        position: relative;
+        z-index: 30;
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -181,7 +183,7 @@
 
       .popover {
         position: absolute;
-        z-index: 20;
+        z-index: 60;
         top: calc(100% + 10px);
         right: 0;
         width: min(350px, calc(100vw - 32px));
@@ -557,6 +559,21 @@
       </div>
     </dialog>
 
+    <dialog class="modal" id="accountPasswordDialog">
+      <div class="modal-card">
+        <div class="modal-head">
+          <div><p class="eyebrow">Konto</p><h2>Passwort ändern</h2><p class="subtle">Wähle ein neues, sicheres Passwort für dein Konto.</p></div>
+          <button class="secondary" data-action="close-account-password" type="button" aria-label="Dialog schließen">&times;</button>
+        </div>
+        <form data-form="account-password">
+          <label>Aktuelles Passwort<input name="currentPassword" type="password" autocomplete="current-password" required /></label>
+          <label>Neues Passwort<input name="newPassword" type="password" autocomplete="new-password" required /></label>
+          <div class="actions"><button class="secondary" data-action="close-account-password" type="button">Abbrechen</button><button class="primary" type="submit">Passwort speichern</button></div>
+          <p class="form-message" data-form-message></p>
+        </form>
+      </div>
+    </dialog>
+
     <script>
       const state = {
         user: null,
@@ -586,6 +603,7 @@
       const mqttFieldDialog = document.getElementById("mqttFieldDialog");
       const mqttFieldDialogContent = document.getElementById("mqttFieldDialogContent");
       const accessTokenGuideDialog = document.getElementById("accessTokenGuideDialog");
+      const accountPasswordDialog = document.getElementById("accountPasswordDialog");
 
       function escapeHtml(value) {
         return String(value ?? "")
@@ -691,17 +709,10 @@
           <p class="eyebrow">Konto</p>
           <h3>${escapeHtml(user.username)}</h3>
           <p class="subtle">${user.isAdmin ? "Administrator" : `${state.printers.length}/${user.printerLimit} Drucker`}</p>
-          <form data-form="account-password">
+          <div class="actions">
-            <label>Aktuelles Passwort
+            <button class="secondary" data-action="open-account-password" type="button">Passwort ändern</button>
-              <input name="currentPassword" type="password" autocomplete="current-password" required />
+            <button class="danger" data-action="logout" type="button">Abmelden</button>
-            </label>
+          </div>
-            <label>Neues Passwort
-              <input name="newPassword" type="password" autocomplete="new-password" required />
-            </label>
-            <button class="primary" type="submit">Passwort ändern</button>
-            <p class="form-message" data-form-message></p>
-          </form>
-          <button class="text-button" data-action="logout" type="button">Logout</button>
         `;
       }
 
@@ -1699,17 +1710,35 @@
       });
 
       userPopover.addEventListener("click", async (event) => {
-        if (!event.target.closest("[data-action='logout']")) return;
+        const action = event.target.closest("[data-action]")?.dataset.action;
+        if (action === "open-account-password") {
+          state.userMenuOpen = false;
+          renderUserMenu();
+          accountPasswordDialog.showModal();
+          return;
+        }
+        if (action !== "logout") return;
+        try {
           await api("/api/logout", { method: "POST" });
           if (state.events) state.events.close();
+          if (accountPasswordDialog.open) accountPasswordDialog.close();
           state.user = null;
           state.printers = [];
           state.users = [];
           state.userMenuOpen = false;
           renderAll();
+        } catch (error) {
+          alert(error.message);
+        }
       });
 
-      userPopover.addEventListener("submit", async (event) => {
+      accountPasswordDialog.addEventListener("click", (event) => {
+        if (event.target === accountPasswordDialog || event.target.closest("[data-action='close-account-password']")) {
+          accountPasswordDialog.close();
+        }
+      });
+
+      accountPasswordDialog.addEventListener("submit", async (event) => {
         const form = event.target;
         if (form.dataset.form !== "account-password") return;
         event.preventDefault();