Chatto/chatto/src/main/javascript/chat.js

// import { sprintf } from 'sprintf-js';
// import { vsprintf } from 'sprintf-js';
/*var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
    if(off_payment_method[i].checked) {
        ischecked_method = true;
        break;
    }
}
if(!ischecked_method)   { //payment method button is not checked
    alert("Please choose Offline Payment Method");
}*/
// var css = require('./app.css');
// console.log(css);
// var alertify = require('alertifyjs');
var log = require('loglevel');
var sjcl = require('sjcl');
var markdownit = require('markdown-it');
var md = new markdownit();
var Handlebars = require('handlebars');
var DOMPurify = require('dompurify');
var Fuse = require('fuse.js');

require('./test.js');

var toUserRadios = document.getElementsByName('toUser');
var isCheckedUser = false;
var chatTextArea = document.getElementById('chatTextArea');

var postNewMessageUrl = `http://${hostAddress}/api/chat/post/message`; //hostAddress variable is set in the thymeleaf head fragment
var getAllMessagesUrl = `http://${hostAddress}/api/chat/get/messages/`;
var getNewMessagesUrl = `http://${hostAddress}/api/chat/get/messages/`;
var getActiveUsersUrl = `http://${hostAddress}/api/chat/get/active-users/`;
// var postNewMessageUrl = "http://localhost:8080/api/chat/post/message";
// var getAllMessagesUrl = "http://localhost:8080/api/chat/get/messages/";
// var getNewMessagesUrl = "http://localhost:8080/api/chat/get/messages/";
// var messageLog = [];
var username = localStorage.getItem('username');
var authToken = localStorage.getItem('authToken');

var passphraseInput = document.getElementById('passphrase');
var iterations = 100000;

var source = document.getElementById("msg_container_template").innerHTML;
var msgContainerTemplate = Handlebars.compile(source);
var source = document.getElementById("msg_container_send_template").innerHTML;
var msgContainerSendTemplate = Handlebars.compile(source);
var source = document.getElementById("user-contact-online-template").innerHTML;
var userContactOnlineTemplate = Handlebars.compile(source);
var source = document.getElementById("user-contact-offline-template").innerHTML;
var userContactOfflineTemplate = Handlebars.compile(source);

var chatAreaNew = document.getElementById('chat_area_new');

var userBoxes = document.getElementsByName('user-box');



var activeUsers = {};

var fuseOptions = {
    shouldSort: true,
    threshold: 0.01,
    location: 0,
    distance: 100,
    maxPatternLength: 32,
    minMatchCharLength: 1,
    keys: [
        "userName",
    ]
};

log.setLevel('TRACE');

alertify.set('notifier', 'position', 'top-center');

// Loop through the buttons and add the active class to the current/clicked button
// for (var i = 0; i < btns.length; i++) {
//     btns[i].addEventListener("click", function() {
//       var current = document.getElementsByClassName("active");

//       // If there's no active class
//       if (current.length > 0) {
//         current[0].className = current[0].className.replace(" active", "");
//       }

//       // Add the active class to the current/clicked button
//       this.className += " active";
//     });
//   } 

getActiveUsers(authToken)
        .then(data => {
            // activeUsers = data;
            sessionStorage.setItem('activeUsers', JSON.stringify(data));
            log.log(sessionStorage.getItem('activeUsers'));
        })

for (let i = 0; i < userBoxes.length; i++) {
    userBoxes[i].addEventListener('click', userCallBack)
}

function addUserCallBacks() {
    for (let i = 0; i < userBoxes.length; i++) {
        userBoxes[i].addEventListener('click', userCallBack)
    }
}

function userCallBack() {
    let current = document.getElementsByClassName('user-box active');
    let passphrase = passphraseInput.value;
    if (current.length > 0) {
        if (passphrase == '') {
            // alert('Please input passphrase')
            alertify.error('Please enter a passphrase');
            return;
        }
        current[0].className = current[0].className.replace(" active", "");

    }
    // Add the active class to the current/clicked button
    else if (current.length == 0) {
        let elem = document.getElementById('passphrase-initial');
        passphrase = elem.value;
        if (passphrase == '') {
            // alert('Please input passphrase')
            alertify.error('Please enter a passphrase');
            return;
        }
        document.getElementById('no-user-selected').hidden = true;
        document.getElementById('chat-card').hidden = false;
        elem.hidden = true;
    }
    // console.log(this.getElementsByClassName('to-user-span'));
    let userName = this.getElementsByClassName('to-user-span')[0].innerText;
    document.getElementById('user-name-span').innerText = userName;
    populateMessages(userName, passphrase);
    sessionStorage.setItem('selectedUser', userName);
    this.className += " active";
}

