diff --git a/src/components/views/messages/MKeyVerificationConclusion.js b/src/components/views/messages/MKeyVerificationConclusion.js index 6dce9dcd48..90edb2f05d 100644 --- a/src/components/views/messages/MKeyVerificationConclusion.js +++ b/src/components/views/messages/MKeyVerificationConclusion.js @@ -45,32 +45,51 @@ export default class MKeyVerificationConclusion extends React.Component { this.forceUpdate(); }; + _shouldRender(mxEvent, request) { + // normally should not happen + if (!request) { + return false; + } + // .cancel event that was sent after the verification finished, ignore + if (mxEvent.getType() === "m.key.verification.cancel" && !request.cancelled) { + return false; + } + // .done event that was sent after the verification cancelled, ignore + if (mxEvent.getType() === "m.key.verification.done" && !request.done) { + return false; + } + + // request hasn't concluded yet + if (request.pending) { + return false; + } + return true; + } + render() { const {mxEvent} = this.props; const request = mxEvent.verificationRequest; - if (!request) { + if (!this._shouldRender(mxEvent, request)) { return null; } const client = MatrixClientPeg.get(); const myUserId = client.getUserId(); - let title; if (request.done) { title = _t("You verified %(name)s", {name: getNameForEventRoom(request.otherUserId, mxEvent)}); } else if (request.cancelled) { - if (mxEvent.getSender() === myUserId) { + const userId = request.cancellingUserId; + if (userId === myUserId) { title = _t("You cancelled verifying %(name)s", {name: getNameForEventRoom(request.otherUserId, mxEvent)}); - } else if (mxEvent.getSender() === request.otherUserId) { + } else { title = _t("%(name)s cancelled verifying", - {name: getNameForEventRoom(request.otherUserId, mxEvent)}); + {name: getNameForEventRoom(userId, mxEvent)}); } - } else { - title = `request conclusion tile with phase ${request.phase}`; } if (title) { diff --git a/src/components/views/messages/MKeyVerificationRequest.js b/src/components/views/messages/MKeyVerificationRequest.js index ebdfa7c636..1bef3b4469 100644 --- a/src/components/views/messages/MKeyVerificationRequest.js +++ b/src/components/views/messages/MKeyVerificationRequest.js @@ -43,6 +43,16 @@ export default class MKeyVerificationRequest extends React.Component { } } + _openRequest = () => { + const {verificationRequest} = this.props.mxEvent; + dis.dispatch({action: "show_right_panel"}); + dis.dispatch({ + action: "set_right_panel_phase", + phase: RIGHT_PANEL_PHASES.EncryptionPanel, + refireParams: {verificationRequest}, + }); + }; + _onRequestChanged = () => { this.forceUpdate(); }; @@ -52,12 +62,7 @@ export default class MKeyVerificationRequest extends React.Component { if (request) { try { await request.accept(); - dis.dispatch({action: "show_right_panel"}); - dis.dispatch({ - action: "set_right_panel_phase", - phase: RIGHT_PANEL_PHASES.EncryptionPanel, - refireParams: {verificationRequest: request}, - }); + this._openRequest(); } catch (err) { console.error(err.message); } @@ -96,10 +101,13 @@ export default class MKeyVerificationRequest extends React.Component { } render() { + const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); + const FormButton = sdk.getComponent("elements.FormButton"); + const {mxEvent} = this.props; const request = mxEvent.verificationRequest; - if (!request) { + if (!request || request.invalid) { return null; } @@ -107,12 +115,13 @@ export default class MKeyVerificationRequest extends React.Component { let subtitle; let stateNode; - const accepted = request.ready || request.started || request.done; if (accepted || request.cancelled) { let stateLabel; if (accepted) { - stateLabel = this._acceptedLabel(request.receivingUserId); + stateLabel = ( + {this._acceptedLabel(request.receivingUserId)} + ); } else { stateLabel = this._cancelledLabel(request.cancellingUserId); } @@ -124,8 +133,7 @@ export default class MKeyVerificationRequest extends React.Component { _t("%(name)s wants to verify", {name: getNameForEventRoom(request.requestingUserId, mxEvent)})}); subtitle = (
{ userLabelForEventRoom(request.requestingUserId, mxEvent)}
); - if (request.requested) { - const FormButton = sdk.getComponent("elements.FormButton"); + if (request.requested && !request.observeOnly) { stateNode = (
diff --git a/src/components/views/right_panel/EncryptionInfo.js b/src/components/views/right_panel/EncryptionInfo.js index 49f4fc5da3..3d5de829b7 100644 --- a/src/components/views/right_panel/EncryptionInfo.js +++ b/src/components/views/right_panel/EncryptionInfo.js @@ -21,7 +21,7 @@ import {_t} from "../../../languageHandler"; export default class EncryptionInfo extends React.PureComponent { render() { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - return (
+ return (

{_t("Verify User")}

{_t("For extra security, verify this user by checking a one-time code on both of your devices.")}

{_t("For maximum security, do this in person.")}

diff --git a/src/components/views/right_panel/VerificationPanel.js b/src/components/views/right_panel/VerificationPanel.js index 9e5a448239..e25aaabcfa 100644 --- a/src/components/views/right_panel/VerificationPanel.js +++ b/src/components/views/right_panel/VerificationPanel.js @@ -26,8 +26,8 @@ export default class VerificationPanel extends React.PureComponent { } render() { - return
-
+ return
+
{ this.renderStatus() }
; diff --git a/src/components/views/toasts/VerificationRequestToast.js b/src/components/views/toasts/VerificationRequestToast.js index 30478ce281..f616575973 100644 --- a/src/components/views/toasts/VerificationRequestToast.js +++ b/src/components/views/toasts/VerificationRequestToast.js @@ -26,25 +26,16 @@ import dis from "../../../dispatcher"; export default class VerificationRequestToast extends React.PureComponent { constructor(props) { super(props); - const {event, timeout} = props.request; - // to_device requests don't have a timestamp, so consider them age=0 - const age = event.getTs() ? event.getLocalAge() : 0; - const remaining = Math.max(0, timeout - age); - const counter = Math.ceil(remaining / 1000); - this.state = {counter}; + this.state = {counter: Math.ceil(props.request.timeout / 1000)}; } componentDidMount() { + const {request} = this.props; this._intervalHandle = setInterval(() => { let {counter} = this.state; - counter -= 1; - if (counter <= 0) { - this.cancel(); - } else { - this.setState({counter}); - } + counter = Math.max(0, counter - 1); + this.setState({counter}); }, 1000); - const {request} = this.props; request.on("change", this._checkRequestIsPending); } @@ -56,7 +47,7 @@ export default class VerificationRequestToast extends React.PureComponent { _checkRequestIsPending = () => { const {request} = this.props; - if (request.ready || request.started || request.done || request.cancelled) { + if (request.ready || request.started || request.done || request.cancelled || request.observeOnly) { this.props.dismiss(); } };