var passwordInput = document.querySelector("#password");
var retypePasswordInput = document.querySelector("#retype_password");
var passwordMessage = document.querySelector("#passwordMessage");
var retypePasswordMessage = document.querySelector("#retypePasswordMessage");

var username = document.querySelector("#username");
var userNameMessage = document.querySelector("#userNameMessage");

username.addEventListener("input",checkUsername);

passwordInput.addEventListener("input", checkPassword);
retypePasswordInput.addEventListener("input", checkRetypePassword);

function checkPassword() {
    if (passwordInput.value.length < 6 || passwordInput.value.length == 0) {
        passwordMessage.innerHTML = "Passwort ist zu kurz";
        passwordMessage.style.color = "red";
        passwordMessage.style.margin = 0;
    } else {
        passwordMessage.innerHTML = "Passwort sieht gut aus!";
        passwordMessage.style.color = "green";
    }
    checkRetypePassword();
}

function checkRetypePassword() {
    if (retypePasswordInput.value !== passwordInput.value) {
        retypePasswordMessage.innerHTML = "Passwörter stimmen nicht überein!";
        retypePasswordMessage.style.color = "red";
    } else {
        retypePasswordMessage.innerHTML = "Passwörter sind identisch";
        retypePasswordMessage.style.color = "green";
    }
}


function checkUsername(){
    if (username.value.includes("@")){
        userNameMessage.innerHTML = "Benutzername darf nur Buchstaben und Zahlen enthalten!";
        userNameMessage.style.color="red";
        userNameMessage.style.margin=0;
    }else
        userNameMessage.innerHTML = "";

}