2017-05-17 18:40:48 +03:00
|
|
|
/*
|
|
|
|
Copyright 2016 OpenMarket Ltd
|
|
|
|
Copyright 2017 Vector Creations Ltd
|
2019-01-15 21:08:13 +03:00
|
|
|
Copyright 2019 New Vector Ltd
|
2019-08-14 15:58:27 +03:00
|
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
2017-05-17 18:40:48 +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';
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2017-05-17 18:40:48 +03:00
|
|
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
|
|
|
import sdk from '../../../index';
|
2017-05-22 14:01:09 +03:00
|
|
|
import * as FormattingUtils from '../../../utils/FormattingUtils';
|
2017-05-30 17:09:57 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2019-01-15 21:08:13 +03:00
|
|
|
import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
|
2017-05-17 18:40:48 +03:00
|
|
|
|
2019-01-15 21:08:13 +03:00
|
|
|
const MODE_LEGACY = 'legacy';
|
|
|
|
const MODE_SAS = 'sas';
|
|
|
|
|
|
|
|
const PHASE_START = 0;
|
|
|
|
const PHASE_WAIT_FOR_PARTNER_TO_ACCEPT = 1;
|
|
|
|
const PHASE_SHOW_SAS = 2;
|
|
|
|
const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 3;
|
|
|
|
const PHASE_VERIFIED = 4;
|
|
|
|
const PHASE_CANCELLED = 5;
|
|
|
|
|
|
|
|
export default class DeviceVerifyDialog extends React.Component {
|
|
|
|
static propTypes = {
|
|
|
|
userId: PropTypes.string.isRequired,
|
|
|
|
device: PropTypes.object.isRequired,
|
|
|
|
onFinished: PropTypes.func.isRequired,
|
|
|
|
};
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this._verifier = null;
|
|
|
|
this._showSasEvent = null;
|
|
|
|
this.state = {
|
|
|
|
phase: PHASE_START,
|
2019-02-08 19:58:09 +03:00
|
|
|
mode: MODE_SAS,
|
2019-01-18 19:56:49 +03:00
|
|
|
sasVerified: false,
|
2019-01-15 21:08:13 +03:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
if (this._verifier) {
|
|
|
|
this._verifier.removeListener('show_sas', this._onVerifierShowSas);
|
|
|
|
this._verifier.cancel('User cancel');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_onSwitchToLegacyClick = () => {
|
2019-02-11 15:08:10 +03:00
|
|
|
if (this._verifier) {
|
|
|
|
this._verifier.removeListener('show_sas', this._onVerifierShowSas);
|
|
|
|
this._verifier.cancel('User cancel');
|
|
|
|
this._verifier = null;
|
|
|
|
}
|
2019-01-15 21:08:13 +03:00
|
|
|
this.setState({mode: MODE_LEGACY});
|
|
|
|
}
|
|
|
|
|
|
|
|
_onSwitchToSasClick = () => {
|
|
|
|
this.setState({mode: MODE_SAS});
|
|
|
|
}
|
|
|
|
|
|
|
|
_onCancelClick = () => {
|
|
|
|
this.props.onFinished(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
_onLegacyFinished = (confirm) => {
|
2017-05-17 18:40:48 +03:00
|
|
|
if (confirm) {
|
|
|
|
MatrixClientPeg.get().setDeviceVerified(
|
2019-01-15 21:08:13 +03:00
|
|
|
this.props.userId, this.props.device.deviceId, true,
|
2017-05-17 18:40:48 +03:00
|
|
|
);
|
|
|
|
}
|
2019-01-15 21:08:13 +03:00
|
|
|
this.props.onFinished(confirm);
|
|
|
|
}
|
|
|
|
|
|
|
|
_onSasRequestClick = () => {
|
|
|
|
this.setState({
|
|
|
|
phase: PHASE_WAIT_FOR_PARTNER_TO_ACCEPT,
|
|
|
|
});
|
|
|
|
this._verifier = MatrixClientPeg.get().beginKeyVerification(
|
|
|
|
verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
|
|
|
|
);
|
|
|
|
this._verifier.on('show_sas', this._onVerifierShowSas);
|
|
|
|
this._verifier.verify().then(() => {
|
|
|
|
this.setState({phase: PHASE_VERIFIED});
|
|
|
|
this._verifier.removeListener('show_sas', this._onVerifierShowSas);
|
|
|
|
this._verifier = null;
|
|
|
|
}).catch((e) => {
|
|
|
|
console.log("Verification failed", e);
|
|
|
|
this.setState({
|
|
|
|
phase: PHASE_CANCELLED,
|
|
|
|
});
|
|
|
|
this._verifier = null;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
_onSasMatchesClick = () => {
|
|
|
|
this._showSasEvent.confirm();
|
|
|
|
this.setState({
|
|
|
|
phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
_onVerifiedDoneClick = () => {
|
|
|
|
this.props.onFinished(true);
|
2017-05-17 18:40:48 +03:00
|
|
|
}
|
|
|
|
|
2019-01-15 21:08:13 +03:00
|
|
|
_onVerifierShowSas = (e) => {
|
|
|
|
this._showSasEvent = e;
|
|
|
|
this.setState({
|
|
|
|
phase: PHASE_SHOW_SAS,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
_renderSasVerification() {
|
|
|
|
let body;
|
|
|
|
switch (this.state.phase) {
|
|
|
|
case PHASE_START:
|
|
|
|
body = this._renderSasVerificationPhaseStart();
|
|
|
|
break;
|
|
|
|
case PHASE_WAIT_FOR_PARTNER_TO_ACCEPT:
|
2019-01-19 14:54:01 +03:00
|
|
|
body = this._renderSasVerificationPhaseWaitAccept();
|
2019-01-15 21:08:13 +03:00
|
|
|
break;
|
|
|
|
case PHASE_SHOW_SAS:
|
|
|
|
body = this._renderSasVerificationPhaseShowSas();
|
|
|
|
break;
|
|
|
|
case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
|
|
|
|
body = this._renderSasVerificationPhaseWaitForPartnerToConfirm();
|
|
|
|
break;
|
|
|
|
case PHASE_VERIFIED:
|
|
|
|
body = this._renderSasVerificationPhaseVerified();
|
|
|
|
break;
|
|
|
|
case PHASE_CANCELLED:
|
|
|
|
body = this._renderSasVerificationPhaseCancelled();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
|
|
|
|
return (
|
|
|
|
<BaseDialog
|
|
|
|
title={_t("Verify device")}
|
|
|
|
onFinished={this._onCancelClick}
|
|
|
|
>
|
|
|
|
{body}
|
|
|
|
</BaseDialog>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
_renderSasVerificationPhaseStart() {
|
|
|
|
const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
|
|
|
|
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<AccessibleButton
|
|
|
|
element="span" className="mx_linkButton" onClick={this._onSwitchToLegacyClick}
|
|
|
|
>
|
|
|
|
{_t("Use Legacy Verification (for older clients)")}
|
|
|
|
</AccessibleButton>
|
|
|
|
<p>
|
2019-01-18 21:24:38 +03:00
|
|
|
{ _t("Verify by comparing a short text string.") }
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
{_t(
|
|
|
|
"For maximum security, we recommend you do this in person or " +
|
|
|
|
"use another trusted means of communication.",
|
|
|
|
)}
|
2019-01-15 21:08:13 +03:00
|
|
|
</p>
|
|
|
|
<DialogButtons
|
2019-01-18 21:24:38 +03:00
|
|
|
primaryButton={_t('Begin Verifying')}
|
2019-01-15 21:08:13 +03:00
|
|
|
hasCancel={true}
|
|
|
|
onPrimaryButtonClick={this._onSasRequestClick}
|
|
|
|
onCancel={this._onCancelClick}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-01-19 14:54:01 +03:00
|
|
|
_renderSasVerificationPhaseWaitAccept() {
|
|
|
|
const Spinner = sdk.getComponent("views.elements.Spinner");
|
2019-02-11 15:08:10 +03:00
|
|
|
const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
|
2019-01-19 14:54:01 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Spinner />
|
|
|
|
<p>{_t("Waiting for partner to accept...")}</p>
|
2019-02-11 15:08:10 +03:00
|
|
|
<p>{_t(
|
|
|
|
"Nothing appearing? Not all clients support interactive verification yet. " +
|
|
|
|
"<button>Use legacy verification</button>.",
|
|
|
|
{}, {button: sub => <AccessibleButton element='span' className="mx_linkButton"
|
|
|
|
onClick={this._onSwitchToLegacyClick}
|
|
|
|
>
|
|
|
|
{sub}
|
2019-02-11 16:09:50 +03:00
|
|
|
</AccessibleButton>},
|
2019-02-11 15:08:10 +03:00
|
|
|
)}</p>
|
2019-01-19 14:54:01 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-01-15 21:08:13 +03:00
|
|
|
_renderSasVerificationPhaseShowSas() {
|
2019-01-18 21:24:38 +03:00
|
|
|
const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
|
2019-01-18 21:43:40 +03:00
|
|
|
return <VerificationShowSas
|
|
|
|
sas={this._showSasEvent.sas}
|
|
|
|
onCancel={this._onCancelClick}
|
|
|
|
onDone={this._onSasMatchesClick}
|
|
|
|
/>;
|
2019-01-15 21:08:13 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
_renderSasVerificationPhaseWaitForPartnerToConfirm() {
|
|
|
|
const Spinner = sdk.getComponent('views.elements.Spinner');
|
|
|
|
return <div>
|
|
|
|
<Spinner />
|
|
|
|
<p>{_t(
|
|
|
|
"Waiting for %(userId)s to confirm...", {userId: this.props.userId},
|
|
|
|
)}</p>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
|
|
|
_renderSasVerificationPhaseVerified() {
|
2019-01-18 21:24:38 +03:00
|
|
|
const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
|
2019-01-18 21:43:40 +03:00
|
|
|
return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
|
2019-01-15 21:08:13 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
_renderSasVerificationPhaseCancelled() {
|
2019-01-18 21:24:38 +03:00
|
|
|
const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
|
2019-01-18 21:43:40 +03:00
|
|
|
return <VerificationCancelled onDone={this._onCancelClick} />;
|
2019-01-15 21:08:13 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
_renderLegacyVerification() {
|
|
|
|
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
|
|
|
|
const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
|
|
|
|
|
2019-08-14 15:58:27 +03:00
|
|
|
let text;
|
|
|
|
if (MatrixClientPeg.get().getUserId() === this.props.userId) {
|
|
|
|
text = _t("To verify that this device can be trusted, please check that the key you see " +
|
|
|
|
"in User Settings on that device matches the key below:")
|
|
|
|
} else {
|
|
|
|
text = _t("To verify that this device can be trusted, please contact its owner using some other " +
|
|
|
|
"means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings " +
|
|
|
|
"for this device matches the key below:");
|
|
|
|
}
|
|
|
|
|
2019-01-15 21:08:13 +03:00
|
|
|
const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
|
|
|
|
const body = (
|
|
|
|
<div>
|
|
|
|
<AccessibleButton
|
|
|
|
element="span" className="mx_linkButton" onClick={this._onSwitchToSasClick}
|
|
|
|
>
|
|
|
|
{_t("Use two-way text verification")}
|
|
|
|
</AccessibleButton>
|
|
|
|
<p>
|
2019-08-14 15:58:27 +03:00
|
|
|
{ text }
|
2019-01-15 21:08:13 +03:00
|
|
|
</p>
|
2019-02-04 23:25:26 +03:00
|
|
|
<div className="mx_DeviceVerifyDialog_cryptoSection">
|
2019-01-15 21:08:13 +03:00
|
|
|
<ul>
|
|
|
|
<li><label>{ _t("Device name") }:</label> <span>{ this.props.device.getDisplayName() }</span></li>
|
|
|
|
<li><label>{ _t("Device ID") }:</label> <span><code>{ this.props.device.deviceId }</code></span></li>
|
|
|
|
<li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<p>
|
|
|
|
{ _t("If it matches, press the verify button below. " +
|
|
|
|
"If it doesn't, then someone else is intercepting this device " +
|
|
|
|
"and you probably want to press the blacklist button instead.") }
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<QuestionDialog
|
|
|
|
title={_t("Verify device")}
|
|
|
|
description={body}
|
|
|
|
button={_t("I verify that the keys match")}
|
|
|
|
onFinished={this._onLegacyFinished}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
if (this.state.mode === MODE_LEGACY) {
|
|
|
|
return this._renderLegacyVerification();
|
|
|
|
} else {
|
|
|
|
return <div>
|
|
|
|
{this._renderSasVerification()}
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
}
|
2017-05-17 18:40:48 +03:00
|
|
|
}
|
|
|
|
|