2019-12-16 20:16:22 +03:00
|
|
|
/*
|
2020-01-24 19:16:46 +03:00
|
|
|
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
2019-12-16 20:16:22 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
2020-01-24 19:16:46 +03:00
|
|
|
|
2020-01-17 17:50:27 +03:00
|
|
|
import * as sdk from '../../../index';
|
2020-01-16 23:23:32 +03:00
|
|
|
import {verificationMethods} from 'matrix-js-sdk/src/crypto';
|
2020-01-18 05:53:33 +03:00
|
|
|
import VerificationQRCode from "../elements/crypto/VerificationQRCode";
|
|
|
|
import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
|
|
|
|
import {MatrixClientPeg} from "../../../MatrixClientPeg";
|
2020-01-24 19:16:46 +03:00
|
|
|
import {_t} from "../../../languageHandler";
|
|
|
|
import E2EIcon from "../rooms/E2EIcon";
|
2019-12-16 20:16:22 +03:00
|
|
|
|
|
|
|
export default class VerificationPanel extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {};
|
2019-12-18 20:26:54 +03:00
|
|
|
this._hasVerifier = !!props.request.verifier;
|
2019-12-16 20:16:22 +03:00
|
|
|
}
|
|
|
|
|
2020-01-24 19:16:46 +03:00
|
|
|
renderQRPhase() {
|
|
|
|
const {member} = this.props;
|
|
|
|
// TODO change the button into a spinner when on click
|
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
|
|
|
return <React.Fragment>
|
2020-01-03 15:40:20 +03:00
|
|
|
<div className="mx_UserInfo_container">
|
2020-01-24 19:16:46 +03:00
|
|
|
<h3>Verify by scanning</h3>
|
|
|
|
<p>{_t("Ask %(displayName)s to scan your code, or <a>open your camera</a> to scan theirs:", {
|
|
|
|
displayName: member.displayName || member.name || member.userId,
|
|
|
|
}, {
|
|
|
|
a: t => <a>{ t }</a>,
|
|
|
|
})}</p>
|
|
|
|
<div>QR Code</div>
|
2019-12-20 23:30:47 +03:00
|
|
|
</div>
|
2020-01-24 19:16:46 +03:00
|
|
|
|
|
|
|
<div className="mx_UserInfo_container">
|
|
|
|
<h3>Verify by emoji</h3>
|
|
|
|
<p>{_t("If you can't scan the code above, verify by comparing unique emoji.")}</p>
|
|
|
|
<AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
|
|
|
|
{_t("Verify by emoji")}
|
|
|
|
</AccessibleButton>
|
|
|
|
</div>
|
|
|
|
</React.Fragment>;
|
2019-12-20 23:30:47 +03:00
|
|
|
}
|
|
|
|
|
2020-01-24 19:16:46 +03:00
|
|
|
renderVerifiedPhase() {
|
|
|
|
const {member} = this.props;
|
|
|
|
|
2019-12-16 20:16:22 +03:00
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
2020-01-24 19:16:46 +03:00
|
|
|
return (
|
|
|
|
<div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
|
|
|
|
<h3>Verified</h3>
|
|
|
|
<p>{_t("You've successfully verified %(displayName)s!", {
|
|
|
|
displayName: member.displayName || member.name || member.userId,
|
|
|
|
})}</p>
|
|
|
|
<E2EIcon isUser={true} status="verified" size={128} />
|
|
|
|
<p>Verify all users in a room to ensure it's secure.</p>
|
|
|
|
<AccessibleButton kind="primary" className="mx_UserInfo_verify" onClick={this._startSAS}>
|
|
|
|
{_t("Got it")}
|
|
|
|
</AccessibleButton>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const {member, request} = this.props;
|
|
|
|
|
|
|
|
const displayName = member.displayName || member.name || member.userId;
|
2019-12-16 20:16:22 +03:00
|
|
|
|
2020-01-24 19:16:46 +03:00
|
|
|
if (request.ready) {
|
|
|
|
return this.renderQRPhase();
|
2019-12-16 20:16:22 +03:00
|
|
|
} else if (request.started) {
|
2020-01-24 19:16:46 +03:00
|
|
|
if (this.state.sasEvent) {
|
2019-12-16 20:16:22 +03:00
|
|
|
const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
|
2020-01-24 19:16:46 +03:00
|
|
|
// TODO implement "mismatch" vs "cancelled"
|
|
|
|
return <div className="mx_UserInfo_container">
|
|
|
|
<h3>Compare emoji</h3>
|
2019-12-16 20:16:22 +03:00
|
|
|
<VerificationShowSas
|
2020-01-24 19:16:46 +03:00
|
|
|
displayName={displayName}
|
2019-12-16 20:16:22 +03:00
|
|
|
sas={this.state.sasEvent.sas}
|
|
|
|
onCancel={this._onSasMismatchesClick}
|
|
|
|
onDone={this._onSasMatchesClick}
|
|
|
|
/>
|
2020-01-24 19:16:46 +03:00
|
|
|
</div>;
|
2019-12-16 20:16:22 +03:00
|
|
|
} else {
|
|
|
|
return (<p>Setting up SAS verification...</p>);
|
|
|
|
}
|
|
|
|
} else if (request.done) {
|
2020-01-24 19:16:46 +03:00
|
|
|
return this.renderVerifiedPhase();
|
2019-12-19 19:28:44 +03:00
|
|
|
} else if (request.cancelled) {
|
2020-01-24 19:16:46 +03:00
|
|
|
// TODO check if this matches target
|
|
|
|
// TODO should this be a MODAL?
|
2019-12-19 19:28:44 +03:00
|
|
|
return <p>cancelled by {request.cancellingUserId}!</p>;
|
2019-12-16 20:16:22 +03:00
|
|
|
}
|
2020-01-24 19:16:46 +03:00
|
|
|
return null;
|
2019-12-16 20:16:22 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
_startSAS = async () => {
|
|
|
|
const verifier = this.props.request.beginKeyVerification(verificationMethods.SAS);
|
|
|
|
try {
|
2019-12-18 20:26:54 +03:00
|
|
|
await verifier.verify();
|
2019-12-19 19:08:53 +03:00
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
2019-12-16 20:16:22 +03:00
|
|
|
} finally {
|
|
|
|
this.setState({sasEvent: null});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
_onSasMatchesClick = () => {
|
|
|
|
this.state.sasEvent.confirm();
|
|
|
|
};
|
|
|
|
|
|
|
|
_onSasMismatchesClick = () => {
|
|
|
|
this.state.sasEvent.cancel();
|
|
|
|
};
|
|
|
|
|
|
|
|
_onVerifierShowSas = (sasEvent) => {
|
|
|
|
this.setState({sasEvent});
|
|
|
|
};
|
|
|
|
|
2019-12-19 19:28:23 +03:00
|
|
|
_onRequestChange = async () => {
|
2019-12-18 20:26:54 +03:00
|
|
|
const {request} = this.props;
|
|
|
|
if (!this._hasVerifier && !!request.verifier) {
|
|
|
|
request.verifier.on('show_sas', this._onVerifierShowSas);
|
|
|
|
try {
|
2019-12-19 19:28:23 +03:00
|
|
|
// on the requester side, this is also awaited in _startSAS,
|
|
|
|
// but that's ok as verify should return the same promise.
|
|
|
|
await request.verifier.verify();
|
2019-12-18 20:26:54 +03:00
|
|
|
} catch (err) {
|
|
|
|
console.error("error verify", err);
|
|
|
|
}
|
|
|
|
} else if (this._hasVerifier && !request.verifier) {
|
|
|
|
request.verifier.removeListener('show_sas', this._onVerifierShowSas);
|
|
|
|
}
|
|
|
|
this._hasVerifier = !!request.verifier;
|
2020-01-24 19:16:46 +03:00
|
|
|
this.forceUpdate(); // TODO fix this
|
2019-12-16 20:16:22 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.props.request.on("change", this._onRequestChange);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.props.request.off("change", this._onRequestChange);
|
|
|
|
}
|
|
|
|
}
|