guowei/debt-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2.4.1: 修复 2FA 登录和前端数据加载问题

Browse Source 
- 修复登录接口 response_model 导致 2FA 返回格式验证失败(500错误)
- 修复 showProfile 未调用 loadTwofaStatus 导致 2FA 状态一直显示加载中
- 修复 hideOthers 默认值为 false 确保管理员可查看所有数据
- 删除重复的 doLogin 函数
- 删除残留的代码片段修复 JavaScript 语法错误
This commit is contained in:
OP
2026-07-02 18:04:39 +08:00
parent 056c4defec
commit a0c57e0f21
6 changed files with 436 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
frontend/index.html
View File

@@ -361,6 +361,17 @@ body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text"
.auth-card h2{font-size:18px;margin-bottom:20px}
}
/* 2FA */
.twofa-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.twofa-status{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.twofa-badge{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600}
.twofa-badge.enabled{background:rgba(52,199,89,.1);color:var(--green)}
.twofa-badge.disabled{background:rgba(0,0,0,.04);color:var(--text3)}
.twofa-qr{display:flex;justify-content:center;margin:16px 0}
.twofa-qr img{border:1px solid var(--border);border-radius:8px}
.twofa-input{display:flex;gap:8px;align-items:center}
.twofa-input input{flex:1}
</style>
</head>
<body>
@@ -539,7 +550,7 @@ let openGroups=new Set();
let editId=null;
let hidePaidItems=true;
let hidePaidMonths=true;
let hideOthers=true;
let hideOthers=false;
let quickPayLoanId=null;
let actionLoanId=null;
@@ -592,6 +603,7 @@ function showProfile(){
$('profileError').style.display='none';
$('profileSuccess').style.display='none';
$('profileModal').classList.add('show');
loadTwofaStatus();
}
function closeProfile(){$('profileModal').classList.remove('show');}
@@ -641,6 +653,158 @@ async function saveProfile(){
setTimeout(()=>{closeProfile();},1000);
}
// 2FA 相关函数
let twofaTempToken = '';
function showTwofaModal(tempToken) {
twofaTempToken = tempToken;
$('twofaCode').value = '';
$('twofaError').style.display = 'none';
$('twofaModal').classList.add('show');
}
function closeTwofaModal() {
$('twofaModal').classList.remove('show');
twofaTempToken = '';
}
async function verifyTwofaLogin() {
const code = $('twofaCode').value.trim();
if (!code || code.length !== 6) {
$('twofaError').textContent = '请输入 6 位验证码';
$('twofaError').style.display = '';
return;
}
try {
const res = await fetch(API + '/auth/2fa/verify-login', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({temp_token: twofaTempToken, code})
});
if (res.ok) {
const data = await res.json();
token = data.access_token;
refreshToken = data.refresh_token;
localStorage.setItem('access_token', token);
localStorage.setItem('refresh_token', refreshToken);
closeTwofaModal();
await checkAuth();
await loadLoans();
} else {
const data = await res.json().catch(() => ({}));
$('twofaError').textContent = data.detail || '验证失败';
$('twofaError').style.display = '';
}
} catch(e) {
$('twofaError').textContent = '网络异常';
$('twofaError').style.display = '';
}
}
// 修改 doLogin 处理 2FA
// 2FA 设置相关函数
async function loadTwofaStatus() {
const res = await apiFetch('/auth/2fa/status');
if (res && res.ok) {
const data = await res.json();
const statusEl = document.getElementById('twofaStatus');
if (statusEl) {
if (data.enabled) {
statusEl.innerHTML = '<span class="twofa-badge enabled">已启用</span><button class="btn btn-ghost" style="margin-left:8px;padding:4px 12px;font-size:11px" onclick="showDisableTwofa()">禁用</button>';
} else {
statusEl.innerHTML = '<span class="twofa-badge disabled">未启用</span><button class="btn btn-main" style="margin-left:8px;padding:4px 12px;font-size:11px" onclick="startSetupTwofa()">启用</button>';
}
}
}
}
let twofaSetupSecret = '';
let twofaSetupUrl = '';
async function startSetupTwofa() {
const res = await apiFetch('/auth/2fa/setup', {method: 'POST'});
if (res && res.ok) {
const data = await res.json();
twofaSetupSecret = data.secret;
twofaSetupUrl = data.otpauth_url;
const qrSection = document.getElementById('twofaSetupSection');
const qrImg = document.getElementById('twofaQrCode');
const secretText = document.getElementById('twofaSecret');
if (qrImg) qrImg.src = data.qr_code;
if (secretText) secretText.textContent = data.secret;
if (qrSection) qrSection.style.display = '';
}
}
async function verifyTwofaSetup() {
const code = $('twofaSetupCode').value.trim();
if (!code || code.length !== 6) {
alert('请输入 6 位验证码');
return;
}
const res = await apiFetch('/auth/2fa/verify', {
method: 'POST',
body: JSON.stringify({code})
});
if (res && res.ok) {
alert('双因素认证已启用');
$('twofaSetupSection').style.display = 'none';
loadTwofaStatus();
} else {
const data = await res.json().catch(() => ({}));
alert(data.detail || '验证失败');
}
}
async function showDisableTwofa() {
const code = prompt('请输入当前验证码以禁用 2FA：');
if (!code) return;
const res = await apiFetch('/auth/2fa/disable', {
method: 'POST',
body: JSON.stringify({code})
});
if (res && res.ok) {
alert('双因素认证已禁用');
loadTwofaStatus();
} else {
const data = await res.json().catch(() => ({}));
alert(data.detail || '禁用失败');
}
}
async function doLogin(){
const account=$('loginEmail').value.trim(),pwd=$('loginPwd').value;
if(!account||!pwd)return showLoginError('请输入账号和密码');
hideLoginError();
try{
const res=await fetch(API+'/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({account,password:pwd})});
const data=await res.json();
if(!res.ok){
if(res.status===429&&data.retry_after){startLoginCountdown(data.retry_after);}
else{showLoginError(data.detail||'登录失败');}
return;
}
// 检查是否需要 2FA
if(data.require_2fa){
showTwofaModal(data.temp_token);
return;
}
token=data.access_token;refreshToken=data.refresh_token;
localStorage.setItem('access_token',token);localStorage.setItem('refresh_token',refreshToken);
await checkAuth();await loadLoans();
}catch(e){showLoginError('网络连接异常，请稍后重试');}
}
async function checkAuth(){
if(!token){showLogin();return false;}
const res=await apiFetch('/auth/profile');
@@ -674,12 +838,7 @@ function startLoginCountdown(seconds){
tick();
loginCountdown=setInterval(tick,1000);
}
async function doLogin(){
const account=$('loginEmail').value.trim(),pwd=$('loginPwd').value;
if(!account||!pwd)return showLoginError('请输入账号和密码');
hideLoginError();
try{const res=await fetch(API+'/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({account,password:pwd})});const data=await res.json();if(!res.ok){if(res.status===429&&data.retry_after){startLoginCountdown(data.retry_after);}else{showLoginError(data.detail||'登录失败');}return;}token=data.access_token;refreshToken=data.refresh_token;localStorage.setItem('access_token',token);localStorage.setItem('refresh_token',refreshToken);await checkAuth();await loadLoans();}catch(e){showLoginError('网络连接异常，请稍后重试');}
}
async function doRegister(){
const account=$('regEmail').value.trim(),nick=$('regNick').value.trim(),pwd=$('regPwd').value,pwd2=$('regPwd2').value;
if(!account||!pwd)return $('regError').textContent='请填写账号和密码';
@@ -852,7 +1011,34 @@ function exportHTML(e){e.preventDefault();const vl=getVisibleLoans();if(!vl.leng
.auth-card h2{font-size:18px;margin-bottom:20px}
}
/* 2FA */
.twofa-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.twofa-status{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.twofa-badge{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600}
.twofa-badge.enabled{background:rgba(52,199,89,.1);color:var(--green)}
.twofa-badge.disabled{background:rgba(0,0,0,.04);color:var(--text3)}
.twofa-qr{display:flex;justify-content:center;margin:16px 0}
.twofa-qr img{border:1px solid var(--border);border-radius:8px}
.twofa-input{display:flex;gap:8px;align-items:center}
.twofa-input input{flex:1}
</style></head><body><h2>债务统计报表 - ${today()}</h2>`;vl.forEach(l=>{const ti=l.schedule.reduce((s,r)=>s+r.it,0);const st=l.paid.length>=l.periods;h+=`<h3>${escapeHtml(l.name)} - ${l.date} - ¥${fmt(l.amount)}${st?' <span class="done">已还清</span>':''}</h3><p>年化率 ${l.rate}% · ${methodLabel(l.method)} · ${l.periods}期 · 总利息 ¥${ti.toFixed(2)}</p><table><tr><th>期数</th><th>日期</th><th>还款额</th><th>本金</th><th>利息</th><th>剩余本金</th><th>状态</th><th>用途</th></tr>`;l.schedule.forEach(r=>{h+=`<tr><td>${r.p}</td><td>${r.date}</td><td>¥${fmt(r.pay)}</td><td>¥${fmt(r.pr)}</td><td>¥${fmt(r.it)}</td><td>¥${fmt(r.rp)}</td><td>${l.paid.includes(r.p)?'✓ 已还':'待还'}</td></tr>`;});h+=`</table>`;});h+=`
<div class="modal-mask" id="twofaModal">
<div class="modal">
<h3>双因素认证</h3>
<p style="font-size:13px;color:var(--text2);margin-bottom:16px;text-align:center">请输入手机验证器应用中的 6 位验证码</p>
<div class="form-row">
<input type="text" id="twofaCode" placeholder="000000" maxlength="6" style="text-align:center;font-size:24px;letter-spacing:8px;font-weight:600">
</div>
<div id="twofaError" class="error-msg" style="display:none"></div>
<div class="btn-row">
<button class="btn btn-ghost" onclick="closeTwofaModal()">取消</button>
<button class="btn btn-main" onclick="verifyTwofaLogin()">验证</button>
</div>
</div>
</div>
<div class="modal-mask" id="profileModal">
<div class="modal" style="max-width:480px">
<h3>个人中心</h3>
@@ -870,6 +1056,26 @@ function exportHTML(e){e.preventDefault();const vl=getVisibleLoans();if(!vl.leng
<label>验证码</label>
<input type="text" id="profileEmailCode" placeholder="请输入6位验证码" maxlength="6">
</div>
<div class="twofa-section">
<label style="display:block;font-size:13px;font-weight:500;margin-bottom:8px">双因素认证 (2FA)</label>
<div class="twofa-status" id="twofaStatus">
<span class="twofa-badge disabled">加载中...</span>
</div>
<div id="twofaSetupSection" style="display:none">
<p style="font-size:12px;color:var(--text2);margin-bottom:12px">请使用 Google Authenticator 等应用扫描下方二维码：</p>
<div class="twofa-qr"><img id="twofaQrCode" width="200" height="200"></div>
<p style="font-size:11px;color:var(--text3);text-align:center;margin-bottom:12px">或手动输入密钥：<code id="twofaSecret" style="background:#f5f5f7;padding:2px 6px;border-radius:4px"></code></p>
<div class="form-row">
<label>验证码</label>
<div class="twofa-input">
<input type="text" id="twofaSetupCode" placeholder="输入 6 位验证码" maxlength="6">
<button class="btn btn-main" style="flex:none;width:auto;padding:8px 16px;font-size:12px" onclick="verifyTwofaSetup()">确认启用</button>
</div>
</div>
</div>
</div>
<div id="profileError" class="error-msg" style="display:none"></div>
<div id="profileSuccess" class="success-msg" style="display:none"></div>
<div class="btn-row">
@@ -952,6 +1158,22 @@ async function doForgotStep3(){
checkAuth().then(ok=>{if(ok)loadLoans();});
</script>
<div class="modal-mask" id="twofaModal">
<div class="modal">
<h3>双因素认证</h3>
<p style="font-size:13px;color:var(--text2);margin-bottom:16px;text-align:center">请输入手机验证器应用中的 6 位验证码</p>
<div class="form-row">
<input type="text" id="twofaCode" placeholder="000000" maxlength="6" style="text-align:center;font-size:24px;letter-spacing:8px;font-weight:600">
</div>
<div id="twofaError" class="error-msg" style="display:none"></div>
<div class="btn-row">
<button class="btn btn-ghost" onclick="closeTwofaModal()">取消</button>
<button class="btn btn-main" onclick="verifyTwofaLogin()">验证</button>
</div>
</div>
</div>
<div class="modal-mask" id="profileModal">
<div class="modal" style="max-width:480px">
<h3>个人中心</h3>
@@ -969,6 +1191,26 @@ checkAuth().then(ok=>{if(ok)loadLoans();});
<label>验证码</label>
<input type="text" id="profileEmailCode" placeholder="请输入6位验证码" maxlength="6">
</div>
<div class="twofa-section">
<label style="display:block;font-size:13px;font-weight:500;margin-bottom:8px">双因素认证 (2FA)</label>
<div class="twofa-status" id="twofaStatus">
<span class="twofa-badge disabled">加载中...</span>
</div>
<div id="twofaSetupSection" style="display:none">
<p style="font-size:12px;color:var(--text2);margin-bottom:12px">请使用 Google Authenticator 等应用扫描下方二维码：</p>
<div class="twofa-qr"><img id="twofaQrCode" width="200" height="200"></div>
<p style="font-size:11px;color:var(--text3);text-align:center;margin-bottom:12px">或手动输入密钥：<code id="twofaSecret" style="background:#f5f5f7;padding:2px 6px;border-radius:4px"></code></p>
<div class="form-row">
<label>验证码</label>
<div class="twofa-input">
<input type="text" id="twofaSetupCode" placeholder="输入 6 位验证码" maxlength="6">
<button class="btn btn-main" style="flex:none;width:auto;padding:8px 16px;font-size:12px" onclick="verifyTwofaSetup()">确认启用</button>
</div>
</div>
</div>
</div>
<div id="profileError" class="error-msg" style="display:none"></div>
<div id="profileSuccess" class="success-msg" style="display:none"></div>
<div class="btn-row">