WIP
This commit is contained in:
parent
560cff0ae1
commit
d8a38e6b74
10 changed files with 112 additions and 54 deletions
|
@ -17,48 +17,62 @@ limitations under the License.
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||
import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
|
||||
import sdk from '../../../index';
|
||||
import Modal from "../../../Modal";
|
||||
import { _t } from '../../../languageHandler';
|
||||
import KeyVerificationStateObserver, {getNameForEventRoom, userLabelForEventRoom}
|
||||
import {getNameForEventRoom, userLabelForEventRoom}
|
||||
from '../../../utils/KeyVerificationStateObserver';
|
||||
import dis from "../../../dispatcher";
|
||||
import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
|
||||
|
||||
export default class MKeyVerificationRequest extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.keyVerificationState = new KeyVerificationStateObserver(this.props.mxEvent, MatrixClientPeg.get(), () => {
|
||||
this.setState(this._copyState());
|
||||
});
|
||||
this.state = this._copyState();
|
||||
}
|
||||
|
||||
_copyState() {
|
||||
const {accepted, done, cancelled, cancelPartyUserId, otherPartyUserId} = this.keyVerificationState;
|
||||
return {accepted, done, cancelled, cancelPartyUserId, otherPartyUserId};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.keyVerificationState.attach();
|
||||
const request = this.props.mxEvent.verificationRequest;
|
||||
if (request) {
|
||||
request.on("change", this._onRequestChanged);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.keyVerificationState.detach();
|
||||
const request = this.props.mxEvent.verificationRequest;
|
||||
if (request) {
|
||||
request.off("change", this._onRequestChanged);
|
||||
}
|
||||
}
|
||||
|
||||
_onAcceptClicked = () => {
|
||||
const IncomingSasDialog = sdk.getComponent('views.dialogs.IncomingSasDialog');
|
||||
// todo: validate event, for example if it has sas in the methods.
|
||||
const verifier = MatrixClientPeg.get().acceptVerificationDM(this.props.mxEvent, verificationMethods.SAS);
|
||||
Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
|
||||
verifier,
|
||||
}, null, /* priority = */ false, /* static = */ true);
|
||||
_onRequestChanged = () => {
|
||||
this.forceUpdate();
|
||||
};
|
||||
|
||||
_onRejectClicked = () => {
|
||||
// todo: validate event, for example if it has sas in the methods.
|
||||
const verifier = MatrixClientPeg.get().acceptVerificationDM(this.props.mxEvent, verificationMethods.SAS);
|
||||
verifier.cancel("User declined");
|
||||
_onAcceptClicked = async () => {
|
||||
const request = this.props.mxEvent.verificationRequest;
|
||||
if (request) {
|
||||
try {
|
||||
await request.accept();
|
||||
dis.dispatch({action: "show_right_panel"});
|
||||
dis.dispatch({
|
||||
action: "set_right_panel_phase",
|
||||
phase: RIGHT_PANEL_PHASES.EncryptionPanel,
|
||||
verificationRequest: request,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_onRejectClicked = async () => {
|
||||
const request = this.props.mxEvent.verificationRequest;
|
||||
if (request) {
|
||||
try {
|
||||
await request.cancel();
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_acceptedLabel(userId) {
|
||||
|
@ -83,45 +97,43 @@ export default class MKeyVerificationRequest extends React.Component {
|
|||
|
||||
render() {
|
||||
const {mxEvent} = this.props;
|
||||
const fromUserId = mxEvent.getSender();
|
||||
const content = mxEvent.getContent();
|
||||
const toUserId = content.to;
|
||||
const client = MatrixClientPeg.get();
|
||||
const myUserId = client.getUserId();
|
||||
const isOwn = fromUserId === myUserId;
|
||||
const request = mxEvent.verificationRequest;
|
||||
|
||||
let title;
|
||||
let subtitle;
|
||||
let stateNode;
|
||||
|
||||
if (this.state.accepted || this.state.cancelled) {
|
||||
if (!request) {
|
||||
return <p>This is an invalid request, ho ho ho!</p>;
|
||||
}
|
||||
|
||||
if (request.ready || request.started || request.cancelled) {
|
||||
let stateLabel;
|
||||
if (this.state.accepted) {
|
||||
stateLabel = this._acceptedLabel(toUserId);
|
||||
} else if (this.state.cancelled) {
|
||||
stateLabel = this._cancelledLabel(this.state.cancelPartyUserId);
|
||||
if (request.ready || request.started) {
|
||||
stateLabel = this._acceptedLabel(request.receivingUserId);
|
||||
} else if (request.cancelled) {
|
||||
stateLabel = this._cancelledLabel(request.cancellingUserId);
|
||||
}
|
||||
stateNode = (<div className="mx_KeyVerification_state">{stateLabel}</div>);
|
||||
}
|
||||
|
||||
if (toUserId === myUserId) { // request sent to us
|
||||
if (!request.initiatedByMe) {
|
||||
title = (<div className="mx_KeyVerification_title">{
|
||||
_t("%(name)s wants to verify", {name: getNameForEventRoom(fromUserId, mxEvent)})}</div>);
|
||||
_t("%(name)s wants to verify", {name: getNameForEventRoom(request.requestingUserId, mxEvent)})}</div>);
|
||||
subtitle = (<div className="mx_KeyVerification_subtitle">{
|
||||
userLabelForEventRoom(fromUserId, mxEvent)}</div>);
|
||||
const isResolved = !(this.state.accepted || this.state.cancelled || this.state.done);
|
||||
if (isResolved) {
|
||||
userLabelForEventRoom(request.requestingUserId, mxEvent)}</div>);
|
||||
if (request.requested) {
|
||||
const FormButton = sdk.getComponent("elements.FormButton");
|
||||
stateNode = (<div className="mx_KeyVerification_buttons">
|
||||
<FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
|
||||
<FormButton onClick={this._onAcceptClicked} label={_t("Accept")} />
|
||||
</div>);
|
||||
}
|
||||
} else if (isOwn) { // request sent by us
|
||||
} else { // request sent by us
|
||||
title = (<div className="mx_KeyVerification_title">{
|
||||
_t("You sent a verification request")}</div>);
|
||||
subtitle = (<div className="mx_KeyVerification_subtitle">{
|
||||
userLabelForEventRoom(this.state.otherPartyUserId, mxEvent)}</div>);
|
||||
userLabelForEventRoom(request.receivingUserId, mxEvent)}</div>);
|
||||
}
|
||||
|
||||
if (title) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue