From 508151eae54afe86b5e5d2fdbb6f1536c8c39c1d Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Tue, 24 May 2022 14:36:21 -0700 Subject: [PATCH] Add showPGP per message, copy per message, create messageCard --- chat/consumers.py | 1 - frontend/src/components/Dialogs/AuditPGP.tsx | 6 +- frontend/src/components/EncryptedChat.js | 235 +++++++++++++------ frontend/src/locales/en.json | 2 +- 4 files changed, 171 insertions(+), 73 deletions(-) diff --git a/chat/consumers.py b/chat/consumers.py index 37647a30..0e462d3b 100644 --- a/chat/consumers.py +++ b/chat/consumers.py @@ -110,7 +110,6 @@ class ChatRoomConsumer(AsyncWebsocketConsumer): async def receive(self, text_data): text_data_json = json.loads(text_data) - print(text_data) message = text_data_json["message"] peer_connected = await self.is_peer_connected() diff --git a/frontend/src/components/Dialogs/AuditPGP.tsx b/frontend/src/components/Dialogs/AuditPGP.tsx index 38e82bfe..75f7a721 100644 --- a/frontend/src/components/Dialogs/AuditPGP.tsx +++ b/frontend/src/components/Dialogs/AuditPGP.tsx @@ -20,7 +20,7 @@ import { saveAsJson } from "../../utils/saveFile"; import KeyIcon from '@mui/icons-material/Key'; import ContentCopy from "@mui/icons-material/ContentCopy"; import ForumIcon from '@mui/icons-material/Forum'; -import { ExportIcon } from '../Icons'; +import { ExportIcon, NewTabIcon } from '../Icons'; type Props = { open: boolean; @@ -53,7 +53,7 @@ const AuditPGPDialog = ({ onClose={onClose} > - {t("Do not trust, verify!")} + {t("Don't trust, verify")} @@ -63,7 +63,7 @@ const AuditPGPDialog = ({ - + diff --git a/frontend/src/components/EncryptedChat.js b/frontend/src/components/EncryptedChat.js index 91389ab9..3905a274 100644 --- a/frontend/src/components/EncryptedChat.js +++ b/frontend/src/components/EncryptedChat.js @@ -12,6 +12,7 @@ import CheckIcon from '@mui/icons-material/Check'; import CloseIcon from '@mui/icons-material/Close'; import ContentCopy from "@mui/icons-material/ContentCopy"; import VisibilityIcon from '@mui/icons-material/Visibility'; +import CircularProgress from '@mui/material/CircularProgress'; import KeyIcon from '@mui/icons-material/Key'; import { ExportIcon } from './Icons'; @@ -30,10 +31,13 @@ class Chat extends Component { connected: false, peer_connected: false, audit: false, + showPGP: new Array, + waitingEcho: false, + lastSent: '---BLANK---', }; rws = new ReconnectingWebSocket('ws://' + window.location.host + '/ws/chat/' + this.props.orderId + '/'); - + componentDidMount() { this.rws.addEventListener('open', () => { console.log('Connected!'); @@ -93,6 +97,8 @@ class Chat extends Component { .then((decryptedData) => this.setState((state) => ({ + waitingEcho: this.state.waitingEcho == true ? (decryptedData.decryptedMessage == this.state.lastSent ? false: true ) : false, + lastSent: decryptedData.decryptedMessage == this.state.lastSent ? '----BLANK----': this.state.lastSent, messages: [...state.messages, { encryptedMessage: dataFromServer.message.split('\\').join('\n'), @@ -129,6 +135,7 @@ class Chat extends Component { onButtonClicked = (e) => { if(this.state.value!=''){ + this.setState({waitingEcho:true, lastSent:this.state.value}); encryptMessage(this.state.value, this.state.own_pub_key, this.state.peer_pub_key, this.state.own_enc_priv_key, this.state.token) .then((encryptedMessage) => console.log("Sending Encrypted MESSAGE "+encryptedMessage) & @@ -137,7 +144,7 @@ class Chat extends Component { message: encryptedMessage.split('\n').join('\\'), nick: this.props.ur_nick, }) - ) & this.setState({value: ""}) + ) & this.setState({value: "", waitingEcho: false}) ); } e.preventDefault(); @@ -154,6 +161,60 @@ class Chat extends Component { }) } + messageCard = (props) => { + const { t } = this.props; + return( + + + + + } + style={{backgroundColor: props.cardColor}} + title={ + +
+
+ {props.message.userNick} + {props.message.validSignature ? + + : + + } +
+
+ + this.setState(prevState => { + const newShowPGP = [...prevState.showPGP]; + newShowPGP[props.index] = !newShowPGP[props.index]; + return {showPGP: newShowPGP}; + })}> + + +
+
+ + navigator.clipboard.writeText(this.state.showPGP[props.index] ? props.message.encryptedMessage : props.message.plainTextMessage)}> + + + +
+
+ + } + subheader={this.state.showPGP[props.index] ? props.message.encryptedMessage : props.message.plainTextMessage} + subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444', fontSize: this.state.showPGP[props.index]? 11 : null }}} + /> + + ) + } + render() { const { t } = this.props; return ( @@ -162,7 +223,7 @@ class Chat extends Component { - + {t("You")+": "}{this.state.connected ? t("connected"): t("disconnected")} @@ -170,7 +231,7 @@ class Chat extends Component { - + {t("Peer")+": "}{this.state.peer_connected ? t("connected"): t("disconnected")} @@ -180,72 +241,101 @@ class Chat extends Component { {this.state.messages.map((message, index) =>
  • - {/* If message sender is not our nick, gray color, if it is our nick, green color */} {message.userNick == this.props.ur_nick ? - - - - } - style={{backgroundColor: '#eeeeee'}} - title={ - -
    - {message.userNick} - {message.validSignature ? - - : - - } -
    - -
    -
    - -
    -
    -     - } - subheader={this.state.audit ? message.encryptedMessage : message.plainTextMessage} - subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}} - /> + : - - - - } - style={{backgroundColor: '#fafafa'}} - title={ - -
    - {message.userNick} - {message.validSignature ? - - : - - } -
    - -
    -
    - -
    -
    -     } - subheader={this.state.audit ? message.encryptedMessage : message.plainTextMessage} - subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}} - />} -     + + } + {/* // + // + // + // } + // style={{backgroundColor: '#eeeeee'}} + // title={ + // + //
    + //
    + // {message.userNick} + // {message.validSignature ? + // + // : + // + // } + //
    + //
    + // + // this.setState(prevState => { + // const newShowPGP = [...prevState.showPGP]; + // newShowPGP[index] = !newShowPGP[index]; + // return {showPGP: newShowPGP}; + // })}> + // + // + //
    + //
    + // + // navigator.clipboard.writeText(this.state.showPGP[index] ? message.encryptedMessage : message.plainTextMessage)}> + // + // + // + //
    + //
    + //     + // } + // subheader={this.state.showPGP[index] ? message.encryptedMessage : message.plainTextMessage} + // subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444', fontSize: this.state.showPGP[index]? 11 : null }}} + // /> + // : + // + // + // + // } + // style={{backgroundColor: '#fafafa'}} + // title={ + // + //
    + //
    + // {message.userNick} + // {message.validSignature ? + // + // : + // + // } + //
    + //
    + // + // this.setState(prevState => { + // const newShowPGP = [...prevState.showPGP]; + // newShowPGP[index] = !newShowPGP[index]; + // return {showPGP: newShowPGP}; + // })}> + // + // + //
    + //
    + // + // navigator.clipboard.writeText(this.state.showPGP[index] ? message.encryptedMessage : message.plainTextMessage)}> + // + // + // + //
    + //
    + //     */}
    • )}
    { this.messagesEnd = el; }}>
     @@ -266,7 +356,16 @@ class Chat extends Component { />     - +     diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 8191f3a8..2b430330 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -381,7 +381,7 @@ "You can also check the full guide in ":"You can also check the full guide in ", "How to use":"How to use", "What payment methods are accepted?":"What payment methods are accepted?", - "All of them as long as they are fast. You can write down your preferred payment method(s). You will have to match with a peer who also accepts that method. The step to exchange fiat has a expiry time of 24 hours before a dispute is automatically open. We highly recommend using instant fiat payment rails.":"All of them as long as they are fast. You can write down your preferred payment method(s). You will have to match with a peer who also accepts that method. The step to exchange fiat has a expiry time of 24 hours before a dispute is automatically open. We highly recommend using instant fiat payment rails.", + "All of them as long as they are fast. You can write down your preferred payment method(s). You will have to match with a peer who also accepts that method. The step to exchange fiat has a expiry time of 24 hours before a dispute is automatically open. We highly recommend using instant fiat payment rails.":"All of them as long as they are fast. You can write down your preferred payment method(s). You will have to match with a peer who also accepts that method. The step to exchange fiat has an expiry time of 24 hours before a dispute is automatically open. We highly recommend using instant fiat payment rails.", "Are there trade limits?":"Are there trade limits?", "Maximum single trade size is {{maxAmount}} Satoshis to minimize lightning routing failure. There is no limits to the number of trades per day. A robot can only have one order at a time. However, you can use multiple robots simultaneously in different browsers (remember to back up your robot tokens!).":"Maximum single trade size is {{maxAmount}} Satoshis to minimize lightning routing failure. There is no limits to the number of trades per day. A robot can only have one order at a time. However, you can use multiple robots simultaneously in different browsers (remember to back up your robot tokens!).", "Is RoboSats private?":"Is RoboSats private?",