import { ClientResponseError } from './vendor/pocketbase.es.js';
import { database } from './index.js';

/** @type {HTMLFormElement} */
const inlogformulier = document.getElementById('loginform');

inlogformulier.addEventListener('submit', async (event) => {
    event.preventDefault(); // Voorkomt dat de pagina gaat herladen

    const formdata = new FormData(inlogformulier);

    try {
        const email = formdata.get('email');
        const wachtwoord = formdata.get('wachtwoord');

        await database.collection('gebruikers').authWithPassword(email, wachtwoord);

        verbergFoutmeldingen();

        // Inloggen gelukt, ga naar andere pagina
        window.location.href = 'index.html';
    } catch (e) {
        /** @type {ClientResponseError} */
        const error = e;

        if (error.status === 400) {
            toonFoutmeldingen();
        }
    }
});

function toonFoutmeldingen() {
    // Toon foutmelding
    document.getElementById('foutmelding').classList.remove('verborgen');

    // Maak wachtwoord, email rood
    Array.from(document.getElementsByTagName('input'))
        .forEach(veld => veld.ariaInvalid = true);
}

function verbergFoutmeldingen() {
    document.getElementById('foutmelding').classList.add('verborgen');
    Array.from(document.getElementsByTagName('input'))
        .forEach(veld => veld.ariaInvalid = undefined);
}