// Login and Captcha Logic for btlabel const initLogin = () => { console.log("Login module initializing..."); const loginForm = document.getElementById('loginForm'); const loginOverlay = document.getElementById('loginOverlay'); const appContainer = document.getElementById('appContainer'); const loginError = document.getElementById('loginError'); const captchaCanvas = document.getElementById('captchaCanvas'); const refreshCaptchaBtn = document.getElementById('refreshCaptcha'); const captchaInput = document.getElementById('captchaInput'); 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'; let result = ''; for (let i = 0; i < 6; i++) { result += chars.charAt(Math.floor(Math.random() * chars.length)); } return result; }; // 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 for (let i = 0; i < 5; i++) { ctx.strokeStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.3)`; ctx.beginPath(); ctx.moveTo(Math.random() * captchaCanvas.width, Math.random() * captchaCanvas.height); ctx.lineTo(Math.random() * captchaCanvas.width, Math.random() * captchaCanvas.height); ctx.stroke(); } for (let i = 0; i < 30; i++) { ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.3)`; ctx.beginPath(); ctx.arc(Math.random() * captchaCanvas.width, Math.random() * captchaCanvas.height, 1, 0, Math.PI * 2); ctx.fill(); } // Draw text ctx.font = 'bold 28px Arial'; ctx.textBaseline = 'middle'; const spacing = captchaCanvas.width / (text.length + 1); for (let i = 0; i < text.length; i++) { ctx.fillStyle = `rgb(${Math.random() * 100}, ${Math.random() * 100}, ${Math.random() * 100})`; const x = spacing * (i + 1); const y = captchaCanvas.height / 2 + (Math.random() * 10 - 5); const angle = (Math.random() * 0.4) - 0.2; ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.fillText(text[i], -12, 12); ctx.restore(); } console.log("Captcha drawn:", text); }; const refreshCaptcha = () => { currentCaptcha = generateCaptcha(); drawCaptcha(currentCaptcha); if (captchaInput) captchaInput.value = ''; }; // Initial captcha refreshCaptcha(); if (refreshCaptchaBtn) { refreshCaptchaBtn.addEventListener('click', refreshCaptcha); } if (loginForm) { loginForm.addEventListener('submit', (e) => { e.preventDefault(); const username = usernameInput.value; const password = passwordInput.value; const captcha = captchaInput.value.toUpperCase(); loginError.style.display = 'none'; if (captcha !== currentCaptcha) { loginError.textContent = 'Invalid security code. Please try again.'; loginError.style.display = 'block'; refreshCaptcha(); return; } 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(); }