feat: add admin login page with session auth

Replace HTTP Basic Auth with a dedicated login page using
cookie-based session authentication.

- Add web/static/login.html with form-based login UI
- Add in-memory session store with configurable timeout
- Add /api/auth/login, /api/auth/logout, /api/auth/me endpoints
- Replace BasicAuth middleware with SessionAuth
- Add session_timeout config field (default 24h)
- Remove listen_addr from settings UI

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <[email protected]>

web/static/index.html

@@ -19,6 +19,29 @@
             margin-bottom: 30px;
         }
         header h1 { font-size: 24px; }
+        .user-bar {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            font-size: 14px;
+        }
+        .user-bar .username {
+            color: #ccc;
+        }
+        .user-bar .btn-logout {
+            background: transparent;
+            border: 1px solid rgba(255,255,255,0.3);
+            color: white;
+            padding: 5px 14px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 13px;
+            transition: all 0.2s;
+        }
+        .user-bar .btn-logout:hover {
+            background: rgba(255,255,255,0.1);
+            border-color: rgba(255,255,255,0.5);
+        }
         .stats {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -222,7 +245,13 @@
     <header>
         <div class="container" style="display:flex;justify-content:space-between;align-items:center;">
             <h1>Mirror Proxy - 镜像代理管理后台</h1>
-            <button class="btn btn-primary" onclick="openSettingsModal()">⚙️ 系统设置</button>
+            <div style="display:flex;align-items:center;gap:15px;">
+                <div class="user-bar" id="userBar" style="display:none;">
+                    <span class="username" id="currentUser">admin</span>
+                    <button class="btn-logout" onclick="doLogout()">退出登录</button>
+                </div>
+                <button class="btn btn-primary" onclick="openSettingsModal()">系统设置</button>
+            </div>
         </div>
     </header>
 
@@ -332,10 +361,6 @@
     <div class="modal" id="settingsModal">
         <div class="modal-content">
             <h2 style="margin-bottom: 20px;">系统设置</h2>
-            <div class="form-group">
-                <label>监听地址</label>
-                <input type="text" id="cfgListenAddr" placeholder=":8080">
-            </div>
             <div class="form-group">
                 <label>管理后台路径</label>
                 <input type="text" id="cfgAdminPath" placeholder="/admin">
@@ -348,6 +373,10 @@
                 <label>管理员密码（留空表示不修改）</label>
                 <input type="password" id="cfgAdminPass" placeholder="不修改请留空">
             </div>
+            <div class="form-group">
+                <label>Session 有效期（小时）</label>
+                <input type="number" id="cfgSessionTimeout" value="24" min="1" max="720">
+            </div>
             <div class="modal-footer">
                 <button class="btn" onclick="closeSettingsModal()" style="background: #6c757d; color: white;">取消</button>
                 <button class="btn btn-primary" onclick="saveConfig()">保存</button>
@@ -359,6 +388,28 @@
         let links = [];
         let currentConfig = {};
 
+        async function checkAuth() {
+            try {
+                const res = await fetch('/api/auth/me');
+                if (res.ok) {
+                    const data = await res.json();
+                    document.getElementById('currentUser').textContent = data.username;
+                    document.getElementById('userBar').style.display = 'flex';
+                } else {
+                    window.location.href = 'login';
+                }
+            } catch (e) {
+                window.location.href = 'login';
+            }
+        }
+
+        async function doLogout() {
+            try {
+                await fetch('/api/auth/logout', { method: 'POST' });
+            } catch (e) {}
+            window.location.href = 'login';
+        }
+
         async function loadLinks() {
             try {
                 const res = await fetch('/api/links');
@@ -615,10 +666,10 @@
         }
 
         function openSettingsModal() {
-            document.getElementById('cfgListenAddr').value = currentConfig.listen_addr || ':8080';
             document.getElementById('cfgAdminPath').value = currentConfig.admin_path || '/admin';
             document.getElementById('cfgAdminUser').value = currentConfig.admin_user || 'admin';
             document.getElementById('cfgAdminPass').value = '';
+            document.getElementById('cfgSessionTimeout').value = currentConfig.session_timeout || 24;
             document.getElementById('settingsModal').classList.add('active');
         }
 
@@ -627,18 +678,18 @@
         }
 
         async function saveConfig() {
-            const listenAddr = document.getElementById('cfgListenAddr').value.trim();
             const adminPath = document.getElementById('cfgAdminPath').value.trim();
             const adminUser = document.getElementById('cfgAdminUser').value.trim();
             const adminPass = document.getElementById('cfgAdminPass').value;
+            const sessionTimeout = parseInt(document.getElementById('cfgSessionTimeout').value) || 24;
 
-            if (!listenAddr || !adminPath || !adminUser) {
+            if (!adminPath || !adminUser) {
                 showToast('请填写完整信息', 'error');
                 return;
             }
 
             try {
-                const body = { listen_addr: listenAddr, admin_path: adminPath, admin_user: adminUser };
+                const body = { admin_path: adminPath, admin_user: adminUser, session_timeout: sessionTimeout };
                 if (adminPass) body.admin_pass = adminPass;
 
                 const res = await fetch('/api/config', {
@@ -654,13 +705,7 @@
                         showToast('配置已保存，服务正在应用新配置');
                         closeSettingsModal();
                         setTimeout(() => {
-                            const newPort = data.listen_addr.includes(':') ? data.listen_addr.split(':').pop() : '';
-                            const currentPort = window.location.port || (window.location.protocol === 'https:' ? '443' : '80');
-                            if (newPort && newPort !== currentPort) {
-                                showToast('服务已在新端口启动，请使用新地址访问', 'warning');
-                            } else {
-                                window.location.href = data.admin_path + '/';
-                            }
+                            window.location.href = data.admin_path + '/';
                         }, 1500);
                     } else {
                         showToast('保存成功');
@@ -684,8 +729,10 @@
         });
 
         // 加载数据
-        loadConfig();
-        loadLinks();
+        checkAuth().then(() => {
+            loadConfig();
+            loadLinks();
+        });
     </script>
 </body>
 </html>

web/static/login.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录 - Mirror Proxy</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .login-card {
+            background: white;
+            border-radius: 12px;
+            padding: 40px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        .login-card h1 {
+            font-size: 24px;
+            color: #1a1a2e;
+            margin-bottom: 8px;
+            text-align: center;
+        }
+        .login-card .subtitle {
+            text-align: center;
+            color: #888;
+            font-size: 14px;
+            margin-bottom: 30px;
+        }
+        .form-group {
+            margin-bottom: 18px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            color: #444;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 12px 14px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 15px;
+            transition: border-color 0.2s;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: #007bff;
+        }
+        .btn {
+            width: 100%;
+            padding: 12px;
+            border: none;
+            border-radius: 6px;
+            font-size: 15px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .btn-primary {
+            background: #007bff;
+            color: white;
+        }
+        .btn-primary:hover { background: #0056b3; }
+        .btn-primary:active { transform: scale(0.98); }
+        .btn:disabled {
+            background: #6c757d;
+            cursor: not-allowed;
+        }
+        .error {
+            background: #f8d7da;
+            color: #721c24;
+            padding: 10px 14px;
+            border-radius: 6px;
+            font-size: 13px;
+            margin-bottom: 18px;
+            display: none;
+        }
+        .error.active { display: block; }
+    </style>
+</head>
+<body>
+    <div class="login-card">
+        <h1>Mirror Proxy</h1>
+        <p class="subtitle">管理后台登录</p>
+        <div class="error" id="errorMsg"></div>
+        <div class="form-group">
+            <label>用户名</label>
+            <input type="text" id="username" placeholder="请输入用户名" autocomplete="username" autofocus>
+        </div>
+        <div class="form-group">
+            <label>密码</label>
+            <input type="password" id="password" placeholder="请输入密码" autocomplete="current-password">
+        </div>
+        <button class="btn btn-primary" id="loginBtn" onclick="doLogin()">登录</button>
+    </div>
+
+    <script>
+        async function checkAuth() {
+            try {
+                const res = await fetch('/api/auth/me', { credentials: 'same-origin' });
+                if (res.ok) {
+                    window.location.href = '../';
+                }
+            } catch (e) {}
+        }
+        checkAuth();
+
+        async function doLogin() {
+            const username = document.getElementById('username').value.trim();
+            const password = document.getElementById('password').value;
+            const errorEl = document.getElementById('errorMsg');
+            const btn = document.getElementById('loginBtn');
+
+            if (!username || !password) {
+                errorEl.textContent = '请输入用户名和密码';
+                errorEl.classList.add('active');
+                return;
+            }
+
+            btn.textContent = '登录中...';
+            btn.disabled = true;
+
+            try {
+                const res = await fetch('/api/auth/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password })
+                });
+
+                if (res.ok) {
+                    window.location.href = '../';
+                } else {
+                    const data = await res.json().catch(() => ({}));
+                    errorEl.textContent = data.error || '用户名或密码错误';
+                    errorEl.classList.add('active');
+                }
+            } catch (e) {
+                errorEl.textContent = '登录失败: ' + e.message;
+                errorEl.classList.add('active');
+            } finally {
+                btn.textContent = '登录';
+                btn.disabled = false;
+            }
+        }
+
+        document.getElementById('password').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') doLogin();
+        });
+        document.getElementById('username').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') document.getElementById('password').focus();
+        });
+    </script>
+</body>
+</html>