mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-18 14:44:58 +08:00
port toast to use VerificationRequest and open right panel, not dialog
This commit is contained in:
parent
1aebc95793
commit
dd633bd8fe
@ -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),
|
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user