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

// 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';

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>

          <Grid item align="center" xs={12}>
            <Tooltip placement="top" enterTouchDelay={0} enterDelay={0} title={t("Your PGP public key. Your peer uses it to encrypt messages only you can read.")}>
              <TextField
                sx={{width:"100%", maxWidth:"550px"}}
                disabled
                label={<b>{t("Your public key")}</b>}
                value={own_pub_key}
                variant='filled'
                size='small'
                InputProps={{
                  endAdornment:
                    <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                      <IconButton onClick={()=> navigator.clipboard.writeText(own_pub_key)}>
                        <ContentCopy/>
                      </IconButton>
                    </Tooltip>,
                  }}
                />
            </Tooltip>
          </Grid>

          <Grid item align="center" xs={12}>
            <Tooltip placement="top" enterTouchDelay={0} enterDelay={0} title={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.")}>
              <TextField
                sx={{width:"100%", maxWidth:"550px"}}
                disabled
                label={<b>{t("Peer public key")}</b>}
                value={peer_pub_key}
                variant='filled'
                size='small'
                InputProps={{
                  endAdornment:
                    <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                      <IconButton onClick={()=> navigator.clipboard.writeText(peer_pub_key)}>
                        <ContentCopy/>
                      </IconButton>
                    </Tooltip>,
                  }}
                />
            </Tooltip>
          </Grid>

          <Grid item align="center" xs={12}>
            <Tooltip placement="top" enterTouchDelay={0} enterDelay={0} title={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.")}>
              <TextField
                sx={{width:"100%", maxWidth:"550px"}}
                disabled
                label={<b>{t("Your encrypted private key")}</b>}
                value={own_enc_priv_key}
                variant='filled'
                size='small'
                InputProps={{
                  endAdornment:
                    <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                      <IconButton onClick={()=> navigator.clipboard.writeText(own_enc_priv_key)}>
                        <ContentCopy/>
                      </IconButton>
                    </Tooltip>,
                  }}
                />
            </Tooltip>
          </Grid>

          <Grid item align="center" xs={12}>
            <Tooltip placement="top" enterTouchDelay={0} enterDelay={0} title={t("The passphrase to decrypt your private key. Only you know it! Do not share. It is also your robot avatar user token.")}>
              <TextField
                sx={{width:"100%", maxWidth:"550px"}}
                disabled
                label={<b>{t("Your private key passphrase (keep secure!)")}</b>}
                value={passphrase}
                variant='filled'
                size='small'
                InputProps={{
                  endAdornment:
                    <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                      <IconButton onClick={()=> navigator.clipboard.writeText(passphrase)}>
                        <ContentCopy/>
                      </IconButton>
                    </Tooltip>,
                  }}
                />
            </Tooltip>
          </Grid>

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