setting.js

document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('login-form');
    const settingsContent = document.getElementById('settings-content');
    const passwordInput = document.getElementById('password-input');
    const loginBtn = document.getElementById('login-btn');
    const logoutBtn = document.getElementById('logout-btn');
    const saveBtn = document.getElementById('save-btn');
    const errorMessage = document.getElementById('error-message');

    // Check authentication state
    chrome.storage.local.get(['isAuthenticated', 'settings', 'passwordHash'], function(data) {
        if (data.isAuthenticated) {
            showSettings();
            loadSettings(data.settings || {});
        }
    });

    // Login handler
    loginBtn.addEventListener('click', authenticate);

    // Password input - allow Enter key to submit
    passwordInput.addEventListener('keyup', function(e) {
        if (e.key === 'Enter') authenticate();
    });

    // Logout handler
    logoutBtn.addEventListener('click', function() {
        chrome.storage.local.set({ isAuthenticated: false });
        showLogin();
        passwordInput.value = '';
    });

    // Save settings handler
    saveBtn.addEventListener('click', function() {
        const newPassword = document.getElementById('new-password').value;
        const confirmPassword = document.getElementById('confirm-password').value;
        
        // Get current settings
        const settings = {
            blockImages: document.getElementById('block-images').checked,
            blockWords: document.getElementById('block-words').checked
        };

        // Update password if new one provided
        if (newPassword && confirmPassword) {
            if (newPassword !== confirmPassword) {
                alert("Passwords don't match!");
                return;
            }
            // In production, you should hash the password here
            chrome.storage.local.set({ passwordHash: newPassword });
            document.getElementById('new-password').value = '';
            document.getElementById('confirm-password').value = '';
        }

        // Save all settings
        chrome.storage.local.set({ 
            settings: settings,
            isAuthenticated: true // Keep logged in after save
        }, function() {
            alert('Settings saved successfully!');
        });
    });

    function authenticate() {
        const enteredPassword = passwordInput.value;
        
        chrome.storage.local.get(['passwordHash'], function(data) {
            // In production, you would hash the entered password and compare
            const storedPassword = data.passwordHash || 'admin123'; // Default password
            
            if (enteredPassword === storedPassword) {
                chrome.storage.local.set({ isAuthenticated: true });
                showSettings();
                loadSettings();
            } else {
                errorMessage.textContent = "Incorrect password!";
                passwordInput.value = '';
            }
        });
    }

    function showSettings() {
        loginForm.style.display = 'none';
        settingsContent.style.display = 'block';
    }

    function showLogin() {
        loginForm.style.display = 'block';
        settingsContent.style.display = 'none';
        errorMessage.textContent = '';
    }

    function loadSettings(settings) {
        document.getElementById('block-images').checked = settings.blockImages !== false;
        document.getElementById('block-words').checked = settings.blockWords !== false;
    }
});