client.js

// Global variables
var minPassLength = 2;
var windowDiv;
var welcomeDiv;
var profileDiv;
var url = 'http://' + document.domain + ':5000/myServer/';
var curr_page = "";
var socket;

// source "/Users/lorenzo/OneDrive - Linköpings universitet/Skola/DI3B/TDDD97/virtualenv/bin/activate"


function connectWithSocket() {
    let token = localStorage.getItem("currentUser");
            
    // Changes the view to profile view and loads user info
    displayView();
    setUserDetails("home");

    // Establish web socket
    socket = new WebSocket('ws://' + document.domain + ':5000/myServer/api');

    socket.onopen = function (event) {
        let myEmail = localStorage.getItem("homeEmail");

        // Todo - ändra så att token skickas i header istället
        this.send(JSON.stringify({token: token, email: myEmail}));
        console.log("Nu har jag skickat");
    }

    socket.onmessage = function (event) {
        let response = JSON.parse(event.data);

        console.log("Nu fick jag svar"); 
        switch (response["action"]) {
            case "signOut":

                // If old socket open, close it.
                //socket.close();
                console.log(response);

                // Reset token in the localStorage
                localStorage.setItem("currentUser", "");
                localStorage.setItem("homeEmail", "");
                localStorage.setItem("browseEmail", "");

                // Changes the view to welcome view
                displayView();
                document.getElementById("error").innerHTML = "Signed Out, you signed in elsewhere";
                break;
            case "signIn":
                console.log(response);
                console.log("ja är signed in");
                break;
        } 
    }
}


// - - - - - Init Request Objects - - - - - //

// Sign In Request Object
var signInRequest = new XMLHttpRequest();
signInRequest.onreadystatechange = function() {
    if (this.readyState == 4) {

        let errorMessage = document.getElementById("error");
        if (this.status == 204) {
            let token = this.getResponseHeader("Authorization")
            localStorage.setItem("currentUser", token);
            connectWithSocket();
        }
        else if (this.status == 400) {
            errorMessage.innerHTML = "Error 400: Incorrect format"; 
        }
        else if (this.status == 404) {
            errorMessage.innerHTML = "Error 404: No user with that email exists"; 
        }
        else if (this.status == 401) {
            errorMessage.innerHTML = "Error 401: Incorrect password"; 
        }
        else {
            errorMessage.innerHTML = "Unknown error"; 
        } 
    }
};

// Sign Out Request Object
var signOutRequest = new XMLHttpRequest();
signOutRequest.onreadystatechange = function() {
    if (this.readyState == 4) {
        if (this.status == 204) {

            // Reset token in the localStorage
            localStorage.setItem("currentUser", "");
            localStorage.setItem("homeEmail", "");
            localStorage.setItem("browseEmail", "");

            // Changes the view to welcome view
            displayView();
        }
        else if (this.status == 401) {
            console.log("Error 401: You are not logged in");
            displayView();
        }
        else {
            console.log("Unknown error");
            displayView();
        } 
    }
};

// Sign Up Request Object
var signUpRequest = new XMLHttpRequest();
signUpRequest.onreadystatechange = function () {
    if (this.readyState == 4) {

        let errorMessage = document.getElementById("error");
        if (this.status == 204) {
            errorMessage.innerHTML = "You have signed up";
        }
        else if (this.status == 400) {
            errorMessage.innerHTML = "Error 400: Enter the data in the correct format";
        }
        else if (this.status == 409) {
            errorMessage.innerHTML = "Error 409: User already exists";
        }
        else if (this.status == 500) {
            errorMessage.innerHTML = "Error 500: Error at server side";
            }
        else {
            errorMessage.innerHTML = "Unknown error";
        }
    }
};

// Change Password Request Object
var ChangePassRequest = new XMLHttpRequest();
ChangePassRequest.onreadystatechange = function () {
    if (this.readyState == 4) {

        let errorMessage = document.getElementById("match_error");
        if (this.status == 204) {
            errorMessage.innerHTML = "Password has been changed!";
        }
        else if (this.status == 400) {
            errorMessage.innerHTML = "Error 400: Old password is incorrect or Old/New password has wrong format"
        }
        else if (this.status == 401) {
            errorMessage.innerHTML = "Error 401: You are not logged in"
        }
        else if (this.status == 500) {
            errorMessage.innerHTML = "Error 500: Error at server side";
        }
        else {
            errorMessage.innerHTML = "Unknown error"
        }
        errorMessage.style.display = "block";
    }
};

