oc

public/admin.html

@@ -24,7 +24,13 @@
       <p id="syncStatus" style="margin-top: 0.75rem; color: var(--text-secondary); font-size: 0.875rem;"></p>
     </div>
 
-    <h2>Администраторы</h2>
+    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;">
+      <h2 style="margin:0;">Администраторы</h2>
+      <button id="openAddAdminModal" class="btn-success">
+        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+        Добавить
+      </button>
+    </div>
     
     <div class="table-container" style="margin-bottom: 2rem;">
       <table id="adminsTable">
@@ -39,21 +45,26 @@
       </table>
     </div>
 
-    <h3>Добавить администратора</h3>
-    <div class="form-card">
-      <form id="addAdminForm">
-        <div class="form-group">
-          <label for="newLogin">Логин</label>
-          <input type="text" id="newLogin" required placeholder="Минимум 3 символа" minlength="3">
-        </div>
-        
-        <div class="form-group">
-          <label for="newPassword">Пароль</label>
-          <input type="password" id="newPassword" required placeholder="Минимум 6 символов" minlength="6">
-        </div>
-        
-        <button type="submit">Добавить</button>
-      </form>
+    <div id="addAdminModal" class="modal">
+      <div class="modal-content">
+        <h2>Новый администратор</h2>
+        <form id="addAdminForm">
+          <div class="form-group">
+            <label for="newLogin">Логин</label>
+            <input type="text" id="newLogin" required placeholder="Минимум 3 символа" minlength="3" autocomplete="off">
+          </div>
+          
+          <div class="form-group">
+            <label for="newPassword">Пароль</label>
+            <input type="password" id="newPassword" required placeholder="Минимум 6 символов" minlength="6" autocomplete="new-password">
+          </div>
+          
+          <div style="display:flex;gap:0.75rem;margin-top:1.5rem;">
+            <button type="submit" id="addAdminSubmitBtn" style="flex:1;">Добавить</button>
+            <button type="button" id="closeAddAdminModal" class="btn-secondary">Отмена</button>
+          </div>
+        </form>
+      </div>
     </div>
 
     <div id="editPasswordModal" class="modal">
@@ -159,9 +170,23 @@
 
     const adminsTbody = document.getElementById('adminsBody');
     const addForm = document.getElementById('addAdminForm');
+    const addAdminModal = document.getElementById('addAdminModal');
     const passwordModal = document.getElementById('editPasswordModal');
     const closePasswordBtn = document.getElementById('closePasswordModal');
 
+    function closeAddAdminModalFn() {
+      addAdminModal.classList.remove('active');
+      addForm.reset();
+    }
+
+    document.getElementById('openAddAdminModal').addEventListener('click', () => {
+      addAdminModal.classList.add('active');
+      document.getElementById('newLogin').focus();
+    });
+
+    document.getElementById('closeAddAdminModal').addEventListener('click', closeAddAdminModalFn);
+    addAdminModal.addEventListener('click', (e) => { if (e.target === addAdminModal) closeAddAdminModalFn(); });
+
     async function loadAdmins() {
       try {
         const res = await fetch('/api/admins');
@@ -227,6 +252,10 @@
 
     addForm.addEventListener('submit', async (e) => {
       e.preventDefault();
+      const submitBtn = document.getElementById('addAdminSubmitBtn');
+      submitBtn.disabled = true;
+      submitBtn.innerHTML = '<span class="loading-spinner"></span>';
+      
       const login = document.getElementById('newLogin').value.trim();
       const password = document.getElementById('newPassword').value;
       
@@ -239,7 +268,7 @@
         });
         if (res.ok) {
           showToast('Администратор добавлен', 'success');
-          addForm.reset();
+          closeAddAdminModalFn();
           loadAdmins();
         } else {
           const err = await res.json();
@@ -247,6 +276,9 @@
         }
       } catch (err) {
         showToast('Ошибка соединения', 'error');
+      } finally {
+        submitBtn.disabled = false;
+        submitBtn.innerHTML = 'Добавить';
       }
     });
 
@@ -277,7 +309,12 @@
 
     closePasswordBtn.addEventListener('click', () => passwordModal.classList.remove('active'));
     passwordModal.addEventListener('click', (e) => { if (e.target === passwordModal) passwordModal.classList.remove('active'); });
-    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && passwordModal.classList.contains('active')) passwordModal.classList.remove('active'); });
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        if (addAdminModal.classList.contains('active')) closeAddAdminModalFn();
+        if (passwordModal.classList.contains('active')) passwordModal.classList.remove('active');
+      }
+    });
 
     loadAdmins();
   </script>