Chatto/chatto/src/main/resources/static/js/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 toUserRadios = document.getElementsByName('toUser');
var isCheckedUser = false;
var chatTextArea = document.getElementById('chatTextArea');

var passphraseInput = document.getElementById('passphrase');
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 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 = sessionStorage.getItem('username');
var password = sessionStorage.getItem('password');
var authToken = 'Basic ' + btoa(username + ":" + password);
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 chatAreaNew = document.getElementById('chat_area_new');

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

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

for (let i = 0; i < userBoxes.length; i++) {
    userBoxes[i].addEventListener('click', function() {
        let current = document.getElementsByClassName('user-box active');
        if (current.length > 0) {
            current[0].className = current[0].className.replace(" active", "");
        }
        // Add the active class to the current/clicked button
        this.className += " active";
    })
}

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

}

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

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

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

            if (!isCheckedUser) {
                window.alert('please select a user');
                return;
            }
            //				console.log('second user = ' + user);
            let messageContent = chatInput.value;
            let localDate = new Date();
            let messageLine = sprintf('%s %s %s: %s', localDate.toLocaleDateString(), localDate.toLocaleTimeString(), username, messageContent);
            chatTextArea.append(messageLine + "\n");
            chatTextArea.scrollTop = chatTextArea.scrollHeight;
            // let messageCipher = sjcl.encrypt("password", messageContent);
            let messageCipher = sjcl.encrypt(passphraseInput.value, messageContent, { mode: "gcm", ts: 128, adata: "", iter: iterations });
            let messageCipherJson = JSON.parse(messageCipher);
            // let messageCipherSpring = JSON.stringify(messageCipherJson);
            //				console.log('message cipher json ' + messageCipherJson);
            //				console.log('message cipher string  ' + messageCipherSpring);
            let chatMessageDTO = {
                    "toUser": user,
                    "messageCipher": messageCipherJson
                }
                //				console.log(chatMessageDTO);
                //				console.log(JSON.stringify(chatMessageDTO));
            messageSend(JSON.stringify(chatMessageDTO));
            // sessionStorage.setItem('passphrase', passphraseInput.value);
            // console.log(sessionStorage.getItem('passphrase'));


        })
}

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', authToken);
    fetch(postNewMessageUrl, {
            method: 'POST',
            headers: headers,
            body: chatMessageDTO
        })
        .then(response => console.log(response));
}

// function getMessages(toUser) {
// 	let headers = new Headers();
// 	let messageLog = [];
// 	//	console.log("Token = " + btoa("hmm" + ":" + "hmm"))

// 	// headers.append('Accept','application/json')
// 	// headers.append('Content-Type', 'application/json');
// 	headers.append('Authorization', 'Basic ' + btoa("hmm" + ":" + "hmm"));
// 	let myPromise = fetch(getUrl + toUser, {
// 		method: 'GET',
// 		headers: headers
// 	})
// 		.then(response => {
// 			console.log(response);
// 			return response.json();
// 		})
// 		.then(json => {

// 			console.log(json);
// 			let i = 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 = sjcl.decrypt(passphraseInput.value, messageCipher);
// 				let messageLine = sprintf('%s %s: %s \n', obj.messageTime, obj.fromUser, message);
// 				console.log(messageLine);
// 				// chatTextArea.append(obj.fromUser + ": " + message + "\n");
// 				chatTextArea.append(messageLine);
// 				messageLog[i++] = messageLine;
// 			});
// 			console.log(messageLog);
// 			// return messageLog;

// 		});
// 	return messageLog;
// }

// async function getUserAsync(name) 
// {
//   let response = await fetch(`https://api.github.com/users/${name}`);
//   let data = await response.json()
//   return data;
// }

// getUserAsync('yourUsernameHere')
//   .then(data => console.log(data)); 

async function getAllMessages(toUser) {
    let headers = new Headers();
    // headers.append('Accept','application/json')
    // headers.append('Content-Type', 'application/json');
    headers.append('Authorization', authToken);
    let response = await fetch(getAllMessagesUrl + toUser, {
        method: 'GET',
        headers: headers
    });
    let data = await response.json();
    return data;
}

async function getNewMessages(toUser, lastMessageTimeStamp) {
    let headers = new Headers();
    headers.append('Authorization', authToken);
    let response = await fetch(`${getNewMessagesUrl}${toUser}/${lastMessageTimeStamp}`, {
        method: 'GET',
        headers: headers
    });
    let data = await response.json();
    return data;
}

// getMessages('user2');
window.EventTarget.prototype.addDelegatedListener = function(type, delegateSelector, listener) {
    this.addEventListener(type, function(event) {
        if (event.target && event.target.matches(delegateSelector)) {
            listener.call(event.target, event)
        }
    });
}
let parent = document.getElementById('chatMessageForm')
parent.addDelegatedListener("click", "input[type='radio']", function(event) {
    // if (sessionStorage.getItem('status') != null) {
    if (passphraseInput.value == '') {
        alert('Please input passphrase')
        return;
    }
    console.log(this.value);
    if (sessionStorage.getItem(this.value) == null) {
        chatTextArea.textContent = '';
        chatAreaNew.innerHTML = '';
        getAllMessages(this.value)
            .then(json => {
                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 = sjcl.decrypt(passphraseInput.value, 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(msgContainer);


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


                }
            });
    } else {


        console.log("Stored messages = " + sessionStorage.getItem(this.value));
        let storedMessages = JSON.parse(sessionStorage.getItem(this.value));
        let storedMessagesNew = JSON.parse(sessionStorage.getItem(this.value + 'new'));
        let lastMessageTime = sessionStorage.getItem(this.value + '-time');
        console.log("last message time stamp = " + lastMessageTime);
        if (lastMessageTime != null) {
            getNewMessages(this.value, lastMessageTime)
                .then(json => {
                    console.log(json)
                    if (json.length > 0) {
                        json.forEach(function(obj) {
                            let messageCipher = JSON.stringify(obj.messageCipher);
                            let message = sjcl.decrypt(passphraseInput.value, 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(msgContainer);

                        })
                        sessionStorage.setItem(this.value + '-time', lastMessageTimeStamp);
                        sessionStorage.setItem(this.value, JSON.stringify(storedMessages));
                        sessionStorage.setItem(this.value + 'new', JSON.stringify(storedMessagesNew));
                        console.log("this value stored" + sessionStorage.getItem(this.value))
                        console.log("last message time stamp = " + lastMessageTimeStamp);
                        console.log(sessionStorage.getItem(this.value + '-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(msgContainer);
                    })


                });


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

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

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


handleChatForm();

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