// Get user data by token Request Object
var dataByTokenRequest = new XMLHttpRequest();
dataByTokenRequest.onreadystatechange = function() {
    if (this.readyState == 4) {
        if (this.status == 200) {
            
            let userDataArray = JSON.parse(this.responseText);

            // Putting the user data we retrieved from server to the corresponding html table
            let userTable = document.getElementById("homeUserInfo");
            userTable.rows[0].cells[1].innerHTML = userDataArray["data"].email;
            userTable.rows[1].cells[1].innerHTML = userDataArray["data"].firstname;
            userTable.rows[2].cells[1].innerHTML = userDataArray["data"].familyname;
            userTable.rows[3].cells[1].innerHTML = userDataArray["data"].gender;
            userTable.rows[4].cells[1].innerHTML = userDataArray["data"].city;
            userTable.rows[5].cells[1].innerHTML = userDataArray["data"].country;

            localStorage.setItem("homeEmail", userDataArray["data"].email);
            reloadWall("home");
        }
        else if (this.status == 401) {
            console.log("Error 401: You are not logged in");
        }
        else if (this.status == 400) {
            console.log("Error 400: Incorrect format");
        }
        else if (this.status == 404) {
            console.log("Error 404: No user with that email exists");
        }
        else {
            console.log("Unknown error");
        }
    }
};

// Get user data by email Request Object
var dataByEmailRequest = new XMLHttpRequest();
dataByEmailRequest.onreadystatechange = function() {
    if (this.readyState == 4) {

        let errorMessage = document.getElementById("searchMessage");
        if (this.status == 200) {
           
            let userDataArray = JSON.parse(this.responseText);

            // Putting the user data we retrieved from server to the corresponding html table
            let userTable = document.getElementById("browseUserInfo");
            userTable.rows[0].cells[1].innerHTML = userDataArray["data"].email;
            userTable.rows[1].cells[1].innerHTML = userDataArray["data"].firstname;
            userTable.rows[2].cells[1].innerHTML = userDataArray["data"].familyname;
            userTable.rows[3].cells[1].innerHTML = userDataArray["data"].gender;
            userTable.rows[4].cells[1].innerHTML = userDataArray["data"].city;
            userTable.rows[5].cells[1].innerHTML = userDataArray["data"].country;

            localStorage.setItem("browseEmail", userDataArray["data"].email);
            errorMessage.iinnerHTML = ""
            reloadWall("browse");
        }
        else {
            if (this.status == 401) {
                errorMessage.innerHTML = "Error 401: You are not loged in"; 
            }
            else if (this.status == 400) {
                errorMessage.innerHTML = "Error 400: Incorrect format"; 
            }
            else if (this.status == 404) {
                errorMessage.innerHTML = "Error 404: No user with that email exists"; 
            }
            else {
                errorMessage.innerHTML = "Unknown error"; 
            } 
            localStorage.setItem("browseEmail", "");
        }
    }
};

// Get Messages By Token Request Object
var messagesByTokenRequest = new XMLHttpRequest();
messagesByTokenRequest.onreadystatechange = function() {
    if (this.readyState == 4) {

        if (this.status == 200) {
           
            let currentWall = JSON.parse(this.responseText);

            // Formating the text before putting to wall
            let complete = "";
            for (let i = 0; i < currentWall.data.length; i++) {
                complete += currentWall.data[i].person_who_posted + ':   ' + currentWall.data[i].message + "</br>";
            }
            document.getElementById('homePostedMessagesDiv').innerHTML = complete;
        }
        else if (this.status == 204) {
            console.log("Success, but no messages to receive");
        }
        else if (this.status == 401) {
            console.log("Error 401: You are not loged in");
        }
        else if (this.status == 400) {
            console.log("Error 400: Incorrect format");
        }
        else if (this.status == 404) {
            console.log("Error 404: No user with that email exists");
        }
        else {
            console.log("Unknown error");
        } 
    }
};

// Get Messages By Email Request Object
var messagesByEmailRequest = new XMLHttpRequest();
messagesByEmailRequest.onreadystatechange = function() {
    if (this.readyState == 4) {

        if (this.status == 200) {
           
            let currentWall = JSON.parse(this.responseText);

            // Fromating the text before putting to wall
            let complete = "";
            for (let i = 0; i < currentWall.data.length; i++) {
                complete += currentWall.data[i].person_who_posted + ':   ' + currentWall.data[i].message + "</br>";
            }
            document.getElementById('browsePostedMessagesDiv').innerHTML = complete;

        }
        else if (this.status == 204) {
            console.log("Success, but no messages to receive");
        }
        else if (this.status == 401) {
            console.log("Error 401: You are not loged in");
        }
        else if (this.status == 400) {
            console.log("Error 400: Incorrect format");
        }
        else if (this.status == 404) {
            console.log("Error 404: No user with that email exists");
        }
        else {
            console.log("Unknown error");
        } 
    }
};

