btlabel/login.js

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