|
|
@@ -0,0 +1,545 @@
|
|
|
+package static
|
|
|
+
|
|
|
+// IndexHTML is the embedded admin panel HTML
|
|
|
+var IndexHTML = `<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>FTP Server 管理面板</title>
|
|
|
+ <style>
|
|
|
+ * { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
+ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; color: #333; }
|
|
|
+
|
|
|
+ /* Login Page */
|
|
|
+ .login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
|
|
+ .login-card { background: white; border-radius: 12px; padding: 40px; width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
|
|
|
+ .login-card h1 { text-align: center; margin-bottom: 30px; color: #333; font-size: 24px; }
|
|
|
+ .login-card h1 .icon { font-size: 48px; display: block; margin-bottom: 10px; }
|
|
|
+ .form-group { margin-bottom: 20px; }
|
|
|
+ .form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: #555; font-size: 14px; }
|
|
|
+ .form-group input { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color 0.3s; }
|
|
|
+ .form-group input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
|
|
|
+ .btn { padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s; }
|
|
|
+ .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: white; width: 100%; }
|
|
|
+ .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(102,126,234,0.4); }
|
|
|
+ .btn-danger { background: #dc3545; color: white; }
|
|
|
+ .btn-danger:hover { background: #c82333; }
|
|
|
+ .btn-success { background: #28a745; color: white; }
|
|
|
+ .btn-success:hover { background: #218838; }
|
|
|
+ .btn-sm { padding: 6px 14px; font-size: 12px; }
|
|
|
+ .error-msg { color: #dc3545; text-align: center; margin-top: 12px; font-size: 14px; min-height: 20px; }
|
|
|
+
|
|
|
+ /* Dashboard */
|
|
|
+ .app-container { display: none; }
|
|
|
+ .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 16px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
|
|
|
+ .header h1 { font-size: 20px; font-weight: 600; }
|
|
|
+ .header .user-info { display: flex; align-items: center; gap: 16px; }
|
|
|
+ .header .user-info span { font-size: 14px; opacity: 0.9; }
|
|
|
+
|
|
|
+ .sidebar { position: fixed; left: 0; top: 60px; bottom: 0; width: 220px; background: #fff; box-shadow: 2px 0 10px rgba(0,0,0,0.05); padding-top: 20px; }
|
|
|
+ .sidebar a { display: block; padding: 14px 24px; color: #666; text-decoration: none; font-size: 14px; transition: all 0.3s; border-left: 3px solid transparent; }
|
|
|
+ .sidebar a:hover, .sidebar a.active { background: #f8f9ff; color: #667eea; border-left-color: #667eea; }
|
|
|
+
|
|
|
+ .main-content { margin-left: 220px; padding: 30px; margin-top: 60px; }
|
|
|
+
|
|
|
+ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 30px; }
|
|
|
+ .stat-card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
|
|
|
+ .stat-card .label { color: #888; font-size: 13px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
|
+ .stat-card .value { font-size: 28px; font-weight: 700; color: #333; }
|
|
|
+ .stat-card .value.purple { color: #667eea; }
|
|
|
+ .stat-card .value.green { color: #28a745; }
|
|
|
+ .stat-card .value.blue { color: #007bff; }
|
|
|
+
|
|
|
+ .card { background: white; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 20px; }
|
|
|
+ .card h2 { font-size: 18px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #eee; color: #333; }
|
|
|
+ .card h3 { font-size: 15px; margin-bottom: 16px; color: #555; }
|
|
|
+
|
|
|
+ table { width: 100%; border-collapse: collapse; }
|
|
|
+ th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
|
|
|
+ th { background: #fafafa; font-weight: 600; color: #555; }
|
|
|
+ tr:hover { background: #f8f9ff; }
|
|
|
+
|
|
|
+ .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
|
|
|
+ .badge-success { background: #e8f5e9; color: #28a745; }
|
|
|
+ .badge-secondary { background: #f5f5f5; color: #888; }
|
|
|
+
|
|
|
+ .section { display: none; }
|
|
|
+ .section.active { display: block; }
|
|
|
+
|
|
|
+ .config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
|
+ .config-grid .form-group input, .config-grid .form-group select { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
|
|
|
+ .config-grid .form-group input:focus { outline: none; border-color: #667eea; }
|
|
|
+
|
|
|
+ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
|
|
|
+ .modal-overlay.show { display: flex; }
|
|
|
+ .modal { background: white; border-radius: 12px; padding: 30px; width: 480px; max-width: 90%; }
|
|
|
+ .modal h2 { margin-bottom: 24px; }
|
|
|
+ .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
|
|
|
+
|
|
|
+ .toast { position: fixed; top: 80px; right: 30px; padding: 14px 24px; border-radius: 8px; color: white; font-size: 14px; font-weight: 500; z-index: 2000; animation: slideIn 0.3s ease; }
|
|
|
+ .toast-success { background: #28a745; }
|
|
|
+ .toast-error { background: #dc3545; }
|
|
|
+ @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
|
|
+
|
|
|
+ .actions-cell { display: flex; gap: 8px; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<!-- Login Page -->
|
|
|
+<div class="login-container" id="loginPage">
|
|
|
+ <div class="login-card">
|
|
|
+ <h1><span class="icon">📁</span>FTP Server 管理面板</h1>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>用户名</label>
|
|
|
+ <input type="text" id="loginUser" placeholder="请输入管理员用户名" value="admin">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>密码</label>
|
|
|
+ <input type="password" id="loginPass" placeholder="请输入密码" value="">
|
|
|
+ </div>
|
|
|
+ <button class="btn btn-primary" onclick="doLogin()">登 录</button>
|
|
|
+ <div class="error-msg" id="loginError"></div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- Dashboard -->
|
|
|
+<div class="app-container" id="appContainer">
|
|
|
+ <div class="header">
|
|
|
+ <h1>📁 FTP Server 管理面板</h1>
|
|
|
+ <div class="user-info">
|
|
|
+ <span id="welcomeText">欢迎, Admin</span>
|
|
|
+ <button class="btn btn-sm btn-danger" onclick="doLogout()">退出登录</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sidebar">
|
|
|
+ <a href="#" class="active" onclick="showSection('dashboard', this)">📊 仪表盘</a>
|
|
|
+ <a href="#" onclick="showSection('users', this)">👤 用户管理</a>
|
|
|
+ <a href="#" onclick="showSection('settings', this)">⚙ 系统设置</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="main-content">
|
|
|
+ <!-- Dashboard Section -->
|
|
|
+ <div class="section active" id="section-dashboard">
|
|
|
+ <div class="stats-grid">
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="label">服务状态</div>
|
|
|
+ <div class="value green">运行中</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="label">FTP 端口</div>
|
|
|
+ <div class="value purple" id="statFtpPort">-</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="label">Web 端口</div>
|
|
|
+ <div class="value blue" id="statWebPort">-</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-card">
|
|
|
+ <div class="label">FTP 用户数</div>
|
|
|
+ <div class="value" id="statUserCount">-</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <h2>服务器信息</h2>
|
|
|
+ <table>
|
|
|
+ <tr><td style="width:200px;font-weight:600;">FTP 根目录</td><td id="infoRootDir">-</td></tr>
|
|
|
+ <tr><td style="font-weight:600;">被动模式端口范围</td><td id="infoPassiveRange">-</td></tr>
|
|
|
+ <tr><td style="font-weight:600;">管理面板地址</td><td id="infoWebAddr">-</td></tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Users Section -->
|
|
|
+ <div class="section" id="section-users">
|
|
|
+ <div class="card">
|
|
|
+ <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
|
|
|
+ <h2 style="margin:0;border:none;padding:0;">FTP 用户管理</h2>
|
|
|
+ <button class="btn btn-primary" style="width:auto;background:linear-gradient(135deg,#667eea,#764ba2);" onclick="showAddUserModal()">+ 添加用户</button>
|
|
|
+ </div>
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr><th>用户名</th><th>主目录</th><th>写入权限</th><th>操作</th></tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="userTableBody">
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Settings Section -->
|
|
|
+ <div class="section" id="section-settings">
|
|
|
+ <div class="card">
|
|
|
+ <h2>FTP 服务设置</h2>
|
|
|
+ <div class="config-grid">
|
|
|
+ <div class="form-group">
|
|
|
+ <label>FTP 监听地址</label>
|
|
|
+ <input type="text" id="cfgFtpHost">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>FTP 端口</label>
|
|
|
+ <input type="number" id="cfgFtpPort">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>被动模式起始端口</label>
|
|
|
+ <input type="number" id="cfgPassiveMin">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>被动模式结束端口</label>
|
|
|
+ <input type="number" id="cfgPassiveMax">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>FTP 根目录</label>
|
|
|
+ <input type="text" id="cfgRootDir">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <h2>Web 管理面板设置</h2>
|
|
|
+ <div class="config-grid">
|
|
|
+ <div class="form-group">
|
|
|
+ <label>Web 监听地址</label>
|
|
|
+ <input type="text" id="cfgWebHost">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>Web 端口</label>
|
|
|
+ <input type="number" id="cfgWebPort">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <h2>管理员密码</h2>
|
|
|
+ <div class="config-grid">
|
|
|
+ <div class="form-group">
|
|
|
+ <label>新密码</label>
|
|
|
+ <input type="password" id="cfgAdminPass" placeholder="输入新密码">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>确认密码</label>
|
|
|
+ <input type="password" id="cfgAdminPassConfirm" placeholder="再次输入新密码">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="btn btn-primary" style="width:auto;padding:12px 40px;" onclick="saveSettings()">保存设置</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- Add/Edit User Modal -->
|
|
|
+<div class="modal-overlay" id="userModal">
|
|
|
+ <div class="modal">
|
|
|
+ <h2 id="userModalTitle">添加 FTP 用户</h2>
|
|
|
+ <input type="hidden" id="editUserName">
|
|
|
+ <div class="form-group">
|
|
|
+ <label>用户名</label>
|
|
|
+ <input type="text" id="modalUsername" placeholder="输入用户名">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>密码</label>
|
|
|
+ <input type="password" id="modalPassword" placeholder="输入密码">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>主目录</label>
|
|
|
+ <input type="text" id="modalHomeDir" placeholder="例如: ./ftp_root/user1">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label><input type="checkbox" id="modalWrite" checked> 允许写入</label>
|
|
|
+ </div>
|
|
|
+ <div class="modal-actions">
|
|
|
+ <button class="btn" style="background:#eee;" onclick="closeUserModal()">取消</button>
|
|
|
+ <button class="btn btn-primary" style="width:auto;" onclick="saveUser()">保存</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+let authToken = localStorage.getItem('ftp_admin_token') || '';
|
|
|
+
|
|
|
+// Check auth on load
|
|
|
+window.onload = function() {
|
|
|
+ if (authToken) {
|
|
|
+ checkAuth();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+function checkAuth() {
|
|
|
+ fetch('/api/status', {
|
|
|
+ headers: { 'Authorization': 'Bearer ' + authToken }
|
|
|
+ }).then(r => {
|
|
|
+ if (r.ok) {
|
|
|
+ showDashboard();
|
|
|
+ } else {
|
|
|
+ showLogin();
|
|
|
+ }
|
|
|
+ }).catch(() => showLogin());
|
|
|
+}
|
|
|
+
|
|
|
+function showLogin() {
|
|
|
+ document.getElementById('loginPage').style.display = 'flex';
|
|
|
+ document.getElementById('appContainer').style.display = 'none';
|
|
|
+}
|
|
|
+
|
|
|
+function showDashboard() {
|
|
|
+ document.getElementById('loginPage').style.display = 'none';
|
|
|
+ document.getElementById('appContainer').style.display = 'block';
|
|
|
+ loadStatus();
|
|
|
+ loadUsers();
|
|
|
+ loadConfig();
|
|
|
+}
|
|
|
+
|
|
|
+function doLogin() {
|
|
|
+ const username = document.getElementById('loginUser').value;
|
|
|
+ const password = document.getElementById('loginPass').value;
|
|
|
+ const errorEl = document.getElementById('loginError');
|
|
|
+
|
|
|
+ if (!username || !password) {
|
|
|
+ errorEl.textContent = '请输入用户名和密码';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ fetch('/api/login', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
+ body: JSON.stringify({ username, password })
|
|
|
+ }).then(r => r.json()).then(data => {
|
|
|
+ if (data.token) {
|
|
|
+ authToken = data.token;
|
|
|
+ localStorage.setItem('ftp_admin_token', authToken);
|
|
|
+ showDashboard();
|
|
|
+ } else {
|
|
|
+ errorEl.textContent = data.error || '登录失败';
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ errorEl.textContent = '网络错误';
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function doLogout() {
|
|
|
+ fetch('/api/logout', {
|
|
|
+ headers: { 'Authorization': 'Bearer ' + authToken }
|
|
|
+ }).finally(() => {
|
|
|
+ authToken = '';
|
|
|
+ localStorage.removeItem('ftp_admin_token');
|
|
|
+ showLogin();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function loadStatus() {
|
|
|
+ fetch('/api/status', {
|
|
|
+ headers: { 'Authorization': 'Bearer ' + authToken }
|
|
|
+ }).then(r => r.json()).then(data => {
|
|
|
+ document.getElementById('statFtpPort').textContent = data.ftpPort;
|
|
|
+ document.getElementById('statWebPort').textContent = data.webPort;
|
|
|
+ document.getElementById('statUserCount').textContent = data.userCount;
|
|
|
+ document.getElementById('infoRootDir').textContent = data.rootDir;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function loadConfig() {
|
|
|
+ fetch('/api/config', {
|
|
|
+ headers: { 'Authorization': 'Bearer ' + authToken }
|
|
|
+ }).then(r => r.json()).then(data => {
|
|
|
+ document.getElementById('cfgFtpHost').value = data.ftp.host;
|
|
|
+ document.getElementById('cfgFtpPort').value = data.ftp.port;
|
|
|
+ document.getElementById('cfgPassiveMin').value = data.ftp.passivePortMin;
|
|
|
+ document.getElementById('cfgPassiveMax').value = data.ftp.passivePortMax;
|
|
|
+ document.getElementById('cfgRootDir').value = data.ftp.rootDir;
|
|
|
+ document.getElementById('cfgWebHost').value = data.web.host;
|
|
|
+ document.getElementById('cfgWebPort').value = data.web.port;
|
|
|
+ document.getElementById('infoPassiveRange').textContent = data.ftp.passivePortMin + ' - ' + data.ftp.passivePortMax;
|
|
|
+ document.getElementById('infoWebAddr').textContent = 'http://' + data.web.host + ':' + data.web.port;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function loadUsers() {
|
|
|
+ fetch('/api/users', {
|
|
|
+ headers: { 'Authorization': 'Bearer ' + authToken }
|
|
|
+ }).then(r => r.json()).then(users => {
|
|
|
+ const tbody = document.getElementById('userTableBody');
|
|
|
+ tbody.innerHTML = '';
|
|
|
+ if (users && users.length > 0) {
|
|
|
+ users.forEach(u => {
|
|
|
+ const tr = document.createElement('tr');
|
|
|
+ const writeBadge = u.write ? '<span class="badge badge-success">可写</span>' : '<span class="badge badge-secondary">只读</span>';
|
|
|
+ tr.innerHTML =
|
|
|
+ '<td>' + u.username + '</td>' +
|
|
|
+ '<td>' + u.homeDir + '</td>' +
|
|
|
+ '<td>' + writeBadge + '</td>' +
|
|
|
+ '<td class="actions-cell">' +
|
|
|
+ '<button class="btn btn-sm" style="background:#667eea;color:white;" onclick="editUser(\'' + u.username + '\', \'' + u.homeDir + '\', ' + u.write + ')">编辑</button>' +
|
|
|
+ '<button class="btn btn-sm btn-danger" onclick="deleteUser(\'' + u.username + '\')">删除</button>' +
|
|
|
+ '</td>';
|
|
|
+ tbody.appendChild(tr);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ tbody.innerHTML = '<tr><td colspan="4" style="text-align:center;color:#888;">暂无用户</td></tr>';
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function showSection(name, el) {
|
|
|
+ document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
|
|
|
+ document.getElementById('section-' + name).classList.add('active');
|
|
|
+ document.querySelectorAll('.sidebar a').forEach(a => a.classList.remove('active'));
|
|
|
+ el.classList.add('active');
|
|
|
+
|
|
|
+ if (name === 'dashboard') { loadStatus(); loadConfig(); }
|
|
|
+ if (name === 'users') { loadUsers(); }
|
|
|
+ if (name === 'settings') { loadConfig(); }
|
|
|
+}
|
|
|
+
|
|
|
+function showAddUserModal() {
|
|
|
+ document.getElementById('userModalTitle').textContent = '添加 FTP 用户';
|
|
|
+ document.getElementById('editUserName').value = '';
|
|
|
+ document.getElementById('modalUsername').value = '';
|
|
|
+ document.getElementById('modalUsername').disabled = false;
|
|
|
+ document.getElementById('modalPassword').value = '';
|
|
|
+ document.getElementById('modalHomeDir').value = '';
|
|
|
+ document.getElementById('modalWrite').checked = true;
|
|
|
+ document.getElementById('userModal').classList.add('show');
|
|
|
+}
|
|
|
+
|
|
|
+function editUser(username, homeDir, write) {
|
|
|
+ document.getElementById('userModalTitle').textContent = '编辑 FTP 用户';
|
|
|
+ document.getElementById('editUserName').value = username;
|
|
|
+ document.getElementById('modalUsername').value = username;
|
|
|
+ document.getElementById('modalUsername').disabled = true;
|
|
|
+ document.getElementById('modalPassword').value = '';
|
|
|
+ document.getElementById('modalPassword').placeholder = '留空则不修改密码';
|
|
|
+ document.getElementById('modalHomeDir').value = homeDir;
|
|
|
+ document.getElementById('modalWrite').checked = write;
|
|
|
+ document.getElementById('userModal').classList.add('show');
|
|
|
+}
|
|
|
+
|
|
|
+function closeUserModal() {
|
|
|
+ document.getElementById('userModal').classList.remove('show');
|
|
|
+ document.getElementById('modalPassword').placeholder = '输入密码';
|
|
|
+}
|
|
|
+
|
|
|
+function saveUser() {
|
|
|
+ const editUser = document.getElementById('editUserName').value;
|
|
|
+ const username = document.getElementById('modalUsername').value;
|
|
|
+ const password = document.getElementById('modalPassword').value;
|
|
|
+ const homeDir = document.getElementById('modalHomeDir').value;
|
|
|
+ const write = document.getElementById('modalWrite').checked;
|
|
|
+
|
|
|
+ if (!username) { showToast('请输入用户名', 'error'); return; }
|
|
|
+
|
|
|
+ if (editUser) {
|
|
|
+ // Update existing user
|
|
|
+ const user = { username, homeDir, write };
|
|
|
+ if (password) user.password = password;
|
|
|
+ else {
|
|
|
+ // Keep existing password - send a flag
|
|
|
+ user.keepPassword = true;
|
|
|
+ }
|
|
|
+ fetch('/api/users/update', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken },
|
|
|
+ body: JSON.stringify({ username: editUser, user })
|
|
|
+ }).then(r => r.json()).then(data => {
|
|
|
+ if (data.status === 'ok') {
|
|
|
+ showToast('用户已更新');
|
|
|
+ loadUsers();
|
|
|
+ closeUserModal();
|
|
|
+ } else {
|
|
|
+ showToast(data.error || '更新失败', 'error');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // Add new user
|
|
|
+ if (!password) { showToast('请输入密码', 'error'); return; }
|
|
|
+ fetch('/api/users/add', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken },
|
|
|
+ body: JSON.stringify({ username, password, homeDir, write })
|
|
|
+ }).then(r => r.json()).then(data => {
|
|
|
+ if (data.status === 'ok') {
|
|
|
+ showToast('用户已添加');
|
|
|
+ loadUsers();
|
|
|
+ closeUserModal();
|
|
|
+ } else {
|
|
|
+ showToast(data.error || '添加失败', 'error');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function deleteUser(username) {
|
|
|
+ if (!confirm('确定要删除用户 "' + username + '" 吗?')) return;
|
|
|
+
|
|
|
+ fetch('/api/users/delete', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken },
|
|
|
+ body: JSON.stringify({ username })
|
|
|
+ }).then(r => r.json()).then(data => {
|
|
|
+ if (data.status === 'ok') {
|
|
|
+ showToast('用户已删除');
|
|
|
+ loadUsers();
|
|
|
+ } else {
|
|
|
+ showToast(data.error || '删除失败', 'error');
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function saveSettings() {
|
|
|
+ const adminPass = document.getElementById('cfgAdminPass').value;
|
|
|
+ const adminPassConfirm = document.getElementById('cfgAdminPassConfirm').value;
|
|
|
+
|
|
|
+ if (adminPass && adminPass !== adminPassConfirm) {
|
|
|
+ showToast('两次密码输入不一致', 'error');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const update = {
|
|
|
+ ftp: {
|
|
|
+ host: document.getElementById('cfgFtpHost').value,
|
|
|
+ port: parseInt(document.getElementById('cfgFtpPort').value),
|
|
|
+ passivePortMin: parseInt(document.getElementById('cfgPassiveMin').value),
|
|
|
+ passivePortMax: parseInt(document.getElementById('cfgPassiveMax').value),
|
|
|
+ rootDir: document.getElementById('cfgRootDir').value
|
|
|
+ },
|
|
|
+ web: {
|
|
|
+ host: document.getElementById('cfgWebHost').value,
|
|
|
+ port: parseInt(document.getElementById('cfgWebPort').value)
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ if (adminPass) {
|
|
|
+ update.adminPassword = adminPass;
|
|
|
+ }
|
|
|
+
|
|
|
+ fetch('/api/config/update', {
|
|
|
+ method: 'POST',
|
|
|
+ headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken },
|
|
|
+ body: JSON.stringify(update)
|
|
|
+ }).then(r => r.json()).then(data => {
|
|
|
+ if (data.status === 'ok') {
|
|
|
+ showToast('设置已保存,部分设置需重启服务生效');
|
|
|
+ document.getElementById('cfgAdminPass').value = '';
|
|
|
+ document.getElementById('cfgAdminPassConfirm').value = '';
|
|
|
+ loadConfig();
|
|
|
+ loadStatus();
|
|
|
+ } else {
|
|
|
+ showToast(data.error || '保存失败', 'error');
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function showToast(msg, type) {
|
|
|
+ const toast = document.createElement('div');
|
|
|
+ toast.className = 'toast ' + (type === 'error' ? 'toast-error' : 'toast-success');
|
|
|
+ toast.textContent = msg;
|
|
|
+ document.body.appendChild(toast);
|
|
|
+ setTimeout(() => toast.remove(), 3000);
|
|
|
+}
|
|
|
+
|
|
|
+// Handle Enter key on login
|
|
|
+document.getElementById('loginPass').addEventListener('keypress', function(e) {
|
|
|
+ if (e.key === 'Enter') doLogin();
|
|
|
+});
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+`
|