// Post Message Request Object
var postMessageRequest = new XMLHttpRequest();
postMessageRequest.onreadystatechange = function () {
    if (this.readyState == 4) {

        let errorMessage = document.getElementById('searchMessage');
        if (this.status == 204) {   
            console.log('Message posted!')
            errorMessage.innerHTML = "";
            if (curr_page != null && curr_page != "")
                reloadWall(curr_page);
        }
        else if (this.status == 400) {
            errorMessage.innerHTML = "Error 400: Incorrect format";
        }
        else if (this.status == 404) {
            errorMessage.innerHTML = "Error 404: No user selected to write to";
        }
        else if (this.status == 401) {
            errorMessage.innerHTML = "Error 401: You are not loged in";
        }
        else if (this.status == 500) {
            errorMessage.innerHTML = "Error 500: Error at server side";
        }
        else {
            errorMessage.innerHTML = "Unknown error";
        }
    }
};


// - - - - - Init functions - - - - - //

// Function for displaying the right view
displayView = function(){
    if (localStorage.getItem("currentUser") == "")
        windowDiv.innerHTML = welcomeDiv.innerHTML;
    else
        windowDiv.innerHTML = profileDiv.innerHTML;
};


// - - - - - The function when page loads - - - - - //

window.onload = function () {

    // Delete when done - används för att hoppa tillbaka till rtt view under utveckling
    // localStorage.setItem("currentUser", "");
    // localStorage.setItem("homeEmail", "");
    // localStorage.setItem("browseEmail", "");

    // All key/value pairs stored in out localStorage
    // If first time? check this:
    if (localStorage.getItem("homeEmail") == null)
        localStorage.setItem("homeEmail", "");
    if (localStorage.getItem("browseEmail") == null)
        localStorage.setItem("browseEmail", "");
    if (localStorage.getItem("currentUser") == null)
        localStorage.setItem("currentUser", "");
    
    // Initialize div objects (global variables)
    welcomeDiv = document.getElementById("welcomeview");
    profileDiv = document.getElementById("profileview");
    windowDiv = document.getElementById("windowDiv");
    
    if (localStorage.getItem("currentUser") != "") {//if logged in
        connectWithSocket();
    }
    else {
        // Set correct view depending on if someone is signed in or not
        displayView();
    }
};


// Function for setting user details, either for yourself or for some other user
function setUserDetails(who) {

    // "who" could be either home or browse, this way know which info we are displaying and where
    let token = localStorage.getItem("currentUser");
    if (token != null && token != "" ){
        let userTable = document.getElementById(who + "UserInfo");
        let email = localStorage.getItem(who + "Email");

        // Display my own info
        if (who == 'home') {
            // Send request to server about receiving the info
            dataByTokenRequest.open("GET", url + "getDataByToken", true);
            dataByTokenRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            dataByTokenRequest.setRequestHeader("Authorization", token)
            dataByTokenRequest.send();
        }

        // Display the info about the searched user
        else if (who == 'browse' && email != null && email != "") {
            // Send request to server about receiving the info
            dataByEmailRequest.open("GET", url + "getDataByEmail/" + email, true);
            dataByEmailRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            dataByEmailRequest.setRequestHeader("Authorization", token)
            dataByEmailRequest.send();
        }
    }
    return false;
}

// - - - - - Sign Up/In/Out - - - - - //

function sign_up() {

    let form = document.getElementById("signup_form");
    let errorMess = document.getElementById("signUpError");
    let user = {
        firstname: form[0].value,
        familyname: form[1].value,
        gender: form[2].value,
        city: form[3].value,
        country: form[4].value,
        email: form[5].value,
        password: form[6].value,
        repeat_password: form[7].value
    };


    // Error checks
    if (user.password.length < minPassLength)
        errorMess.innerHTML = "Password's length is too short";
    else if (user.password != user.repeat_password)
        errorMess.innerHTML = "Passwords does not match";
    else {

        // Sending sign_ou request to "server"
        signUpRequest.open("POST", url + "sign_up", true);
        signUpRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        signUpRequest.send(JSON.stringify(user));
    }
    return false;
}

