Fix autoscroll, allow plaintext chat, forbid collab cancelation on wrong status

api/logics.py

@@ -786,6 +786,8 @@ class Logics:
 
     @classmethod
     def collaborative_cancel(cls, order):
+        if not order.status in [Order.Status.WFI, Order.Status.CHA]:
+            return
         cls.return_bond(order.maker_bond)
         cls.return_bond(order.taker_bond)
         cls.return_escrow(order)

chat/consumers.py

@@ -227,6 +227,7 @@ class ChatRoomConsumer(AsyncWebsocketConsumer):
                         "peer_connected": peer_connected,
                     },
                 )
+        # Unencrypted messages are not stored, just echoed.
         else:
             await self.channel_layer.group_send(
                 self.room_group_name,
@@ -243,6 +244,8 @@ class ChatRoomConsumer(AsyncWebsocketConsumer):
         nick = event["nick"]
         peer_connected = event["peer_connected"]
 
+        print(message)
+        
         await self.send(text_data=json.dumps({
             "message": message,
             "user_nick": nick,

frontend/src/components/Chat.js

@@ -1,176 +0,0 @@
-import React, { Component } from 'react';
-import { withTranslation, Trans} from "react-i18next";
-import {Button, Link, Badge, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, FormHelperText, Typography} from "@mui/material";
-import ReconnectingWebSocket from 'reconnecting-websocket';
-
-class Chat extends Component {
-  // Deprecated chat component
-  // Will still be used for ~1 week, until users change to robots with PGP keys
-
-  constructor(props) {
-    super(props);
-  }
-
-  state = {
-    messages: [],
-    value:'',
-    connected: false,
-    peer_connected: false,
-  };
-
-  rws = new ReconnectingWebSocket('ws://' + window.location.host + '/ws/chat/' + this.props.orderId + '/');
-
-  componentDidMount() {
-    this.rws.addEventListener('open', () => {
-      console.log('Connected!');
-      this.setState({connected: true});
-      this.rws.send(JSON.stringify({
-        type: "message",
-        message: 'just-connected',
-        nick: this.props.ur_nick,
-      }));
-    });
-
-    this.rws.addEventListener('message', (message) => {
-
-      const dataFromServer = JSON.parse(message.data);
-      console.log('Got reply!', dataFromServer.type);
-
-      if (dataFromServer){
-        if (dataFromServer.message != 'just-connected' & dataFromServer.message != 'peer-disconnected'){
-          this.setState((state) =>
-          ({
-            messages: [...state.messages,
-            {
-              msg: dataFromServer.message,
-              userNick: dataFromServer.user_nick,
-            }],
-          })
-          )
-        }
-        this.setState({peer_connected: dataFromServer.peer_connected})
-      }
-    });
-
-    this.rws.addEventListener('close', () => {
-      console.log('Socket is closed. Reconnect will be attempted');
-      this.setState({connected: false});
-    });
-
-    this.rws.addEventListener('error', () => {
-      console.error('Socket encountered error: Closing socket');
-    });
-  }
-
-  componentDidUpdate() {
-    this.scrollToBottom();
-  }
-
-  scrollToBottom = () => {
-    this.messagesEnd.scrollIntoView({ behavior: "smooth" });
-  }
-
-  onButtonClicked = (e) => {
-    if(this.state.value!=''){
-      this.rws.send(JSON.stringify({
-        type: "message",
-        message: this.state.value,
-        nick: this.props.ur_nick,
-      }));
-      this.setState({value: ""});
-    }
-    e.preventDefault();
-  }
-
-  render() {
-    const { t } = this.props;
-    return (
-      <Container component="main" maxWidth="xs" >
-        <Grid container spacing={0.5}>
-          <Grid item xs={0.3}/>
-          <Grid item xs={5.5}>
-            <Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
-              <Typography variant='caption' sx={{color: '#111111'}}>
-                {t("You")+": "}{this.state.connected ? t("connected"): t("disconnected")}
-              </Typography>
-            </Paper>
-          </Grid>
-          <Grid item xs={0.4}/>
-          <Grid item xs={5.5}>
-            <Paper elevation={1} style={this.state.peer_connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
-              <Typography variant='caption' sx={{color: '#111111'}}>
-              {t("Peer")+": "}{this.state.peer_connected ? t("connected"): t("disconnected")}
-              </Typography>
-            </Paper>
-          </Grid>
-          <Grid item xs={0.3}/>
-        </Grid>
-        <Paper elevation={1} style={{ height: '300px', maxHeight: '300px' , width: '310px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
-          {this.state.messages.map((message, index) =>
-          <li style={{listStyleType:"none"}} key={index}>
-            <Card elevation={5} align="left" >
-            {/* If message sender is not our nick, gray color, if it is our nick, green color */}
-            {message.userNick == this.props.ur_nick ?
-              <CardHeader sx={{color: '#111111'}}
-                avatar={
-                  <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.connected ? "success" : "error"}>
-                    <Avatar className="flippedSmallAvatar"
-                      alt={message.userNick}
-                      src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
-                      />
-                  </Badge>
-                }
-                style={{backgroundColor: '#eeeeee'}}
-                title={message.userNick}
-                subheader={message.msg}
-                subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
-              />
-              :
-              <CardHeader sx={{color: '#111111'}}
-                avatar={
-                  <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.peer_connected ? "success" : "error"}>
-                    <Avatar className="flippedSmallAvatar"
-                      alt={message.userNick}
-                      src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
-                      />
-                  </Badge>
-                }
-                style={{backgroundColor: '#fafafa'}}
-                title={message.userNick}
-                subheader={message.msg}
-                subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
-              />}
-              </Card>
-            </li>)}
-          <div style={{ float:"left", clear: "both" }} ref={(el) => { this.messagesEnd = el; }}></div>
-        </Paper>
-        <form noValidate onSubmit={this.onButtonClicked}>
-          <Grid alignItems="stretch" style={{ display: "flex" }}>
-            <Grid item alignItems="stretch" style={{ display: "flex"}}>
-              <TextField
-                label={t("Type a message")}
-                variant="standard"
-                size="small"
-                helperText={this.state.connected ? null : t("Connecting...")}
-                value={this.state.value}
-                onChange={e => {
-                  this.setState({ value: e.target.value });
-                  this.value = this.state.value;
-                }}
-                sx={{width: 244}}
-              />
-            </Grid>
-            <Grid item alignItems="stretch" style={{ display: "flex" }}>
-              <Button sx={{'width':68}} disabled={!this.state.connected} type="submit" variant="contained" color="primary">{t("Send")} </Button>
-            </Grid>
-          </Grid>
-        </form>
-        <FormHelperText>
-          {t("The chat has no memory: if you leave, messages are lost.")} <Link target="_blank" href={t("PGP_guide_url")}> {t("Learn easy PGP encryption.")}</Link>
-        </FormHelperText>
-      </Container>
-    )
-  }
-}
-
-export default withTranslation()(Chat);

frontend/src/components/EncryptedChat.js

@@ -110,6 +110,25 @@ class Chat extends Component {
               }),
             })
           ));
