Add show signature verification on chat messages

This commit is contained in:
Reckless_Satoshi 2022-05-24 05:52:33 -07:00
parent af001d31d2
commit d492475eec
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 22 additions and 9 deletions

View File

@ -158,7 +158,7 @@ const AuditPGPDialog = ({
<div style={{width:26,height:18}}> <div style={{width:26,height:18}}>
<ExportIcon sx={{width:18,height:18}}/> <ExportIcon sx={{width:18,height:18}}/>
</div> </div>
{t("Export Keys")} {t("Keys")}
<div style={{width:26,height:20}}> <div style={{width:26,height:20}}>
<KeyIcon sx={{width:20,height:20}}/> <KeyIcon sx={{width:20,height:20}}/>
</div> </div>
@ -177,7 +177,7 @@ const AuditPGPDialog = ({
<div style={{width:28,height:20}}> <div style={{width:28,height:20}}>
<ExportIcon sx={{width:18,height:18}}/> <ExportIcon sx={{width:18,height:18}}/>
</div> </div>
{t("Export Chat")} {t("Messages")}
<div style={{width:26,height:20}}> <div style={{width:26,height:20}}>
<ForumIcon sx={{width:20,height:20}}/> <ForumIcon sx={{width:20,height:20}}/>
</div> </div>

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import {Button, Badge, ToolTip, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, Typography} from "@mui/material"; import {Button, Badge, Tooltip, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, Typography} from "@mui/material";
import ReconnectingWebSocket from 'reconnecting-websocket'; import ReconnectingWebSocket from 'reconnecting-websocket';
import { encryptMessage , decryptMessage} from "../utils/pgp"; import { encryptMessage , decryptMessage} from "../utils/pgp";
import { getCookie } from "../utils/cookies"; import { getCookie } from "../utils/cookies";
@ -193,7 +193,7 @@ class Chat extends Component {
</Badge> </Badge>
} }
style={{backgroundColor: '#eeeeee'}} style={{backgroundColor: '#eeeeee'}}
title={message.userNick} title={<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{message.userNick}{message.validSignature ? <CheckIcon sx={{height:16, display: "inline-block"}} color="success"/> : <CloseIcon sx={{height:16, display:"inline-block"}} color="error"/> }</div>}
subheader={this.state.audit ? message.encryptedMessage : message.plainTextMessage} subheader={this.state.audit ? message.encryptedMessage : message.plainTextMessage}
subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}} subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
/> />
@ -208,7 +208,17 @@ class Chat extends Component {
</Badge> </Badge>
} }
style={{backgroundColor: '#fafafa'}} style={{backgroundColor: '#fafafa'}}
title={message.userNick} title={
<Tooltip placement="top" enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t(message.validSignature ? "Verified signature by {{sender}}": "Invalid signature",{"sender": message.userNick})}>
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
{message.userNick}
{message.validSignature ?
<CheckIcon sx={{height:16, display: "inline-block"}} color="success"/>
:
<CloseIcon sx={{height:16, display:"inline-block"}} color="error"/>
}
</div>
</Tooltip>}
subheader={this.state.audit ? message.encryptedMessage : message.plainTextMessage} subheader={this.state.audit ? message.encryptedMessage : message.plainTextMessage}
subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}} subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
/>} />}
@ -250,14 +260,17 @@ class Chat extends Component {
passphrase={this.state.token} passphrase={this.state.token}
onClickBack={() => this.setState({audit:false})} onClickBack={() => this.setState({audit:false})}
/> />
<Grid item xs={6}> <Grid item xs={6}>
<Tooltip placement="bottom" enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t("Verify your privacy")}>
<Button size="small" color="primary" variant="outlined" onClick={()=>this.setState({audit:!this.state.audit})}><KeyIcon/>{t("Audit PGP")} </Button> <Button size="small" color="primary" variant="outlined" onClick={()=>this.setState({audit:!this.state.audit})}><KeyIcon/>{t("Audit PGP")} </Button>
</Tooltip>
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={6}>
{/* <ToolTip placement="top" enterTouchDelay={0} enterDelay={1000} enterNextDelay={2000} title={t("Save local messages and credentials as a JSON file")}> */} <Tooltip placement="bottom" enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t("Save messages and credentials as a JSON file")}>
<Button size="small" color="primary" variant="outlined" onClick={()=>saveAsJson('chat_'+this.props.orderId+'.json', this.createJsonFile())}><div style={{width:28,height:20}}><ExportIcon sx={{width:20,height:20}}/></div> {t("Export All")} </Button> <Button size="small" color="primary" variant="outlined" onClick={()=>saveAsJson('chat_'+this.props.orderId+'.json', this.createJsonFile())}><div style={{width:28,height:20}}><ExportIcon sx={{width:20,height:20}}/></div> {t("Export")} </Button>
{/* </ToolTip> */} </Tooltip>
</Grid> </Grid>
</Grid> </Grid>