Spaces:

i0110
/

dashboard

Running

App Files Files Community

i0110 commited on Apr 25

Commit

1934692

verified ·

1 Parent(s): 198475b

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +131 -29

public/index.html CHANGED Viewed

@@ -331,7 +331,7 @@
       margin-top: 10px;
       font-size: 14px;
     }
-    .logout-button {
       background: var(--action-button-bg);
       border: none;
       color: var(--text-color);
@@ -340,9 +340,8 @@
       cursor: pointer;
       font-size: 13px;
       transition: background 0.2s ease;
-      margin-left: auto;
     }
-    .logout-button:hover {
       background: var(--action-button-hover);
     }
     .header-container {
@@ -351,6 +350,10 @@
       align-items: center;
       margin-bottom: 20px;
     }
   </style>
 </head>
 <body>
@@ -358,7 +361,10 @@
     <div class="overview">
       <div class="header-container">
         <div class="overview-title">📊 系统概览</div>
-        <button class="logout-button" id="logoutButton" style="display: none;" onclick="logout()">登出</button>
       </div>
       <div class="theme-toggle">
         主题:
@@ -439,44 +445,104 @@
     // 登录状态管理
     function checkLoginStatus() {
-      const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
-      document.getElementById('loginOverlay').style.display = isLoggedIn ? 'none' : 'flex';
-      document.getElementById('logoutButton').style.display = isLoggedIn ? 'block' : 'none';
-      if (isLoggedIn) {
-        updateActionButtons(true);
       } else {
         updateActionButtons(false);
       }
     }
     function login() {
       const username = document.getElementById('username').value;
       const password = document.getElementById('password').value;
       const loginError = document.getElementById('loginError');
-      // 模拟后端验证 (前端硬编码验证，实际环境中应通过接口验证)
-      fetch('/api/config').then(response => response.json()).then(config => {
-        // 这里仅做演示，实际环境中不应将用户凭据硬编码在前端
-        const adminUsername = 'admin'; // 默认值，实际应从环境变量获取，但这里无法直接获取后端环境变量
-        const adminPassword = 'password'; // 默认值，实际应从环境变量获取
-        if (username === adminUsername && password === adminPassword) {
-          localStorage.setItem('isLoggedIn', 'true');
-          loginError.style.display = 'none';
           checkLoginStatus();
         } else {
-          loginError.textContent = '用户名或密码错误';
           loginError.style.display = 'block';
         }
-      }).catch(err => {
-        loginError.textContent = '登录系统错误，请��后重试';
         loginError.style.display = 'block';
-        console.error('获取配置失败，无法验证登录:', err);
       });
     }
     function logout() {
-      localStorage.removeItem('isLoggedIn');
-      checkLoginStatus();
     }
     function updateActionButtons(isLoggedIn) {
@@ -712,14 +778,32 @@
     async function restartSpace(repoId) {
       try {
         const encodedRepoId = encodeURIComponent(repoId);
-        const response = await fetch(`/api/proxy/restart/${encodedRepoId}`, { method: 'POST' });
         const result = await response.json();
         if (result.success) {
           alert(`重启成功: ${repoId}`);
         } else {
-          alert(`重启失败: ${result.error || '未知错误'}`);
-          console.error(`重启失败 (${repoId}):`, result.error, result.details);
         }
       } catch (error) {
         console.error(`重启失败 (${repoId}):`, error);
@@ -729,14 +813,32 @@
     async function rebuildSpace(repoId) {
       try {
         const encodedRepoId = encodeURIComponent(repoId);
-        const response = await fetch(`/api/proxy/rebuild/${encodedRepoId}`, { method: 'POST' });
         const result = await response.json();
         if (result.success) {
           alert(`重建成功: ${repoId}`);
         } else {
-          alert(`重建失败: ${result.error || '未知错误'}`);
-          console.error(`重建失败 (${repoId}):`, result.error, result.details);
         }
       } catch (error) {
         console.error(`重建失败 (${repoId}):`, error);

       margin-top: 10px;
       font-size: 14px;
     }
+    .login-button, .logout-button {
       background: var(--action-button-bg);
       border: none;
       color: var(--text-color);
       cursor: pointer;
       font-size: 13px;
       transition: background 0.2s ease;
     }
+    .login-button:hover, .logout-button:hover {
       background: var(--action-button-hover);
     }
     .header-container {
       align-items: center;
       margin-bottom: 20px;
     }
+    .auth-buttons {
+      display: flex;
+      gap: 10px;
+    }
   </style>
 </head>
 <body>
     <div class="overview">
       <div class="header-container">
         <div class="overview-title">📊 系统概览</div>
+        <div class="auth-buttons">
+          <button class="login-button" id="loginButton" onclick="showLoginForm()">登录</button>
+          <button class="logout-button" id="logoutButton" style="display: none;" onclick="logout()">登出</button>
+        </div>
       </div>
       <div class="theme-toggle">
         主题:
     // 登录状态管理
     function checkLoginStatus() {
+      const token = localStorage.getItem('authToken');
+      if (token) {
+        fetch('/api/verify-token', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ token })
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            document.getElementById('loginButton').style.display = 'none';
+            document.getElementById('logoutButton').style.display = 'block';
+            updateActionButtons(true);
+          } else {
+            localStorage.removeItem('authToken');
+            document.getElementById('loginButton').style.display = 'block';
+            document.getElementById('logoutButton').style.display = 'none';
+            updateActionButtons(false);
+          }
+        })
+        .catch(error => {
+          console.error('验证 token 失败:', error);
+          localStorage.removeItem('authToken');
+          document.getElementById('loginButton').style.display = 'block';
+          document.getElementById('logoutButton').style.display = 'none';
+          updateActionButtons(false);
+        });
       } else {
+        document.getElementById('loginButton').style.display = 'block';
+        document.getElementById('logoutButton').style.display = 'none';
         updateActionButtons(false);
       }
     }
