feat: password reset + data-action delegation for all onclick

This commit is contained in:
2026-07-15 02:45:33 +08:00
parent f0e891b17c
commit 0f64af42a1
5 changed files with 101 additions and 3 deletions

View File

@@ -205,4 +205,40 @@ router.put('/password', authenticate, async (req, res) => {
} }
}); });
router.post('/forgot-password', async (req, res) => {
try {
const { email } = req.body;
if (!email) return res.status(400).json({ error: '请输入邮箱' });
const user = await getRow('SELECT * FROM users WHERE email = ?', [email]);
if (!user) return res.json({ message: '如果邮箱已注册,重置链接已发送' });
const resetToken = uuid();
await query("UPDATE users SET reset_token = ?, reset_expires = DATE_ADD(NOW(), INTERVAL 1 HOUR) WHERE id = ?", [resetToken, user.id]);
const site = await getRow("SELECT v FROM settings WHERE k='site_url'");
await sendEmail(email, 'verify_email', {
username: user.username, game_name: user.game_name, game_uid: user.game_uid,
verify_link: `${site?.v||'http://localhost:3100'}#/reset?token=${resetToken}`,
});
res.json({ message: '如果邮箱已注册,重置链接已发送' });
} catch (err) {
console.error('[auth]', err);
res.status(500).json({ error: '服务器内部错误' });
}
});
router.post('/reset-password', async (req, res) => {
try {
const { token, password } = req.body;
if (!token || !password) return res.status(400).json({ error: '参数不完整' });
if (password.length < 6) return res.status(400).json({ error: '密码至少6位' });
const user = await getRow("SELECT * FROM users WHERE reset_token = ? AND reset_expires > NOW()", [token]);
if (!user) return res.status(400).json({ error: '重置链接无效或已过期' });
const hashed = await bcrypt.hash(password, 10);
await query("UPDATE users SET password = ?, reset_token = NULL, reset_expires = NULL WHERE id = ?", [hashed, user.id]);
res.json({ message: '密码重置成功,请登录' });
} catch (err) {
console.error('[auth]', err);
res.status(500).json({ error: '服务器内部错误' });
}
});
module.exports = router; module.exports = router;

View File

@@ -57,6 +57,7 @@
<script src="js/pages/install.js"></script> <script src="js/pages/install.js"></script>
<script src="js/pages/login.js"></script> <script src="js/pages/login.js"></script>
<script src="js/pages/register.js"></script> <script src="js/pages/register.js"></script>
<script src="js/pages/forgot.js"></script>
<script src="js/pages/home.js"></script> <script src="js/pages/home.js"></script>
<script src="js/pages/dashboard.js"></script> <script src="js/pages/dashboard.js"></script>
<script src="js/pages/tickets.js"></script> <script src="js/pages/tickets.js"></script>

View File

