SK-267 added support for outdated session restore

src/api/api.js

@@ -81,6 +81,15 @@ class Api {
           return;
         }
 
+        if (message.message_decryption_failed) {
+          if (this.onMessageDecryptionFailedListener) {
+            this.onMessageDecryptionFailedListener(
+              message.message_decryption_failed
+            );
+          }
+          return;
+        }
+
         if (message.message) {
           if (message.message.error) {
             this.responsesPromises[
@@ -401,6 +410,21 @@ class Api {
     return this.sendPromise(requestData, resObjKey);
   }
 
+  async markDecrypionFailedMessages(data) {
+    const requestData = {
+      request: {
+        message_decryption_failed: {
+          cid: data.cid,
+          ids: data.mids,
+        },
+        id: getUniqueId("markDecrypionFailedMessages"),
+      },
+    };
+
+    const resObjKey = "success";
+    return this.sendPromise(requestData, resObjKey);
+  }
+
   async messageDelete(data) {
     //===============to do
     const requestData = {

src/components/auth/components/LoginLinks.js

@@ -21,10 +21,10 @@ export default function LoginLinks({ changePage, content }) {
     setIsLoader(true);
     try {
       const userData = await usersService.login(content);
+      await garbageCleaningService.resetDataOnAuth();
       await encryptionService.registerDevice(userData._id);
       navigateTo("/");
       subscribeForNotifications();
-      await garbageCleaningService.resetDataOnAuth();
       dispatch(setCurrentUserId(userData._id));
       dispatch(upsertUser(userData));
     } catch (err) {

src/components/auth/components/SignUpLinks.js

@@ -25,9 +25,9 @@ export default function SignUpLinks({ changePage, content }) {
 
       if (isLogin) {
         const userData = await usersService.login(content);
+        await garbageCleaningService.resetDataOnAuth();
         await encryptionService.registerDevice(userData._id);
         subscribeForNotifications();
-        await garbageCleaningService.resetDataOnAuth();
         dispatch(upsertUser(userData));
         dispatch(setCurrentUserId(userData._id));
       }

src/components/hub/elements/ChatMessage.js

@@ -2,6 +2,7 @@ import MessageAttachments from "@components/message/elements/MessageAttachments"
 import MessageStatus from "@components/message/elements/MessageStatus";
 import MessageUserIcon from "@components/hub/elements/MessageUserIcon";
 import addSuffix from "@utils/navigation/add_suffix";
+import encryptionService from "@services/encryptionService";
 import getUserFullName from "@utils/user/get_user_full_name";
 import { urlify } from "@utils/text/urlify";
 import { useLocation } from "react-router-dom";
@@ -11,6 +12,7 @@ import "@styles/hub/elements/ChatMessage.css";
 
 import { ReactComponent as CornerLight } from "@icons/_helpers/CornerLight.svg";
 import { ReactComponent as CornerAccent } from "@icons/_helpers/CornerAccent.svg";
+import { ReactComponent as CornerDanger } from "@icons/_helpers/CornerDanger.svg";
 
 export default function ChatMessage({
   sender,
@@ -23,6 +25,7 @@ export default function ChatMessage({
 
   const { body, from, attachments, status, t } = message;
   const isCurrentUser = from === currentUserId;
+  const isError = status === "decryption_failed";
 
   const timeSend = useMemo(() => {
     const time = new Date(t * 1000);
@@ -36,9 +39,14 @@ export default function ChatMessage({
 
   return (
     <div
-      className={`message__container${isCurrentUser ? "--my" : ""} ${
-        prev ? "" : "mt-8"
-      }`}
+      className={`message__container${isCurrentUser ? "--my" : ""}${
+        isError ? " danger" : ""
+      }${prev ? "" : " mt-8"}`}
+      onClick={
+        isError
+          ? () => encryptionService.createNewSessionAndSendMessage(message)
+          : undefined
+      }
     >
       <div className={`message-photo${sender ? "--hover" : ""}`}>
         {next ? null : (
@@ -50,12 +58,17 @@ export default function ChatMessage({
           </div>
         )}
       </div>
-      <div className={`message-content__container ${next ? "" : "br-bl-0"}`}>
-        {next ? null : isCurrentUser ? (
-          <CornerAccent className="message-content--corner" />
-        ) : (
-          <CornerLight className="message-content--corner" />
-        )}
+      <div className={`message-content__container${next ? "" : " br-bl-0"}`}>
+        {!next &&
+          (isCurrentUser ? (
+            isError ? (
+              <CornerDanger className="message-content--corner" />
+            ) : (
+              <CornerAccent className="message-content--corner" />
+            )
+          ) : (
+            <CornerLight className="message-content--corner" />
+          ))}
         {prev ? null : (
           <div
             className={`content__uname${sender ? "--hover" : ""}`}

src/components/message/elements/MessageStatus.js

@@ -4,15 +4,22 @@ import { ReactComponent as Sent } from "@icons/status/Sent.svg";
 import { ReactComponent as ReadWhite } from "@icons/status/ReadWhite.svg";
 import { ReactComponent as SendingWhite } from "@icons/status/SendingWhite.svg";
 import { ReactComponent as SentWhite } from "@icons/status/SentWhite.svg";
+import { ReactComponent as DecryptionFailed } from "@icons/status/DecryptionFailed.svg";
 
 export default function MessageStatus({ status, type }) {
   const iconColor = type === "white" ? "white" : "accent";
 
   const iconMap = {
-    accent: { sent: <Sent />, read: <Read />, default: <Sending /> },
+    accent: {
+      sent: <Sent />,
+      read: <Read />,
+      decryption_failed: <DecryptionFailed />,
+      default: <Sending />,
+    },
     white: {
       sent: <SentWhite />,
       read: <ReadWhite />,
+      decryption_failed: <DecryptionFailed />,
       default: <SendingWhite />,
     },
   };

src/services/conversationsService.js

@@ -1,6 +1,7 @@
 import DownloadManager from "@src/adapters/downloadManager";
 import api from "@api/api";
 import eventEmitter from "@event/eventEmitter";
+import isEqualsNativeIds from "@utils/user/isEqualsNativeIds";
 import isHeic from "@utils/media/is_heic";
 import navigateTo from "@utils/navigation/navigate_to";
 import processFile from "@utils/media/process_file";
@@ -294,6 +295,14 @@ class ConversationsService {
   async getParticipantsByIds(params) {
     return await api.getUsersByIds(params);
   }
+
+  findOpponentIdForPrivateConversationByCid(cid, currentUserId) {
+    const conversation = store.getState().conversations.entities[cid];
+
+    return isEqualsNativeIds(conversation.owner_id, currentUserId)
+      ? conversation.opponent_id
+      : conversation.owner_id;
+  }
 }
 
 const conversationService = new ConversationsService();

src/services/encryptionService.js

@@ -1,5 +1,6 @@
 import CryptoJS from "crypto-js";
 import api from "@api/api";
+import indexedDB from "@store/indexedDB";
 import initVodozemac, {
   Account,
   OlmMessage,
@@ -10,11 +11,14 @@ import store from "@store/store";
 import { decodeBase64, encodeUnpaddedBase64 } from "@utils/base64/base64";
 import { upsertMessage } from "@store/values/Messages";
 import { upsertUser } from "@store/values/Participants";
+import conversationService from "./conversationsService";
+import messagesService from "./messagesService";
 
 class EncryptionService {
   #encryptionSessions = {};
   #account = null;
   #vodozemacInitialized = false;
+  visibleBody = "Can`t decrypt this message, not for this device";
 
   constructor() {
     this.#initializeVodozemac();
@@ -30,6 +34,10 @@ class EncryptionService {
     }
   }
 
+  markDecrypionFailedMessages(cid, mids) {
+    api.markDecrypionFailedMessages({ cid, mids });
+  }
+
   hasAccount() {
     return !!this.#account;
   }
@@ -44,6 +52,11 @@ class EncryptionService {
     await localforage.clear();
   }
 
+  async clearStoredSessionWithUser(userId) {
+    delete this.#encryptionSessions[userId];
+    await localforage.removeItem(`encryptedSession${userId}`);
+  }
+
   encryptMessage(text, userId) {
     const session = this.#encryptionSessions[userId];
     return session.encrypt(text);
@@ -61,14 +74,18 @@ class EncryptionService {
       console.log(
         "[encryption] Encrypted session with the opponent is missing"
       );
-      return "Can`t decrypt this message, not for this device";
+      return this.visibleBody;
     }
 
     try {
       return session.decrypt(olmMessage);
     } catch (error) {
       console.log("[encryption] Failed to decrypt an encrypted message", error);
-      return "Can`t decrypt this message, not for this device";
+      this.markDecrypionFailedMessages(olmMessageParams.cid, [
+        olmMessageParams._id,
+      ]);
+
+      return this.visibleBody;
     }
   }
 
@@ -274,6 +291,7 @@ class EncryptionService {
         console.log("Encrypted session from local store:", session);
         const decryptMessage = this.decryptMessage(olmMessageParams, userId);
 
+        indexedDB.upsertEncryptionMessage(olmMessageParams._id, decryptMessage);
         store.dispatch(
           upsertMessage({ _id: olmMessageParams._id, body: decryptMessage })
         );
@@ -319,20 +337,26 @@ class EncryptionService {
       if (olmMessage) {
         console.log("Create session with olmMessage: ", olmMessage);
 
+        let decryptMessage = this.visibleBody;
         try {
           const inboundSession = this.#account.create_inbound_session(
             userKeys.identity_key,
             olmMessage
           );
-          const decryptMessage = `${inboundSession.plaintext}`;
+          decryptMessage = `${inboundSession.plaintext}`;
           session = inboundSession.session;
 
           store.dispatch(
             upsertMessage({ _id: olmMessageParams._id, body: decryptMessage })
           );
         } catch (error) {
+          this.markDecrypionFailedMessages(olmMessageParams.cid, [
+            olmMessageParams._id,
+          ]);
+
           console.error("Failed to create inbound session:", error);
         }
+        indexedDB.upsertEncryptionMessage(olmMessageParams._id, decryptMessage);
 
         //check if the top block worked successfully -> mb need to clear the session param
         if (session) {
@@ -361,6 +385,21 @@ class EncryptionService {
     }
   }
 
+  async createNewSessionAndSendMessage(message) {
+    console.log("[encryption] Recreate a new encrypted session");
+    const messageParams = Object.assign({}, message);
+    const { _id: mid, cid, from } = messageParams;
+    const opponentId =
+      conversationService.findOpponentIdForPrivateConversationByCid(cid, from);
+
+    await this.clearStoredSessionWithUser(opponentId);
+    await this.createEncryptionSession(opponentId);
+
+    await messagesService.removeMessageFromLocalStore(mid, cid);
+
+    await messagesService.sendEncryptedMessage(messageParams, opponentId);
+  }
+
   async encrypteDataForLocalStore(data) {
     const secretKey = await this.#getPickleKey(
       "pickleKey",

src/services/garbageCleaningService.js

@@ -12,8 +12,8 @@ import { updateNetworkState } from "@store/values/NetworkState";
 class GarbageCleaningService {
   async clearConversationMessages(cid) {
     if (!cid) return;
-    store.dispatch(clearMessagesToLocalLimit(cid));
     store.dispatch(clearMessageIdsToLocalLimit(cid));
+    store.dispatch(clearMessagesToLocalLimit(cid));
   }
 
   async resetDataOnAuth() {