Game-Jaming/Frontend/Javascript/LoginFunctionality.js

$(document).ready(function () {
    let selectedGameJam;
    let displayValue = 0;
    let AvailableJams = [
        {"id": "-1", "Gamejam": "Vælg aktivt GameJam"}
    ];

    let GroupName = getCookie('groupName');
    let GroupId = getCookie('groupId');

    // Control Logged in users
    if (GroupId != null)
    {
        LoggedInUser();
    }
    //

    // Register Start

    // Populate select with options from the database
    axios.get('/Backend/Controllers/GameJam/GetGameJam.php')
    .then(function(res) {
        let resArr = res.data.data;

        for(let i = 0; i < resArr.length; i++)
        {
            AvailableJams.push({
                id: resArr[i].id, 
                Gamejam: resArr[i].name
            });
        }

        $.each(AvailableJams, function(i, data) {
            if (i === 0)
            {
                $('#GameJamSelect').append('<option disabled selected value="' + data.id + '">' + data.Gamejam + '</option>');
            }
            else
            {
                $('#GameJamSelect').append('<option value="' + data.id + '">' + data.Gamejam + '</option>');
            }
        });
    })
    .catch(function(err) {
        console.log(err);
    });

    // Remove invalidInput if selected option has been changed
    $('#GameJamSelect').change(function() {
        selectedGameJam = $('#GameJamSelect').children("option:selected").val();
        
        if (selectedGameJam >= 1)
        {
            $('#GameJamSelect').removeClass('invalidInput');
        }
    });

    // Remove invalidInput if change in group name has been detected
    $('#username').on('input', function() {
        if ($(this).hasClass('invalidInput'))
        {
            $(this).removeClass('invalidInput');
        }
    })

    GetGroupNames().then(function(res) {
        let resArr = res.data;
        let groupNameTaken = false;

        $('#RegisterBtn').click(function() {
            let groupName = $('#username').val();

            for(let i = 0; i < resArr.length; i++)
            {
                if (resArr[i].group_name.toUpperCase() === groupName.toUpperCase())
                {
                    groupNameTaken = true;
                    break;
                }
                else 
                {
                    groupNameTaken = false;
                }
            }
        });

        // Check data before submitting
        $('#RegisterForm').submit(function(e) {

            if(!selectedGameJam >= 1) 
            {
                $('#GameJamSelect').addClass('invalidInput');
                e.preventDefault();
                return false;
            }
            else
            {
                $('#gameJamId').val($('#GameJamSelect option:selected').val());
            }

            if($('#pass1').val().length === 0)
            {
                $('#pass1').addClass('invalidInput');
                e.preventDefault();
                return;
            }

            if($('#pass2').val().length === 0)
            {
                $('#pass2').addClass('invalidInput');
                e.preventDefault();
                return;
            }

            if($('#username').val().length === 0)
            {
                $('#username').addClass('invalidInput');
                e.preventDefault();
                return;
            }

            if($('#pass1').hasClass('invalidInput'))
            {
                e.preventDefault();
                return;
            }

            if($('#pass2').hasClass('invalidInput'))
            {
                e.preventDefault();
                return;
            }

            if(!$.isNumeric($('#NUDDisplay').text()))
            {
                $('#NUDDisplay').text('Ugyldigt antal!');
                $('#NUDDisplay').css({"color": "red"});
                e.preventDefault();
            }
            else
            {
                $('#groupAmount').val($('#NUDDisplay').text());
            }

            if (groupNameTaken)
            {
                $('#username').addClass('invalidInput');
                e.preventDefault();
                return;
            }

            let URL = "/Backend/Controllers/Group/SigningUp.php";

            let form = $('#RegisterForm')[0];
            let formData = new FormData(form);

            let id = $('#RegisterBtn').attr('name');
            let value = $('#RegisterBtn').val();

            formData.append(id, value);

            axios.post(URL, formData, {
                header: 'multipart/form-data'
            }).then(res => {
                if (res.status == 201)
                {
                    let LoginModalElem = document.getElementById('LoginModal')
                    let LoginModal = bootstrap.Modal.getInstance(LoginModalElem);

                    LoginModal.hide();

                    LoggedInUser();
                }
            }).catch(error => {
                console.log(error);
            });

            e.preventDefault();
        });
    });

    $('#NUDPlus').click(function() {
        if($('#NUDDisplay').css('color') === 'rgb(255, 0, 0)')
        {
            $('#NUDDisplay').css({'color': 'rgba(255, 255, 255, .55)'});
        }

        displayValue++;

        $('#NUDDisplay').text(displayValue);
    });

    $('#NUDMinus').click(function() {
        if (displayValue <= 0)
        {
            return;
        }
        else if(displayValue <= 1)
        {
            $('#NUDDisplay').text(1);
        }
        else
        {
            displayValue--;
            $('#NUDDisplay').text(displayValue);
        }
    });
    // Register end 

    // Login start
    $('#LoginForm').submit(function(e) {
        let URL = "/Backend/Controllers/Group/Login.php";

        $('#loginUsername').attr('name') = "groupName";

        let form = $('#LoginForm')[0];
        let formData = new FormData(form);

        let id = $('#LoginBtn').attr('name');
        let value = $('#LoginBtn').val();

        formData.append(id, value);

        axios.post(URL, formData, {
            header: 'multipart/form-data'
        }).then(res => {
            if (res.status === 200)
            {
                let LoginModalElem = document.getElementById('LoginModal')
                let LoginModal = bootstrap.Modal.getInstance(LoginModalElem);

                LoginModal.hide();

                LoggedInUser();
            }
        }).catch(error => {
            console.log(error);
        });

        e.preventDefault();
    })
    // Login end

    // Admin Login Start
    $('#AdminLoginBtn').submit(function(e) {
        let URL = "/Backend/Controllers/Admin/AdminLogin.php";

        $('#loginUsername').attr('name') = "userName";

        let form = $('#LoginForm')[0];
        let formData = new FormData(form);

        let id = $('#LoginBtn').attr('name');
        let value = $('#LoginBtn').val();

        formData.append(id, value);

        axios.post(URL, formData, {
            header: 'multipart/form-data'
        }).then(res => {
            if (res.status === 200)
            {
                let LoginModalElem = document.getElementById('LoginModal')
                let LoginModal = bootstrap.Modal.getInstance(LoginModalElem);

                LoginModal.hide();

                LoggedInUser();
            }
        }).catch(error => {
            console.log(error);
        });

        e.preventDefault();
    });
    // Admin Login End

    // Logout Start
    $('#UserLogout').click(function() {
        axios.get('/Backend/Controllers/Group/Logout.php').then(res => {
            if(res.status === 200)
            {
                UserLoggedOut();
            }
        }).catch(error => {
            console.log(error);
        });
    });
    // Logout End

    // Functions Start
    function LoggedInUser() {
        $('#NavLogin').css({
            "display": "none"
        });

        $('#UserLogout').css({
            "display": "block"
        });

        $('#NavUser').text(`Logget ind som: ${GroupName}`);
        $('#NavUser').css({
            "display": "block"
        });
    }

    function UserLoggedOut() {
        $('#NavLogin').css({
            "display": "block"
        });

        $('#UserLogout').css({
            "display": "None"
        });

        $('#NavUser').css({
            "display": "none"
        });
    }

    async function GetGroupNames() {
        const res = await axios.get('/Backend/Controllers/Group/GetGroup.php');

        return res.data;
    }

    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }
    // Functions End
});