mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-13 19:06:26 +00:00
Localize encrypted chat
This commit is contained in:
Reckless_Satoshi
parent
508151eae5
commit
185909c50d
@ -22,6 +22,31 @@ 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={()=> navigator.clipboard.writeText(props.value)}>
|
||||
<ContentCopy/>
|
||||
</IconButton>
|
||||
</Tooltip>,
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
type Props = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
@ -66,89 +91,29 @@ const AuditPGPDialog = ({
|
||||
<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>
|
||||
<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!")}/>
|
||||
|
||||
<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>
|
||||
<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!")}/>
|
||||
|
||||
<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>
|
||||
<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!")}/>
|
||||
|
||||
<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>
|
||||
<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}>
|
||||
|
||||
@ -241,102 +241,12 @@ class Chat extends Component {
|
||||
<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}>
|
||||
{/* If message sender is not our nick, gray color, if it is our nick, green color */}
|
||||
{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}/>
|
||||
}
|
||||
{/* // <CardHeader sx={{color: '#333333'}}
|
||||
// avatar={
|
||||
// <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.connected ? "success" : "error"}>
|
||||
// <Avatar className="flippedSmallAvatar"
|
||||
// alt={message.userNick}
|
||||
// src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
|
||||
// />
|
||||
// </Badge>
|
||||
// }
|
||||
// style={{backgroundColor: '#eeeeee'}}
|
||||
// title={
|
||||
// <Tooltip placement="top" enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t(message.validSignature ? "Verified signature by {{nickname}}": "Invalid signature! Not sent by {{nickname}}",{"nickname": message.userNick})}>
|
||||
// <div style={{display:'flex',alignItems:'center', flexWrap:'wrap', position:'relative',left:-5, width:210}}>
|
||||
// <div style={{width:168,display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||
// {message.userNick}
|
||||
// {message.validSignature ?
|
||||
// <CheckIcon sx={{height:16}} color="success"/>
|
||||
// :
|
||||
// <CloseIcon sx={{height:16}} color="error"/>
|
||||
// }
|
||||
// </div>
|
||||
// <div style={{width:20}}>
|
||||
// <IconButton sx={{height:18,width:18}}
|
||||
// onClick={()=>
|
||||
// this.setState(prevState => {
|
||||
// const newShowPGP = [...prevState.showPGP];
|
||||
// newShowPGP[index] = !newShowPGP[index];
|
||||
// return {showPGP: newShowPGP};
|
||||
// })}>
|
||||
// <VisibilityIcon color={this.state.showPGP[index]? "primary":"inherit"} sx={{height:16,width:16,color:this.state.showPGP[index]? "primary":"#333333"}}/>
|
||||
// </IconButton>
|
||||
// </div>
|
||||
// <div style={{width:20}}>
|
||||
// <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
|
||||
// <IconButton sx={{height:18,width:18}}
|
||||
// onClick={()=> navigator.clipboard.writeText(this.state.showPGP[index] ? message.encryptedMessage : message.plainTextMessage)}>
|
||||
// <ContentCopy sx={{height:16,width:16,color:'#333333'}}/>
|
||||
// </IconButton>
|
||||
// </Tooltip>
|
||||
// </div>
|
||||
// </div>
|
||||
// </Tooltip>
|
||||
// }
|
||||
// subheader={this.state.showPGP[index] ? message.encryptedMessage : message.plainTextMessage}
|
||||
// subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444', fontSize: this.state.showPGP[index]? 11 : null }}}
|
||||
// />
|
||||
// :
|
||||
// <CardHeader sx={{color: '#333333'}}
|
||||
// avatar={
|
||||
// <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.peer_connected ? "success" : "error"}>
|
||||
// <Avatar className="flippedSmallAvatar"
|
||||
// alt={message.userNick}
|
||||
// src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
|
||||
// />
|
||||
// </Badge>
|
||||
// }
|
||||
// style={{backgroundColor: '#fafafa'}}
|
||||
// title={
|
||||
// <Tooltip placement="top" enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t(message.validSignature ? "Verified signature by {{nickname}}": "Invalid signature! Not sent by {{nickname}}",{"nickname": message.userNick})}>
|
||||
// <div style={{display:'flex',alignItems:'center', flexWrap:'wrap', position:'relative',left:-5, width:210}}>
|
||||
// <div style={{width:168,display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||
// {message.userNick}
|
||||
// {message.validSignature ?
|
||||
// <CheckIcon sx={{height:16}} color="success"/>
|
||||
// :
|
||||
// <CloseIcon sx={{height:16}} color="error"/>
|
||||
// }
|
||||
// </div>
|
||||
// <div style={{width:20}}>
|
||||
// <IconButton sx={{height:18,width:18}}
|
||||
// onClick={()=>
|
||||
// this.setState(prevState => {
|
||||
// const newShowPGP = [...prevState.showPGP];
|
||||
// newShowPGP[index] = !newShowPGP[index];
|
||||
// return {showPGP: newShowPGP};
|
||||
// })}>
|
||||
// <VisibilityIcon color={this.state.showPGP[index]? "primary":"inherit"} sx={{height:16,width:16,color:this.state.showPGP[index]? "primary":"#333333"}}/>
|
||||
// </IconButton>
|
||||
// </div>
|
||||
// <div style={{width:20}}>
|
||||
// <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
|
||||
// <IconButton sx={{height:18,width:18}}
|
||||
// onClick={()=> navigator.clipboard.writeText(this.state.showPGP[index] ? message.encryptedMessage : message.plainTextMessage)}>
|
||||
// <ContentCopy sx={{height:16,width:16,color:'#333333'}}/>
|
||||
// </IconButton>
|
||||
// </Tooltip>
|
||||
// </div>
|
||||
// </div>
|
||||
// </Tooltip> */}
|
||||
</li>)}
|
||||
</li>)}
|
||||
<div style={{ float:"left", clear: "both" }} ref={(el) => { this.messagesEnd = el; }}></div>
|
||||
</Paper>
|
||||
<form noValidate onSubmit={this.onButtonClicked}>
|
||||
|
||||
@ -259,9 +259,32 @@
|
||||
"Type a message":"Type a message",
|
||||
"Connecting...":"Connecting...",
|
||||
"Send":"Send",
|
||||
"The chat has no memory: if you leave, messages are lost.":"The chat has no memory: if you leave, messages are lost.",
|
||||
"Learn easy PGP encryption.":"Learn easy PGP encryption.",
|
||||
"PGP_guide_url":"https://learn.robosats.com/docs/pgp-encryption/",
|
||||
"Verify your privacy":"Verify your privacy",
|
||||
"Audit PGP":"Audit PGP",
|
||||
"Save full log as a JSON file (messages and credentials)":"Save full log as a JSON file (messages and credentials)",
|
||||
"Export":"Export",
|
||||
"Don't trust, verify":"Don't trust, verify",
|
||||
"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.":"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.",
|
||||
"Learn how to verify":"Learn how to verify",
|
||||
"Your PGP public key. Your peer uses it to encrypt messages only you can read.":"Your PGP public key. Your peer uses it to encrypt messages only you can read.",
|
||||
"Your public key":"Your public key",
|
||||
"Your peer PGP public key. You use it to encrypt messages only he can read and to verify your peer signed the incoming messages.":"Your peer PGP public key. You use it to encrypt messages only he can read.and to verify your peer signed the incoming messages.",
|
||||
"Peer public key":"Peer public key",
|
||||
"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.":"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.",
|
||||
"Your encrypted private key":"Your encrypted private key",
|
||||
"The passphrase to decrypt your private key. Only you know it! Do not share. It is also your robot token.":"The passphrase to decrypt your private key. Only you know it! Do not share. It is also your robot avatar user token.",
|
||||
"Your private key passphrase (keep secure!)":"Your private key passphrase (keep secure!)",
|
||||
"Save credentials as a JSON file":"Save credentials as a JSON file",
|
||||
"Keys":"Keys",
|
||||
"Save messages as a JSON file":"Save messages as a JSON file",
|
||||
"Messages":"Messages",
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
"CONTRACT BOX - TradeBox.js": "The Contract Box that guides users trough the whole trade pipeline",
|
||||
"Contract Box":"Contract Box",
|
||||
|
||||
@ -258,9 +258,25 @@
|
||||
"Type a message": "Escribe un mensaje",
|
||||
"Connecting...": "Conectando...",
|
||||
"Send": "Enviar",
|
||||
"The chat has no memory: if you leave, messages are lost.": "Chat sin memoria: si lo cierras, los mensajes se pierden.",
|
||||
"Learn easy PGP encryption.": "Aprende encriptación PGP.",
|
||||
"PGP_guide_url":"https://learn.robosats.com/docs/pgp-encryption/es",
|
||||
"Verify your privacy":"Verifica tu privacidad",
|
||||
"Audit PGP":"Auditar",
|
||||
"Save full log as a JSON file (messages and credentials)":"Guardar el log completo como JSON (credenciales y mensajes)",
|
||||
"Export":"Exporta",
|
||||
"Don't trust, verify":"No confíes, verifica",
|
||||
"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.":"Tu comunicación se encripta de punta-a-punta con OpenPGP. Puedes verificar la privacida de este chat con cualquier herramienta de tercero basada en el estandar PGP.",
|
||||
"Learn how to verify":"Aprende a verificar",
|
||||
"Your PGP public key. Your peer uses it to encrypt messages only you can read.":"Esta es tu llave pública PGP. Tu contraparte la usa para encriptar mensajes que sólo tú puedes leer.",
|
||||
"Your public key":"Tu llave pública",
|
||||
"Your peer PGP public key. You use it to encrypt messages only he can read and to verify your peer signed the incoming messages.":"La llave pública PGP de tu contraparte. La usas para encriptar mensajes que solo él puede leer y verificar que es él quíen firmó los mensajes que recibes.",
|
||||
"Peer public key":"Llave pública de tu contraparte",
|
||||
"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.":"Tu llave privada PGP encriptada. La usas para desencriptar los mensajes que tu contraparte te envia. También la usas para firmar los mensajes que le envias.",
|
||||
"Your encrypted private key":"Tu llave privada encriptada",
|
||||
"The passphrase to decrypt your private key. Only you know it! Do not share. It is also your robot token.":"La contraseña para desencriptar tu llave privada. ¡Solo tú la sabes! Mantenla en secreto. También es el token de tu robot.",
|
||||
"Your private key passphrase (keep secure!)":"La contraseña de tu llave privada ¡Mantener segura!",
|
||||
"Save credentials as a JSON file":"Guardar credenciales como achivo JSON",
|
||||
"Keys":"Llaves",
|
||||
"Save messages as a JSON file":"Guardar mensajes como archivo JSON",
|
||||
"Messages":"Mensajes",
|
||||
|
||||
"CONTRACT BOX - TradeBox.js": "The Contract Box that guides users trough the whole trade pipeline",
|
||||
"Contract Box": "Contrato",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user