port toast to use VerificationRequest and open right panel, not dialog

This commit is contained in:
Bruno Windels 2019-12-20 12:02:37 +00:00
parent 1aebc95793
commit dd633bd8fe

View File

@ -18,10 +18,9 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import sdk from "../../../index"; import sdk from "../../../index";
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import Modal from "../../../Modal";
import MatrixClientPeg from '../../../MatrixClientPeg'; import MatrixClientPeg from '../../../MatrixClientPeg';
import {verificationMethods} from 'matrix-js-sdk/lib/crypto'; import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
import KeyVerificationStateObserver, {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver"; import {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver";
import dis from "../../../dispatcher"; import dis from "../../../dispatcher";
export default class VerificationRequestToast extends React.PureComponent { export default class VerificationRequestToast extends React.PureComponent {
@ -33,16 +32,9 @@ export default class VerificationRequestToast extends React.PureComponent {
const remaining = Math.max(0, timeout - age); const remaining = Math.max(0, timeout - age);
const counter = Math.ceil(remaining / 1000); const counter = Math.ceil(remaining / 1000);
this.state = {counter}; this.state = {counter};
if (this.props.requestObserver) {
this.props.requestObserver.setCallback(this._checkRequestIsPending);
}
} }
componentDidMount() { componentDidMount() {
if (this.props.requestObserver) {
this.props.requestObserver.attach();
this._checkRequestIsPending();
}
this._intervalHandle = setInterval(() => { this._intervalHandle = setInterval(() => {
let {counter} = this.state; let {counter} = this.state;
counter -= 1; counter -= 1;
@ -52,20 +44,22 @@ export default class VerificationRequestToast extends React.PureComponent {
this.setState({counter}); this.setState({counter});
} }
}, 1000); }, 1000);
const {request} = this.props;
request.on("change", this._checkRequestIsPending);
} }
componentWillUnmount() { componentWillUnmount() {
clearInterval(this._intervalHandle); clearInterval(this._intervalHandle);
if (this.props.requestObserver) { const {request} = this.props;
this.props.requestObserver.detach(); request.off("change", this._checkRequestIsPending);
}
} }
_checkRequestIsPending = () => { _checkRequestIsPending = () => {
if (!this.props.requestObserver.pending) { const {request} = this.props;
if (request.ready || request.started || request.done || request.cancelled) {
this.props.dismiss(); this.props.dismiss();
} }
} };
cancel = () => { cancel = () => {
this.props.dismiss(); this.props.dismiss();
@ -76,9 +70,10 @@ export default class VerificationRequestToast extends React.PureComponent {
} }
} }
accept = () => { accept = async () => {
this.props.dismiss(); this.props.dismiss();
const {event} = this.props.request; const {request} = this.props;
const {event} = request;
// no room id for to_device requests // no room id for to_device requests
if (event.getRoomId()) { if (event.getRoomId()) {
dis.dispatch({ dis.dispatch({
@ -87,18 +82,24 @@ export default class VerificationRequestToast extends React.PureComponent {
should_peek: false, should_peek: false,
}); });
} }
try {
const verifier = this.props.request.beginKeyVerification(verificationMethods.SAS); await request.accept();
const IncomingSasDialog = sdk.getComponent('views.dialogs.IncomingSasDialog'); dis.dispatch({action: "show_right_panel"});
Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, { dis.dispatch({
verifier, action: "set_right_panel_phase",
}, null, /* priority = */ false, /* static = */ true); phase: RIGHT_PANEL_PHASES.EncryptionPanel,
refireParams: {verificationRequest: request},
});
} catch (err) {
console.error(err.message);
}
}; };
render() { render() {
const FormButton = sdk.getComponent("elements.FormButton"); const FormButton = sdk.getComponent("elements.FormButton");
const {event} = this.props.request; const {request} = this.props;
const userId = event.getSender(); const {event} = request;
const userId = request.otherUserId;
let nameLabel = event.getRoomId() ? userLabelForEventRoom(userId, event) : userId; let nameLabel = event.getRoomId() ? userLabelForEventRoom(userId, event) : userId;
// for legacy to_device verification requests // for legacy to_device verification requests
if (nameLabel === userId) { if (nameLabel === userId) {
@ -121,5 +122,4 @@ export default class VerificationRequestToast extends React.PureComponent {
VerificationRequestToast.propTypes = { VerificationRequestToast.propTypes = {
dismiss: PropTypes.func.isRequired, dismiss: PropTypes.func.isRequired,
request: PropTypes.object.isRequired, request: PropTypes.object.isRequired,
requestObserver: PropTypes.instanceOf(KeyVerificationStateObserver),
}; };