Fix profile not showing, fix not connected, fix auto scroll chat

chat/consumers.py

@@ -2,7 +2,6 @@ from channels.generic.websocket import AsyncWebsocketConsumer
 from channels.db import database_sync_to_async
 from api.models import Order
 from chat.models import ChatRoom, Message
-from django.utils import timezone
 
 import json
 
@@ -12,14 +11,13 @@ class ChatRoomConsumer(AsyncWebsocketConsumer):
     def allow_in_chatroom(self):
         order = Order.objects.get(id=self.order_id)
 
-        if not order.status in [Order.Status.CCA, Order.Status.FSE]:
+        if not order.status in [Order.Status.CHA, Order.Status.FSE]:
-            print("Order not in chat status")
+            print("Order is not in chat status")
             return False
 
         if not (order.maker == self.user or order.taker == self.user):
             print("Not allowed in this chat")
             return False
-        
         return True
 
     @database_sync_to_async
@@ -161,13 +159,14 @@ class ChatRoomConsumer(AsyncWebsocketConsumer):
 
             # Send peer PGP public keys
             peer_public_key = await self.get_peer_PGP_public_key()
+            peer_connected = await self.is_peer_connected()
             await self.channel_layer.group_send(
                 self.room_group_name,
                 {
                     "type": "chatroom_message",
                     "message": peer_public_key,
                     "nick": self.scope["user"].username,
-                    "peer_connected": None,
+                    "peer_connected": peer_connected,
                 },
             )
 
@@ -215,6 +214,7 @@ class ChatRoomConsumer(AsyncWebsocketConsumer):
         elif message[0:23] == '-----SERVE HISTORY-----': 
             # If there is any stored message, serve them.
             msgs = await self.get_all_PGP_messages()
+            peer_connected = await self.is_peer_connected()
             for msg in msgs:
                 await self.channel_layer.group_send(
                     self.room_group_name,
@@ -224,7 +224,7 @@ class ChatRoomConsumer(AsyncWebsocketConsumer):
                         "time": msg['time'],
                         "message": msg['message'],
                         "nick": msg['nick'],
-                        "peer_connected": None,
+                        "peer_connected": peer_connected,
                     },
                 )
         else:

frontend/src/components/BottomBar.js

