Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "fix: Copying chat not work" #632

Merged
merged 1 commit into from
Aug 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 118 additions & 0 deletions client/src/App.jsx
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
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
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
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
Loading