add encryption

src/Model/chatListModel.ts

@@ -27,7 +27,7 @@ export default class ChatListModel {
       const allChannels = channel.split("/");
       for (const channel of allChannels) {
         if (channel != chatModel.info.primaryChannel) continue;
-        chatModel.handleMessage(channel, body);
+        chatModel.handleMessage(body);
         break;
       }
     }

src/Model/chatModel.ts

@@ -2,6 +2,7 @@
 
 import StorageModel, { storageKeys } from "./storageModel";
 import { createTimestamp, parse } from "./Utility/utility";
+import { decryptString, encryptString } from "./Utility/crypto";
 
 import ChatListModel from "./chatListModel";
 import { Color } from "../ViewModel/colors";
@@ -166,7 +167,7 @@ export class ChatModel {
   }
 
   // messaging
-  sendMessage = (body: string): boolean => {
+  sendMessage = async (body: string): Promise<boolean> => {
     const senderName = this.settingsModel.username;
     if (senderName == "") return false;
 
@@ -175,7 +176,10 @@ export class ChatModel {
       allChannels.push(secondaryChannel);
     }
 
-    const combinedChannel = allChannels.join("/");
+    const combinedChannel: string = allChannels.join("/");
+    if (this.info.encryptionKey != "") {
+      body = await encryptString(body, this.info.encryptionKey);
+    }
 
     const chatMessage: ChatMessage = ChatModel.createChatMessage(
       combinedChannel,
@@ -187,13 +191,22 @@ export class ChatModel {
     return true;
   };
 
-  handleMessage = (channel: string, body: string): void => {
+  handleMessage = async (body: string): Promise<void> => {
     const chatMessage: ChatMessage | null = ChatModel.parseMessage(body);
     if (chatMessage == null) return;
 
+    await this.decryptMessage(chatMessage);
     this.addMessage(chatMessage);
   };
 
+  decryptMessage = async (chatMessage: ChatMessage): Promise<void> => {
+    const decryptedBody: string = await decryptString(
+      chatMessage.body,
+      this.info.encryptionKey
+    );
+    chatMessage.body = decryptedBody;
+  };
+
   setMessageHandler = (handler: (chatMessage: ChatMessage) => void): void => {
     this.chatMessageHandler = handler;
   };

src/View/ChatPages/messagePage.css

@@ -100,6 +100,10 @@
   font-weight: bold;
 }
 
+.message-bubble .body {
+  word-break: break-all;
+}
+
 .message-bubble[sentbyuser] {
   justify-content: flex-end;
 }

src/View/ChatPages/messagePage.tsx

@@ -18,7 +18,6 @@ export function MessagePage(chatViewModel: ChatViewModel) {
   );
 
   function scrollDown() {
-    console.log("down");
     messageContainer.scrollTop = messageContainer.scrollHeight;
   }
   function scrollDownIfApplicable() {

src/View/Components/chatMessage.tsx

@@ -9,12 +9,12 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
       toggle:sentbyuser={chatMessageViewModel.sentByUser}
     >
       <div>
-        <span class="sender-name">{chatMessageViewModel.sender}</span>
+        <span class="sender-name ellipsis">{chatMessageViewModel.sender}</span>
         <span
           class="body"
           subscribe:innerText={chatMessageViewModel.body}
         ></span>
-        <span class="timestamp">{chatMessageViewModel.dateSent}</span>
+        <span class="timestamp ellipsis">{chatMessageViewModel.dateSent}</span>
       </div>
     </div>
   );
@@ -23,6 +23,5 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
 export const ChatMessageViewModelToView: React.StateItemConverter<
   ChatMessageViewModel
 > = (chatMessageViewModel: ChatMessageViewModel) => {
-  console.log(chatMessageViewModel);
   return ChatMessage(chatMessageViewModel);
 };