function populateMessages(userName, passphrase) {
    console.log('Selected user = ' + userName);
    if (passphrase == '') {
        alert('Please input passphrase')
        return;
    }
    // console.log(userName);
    if (sessionStorage.getItem(userName) == null) {
        chatTextArea.textContent = '';
        chatAreaNew.innerHTML = '';
        getAllMessages(userName)
            .then(json => {
                if (json == null) return;
                console.log(json);
                let i = 0;
                let messageLog = [];
                let messageLogNew = [];
                let lastMessageTimeStamp;

                if (json.length > 0) {
                    json.forEach(function(obj) {
                        // console.log(obj.toUser);
                        messageCipher = JSON.stringify(obj.messageCipher);
                        console.log(messageCipher);
                        // let message = sjcl.decrypt("password", messageCipher);
                        let message = md.render(sjcl.decrypt(passphrase, messageCipher));
                        let utcDate = obj.messageTime;
                        lastMessageTimeStamp = utcDate;
                        let localDate = new Date(utcDate);
                        let messageLine = sprintf('%s %s: %s ', localDate, obj.fromUser, message);


                        // localDate.``
                        // console.log('localDate = ' + localDate);
                        console.log(messageLine);
                        // chatTextArea.append(obj.fromUser + ": " + message + "\n");
                        chatTextArea.append(messageLine + '\n');
                        messageLog[i++] = messageLine;
                        chatTextArea.scrollTop = chatTextArea.scrollHeight;
                        // console.log('Message log = ' + messageLog);

                        let context = { fromUser: obj.fromUser, message: message, time: localDate.toLocaleString() };
                        let msgContainer;
                        if (obj.fromUser == username) {
                            msgContainer = msgContainerSendTemplate(context);
                        } else {
                            msgContainer = msgContainerTemplate(context);
                        }

                        messageLogNew.push(JSON.stringify(context));
                        $(chatAreaNew).append(DOMPurify.sanitize(msgContainer));


                    });
                    sessionStorage.setItem(userName, JSON.stringify(messageLog));
                    sessionStorage.setItem(userName + username + 'new', JSON.stringify(messageLogNew));
                    // console.log()
                    // sessionStorage.clear();
                    console.log('Last message time = ' + lastMessageTimeStamp);
                    sessionStorage.setItem(userName + '-time', lastMessageTimeStamp);


                }
            });
    } else {


        console.log("Stored messages = " + sessionStorage.getItem(userName));
        let storedMessages = JSON.parse(sessionStorage.getItem(userName));
        let storedMessagesNew = JSON.parse(sessionStorage.getItem(userName + username + 'new'));
        let lastMessageTime = sessionStorage.getItem(userName + '-time');
        console.log("last message time stamp = " + lastMessageTime);
        if (lastMessageTime != null) {
            getNewMessages(userName, lastMessageTime)
                .then(json => {
                    if (json == null) return;
                    console.log(json)
                    if (json.length > 0) {
                        json.forEach(function(obj) {
                            let messageCipher = JSON.stringify(obj.messageCipher);
                            let message = md.render(sjcl.decrypt(passphrase, messageCipher));
                            // console.log(message);
                            // chatTextArea.append(message + "\n");	
                            let utcDate = obj.messageTime;
                            lastMessageTimeStamp = utcDate;
                            let localDate = new Date(utcDate);
                            let messageLine = sprintf('%s %s: %s', localDate, obj.fromUser, message);

                            // localDate.``
                            // console.log('localDate = ' + localDate);
                            console.log(messageLine);
                            // chatTextArea.append(obj.fromUser + ": " + message + "\n");
                            chatTextArea.append(messageLine + '\n');
                            chatTextArea.scrollTop = chatTextArea.scrollHeight;
                            storedMessages.push(messageLine);

                            let context = { fromUser: obj.fromUser, message: message, time: localDate.toLocaleString() };
                            let msgContainer;
                            if (obj.fromUser == username) {
                                msgContainer = msgContainerSendTemplate(context);
                            } else {
                                msgContainer = msgContainerTemplate(context);
                            }

                            storedMessagesNew.push(JSON.stringify(context));
                            $(chatAreaNew).append(DOMPurify.sanitize(msgContainer));

                        })
                        sessionStorage.setItem(userName + '-time', lastMessageTimeStamp);
                        sessionStorage.setItem(userName, JSON.stringify(storedMessages));
                        sessionStorage.setItem(userName + username + 'new', JSON.stringify(storedMessagesNew));
                        console.log("this value stored" + sessionStorage.getItem(userName))
                        console.log("last message time stamp = " + lastMessageTimeStamp);
                        console.log(sessionStorage.getItem(userName + '-time'));

                    }
                    chatTextArea.textContent = '';
                    chatAreaNew.innerHTML = '';
                    console.log("Stored messages 2 = " + storedMessages);
                    storedMessages.forEach(function(messageLine) {
                        chatTextArea.append(messageLine + '\n');
                        chatTextArea.scrollTop = chatTextArea.scrollHeight;

                        // let context = {message: messageLine};
                        // let msgContainer;
                        // if(obj.fromUser == username)
                        // {
                        //     msgContainer = msgContainerSendTemplate(context);
                        // }
                        // else{
                        //     msgContainer = msgContainerTemplate(context);
                        // }

                        // $(chatAreaNew).append(msgContainer);
                    })

                    storedMessagesNew.forEach(function(contextString) {
                        let context = JSON.parse(contextString);
                        let msgContainer;
                        if (context.fromUser == username) {
                            msgContainer = msgContainerSendTemplate(context);
                        } else {
                            msgContainer = msgContainerTemplate(context);
                        }

                        $(chatAreaNew).append(DOMPurify.sanitize(msgContainer));
                        scrollChatAreaAnimated(2400);
                    })


                });


        }
        // chatTextArea.append(JSON.stringify(storedMessages));

    }
    // sessionStorage.setItem('status', 'ready');
    // sessionStorage.setItem('userName', messageLog);
    // console.log('Message log = ' + messageLog);
    // }

    // let passphraseKey = userName + '-passphrase';
    // sessionStorage.setItem(passphraseKey, passphrase);
    // console.log(sessionStorage.getItem(passphraseKey));
}