+    function showLoginForm() {
+      document.getElementById('loginOverlay').style.display = 'flex';
+      document.getElementById('username').value = '';
+      document.getElementById('password').value = '';
+      document.getElementById('loginError').style.display = 'none';
+    }
+    function hideLoginForm() {
+      document.getElementById('loginOverlay').style.display = 'none';
+    }
     function login() {
       const username = document.getElementById('username').value;
       const password = document.getElementById('password').value;
       const loginError = document.getElementById('loginError');
+      fetch('/api/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password })
+      })
+      .then(response => response.json())
+      .then(data => {
+        if (data.success) {
+          localStorage.setItem('authToken', data.token);
+          hideLoginForm();
           checkLoginStatus();
         } else {
+          loginError.textContent = data.message || '登录失败';
           loginError.style.display = 'block';
         }
+      })
+      .catch(error => {
+        console.error('登录请求失败:', error);
+        loginError.textContent = '登录请求失败，请稍后重试';
         loginError.style.display = 'block';
       });
     }
     function logout() {
+      const token = localStorage.getItem('authToken');
+      if (token) {
+        fetch('/api/logout', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ token })
+        })
+        .then(response => response.json())
+        .then(data => {
+          localStorage.removeItem('authToken');
+          checkLoginStatus();
+        })
+        .catch(error => {
+          console.error('登出失败:', error);
+          localStorage.removeItem('authToken');
+          checkLoginStatus();
+        });
+      }
     }
     function updateActionButtons(isLoggedIn) {
     async function restartSpace(repoId) {
       try {
+        const token = localStorage.getItem('authToken');
+        if (!token) {
+          alert('请先登录以执行此操作');
+          showLoginForm();
+          return;
+        }
         const encodedRepoId = encodeURIComponent(repoId);
+        const response = await fetch(`/api/proxy/restart/${encodedRepoId}`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        });
         const result = await response.json();
         if (result.success) {
           alert(`重启成功: ${repoId}`);
         } else {
+          if (response.status === 401) {
+            alert('登录已过期，请重新登录');
+            localStorage.removeItem('authToken');
+            checkLoginStatus();
+            showLoginForm();
+          } else {
+            alert(`重启失败: ${result.error || '未知错误'}`);
+            console.error(`重启失败 (${repoId}):`, result.error, result.details);
+          }
         }
       } catch (error) {
         console.error(`重启失败 (${repoId}):`, error);
     async function rebuildSpace(repoId) {
       try {
+        const token = localStorage.getItem('authToken');
+        if (!token) {
+          alert('请先登录以执行此操作');
+          showLoginForm();
+          return;
+        }
         const encodedRepoId = encodeURIComponent(repoId);
+        const response = await fetch(`/api/proxy/rebuild/${encodedRepoId}`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`
+          }
+        });
         const result = await response.json();
         if (result.success) {
           alert(`重建成功: ${repoId}`);
         } else {
+          if (response.status === 401) {
+            alert('登录已过期，请重新登录');
+            localStorage.removeItem('authToken');
+            checkLoginStatus();
+            showLoginForm();
+          } else {
+            alert(`重建失败: ${result.error || '未知错误'}`);
+            console.error(`重建失败 (${repoId}):`, result.error, result.details);
+          }
         }
       } catch (error) {
         console.error(`重建失败 (${repoId}):`, error);