refactor: encapsulate login initialization into initLogin function and add robust element existence checks.

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();
+}