// var lastMessageTimeStamp;

// console.log(authToken);
// 'Basic ' + btoa("hmm" + ":" + "hmm")

Handlebars.registerHelper('avatar', function() {
    return '<div class="img_cont_msg"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> </div>';
});


// var user;
function getSelectedUser() {
    for (var i = 0; i < toUserRadios.length; i++) {
        if (toUserRadios[i].checked) {
            let user = toUserRadios[i].value;
            console.log('sending to user = ' + user);
            isCheckedUser = true;
            return user;
        }
    }

}

function getSelectedUserNew() {
    return sessionStorage.getItem('selectedUser');
}

document.getElementById('chatMessageForm').addEventListener('submit', function(e) {
    let chatInput = document.getElementById('chatInput');
    e.preventDefault();
    let user = getSelectedUserNew();

    if (!this.checkValidity()) {
        console.log("error");
        this.classList.add('was-validated');
        return;
    }
    this.classList.add('was-validated');

    if (user == null) {
        // window.alert('please select a user');
        alertify.error('Please select a user');
        return;
    }
    let messageContent = chatInput.value;
    let context = { fromUser: username, message: md.render(messageContent), time: new Date().toLocaleString() };
    let msgContainer = msgContainerSendTemplate(context);
    $(chatAreaNew).append(DOMPurify.sanitize(msgContainer));
    scrollChatAreaAnimated(2400);
    let messageCipher = sjcl.encrypt(passphraseInput.value, messageContent, { mode: "gcm", ts: 128, adata: "", iter: iterations });
    let messageCipherJson = JSON.parse(messageCipher);
    let chatMessageDTO = {
        "toUser": user,
        "messageCipher": messageCipherJson
    }
    messageSend(JSON.stringify(chatMessageDTO));
})

document.getElementById('user-search').addEventListener('submit', function(e) {
    e.preventDefault();
    let contactsBox = document.getElementById('contacts-box');
    let temp = contactsBox.innerHTML;
    // log.trace(temp);
    let searchTerm = document.getElementById('user-search-term').value;
    log.debug("search term value = " + searchTerm);
    let list = JSON.parse(sessionStorage.getItem('activeUsers'));
    log.debug("active users");
    log.debug(list);
    let fuse = new Fuse(list, fuseOptions);
    let searchResult = fuse.search(searchTerm);
    populateContactsBox(contactsBox, searchResult);
    addUserCallBacks();
    log.debug(searchResult);
})
document.getElementById('user-search-term').addEventListener('input', function(e) {
    e.preventDefault();
    if (this.value.length < 2) {
        log.debug("inputted")
        let cancelButton = document.getElementById('user-search-cancel');
        cancelButton.hidden = false;
    }
})
document.getElementById('user-search-cancel').addEventListener('click', function(e) {
    e.preventDefault();
    let list = JSON.parse(sessionStorage.getItem('activeUsers'));
    let contactsBox = document.getElementById('contacts-box');
    populateContactsBox(contactsBox,list);
    addUserCallBacks();
    document.getElementById('user-search-term').value = "";
    this.hidden = true;
})

function populateContactsBox(contactsBox, list)
{
    let userContactBoxList = "";
    list.forEach(function(activeUser) {
        log.debug(activeUser);
        if (activeUser.online) {
            userContactBoxList += userContactOnlineTemplate(activeUser);
        } else {
            userContactBoxList += userContactOfflineTemplate(activeUser);
        }
    })
    contactsBox.innerHTML = userContactBoxList;
}



