diff --git a/frontend/src/components/Dialogs/AuditPGP.tsx b/frontend/src/components/Dialogs/AuditPGP.tsx index 6c7a3448..38e82bfe 100644 --- a/frontend/src/components/Dialogs/AuditPGP.tsx +++ b/frontend/src/components/Dialogs/AuditPGP.tsx @@ -14,7 +14,7 @@ import { Link, } from "@mui/material" -import { saveAsJson, saveAsTxt } from "../../utils/saveFile"; +import { saveAsJson } from "../../utils/saveFile"; // Icons import KeyIcon from '@mui/icons-material/Key'; @@ -53,120 +53,130 @@ const AuditPGPDialog = ({ onClose={onClose} > - {t("This chat is PGP Encrypted")} + {t("Do not trust, verify!")} - {t("Your communication is end-to-end encrypted with OpenPGP. You can verify the privacy of this chat using any third party tool based on the OpenPGP standard.")} + {t("Your communication is end-to-end encrypted with OpenPGP. You can verify the privacy of this chat using any tool based on the OpenPGP standard.")} - + - {t("Your public key")}} - value={own_pub_key} - variant='filled' - size='small' - InputProps={{ - endAdornment: - - navigator.clipboard.writeText(own_pub_key)}> - - - , - }} - /> + + {t("Your public key")}} + value={own_pub_key} + variant='filled' + size='small' + InputProps={{ + endAdornment: + + navigator.clipboard.writeText(own_pub_key)}> + + + , + }} + /> + - {t("Peer public key")}} - value={peer_pub_key} - variant='filled' - size='small' - InputProps={{ - endAdornment: - - navigator.clipboard.writeText(peer_pub_key)}> - - - , - }} - /> + + {t("Peer public key")}} + value={peer_pub_key} + variant='filled' + size='small' + InputProps={{ + endAdornment: + + navigator.clipboard.writeText(peer_pub_key)}> + + + , + }} + /> + - {t("Your encrypted private key")}} - value={own_enc_priv_key} - variant='filled' - size='small' - InputProps={{ - endAdornment: - - navigator.clipboard.writeText(own_enc_priv_key)}> - - - , - }} - /> + + {t("Your encrypted private key")}} + value={own_enc_priv_key} + variant='filled' + size='small' + InputProps={{ + endAdornment: + + navigator.clipboard.writeText(own_enc_priv_key)}> + + + , + }} + /> + - {t("Your private key passphrase (keep secure!)")}} - value={passphrase} - variant='filled' - size='small' - InputProps={{ - endAdornment: - - navigator.clipboard.writeText(passphrase)}> - - - , - }} - /> + + {t("Your private key passphrase (keep secure!)")}} + value={passphrase} + variant='filled' + size='small' + InputProps={{ + endAdornment: + + navigator.clipboard.writeText(passphrase)}> + + + , + }} + /> +
- + + + - {/* */} + - {/* */} + diff --git a/frontend/src/components/EncryptedChat.js b/frontend/src/components/EncryptedChat.js index 1c139c44..91389ab9 100644 --- a/frontend/src/components/EncryptedChat.js +++ b/frontend/src/components/EncryptedChat.js @@ -1,16 +1,16 @@ import React, { Component } from 'react'; import { withTranslation } from "react-i18next"; -import {Button, Badge, Tooltip, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, Typography} from "@mui/material"; +import {Button, IconButton, Badge, Tooltip, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, Typography} from "@mui/material"; import ReconnectingWebSocket from 'reconnecting-websocket'; import { encryptMessage , decryptMessage} from "../utils/pgp"; import { getCookie } from "../utils/cookies"; -import { saveAsJson, saveAsTxt } from "../utils/saveFile"; +import { saveAsJson } from "../utils/saveFile"; import { AuditPGPDialog } from "./Dialogs" // Icons import CheckIcon from '@mui/icons-material/Check'; import CloseIcon from '@mui/icons-material/Close'; -import FileDownloadIcon from '@mui/icons-material/FileDownload'; +import ContentCopy from "@mui/icons-material/ContentCopy"; import VisibilityIcon from '@mui/icons-material/Visibility'; import KeyIcon from '@mui/icons-material/Key'; import { ExportIcon } from './Icons'; @@ -193,7 +193,24 @@ class Chat extends Component { } style={{backgroundColor: '#eeeeee'}} - title={
{message.userNick}{message.validSignature ? : }
} + title={ + +
+ {message.userNick} + {message.validSignature ? + + : + + } +
+ +
+
+ +
+
+
+ } subheader={this.state.audit ? message.encryptedMessage : message.plainTextMessage} subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}} /> @@ -209,15 +226,21 @@ class Chat extends Component { } style={{backgroundColor: '#fafafa'}} title={ - -
- {message.userNick} - {message.validSignature ? - - : - - } -
+ +
+ {message.userNick} + {message.validSignature ? + + : + + } +
+ +
+
+ +
+
} subheader={this.state.audit ? message.encryptedMessage : message.plainTextMessage} subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}} @@ -268,7 +291,7 @@ class Chat extends Component {
- + diff --git a/frontend/src/utils/saveFile.js b/frontend/src/utils/saveFile.js index 02423f37..40f76763 100644 --- a/frontend/src/utils/saveFile.js +++ b/frontend/src/utils/saveFile.js @@ -3,24 +3,6 @@ * @param {filename} data -- object to save */ -export const saveAsTxt = (filename, dataObjToWrite) => { - const blob = new Blob([JSON.stringify(dataObjToWrite, null, 2)], { type: "text/plain;charset=utf8" }); - const link = document.createElement("a"); - - link.download = filename; - link.href = window.URL.createObjectURL(blob); - link.dataset.downloadurl = ["text/plain;charset=utf8", link.download, link.href].join(":"); - - const evt = new MouseEvent("click", { - view: window, - bubbles: true, - cancelable: true, - }); - - link.dispatchEvent(evt); - link.remove() -}; - export const saveAsJson = (filename, dataObjToWrite) => { const blob = new Blob([JSON.stringify(dataObjToWrite, null, 2)], { type: "text/json" }); const link = document.createElement("a");