jukka/tykkaa.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bot protection (honeypot + captcha) to registration form

Browse Source 
Same spam protection as the post submission and comment forms:
hidden honeypot field and a simple math captcha question.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jukka Lampikoski
2026-03-08 11:53:40 +02:00
parent 5d02a682b0
commit 69902035ab
1 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
script.js
View File

@@ -697,12 +697,22 @@ function saveLocalLikes(arr) {
// AUTH // AUTH
// =========================== // ===========================
let authMode = 'login'; let authMode = 'login';
let authCaptchaAnswer = 0;
function generateAuthCaptcha() {
const a = Math.floor(Math.random() * 9) + 1;
const b = Math.floor(Math.random() * 9) + 1;
authCaptchaAnswer = a + b;
const qEl = document.getElementById('auth-captcha-question');
if (qEl) qEl.textContent = `Laske: ${a} + ${b} = ?`;
}
function openAuthModal(mode = 'login') { function openAuthModal(mode = 'login') {
authMode = mode; authMode = mode;
renderAuthForm(); renderAuthForm();
document.getElementById('authOverlay').classList.add('open'); document.getElementById('authOverlay').classList.add('open');
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
if (mode === 'register') generateAuthCaptcha();
} }
function closeAuthModal() { function closeAuthModal() {
@@ -726,6 +736,13 @@ function renderAuthForm() {
<label>${t('password_ph')}</label> <label>${t('password_ph')}</label>
<input type="password" id="auth-password" placeholder="${t('password_ph')}" maxlength="100" /> <input type="password" id="auth-password" placeholder="${t('password_ph')}" maxlength="100" />
</div> </div>
${!isLogin ? `
<input type="text" name="website" id="auth-honeypot" tabindex="-1" autocomplete="off" style="display:none" />
<div class="captcha-row">
<label class="captcha-label" id="auth-captcha-question"></label>
<input type="number" id="auth-captcha-input" placeholder="Vastaus" required min="0" max="99" style="width:100px" />
</div>
` : ''}
<p class="auth-error" id="auth-error"></p> <p class="auth-error" id="auth-error"></p>
<button class="submit-btn" onclick="submitAuth()">${isLogin ? t('login_submit') : t('register_submit')}</button> <button class="submit-btn" onclick="submitAuth()">${isLogin ? t('login_submit') : t('register_submit')}</button>
<p class="auth-switch" onclick="openAuthModal('${isLogin ? 'register' : 'login'}')"> <p class="auth-switch" onclick="openAuthModal('${isLogin ? 'register' : 'login'}')">
@@ -750,6 +767,22 @@ async function submitAuth() {
return; return;
} }
if (authMode === 'register') {
// Honeypot
const hp = document.getElementById('auth-honeypot');
if (hp && hp.value) return;
// CAPTCHA
const captchaVal = parseInt(document.getElementById('auth-captcha-input').value, 10);
if (captchaVal !== authCaptchaAnswer) {
errEl.textContent = 'Väärä vastaus captchaan!';
errEl.style.display = 'block';
document.getElementById('auth-captcha-input').value = '';
generateAuthCaptcha();
return;
}
}
const action = authMode === 'login' ? 'user_login' : 'user_register'; const action = authMode === 'login' ? 'user_login' : 'user_register';
const body = { nickname, password }; const body = { nickname, password };
if (authMode === 'register') body.email = email; if (authMode === 'register') body.email = email;