// console.log('Credentials = ' + JSON.parse(sessionStorage.getItem('credentials')));


function messageSend(chatMessageDTO) {
    let headers = new Headers();
    //	console.log("Token = " + btoa("hmm" + ":" + "hmm"))

    // headers.append('Accept','application/json')
    headers.append('Content-Type', 'application/json');
    // headers.append('Authorization', basicAuthToken);
    headers.append('X-AUTH-TOKEN', authToken);
    fetch(postNewMessageUrl, {
            method: 'POST',
            headers: headers,
            body: chatMessageDTO
        })
        .then(response => {
            console.log(response);
            return response.clone();
        })
        .then(response => fetchHandler(response));
}


async function getAllMessages(toUser) {
    let headers = new Headers();
    // headers.append('Accept','application/json')
    // headers.append('Content-Type', 'application/json');
    // headers.append('Authorization', basicAuthToken);
    headers.append('X-AUTH-TOKEN', authToken);
    let response = await fetch(getAllMessagesUrl + toUser, {
        method: 'GET',
        headers: headers
    });
    console.log(response);
    if (fetchErrorHandler(response.clone())) {
        return null;
    }
    // if (response.status == 440) {
    //     window.alert('Token has expired. Please login again');
    //     return null;
    // }
    let data = await response.json();
    return data;
}

async function getNewMessages(toUser, lastMessageTimeStamp) {
    let headers = new Headers();
    // headers.append('Authorization', basicAuthToken);
    headers.append('X-AUTH-TOKEN', authToken);
    let response = await fetch(`${getNewMessagesUrl}${toUser}/${lastMessageTimeStamp}`, {
        method: 'GET',
        headers: headers
    });
    console.log(response.clone());
    if (fetchErrorHandler(response.clone())) {
        return null;
    }
    let data = await response.json();
    return data;
}


async function getActiveUsers(authToken2) {
    let headers = new Headers();
    // headers.append('Authorization', basicAuthToken);
    headers.append('X-AUTH-TOKEN', authToken2);
    let response = await fetch(getActiveUsersUrl, {
        method: 'GET',
        headers: headers
    });
    console.log(response.clone());
    if (fetchErrorHandler(response.clone())) {
        return null;
    }
    let data = await response.json();
    return data;
}

$(document).ready(function() {
    $('#action_menu_btn').click(function() {
        $('.action_menu').toggle();
    });
});

function fetchHandler(response) {
    if (response.ok) {
        return response.json().then(json => {
            // the status was ok and there is a json body
            // return Promise.resolve({ json: json, response: response });
            alertify.success('Message sent succesfully' + sprintf(" (http code %d)", response.status));
        }).catch(err => {
            // the status was ok but there is no json body
            // return Promise.resolve({ response: response });
            alertify.success('Message sent succesfully' + sprintf(" (http code %d)", response.status));
        });

    } else {
        return response.json().catch(err => {
            // the status was not ok and there is no json body
            // throw new Error(response.statusText);
            alertify.error('Some error occured. Please try again.');
        }).then(json => {
            // the status was not ok but there is a json body
            // throw new Error(json.error.message); // example error message returned by a REST
            let delay = alertify.get('notifier', 'delay');
            alertify.set('notifier', 'delay', 30);
            let errorMessage = "";
            json.errors.forEach(function(data) {
                errorMessage += sprintf("Field Name: %s \n Rejected value: %s \n Reason: %s \n", data.field_name, data.rejected_value, data.error_message);
            });
            alertify.error(sprintf('There were errors in your message - %s', errorMessage));
            alertify.set('notifier', 'delay', delay);
        });
    }
}


function fetchErrorHandler(response) {
    // alertify.success('Current position : ' + alertify.get('notifier', 'position'));
    if (!response.ok) {
        return response.text().catch(err => {
            // the status was not ok and there is no json body
            // throw new Error(response.statusText);
            // window.alert(sprintf('Some error occured. Http code is %s', response.status));
            alertify.error(sprintf('Some error occured. Http code is %s', response.status));
            return true;
        }).then(json => {
            // the status was not ok but there is a json body
            // throw new Error(json.error.message); // example error message returned by a REST API
            // window.alert(sprintf('Error: %s (Http code %s)', json, response.status));
            alertify.error(sprintf('Some error occured. Http code is %s', response.status));
            console.log(json);
            return true;
        });
    }
}

function scrollChatAreaAnimated(delay) {
    $(chatAreaNew).stop().animate({
        scrollTop: $(chatAreaNew)[0].scrollHeight
    }, delay);
}