Skip to content

Commit

Permalink
Revert "fix: Copying chat not work" (#632)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dun-sin
Dun-sin authored Aug 7, 2024
1 parent 9acb3d9 commit cac20e1
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 77 deletions.
118 changes: 118 additions & 0 deletions client/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import { useEffect, useState } from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';

import { KindeProvider } from '@kinde-oss/kinde-auth-react';
import ReactGA from 'react-ga4';

// Store
import { useAuth } from 'context/AuthContext';
import { useApp } from 'src/context/AppContext';

// Components
import NavBar from 'components/NavBar';
import ProtectedRoutes from 'components/ProtectedRoutes';
import { api } from 'src/lib/axios';

// Pages
import Start from 'pages/Start';
import Searching from 'pages/Searching';
import ComingSoon from 'pages/ComingSoon';
import Profile from './pages/Profile';
import Login from 'pages/Login';
import Settings from 'pages/Settings';
import NoPage from './pages/NoPage';

import useIsTabActive from './hooks/useIsTabActive';

const clientID = import.meta.env.VITE_IMPORTANT;

function App() {
ReactGA.initialize('G-HL8CN4JFXN');

const { isLoggedIn, dispatchAuth } = useAuth();
const { loadUserSettings, updateOnlineStatus, app } = useApp();

const { settings } = app;
const [onlineStatus, setOnlineStatus] = useState(null);

const isTabActive = useIsTabActive();

async function loginWithEmail(email) {
try {
const response = await api.post('/login', {
email,
});

if (response.status === 200) {
const data = await response.data;
const userID = data.id;

dispatchAuth({
type: 'LOGIN',
payload: {
loginType: 'email',
loginId: userID,
email,
},
});
try {
const userData = await api.get(`/profile/${email}`);
loadUserSettings(userData.data?.settings);
} catch (error) {
console.error('Error loading user data:', error);
}
} else {
throw new Error('Login failed');
}
} catch (err) {
console.error('Error logging in:', err);
}
}

useEffect(() => {
if (!isLoggedIn) {
return;
}

if (isTabActive) {
setOnlineStatus('online');
} else {
setOnlineStatus(new Date());
}
}, [isTabActive]);

useEffect(() => {
updateOnlineStatus(onlineStatus);
}, [onlineStatus]);

return (
<KindeProvider
clientId={clientID}
domain="https://whisper.kinde.com"
logoutUri={window.location.origin}
redirectUri={window.location.origin + '/login'}
onRedirectCallback={(user) => {
loginWithEmail(user.email);
}}
>
<div className={`flex flex-col-reverse md:flex-row h-screen ${settings.theme && 'dark'}`}>
{isLoggedIn && <NavBar />}
<Routes>
<Route exact path="/" element={<ProtectedRoutes isLoggedIn={isLoggedIn} />}>
<Route exact path="/" element={<Start />} />
{/* TODO: Sepreate searching and foundUser into different routes */}
<Route exact path="/founduser" element={<Searching />} />
<Route exact path="/friends" element={<ComingSoon />} />
<Route exact path="/profile" element={<Profile />} />
<Route exact path="/settings" element={<Settings />} />
</Route>

<Route exact path="/login" element={isLoggedIn ? <Navigate to="/" /> : <Login />} />
<Route path="*" element={<NoPage />} />
</Routes>
</div>
</KindeProvider>
);
}

export default App;
10 changes: 3 additions & 7 deletions client/src/components/Chat/DropDownOption.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,10 @@ 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);
Expand Down Expand Up @@ -91,7 +87,7 @@ const DropDownOptions =({ id, isSender, inputRef, cancelEdit, setEditing, setRep
>
<Dropdown.Item onClick={() => handleEdit(id)}>Edit</Dropdown.Item>

<Dropdown.Item onClick={() => handleCopyToClipBoard(id,importedPrivateKey)}>Copy</Dropdown.Item>
<Dropdown.Item onClick={() => handleCopyToClipBoard(id, state, app)}>Copy</Dropdown.Item>
<Dropdown.Item onClick={() => setReplyId(id)}>Reply</Dropdown.Item>
<Dropdown.Item onClick={() => handleDelete(id)}>Delete</Dropdown.Item>
</Dropdown>
Expand All @@ -106,7 +102,7 @@ const DropDownOptions =({ id, isSender, inputRef, cancelEdit, setEditing, setRep
renderToggle={renderIconButtonReceiver}
NoCaret
>
<Dropdown.Item onClick={() => handleCopyToClipBoard(id,cryptoKey)}>Copy</Dropdown.Item>
<Dropdown.Item onClick={() => handleCopyToClipBoard(id, state, app)}>Copy</Dropdown.Item>
<Dropdown.Item onClick={() => setReplyId(id)}>Reply</Dropdown.Item>
</Dropdown>
);
Expand Down
68 changes: 8 additions & 60 deletions client/src/hooks/useCryptoKeys.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState,useEffect } from 'react';
import { useState, } from 'react';
import { convertArrayBufferToPem } from 'src/lib/chatHelper';
import { NEW_EVENT_REQUEST_PUBLIC_KEY } from '../../../constants.json'

Expand All @@ -10,66 +10,11 @@ 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(
Expand Down Expand Up @@ -122,7 +67,10 @@ 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
Expand Down Expand Up @@ -192,4 +140,4 @@ const useCryptoKeys = (currentChatId) => {
return { importedPublicKey, importedPrivateKey, cryptoKey, importKey, generateKeyPair };
};

export default useCryptoKeys;
export default useCryptoKeys;
13 changes: 3 additions & 10 deletions client/src/lib/chatHelper.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import decryptMessage from './decryptMessage';

export default (state, app) => {

const getMessage = (id) => {
if (!state[app.currentChatId]) {
return null;
Expand Down Expand Up @@ -30,19 +27,15 @@ export default (state, app) => {
});
};

const handleCopyToClipBoard = async (id,key) => {

const handleCopyToClipBoard = async (id) => {
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(decryptedMessage);
return await navigator.clipboard.writeText(message);
} else {
return document.execCommand('copy', true, decryptedMessage);
return document.execCommand('copy', true, message);
}
};

Expand Down

0 comments on commit cac20e1

Please sign in to comment.