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

This commit is contained in:
Reckless_Satoshi 2022-06-04 10:29:21 -07:00
parent f3b18d6c85
commit 64928cf4ea
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
7 changed files with 89 additions and 77 deletions

View File

@ -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
@ -11,15 +10,14 @@ class ChatRoomConsumer(AsyncWebsocketConsumer):
@database_sync_to_async
def allow_in_chatroom(self):
order = Order.objects.get(id=self.order_id)
if not order.status in [Order.Status.CCA, Order.Status.FSE]:
print("Order not in chat status")
return False
if not order.status in [Order.Status.CHA, Order.Status.FSE]:
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:

View File

@ -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"):"")}>

View File

@ -6,7 +6,7 @@ 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);
}
@ -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" }}>

View File

@ -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() {
this.scrollToBottom();
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,48 +240,52 @@ 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' }}>
{this.state.messages.map((message, index) =>
<li style={{listStyleType:"none"}} key={index}>
{message.userNick == this.props.ur_nick ?
<this.messageCard message={message} index={index} cardColor={'#eeeeee'} userConnected={this.state.connected}/>
:
<this.messageCard message={message} index={index} cardColor={'#fafafa'} userConnected={this.state.peer_connected}/>
}
</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 ? (this.state.peer_pub_key ? null : t("Waiting for peer public key...")) : t("Connecting...")}
value={this.state.value}
onChange={e => {
this.setState({ value: e.target.value });
this.value = this.state.value;
}}
sx={{width: 214}}
/>
</Grid>
<Grid item alignItems="stretch" style={{ display: "flex" }}>
<Button sx={{'width':68}} disabled={!this.state.connected || this.state.waitingEcho || this.state.peer_pub_key == null} type="submit" variant="contained" color="primary">
{this.state.waitingEcho ?
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap', minWidth:68, width:68, position:"relative",left:15}}>
<div style={{width:20}}><KeyIcon sx={{width:18}}/></div>
<div style={{width:18}}><CircularProgress size={16} thickness={5}/></div>
</div>
<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 ?
<this.messageCard message={message} index={index} cardColor={'#eeeeee'} userConnected={this.state.connected}/>
:
t("Send")
}
</Button>
<this.messageCard message={message} index={index} cardColor={'#fafafa'} userConnected={this.state.peer_connected}/>
}
</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 ? (this.state.peer_pub_key ? null : t("Waiting for peer public key...")) : t("Connecting...")}
value={this.state.value}
onChange={e => {
this.setState({ value: e.target.value });
this.value = this.state.value;
}}
sx={{width: 232}}
/>
</Grid>
<Grid item alignItems="stretch" style={{ display: "flex" }}>
<Button sx={{'width':68}} disabled={!this.state.connected || this.state.waitingEcho || this.state.peer_pub_key == null} type="submit" variant="contained" color="primary">
{this.state.waitingEcho ?
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap', minWidth:68, width:68, position:"relative",left:15}}>
<div style={{width:20}}><KeyIcon sx={{width:18}}/></div>
<div style={{width:18}}><CircularProgress size={16} thickness={5}/></div>
</div>
:
t("Send")
}
</Button>
</Grid>
</Grid>
</Grid>
</form>
</form>
</div>
<div style={{height:4}}/>
<Grid container spacing={0}>
<AuditPGPDialog
open={this.state.audit}

View File

@ -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>

View File

@ -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>

View File

@ -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;