Sea-Studio/MC_Report
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: SVG image captcha with noise and color distortion

Browse Source
This commit is contained in:
canglan
2026-07-13 18:33:31 +08:00
parent befd51dbd5
commit bc16833a57
4 changed files with 70 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/js/pages/register.js
View File

@@ -17,10 +17,13 @@ const RegisterPage = {
</div>
<div class="form-group"><label>密码 *</label><input type="password" id="rp" required placeholder="至少6位"></div>
${this.captcha ? `
<div class="form-group" style="display:flex;align-items:center;gap:10px">
<div style="flex-shrink:0;background:var(--g100);padding:6px 14px;border-radius:var(--r);font-weight:700;font-size:16px;letter-spacing:1px;user-select:none" id="captcha-q">${this.captcha.question}</div>
<input type="text" id="captcha-a" placeholder="输入答案" required style="max-width:100px">
<input type="hidden" id="captcha-id" value="${this.captcha.id}">
<div class="form-group"><label>验证码</label>
<div style="display:flex;align-items:center;gap:10px">
<div id="captcha-img" style="flex-shrink:0;border:1px solid var(--g200);border-radius:var(--r);overflow:hidden;cursor:pointer" onclick="RegisterPage.refreshCaptcha()" title="点击刷新">${this.captcha.svg}</div>
<input type="text" id="captcha-a" placeholder="输入图片字符" required style="max-width:100px">
<input type="hidden" id="captcha-id" value="${this.captcha.id}">
</div>
<div class="help">点击图片刷新验证码</div>
</div>` : ''}
<div id="regerr" class="alert alert-e hidden"></div>
<div id="regok" class="alert alert-s hidden"></div>
@@ -34,6 +37,15 @@ const RegisterPage = {
</div>`;
},
async refreshCaptcha() {
try {
const c = await API.get('/captcha');
document.getElementById('captcha-img').innerHTML = c.svg;
document.getElementById('captcha-id').value = c.id;
document.getElementById('captcha-a').value = '';
} catch {}
},
mount() {
document.getElementById('reg-form').addEventListener('submit', async e => {
e.preventDefault();