2019-12-10 16:53:51 +00:00
|
|
|
|
/*
|
2020-01-24 11:45:39 +00:00
|
|
|
|
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
2019-12-10 16:53:51 +00: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.
|
|
|
|
|
*/
|
|
|
|
|
|
2020-01-28 17:14:48 +00:00
|
|
|
|
import React, {useCallback, useEffect, useState} from "react";
|
2020-01-24 16:16:46 +00:00
|
|
|
|
|
2019-12-16 17:16:22 +00:00
|
|
|
|
import EncryptionInfo from "./EncryptionInfo";
|
|
|
|
|
import VerificationPanel from "./VerificationPanel";
|
2020-01-17 14:50:27 +00:00
|
|
|
|
import {MatrixClientPeg} from "../../../MatrixClientPeg";
|
2019-12-19 16:43:10 +00:00
|
|
|
|
import {ensureDMExists} from "../../../createRoom";
|
2020-01-24 16:16:46 +00:00
|
|
|
|
import {useEventEmitter} from "../../../hooks/useEventEmitter";
|
2020-01-28 11:13:09 +00:00
|
|
|
|
import Modal from "../../../Modal";
|
2020-02-14 12:48:38 +00:00
|
|
|
|
import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
|
2020-01-28 11:13:09 +00:00
|
|
|
|
import * as sdk from "../../../index";
|
|
|
|
|
import {_t} from "../../../languageHandler";
|
2020-07-18 18:21:56 +00:00
|
|
|
|
import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
|
|
|
|
|
import {RoomMember} from "matrix-js-sdk/src/models/room-member";
|
2020-09-29 09:11:04 +00:00
|
|
|
|
import dis from "../../../dispatcher/dispatcher";
|
|
|
|
|
import {Action} from "../../../dispatcher/actions";
|
|
|
|
|
import {RightPanelPhases} from "../../../stores/RightPanelStorePhases";
|
2020-01-24 16:16:46 +00:00
|
|
|
|
|
2020-01-28 11:13:09 +00:00
|
|
|
|
// cancellation codes which constitute a key mismatch
|
|
|
|
|
const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
|
|
|
|
|
|
2020-07-18 17:39:11 +00:00
|
|
|
|
interface IProps {
|
|
|
|
|
member: RoomMember;
|
|
|
|
|
onClose: () => void;
|
|
|
|
|
verificationRequest: VerificationRequest;
|
|
|
|
|
verificationRequestPromise: Promise<VerificationRequest>;
|
|
|
|
|
layout: string;
|
|
|
|
|
inDialog: boolean;
|
|
|
|
|
isRoomEncrypted: boolean;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
|
2020-09-29 09:11:04 +00:00
|
|
|
|
const {
|
|
|
|
|
verificationRequest,
|
|
|
|
|
verificationRequestPromise,
|
|
|
|
|
member,
|
|
|
|
|
onClose,
|
|
|
|
|
layout,
|
|
|
|
|
isRoomEncrypted,
|
|
|
|
|
} = props;
|
2020-01-24 16:16:46 +00:00
|
|
|
|
const [request, setRequest] = useState(verificationRequest);
|
2020-02-27 11:35:34 +00:00
|
|
|
|
// state to show a spinner immediately after clicking "start verification",
|
|
|
|
|
// before we have a request
|
|
|
|
|
const [isRequesting, setRequesting] = useState(false);
|
2020-02-24 12:39:20 +00:00
|
|
|
|
const [phase, setPhase] = useState(request && request.phase);
|
2020-01-24 16:16:46 +00:00
|
|
|
|
useEffect(() => {
|
|
|
|
|
setRequest(verificationRequest);
|
2020-02-24 12:39:20 +00:00
|
|
|
|
if (verificationRequest) {
|
2020-02-26 17:30:20 +00:00
|
|
|
|
setRequesting(false);
|
2020-02-24 12:39:20 +00:00
|
|
|
|
setPhase(verificationRequest.phase);
|
|
|
|
|
}
|
2020-01-24 16:16:46 +00:00
|
|
|
|
}, [verificationRequest]);
|
2020-03-05 16:44:35 +00:00
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
async function awaitPromise() {
|
|
|
|
|
setRequesting(true);
|
2020-07-18 18:25:28 +00:00
|
|
|
|
const requestFromPromise = await verificationRequestPromise;
|
2020-03-05 16:44:35 +00:00
|
|
|
|
setRequesting(false);
|
2020-07-18 18:25:28 +00:00
|
|
|
|
setRequest(requestFromPromise);
|
|
|
|
|
setPhase(requestFromPromise.phase);
|
2020-03-05 16:44:35 +00:00
|
|
|
|
}
|
|
|
|
|
if (verificationRequestPromise) {
|
|
|
|
|
awaitPromise();
|
|
|
|
|
}
|
|
|
|
|
}, [verificationRequestPromise]);
|
2020-01-24 16:16:46 +00:00
|
|
|
|
const changeHandler = useCallback(() => {
|
2020-01-28 11:13:09 +00:00
|
|
|
|
// handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
|
|
|
|
|
if (request && request.cancelled && MISMATCHES.includes(request.cancellationCode)) {
|
|
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
|
Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
|
|
|
|
|
headerImage: require("../../../../res/img/e2e/warning.svg"),
|
|
|
|
|
title: _t("Your messages are not secure"),
|
|
|
|
|
description: <div>
|
|
|
|
|
{_t("One of the following may be compromised:")}
|
|
|
|
|
<ul>
|
|
|
|
|
<li>{_t("Your homeserver")}</li>
|
|
|
|
|
<li>{_t("The homeserver the user you’re verifying is connected to")}</li>
|
|
|
|
|
<li>{_t("Yours, or the other users’ internet connection")}</li>
|
2020-01-29 15:48:25 +00:00
|
|
|
|
<li>{_t("Yours, or the other users’ session")}</li>
|
2020-01-28 11:13:09 +00:00
|
|
|
|
</ul>
|
|
|
|
|
</div>,
|
|
|
|
|
onFinished: onClose,
|
|
|
|
|
});
|
|
|
|
|
return; // don't update phase here as we will be transitioning away from this view shortly
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (request) {
|
|
|
|
|
setPhase(request.phase);
|
|
|
|
|
}
|
|
|
|
|
}, [onClose, request]);
|
2020-01-24 16:16:46 +00:00
|
|
|
|
useEventEmitter(request, "change", changeHandler);
|
|
|
|
|
|
|
|
|
|
const onStartVerification = useCallback(async () => {
|
2020-02-26 17:30:20 +00:00
|
|
|
|
setRequesting(true);
|
2020-01-24 16:16:46 +00:00
|
|
|
|
const cli = MatrixClientPeg.get();
|
|
|
|
|
const roomId = await ensureDMExists(cli, member.userId);
|
2020-07-18 18:25:28 +00:00
|
|
|
|
const verificationRequest_ = await cli.requestVerificationDM(member.userId, roomId);
|
|
|
|
|
setRequest(verificationRequest_);
|
|
|
|
|
setPhase(verificationRequest_.phase);
|
2020-09-29 09:11:04 +00:00
|
|
|
|
// Notify the RightPanelStore about this
|
|
|
|
|
dis.dispatch({
|
|
|
|
|
action: Action.SetRightPanelPhase,
|
|
|
|
|
phase: RightPanelPhases.EncryptionPanel,
|
|
|
|
|
refireParams: { member, verificationRequest: verificationRequest_ },
|
|
|
|
|
});
|
|
|
|
|
}, [member]);
|
2020-01-24 16:16:46 +00:00
|
|
|
|
|
2020-02-26 17:30:20 +00:00
|
|
|
|
const requested =
|
|
|
|
|
(!request && isRequesting) ||
|
|
|
|
|
(request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
|
2020-04-02 15:51:25 +00:00
|
|
|
|
const isSelfVerification = request ?
|
|
|
|
|
request.isSelfVerification :
|
|
|
|
|
member.userId === MatrixClientPeg.get().getUserId();
|
2020-01-28 11:13:09 +00:00
|
|
|
|
if (!request || requested) {
|
2020-02-26 17:30:20 +00:00
|
|
|
|
const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
|
2020-09-29 09:11:04 +00:00
|
|
|
|
return (
|
2020-03-26 15:51:24 +00:00
|
|
|
|
<EncryptionInfo
|
|
|
|
|
isRoomEncrypted={isRoomEncrypted}
|
|
|
|
|
onStartVerification={onStartVerification}
|
|
|
|
|
member={member}
|
2020-04-02 15:51:25 +00:00
|
|
|
|
isSelfVerification={isSelfVerification}
|
2020-03-26 15:51:24 +00:00
|
|
|
|
waitingForOtherParty={requested && initiatedByMe}
|
2020-04-02 15:51:25 +00:00
|
|
|
|
waitingForNetwork={requested && !initiatedByMe}
|
2020-04-07 18:03:12 +00:00
|
|
|
|
inDialog={layout === "dialog"} />
|
2020-09-29 09:11:04 +00:00
|
|
|
|
);
|
2020-01-24 16:16:46 +00:00
|
|
|
|
} else {
|
2020-09-29 09:11:04 +00:00
|
|
|
|
return (
|
2020-01-28 11:13:09 +00:00
|
|
|
|
<VerificationPanel
|
2020-03-25 22:38:11 +00:00
|
|
|
|
isRoomEncrypted={isRoomEncrypted}
|
2020-01-31 15:04:44 +00:00
|
|
|
|
layout={layout}
|
2020-01-28 11:13:09 +00:00
|
|
|
|
onClose={onClose}
|
|
|
|
|
member={member}
|
|
|
|
|
request={request}
|
|
|
|
|
key={request.channel.transactionId}
|
2020-04-07 18:03:12 +00:00
|
|
|
|
inDialog={layout === "dialog"}
|
2020-04-03 15:03:37 +00:00
|
|
|
|
phase={phase}
|
2020-05-12 10:05:30 +00:00
|
|
|
|
/>
|
2020-09-29 09:11:04 +00:00
|
|
|
|
);
|
2019-12-19 16:08:53 +00:00
|
|
|
|
}
|
2020-01-24 16:16:46 +00:00
|
|
|
|
};
|
2019-12-16 17:16:22 +00:00
|
|
|
|
|
2020-01-24 16:16:46 +00:00
|
|
|
|
export default EncryptionPanel;
|