SK-258 added create session method, session sync

package.json

@@ -17,6 +17,7 @@
     "@testing-library/user-event": "^13.5.0",
     "blurhash": "^2.0.5",
     "browser-image-compression": "^2.0.2",
+    "buffer": "^6.0.3",
     "dotenv": "^16.0.3",
     "framer-motion": "^8.0.2",
     "get-browser-fingerprint": "^3.2.0",

src/api/api.js

@@ -10,6 +10,7 @@ class Api {
     this.baseUrl = baseUrl;
     this.socket = null;
     this.curerntUserId = null;
+    this.currentDeviceId = null;
     this.responsesPromises = {};
     this.onMessageListener = null;
     this.onMessageStatusListener = null;
@@ -171,27 +172,23 @@ class Api {
   }
 
   async userLogin(data) {
+    const deviceId = getBrowserFingerprint({
+      enableScreen: false,
+      hardwareOnly: true,
+    });
     const requestData = {
       request: {
         user_login: data.token
-          ? {
-              token: data.token,
-              deviceId: getBrowserFingerprint({
-                enableScreen: false,
-                hardwareOnly: true,
-              }),
-            }
+          ? { token: data.token, deviceId }
           : {
               login: data.login,
               password: data.password,
-              deviceId: getBrowserFingerprint({
-                enableScreen: false,
-                hardwareOnly: true,
-              }),
+              deviceId,
             },
         id: getUniqueId("userLogin"),
       },
     };
+    api.currentDeviceId = deviceId.toString();
     const resObjKey = null;
     return this.sendPromise(requestData, resObjKey);
   }
@@ -257,6 +254,7 @@ class Api {
       },
     };
     const resObjKey = "success";
+    localStorage.removeItem("sessionId");
     return this.sendPromise(requestData, resObjKey);
   }
 
@@ -348,6 +346,7 @@ class Api {
           body: data.body,
           cid: data.cid,
           attachments: data.attachments,
+          encrypted_message_type: data.encrypted_message_type,
         },
       };
       this.responsesPromises[requestData.message.id] = { resolve, reject };

src/components/auth/components/LoginLinks.js

@@ -1,4 +1,5 @@
 import OvalLoader from "@components/_helpers/OvalLoader";
+import encryptionService from "@services/encryptionService";
 import navigateTo from "@utils/navigation/navigate_to";
 import showCustomAlert from "@utils/show_alert";
 import subscribeForNotifications from "@services/notifications";