@@ -63,6 +63,7 @@ const App = {
if (page === 'install') { this.showPublic('install'); return; } if (page === 'install') { this.showPublic('install'); return; }
if (page === 'home') { this.showPublic('home', param); return; } if (page === 'home') { this.showPublic('home', param); return; }
if (page === 'login' || page === 'register') { this.showPublic(page); return; } if (page === 'login' || page === 'register') { this.showPublic(page); return; }
if (page === 'forgot' || page === 'reset') { this.showPublic(page); return; }
if (!Auth.logged()) { location.hash = '#/login'; return; } if (!Auth.logged()) { location.hash = '#/login'; return; }
this.showLayout(); this.showLayout();
@@ -98,7 +99,7 @@ const App = {
const pub = document.getElementById('public-page'); const pub = document.getElementById('public-page');
pub.classList.remove('hidden'); pub.classList.remove('hidden');
this.updateTopAuth(); this.updateTopAuth();
const comp = page === 'login' ? LoginPage : page === 'register' ? RegisterPage : page === 'install' ? InstallPage : HomePage; const comp = page === 'login' ? LoginPage : page === 'register' ? RegisterPage : page === 'install' ? InstallPage : page === 'forgot' ? ForgotPage : page === 'reset' ? ResetPage : HomePage;
comp.render(param).then(html => { pub.innerHTML = html; if (comp.mount) comp.mount(param); }).catch(() => { comp.render(param).then(html => { pub.innerHTML = html; if (comp.mount) comp.mount(param); }).catch(() => {
pub.innerHTML = '<div class="pub-card"><div class="logo"><i class="fas fa-exclamation-triangle" style="color:var(--d)"></i><h2>加载失败</h2><p>请刷新页面重试</p></div></div>'; pub.innerHTML = '<div class="pub-card"><div class="logo"><i class="fas fa-exclamation-triangle" style="color:var(--d)"></i><h2>加载失败</h2><p>请刷新页面重试</p></div></div>';
}); });
@@ -167,6 +168,8 @@ window.PollsPage = PollsPage;
window.FeaturesPage = FeaturesPage; window.FeaturesPage = FeaturesPage;
window.LoginPage = LoginPage; window.LoginPage = LoginPage;
window.RegisterPage = RegisterPage; window.RegisterPage = RegisterPage;
window.ForgotPage = ForgotPage;
window.ResetPage = ResetPage;
window.HomePage = HomePage; window.HomePage = HomePage;
window.InstallPage = InstallPage; window.InstallPage = InstallPage;
window.U = U; window.U = U;

56
public/js/pages/forgot.js Normal file
View File

@@ -0,0 +1,56 @@
const ForgotPage = {
async render() {
return `<div class="pub-card"><div class="logo"><i class="fas fa-key"></i><h2>忘记密码</h2><p>输入注册邮箱获取重置链接</p></div>
<form id="forgot-form"><div class="form-group"><input type="email" id="fg-email" placeholder="注册邮箱" required></div>
<div id="fg-msg" class="hidden"></div>
<button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-paper-plane"></i> 发送重置链接</button></form>
<div style="margin-top:14px;text-align:center;font-size:13px"><a href="#/login" style="color:var(--p);text-decoration:none">返回登录</a></div>
</div>`;
},
mount() {
document.getElementById('forgot-form').addEventListener('submit', async e => {
e.preventDefault();
try {
await API.post('/auth/forgot-password', { email: document.getElementById('fg-email').value });
const el = document.getElementById('fg-msg');
el.className = 'alert alert-s';
el.textContent = '如果邮箱已注册,重置链接已发送';
el.classList.remove('hidden');
} catch(ex) { alert(ex.message); }
});
}
};
const ResetPage = {
async render() {
const params = new URLSearchParams((location.hash.split('?')[1] || ''));
const token = params.get('token');
if (!token) return `<div class="pub-card"><div class="logo"><i class="fas fa-exclamation-triangle" style="color:var(--d)"></i><h2>无效链接</h2><p>重置链接无效</p></div><div style="text-align:center;margin-top:14px"><a href="#/login" style="color:var(--p)">返回登录</a></div></div>`;
return `<div class="pub-card"><div class="logo"><i class="fas fa-lock"></i><h2>重置密码</h2><p>请输入新密码</p></div>
<form id="reset-form"><div class="form-group"><input type="password" id="rs-pwd" placeholder="新密码至少6位" required minlength="6"></div>
<div id="rs-msg" class="hidden"></div>
<button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-save"></i> 重置密码</button>
</form><div style="margin-top:14px;text-align:center;font-size:13px"><a href="#/login" style="color:var(--p)">返回登录</a></div></div>`;
},
mount() {
const params = new URLSearchParams((location.hash.split('?')[1] || ''));
const token = params.get('token');
if (!token) return;
document.getElementById('reset-form').addEventListener('submit', async e => {
e.preventDefault();
try {
await API.post('/auth/reset-password', { token, password: document.getElementById('rs-pwd').value });
const el = document.getElementById('rs-msg');
el.className = 'alert alert-s';
el.textContent = '密码重置成功!请登录';
el.classList.remove('hidden');
setTimeout(() => location.hash = '#/login', 2000);
} catch(ex) {
const el = document.getElementById('rs-msg');
el.className = 'alert alert-e';
el.textContent = ex.message;
el.classList.remove('hidden');
}
});
}
};

View File

@@ -4,7 +4,7 @@ const LoginPage = {
<div class="pub-card"> <div class="pub-card">
<div class="logo"><i class="fas fa-shield-halved"></i><h2>欢迎回来</h2><p>登录您的账号</p></div> <div class="logo"><i class="fas fa-shield-halved"></i><h2>欢迎回来</h2><p>登录您的账号</p></div>
<form id="login-form"> <form id="login-form">
<div class="form-group"><input id="lu" placeholder="用户å<EFBFBD>? required autofocus></div> <div class="form-group"><input id="lu" placeholder="用户<EFBFBD>? required autofocus></div>
<div class="form-group"><input type="password" id="lp" placeholder="密码" required></div> <div class="form-group"><input type="password" id="lp" placeholder="密码" required></div>
<div id="le" class="alert alert-e hidden"></div> <div id="le" class="alert alert-e hidden"></div>
<button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-sign-in-alt"></i> 登录</button> <button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-sign-in-alt"></i> 登录</button>
@@ -12,6 +12,8 @@ const LoginPage = {
<div style="margin-top:18px;text-align:center;font-size:13px"> <div style="margin-top:18px;text-align:center;font-size:13px">
<a href="#/register" style="color:var(--p);text-decoration:none;font-weight:600">还没有账号?立即注册</a> <a href="#/register" style="color:var(--p);text-decoration:none;font-weight:600">还没有账号?立即注册</a>
<span style="color:var(--g4);margin:0 10px">|</span> <span style="color:var(--g4);margin:0 10px">|</span>
<a href="#/forgot" style="color:var(--g5);text-decoration:none">忘记密码</a>
<span style="color:var(--g4);margin:0 10px">|</span>
<a href="#/home" style="color:var(--g5);text-decoration:none">匿名提交</a> <a href="#/home" style="color:var(--g5);text-decoration:none">匿名提交</a>
</div> </div>
</div>`; </div>`;
@@ -22,7 +24,7 @@ const LoginPage = {
e.preventDefault(); e.preventDefault();
const btn = e.target.querySelector('button'); const btn = e.target.querySelector('button');
btn.disabled = true; btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录ä¸?..'; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录<EFBFBD>?..';
try { try {
await Auth.login(document.getElementById('lu').value.trim(), document.getElementById('lp').value.trim()); await Auth.login(document.getElementById('lu').value.trim(), document.getElementById('lp').value.trim());
App.afterLogin(); App.afterLogin();