添加鉴权逻辑

public/js/init.js

@@ -21,16 +21,58 @@ document.addEventListener('DOMContentLoaded', () => {
   const btnPromAdd = document.getElementById('btnPromAdd');
   const promMessageBox = document.getElementById('promMessageBox');
 
+  const adminForm = document.getElementById('adminForm');
+  const adminUsername = document.getElementById('adminUsername');
+  const adminPassword = document.getElementById('adminPassword');
+  const adminPasswordConfirm = document.getElementById('adminPasswordConfirm');
+  const btnAdminCreate = document.getElementById('btnAdminCreate');
+  const adminMessageBox = document.getElementById('adminMessageBox');
+
   function showMessage(msg, isError = false) {
     messageBox.textContent = msg;
     messageBox.className = 'form-message ' + (isError ? 'error' : 'success');
   }
 
+  function showAdminMessage(msg, isError = false) {
+    adminMessageBox.textContent = msg;
+    adminMessageBox.className = 'form-message ' + (isError ? 'error' : 'success');
+  }
+
   function showPromMessage(msg, isError = false) {
     promMessageBox.textContent = msg;
     promMessageBox.className = 'form-message ' + (isError ? 'error' : 'success');
   }
-  
+
+  // --- Step Controller ---
+  async function checkStatus() {
+    try {
+      const res = await fetch('/api/setup/status');
+      const data = await res.json();
+      
+      initForm.style.display = 'none';
+      adminForm.style.display = 'none';
+      promForm.style.display = 'none';
+
+      if (!data.initialized) {
+        initForm.style.display = 'block';
+        initHeaderTitle.textContent = '数据库初始化';
+        initHeaderDesc.textContent = '请配置您的 MySQL 数据库连接信息以完成首次设置';
+      } else if (data.needsAdmin) {
+        adminForm.style.display = 'block';
+        initHeaderTitle.textContent = '创建管理员账户';
+        initHeaderDesc.textContent = '请设置系统的第一个管理员账号和密码';
+      } else {
+        promForm.style.display = 'block';
+        initHeaderTitle.textContent = '配置 Prometheus';
+        initHeaderDesc.textContent = '配置您的第一个 Prometheus 数据源监控连接';
+      }
+    } catch (err) {
+      initForm.style.display = 'block';
+    }
+  }
+
+  checkStatus();
+
   btnTest.addEventListener('click', async () => {
     btnTest.disabled = true;
     const oldText = btnTest.textContent;
@@ -79,12 +121,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const data = await res.json();
       if (data.success) {
         showMessage('数据库初始化成功！进入下一步...');
-        setTimeout(() => {
-          initForm.style.display = 'none';
-          promForm.style.display = 'block';
-          initHeaderTitle.textContent = '配置 Prometheus';
-          initHeaderDesc.textContent = '配置您的第一个 Prometheus 数据源监控连接';
-        }, 1000);
+        setTimeout(checkStatus, 1000);
       } else {
         showMessage('初始化失败: ' + (data.error || '未知错误'), true);
         btnInit.disabled = false;
@@ -97,6 +134,39 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  btnAdminCreate.addEventListener('click', async () => {
+    const username = adminUsername.value.trim();
+    const password = adminPassword.value;
+    const confirm = adminPasswordConfirm.value;
+
+    if (!username || !password) return showAdminMessage('请填写用户名和密码', true);
+    if (password !== confirm) return showAdminMessage('两次输入的密码不一致', true);
+
+    btnAdminCreate.disabled = true;
+    btnAdminCreate.textContent = '创建中...';
+
+    try {
+      const res = await fetch('/api/setup/admin', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username, password })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        showAdminMessage('管理员账户创建成功！');
+        setTimeout(checkStatus, 1000);
+      } else {
+        showAdminMessage('创建失败: ' + (data.error || '未知错误'), true);
+        btnAdminCreate.disabled = false;
+        btnAdminCreate.textContent = '创建账户';
+      }
+    } catch (err) {
+      showAdminMessage('请求失败: ' + err.message, true);
+      btnAdminCreate.disabled = false;
+      btnAdminCreate.textContent = '创建账户';
+    }
+  });
+
   btnPromTest.addEventListener('click', async () => {
     const url = promUrl.value.trim();
     if (!url) return showPromMessage('请输入 Prometheus URL', true);
@@ -144,6 +214,7 @@ document.addEventListener('DOMContentLoaded', () => {
         setTimeout(() => window.location.href = '/', 1500);
       } else {
         const err = await res.json();
+        // If 401, it means we somehow bypassed auth on this step, but it might be okay during init
         showPromMessage(`添加失败: ${err.error || '未知错误'}`, true);
         btnPromAdd.disabled = false;
         btnPromAdd.textContent = oldText;