How to keep interface view on page load?

Question

On submit event I set do some things from the received data, which I would like to keep when I refresh the page and even when I do what I do ( with if sessionStorage.token ) it does't work. I did the exact same scenario with Javascript before and I swear it worked.

How this can be solved? Please help me.

            // Initialize variables
            var $jUser = {};
            var $ajUsers = [];

            // Login POST 
            $('#frm-login').submit(function (e) {
                event.preventDefault()
                $loginButton.text('Please wait ...').prop('disabled')
                $.ajax({
                    url: "/login-user",
                    type: "POST",
                    data: $('#frm-login').serialize(),
                dataType: "json"
            }).always(function (response) {
                $loginButton.text('Logging in').prop('disabled')
                console.log("Login", response)
                if (response.status == "error") {
                    $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
                    return
                }
                sessionStorage.setItem('token', response.token)
                if (sessionStorage.token) {
                    $.ajax({
                        type: "GET",
                        url: "/verify-user",
                        headers: {
                            'Authorization': 'Bearer ' + sessionStorage.token
                        },
                        dataType: "json"
                    }).always(function (response) {
                        console.log("Auth", response)
                        if (response.status == "error") {
                            $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
                            return

                        }
                        $('#index-page').css('display', 'none')
                        $('#main-page').css('display', 'block')
                        $.getScript('/js/socket.js', function () {
                            console.log('script loaded');
                        });
                        $jUser = response.authData.user
                        $userAvatar.attr('src', $jUser.avatar)
                        $userFullname.text($jUser.first_name + ' ' + $jUser.last_name)
                        console.log($jUser)
                    })
                }
            })
        })
        console.log($jUser)
        if (sessionStorage.token) {
            function userSession() {
                $('#index-page').css('display', 'none')
                $('#main-page').css('display', 'block')
                $userAvatar.attr('src', $jUser.avatar)
                $userFullname.text($jUser.first_name + ' ' + $jUser.last_name)
                console.log('hello')
            }
        }

Answer 1

For one thing, you don't appear to be calling the function userSession anywhere. You are only defining it in your final token test.

Also, you are calling always on the jqXHR returned by the $.ajax call. The always method will get called regardless of whether the ajax request is successful, and pass different arguments to the supplied function, depending on the status of the request. See the jQuery deferred method documentation. I think you want to use the success attribute of the $.ajax parameters to achieve what you want.

Finally, I don't see where you are setting $jUser, but your code seems to assume it is persisted across page loads. However, it is reset to an empty object ({}) each time your javascript gets executed (on each page load). You may wish to serialize it and save it in the sessionStorage object, so it will persist, then test for it and unserialize it to $jUser if it is stored. Alternatively, you can call verifyUser on every page load using the stored token if it exists, which would be less efficient, but should work.

Without having access to the server for the Ajax calls, I can't test my changes to your code, but I'll post them anyway, and you can try them yourself. Let me know if it helps.

// Initialize variables
var $jUser = {};
var $ajUsers = [];
var jUserJSON;

function failedLogin() {
    // handle failed logins
    $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
    $loginButton.text('Login').prop('disabled', false);
}

function ajaxError(url, testStatus, errorThrown) {
    console.log("The " + url + " Ajax request failed. status:" + textStatus + ', errorThrown: ' + errorThrown);
}

function updatePageWithLogin() {
    $('#index-page').css('display', 'none');
    $('#main-page').css('display', 'block');
    $userAvatar.attr('src', $jUser.avatar);
    $userFullname.text($jUser.first_name + ' ' + $jUser.last_name);
    $.getScript('/js/socket.js', function () {
        console.log('script loaded');
    });
}

function verifyUser(token) {
    $.ajax({
        type: "GET",
        url: "/verify-user",
        headers: {
            'Authorization': 'Bearer ' + token
        },
        dataType: "json",
        success: function (response) {
            console.log("Auth", response)
            if (response.status == "error") {
                failedLogin();
                return;
            }

            $jUser = response.authData.user;

            // persist the $jUser object
            jUserJSON = JSON.stringify($jUser);
            sessionStorage.setItem('juser', jUserJSON);
            console.log("$jUser: " + jUserJSON);
            updatePageWithLogin();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            ajaxError("/verify-user", textStatus, errorThrown);
        },
        complete: function() {
            // This will get called whether the Ajax request succeeds or fails
        }
    });
}

// Login POST
$('#frm-login').submit(function (e) {
    event.preventDefault();
    $loginButton.text('Please wait ...').prop('disabled');
    $.ajax({
        url: "/login-user",
        type: "POST",
        data: $('#frm-login').serialize(),
        dataType: "json",
        success: function(response) {
            $loginButton.text('Logging in').prop('disabled', true);
            console.log("Login", response)
            if (response.status == "error") {
                failedLogin();
                return;
            }
            sessionStorage.setItem('token', response.token); // not sure this is necessary now
            if (response.token) { verifyUser(response.token) }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            ajaxError("/login-user", textStatus, errorThrown);
        },
        complete: function() {
            // This will get called whether the Ajax request succeeds or fails
        }
    })
});

jUserJSON = sessionStorage.getItem("juser");

if (jUserJSON) {
    // The user has already authenticated
    $jUser = JSON.parse(jUserJSON);
    updatePageWithLogin();
}

console.log("$jUser: " + jUserJSON);