imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update QR code rendering to support VerificationRequests

Browse source 
Makes for building the QR code easier and more common.
This commit is contained in:
Travis Ralston 2020-01-30 16:55:43 +00:00
parent 8a09cfbfbd
commit 724cff6a2e
2 changed files with 89 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/views/right_panel/VerificationPanel.js
View file

@ -20,7 +20,6 @@ import PropTypes from "prop-types";
import * as sdk from '../../../index';
import {verificationMethods} from 'matrix-js-sdk/src/crypto';
import VerificationQRCode from "../elements/crypto/VerificationQRCode";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import {_t} from "../../../languageHandler";
import E2EIcon from "../rooms/E2EIcon";
import {
@ -29,7 +28,7 @@ import {
PHASE_READY,
PHASE_DONE,
PHASE_STARTED,
PHASE_CANCELLED,
PHASE_CANCELLED, VerificationRequest,
} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
import Spinner from "../elements/Spinner";
@ -50,12 +49,24 @@ export default class VerificationPanel extends React.PureComponent {
constructor(props) {
super(props);
this.state = {};
this.state = {
qrCodeProps: null, // generated by the VerificationQRCode component itself
};
this._hasVerifier = false;
this._generateQRCodeProps(props.request);
}
async _generateQRCodeProps(verificationRequest: VerificationRequest) {
try {
this.setState({qrCodeProps: await VerificationQRCode.getPropsForRequest(verificationRequest)});
} catch (e) {
console.error(e);
// Do nothing - we won't render a QR code.
}
}
renderQRPhase(pending) {
const {member, request} = this.props;
const {member} = this.props;
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
let button;
@ -69,10 +80,7 @@ export default class VerificationPanel extends React.PureComponent {
);
}
const cli = MatrixClientPeg.get();
const crossSigningInfo = cli.getStoredCrossSigningForUser(request.otherUserId);
if (!crossSigningInfo || !request.requestEvent || !request.requestEvent.getId()) {
// for whatever reason we can't generate a QR code, offer only SAS Verification
if (!this.state.qrCodeProps) {
return <div className="mx_UserInfo_container">
<h3>Verify by emoji</h3>
<p>{_t("Verify by comparing unique emoji.")}</p>
@ -81,12 +89,6 @@ export default class VerificationPanel extends React.PureComponent {
</div>;
}
const myKeyId = cli.getCrossSigningId();
const qrCodeKeys = [
[cli.getDeviceId(), cli.getDeviceEd25519Key()],
[myKeyId, myKeyId],
];
// TODO: add way to open camera to scan a QR code
return <React.Fragment>
<div className="mx_UserInfo_container">
@ -96,13 +98,7 @@ export default class VerificationPanel extends React.PureComponent {
})}</p>
<div className="mx_VerificationPanel_qrCode">
<VerificationQRCode
keyholderUserId={MatrixClientPeg.get().getUserId()}
requestEventId={request.requestEvent.getId()}
otherUserKey={crossSigningInfo.getId("master")}
secret={request.encodedSharedSecret}
keys={qrCodeKeys}
/>
<VerificationQRCode {...this.state.qrCodeProps} />
</div>
</div>