@@ -21,6 +22,8 @@ export default function LoginLinks({ changePage, content }) {
     setIsLoader(true);
     try {
       const userData = await usersService.login(content);
+      await encryptionService.clearStoredAccount();
+      await encryptionService.registerDevice(userData._id);
       navigateTo("/");
       subscribeForNotifications();
       dispatch(setSelectedConversation({}));

src/components/auth/components/SignUpLinks.js

@@ -1,4 +1,5 @@
 import OvalLoader from "@components/_helpers/OvalLoader";
+import encryptionService from "@services/encryptionService";
 import navigateTo from "@utils/navigation/navigate_to";
 import showCustomAlert from "@utils/show_alert";
 import subscribeForNotifications from "@services/notifications";
@@ -25,7 +26,8 @@ export default function SignUpLinks({ changePage, content }) {
 
       if (isLogin) {
         const userData = await usersService.login(content);
-
+        await encryptionService.clearStoredAccount();
+        await encryptionService.registerDevice(userData._id);
         subscribeForNotifications();
         dispatch(setSelectedConversation({}));
         dispatch(setUserIsLoggedIn(true));

src/components/hub/ChatForm.js

@@ -1,6 +1,5 @@
 import api from "@api/api";
 import encryptionService from "@services/encryptionService";
-import navigateTo from "@utils/navigation/navigate_to";
 import removeAndNavigateLastSection from "@utils/navigation/get_prev_page";
 import { selectCurrentUserId } from "@store/values/CurrentUserId";
 import { getIsTabInFocus } from "@store/values/IsTabInFocus";
@@ -26,14 +25,11 @@ import "@styles/hub/ChatForm.css";
 import ChatFormContent from "@components/hub/chatForm/ChatFormContent.js";
 import ChatFormHeader from "@components/hub/chatForm/ChatFormHeader.js";
 import ChatFormInputs from "@components/hub/chatForm/ChatFormInputs.js";
-import LockScreen from "@components/hub/LockScreen";
 
 export default function ChatForm() {
   const dispatch = useDispatch();
   const location = useLocation();
 
-  const isLockScreenPath = location.pathname.includes("/auth_encrypted");
-
   const currentUserId = useSelector(selectCurrentUserId);
   const conversations = useSelector(selectConversationsEntities);
   const selectedConversation = useSelector(getConverastionById);
@@ -83,21 +79,14 @@ export default function ChatForm() {
 
   useEffect(() => {
     if (selectedConversation?.is_encrypted) {
-      if (!encryptionService.hasAccount() && !isLockScreenPath) {
-        dispatch(clearSelectedConversation());
-        navigateTo(`/auth_encrypted?convId=${selectedConversation._id}`);
-        return;
-      }
-
-      !isLockScreenPath &&
-        encryptionService
-          .createEncryptionSession(
-            selectedConversation.owner_id === currentUserId
-              ? selectedConversation.opponent_id
-              : selectedConversation.owner_id
-          )
-          .then(({ session }) => setSuccessfulEncryptedSession(!!session))
-          .catch(() => setSuccessfulEncryptedSession(false));
+      encryptionService
+        .createEncryptionSession(
+          selectedConversation.owner_id === currentUserId
+            ? selectedConversation.opponent_id
+            : selectedConversation.owner_id
+        )
+        .then(({ session }) => setSuccessfulEncryptedSession(!!session))
+        .catch(() => setSuccessfulEncryptedSession(false));
     }
 
     files.length && setFiles([]);
@@ -109,7 +98,7 @@ export default function ChatForm() {
       document.removeEventListener("swiped-left", closeForm);
       document.removeEventListener("swiped-right", closeForm);
     };
-  }, [location, selectedCID]);
+  }, [location, selectedConversation?.is_encrypted]);
 
   useEffect(() => {
     const { hash } = location;
@@ -125,12 +114,13 @@ export default function ChatForm() {
 
   return (
     <section className={`chat-form__container ${selectedCID ? "" : "fcc"}`}>
-      {isLockScreenPath ? (
-        <LockScreen />
-      ) : selectedCID ? (
+      {selectedCID ? (
         <>
           <ChatFormHeader closeFormFunc={closeForm} />
-          <ChatFormContent scrollRef={chatMessagesBlock} />
+          <ChatFormContent
+            scrollRef={chatMessagesBlock}
+            isEncryptedConversation={selectedConversation?.is_encrypted}
+          />
           <ChatFormInputs
             chatMessagesBlockRef={chatMessagesBlock}
             isEncryptedSessionActive={successfulEncryptedSession}

src/components/hub/chatForm/ChatFormContent.js

@@ -5,7 +5,10 @@ import { selectActiveConversationMessages } from "@store/values/Messages";
 import { useMemo } from "react";
 import { useSelector } from "react-redux";
 
-export default function ChatFormContent({ scrollRef }) {
+export default function ChatFormContent({
+  scrollRef,
+  isEncryptedConversation,
+}) {
   const messages = useSelector(selectActiveConversationMessages);
 
   const chatContentView = useMemo(() => {
@@ -27,7 +30,11 @@ export default function ChatFormContent({ scrollRef }) {
 
     return (
       <div className="chat-content__container">
-        <p className="chat-emty__text">Write the first message...</p>
+        <p className="chat-emty__text">
+          {isEncryptedConversation
+            ? "Start an encrypted conversation by sending a message to the chat..."
+            : "Write the first message..."}
+        </p>
       </div>
     );
   }, [messages, scrollRef]);