@@ -130,7 +130,7 @@ bottomBarDesktop =()=>{
                 <Grid container>
 
                     <Grid item xs={1.9}>
-                        <div style={{display: this.props.avatarLoaded && getCookie('robot_token')==this.props.token ? '':'none'}}>
+                        <div style={{display: this.props.avatarLoaded && (this.props.token ? getCookie('robot_token')==this.props.token : true ) ? '':'none'}}>
                         <ListItemButton onClick={this.handleClickOpenProfile} >
                             <Tooltip
                                 open={hasRewards || hasOrder}
@@ -292,7 +292,7 @@ bottomBarPhone =()=>{
                 <Grid container>
 
                     <Grid item xs={1.6}>
-                    <div style={{display: this.props.avatarLoaded && getCookie('robot_token')==this.props.token ? '':'none'}}>
+                    <div style={{display: this.props.avatarLoaded && (this.props.token ? getCookie('robot_token')==this.props.token : true ) ? '':'none'}}>
                     <Tooltip open={hasRewards || hasOrder}
                             title={(hasRewards ? t("You can claim satoshis!")+" ": "" )+
                                 (hasOrder ? t("You have an active order"):"")}>

frontend/src/components/Chat.js

@@ -105,7 +105,7 @@ class Chat extends Component {
           </Grid>
           <Grid item xs={0.3}/>
         </Grid>
-        <Paper elevation={1} style={{ height: '300px', maxHeight: '300px' , width: '280px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
+        <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" >
@@ -157,7 +157,7 @@ class Chat extends Component {
                   this.setState({ value: e.target.value });
                   this.value = this.state.value;
                 }}
-                sx={{width: 214}}
+                sx={{width: 244}}
               />
             </Grid>
             <Grid item alignItems="stretch" style={{ display: "flex" }}>

frontend/src/components/EncryptedChat.js

@@ -35,6 +35,7 @@ class Chat extends Component {
     waitingEcho: false,
     lastSent: '---BLANK---',
     latestIndex: 0,
+    scrollNow:false,
   };
 
   rws = new ReconnectingWebSocket('ws://' + window.location.host + '/ws/chat/' + this.props.orderId + '/');
@@ -43,13 +44,6 @@ class Chat extends Component {
     this.rws.addEventListener('open', () => {
       console.log('Connected!');
       this.setState({connected: true});
-      // if ( this.state.peer_pub_key == null){
-      //   this.rws.send(JSON.stringify({
-      //     type: "message",
-      //     message: "----PLEASE SEND YOUR PUBKEY----",
-      //     nick: this.props.ur_nick,
-      //   }));
-      // }
       this.rws.send(JSON.stringify({
         type: "message",
         message: this.state.own_pub_key,
@@ -64,19 +58,11 @@ class Chat extends Component {
       console.log('PGP message index', dataFromServer.index, ' latestIndex ',this.state.latestIndex);
       if (dataFromServer){
         console.log(dataFromServer)
+        this.setState({peer_connected: dataFromServer.peer_connected})
 
         // If we receive our own key on a message
         if (dataFromServer.message == this.state.own_pub_key){console.log("OWN PUB KEY RECEIVED!!")}
 
-        // If we receive a request to send our public key
-        // if (dataFromServer.message == `----PLEASE SEND YOUR PUBKEY----`) {
-        //   this.rws.send(JSON.stringify({
-        //     type: "message",
-        //     message: this.state.own_pub_key,
-        //     nick: this.props.ur_nick,
-        //   })); 
-        // } else
-
         // If we receive a public key other than ours (our peer key!)
         if (dataFromServer.message.substring(0,36) == `-----BEGIN PGP PUBLIC KEY BLOCK-----` && dataFromServer.message != this.state.own_pub_key) {
           if (dataFromServer.message == this.state.peer_pub_key){
@@ -106,6 +92,7 @@ class Chat extends Component {
           .then((decryptedData) =>
             this.setState((state) => 
             ({
+              scrollNow: true,
               waitingEcho: this.state.waitingEcho == true ? (decryptedData.decryptedMessage == this.state.lastSent ? false: true ) : false,
               lastSent: decryptedData.decryptedMessage == this.state.lastSent ? '----BLANK----': this.state.lastSent,
               latestIndex: dataFromServer.index > this.state.latestIndex ? dataFromServer.index : this.state.latestIndex,
@@ -124,7 +111,6 @@ class Chat extends Component {
             })
           ));
         }
-        this.setState({peer_connected: dataFromServer.peer_connected})
       }
     });
 
@@ -139,7 +125,10 @@ class Chat extends Component {
   }
 
   componentDidUpdate() {
+    if (this.state.scrollNow){
       this.scrollToBottom();
+      this.setState({scrollNow:false})
+    }
   }
 
   scrollToBottom = () => {
@@ -190,7 +179,7 @@ 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:210}}>
+              <div style={{display:'flex',alignItems:'center', flexWrap:'wrap', position:'relative',left:-5, width:220}}>
                 <div style={{width:168,display:'flex',alignItems:'center', flexWrap:'wrap'}}>
                   {props.message.userNick}
                   {props.message.validSignature ?
@@ -222,7 +211,7 @@ class Chat extends Component {
             </Tooltip>
           }
           subheader={this.state.showPGP[props.index] ? <a> {props.message.time} <br/> {"Valid signature: " + props.message.validSignature} <br/>  {props.message.encryptedMessage} </a> : props.message.plainTextMessage}
-          subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444', fontSize: this.state.showPGP[props.index]? 11 : null }}}
+          subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '215px', color: '#444444', fontSize: this.state.showPGP[props.index]? 11 : null }}}
         />
       </Card>
     )
@@ -231,7 +220,7 @@ class Chat extends Component {
   render() {
     const { t } = this.props;
     return (
-      <Container component="main" maxWidth="xs" >
+      <Container component="main">
         <Grid container spacing={0.5}>
           <Grid item xs={0.3}/>
           <Grid item xs={5.5}>
@@ -251,7 +240,8 @@ class Chat extends Component {
           </Grid>
           <Grid item xs={0.3}/>
         </Grid>
-        <Paper elevation={1} style={{ height: '300px', maxHeight: '300px' , width: '280px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
+        <div style={{position:'relative', left:'-8px', margin:'0px'}}>
+          <Paper elevation={1} style={{height: '300px', maxHeight: '300px' , width: '300px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
             {this.state.messages.map((message, index) =>
             <li style={{listStyleType:"none"}} key={index}>
               {message.userNick == this.props.ur_nick ?
@@ -275,7 +265,7 @@ class Chat extends Component {
                     this.setState({ value: e.target.value });
                     this.value = this.state.value;
                   }}
-                sx={{width: 214}}
+                  sx={{width: 232}}
                 />
               </Grid>
               <Grid item alignItems="stretch" style={{ display: "flex" }}>
@@ -292,7 +282,10 @@ class Chat extends Component {
               </Grid>
             </Grid>
           </form>
+        </div>
+
         <div style={{height:4}}/>
+
         <Grid container spacing={0}>
           <AuditPGPDialog
             open={this.state.audit}

frontend/src/components/TradeBox.js

@@ -132,6 +132,9 @@ class TradeBox extends Component {
           <DialogContentText id="alert-dialog-description">
             {t("The RoboSats staff will examine the statements and evidence provided. You need to build a complete case, as the staff cannot read the chat. It is best to provide a burner contact method with your statement. The satoshis in the trade escrow will be sent to the dispute winner, while the dispute loser will lose the bond.")}
           </DialogContentText>
+          <DialogContentText id="alert-dialog-description">
+            {t("Make sure to EXPORT the chat log using the button. Staff might request your chat log in order to solve discrepancies. It is your responsibility to store it.")}
+          </DialogContentText>
         </DialogContent>
         <DialogActions>
           <Button onClick={this.handleClickCloseConfirmDispute} autoFocus>{t("Disagree")}</Button>

frontend/src/components/UserGenPage.js

@@ -275,10 +275,10 @@ class UserGenPage extends Component {
           </Grid>
           <Grid item xs={12} align="center">
             <ButtonGroup variant="contained" aria-label="outlined primary button group">
-              <Button disabled={this.state.loadingRobot || !(getCookie('robot_token')==this.props.token)} color='primary' to='/make/' component={Link}>{t("Make Order")}</Button>
+              <Button disabled={this.state.loadingRobot || !(this.props.token ? getCookie('robot_token')==this.props.token : true )} color='primary' to='/make/' component={Link}>{t("Make Order")}</Button>
               <Button color='inherit' style={{color: '#111111'}} onClick={this.handleClickOpenInfo}>{t("Info")}</Button>
               <InfoDialog open={Boolean(this.state.openInfo)} onClose = {this.handleCloseInfo}/>
-              <Button disabled={this.state.loadingRobot || !(getCookie('robot_token')==this.props.token)} color='secondary' to='/book/' component={Link}>{t("View Book")}</Button>
+              <Button disabled={this.state.loadingRobot || !(this.props.token ? getCookie('robot_token')==this.props.token : true )} color='secondary' to='/book/' component={Link}>{t("View Book")}</Button>
             </ButtonGroup>
           </Grid>
 

frontend/static/css/index.css

@@ -137,6 +137,22 @@ input[type=number] {
 
 .MuiButton-textInherit {color : '#111111';}
 
+::-webkit-scrollbar
+  {
+    width: 6px;  /* for vertical scrollbars */
+    height: 6px; /* for horizontal scrollbars */
+  }
+  
+  ::-webkit-scrollbar-track
+  {
+    background: rgba(0, 0, 0, 0.1);
+  }
+  
+  ::-webkit-scrollbar-thumb
+  {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  
 @media (max-width: 929px) {
   .MuiDataGrid-columnHeaders + div {
     width: auto !important;