fix: Copying chat not work (#629)

Dun-sin · Aug 7, 2024 · 9acb3d9 · 9acb3d9
1 parent c6f0687
commit 9acb3d9
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 132 deletions.
diff --git a/client/src/App.jsx b/client/src/App.jsx
diff --git a/client/src/components/Chat/DropDownOption.jsx b/client/src/components/Chat/DropDownOption.jsx
@@ -11,10 +11,14 @@ import { useApp } from 'src/context/AppContext';
 import { socket } from 'src/lib/socketConnection';
 
 import useChatUtils from 'src/lib/chatSocket';
+import useCryptoKeys from 'src/hooks/useCryptoKeys';
 
-const DropDownOptions = ({ id, isSender, inputRef, cancelEdit, setEditing, setReplyId }) => {
+const DropDownOptions =({ id, isSender, inputRef, cancelEdit, setEditing, setReplyId }) => {
+
 	const { app } = useApp();
+	const { importedPrivateKey, cryptoKey
 
+	} =useCryptoKeys(app.currentChatId);
 	const { messages: state, updateMessage, removeMessage } = useChat();
 	const { getMessage, messageExists, handleCopyToClipBoard } = chatHelper(state, app);
 	const { deleteMessage } = useChatUtils(socket);
@@ -87,7 +91,7 @@ const DropDownOptions = ({ id, isSender, inputRef, cancelEdit, setEditing, setRe
 			>
 				<Dropdown.Item onClick={() => handleEdit(id)}>Edit</Dropdown.Item>
 
-				<Dropdown.Item onClick={() => handleCopyToClipBoard(id, state, app)}>Copy</Dropdown.Item>
+				<Dropdown.Item onClick={() => handleCopyToClipBoard(id,importedPrivateKey)}>Copy</Dropdown.Item>
 				<Dropdown.Item onClick={() => setReplyId(id)}>Reply</Dropdown.Item>
 				<Dropdown.Item onClick={() => handleDelete(id)}>Delete</Dropdown.Item>
 			</Dropdown>
@@ -102,7 +106,7 @@ const DropDownOptions = ({ id, isSender, inputRef, cancelEdit, setEditing, setRe
 				renderToggle={renderIconButtonReceiver}
 				NoCaret
 			>
-				<Dropdown.Item onClick={() => handleCopyToClipBoard(id, state, app)}>Copy</Dropdown.Item>
+				<Dropdown.Item onClick={() => handleCopyToClipBoard(id,cryptoKey)}>Copy</Dropdown.Item>
 				<Dropdown.Item onClick={() => setReplyId(id)}>Reply</Dropdown.Item>
 			</Dropdown>
 		);

diff --git a/client/src/hooks/useCryptoKeys.js b/client/src/hooks/useCryptoKeys.js
@@ -1,4 +1,4 @@
-import { useState, } from 'react';
+import { useState,useEffect } from 'react';
 import { convertArrayBufferToPem } from 'src/lib/chatHelper';
 import { NEW_EVENT_REQUEST_PUBLIC_KEY } from '../../../constants.json'
 
@@ -10,11 +10,66 @@ const useCryptoKeys = (currentChatId) => {
   const [importedPublicKey, setImportedPublicKey] = useState(null);
   const [importedPrivateKey, setImportedPrivateKey] = useState(null);
   const [cryptoKey, setCryptoKey] = useState(null);
+  // Retrieve keys from local storage
+  const storedCryptoKey = localStorage.getItem('cryptoKey' + currentChatId);
+  const storedPublicKey = localStorage.getItem('importPublicKey' + currentChatId);
+  const storedPrivateKey = localStorage.getItem('importedPrivateKey' + currentChatId);
+
+  useEffect(()=>{
+
+    const fetchData = async () => {
+      if(storedCryptoKey){
+    const privateKeyArray = new Uint8Array(JSON.parse(storedCryptoKey));
+    const importedPrivateKey = await crypto.subtle.importKey(
+      'pkcs8',
+      privateKeyArray.buffer,
+      {
+        name: 'RSA-OAEP',
+        hash: { name: 'SHA-256' },
+      },
+      true,
+      ['decrypt']
+    );
+    setCryptoKey(importedPrivateKey);
+  }
+    if(storedPublicKey && storedPrivateKey){
+    const publicKeyArray01 = new Uint8Array(JSON.parse(storedPublicKey));
+      const privateKeyArray01 = new Uint8Array(JSON.parse(storedPrivateKey));
+      const importedPublicKey = await crypto.subtle.importKey(
+        'spki',
+        publicKeyArray01,
+        {
+          name: 'RSA-OAEP',
+          hash: { name: 'SHA-256' },
+        },
+        true,
+        ['encrypt']
+      );
+
+      setImportedPublicKey(importedPublicKey);
+
+      const importedPrivateKey01 = await crypto.subtle.importKey(
+        'pkcs8',
+        privateKeyArray01 ,
+        {
+          name: 'RSA-OAEP',
+          hash: { name: 'SHA-256' },
+        },
+        true,
+        ['decrypt']
+      );
+
+      setImportedPrivateKey(importedPrivateKey01);
+
+    }
+  }
+    fetchData()
+
+  },[currentChatId])
 
   // Function to import public and private keys
   const importKey = async (publicArrayBuffer, privateArrayBuffer) => {
-    const storedPublicKey = localStorage.getItem('importPublicKey' + currentChatId);
-    const storedPrivateKey = localStorage.getItem('importedPrivateKey' + currentChatId);
+
 
     // Import public key
     const importedPublicKey = await crypto.subtle.importKey(
@@ -67,10 +122,7 @@ const useCryptoKeys = (currentChatId) => {
 
   // Function to generate a new key pair
   const generateKeyPair = async () => {
-    const storedCryptoKey = localStorage.getItem('cryptoKey' + currentChatId);
-    const storedPublicKey = localStorage.getItem('importPublicKey' + currentChatId);
-    const storedPrivateKey = localStorage.getItem('importedPrivateKey' + currentChatId);
-
+
     let pemPrivateKey;
 
     // Generate a new RSA key pair
@@ -140,4 +192,4 @@ const useCryptoKeys = (currentChatId) => {
   return { importedPublicKey, importedPrivateKey, cryptoKey, importKey, generateKeyPair };
 };
 
-export default useCryptoKeys;
+export default useCryptoKeys;
diff --git a/client/src/lib/chatHelper.js b/client/src/lib/chatHelper.js
@@ -1,4 +1,7 @@
+import decryptMessage from './decryptMessage';
+
 export default (state, app) => {
+
 	const getMessage = (id) => {
 		if (!state[app.currentChatId]) {
 			return null;
@@ -27,15 +30,19 @@ export default (state, app) => {
 		});
 	};
 
-	const handleCopyToClipBoard = async (id) => {
+	const handleCopyToClipBoard = async (id,key) => {
+
 		const { message } = getMessage(id, state, app);
+
+        const decryptedMessage =await decryptMessage(message,key)
+
 		if (message.includes('Warning Message')) {
 			return;
 		}
 		if ('clipboard' in navigator) {
-			return await navigator.clipboard.writeText(message);
+			return await navigator.clipboard.writeText(decryptedMessage);
 		} else {
-			return document.execCommand('copy', true, message);
+			return document.execCommand('copy', true, decryptedMessage);
 		}
 	};