diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx index c43ee751c..f8629ccf3 100644 --- a/frontend/src/basic/Main.tsx +++ b/frontend/src/basic/Main.tsx @@ -211,12 +211,14 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => { }; useEffect(() => { - if (open.profile || (robot.token && robot.nickname === null)) { - fetchRobot({ keys: false }); // fetch existing robot - } else if (robot.token && robot.encPrivKey && robot.pubKey) { - fetchRobot({ keys: true }); // create new robot with existing token and keys (on network and coordinator change) + if (baseUrl != '') { + if (open.profile || (robot.token && robot.nickname === null)) { + fetchRobot({ keys: false }); // fetch existing robot + } else if (robot.token && robot.encPrivKey && robot.pubKey) { + fetchRobot({ keys: true }); // create new robot with existing token and keys (on network and coordinator change) + } } - }, [open.profile, settings.network, settings.coordinator]); + }, [open.profile, baseUrl]); return ( diff --git a/frontend/src/components/Dialogs/Profile.tsx b/frontend/src/components/Dialogs/Profile.tsx index 6bf40dfdd..67bc9d927 100644 --- a/frontend/src/components/Dialogs/Profile.tsx +++ b/frontend/src/components/Dialogs/Profile.tsx @@ -184,6 +184,7 @@ const ProfileDialog = ({ avatarClass='profileAvatar' style={{ width: 65, height: 65 }} nickname={robot.nickname} + baseUrl={baseUrl} /> diff --git a/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx index d21929629..4c2354436 100644 --- a/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx +++ b/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx @@ -22,6 +22,7 @@ interface Props { takerNick: string; messages: EncryptedChatMessage[]; setMessages: (messages: EncryptedChatMessage[]) => void; + baseUrl: string; } const EncryptedSocketChat: React.FC = ({ @@ -30,6 +31,7 @@ const EncryptedSocketChat: React.FC = ({ takerNick, messages, setMessages, + baseUrl, }: Props): JSX.Element => { const { t } = useTranslation(); const theme = useTheme(); @@ -38,13 +40,13 @@ const EncryptedSocketChat: React.FC = ({ const [connected, setConnected] = useState(false); const [peerConnected, setPeerConnected] = useState(false); const [ownPubKey] = useState( - (systemClient.getCookie('pub_key') ?? '').split('\\').join('\n'), + (systemClient.getItem('pub_key') ?? '').split('\\').join('\n'), ); const [ownEncPrivKey] = useState( - (systemClient.getCookie('enc_priv_key') ?? '').split('\\').join('\n'), + (systemClient.getItem('enc_priv_key') ?? '').split('\\').join('\n'), ); const [peerPubKey, setPeerPubKey] = useState(); - const [token] = useState(systemClient.getCookie('robot_token') || ''); + const [token] = useState(systemClient.getItem('robot_token') || ''); const [serverMessages, setServerMessages] = useState([]); const [value, setValue] = useState(''); const [connection, setConnection] = useState(); @@ -231,7 +233,12 @@ const EncryptedSocketChat: React.FC = ({ return (
  • - +
  • ); })} diff --git a/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx index 1f319d600..44cd00973 100644 --- a/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx +++ b/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx @@ -1,16 +1,13 @@ import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Button, Tooltip, TextField, Grid, Container, Paper, Typography } from '@mui/material'; +import { Button, TextField, Grid, Container, Paper } from '@mui/material'; import { encryptMessage, decryptMessage } from '../../../../pgp'; -import { saveAsJson } from '../../../../utils'; import { AuditPGPDialog } from '../../../Dialogs'; import { systemClient } from '../../../../services/System'; -import { websocketClient, WebsocketConnection } from '../../../../services/Websocket'; // Icons import CircularProgress from '@mui/material/CircularProgress'; import KeyIcon from '@mui/icons-material/Key'; -import { ExportIcon } from '../../../Icons'; import { useTheme } from '@mui/system'; import MessageCard from '../MessageCard'; import ChatHeader from '../ChatHeader'; @@ -43,13 +40,13 @@ const EncryptedTurtleChat: React.FC = ({ const audio = new Audio(`/static/assets/sounds/chat-open.mp3`); const [peerConnected, setPeerConnected] = useState(false); const [ownPubKey] = useState( - (systemClient.getCookie('pub_key') ?? '').split('\\').join('\n'), + (systemClient.getItem('pub_key') ?? '').split('\\').join('\n'), ); const [ownEncPrivKey] = useState( - (systemClient.getCookie('enc_priv_key') ?? '').split('\\').join('\n'), + (systemClient.getItem('enc_priv_key') ?? '').split('\\').join('\n'), ); const [peerPubKey, setPeerPubKey] = useState(); - const [token] = useState(systemClient.getCookie('robot_token') || ''); + const [token] = useState(systemClient.getItem('robot_token') || ''); const [value, setValue] = useState(''); const [audit, setAudit] = useState(false); const [waitingEcho, setWaitingEcho] = useState(false); @@ -170,7 +167,7 @@ const EncryptedTurtleChat: React.FC = ({ // If input string contains '#' send unencrypted and unlogged message else if (value.substring(0, 1) == '#') { apiClient - .post(`/api/chat`, { + .post(baseUrl, `/api/chat`, { PGP_message: value, }) .then((response) => { @@ -188,7 +185,7 @@ const EncryptedTurtleChat: React.FC = ({ encryptMessage(value, ownPubKey, peerPubKey, ownEncPrivKey, token).then( (encryptedMessage) => { apiClient - .post(`/api/chat/`, { + .post(baseUrl, `/api/chat/`, { PGP_message: encryptedMessage.toString().split('\n').join('\\'), order_id: orderId, }) @@ -225,7 +222,12 @@ const EncryptedTurtleChat: React.FC = ({ return (
  • - +
  • ); })} diff --git a/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx index b89ae7490..d8f782030 100644 --- a/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx +++ b/frontend/src/components/TradeBox/EncryptedChat/MessageCard/index.tsx @@ -15,9 +15,10 @@ interface Props { message: EncryptedChatMessage; isTaker: boolean; userConnected: boolean; + baseUrl: string; } -const MessageCard: React.FC = ({ message, isTaker, userConnected }) => { +const MessageCard: React.FC = ({ message, isTaker, userConnected, baseUrl }) => { const [showPGP, setShowPGP] = useState(); const { t } = useTranslation(); const theme = useTheme(); @@ -34,6 +35,7 @@ const MessageCard: React.FC = ({ message, isTaker, userConnected }) => { } style={{ backgroundColor: cardColor }} diff --git a/frontend/src/components/TradeBox/EncryptedChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/index.tsx index fbc473b91..1c0c0b5d6 100644 --- a/frontend/src/components/TradeBox/EncryptedChat/index.tsx +++ b/frontend/src/components/TradeBox/EncryptedChat/index.tsx @@ -55,6 +55,7 @@ const EncryptedChat: React.FC = ({ orderId={orderId} takerNick={takerNick} userNick={userNick} + baseUrl={baseUrl} /> ); }; diff --git a/frontend/src/components/TradeBox/index.js b/frontend/src/components/TradeBox/index.js index 79340e7a8..18821ba82 100644 --- a/frontend/src/components/TradeBox/index.js +++ b/frontend/src/components/TradeBox/index.js @@ -38,7 +38,6 @@ import { apiClient } from '../../services/api'; // Icons import PercentIcon from '@mui/icons-material/Percent'; -import SelfImprovement from '@mui/icons-material/SelfImprovement'; import BookIcon from '@mui/icons-material/Book'; import LockIcon from '@mui/icons-material/Lock'; import LockOpenIcon from '@mui/icons-material/LockOpen'; @@ -1435,14 +1434,7 @@ class TradeBox extends Component { {/* Make confirmation sound for Chat Open. */} {this.Sound('locked-invoice')} - - - {' '} - {this.props.data.is_seller ? t('Chat with the buyer') : t('Chat with the seller')} - {' '} - {' ' + this.stepXofY()} - - +
    -
    + + + + {' '} + {this.props.data.is_seller ? t('Chat with the buyer') : t('Chat with the seller')} + {' '} + {' ' + this.stepXofY()} +
    {this.props.data.is_seller ? (