document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value;

    // Simple front-end validation example:
    if (username === "" || password === "") {
        showMessage("Please enter both username and password.");
        return;
    }

    // Send login information to backend (app.py) to store in Salesforce
    fetch('/store-login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username: username, password: password })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            showMessage("Login info stored in Salesforce!", "green");
        } else {
            showMessage("Failed to store login info in Salesforce.");
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showMessage("An error occurred.");
    });
});

function showMessage(msg, color = "red") {
    const messageElem = document.getElementById('message');
    messageElem.textContent = msg;
    messageElem.style.color = color;
}