pre integration commit

4 years ago · 29a31ab60d
47 changed files with 2566 additions and 31231 deletions
--- a/chatto/package.json
+++ b/chatto/package.json
@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@types/sjcl": "^1.0.28"
+  }
+}
--- a/chatto/src/main/javascript/bundle.js
+++ b/chatto/src/main/javascript/bundle.js
--- a/chatto/src/main/javascript/package.json
+++ b/chatto/src/main/javascript/package.json
@ -1,5 +1,6 @@
 {
    "dependencies": {
+        "@types/markdown-it": "^0.0.9",
        "alertifyjs": "^1.12.0",
        "chart.js": "^2.9.3",
        "dompurify": "^2.0.7",
@ -29,4 +30,4 @@
        "fuse.js": "global:Fuse",
        "sjcl": "global:sjcl"
    }
-}
+}
--- a/chatto/src/main/javascript/ts/bundle.js
+++ b/chatto/src/main/javascript/ts/bundle.js
--- a/chatto/src/main/javascript/ts/out/controller/ChatController.js
+++ b/chatto/src/main/javascript/ts/out/controller/ChatController.js
@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../model/AbstractModel");
+require("../model/UserModel");
+require("../view/AbstractView");
+require("../view/UserView");
+var ChatMessageViewModel_1 = require("../viewmodel/ChatMessageViewModel");
+var ChatController = /** @class */ (function () {
+    function ChatController(model, view) {
+        this._model = model;
+        this._view = view;
+    }
+    Object.defineProperty(ChatController.prototype, "model", {
+        /**
+         * Getter model
+         * @return {Model}
+         */
+        get: function () {
+            return this._model;
+        },
+        /**
+         * Setter model
+         * @param {Model} value
+         */
+        set: function (value) {
+            this._model = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ChatController.prototype, "view", {
+        /**
+         * Getter view
+         * @return {View}
+         */
+        get: function () {
+            return this._view;
+        },
+        /**
+         * Setter view
+         * @param {View} value
+         */
+        set: function (value) {
+            this._view = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * eventHandler
+     */
+    ChatController.prototype.eventHandler = function (vm) {
+        this.model.someBusinessMethod(vm);
+    };
+    ChatController.prototype.test = function () {
+        var chatMessageViewModels = [];
+        var chatMessageViewModelMock = new ChatMessageViewModel_1.ChatMessageViewModel();
+        chatMessageViewModelMock.fromUser = "user1";
+        chatMessageViewModelMock.toUser = "user2";
+        chatMessageViewModelMock.messageCipher = "";
+        chatMessageViewModelMock.messageTime = new Date();
+        chatMessageViewModels.push(chatMessageViewModelMock);
+    };
+    return ChatController;
+}());
+exports.ChatController = ChatController;
--- a/chatto/src/main/javascript/ts/out/controller/UserController.js
+++ b/chatto/src/main/javascript/ts/out/controller/UserController.js
@ -4,6 +4,7 @@ require("../model/AbstractModel");
 require("../model/UserModel");
 require("../view/AbstractView");
 require("../view/UserView");
+var ActiveUserViewModel_1 = require("../viewmodel/ActiveUserViewModel");
 var UserController = /** @class */ (function () {
    function UserController(model, view) {
        this._model = model;
@ -45,6 +46,26 @@ var UserController = /** @class */ (function () {
        enumerable: true,
        configurable: true
    });
+    /**
+     * eventHandler
+     */
+    UserController.prototype.eventHandler = function (vm) {
+        this.model.someBusinessMethod(vm);
+    };
+    UserController.prototype.test = function () {
+        var activeUsersMock = [];
+        var activeUserViewModelMock = new ActiveUserViewModel_1.ActiveUserViewModel();
+        activeUserViewModelMock.userName = "some user";
+        activeUserViewModelMock.lastActive = "3 hrs ago";
+        activeUserViewModelMock.online = true;
+        activeUsersMock.push(activeUserViewModelMock);
+        activeUserViewModelMock = new ActiveUserViewModel_1.ActiveUserViewModel();
+        activeUserViewModelMock.lastActive = "3 hrs ago";
+        activeUserViewModelMock.online = true;
+        activeUserViewModelMock.userName = "some user 2";
+        activeUsersMock.push(activeUserViewModelMock);
+        this.eventHandler(activeUsersMock);
+    };
    return UserController;
 }());
 exports.UserController = UserController;
--- a/chatto/src/main/javascript/ts/out/main.js
+++ b/chatto/src/main/javascript/ts/out/main.js
@ -1,10 +1,58 @@
 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var UserModel_1 = require("./model/UserModel");
 var UserView_1 = require("./view/UserView");
 var UserController_1 = require("./controller/UserController");
+var Handlebars = __importStar(require("handlebars"));
+var markdownit = require("markdown-it");
+var ChatModel_1 = require("./model/ChatModel");
+var ChatView_1 = require("./view/ChatView");
+var ChatController_1 = require("./controller/ChatController");
+var JsonAPI_1 = require("./singleton/JsonAPI");
+// import log = require('loglevel')
+// import * as log from 'loglevel';
+var loglevel_1 = __importDefault(require("loglevel"));
+var SJCLEncryptionService_1 = require("./service/SJCLEncryptionService");
+// var markdownit = require('markdown-it');
+var md = new markdownit();
+var userBox = document.getElementById('contacts-box');
+loglevel_1.default.setLevel("TRACE");
+var chatModel = new ChatModel_1.ChatModel();
 var userModel = new UserModel_1.UserModel();
-var userView = new UserView_1.UserView(userModel, 2);
+// const userModel = ModelFactory.createModel("USER");
+// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
+var userView = new UserView_1.UserView(userModel, chatModel, userBox);
+// console.log(userBox);
 userModel.attach(userView);
 // userView.model
 var userController = new UserController_1.UserController(userModel, userView);
+userController.test();
+// userModel.someBusinessMethod(activeUsersMock);
+loglevel_1.default.info("hello");
+var chatArea = document.getElementById('chat-area-new');
+// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
+var chatView = new ChatView_1.ChatView(chatModel, chatArea);
+var chatController = new ChatController_1.ChatController(chatModel, chatView);
+function someFunc(vm) {
+    // log.info(vm);
+    // logger.info(vm)
+}
+loglevel_1.default.info("test");
+// someFunc(activeUserViewModelMock);
+// @ts-ignore: Object is possibly 'null'.
+var source = document.getElementById("msg_container_template").innerHTML;
+var msgContainerTemplate = Handlebars.compile(source);
+JsonAPI_1.JsonAPI.ACTIVE_USERS_GET + 'aef';
+var encryptionService = new SJCLEncryptionService_1.SJCLEncryptionService();
+var ct = encryptionService.encrypt("password", "data");
+console.log(encryptionService.decrypt("password", ct));
--- a/chatto/src/main/javascript/ts/out/model/ChatModel.js
+++ b/chatto/src/main/javascript/ts/out/model/ChatModel.js
@ -0,0 +1,162 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var FetchErrorHandler_1 = require("./FetchErrorHandler");
+var JsonAPI_1 = require("../singleton/JsonAPI");
+var log = require("loglevel");
+var ChatModel = /** @class */ (function () {
+    function ChatModel() {
+        /**
+      * @type {Observer[]} List of subscribers. In real life, the list of
+      * subscribers can be stored more comprehensively (categorized by event
+      * type, etc.).
+      */
+        this.observers = [];
+        // @ts-ignore: Cannot find name 'hostAddress'.
+        this.getActiveUsersUrl = "";
+        this.state = null;
+    }
+    /**
+     * The subscription management methods.
+     */
+    ChatModel.prototype.attach = function (observer) {
+        console.log('Subject: Attached an observer.');
+        this.observers.push(observer);
+    };
+    ChatModel.prototype.detach = function (observer) {
+        var observerIndex = this.observers.indexOf(observer);
+        this.observers.splice(observerIndex, 1);
+        console.log('Subject: Detached an observer.');
+    };
+    /**
+     * Trigger an update in each subscriber.
+     */
+    ChatModel.prototype.notify = function () {
+        console.log('Subject: Notifying observers...');
+        for (var _i = 0, _a = this.observers; _i < _a.length; _i++) {
+            var observer = _a[_i];
+            observer.update(this.state);
+        }
+    };
+    ChatModel.prototype.someBusinessMethod = function (activeuserList) {
+        this.state = activeuserList;
+        this.helperMethod();
+        console.log("Subject: My state has just changed");
+        console.log(activeuserList);
+        this.notify();
+    };
+    /**
+     * getActiveUsers
+     */
+    ChatModel.prototype.getMessages = function () {
+        var _this = this;
+        this.getAllMessagesAjax(":")
+            .then(function (data) {
+            // // activeUsers = data;
+            // sessionStorage.setItem('activeUsers', JSON.stringify(data));
+            // console.log(sessionStorage.getItem('activeUsers'));
+            console.log("Subject: received ajax active users");
+            _this.state = data;
+            _this.notify();
+        });
+    };
+    ChatModel.prototype.getAllMessagesAjax = function (authToken2) {
+        return __awaiter(this, void 0, Promise, function () {
+            var headers, response, data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        headers = new Headers();
+                        // headers.append('Authorization', basicAuthToken);
+                        if (JsonAPI_1.JsonAPI.authToken == null) {
+                            log.error("authToken null");
+                            return [2 /*return*/];
+                        }
+                        ;
+                        headers.append('X-AUTH-TOKEN', JsonAPI_1.JsonAPI.authToken);
+                        return [4 /*yield*/, fetch(this.getActiveUsersUrl, {
+                                method: 'GET',
+                                headers: headers
+                            })];
+                    case 1:
+                        response = _a.sent();
+                        console.log(response.clone());
+                        if (FetchErrorHandler_1.fetchErrorHandler(response.clone())) {
+                            return [2 /*return*/, null];
+                        }
+                        return [4 /*yield*/, response.json()];
+                    case 2:
+                        data = _a.sent();
+                        return [2 /*return*/, data];
+                }
+            });
+        });
+    };
+    ChatModel.prototype.getNewMessages = function (authToken, toUser, lastMessageTimeStamp) {
+        return __awaiter(this, void 0, void 0, function () {
+            var headers, response, data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        headers = new Headers();
+                        // headers.append('Authorization', basicAuthToken);
+                        headers.append('X-AUTH-TOKEN', authToken);
+                        return [4 /*yield*/, fetch("" + JsonAPI_1.JsonAPI.CHAT_MESSAGES_GET + toUser + "/" + lastMessageTimeStamp, {
+                                method: 'GET',
+                                headers: headers
+                            })];
+                    case 1:
+                        response = _a.sent();
+                        console.log(response.clone());
+                        if (FetchErrorHandler_1.fetchErrorHandler(response.clone())) {
+                            return [2 /*return*/, null];
+                        }
+                        return [4 /*yield*/, response.json()];
+                    case 2:
+                        data = _a.sent();
+                        return [2 /*return*/, data];
+                }
+            });
+        });
+    };
+    ChatModel.prototype.helperMethod = function () { };
+    ChatModel.prototype.populateMessages = function () {
+    };
+    return ChatModel;
+}());
+exports.ChatModel = ChatModel;
--- a/chatto/src/main/javascript/ts/out/model/FetchErrorHandler.js
+++ b/chatto/src/main/javascript/ts/out/model/FetchErrorHandler.js
@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function fetchErrorHandler(response) {
+    // alertify.success('Current position : ' + alertify.get('notifier', 'position'));
+    if (!response.ok) {
+        return response.text().catch(function (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(function (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;
+        });
+    }
+}
+exports.fetchErrorHandler = fetchErrorHandler;
--- a/chatto/src/main/javascript/ts/out/model/ModelFactory.js
+++ b/chatto/src/main/javascript/ts/out/model/ModelFactory.js
@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var UserModel_1 = require("./UserModel");
+var ModelFactory = /** @class */ (function () {
+    function ModelFactory() {
+    }
+    ModelFactory.createModel = function (modelName) {
+        switch (modelName) {
+            case "USER":
+                return new UserModel_1.UserModel();
+                break;
+            default: throw new Error("Invalid model name");
+        }
+    };
+    return ModelFactory;
+}());
+exports.ModelFactory = ModelFactory;
--- a/chatto/src/main/javascript/ts/out/model/UserModel.js
+++ b/chatto/src/main/javascript/ts/out/model/UserModel.js
@ -1,5 +1,43 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var FetchErrorHandler_1 = require("./FetchErrorHandler");
+var JsonAPI_1 = require("../singleton/JsonAPI");
 var UserModel = /** @class */ (function () {
    function UserModel() {
        /**
@ -8,7 +46,8 @@ var UserModel = /** @class */ (function () {
      * type, etc.).
      */
        this.observers = [];
-        this.state = 0;
+        // @ts-ignore: Cannot find name 'hostAddress'.
+        this.getActiveUsersUrl = "";
    }
    /**
     * The subscription management methods.
@ -32,10 +71,56 @@ var UserModel = /** @class */ (function () {
            observer.update(this.state);
        }
    };
-    UserModel.prototype.someBusinessMethod = function () {
-        console.log("Subject: My state has just changed to: " + this.state);
+    UserModel.prototype.someBusinessMethod = function (activeuserList) {
+        this.state = activeuserList;
+        this.helperMethod();
+        console.log("Subject: My state has just changed");
+        console.log(activeuserList);
        this.notify();
    };
+    /**
+     * getActiveUsers
+     */
+    UserModel.prototype.getActiveUsers = function () {
+        var _this = this;
+        this.getActiveUsersAjax("", JsonAPI_1.JsonAPI.ACTIVE_USERS_GET)
+            .then(function (data) {
+            // // activeUsers = data;
+            // sessionStorage.setItem('activeUsers', JSON.stringify(data));
+            // console.log(sessionStorage.getItem('activeUsers'));
+            console.log("Subject: received ajax active users");
+            _this.state = data;
+            _this.notify();
+        });
+    };
+    UserModel.prototype.getActiveUsersAjax = function (authToken2, URL) {
+        return __awaiter(this, void 0, void 0, function () {
+            var headers, response, data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        headers = new Headers();
+                        // headers.append('Authorization', basicAuthToken);
+                        headers.append('X-AUTH-TOKEN', authToken2);
+                        return [4 /*yield*/, fetch(this.getActiveUsersUrl, {
+                                method: 'GET',
+                                headers: headers
+                            })];
+                    case 1:
+                        response = _a.sent();
+                        console.log(response.clone());
+                        if (FetchErrorHandler_1.fetchErrorHandler(response.clone())) {
+                            return [2 /*return*/, null];
+                        }
+                        return [4 /*yield*/, response.json()];
+                    case 2:
+                        data = _a.sent();
+                        return [2 /*return*/, data];
+                }
+            });
+        });
+    };
+    UserModel.prototype.helperMethod = function () { };
    return UserModel;
 }());
 exports.UserModel = UserModel;
--- a/chatto/src/main/javascript/ts/out/observe/Observable.js
+++ b/chatto/src/main/javascript/ts/out/observe/Observable.js
@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * The Subject owns some important state and notifies observers when the state
+ * changes.
+ */
+// class ConcreteSubject implements Subject {
+//     /**
+//      * @type {number} For the sake of simplicity, the Subject's state, essential
+//      * to all subscribers, is stored in this variable.
+//      */
+//     public state: number;
+//     /**
+//      * @type {Observer[]} List of subscribers. In real life, the list of
+//      * subscribers can be stored more comprehensively (categorized by event
+//      * type, etc.).
+//      */
+//     private observers: Observer[] = [];
+//     /**
+//      * The subscription management methods.
+//      */
+//     public attach(observer: Observer): void {
+//         console.log('Subject: Attached an observer.');
+//         this.observers.push(observer);
+//     }
+//     public detach(observer: Observer): void {
+//         const observerIndex = this.observers.indexOf(observer);
+//         this.observers.splice(observerIndex, 1);
+//         console.log('Subject: Detached an observer.');
+//     }
+//     /**
+//      * Trigger an update in each subscriber.
+//      */
+//     public notify(): void {
+//         console.log('Subject: Notifying observers...');
+//         for (const observer of this.observers) {
+//             observer.update(this);
+//         }
+//     }
+//     /**
+//      * Usually, the subscription logic is only a fraction of what a Subject can
+//      * really do. Subjects commonly hold some important business logic, that
+//      * triggers a notification method whenever something important is about to
+//      * happen (or after it).
+//      */
+//     public someBusinessLogic(): void {
+//         console.log('\nSubject: I\'m doing something important.');
+//         this.state = Math.floor(Math.random() * (10 + 1));
+//         console.log(`Subject: My state has just changed to: ${this.state}`);
+//         this.notify();
+//     }
+// }
+// /**
+//  * The client code.
+//  */
+// const subject = new ConcreteSubject();
+// const observer1 = new ConcreteObserverA();
+// subject.attach(observer1);
+// const observer2 = new ConcreteObserverB();
+// subject.attach(observer2);
+// subject.someBusinessLogic();
+// subject.someBusinessLogic();
+// subject.detach(observer2);
+// subject.someBusinessLogic();
--- a/chatto/src/main/javascript/ts/out/observe/Observer.js
+++ b/chatto/src/main/javascript/ts/out/observe/Observer.js
@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// /**
+//  * The Observer interface declares the update method, used by subjects.
+//  */
+// interface Observer {
+//     // Receive update from subject.
+//     update(subject: Subject): void;
+// }
+// /**
+//  * Concrete Observers react to the updates issued by the Subject they had been
+//  * attached to.
+//  */
+// class ConcreteObserverA implements Observer {
+//     public update(subject: Subject): void {
+//         if (subject.state < 3) {
+//             console.log('ConcreteObserverA: Reacted to the event.');
+//         }
+//     }
+// }
+// class ConcreteObserverB implements Observer {
+//     public update(subject: Subject): void {
+//         if (subject.state === 0 || subject.state >= 2) {
+//             console.log('ConcreteObserverB: Reacted to the event.');
+//         }
+//     }
+// }
--- a/chatto/src/main/javascript/ts/out/service/EncryptionService.js
+++ b/chatto/src/main/javascript/ts/out/service/EncryptionService.js
@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
--- a/chatto/src/main/javascript/ts/out/service/SJCLEncryptionService.js
+++ b/chatto/src/main/javascript/ts/out/service/SJCLEncryptionService.js
@ -0,0 +1,23 @@
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var sjcl = __importStar(require("sjcl"));
+var SJCLEncryptionService = /** @class */ (function () {
+    function SJCLEncryptionService() {
+        this.params = { mode: "gcm", ts: 128, adata: "", iter: 10000 };
+    }
+    SJCLEncryptionService.prototype.encrypt = function (passphrase, plainText) {
+        return sjcl.encrypt(passphrase, plainText, this.params);
+    };
+    SJCLEncryptionService.prototype.decrypt = function (passphrase, cipher) {
+        return sjcl.decrypt(passphrase, cipher, undefined, undefined);
+    };
+    return SJCLEncryptionService;
+}());
+exports.SJCLEncryptionService = SJCLEncryptionService;
--- a/chatto/src/main/javascript/ts/out/singleton/AuthToken.js
+++ b/chatto/src/main/javascript/ts/out/singleton/AuthToken.js
@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.authToken = null;
+// localStorage.getItem('authToken')
--- a/chatto/src/main/javascript/ts/out/singleton/JsonAPI.js
+++ b/chatto/src/main/javascript/ts/out/singleton/JsonAPI.js
@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var JsonAPI;
+(function (JsonAPI) {
+    // @ts-ignore: Cannot find name 'hostAddress'.
+    JsonAPI.authToken = null;
+    JsonAPI.ACTIVE_USERS_GET = "/api/chat/get/active-users/";
+    JsonAPI.CHAT_MESSAGES_GET = "";
+})(JsonAPI = exports.JsonAPI || (exports.JsonAPI = {}));
--- a/chatto/src/main/javascript/ts/out/template/TemplateFactory.js
+++ b/chatto/src/main/javascript/ts/out/template/TemplateFactory.js
@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var TemplateFactory = /** @class */ (function () {
+    function TemplateFactory() {
+    }
+    TemplateFactory.getTemplate = function () {
+        // @ts-ignore: Object is possibly 'null'.
+        var source = document.getElementById("user-contact-online-template").innerHTML;
+        var msgContainerTemplate = Handlebars.compile(source);
+        return msgContainerTemplate;
+    };
+    return TemplateFactory;
+}());
+exports.TemplateFactory = TemplateFactory;
--- a/chatto/src/main/javascript/ts/out/view/ChatView.js
+++ b/chatto/src/main/javascript/ts/out/view/ChatView.js
@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var TemplateFactory_1 = require("../template/TemplateFactory");
+var ChatView = /** @class */ (function () {
+    // private userBoxes: any[] =  [];
+    function ChatView(model, element) {
+        this._model = model;
+        this._element = element;
+    }
+    Object.defineProperty(ChatView.prototype, "model", {
+        /**
+         * Getter model
+         * @return {Model}
+         */
+        get: function () {
+            return this._model;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ChatView.prototype, "element", {
+        /**
+         * Getter element
+         * @return {any}
+         */
+        get: function () {
+            return this._element;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // /**
+    //  * Setter model
+    //  * @param {Model} value
+    //  */
+    // public set model(value: Model) {
+    //     this._model = value;
+    // }
+    // /**
+    //  * Setter element
+    //  * @param {any} value
+    //  */
+    // public set element(value: any) {
+    //     this._element = value;
+    // }
+    ChatView.prototype.update = function (data) {
+        var template = TemplateFactory_1.TemplateFactory.getTemplate();
+        var html = "";
+        data.forEach(function (element) {
+            html += template(element);
+        });
+        this.element.innerHTML = html;
+        this.addUserCallBacks();
+        console.log(this.element.innerHTML);
+    };
+    ChatView.prototype.helper = function () {
+    };
+    ChatView.prototype.addUserCallBacks = function () {
+        var userBoxes = document.getElementsByClassName('user-box');
+        for (var i = 0; i < userBoxes.length; i++) {
+            var userBox = userBoxes[i];
+            userBoxes[i].addEventListener('click', this.userCallBack.bind(this, userBox));
+        }
+    };
+    ChatView.prototype.userCallBack = function (el) {
+        var current = document.getElementsByClassName('user-box active');
+        var passphrase = "";
+        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) {
+            var elem_1 = document.getElementById('passphrase-initial');
+            passphrase = "";
+            if (passphrase == '') {
+                //     // alert('Please input passphrase')
+                //     // alertify.error('Please enter a passphrase');
+                //     return;
+            }
+            // @ts-ignore: Object is possibly 'null'.
+            document.getElementById('no-user-selected').hidden = true;
+            // @ts-ignore: Object is possibly 'null'.
+            document.getElementById('chat-card').hidden = false;
+            // @ts-ignore: Object is possibly 'null'.
+            elem_1.hidden = true;
+        }
+        // console.log(this.getElementsByClassName('to-user-span'));
+        var elem = el.getElementsByClassName('to-user-span')[0];
+        var userName = elem.innerText;
+        // @ts-ignore: Object is possibly 'null'.
+        document.getElementById('user-name-span').innerText = userName;
+        // populateMessages(userName, passphrase);
+        sessionStorage.setItem('selectedUser', userName);
+        el.className += " active";
+    };
+    return ChatView;
+}());
+exports.ChatView = ChatView;
--- a/chatto/src/main/javascript/ts/out/view/UserView.js
+++ b/chatto/src/main/javascript/ts/out/view/UserView.js
@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var TemplateFactory_1 = require("../template/TemplateFactory");
 var UserView = /** @class */ (function () {
-    function UserView(model, element) {
+    // private userBoxes: any[] =  [];
+    function UserView(model, chatModel, element) {
        this._model = model;
+        this._chatModel = chatModel;
        this._element = element;
    }
    Object.defineProperty(UserView.prototype, "model", {
@ -13,13 +16,6 @@ var UserView = /** @class */ (function () {
        get: function () {
            return this._model;
        },
-        /**
-         * Setter model
-         * @param {Model} value
-         */
-        set: function (value) {
-            this._model = value;
-        },
        enumerable: true,
        configurable: true
    });
@ -31,18 +27,77 @@ var UserView = /** @class */ (function () {
        get: function () {
            return this._element;
        },
-        /**
-         * Setter element
-         * @param {any} value
-         */
-        set: function (value) {
-            this._element = value;
-        },
        enumerable: true,
        configurable: true
    });
+    // /**
+    //  * Setter model
+    //  * @param {Model} value
+    //  */
+    // public set model(value: Model) {
+    //     this._model = value;
+    // }
+    // /**
+    //  * Setter element
+    //  * @param {any} value
+    //  */
+    // public set element(value: any) {
+    //     this._element = value;
+    // }
    UserView.prototype.update = function (data) {
-        console.log(data);
+        var template = TemplateFactory_1.TemplateFactory.getTemplate();
+        var html = "";
+        data.forEach(function (element) {
+            html += template(element);
+        });
+        this.element.innerHTML = html;
+        this.addUserCallBacks();
+        console.log(this.element.innerHTML);
+    };
+    UserView.prototype.helper = function () {
+    };
+    UserView.prototype.addUserCallBacks = function () {
+        var userBoxes = document.getElementsByClassName('user-box');
+        for (var i = 0; i < userBoxes.length; i++) {
+            var userBox = userBoxes[i];
+            userBoxes[i].addEventListener('click', this.userCallBack.bind(this, userBox));
+        }
+    };
+    UserView.prototype.userCallBack = function (el) {
+        var current = document.getElementsByClassName('user-box active');
+        var passphrase = "";
+        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) {
+            var elem_1 = document.getElementById('passphrase-initial');
+            passphrase = "";
+            if (passphrase == '') {
+                //     // alert('Please input passphrase')
+                //     // alertify.error('Please enter a passphrase');
+                //     return;
+            }
+            // @ts-ignore: Object is possibly 'null'.
+            document.getElementById('no-user-selected').hidden = true;
+            // @ts-ignore: Object is possibly 'null'.
+            document.getElementById('chat-card').hidden = false;
+            // @ts-ignore: Object is possibly 'null'.
+            elem_1.hidden = true;
+        }
+        // console.log(this.getElementsByClassName('to-user-span'));
+        var elem = el.getElementsByClassName('to-user-span')[0];
+        var userName = elem.innerText;
+        // @ts-ignore: Object is possibly 'null'.
+        document.getElementById('user-name-span').innerText = userName;
+        // populateMessages(userName, passphrase);
+        sessionStorage.setItem('selectedUser', userName);
+        el.className += " active";
    };
    return UserView;
 }());
--- a/chatto/src/main/javascript/ts/out/viewmodel/ActiveUserViewModel.js
+++ b/chatto/src/main/javascript/ts/out/viewmodel/ActiveUserViewModel.js
@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ActiveUserViewModel = /** @class */ (function () {
+    function ActiveUserViewModel() {
+    }
+    return ActiveUserViewModel;
+}());
+exports.ActiveUserViewModel = ActiveUserViewModel;
--- a/chatto/src/main/javascript/ts/out/viewmodel/ChatMessageViewModel.js
+++ b/chatto/src/main/javascript/ts/out/viewmodel/ChatMessageViewModel.js
@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ChatMessageViewModel = /** @class */ (function () {
+    function ChatMessageViewModel() {
+    }
+    return ChatMessageViewModel;
+}());
+exports.ChatMessageViewModel = ChatMessageViewModel;
--- a/chatto/src/main/javascript/ts/src/controller/ChatController.ts
+++ b/chatto/src/main/javascript/ts/src/controller/ChatController.ts
@ -0,0 +1,41 @@
+import { Controller } from "./AbstractController";
+import "../model/AbstractModel"
+import "../model/UserModel"
+import "../view/AbstractView"
+import "../view/UserView"
+import { Model } from "../model/AbstractModel";
+import { View } from "../view/AbstractView";
+import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";
+import { ChatModel } from "../model/ChatModel";
+import { ChatView } from "../view/ChatView";
+
+export class ChatController {
+    private _model: ChatModel;
+    private _view: ChatView;
+
+
+    constructor(model: ChatModel, view: ChatView) {
+        this._model = model;
+        this._view = view;
+    }
+
+
+    /**
+     * eventHandler
+     */
+    public eventHandler(vm: ChatMessageViewModel[]): void {
+        this._model.someBusinessMethod(vm);
+    }
+
+    public test(): void {
+        const chatMessageViewModels: ChatMessageViewModel[] = [];
+        let chatMessageViewModelMock = new ChatMessageViewModel();
+        chatMessageViewModelMock.fromUser = "user1";
+        chatMessageViewModelMock.toUser = "user2";
+        chatMessageViewModelMock.message = "";
+        chatMessageViewModelMock.messageTime = new Date();
+        chatMessageViewModels.push(chatMessageViewModelMock);
+    }
+
+    
+}
--- a/chatto/src/main/javascript/ts/src/controller/UserController.ts
+++ b/chatto/src/main/javascript/ts/src/controller/UserController.ts
@ -5,47 +5,41 @@ import "../view/AbstractView"
 import "../view/UserView"
 import { Model } from "../model/AbstractModel";
 import { View } from "../view/AbstractView";
+import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
+import { UserView } from "../view/UserView";

-export class UserController implements Controller{
-        private _model: Model;
-        private _view: View;
+export class UserController {
+    private _model: Model;
+    private _view: UserView;


-	constructor(model: Model, view: View) {
-		this._model = model;
-		this._view = view;
-	}
+    constructor(model: Model, view: UserView) {
+        this._model = model;
+        this._view = view;
+    }

-    /**
-     * Getter model
-     * @return {Model}
-     */
-	public get model(): Model {
-		return this._model;
-	}

    /**
-     * Getter view
-     * @return {View}
+     * eventHandler
     */
-	public get view(): View {
-		return this._view;
-	}
+    public eventHandler(vm: ActiveUserViewModel[]): void {
+        this._model.someBusinessMethod(vm);
+    }

-    /**
-     * Setter model
-     * @param {Model} value
-     */
-	public set model(value: Model) {
-		this._model = value;
-	}
+    public test(): void {
+        const activeUsersMock: ActiveUserViewModel[] = [];
+        let activeUserViewModelMock = new ActiveUserViewModel();
+        activeUserViewModelMock.userName = "some user";
+        activeUserViewModelMock.lastActive = "3 hrs ago";
+        activeUserViewModelMock.online = true;
+        activeUsersMock.push(activeUserViewModelMock);
+        activeUserViewModelMock = new ActiveUserViewModel();
+        activeUserViewModelMock.lastActive = "3 hrs ago";
+        activeUserViewModelMock.online = true;
+        activeUserViewModelMock.userName = "some user 2";
+        activeUsersMock.push(activeUserViewModelMock);
+        this.eventHandler(activeUsersMock);
+    }

-    /**
-     * Setter view
-     * @param {View} value
-     */
-	public set view(value: View) {
-		this._view = value;
-	}
-        
+    
 }
--- a/chatto/src/main/javascript/ts/src/dto/ChatMessageDTO.ts
+++ b/chatto/src/main/javascript/ts/src/dto/ChatMessageDTO.ts
@ -0,0 +1,8 @@
+import { MessageCipherDTO } from "./MessageCipherDTO";
+
+export class ChatMessageDTO {
+    public toUser: string | undefined;
+    public fromUser: string | undefined;
+    public messageCipher!: MessageCipherDTO;
+    public messageTime!: Date;
+}
--- a/chatto/src/main/javascript/ts/src/dto/MessageCipherDTO.ts
+++ b/chatto/src/main/javascript/ts/src/dto/MessageCipherDTO.ts
@ -0,0 +1,27 @@
+export class MessageCipherDTO {
+    // iv!: string;
+    // v!: number;
+    // iterations!: number;
+    // keySize!: number;
+    // tagSize!: number;
+    // mode!: string;
+    // adata!: string;
+    // cipher!: string;
+    // salt!: string;
+    // cipherText!: string;
+
+    iv!: string;
+    v!: number;
+    iter!: number;
+    ks!: number;
+    ts!: number;
+    mode!: string;
+    adata!: string;
+    cipher!: string;
+    salt!: string;
+    ct!: string;
+
+    // public toMessageCipherDTO {
+
+    // }
+}
--- a/chatto/src/main/javascript/ts/src/main.ts
+++ b/chatto/src/main/javascript/ts/src/main.ts
@ -4,38 +4,74 @@ import { Model } from "./model/AbstractModel";
 import { View } from "./view/AbstractView";
 import { UserView } from "./view/UserView";
 import { UserController } from "./controller/UserController";
-import log from "loglevel";
 import { ModelFactory } from "./model/ModelFactory";
 import { ActiveUserViewModel } from "./viewmodel/ActiveUserViewModel";
 import { ChatMessageViewModel } from "./viewmodel/ChatMessageViewModel";
-import Handlebars  from "handlebars";
+import * as Handlebars from "handlebars";
+import markdownit = require('markdown-it');
+import { ChatModel } from "./model/ChatModel";
+import { ChatView } from "./view/ChatView";
+import { ChatController } from "./controller/ChatController";
+import { JsonAPI } from "./singleton/JsonAPI";
+// import log = require('loglevel')
+import * as log from 'loglevel';
+// import log from 'loglevel';
+import { EncryptionService } from "./service/EncryptionService";
+import { SJCLEncryptionService } from "./service/SJCLEncryptionService";
+// var markdownit = require('markdown-it');
+var md = new markdownit();


+const userBox = document.getElementById('contacts-box');
+
 log.setLevel("TRACE")
-// let userModel = new UserModel();
-const userModel = ModelFactory.createModel("USER");

-const userView = new UserView(userModel, 2);
+const chatModel = new ChatModel();
+
+const userModel = new UserModel();
+// const userModel = ModelFactory.createModel("USER");
+// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
+const userView = new UserView(userModel, chatModel, userBox);
+
+// console.log(userBox);
+
 userModel.attach(userView);
 // userView.model
+
+
 const userController = new UserController(userModel, userView);
-userModel.someBusinessMethod(5);
+userController.test();
+
+
+
+// userModel.someBusinessMethod(activeUsersMock);
 log.info("hello");

-const chatMessageViewModel= new ChatMessageViewModel();
+const chatArea = document.getElementById('chat-area-new');
+// @ts-ignore: Argument of type 'HTMLElement | null' is not assignable to parameter of type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'.
+const chatView = new ChatView(chatModel, chatArea);
+const chatController = new ChatController(chatModel, chatView);

-const activeUserViewModel = new ActiveUserViewModel();
-activeUserViewModel.userName = "some user";
-activeUserViewModel.lastActive = new Date();
-activeUserViewModel.online = true;

 function someFunc(vm: ActiveUserViewModel): void {
-    log.info(vm);
+    // log.info(vm);
+    // logger.info(vm)
 }

-someFunc(activeUserViewModel);
+log.info("test");
+// someFunc(activeUserViewModelMock);

 // @ts-ignore: Object is possibly 'null'.
-var source = document.getElementById("msg_container_template").innerHTML; 
+var source = document.getElementById("msg_container_template").innerHTML;
+
+var msgContainerTemplate = Handlebars.compile(source);
+
+JsonAPI.ACTIVE_USERS_GET + 'aef';
+
+const encryptionService: EncryptionService = new SJCLEncryptionService();
+let ct = encryptionService.encrypt("password","data");
+console.log(encryptionService.decrypt("password", ct));

-var msgContainerTemplate = Handlebars.compile(source);
+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>';
+});
--- a/chatto/src/main/javascript/ts/src/model/AbstractModel.ts
+++ b/chatto/src/main/javascript/ts/src/model/AbstractModel.ts
@ -1,5 +1,7 @@
 import { Subject } from "../observe/Observable";
+import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";

 export interface Model extends Subject{
-    someBusinessMethod(data: any): void;
+    someBusinessMethod(data: Object): void;
+    
 }
--- a/chatto/src/main/javascript/ts/src/model/ChatModel.ts
+++ b/chatto/src/main/javascript/ts/src/model/ChatModel.ts
@ -0,0 +1,87 @@
+import { Subject } from "../observe/Observable";
+import { Model } from "./AbstractModel";
+import { Observer } from "../observe/Observer";
+import { fetchErrorHandler } from "./FetchErrorHandler";
+import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
+import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";
+import { JsonAPI } from "../singleton/JsonAPI";
+import log = require('loglevel');
+import { EncryptionService } from "../service/EncryptionService";
+import { SJCLEncryptionService } from "../service/SJCLEncryptionService";
+import { ChatMessageDTO } from "../dto/ChatMessageDTO";
+import { ChatModelHelper } from "./ChatModelHelper";
+
+export class ChatModel implements Subject {
+    /**
+  * @type {Observer[]} List of subscribers. In real life, the list of
+  * subscribers can be stored more comprehensively (categorized by event
+  * type, etc.).
+  */
+    private readonly _observers: Observer[] = [];
+    private state: ChatMessageViewModel[] | null;
+    private readonly _messagesMap: Map<string, ChatMessageViewModel[]>;
+
+    constructor() {
+        this.state = null;
+        this._messagesMap = new Map();
+    }
+    /**
+     * The subscription management methods.
+     */
+    public attach(observer: Observer): void {
+        console.log('Subject: Attached an observer.');
+        this._observers.push(observer);
+    }
+
+    public detach(observer: Observer): void {
+        const observerIndex = this._observers.indexOf(observer);
+        this._observers.splice(observerIndex, 1);
+        console.log('Subject: Detached an observer.');
+    }
+
+    public setUserMessages(username: string, messages: ChatMessageViewModel[]) {
+        this._messagesMap.set(username, messages);
+    }
+
+    /**
+     * Trigger an update in each subscriber.
+     */
+    public notify(): void {
+        console.log('Subject: Notifying observers...');
+        for (const observer of this._observers) {
+            observer.update(this.state);
+        }
+    }
+
+    public someBusinessMethod(chatMessageList: ChatMessageViewModel[]): void {
+        this.state = chatMessageList;
+        this.helperMethod();
+        console.log(`Subject: My state has just changed`);
+        console.log(chatMessageList);
+        this.notify();
+    }
+
+    public getmessages(userName: string, passphrase: string, lastMessageTime: string | null): void {
+        const cVMs = ChatModelHelper.getMessages(userName, passphrase, lastMessageTime, this);
+        if (cVMs != null) {
+            log.info('Subject: My state has just changed')
+            log.debug(cVMs);
+            this._messagesMap.set(userName, cVMs);
+            this.notify();
+        }
+        else {
+            log.error('Messages were null');
+        }
+    }
+
+
+
+    private helperMethod() { }
+
+    public populateMessages(): void {
+
+    }
+
+
+
+}
--- a/chatto/src/main/javascript/ts/src/model/ChatModelHelper.ts
+++ b/chatto/src/main/javascript/ts/src/model/ChatModelHelper.ts
@ -0,0 +1,94 @@
+import { ChatMessageDTO } from "../dto/ChatMessageDTO";
+
+import * as log from "loglevel";
+
+import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";
+
+import { JsonAPI } from "../singleton/JsonAPI";
+
+import { fetchErrorHandler } from "./FetchErrorHandler";
+
+import { EncryptionService } from "../service/EncryptionService";
+import { SJCLEncryptionService } from "../service/SJCLEncryptionService";
+import { ChatModel } from "./ChatModel";
+
+export class ChatModelHelper {
+    private static readonly encryptionService = new SJCLEncryptionService();
+
+    public static getMessages(userName: string, passphrase: string, lastMessageTime: string | null, chatModel: ChatModel): ChatMessageViewModel[] | null {
+        switch (lastMessageTime) {
+            case null: {
+                this.getAllMessagesAjax(userName)
+                    .then((data: ChatMessageDTO[]) => {
+                        log.debug(`Subject: received all messages`);
+                        // let userNames = data.map(ChatMessageViewModel => ChatMessageViewModel.fromUser)
+                        // let sumt = data.map(chatMessageViewModel => { return this.encryptionService.decrypt(passphrase, chatMessageViewModel.messageCipher) });
+                        return data.map(vm => this.toChatMessageVM(vm, passphrase));
+                        // chatModel.setUserMessages(userName, chatMessageVMs);
+                        // chatModel.notify();
+                    })
+                break;
+            }
+            default: {
+                this.getNewMessagesAjax(userName, lastMessageTime)
+                    .then((data: ChatMessageDTO[]) => {
+                        log.debug(`Subject: received new messages`);
+                        return data.map(vm => this.toChatMessageVM(vm, passphrase));
+                        // chatModel.setUserMessages(userName, chatMessageVMs);
+                        // this.state = data;
+                        // chatModel.notify();
+                    })
+                break;
+            }
+        }
+
+        return null;
+    }
+
+    private static toChatMessageVM(chatMessageDTO: ChatMessageDTO, passphrase: string): ChatMessageViewModel {
+        const vm = new ChatMessageViewModel();
+        vm.fromUser = chatMessageDTO.fromUser;
+        vm.toUser = chatMessageDTO.toUser;
+        vm.messageTime = chatMessageDTO.messageTime;
+        vm.message = this.encryptionService.decrypt(passphrase, chatMessageDTO.messageCipher) as string;
+        return vm;
+    }
+
+    private static async getAllMessagesAjax(toUser: string): Promise<any> {
+        let headers = new Headers();
+        if (JsonAPI.authToken == null) {
+            log.error("authToken null");
+            return;
+        };
+        headers.append('X-AUTH-TOKEN', JsonAPI.authToken);
+        let response = await fetch(`${JsonAPI.CHAT_MESSAGES_GET}/${toUser}`, {
+            method: 'GET',
+            headers: headers
+        });
+        console.log(response.clone());
+        if (fetchErrorHandler(response.clone())) {
+            return null;
+        }
+        let data: Promise<any> = await response.json();
+        return data;
+    }
+
+    private static async getNewMessagesAjax(toUser: string, lastMessageTimeStamp: string): Promise<any> {
+        let headers = new Headers();
+        if (JsonAPI.authToken == null) {
+            log.error("authToken null");
+            return;
+        };
+        headers.append('X-AUTH-TOKEN', JsonAPI.authToken);
+        let response = await fetch(`${JsonAPI.CHAT_MESSAGES_GET}/${toUser}/${lastMessageTimeStamp}`, {
+            method: 'GET',
+            headers: headers
+        });
+        console.log(response.clone());
+        if (fetchErrorHandler(response.clone())) {
+            return null;
+        }
+        let data: Promise<any> = await response.json();
+        return data;
+    }
+}
--- a/chatto/src/main/javascript/ts/src/model/FetchErrorHandler.ts
+++ b/chatto/src/main/javascript/ts/src/model/FetchErrorHandler.ts
@ -0,0 +1,19 @@
+export function fetchErrorHandler(response: 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;
+        });
+    }
+}
--- a/chatto/src/main/javascript/ts/src/model/UserModel.ts
+++ b/chatto/src/main/javascript/ts/src/model/UserModel.ts
@ -1,15 +1,20 @@
 import { Subject } from "../observe/Observable";
 import { Model } from "./AbstractModel";
 import { Observer } from "../observe/Observer";
+import { fetchErrorHandler } from "./FetchErrorHandler";
+import { ActiveUserViewModel } from "../viewmodel/ActiveUserViewModel";
+import { JsonAPI } from "../singleton/JsonAPI";
+import { ChatMessageViewModel } from "../viewmodel/ChatMessageViewModel";

-export class UserModel implements Model, Subject {
+export class UserModel implements Subject {
    /**
  * @type {Observer[]} List of subscribers. In real life, the list of
  * subscribers can be stored more comprehensively (categorized by event
  * type, etc.).
  */
-    private observers: Observer[] = [];
-    private state: number = 0;
+    private readonly observers: Observer[] = [];
+    private state: ActiveUserViewModel[] | undefined;
+    // @ts-ignore: Cannot find name 'hostAddress'.

    constructor() { }
    /**
@ -36,13 +41,51 @@ export class UserModel implements Model, Subject {
        }
    }

-    public someBusinessMethod(num: number): void {
-        this.state = num;
+    public someBusinessMethod(activeuserList: ActiveUserViewModel[]): void {
+        this.state = activeuserList;
        this.helperMethod();
-        console.log(`Subject: My state has just changed to: ${this.state}`);
+        console.log(`Subject: My state has just changed`);
+        console.log(activeuserList);
        this.notify();
    }

-    private helperMethod() {}
+    /**
+     * getActiveUsers
+     */
+    public getActiveUsers(): void {
+        this.getActiveUsersAjax("", JsonAPI.ACTIVE_USERS_GET)
+            .then(data => {
+                // // activeUsers = data;
+                // sessionStorage.setItem('activeUsers', JSON.stringify(data));
+                // console.log(sessionStorage.getItem('activeUsers'));
+                console.log(`Subject: received ajax active users`);
+                this.state = data;
+                this.notify();
+            })
+    }
+
+    async getActiveUsersAjax(authToken2: string, URL: string): Promise<any> {
+        let headers = new Headers();
+        // headers.append('Authorization', basicAuthToken);
+        headers.append('X-AUTH-TOKEN', authToken2);
+        let response = await fetch(JsonAPI.ACTIVE_USERS_GET, {
+            method: 'GET',
+            headers: headers
+        });
+        console.log(response.clone());
+        if (fetchErrorHandler(response.clone())) {
+            return null;
+        }
+        let data = await response.json();
+        // return data;
+        return new Promise((resolve, reject) => {
+            if (data != null)
+                resolve(data)
+            else
+                reject('Response data null')
+        })
+    }
+
+    private helperMethod() { }

 }
--- a/chatto/src/main/javascript/ts/src/service/EncryptionService.ts
+++ b/chatto/src/main/javascript/ts/src/service/EncryptionService.ts
@ -0,0 +1,4 @@
+export interface EncryptionService {
+    encrypt(passphrase: string, plainText: string): Object,
+    decrypt(passphrase: string, cipher: Object): Object
+}
--- a/chatto/src/main/javascript/ts/src/service/SJCLEncryptionService.ts
+++ b/chatto/src/main/javascript/ts/src/service/SJCLEncryptionService.ts
@ -0,0 +1,13 @@
+import { EncryptionService } from "./EncryptionService";
+import * as sjcl from "sjcl";
+
+export class SJCLEncryptionService implements EncryptionService {
+    private readonly params: any = { mode: "gcm", ts: 128, adata: "", iter: 10000}
+    public encrypt(passphrase: string, plainText: string): Object {
+        return sjcl.encrypt(passphrase, plainText, this.params);
+    } 
+    
+    public decrypt(passphrase: string, cipher: Object): Object {
+        return sjcl.decrypt(passphrase, cipher as sjcl.SjclCipherEncrypted, undefined, undefined);
+    }
+}
--- a/chatto/src/main/javascript/ts/src/singleton/AuthToken.ts
+++ b/chatto/src/main/javascript/ts/src/singleton/AuthToken.ts
@ -0,0 +1,2 @@
+export let authToken: string | null = null;
+// localStorage.getItem('authToken')
--- a/chatto/src/main/javascript/ts/src/singleton/JsonAPI.ts
+++ b/chatto/src/main/javascript/ts/src/singleton/JsonAPI.ts
@ -0,0 +1,8 @@
+export namespace JsonAPI {
+    // @ts-ignore: Cannot find name 'hostAddress'.
+    export let userName: string | null = localStorage.getItem('userName');
+    export let authToken: string | null = localStorage.getItem('authToken');
+    export const ACTIVE_USERS_GET = `/api/chat/get/active-users`;
+    export const CHAT_MESSAGES_GET = ``;
+    
+}
--- a/chatto/src/main/javascript/ts/src/template/TemplateFactory.ts
+++ b/chatto/src/main/javascript/ts/src/template/TemplateFactory.ts
@ -0,0 +1,34 @@
+export class TemplateFactory {
+    // static getTemplate(templateName: string): Handlebars.TemplateDelegate<any> {
+
+    //     switch (templateName) {
+    //         case "user-contact-online-template": {
+    //             // let source = document.getElementById("user-contact-online-template").innerHTML;
+    //             // let msgContainerTemplate = Handlebars.compile(source);
+    //             // return msgContainerTemplate;
+    //             return this.createTemplate(templateName);
+    //         }
+    //         case "msg_container_send_template": {
+    //             // let source = document.getElementById("msg_container_send_template").innerHTML;
+    //             // let msgContainerTemplate = Handlebars.compile(source);
+    //             // return msgContainerTemplate;
+    //             return this.createTemplate(templateName);
+    //         }
+    //         case "msg_container_template": {
+    //             // let source = document.getElementById("msg_container_send_template").innerHTML;
+    //             // let msgContainerTemplate = Handlebars.compile(source);
+    //             // return msgContainerTemplate;
+    //             return this.createTemplate(templateName);
+    //         }
+    //         default:
+    //             throw new Error('invalid template name');
+    //     }
+    // }
+
+    static getTemplate(templateName: string): Handlebars.TemplateDelegate<any> {
+        //@ts-ignore: Object is possibly 'null'.
+        let source = document.getElementById(templateName).innerHTML;
+        let msgContainerTemplate = Handlebars.compile(source);
+        return msgContainerTemplate;
+    }
+}
--- a/chatto/src/main/javascript/ts/src/view/AbstractView.ts
+++ b/chatto/src/main/javascript/ts/src/view/AbstractView.ts
@ -3,6 +3,6 @@ import { Model } from "../model/AbstractModel";
 import { Controller } from "../controller/AbstractController";
 import { Observer } from "../observe/Observer";
 export interface View extends Observer {
-    model: Model,
-    element: any
+    readonly model: Model,
+    readonly element: any
 }
--- a/chatto/src/main/javascript/ts/src/view/ChatView.ts
+++ b/chatto/src/main/javascript/ts/src/view/ChatView.ts
@ -0,0 +1,32 @@
+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';
+
+export class ChatView implements Observer {
+    private readonly _model: ChatModel;
+    private readonly _element: HTMLElement;
+    private readonly _messageSendTemplate = TemplateFactory.getTemplate('msg_container_send_template');
+
+
+    constructor(model: ChatModel, element: HTMLElement) {
+        this._model = model;
+        this._element = element;
+    }
+
+
+    update(data: ChatMessageViewModel[]): void {
+        let html: string = "";
+        data.forEach((vm: ChatMessageViewModel) => {
+            html += this._messageSendTemplate(vm);
+        });
+        this._element.innerHTML = html;
+        log.debug(this._element.innerHTML);
+    }
+}
--- a/chatto/src/main/javascript/ts/src/view/UserView.ts
+++ b/chatto/src/main/javascript/ts/src/view/UserView.ts
@ -3,61 +3,103 @@ 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 log = require("loglevel");

-export class UserView implements Observer, View {
-    private _model: Model;
-    private _element: any;
+export class UserView implements Observer {
+    private readonly _model: Model;
+    private readonly _chatModel: ChatModel;
+    private readonly _element: HTMLElement;
+    // private userBoxes: any[] =  [];


-
-    constructor(model: Model, element: any) {
+    constructor(model: Model, chatModel: ChatModel, element: HTMLElement) {
        this._model = model;
+        this._chatModel = chatModel;
        this._element = element;
    }



-    /**
-     * Getter model
-     * @return {Model}
-     */
-    public get model(): Model {
-        return this._model;
-    }
-
-
-    /**
-     * Getter element
-     * @return {any}
-     */
-    public get element(): any {
-        return this._element;
-    }

-    /**
-     * Setter model
-     * @param {Model} value
-     */
-    public set model(value: Model) {
-        this._model = value;
+    update(data: ActiveUserViewModel[]): void {
+        let template = TemplateFactory.getTemplate('user-contact-online-template');
+        let html: string = "";
+        data.forEach((element: ActiveUserViewModel) => {
+            html += template(element);
+        });
+        this._element.innerHTML = html;
+        this.addUserCallBacks();
+        console.log(this._element.innerHTML);
    }

+    private helper(): void {

-    /**
-     * Setter element
-     * @param {any} value
-     */
-    public set element(value: any) {
-        this._element = value;
    }

+    private addUserCallBacks(): void {
+        let userBoxes = document.getElementsByClassName('user-box');
+        for (let i = 0; i < userBoxes.length; i++) {
+            let userBox = userBoxes[i];
+            userBoxes[i].addEventListener('click', this.userCallBack.bind(this, userBox));
+        }
+    }


-
-
-    update(data: any): void {
-        this.element = data;
-        console.log(this.element);
+    private userCallBack(el: Element): void {
+        let current = document.getElementsByClassName('user-box active');
+
+        let passphrase: string = '';
+        if (current.length > 0) {
+            let passphraseInput = document.getElementById('passphrase') as any;
+
+            if (passphraseInput == null) {
+                log.error('passphraseInput element reference is null');
+                return;
+            }
+            passphrase = passphraseInput.value
+            if (passphrase == '' || passphrase == null) {
+                // alert('Please input passphrase')
+                // alertify.error('Please enter a passphrase');
+                log.error('passphrase is empty or null');
+                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') as any;
+            if(elem == null)
+            {
+                log.error('passphraseInput element reference is null');
+                return;
+            }
+            passphrase = elem.value;
+            if (passphrase == '' || passphrase == null) {
+                //     // alert('Please input passphrase')
+                //     // alertify.error('Please enter a passphrase');
+                log.error('passphrase is empty or null');
+                return;
+            }
+            // @ts-ignore: Object is possibly 'null'.
+            document.getElementById('no-user-selected').hidden = true;
+            // @ts-ignore: Object is possibly 'null'.
+            document.getElementById('chat-card').hidden = false;
+            // @ts-ignore: Object is possibly 'null'.
+            elem.hidden = true;
+        }
+        // console.log(this.getElementsByClassName('to-user-span'));
+        let elem = el.getElementsByClassName('to-user-span')[0] as HTMLElement;
+        let userName = elem.innerText;
+        // @ts-ignore: Object is possibly 'null'.
+        document.getElementById('user-name-span').innerText = userName;
+        this._chatModel.getmessages(userName, passphrase, null);
+        // populateMessages(userName, passphrase);
+        sessionStorage.setItem('selectedUser', userName);
+        el.className += " active";
    }

 }
--- a/chatto/src/main/javascript/ts/src/viewmodel/ActiveUserViewModel.ts
+++ b/chatto/src/main/javascript/ts/src/viewmodel/ActiveUserViewModel.ts
@ -1,5 +1,5 @@
 export class ActiveUserViewModel {
    userName: string | undefined;
    online: boolean | undefined;
-    lastActive: Date | undefined;
+    lastActive: string| undefined;
 }
--- a/chatto/src/main/javascript/ts/src/viewmodel/ChatMessageViewModel.ts
+++ b/chatto/src/main/javascript/ts/src/viewmodel/ChatMessageViewModel.ts
@ -1,7 +1,7 @@
 export class ChatMessageViewModel {
    public toUser: string | undefined;
    public fromUser: string | undefined;
-    public messageCipher: any;
+    public message!: string;
    public messageTime!: Date;

    
--- a/chatto/src/main/javascript/ts/tsconfig.json
+++ b/chatto/src/main/javascript/ts/tsconfig.json
@ -2,8 +2,9 @@
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
+    "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    // "lib": [ "ES2015" ],
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
--- a/chatto/src/main/javascript/yarn.lock
+++ b/chatto/src/main/javascript/yarn.lock
@ -2,6 +2,18 @@
 # yarn lockfile v1


+"@types/linkify-it@*":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-2.1.0.tgz#ea3dd64c4805597311790b61e872cbd1ed2cd806"
+  integrity sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==
+
+"@types/markdown-it@^0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-0.0.9.tgz#a5d552f95216c478e0a27a5acc1b28dcffd989ce"
+  integrity sha512-IFSepyZXbF4dgSvsk8EsgaQ/8Msv1I5eTL0BZ0X3iGO9jw6tCVtPG8HchIPm3wrkmGdqZOD42kE0zplVi1gYDA==
+  dependencies:
+    "@types/linkify-it" "*"
+
 "@webassemblyjs/ast@1.8.5":
  version "1.8.5"
  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
--- a/chatto/src/main/resources/templates/fragments/head.html
+++ b/chatto/src/main/resources/templates/fragments/head.html
@ -6,40 +6,29 @@
        <script th:src="@{/js/scljs.js}" type="text/javascript"></script>
        <!--<script th:src="@{js/my_Crypto.js}" type="text/javascript"></script>-->

-        <script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js"
-            type="text/javascript"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js" type="text/javascript"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css">
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"
-            type="text/css">
+        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

-        <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/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>
-
-        <link th:href="@{/css/master.css}" href="../../static/css/master.css" rel="stylesheet">
-        <link th:href="@{/css/colors.css}" href="../../static/css/colors.css" rel="stylesheet">
+        <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>
+
+        <link th:href="@{/css/master.css}" href="../../resources/static/css/master.css" rel="stylesheet">
+        <link th:href="@{/css/colors.css}" href="../../resources/static/css/colors.css" rel="stylesheet">

        <script th:inline="javascript">
            var hostAddress = window.location.host;
--- a/chatto/src/main/resources/templates/ts-test.html
+++ b/chatto/src/main/resources/templates/ts-test.html
@ -20,7 +20,7 @@
    <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/ts/bundle.js" defer></script>
+    <script src="./../../javascript/bundle.js" defer></script>
    <link rel="stylesheet" th:href="@{/css/chat.css}" href="../../resources/static/css/chat.css">


@ -159,7 +159,7 @@
                            </ul>
                        </div>
                    </div>
-                    <div class="card-body msg_card_body" id="chat_area_new">
+                    <div class="card-body msg_card_body" id="chat-area-new">
                    </div>
                    <div class="card-footer">
                        <form action="#" th:object="${chatMessageDTO}" method="post" id="chatMessageForm" class="needs-validation" novalidate>
--- a/chatto/yarn.lock
+++ b/chatto/yarn.lock
@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/sjcl@^1.0.28":
+  version "1.0.28"
+  resolved "https://registry.yarnpkg.com/@types/sjcl/-/sjcl-1.0.28.tgz#4693eb6943e385e844a70fb25b4699db286c7214"
+  integrity sha1-RpPraUPjhehEpw+yW0aZ2yhschQ=