diff --git a/login.js b/login.js index 4fed751..2ca9d70 100644 --- a/login.js +++ b/login.js @@ -1,6 +1,7 @@ // Login and Captcha Logic for btlabel -document.addEventListener('DOMContentLoaded', () => { +const initLogin = () => { + console.log("Login module initializing..."); const loginForm = document.getElementById('loginForm'); const loginOverlay = document.getElementById('loginOverlay'); const appContainer = document.getElementById('appContainer'); @@ -11,11 +12,16 @@ document.addEventListener('DOMContentLoaded', () => { const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); + if (!captchaCanvas) { + console.error("Captcha canvas not found!"); + return; + } + let currentCaptcha = ''; // Generate random captcha string const generateCaptcha = () => { - const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // Exclude similar looking chars like 0, O, I, 1 + const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; let result = ''; for (let i = 0; i < 6; i++) { result += chars.charAt(Math.floor(Math.random() * chars.length)); @@ -26,9 +32,11 @@ document.addEventListener('DOMContentLoaded', () => { // Draw captcha on canvas const drawCaptcha = (text) => { const ctx = captchaCanvas.getContext('2d'); + if (!ctx) return; + ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height); - // Background noise - lines + // Background noise for (let i = 0; i < 5; i++) { ctx.strokeStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.3)`; ctx.beginPath(); @@ -37,7 +45,6 @@ document.addEventListener('DOMContentLoaded', () => { ctx.stroke(); } - // Background noise - dots for (let i = 0; i < 30; i++) { ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.3)`; ctx.beginPath(); @@ -46,7 +53,7 @@ document.addEventListener('DOMContentLoaded', () => { } // Draw text - ctx.font = 'bold 30px Arial'; + ctx.font = 'bold 28px Arial'; ctx.textBaseline = 'middle'; const spacing = captchaCanvas.width / (text.length + 1); @@ -59,54 +66,62 @@ document.addEventListener('DOMContentLoaded', () => { ctx.save(); ctx.translate(x, y); ctx.rotate(angle); - ctx.fillText(text[i], -10, 10); + ctx.fillText(text[i], -12, 12); ctx.restore(); } + console.log("Captcha drawn:", text); }; const refreshCaptcha = () => { currentCaptcha = generateCaptcha(); drawCaptcha(currentCaptcha); - captchaInput.value = ''; + if (captchaInput) captchaInput.value = ''; }; // Initial captcha refreshCaptcha(); - refreshCaptchaBtn.addEventListener('click', refreshCaptcha); + if (refreshCaptchaBtn) { + refreshCaptchaBtn.addEventListener('click', refreshCaptcha); + } - loginForm.addEventListener('submit', (e) => { - e.preventDefault(); + if (loginForm) { + loginForm.addEventListener('submit', (e) => { + e.preventDefault(); - const username = usernameInput.value; - const password = passwordInput.value; - const captcha = captchaInput.value.toUpperCase(); + const username = usernameInput.value; + const password = passwordInput.value; + const captcha = captchaInput.value.toUpperCase(); - loginError.style.display = 'none'; + loginError.style.display = 'none'; - if (captcha !== currentCaptcha) { - loginError.textContent = 'Invalid security code. Please try again.'; - loginError.style.display = 'block'; - refreshCaptcha(); - return; - } + if (captcha !== currentCaptcha) { + loginError.textContent = 'Invalid security code. Please try again.'; + loginError.style.display = 'block'; + refreshCaptcha(); + return; + } - // Placeholder credentials - if (username === 'admin' && password === 'admin') { - // Success - loginOverlay.style.opacity = '0'; - setTimeout(() => { - loginOverlay.style.display = 'none'; - appContainer.style.display = 'block'; - // Trigger any initializations needed for the app - if (typeof updatePreview === 'function') { - updatePreview(); - } - }, 500); - } else { - loginError.textContent = 'Invalid username or password.'; - loginError.style.display = 'block'; - refreshCaptcha(); - } - }); -}); + if (username === 'admin' && password === 'admin') { + loginOverlay.style.opacity = '0'; + setTimeout(() => { + loginOverlay.style.display = 'none'; + appContainer.style.display = 'block'; + if (typeof updatePreview === 'function') { + updatePreview(); + } + }, 500); + } else { + loginError.textContent = 'Invalid username or password.'; + loginError.style.display = 'block'; + refreshCaptcha(); + } + }); + } +}; + +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initLogin); +} else { + initLogin(); +}