<div id="login-container">
    <h2>Iniciar Sesión</h2>
    <form id="loginForm">
        <label for="username">Usuario:</label>
        <input type="text" id="username" required>
        <br>
        <label for="password">Contraseña:</label>
        <input type="password" id="password" required>
        <br>
        <button type="submit">Ingresar</button>
    </form>

    <p id="status"></p>

    <script>
        const loginForm = document.getElementById('loginForm');
        const status = document.getElementById('status');

        // URL del JSON en Pastebin (en formato raw)
        const loginDataUrl = 'https://cors-anywhere.herokuapp.com/https://pastebin.com/raw/DeDn0P2j';

        async function fetchLoginData() {
            try {
                const response = await fetch(loginDataUrl);
                if (!response.ok) throw new Error('No se pudo obtener los datos');

                const textData = await response.text();
                const loginData = JSON.parse(textData);
                console.log("Datos de login obtenidos:", loginData);
                return loginData;
            } catch (error) {
                status.textContent = 'Error al obtener los datos del servidor';
                console.error("Error:", error);
                return null;
            }
        }

        loginForm.addEventListener('submit', async (event) => {
            event.preventDefault();

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const loginData = await fetchLoginData();

            if (loginData) {
                if (loginData[username] === password) {
                    status.textContent = 'Login exitoso';
                } else {
                    status.textContent = 'Usuario o contraseña incorrectos';
                }
            } else {
                status.textContent = 'Error al obtener los datos del servidor';
            }
        });
    </script>
</div>