+          
+        } else
+
+        // We allow plaintext communication. The user must write # to start
+        // If we receive an plaintext message
+        if (dataFromServer.message.substring(0,1) == "#"){
+          console.log("Got plaintext message", dataFromServer.message)
+          this.setState((state) => 
+            ({
+              scrollNow: true,
+              messages: [...state.messages,
+              { 
+                index: this.state.latestIndex + 0.001,
+                encryptedMessage: dataFromServer.message,
+                plainTextMessage: dataFromServer.message,
+                validSignature: false,           
+                userNick: dataFromServer.user_nick,
+                time: (new Date).toString(),
+              }]}));
           } 
       }
     });
@@ -125,6 +144,8 @@ class Chat extends Component {
   }
 
   componentDidUpdate() {
+
+    // Only fire the scroll when the reason for Update is a new message
     if (this.state.scrollNow){
       this.scrollToBottom();
       this.setState({scrollNow:false})
@@ -136,17 +157,26 @@ class Chat extends Component {
   }
 
   onButtonClicked = (e) => {
-    if(this.state.value!=''){
-      this.setState({waitingEcho:true, lastSent:this.state.value});
+    if(this.state.value.substring(0,1)=='#'){
+        this.rws.send(JSON.stringify({
+          type: "message",
+          message: this.state.value,
+          nick: this.props.ur_nick,
+        }));
+        this.setState({value: ""});
+    }
+    
+    else if(this.state.value!=''){
+      this.setState({value: "", 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) &
+        console.log("Sending Encrypted MESSAGE", encryptedMessage) &
         this.rws.send(JSON.stringify({
           type: "message",
           message: encryptedMessage.split('\n').join('\\'),
           nick: this.props.ur_nick,
         }) 
-       ) & this.setState({value: "", waitingEcho: false})
+       )
       );
     }
     e.preventDefault();
@@ -179,8 +209,8 @@ class Chat extends Component {
           style={{backgroundColor: props.cardColor}}
           title={
             <Tooltip placement="top" enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t(props.message.validSignature ? "Verified signature by {{nickname}}": "Invalid signature! Not sent by {{nickname}}",{"nickname": props.message.userNick})}>
-              <div style={{display:'flex',alignItems:'center', flexWrap:'wrap', position:'relative',left:-5, width:220}}>
-                <div style={{width:168,display:'flex',alignItems:'center', flexWrap:'wrap'}}>
+              <div style={{display:'flex',alignItems:'center', flexWrap:'wrap', position:'relative',left:-5, width:240}}>
+                <div style={{width:173,display:'flex',alignItems:'center', flexWrap:'wrap'}}>
                   {props.message.userNick}
                   {props.message.validSignature ?
                     <CheckIcon sx={{height:16}} color="success"/>
@@ -240,8 +270,8 @@ class Chat extends Component {
           </Grid>
           <Grid item xs={0.3}/>
         </Grid>
-        <div style={{position:'relative', left:'-8px', margin:'0px'}}>
-          <Paper elevation={1} style={{height: '300px', maxHeight: '300px' , width: '300px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
+        <div style={{position:'relative', left:'-2px', margin:'0 auto', width: '285px'}}>
+          <Paper elevation={1} style={{height: '300px', maxHeight: '300px' , width: '285px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
             {this.state.messages.map((message, index) =>
             <li style={{listStyleType:"none"}} key={index}>
               {message.userNick == this.props.ur_nick ?
@@ -265,7 +295,7 @@ class Chat extends Component {
                     this.setState({ value: e.target.value });
                     this.value = this.state.value;
                   }}
-                  sx={{width: 232}}
+                  sx={{width: 219}}
                 />
               </Grid>
               <Grid item alignItems="stretch" style={{ display: "flex" }}>