robosats/frontend/src/components/Dialogs/AuditPGP.tsx

import React from "react";
import { useTranslation } from "react-i18next";
import {
  Dialog,
  DialogTitle,
  Tooltip, 
  IconButton,
  TextField,
  DialogActions,  
  DialogContent,
  DialogContentText,
  Button, 
  Grid,
  Link,
} from "@mui/material"

import { saveAsJson } from "../../utils/saveFile";
import { copyToClipboard } from "../../utils/clipboard";

// Icons
import KeyIcon from '@mui/icons-material/Key';
import ContentCopy from "@mui/icons-material/ContentCopy";
import ForumIcon from '@mui/icons-material/Forum';
import { ExportIcon, NewTabIcon } from '../Icons';

function CredentialTextfield(props){
  return(
    <Grid item align="center" xs={12}>
      <Tooltip placement="top" enterTouchDelay={200} enterDelay={200} title={props.tooltipTitle}>
        <TextField
          sx={{width:"100%", maxWidth:"550px"}}
          disabled
          label={<b>{props.label}</b>}
          value={props.value}
          variant='filled'
          size='small'
          InputProps={{
            endAdornment:
              <Tooltip disableHoverListener enterTouchDelay={0} title={props.copiedTitle}>
                <IconButton onClick={()=> copyToClipboard(props.value)}>
                  <ContentCopy/>
                </IconButton>
              </Tooltip>,
            }}
          />
      </Tooltip>
    </Grid>
  )
}

type Props = {
  open: boolean;
  onClose: () => void;
  orderId: number;
  messages: array;
  own_pub_key: string; 
  own_enc_priv_key: string;
  peer_pub_key: string;
  passphrase: string;
  onClickBack: () => void;
}

const AuditPGPDialog = ({
  open, 
  onClose,
  orderId,
  messages,
  own_pub_key,
  own_enc_priv_key,
  peer_pub_key,
  passphrase,
  onClickBack,
}: Props): JSX.Element => {
  const { t } = useTranslation();

  return (
    <Dialog
      open={open}
      onClose={onClose}
      >
      <DialogTitle >
        {t("Don't trust, verify")}
      </DialogTitle>

      <DialogContent>
        <DialogContentText>
          {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.")}
        </DialogContentText>
        <Grid container spacing={1} align="center">

          <Grid item align="center" xs={12}>
            <Button component={Link} target="_blank" href="https://learn.robosats.com/docs/pgp-encryption">{t("Learn how to verify")} <NewTabIcon sx={{width:16,height:16}}/></Button>
          </Grid>

          <CredentialTextfield 
            tooltipTitle={t("Your PGP public key. Your peer uses it to encrypt messages only you can read.")}
            label={t("Your public key")}
            value={own_pub_key}
            copiedTitle={t("Copied!")}/>

          <CredentialTextfield 
            tooltipTitle={t("Your peer PGP public key. You use it to encrypt messages only he can read and to verify your peer signed the incoming messages.")}
            label={t("Peer public key")}
            value={peer_pub_key}
            copiedTitle={t("Copied!")}/>

          <CredentialTextfield 
            tooltipTitle={t("Your encrypted private key. You use it to decrypt the messages that your peer encrypted for you. You also use it to sign the messages you send.")}
            label={t("Your encrypted private key")}
            value={own_enc_priv_key}
            copiedTitle={t("Copied!")}/>

          <CredentialTextfield 
            tooltipTitle={t("The passphrase to decrypt your private key. Only you know it! Do not share. It is also your robot token.")}
            label={t("Your private key passphrase (keep secure!)")}
            value={passphrase}
            copiedTitle={t("Copied!")}/>

            <br/>
            <Grid item xs={6}>
              <Tooltip placement="top" enterTouchDelay={0} enterDelay={1000} enterNextDelay={2000} title={t("Save credentials as a JSON file")}>
                <Button 
                  size="small" 
                  color="primary" 
                  variant="contained" 
                  onClick={()=>saveAsJson(
                      'keys_'+orderId+'.json', 
                      {"own_public_key": own_pub_key,
                        "peer_public_key":peer_pub_key,
                        "encrypted_private_key":own_enc_priv_key,
                        "passphrase":passphrase
                      })}>
                  <div style={{width:26,height:18}}>
                    <ExportIcon sx={{width:18,height:18}}/>
                  </div>
                  {t("Keys")}
                  <div style={{width:26,height:20}}>
                    <KeyIcon sx={{width:20,height:20}}/>
                  </div>
                </Button>
              </Tooltip>
            </Grid>
            
            <Grid item xs={6}>
              <Tooltip placement="top" enterTouchDelay={0} enterDelay={1000} enterNextDelay={2000} title={t("Save messages as a JSON file")}>
                <Button 
                  size="small" 
                  color="primary" 
                  variant="contained" 
                  onClick={()=>saveAsJson(
                    'messages_'+orderId+'.json',
                    messages)}>
                  <div style={{width:28,height:20}}>
                    <ExportIcon sx={{width:18,height:18}}/>
                  </div>
                  {t("Messages")}
                  <div style={{width:26,height:20}}>
                  <ForumIcon sx={{width:20,height:20}}/>
                  </div>
                </Button>
              </Tooltip>

          </Grid>

        </Grid>
      </DialogContent>

      <DialogActions>
        <Button onClick={onClickBack} autoFocus>{t("Go back")}</Button>
      </DialogActions>

    </Dialog>
  )
}

export default AuditPGPDialog;