Game-Jaming/Frontend/Javascript/LoginFunctionality.js

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

    if (getCookie('userName') != null)
    {
        isAdminLoggedIn = true;
        SwitchNavInfo(true, true);
    }
    else if (getCookie('groupName') != null)
    {
        isAdminLoggedIn = false;
        SwitchNavInfo(true);
    }

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

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

        $.each(arr, 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(error) {
        console.log(error.response);
    });

    // 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)
                {
                    SwitchNavInfo(true);
                }
            }).catch(error => {
                console.log(error.response);
            });

            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);
        }
    });


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

        return res.data;
    }

    // Register end 

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

        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)
            {
                isAdminLoggedIn = false;
                SwitchNavInfo(true);
            }            
        }).catch(error => {
            if (error.response.status === 401)
            {
                $('#loginUsername').css({'border-color':'red'});
                $('#loginPassword').css({'border-color':'red'});
                $('#ErrorText').css({'display':'block'});
            }
            else
            {
                console.log(error.response);
            }
        });

        e.preventDefault();
    });

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

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

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

        formData.append(id, value);

        axios.post(URL, formData, {
            header: 'multipart/form-data'
        }).then(res => {
            if (res.status === 200)
            {
                isAdminLoggedIn = true;
                SwitchNavInfo(true, true);
            }            
        }).catch(error => {
            if (error.response.status === 401)
            {
                $('#adminUsername').css({'border-color':'red'});
                $('#adminPassword').css({'border-color':'red'});
                $('#AdminErrorText').css({'display':'block'});
            }
            else
            {
                console.log(error.response);
            }
        });

        e.preventDefault();
    });

    function SwitchNavInfo(isLoggedIn, isAdmin) {
        if (isLoggedIn)
        {
            $('#NavUser').css({'display':'block'});
            $('#NavUser').text(`Welcome, ${isAdmin ? getCookie('userName') : getCookie('groupName')}!`);

            $('#NavLogin').css({'display':'none'});
            $('#NavLogout').css({'display':'block'});

            $('#LoginModal').modal('hide');
        }
        else
        {
            $('#NavUser').css({'display':'none'});
            $('#NavUser').text(``);

            $('#NavLogin').css({'display':'block'});
            $('#NavLogout').css({'display':'none'});
        }

        if (isAdmin === undefined)
        {
            return
        }
        else
        {
            if (isAdmin)
            {
                if (isLoggedIn)
                {
                    $('#AdminPanel').css({'display':'block'});

                    console.log('Logged In As Admin!');
                }
                else
                {
                    $('#AdminPanel').css({'display':'none'});

                    console.log('Logged Out As Admin!');
                }
            }
        }
    }
    // Login end

    // Logout start
    $('#NavLogout').click(function() {
        axios.get('/Backend/Controllers/Group/Logout.php').then(res => {
            if (res.status == 200)
            {
                SwitchNavInfo(false, isAdminLoggedIn);
                isAdminLoggedIn = false;
            }
        }).catch(error => {
            console.log(error.response);
        });
    });
    // Logout end

    function getCookie(name) {
        // Split cookie string and get all individual name=value pairs in an array
        var cookieArr = document.cookie.split(";");
        
        // Loop through the array elements
        for(var i = 0; i < cookieArr.length; i++) {
            var cookiePair = cookieArr[i].split("=");
            
            /* Removing whitespace at the beginning of the cookie name
            and compare it with the given string */
            if(name == cookiePair[0].trim()) {
                // Decode the cookie value and return
                return decodeURIComponent(cookiePair[1]);
            }
        }
        
        // Return null if not found
        return null;
    }
});