function sign_in() {
    let form = document.getElementById("sign_in_form");
    let email = form[0].value;
    let password = form[1].value;
    let errorMess = document.getElementById("error");
  
    // Error checks
    if (password.length < minPassLength)
        errorMess.innerHTML = "Password's length is too short";
    else {

        // Sending sign_in request to "server"
        signInRequest.open("POST", url + "sign_in", true);
        signInRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        signInRequest.send(JSON.stringify({email: email,password: password}));
    }
    return false;
}

function sign_out(){
    let token = localStorage.getItem("currentUser");

    // Sending sign_out request to "server"
    signOutRequest.open("POST", url + "sign_out", true);
    signOutRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    signOutRequest.setRequestHeader("Authorization", token)
    signOutRequest.send();

    return false;
}



// - - - - - Changing tabs - - - - - //

function showPage(ourEvent, name) {

    // - - Fixing the tabs - - //
    // Unselect all
    let tabcontent = document.getElementById("tabDiv");
    for (i = 0; i < tabcontent.children.length; i++) {
        tabcontent.children[i].style.backgroundColor = "red";
    }
    // Select only the one we want
    let div = ourEvent.target;
    div.style.backgroundColor = "lightgreen";


    // - - Fixing the content - - //
    // Unselect all
    let allPages = document.getElementsByClassName("tabcontent");
    for (let i = 0; i < allPages.length; i++) {
        allPages[i].style.display = "none";
    }
    // Select only the one we want
    let selected_tab = document.getElementById(name);
    selected_tab.style.display = "block";

    return false;
}



// - - - - - Changing Password - - - - - //

//Function for changing password
function change_password(ourEvent){
    let old_pass = document.getElementById("old_password").value;
    let new_pass = document.getElementById("new_password").value;
    let confirm_pass = document.getElementById("confirm_pass").value;
    let token = localStorage.getItem("currentUser");
    let error_text = document.getElementById("match_error");

    // New password have to be entered twice, otherwise throw error
    if (new_pass.length < minPassLength) {
        error_text.innerHTML = "New password too short";
    }
    else if (new_pass != confirm_pass) {
        error_text.innerHTML = "New password and confirm password does not match";
    }
    else {
        ChangePassRequest.open("PUT", url + "change_password", true);
        ChangePassRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        ChangePassRequest.setRequestHeader("Authorization", token)
        ChangePassRequest.send(JSON.stringify({old_password:old_pass, new_password:new_pass}));
    }
    return false;
}

// - - - - - Changing the wall - - - - - //

// Submit text button
function updateWall(who){
    // "who" could be either home or browse, this way know which wall to write on 
    let messageToWall = document.getElementById(who + 'Textarea').value;
    let errorMessage = document.getElementById('searchMessage');
    let token = localStorage.getItem("currentUser");
    let email = localStorage.getItem(who + "Email");
    curr_page = who;

    if (email != null && email != "" && token != null && token != "") {

        // Send user's message to the server
        postMessageRequest.open("POST", url + "post", true);
        postMessageRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        postMessageRequest.setRequestHeader("Authorization", token)
        postMessageRequest.send(JSON.stringify({ email: email, message: messageToWall }));

        errorMessage.innerHTML = "";
    }
    else{
        errorMessage.innerHTML = "No user selected to write to";
    }

    // Clear the text area the user just wrote in
    document.getElementById(who + 'Textarea').value = "";
    return false;
}

// Reload button
function reloadWall(who) {
    // "who" could be either home or browse, this way know which wall to load to 
    let token = localStorage.getItem("currentUser");
    let email = localStorage.getItem(who + "Email");

    // If wanting messages from my own wall
    if (who == 'home') {
        // Send request to server about receiving the info
        messagesByTokenRequest.open("GET", url + "getUserMessageByToken", true);
        messagesByTokenRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        messagesByTokenRequest.setRequestHeader("Authorization", token)
        messagesByTokenRequest.send();
    }

    // If wanting messages from another's wall
    else if (who == 'browse' && email != null && email != "") {
        // Send request to server about receiving the info
        messagesByEmailRequest.open("GET", url + "getMessagesByEmail/" + email, true);
        messagesByEmailRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        messagesByEmailRequest.setRequestHeader("Authorization", token)
        messagesByEmailRequest.send();
    }    

    return false;
}

// Changing another's wall
function searchAnotherUser(event){
    let token = localStorage.getItem("currentUser");

    // Reseting the error messages
    document.getElementById('searchMessage').innerHTML = "";

    if(token != "") {

        // Store the searched email in localStorage so that it can be reached in "setUserDetails()"
        let email = event.target["searchInput"].value;
        localStorage.setItem("browseEmail", email);
        setUserDetails("browse");
    }
    return false;
}