2019-12-16 20:16:22 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
|
|
|
|
|
|
|
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-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';
|
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
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2020-01-03 15:40:20 +03:00
|
|
|
return <div className="mx_UserInfo">
|
|
|
|
<div className="mx_UserInfo_container">
|
2019-12-20 23:30:47 +03:00
|
|
|
{ this.renderStatus() }
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
|
|
|
renderStatus() {
|
2019-12-16 20:16:22 +03:00
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
|
|
|
const Spinner = sdk.getComponent('elements.Spinner');
|
|
|
|
const {request} = this.props;
|
|
|
|
|
|
|
|
if (request.requested) {
|
|
|
|
return (<p>Waiting for {request.otherUserId} to accept ... <Spinner /></p>);
|
|
|
|
} else if (request.ready) {
|
2020-01-17 18:31:38 +03:00
|
|
|
const verifyButton = <AccessibleButton kind="primary" onClick={this._startSAS}>
|
|
|
|
Verify by emoji
|
|
|
|
</AccessibleButton>;
|
|
|
|
return (<p>{request.otherUserId} is ready, start {verifyButton}</p>);
|
2019-12-16 20:16:22 +03:00
|
|
|
} else if (request.started) {
|
2019-12-20 23:30:18 +03:00
|
|
|
if (this.state.sasWaitingForOtherParty) {
|
|
|
|
return <p>Waiting for {request.otherUserId} to confirm ...</p>;
|
|
|
|
} else if (this.state.sasEvent) {
|
2019-12-16 20:16:22 +03:00
|
|
|
const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
|
|
|
|
return (<div>
|
|
|
|
<VerificationShowSas
|
|
|
|
sas={this.state.sasEvent.sas}
|
|
|
|
onCancel={this._onSasMismatchesClick}
|
|
|
|
onDone={this._onSasMatchesClick}
|
|
|
|
/>
|
|
|
|
</div>);
|
|
|
|
} else {
|
|
|
|
return (<p>Setting up SAS verification...</p>);
|
|
|
|
}
|
|
|
|
} else if (request.done) {
|
|
|
|
return <p>verified {request.otherUserId}!!</p>;
|
2019-12-19 19:28:44 +03:00
|
|
|
} else if (request.cancelled) {
|
|
|
|
return <p>cancelled by {request.cancellingUserId}!</p>;
|
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 = () => {
|
2019-12-20 23:30:18 +03:00
|
|
|
this.setState({sasWaitingForOtherParty: true});
|
2019-12-16 20:16:22 +03:00
|
|
|
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;
|
2019-12-16 20:16:22 +03:00
|
|
|
this.forceUpdate();
|
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.props.request.on("change", this._onRequestChange);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.props.request.off("change", this._onRequestChange);
|
|
|
|
}
|
|
|
|
}
|