client-side login of my real time chat

socket.on("create_password", ()=> {
    console.log("starting pass");
    CreatePassword();
})

socket.on("login_password", ()=> {
    LoginPassword();
})

socket.on("correct_password", ()=> {
    EndLoginPassword();
})

socket.on("incorrect_password", ()=> {
    console.log("recived inccorect pass");
    IncorrectPassword();
})

socket.on("end_login", () => {
    EndLogin();
});

console.log("test");

function LIstenMessage(){
    document.addEventListener('keydown', function(event) {
        DoMessage(event.key, this_user);
    });
}

function StartLogin(){
    if(localStorage.username){
        this_user.username = localStorage.username;
        AllreadyLogedin();
    }else{
        UsernameLogin();
    }
}

function AllreadyLogedin(){
    $("#login_window").modal();
    $("#username_container").remove();
    $("div p").html("Pozdravljeni nazaj ");
    $("div h6").html(this_user.username+" !");
    $("div h4").html("Login - "+this_user.username);
    EndLogin();
}

write_field_id="login_username";
function UsernameLogin(){
    console.log("test1");
    $("#login_window").modal();
    $("body").keydown(function (event) {
        console.log("test 2");
        WriteToField(event.key, document.getElementById(write_field_id));
    });
}



function CreatePassword(){
    $("div p").html("To uporabniško ime še ne obstaja! Prosim ustvarite si nov račun in vpišite svoje novo poljubno ");
    $("div h6").html("geslo:");
    $("div h4").html("Login - "+this_user.username);
    password_container = $(`<div id='password_container' class='input-group col-md-9 pl-0 mt-4'>
                            <input type='password' id='create_password' name='create_password' class='form-control form-control-lg'>
                        </div>`);

    $(".modal-body").append(password_container);

    write_field_id = "create_password";
}

function RepeatPassword(){
    if($("#matching_error_container")){
        $("#matching_error_container").remove();
    }
    repeat_password_container = $(`<div id='repeat_password_container' class='input-group col-md-11 pl-0 mt-4'>
                                    <input type='password' id='create_repeat_password' name='create_repeat_password' class='form-control form-control-lg'>
                                    <h3 for="create_username" class="ml-4 my-auto">ponovi geslo</h3>
                               </div>`);

    $(".modal-body").append(repeat_password_container);
    write_field_id = "create_repeat_password";
}

function PasswordNotMatching(){
    $("#repeat_password_container").remove();
    $("input[name='create_password']").val("");
    matching_error = $(`<div id='matching_error_container' class='input-group col-md-11 pl-0 mt-4'>
                            <h4 class="ml-4 my-auto text-danger">Gesli se nista ujemali, prosim vpišite svoje poljubno geslo še enkrat</h4>
                        </div>`);

    $(".modal-body").append(matching_error);
    write_field_id = "create_password";
}

function EndCreatePassword(){
    $("#password_container").remove();
    $("#repeat_password_container").remove();
    $("div p").html("Vaš račun je bil ustvarjen pod uporabniškim imenom: ");
    $("div h6").html(this_user.username);
}

function LoginPassword(){
    $("#text_container").remove();
    text_container = $(`<div id='text_container'>
                                <p style="display: inline;" class="login_text ">Pozdravljeni nazaj </p>
                                <h6 style="display: inline;" class="login_text">`+this_user.username+`</h6>
                                <p style="display: inline;" class="login_text "> ! Prosim vpišite svoje </p>
                                <h6 style="display: inline;" class="login_text">geslo:</h6>
                        </div>`);
    $(".modal-body").append(text_container);
    $("div h4").html("Login - "+this_user.username);

    password_container = $(`<div id='password_container' class='input-group col-md-9 pl-0 mt-4'>
                            <input type='password' id='login_password' name='login_password' class='form-control form-control-lg'>
                        </div>`);

    $(".modal-body").append(password_container);

    write_field_id = "login_password";
}

function IncorrectPassword(){
    $("input[name='login_password']").val("");
    console.log("nsadsad");
    if(!$("#incorrect_password_container").length){
        console.log("ni mi več!");
        text_container = $(`<div id='incorrect_password_container' class='input-group col-md-11 pl-0 mt-4'>
                                <h4 class="ml-4 my-auto text-danger">Vnešeno geslo je bilo napačno za uporabniško ime: </h4>
                                <h4 class="ml-4 my-auto text-danger">`+this_user.username+`. Prosim poskusite še enkrat</h4>
                            </div>`);
        $(".modal-body").append(text_container);
    }

}

function EndLoginPassword(){
    if($("#incorrect_password_container").length){
        $("#incorrect_password_container").remove();
    }
    $("#password_container").remove();
    $("#text_container").remove();
    text_container = $(`<div id='text_container'>
                                <p style="display: inline;" class="login_text ">Prijava Uspešna! Veliko zabave </p>
                                <h6 style="display: inline;" class="login_text">`+this_user.username+`</h6>
                        </div>`);
    $(".modal-body").append(text_container);
    EndLogin();
    localStorage.setItem("username", this_user.username);
}

function EndLogin(){
    setTimeout(function(){$(".modal").modal("hide"); LIstenMessage();}, 2000);
    $("body").unbind("keydown");
    socket.emit("logged_in", this_user.username);
}

StartLogin();

function WriteToField(data, field){
    allowed_keys = " ¸1234567890'+qwertzuiopšđasdfghjklčćžyxcvbnm,.-<¨!\"#$%&/()=?*QWERTZUIOPŠĐASDFGHJKLČĆŽ>YXCVBNM;:_¨~ˇ^˘°˛`˙´˝¨¸|€÷×[]łŁß¤@{}<>";
    if(allowed_keys.includes(data)||data==""){
        field.value+=data;
    }
    else if(data == "Enter"){
        if($(field).attr("id")=="login_username"){
            console.log("bout to send username");
            socket.emit("username",field.value);
            this_user.username = field.value;
            $("#username_container").remove();
            //$("body").unbind("keydown");
        }
        if($(field).attr("id")=="create_password"){
            RepeatPassword();
        }
        if($(field).attr("id")=="create_repeat_password"){
            if ($("input[name='create_password']").val() != $("input[name='create_repeat_password']").val()){
                PasswordNotMatching();
            }else{
                EndCreatePassword();
                send_data = [];
                send_data.push(this_user.username);
                send_data.push(field.value);
                socket.emit("save_password",send_data);
            }
        }
        if($(field).attr("id")=="login_password"){
            send_data = [];
            send_data.push(this_user.username);
            send_data.push(field.value);
            socket.emit("check_password", send_data);
        }
    }
    else if(data == "Backspace"){
        if(field.value!=""){
            cur_data = field.value;
            field.value = cur_data.substring(0,cur_data.length-1);
        }
    }
}