2019-12-06 14:21:07 +00:00
|
|
|
import { Observer } from "../observe/Observer";
|
|
|
|
import { TemplateFactory } from "../template/TemplateFactory";
|
|
|
|
import { ChatModel } from "../model/ChatModel";
|
|
|
|
import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";
|
|
|
|
import * as log from 'loglevel';
|
2019-12-07 06:00:51 +00:00
|
|
|
import * as DOMPurify from 'dompurify';
|
2019-12-07 10:45:29 +00:00
|
|
|
import { MarkDownService } from "../service/MarkDownService";
|
|
|
|
import { MarkDownItMarkDownService } from "../service/MarkDownItMarkDownService";
|
|
|
|
import { JsonAPI } from "../singleton/JsonAPI";
|
2019-12-07 15:15:50 +00:00
|
|
|
import { MessageCipherDTO } from "../dto/MessageCipherDTO";
|
|
|
|
import { SJCLEncryptionService } from "../service/SJCLEncryptionService";
|
|
|
|
import { EncryptionService } from "../service/EncryptionService";
|
|
|
|
import { ChatMessageDTO } from "../dto/ChatMessageDTO";
|
|
|
|
import { fetchHandler } from "./FetchHandler";
|
2019-12-11 10:30:45 +00:00
|
|
|
import { ChatViewDeps } from "./ChatViewDeps";
|
2019-12-06 14:21:07 +00:00
|
|
|
|
|
|
|
export class ChatView implements Observer {
|
2019-12-07 15:15:50 +00:00
|
|
|
private readonly _chatModel: ChatModel;
|
|
|
|
private readonly _messageContainer: HTMLElement;
|
2019-12-11 10:30:45 +00:00
|
|
|
// private readonly _messageSendTemplate = TemplateFactory.getTemplate('msg_container_send_template');
|
|
|
|
// private readonly _messageReceiveTemplate = TemplateFactory.getTemplate('msg_container_template');
|
|
|
|
// private readonly _markdownService: MarkDownService = new MarkDownItMarkDownService();
|
|
|
|
// private readonly _encryptionService: EncryptionService = new SJCLEncryptionService();
|
|
|
|
|
|
|
|
private readonly _messageSendTemplate: Handlebars.TemplateDelegate<ChatMessageViewModel>;
|
|
|
|
private readonly _messageReceiveTemplate: Handlebars.TemplateDelegate<ChatMessageViewModel>;
|
|
|
|
private readonly _markdownService: MarkDownService;
|
|
|
|
private readonly _encryptionService: EncryptionService;
|
|
|
|
|
|
|
|
|
|
|
|
constructor(deps: ChatViewDeps) {
|
|
|
|
this._messageContainer = deps.messageContainer;
|
|
|
|
this._chatModel = deps.chatModel;
|
|
|
|
this._messageSendTemplate = deps.messageSendTemplate;
|
|
|
|
this._messageReceiveTemplate = deps.messageReceiveTemplate;
|
|
|
|
this._markdownService = deps.markdownService;
|
|
|
|
this._encryptionService = deps.encryptionService;
|
2019-12-07 15:15:50 +00:00
|
|
|
this.addEventListeners();
|
2019-12-06 14:21:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
update(data: ChatMessageViewModel[]): void {
|
2019-12-07 06:00:51 +00:00
|
|
|
log.info('ChatView: updating view');
|
2019-12-07 10:45:29 +00:00
|
|
|
// let html: string = "";
|
2019-12-07 15:15:50 +00:00
|
|
|
this._messageContainer.innerHTML = "";
|
2019-12-06 14:21:07 +00:00
|
|
|
data.forEach((vm: ChatMessageViewModel) => {
|
2019-12-07 08:04:54 +00:00
|
|
|
const vmTemp = vm;
|
2019-12-07 10:45:29 +00:00
|
|
|
vmTemp.message = this._markdownService.render(vm.message);
|
|
|
|
/** Very Important!!!
|
|
|
|
* Sanitizing HTML before displaying on webpage to prevent XSS attacks!!
|
|
|
|
*/
|
2019-12-07 15:15:50 +00:00
|
|
|
let rendered;
|
|
|
|
if (vmTemp.fromUser == JsonAPI.principleName) {
|
|
|
|
rendered = DOMPurify.sanitize(this._messageSendTemplate(vmTemp));
|
|
|
|
|
2019-12-07 10:45:29 +00:00
|
|
|
}
|
|
|
|
else {
|
2019-12-07 15:15:50 +00:00
|
|
|
rendered = DOMPurify.sanitize(this._messageReceiveTemplate(vmTemp));
|
2019-12-07 10:45:29 +00:00
|
|
|
}
|
2019-12-07 15:15:50 +00:00
|
|
|
$(this._messageContainer).append(rendered);
|
|
|
|
log.debug()
|
2019-12-07 08:04:54 +00:00
|
|
|
// html += this._messageSendTemplate(vm);
|
2019-12-06 14:21:07 +00:00
|
|
|
});
|
2019-12-07 06:00:51 +00:00
|
|
|
|
2019-12-07 08:04:54 +00:00
|
|
|
// html = DOMPurify.sanitize(md.render(html));
|
|
|
|
// this._element.innerHTML = html;
|
|
|
|
// log.debug(this._element.innerHTML);
|
2019-12-06 14:21:07 +00:00
|
|
|
}
|
2019-12-07 15:15:50 +00:00
|
|
|
|
|
|
|
private addEventListeners(): void {
|
|
|
|
this.addChatFormEL();
|
|
|
|
}
|
|
|
|
|
|
|
|
private addChatFormEL() {
|
|
|
|
const chatForm = document.getElementById('chatMessageForm') as HTMLSelectElement;
|
|
|
|
|
|
|
|
if (chatForm == null) {
|
|
|
|
log.error("Chat form is null");
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
chatForm.addEventListener('submit', (e) => this.createChatMessageDTO(e, chatForm))
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
private createChatMessageDTO(e: Event, chatForm: HTMLSelectElement): void {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
let contactName = JsonAPI.contactName;
|
|
|
|
|
|
|
|
if(contactName == null)
|
|
|
|
{
|
|
|
|
log.error("Contact name is null");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!chatForm.checkValidity()) {
|
|
|
|
console.log("error");
|
|
|
|
chatForm.classList.add('was-validated');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
chatForm.classList.add('was-validated');
|
|
|
|
|
|
|
|
|
|
|
|
const chatInput = document.getElementById('chatInput') as HTMLInputElement;
|
|
|
|
const passphraseInput = document.getElementById('passphrase') as HTMLInputElement;
|
|
|
|
|
|
|
|
if (chatInput.value == '' || chatInput.value == null) {
|
|
|
|
log.error("Chat input is null.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (passphraseInput.value == '' || passphraseInput.value == null) {
|
|
|
|
log.error("Chat input is null.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
const messageContent = chatInput.value;
|
2019-12-11 10:30:45 +00:00
|
|
|
const context = { fromUser: JsonAPI.principleName, toUser: "", message: this._markdownService.render(messageContent), messageTime: new Date().toLocaleString() };
|
|
|
|
// @ts-ignore
|
2019-12-07 15:15:50 +00:00
|
|
|
const msgContainer: string = this._messageSendTemplate(context);
|
|
|
|
$(this._messageContainer).append(DOMPurify.sanitize(msgContainer));
|
|
|
|
// scrollChatAreaAnimated(2400);
|
|
|
|
// let messageCipher = sjcl.encrypt(passphraseInput.value, messageContent, { mode: "gcm", ts: 128, adata: "", iter: iterations });
|
|
|
|
let messageCipher: MessageCipherDTO = this._encryptionService.encrypt(passphraseInput.value, messageContent)
|
|
|
|
// let messageCipherJson = JSON.parse(messageCipher);
|
|
|
|
let chatMessageDTO = {
|
|
|
|
"fromUser": JsonAPI.principleName,
|
|
|
|
"toUser": contactName,
|
|
|
|
"messageCipher": messageCipher,
|
|
|
|
// "messageTime": null
|
|
|
|
}
|
|
|
|
// @ts-ignore
|
|
|
|
this.sendMessageAJAX(chatMessageDTO);
|
|
|
|
}
|
|
|
|
|
|
|
|
private sendMessageAJAX(chatMessageDTO: ChatMessageDTO): void {
|
|
|
|
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);
|
|
|
|
// @ts-ignore
|
|
|
|
headers.append('X-AUTH-TOKEN', JsonAPI.authToken);
|
|
|
|
fetch(JsonAPI.MESSAGE_POST, {
|
|
|
|
method: 'POST',
|
|
|
|
headers: headers,
|
|
|
|
body: JSON.stringify(chatMessageDTO)
|
|
|
|
})
|
|
|
|
.then(response => {
|
|
|
|
log.debug(response);
|
|
|
|
return response.clone();
|
|
|
|
})
|
|
|
|
.then(response => fetchHandler(response));
|
|
|
|
|
|
|
|
}
|
2019-12-06 14:21:07 +00:00
|
|
|
}
|