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