async function register() {
    let username = document.getElementById("username").value;
    let password = document.getElementById("password").value;
    let passwordConfirm = document.getElementById("passwordConfirm").value;
    if (!check_username(username) || !check_password(password) || password !== passwordConfirm) {
        return;
    }
    let status = await fetch("/register", {method: "POST", body: JSON.stringify({"username": username, "password": password})}).then(r => r.status)
    if (status === 200) {
        window.location.href = "/login";
    } else if (status === 400) {
        document.getElementById("message").textContent = "Cet utilisateur existe déjà!"
    }
}

function check_username(username) {
    return username.match(/^[0-9a-zA-Z]+$/);
}

function check_password(password) {
    return password.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!-/:-@[-`{-~]).{8,}$/)
}

let button = document.getElementById("register");

button.addEventListener("click", () => {
    let _ = register();
})

let username = document.getElementById("username");

username.addEventListener("input", () => {
    if (check_username(username.value)) {
        document.getElementById("usernameNotice").className = "ok";
    } else {
        document.getElementById("usernameNotice").className = "error";
    }
})

let password = document.getElementById("password");

password.addEventListener("input", () => {
    if (check_password(password.value)) {
        document.getElementById("passwordNotice").className = "ok";
    } else {
        document.getElementById("passwordNotice").className = "error";
    }
})

let passwordConfirm = document.getElementById("passwordConfirm");

passwordConfirm.addEventListener("input", () => {
    if (passwordConfirm.value === password.value) {
        document.getElementById("passwordConfirmNotice").className = "ok";
    } else {
        document.getElementById("passwordConfirmNotice").className = "error";
    }
})