Wrapped markdownit js dep into a service, and added send and receive templates to chatview

chatto/src/main/javascript/ts/src/service/MarkDownItMarkDownService.ts

@@ -0,0 +1,9 @@
+import markdownit = require('markdown-it');
+import { MarkDownService } from './MarkDownService';
+export class MarkDownItMarkDownService implements MarkDownService {
+    private readonly _md = new markdownit();
+
+    render(inputString: string): string {
+        return this._md.render(inputString);
+    }
+}

chatto/src/main/javascript/ts/src/service/MarkDownService.ts

@@ -0,0 +1,3 @@
+export interface MarkDownService {
+    render(inputString: string): string;
+}

chatto/src/main/javascript/ts/src/singleton/AuthToken.ts

@@ -1,2 +0,0 @@
-export let authToken: string | null = null;
-// localStorage.getItem('authToken')

chatto/src/main/javascript/ts/src/view/ChatView.ts

@@ -1,42 +1,44 @@
 import { Observer } from "../observe/Observer";
-import { Model } from "../model/AbstractModel";
-import { Subject } from "../observe/Observable";
-import { View } from "./AbstractView";
-import { Controller } from "../controller/AbstractController";
 import { TemplateFactory } from "../template/TemplateFactory";
-import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
 import { ChatModel } from "../model/ChatModel";
 import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";
 import * as log from 'loglevel';
 import * as DOMPurify from 'dompurify';
-import markdownit = require('markdown-it');
+import { MarkDownService } from "../service/MarkDownService";
-var md = new markdownit();
+import { MarkDownItMarkDownService } from "../service/MarkDownItMarkDownService";
+import { JsonAPI } from "../singleton/JsonAPI";
+// var md = new markdownit();
 
 export class ChatView implements Observer {
-    private readonly _model: ChatModel;
     private readonly _element: HTMLElement;
     private readonly _messageSendTemplate = TemplateFactory.getTemplate('msg_container_send_template');
+    private readonly _messageReceiveTemplate = TemplateFactory.getTemplate('msg_container_template');
+    private readonly _markdownService: MarkDownService = new MarkDownItMarkDownService();
 
 
     constructor(model: ChatModel, element: HTMLElement) {
-        this._model = model;
         this._element = element;
     }
 
 
     update(data: ChatMessageViewModel[]): void {
         log.info('ChatView: updating view');
-        let html: string = "";
+        // let html: string = "";
         data.forEach((vm: ChatMessageViewModel) => {
             const vmTemp = vm;
-            vmTemp.message = md.render(vm.message);
+            vmTemp.message = this._markdownService.render(vm.message);
-            $(this._element).append(DOMPurify.sanitize(this._messageSendTemplate(vmTemp)));
+            /** Very Important!!!
+            * Sanitizing HTML before displaying on webpage to prevent XSS attacks!!
+            */
+            if (vmTemp.fromUser == JsonAPI.userName) {
+                $(this._element).append(DOMPurify.sanitize(this._messageSendTemplate(vmTemp)));
+            }
+            else {
+                $(this._element).append(DOMPurify.sanitize(this._messageReceiveTemplate(vmTemp)));
+            }
             // html += this._messageSendTemplate(vm);
         });
 
-        /** Very Important!!!
-         * Sanitizing HTML before displaying on webpage to prevent XSS attacks!!
-         */
         // html = DOMPurify.sanitize(md.render(html));
         // this._element.innerHTML = html;
         // log.debug(this._element.innerHTML);

chatto/src/main/resources/templates/chat.html

@@ -10,16 +10,6 @@
         <meta charset="UTF-8">
         <title id="pageTitle">Chat</title>
     </div>
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/sjcl/1.0.8/sjcl.min.js" integrity="sha256-nIoG9XIePM1QNttI6KAGLYGNxc4DNinxxmOZW0/Z7uA=" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.4.2/handlebars.min.js" integrity="sha256-oh7N5nthuhldTk8/34Za7FXv3BkeVN9vAnYk/pLfC78=" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.3/purify.min.js" integrity="sha256-58eGKW6SunbeAY1RP9WEbg3nViB9o1qDnxV4yCITqx4=" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/alertify.min.js" integrity="sha256-yscIZgtlDR9q6eoYCRmcaiNE6W80UFSnq+6Llwu4NLI=" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/alertify.min.css" integrity="sha256-nhstgDCuZGQRk+wvwXZIPt278arHtuZKJ1YQ0rrXiL4=" crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/default.css" integrity="sha256-dawRQVhnqw8jRXaGnK0aj/NpOsPaQm+Em1sWN+fvegI=" crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.12.0/css/themes/bootstrap.css" integrity="sha256-1fgYpB3cyITZIur7E+Mj3R54NtlN9HwHykgKTJf0pmU=" crossorigin="anonymous" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.4.5/fuse.min.js" integrity="sha256-Yrh3VGzE4d9b4KANknPJAhfcKt9SgHTL0v/FrJFoPzw=" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/loglevel/1.6.4/loglevel.min.js" integrity="sha256-ACTlnmNCkOooSKkPCKYbiex8WLE82aeiN+Z9ElZag5Q=" crossorigin="anonymous"></script> -->
     <script src="./../../javascript/bundle.js" th:src="@{/js/bundle.js}" defer></script>
     <link rel="stylesheet" th:href="@{/css/chat.css}" href="../../resources/static/css/chat.css">