yxy

public/assets/js/ui-user.js

@@ -13,6 +13,7 @@ const state = {
 };
 
 let avatarBtn;
+let userMenuPanel;
 let profileForm;
 let passwordForm;
 let settingsForm;
@@ -22,10 +23,21 @@ let senderTable;
 let senderForm;
 let bridgePreview;
 let validateBridgeBtn;
+let menuInitialized = false;
+let menuOpen = false;
 
 export function initUserPanel() {
   avatarBtn = document.getElementById('btn-user');
+  userMenuPanel = document.getElementById('userMenuPanel');
   updateAvatar();
+  updateRoleVisibility();
+  if (!menuInitialized && avatarBtn && userMenuPanel) {
+    avatarBtn.addEventListener('click', toggleUserMenu);
+    document.addEventListener('click', handleDocumentClick, true);
+    document.addEventListener('keydown', handleMenuKeydown);
+    userMenuPanel.addEventListener('click', handleMenuItemClick);
+    menuInitialized = true;
+  }
 }
 
 export function initAccountPage() {
@@ -58,22 +70,24 @@ export function initAccountPage() {
     btn.addEventListener('click', () => switchTab(btn.getAttribute('data-user-tab')));
   });
 
-  settingsForm?.querySelectorAll('button[data-rotate]').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const type = btn.getAttribute('data-rotate');
-      if (type && state.rotate[type] !== undefined) {
-        state.rotate[type] = true;
-        toast('Token wird nach dem Speichern erneuert.', true, { duration: 2000 });
-      }
+  if (settingsForm) {
+    settingsForm.querySelectorAll('button[data-rotate]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const type = btn.getAttribute('data-rotate');
+        if (type && state.rotate[type] !== undefined) {
+          state.rotate[type] = true;
+          toast('Token wird nach dem Speichern erneuert.', true, { duration: 2000 });
+        }
+      });
     });
-  });
 
-  settingsForm?.querySelectorAll('button[data-download]').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const type = btn.getAttribute('data-download');
-      if (type) downloadFile(type);
+    settingsForm.querySelectorAll('button[data-download]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const type = btn.getAttribute('data-download');
+        if (type) downloadFile(type);
+      });
     });
-  });
+  }
 
   switchTab(state.currentTab);
   loadAccountData();
@@ -96,6 +110,40 @@ function updateAvatar() {
   target.textContent = name ? name.trim().charAt(0).toUpperCase() : 'U';
 }
 
+function toggleUserMenu(ev) {
+  ev?.preventDefault();
+  if (!userMenuPanel || !avatarBtn) return;
+  menuOpen = !menuOpen;
+  userMenuPanel.classList.toggle('hidden', !menuOpen);
+  avatarBtn.setAttribute('aria-expanded', menuOpen ? 'true' : 'false');
+}
+
+function closeUserMenu() {
+  if (!menuOpen) return;
+  menuOpen = false;
+  if (userMenuPanel) userMenuPanel.classList.add('hidden');
+  if (avatarBtn) avatarBtn.setAttribute('aria-expanded', 'false');
+}
+
+function handleDocumentClick(ev) {
+  if (!userMenuPanel || !avatarBtn || !menuOpen) return;
+  const target = ev.target;
+  if (avatarBtn.contains(target) || userMenuPanel.contains(target)) return;
+  closeUserMenu();
+}
+
+function handleMenuKeydown(ev) {
+  if (ev.key === 'Escape') {
+    closeUserMenu();
+  }
+}
+
+function handleMenuItemClick(ev) {
+  const item = ev.target.closest('.user-menu-item');
+  if (!item) return;
+  closeUserMenu();
+}
+
 function updateRoleVisibility() {
   const role = (window.__currentUser?.role || '').toLowerCase();
   document.querySelectorAll('[data-role]').forEach(el => {
@@ -139,15 +187,17 @@ async function loadAccountData() {
     }
     fillProfileForm(res.user);
     fillSettingsForm(res.settings || {});
-    if (isOwner()) {
+    if (teamTable && isOwner()) {
       await loadUsers();
     }
-    if (isAdmin()) {
-      await loadSenders();
-    } else {
-      state.senders = [];
-      state.senderMap = new Map();
-      renderSenderList();
+    if (senderTable) {
+      if (isAdmin()) {
+        await loadSenders();
+      } else {
+        state.senders = [];
+        state.senderMap = new Map();
+        renderSenderList();
+      }
     }
   } catch (err) {
     console.error(err);