116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
/*
|
|
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
|
|
|
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.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { RoomMember, User } from "matrix-js-sdk/src/matrix";
|
|
|
|
import { _t } from "../../../languageHandler";
|
|
import AccessibleButton from "../elements/AccessibleButton";
|
|
import Spinner from "../elements/Spinner";
|
|
|
|
export const PendingActionSpinner: React.FC<{ text: string }> = ({ text }) => {
|
|
return (
|
|
<div className="mx_EncryptionInfo_spinner">
|
|
<Spinner />
|
|
{text}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface IProps {
|
|
waitingForOtherParty: boolean;
|
|
waitingForNetwork: boolean;
|
|
member: RoomMember | User;
|
|
onStartVerification: () => Promise<void>;
|
|
isRoomEncrypted: boolean;
|
|
inDialog: boolean;
|
|
isSelfVerification: boolean;
|
|
}
|
|
|
|
const EncryptionInfo: React.FC<IProps> = ({
|
|
waitingForOtherParty,
|
|
waitingForNetwork,
|
|
member,
|
|
onStartVerification,
|
|
isRoomEncrypted,
|
|
inDialog,
|
|
isSelfVerification,
|
|
}: IProps) => {
|
|
let content: JSX.Element;
|
|
if (waitingForOtherParty && isSelfVerification) {
|
|
content = <div>{_t("encryption|verification|self_verification_hint")}</div>;
|
|
} else if (waitingForOtherParty || waitingForNetwork) {
|
|
let text: string;
|
|
if (waitingForOtherParty) {
|
|
text = _t("encryption|verification|waiting_for_user_accept", {
|
|
displayName: (member as User).displayName || (member as RoomMember).name || member.userId,
|
|
});
|
|
} else {
|
|
text = _t("encryption|verification|accepting");
|
|
}
|
|
content = <PendingActionSpinner text={text} />;
|
|
} else {
|
|
content = (
|
|
<AccessibleButton
|
|
kind="primary"
|
|
className="mx_UserInfo_wideButton mx_UserInfo_startVerification"
|
|
onClick={onStartVerification}
|
|
>
|
|
{_t("encryption|verification|start_button")}
|
|
</AccessibleButton>
|
|
);
|
|
}
|
|
|
|
let description: JSX.Element;
|
|
if (isRoomEncrypted) {
|
|
description = (
|
|
<div>
|
|
<p>{_t("user_info|room_encrypted")}</p>
|
|
<p>{_t("user_info|room_encrypted_detail")}</p>
|
|
</div>
|
|
);
|
|
} else {
|
|
description = (
|
|
<div>
|
|
<p>{_t("user_info|room_unencrypted")}</p>
|
|
<p>{_t("user_info|room_unencrypted_detail")}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (inDialog) {
|
|
return content;
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<div data-testid="encryption-info-description" className="mx_UserInfo_container">
|
|
<h3>{_t("settings|security|encryption_section")}</h3>
|
|
{description}
|
|
</div>
|
|
<div className="mx_UserInfo_container">
|
|
<h3>{_t("user_info|verify_button")}</h3>
|
|
<div>
|
|
<p>{_t("user_info|verify_explainer")}</p>
|
|
<p>{_t("encryption|verification|in_person")}</p>
|
|
{content}
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
export default EncryptionInfo;
|