update pwd change
This commit is contained in:
wjqserver
parent
b91daad8ad
commit
47b6f4903f
13 changed files with 572 additions and 90 deletions
|
|
@ -19,9 +19,8 @@
|
|||
</header>
|
||||
<nav class="sidebar-nav">
|
||||
<ul>
|
||||
<li><a href="#" class="active"><i class="fa-solid fa-sitemap"></i> <span>配置管理</span></a></li>
|
||||
<li><a href="#"><i class="fa-solid fa-chart-line"></i> <span>仪表盘 (预留)</span></a></li>
|
||||
<li><a href="#"><i class="fa-solid fa-puzzle-piece"></i> <span>模板管理 (预留)</span></a></li>
|
||||
<li><a href="/" class="active"><i class="fa-solid fa-sitemap"></i> <span>配置管理</span></a></li>
|
||||
<li><a href="/settings.html" data-nav-id="settings"><i class="fa-solid fa-gears"></i> <span>面板设置</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sidebar-bottom">
|
||||
|
|
|
|||
|
|
@ -2,13 +2,12 @@
|
|||
|
||||
import { state } from './state.js';
|
||||
import { api } from './api.js';
|
||||
import { initTheme } from './theme.js';
|
||||
import { theme, toast, activateNav } from './common.js';
|
||||
import { notification } from './notifications.js';
|
||||
import { DOMElements, switchView, renderConfigList, addKeyValueInput, addSingleInput, fillForm, showRenderedConfig, updateCaddyStatusView, updateSegmentedControl, updateServiceModeView, updateMultiUpstreamView } from './ui.js';
|
||||
|
||||
const POLLING_INTERVAL = 5000;
|
||||
let caddyStatusInterval;
|
||||
import { initCaddyStatus } from './caddy.js';
|
||||
import { DOMElements, switchView, renderConfigList, addKeyValueInput, addSingleInput, fillForm, showRenderedConfig, updateSegmentedControl, updateServiceModeView, updateMultiUpstreamView } from './ui.js';
|
||||
|
||||
// --- 事件处理与逻辑流 ---
|
||||
function getFormStateAsString() {
|
||||
const formData = new FormData(DOMElements.configForm);
|
||||
const data = {};
|
||||
|
|
@ -29,36 +28,6 @@ async function attemptExitForm() {
|
|||
if (await notification.confirm('您有未保存的更改。确定要放弃吗？')) switchView(DOMElements.configListPanel);
|
||||
} else switchView(DOMElements.configListPanel);
|
||||
}
|
||||
async function checkCaddyStatus() {
|
||||
try {
|
||||
const response = await api.get('/caddy/status');
|
||||
updateCaddyStatusView(response.message === 'Caddy is running' ? 'running' : 'stopped', caddyHandlers);
|
||||
} catch (error) { console.error('Error checking Caddy status:', error); updateCaddyStatusView('error', caddyHandlers); }
|
||||
}
|
||||
async function handleStartCaddy() {
|
||||
try {
|
||||
const result = await api.post('/caddy/run');
|
||||
notification.toast(result.message || '启动命令已发送。', 'success');
|
||||
setTimeout(checkCaddyStatus, 500);
|
||||
} catch (error) { notification.toast(`启动失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
async function handleStopCaddy() {
|
||||
if (!await notification.confirm('您确定要停止 Caddy 实例吗?')) return;
|
||||
try {
|
||||
const result = await api.post('/caddy/stop');
|
||||
notification.toast(result.message || '停止命令已发送。', 'info');
|
||||
setTimeout(checkCaddyStatus, 500);
|
||||
} catch(error) { notification.toast(`操作失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
async function handleReloadCaddy() {
|
||||
if (!await notification.confirm('确定要重载 Caddy 配置吗?')) return;
|
||||
try {
|
||||
const result = await api.post('/caddy/restart');
|
||||
notification.toast(result.message || '重载命令已发送。', 'success');
|
||||
setTimeout(checkCaddyStatus, 500);
|
||||
} catch(error) { notification.toast(`重载失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
const caddyHandlers = { handleStartCaddy, handleStopCaddy, handleReloadCaddy };
|
||||
async function handleLogout() {
|
||||
if (!await notification.confirm('您确定要退出登录吗?')) return;
|
||||
notification.toast('正在退出...', 'info');
|
||||
|
|
@ -81,11 +50,8 @@ async function handleEditConfig(originalFilename) {
|
|||
DOMElements.formTitle.textContent = '编辑配置';
|
||||
fillForm(config, originalFilename);
|
||||
showRenderedConfig(rendered, originalFilename);
|
||||
|
||||
// 关键修正: 在填充表单后, 根据数据更新服务模式的fieldset可见性
|
||||
const mode = config.upstream_config?.enable_upstream ? 'reverse_proxy' : (config.file_server_config?.enable_file_server ? 'file_server' : 'none');
|
||||
updateServiceModeView(mode);
|
||||
|
||||
state.initialFormState = getFormStateAsString();
|
||||
} catch(error) { notification.toast(`加载配置详情失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
|
|
@ -150,12 +116,14 @@ async function handleSaveConfig(e) {
|
|||
} catch(error) { notification.toast(`保存失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
|
||||
// --- 初始化与事件绑定 ---
|
||||
function init() {
|
||||
initTheme(DOMElements.themeToggleInput);
|
||||
theme.init(DOMElements.themeToggleInput);
|
||||
notification.init(DOMElements.toastContainer, DOMElements.dialogContainer);
|
||||
activateNav('configs');
|
||||
initCaddyStatus(); // 初始化通用Caddy状态检查
|
||||
|
||||
loadAllConfigs();
|
||||
checkCaddyStatus();
|
||||
caddyStatusInterval = setInterval(checkCaddyStatus, POLLING_INTERVAL);
|
||||
|
||||
DOMElements.menuToggleBtn.addEventListener('click', () => DOMElements.sidebar.classList.toggle('is-open'));
|
||||
DOMElements.mainContent.addEventListener('click', () => DOMElements.sidebar.classList.remove('is-open'));
|
||||
|
|
|
|||
98
frontend/js/caddy.js
Normal file
98
frontend/js/caddy.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
// js/caddy.js - Caddy 实例状态管理与控制
|
||||
|
||||
import { api } from './api.js';
|
||||
import { notification } from './notifications.js';
|
||||
|
||||
let caddyStatusInterval;
|
||||
const POLLING_INTERVAL = 5000;
|
||||
|
||||
const DOMElements = {
|
||||
caddyStatusIndicator: document.getElementById('caddy-status-indicator'),
|
||||
caddyActionButtonContainer: document.getElementById('caddy-action-button-container'),
|
||||
};
|
||||
|
||||
function createButton(text, className, onClick) {
|
||||
const button = document.createElement('button');
|
||||
button.className = `btn ${className}`;
|
||||
button.innerHTML = `<span>${text}</span>`;
|
||||
button.addEventListener('click', onClick);
|
||||
return button;
|
||||
}
|
||||
|
||||
function updateCaddyStatusView(status) {
|
||||
const dot = DOMElements.caddyStatusIndicator.querySelector('.status-dot');
|
||||
const text = DOMElements.caddyStatusIndicator.querySelector('.status-text');
|
||||
const buttonContainer = DOMElements.caddyActionButtonContainer;
|
||||
|
||||
if(!dot || !text || !buttonContainer) return; // 如果元素不存在,则不执行
|
||||
|
||||
dot.className = 'status-dot';
|
||||
buttonContainer.innerHTML = '';
|
||||
let statusText, dotClass;
|
||||
switch (status) {
|
||||
case 'running':
|
||||
statusText = '运行中'; dotClass = 'running';
|
||||
buttonContainer.appendChild(createButton('重载配置', 'btn-warning', handleReloadCaddy));
|
||||
buttonContainer.appendChild(createButton('停止 Caddy', 'btn-danger', handleStopCaddy));
|
||||
break;
|
||||
case 'stopped':
|
||||
statusText = '已停止'; dotClass = 'stopped';
|
||||
buttonContainer.appendChild(createButton('启动 Caddy', 'btn-success', handleStartCaddy));
|
||||
break;
|
||||
case 'checking': statusText = '检查中...'; dotClass = 'checking'; break;
|
||||
default: statusText = '状态未知'; dotClass = 'error'; break;
|
||||
}
|
||||
text.textContent = statusText;
|
||||
dot.classList.add(dotClass);
|
||||
}
|
||||
|
||||
async function checkCaddyStatus() {
|
||||
try {
|
||||
const response = await api.get('/caddy/status');
|
||||
updateCaddyStatusView(response.message === 'Caddy is running' ? 'running' : 'stopped');
|
||||
} catch (error) {
|
||||
console.error('Error checking Caddy status:', error);
|
||||
updateCaddyStatusView('error');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStartCaddy() {
|
||||
try {
|
||||
const result = await api.post('/caddy/run');
|
||||
notification.toast(result.message || '启动命令已发送。', 'success');
|
||||
setTimeout(checkCaddyStatus, 500);
|
||||
} catch (error) { notification.toast(`启动失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
|
||||
async function handleStopCaddy() {
|
||||
if (!await notification.confirm('您确定要停止 Caddy 实例吗?')) return;
|
||||
try {
|
||||
const result = await api.post('/caddy/stop');
|
||||
notification.toast(result.message || '停止命令已发送。', 'info');
|
||||
setTimeout(checkCaddyStatus, 500);
|
||||
} catch(error) { notification.toast(`操作失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
|
||||
async function handleReloadCaddy() {
|
||||
if (!await notification.confirm('确定要重载 Caddy 配置吗?')) return;
|
||||
try {
|
||||
const result = await api.post('/caddy/restart');
|
||||
notification.toast(result.message || '重载命令已发送。', 'success');
|
||||
setTimeout(checkCaddyStatus, 500);
|
||||
} catch(error) { notification.toast(`重载失败: ${error.message}`, 'error'); }
|
||||
}
|
||||
|
||||
export function initCaddyStatus() {
|
||||
// 确保通知模块已经初始化
|
||||
const dialogContainer = document.getElementById('dialog-container');
|
||||
const toastContainer = document.getElementById('toast-container');
|
||||
if (dialogContainer && toastContainer) {
|
||||
notification.init(toastContainer, dialogContainer);
|
||||
}
|
||||
|
||||
checkCaddyStatus();
|
||||
if (caddyStatusInterval) {
|
||||
clearInterval(caddyStatusInterval);
|
||||
}
|
||||
caddyStatusInterval = setInterval(checkCaddyStatus, POLLING_INTERVAL);
|
||||
}
|
||||
59
frontend/js/common.js
Normal file
59
frontend/js/common.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
// js/common.js - 存放共享模块
|
||||
|
||||
const theme = {
|
||||
init: (toggleElement) => {
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const currentTheme = storedTheme || (systemPrefersDark ? 'dark' : 'light');
|
||||
theme.apply(currentTheme);
|
||||
if (toggleElement) {
|
||||
toggleElement.addEventListener('change', (e) => theme.apply(e.target.checked ? 'dark' : 'light'));
|
||||
}
|
||||
},
|
||||
apply: (themeName) => {
|
||||
document.documentElement.dataset.theme = themeName;
|
||||
localStorage.setItem('theme', themeName);
|
||||
const themeToggleInput = document.getElementById('theme-toggle-input');
|
||||
if (themeToggleInput) {
|
||||
themeToggleInput.checked = themeName === 'dark';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function hideToast(toastElement) {
|
||||
if (!toastElement) return;
|
||||
toastElement.classList.remove('show');
|
||||
toastElement.addEventListener('transitionend', () => toastElement.remove(), { once: true });
|
||||
}
|
||||
|
||||
const toast = {
|
||||
show: (message, type = 'info', duration = 3000) => {
|
||||
const toastContainer = document.getElementById('toast-container');
|
||||
if (!toastContainer) return;
|
||||
const icons = { success: 'fa-check-circle', error: 'fa-times-circle', info: 'fa-info-circle' };
|
||||
const iconClass = icons[type] || 'fa-info-circle';
|
||||
const toastElement = document.createElement('div');
|
||||
toastElement.className = `toast ${type}`;
|
||||
toastElement.innerHTML = `<i class="toast-icon fa-solid ${iconClass}"></i><p class="toast-message">${message}</p><button class="toast-close" data-toast-close>×</button>`;
|
||||
toastContainer.appendChild(toastElement);
|
||||
requestAnimationFrame(() => toastElement.classList.add('show'));
|
||||
const timeoutId = setTimeout(() => hideToast(toastElement), duration);
|
||||
toastElement.querySelector('[data-toast-close]').addEventListener('click', () => {
|
||||
clearTimeout(timeoutId);
|
||||
hideToast(toastElement);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function activateNav(pageId) {
|
||||
const navLinks = document.querySelectorAll('.sidebar-nav a');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.dataset.navId === pageId) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 导出模块
|
||||
export { theme, toast, activateNav };
|
||||
100
frontend/js/settings.js
Normal file
100
frontend/js/settings.js
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
// js/settings.js - 设置页面的逻辑
|
||||
|
||||
import { theme, toast, activateNav } from './common.js';
|
||||
import { initCaddyStatus } from './caddy.js'; // 导入 Caddy 状态模块
|
||||
import { notification } from './notifications.js'; // 导入通知模块
|
||||
|
||||
const RESET_PWD_API_URL = '/v0/api/auth/resetpwd';
|
||||
const LOGOUT_API_URL = '/v0/api/auth/logout';
|
||||
|
||||
const DOMElements = {
|
||||
resetForm: document.getElementById('reset-password-form'),
|
||||
themeToggleInput: document.getElementById('theme-toggle-input'),
|
||||
logoutBtn: document.getElementById('logout-btn'),
|
||||
toastContainer: document.getElementById('toast-container'),
|
||||
dialogContainer: document.getElementById('dialog-container'),
|
||||
};
|
||||
const resetButton = DOMElements.resetForm.querySelector('button[type="submit"]');
|
||||
|
||||
async function handleResetPassword(e) {
|
||||
e.preventDefault();
|
||||
const newPassword = DOMElements.resetForm.new_password.value;
|
||||
const confirmPassword = DOMElements.resetForm.confirm_new_password.value;
|
||||
|
||||
//保证字段均不为空, 用户名 密码 新密码
|
||||
const currentPassword = DOMElements.resetForm.old_password.value;
|
||||
const username = DOMElements.resetForm.username.value;
|
||||
|
||||
if (username === '') {
|
||||
toast.show('用户名不能为空', 'error');
|
||||
DOMElements.resetForm.username.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentPassword === '') {
|
||||
toast.show('当前密码不能为空', 'error');
|
||||
DOMElements.resetForm.old_password.focus();
|
||||
return;
|
||||
}
|
||||
if (newPassword === '') {
|
||||
notification.toast('新密码不能为空', 'error');
|
||||
DOMElements.resetForm.new_password.focus();
|
||||
return;
|
||||
}
|
||||
if (confirmPassword === '') {
|
||||
notification.toast('确认新密码不能为空', 'error');
|
||||
DOMElements.resetForm.confirm_new_password.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
notification.toast('新密码与确认密码不匹配', 'error');
|
||||
return;
|
||||
}
|
||||
if (newPassword.length < 8) {
|
||||
notification.toast('新密码长度至少为8位', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
resetButton.disabled = true;
|
||||
resetButton.querySelector('span').textContent = '重置中...';
|
||||
|
||||
const formData = new FormData(DOMElements.resetForm);
|
||||
|
||||
try {
|
||||
const response = await fetch(RESET_PWD_API_URL, {
|
||||
method: 'POST',
|
||||
body: new URLSearchParams(formData),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (response.ok) {
|
||||
notification.toast('密码重置成功！请重新登录。', 'success');
|
||||
setTimeout(() => { window.location.href = LOGOUT_API_URL; }, 1500);
|
||||
} else {
|
||||
throw new Error(result.error || '重置密码失败');
|
||||
}
|
||||
} catch (error) {
|
||||
notification.toast(error.message, 'error');
|
||||
resetButton.disabled = false;
|
||||
resetButton.querySelector('span').textContent = '重置密码';
|
||||
}
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
if (await notification.confirm('您确定要退出登录吗?')) {
|
||||
notification.toast('正在退出...', 'info');
|
||||
setTimeout(() => { window.location.href = LOGOUT_API_URL; }, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
theme.init(DOMElements.themeToggleInput);
|
||||
notification.init(DOMElements.toastContainer, DOMElements.dialogContainer);
|
||||
activateNav('settings');
|
||||
initCaddyStatus(); // 初始化通用Caddy状态检查
|
||||
|
||||
DOMElements.resetForm.addEventListener('submit', handleResetPassword);
|
||||
DOMElements.logoutBtn.addEventListener('click', handleLogout);
|
||||
}
|
||||
|
||||
init();
|
||||
89
frontend/settings.html
Normal file
89
frontend/settings.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>面板设置 - CaddyDash</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<!-- 侧边栏 (与 index.html 完全相同) -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<header class="sidebar-header">
|
||||
<i class="fa-solid fa-rocket"></i>
|
||||
<h1>CaddyDash</h1>
|
||||
</header>
|
||||
<nav class="sidebar-nav">
|
||||
<ul>
|
||||
<li><a href="/" data-nav-id="configs"><i class="fa-solid fa-sitemap"></i> <span>配置管理</span></a></li>
|
||||
<li><a href="/settings.html" data-nav-id="settings"><i class="fa-solid fa-gears"></i>
|
||||
<span>面板设置</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="sidebar-bottom">
|
||||
<div class="theme-switcher"><i class="fa-solid fa-sun"></i><label class="switch"><input type="checkbox"
|
||||
id="theme-toggle-input"><span class="slider"></span></label><i class="fa-solid fa-moon"></i>
|
||||
</div>
|
||||
<div class="caddy-control-panel">
|
||||
<div id="caddy-status-indicator" class="caddy-status"><span class="status-dot checking"></span><span
|
||||
class="status-text">检查中...</span></div>
|
||||
<div id="caddy-action-button-container"></div>
|
||||
</div>
|
||||
<div class="logout-section"><button id="logout-btn" class="btn btn-secondary"><i
|
||||
class="fa-solid fa-right-from-bracket"></i><span>退出登录</span></button></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<header class="main-header">
|
||||
<button class="btn-icon" id="menu-toggle-btn"><i class="fa-solid fa-bars"></i></button>
|
||||
<h2>面板设置</h2>
|
||||
</header>
|
||||
|
||||
<div id="view-container">
|
||||
<section class="card-panel">
|
||||
<h3>账户安全</h3>
|
||||
<form id="reset-password-form" style="margin-top: 24px;">
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" id="username" name="username" autocomplete="username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="old_password">当前密码</label>
|
||||
<input type="password" id="old_password" name="old_password"
|
||||
autocomplete="current-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new_password">新密码 (至少8位)</label>
|
||||
<input type="password" id="new_password" name="new_password" autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirm_new_password">确认新密码</label>
|
||||
<input type="password" id="confirm_new_password" name="confirm_new_password"
|
||||
autocomplete="new-password">
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary"><i class="fa-solid fa-key"></i>
|
||||
<span>重置密码</span></button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
<div id="dialog-container"></div>
|
||||
|
||||
<script type="module" src="js/common.js"></script>
|
||||
<script type="module" src="js/settings.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue