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,22 +66,26 @@ 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();
 
+    if (refreshCaptchaBtn) {
         refreshCaptchaBtn.addEventListener('click', refreshCaptcha);
+    }
 
+    if (loginForm) {
         loginForm.addEventListener('submit', (e) => {
             e.preventDefault();
 
@@ -91,14 +102,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 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();
                     }
@@ -109,4 +117,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 refreshCaptcha();
             }
         });
-});
+    }
+};
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initLogin);
+} else {
+    initLogin();
+}