2019-01-18 21:24:38 +03:00
|
|
|
/*
|
|
|
|
Copyright 2019 Vector Creations Ltd
|
|
|
|
|
|
|
|
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 PropTypes from 'prop-types';
|
2019-02-08 17:57:36 +03:00
|
|
|
import { _t, _td } from '../../../languageHandler';
|
2020-01-24 19:16:46 +03:00
|
|
|
import {PendingActionSpinner} from "../right_panel/EncryptionInfo";
|
|
|
|
import AccessibleButton from "../elements/AccessibleButton";
|
2020-01-28 20:42:39 +03:00
|
|
|
import DialogButtons from "../elements/DialogButtons";
|
2020-04-16 12:35:54 +03:00
|
|
|
import { fixupColorFonts } from '../../../utils/FontManager';
|
2019-02-08 17:57:36 +03:00
|
|
|
|
|
|
|
function capFirst(s) {
|
|
|
|
return s.charAt(0).toUpperCase() + s.slice(1);
|
|
|
|
}
|
2019-01-18 21:24:38 +03:00
|
|
|
|
|
|
|
export default class VerificationShowSas extends React.Component {
|
|
|
|
static propTypes = {
|
2020-01-29 10:53:45 +03:00
|
|
|
pending: PropTypes.bool,
|
|
|
|
displayName: PropTypes.string, // required if pending is true
|
2019-01-18 21:24:38 +03:00
|
|
|
onDone: PropTypes.func.isRequired,
|
|
|
|
onCancel: PropTypes.func.isRequired,
|
2019-02-08 17:57:36 +03:00
|
|
|
sas: PropTypes.object.isRequired,
|
2020-01-30 19:11:05 +03:00
|
|
|
isSelf: PropTypes.bool,
|
2020-04-01 14:21:18 +03:00
|
|
|
inDialog: PropTypes.bool, // whether this component is being shown in a dialog and to use DialogButtons
|
2020-01-24 19:16:46 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-01-18 21:24:38 +03:00
|
|
|
|
2020-01-24 19:16:46 +03:00
|
|
|
this.state = {
|
|
|
|
pending: false,
|
|
|
|
};
|
2019-01-18 21:24:38 +03:00
|
|
|
}
|
|
|
|
|
2020-04-16 12:35:54 +03:00
|
|
|
componentWillMount() {
|
|
|
|
// As this component is also used before login (during complete security),
|
|
|
|
// also make sure we have a working emoji font to display the SAS emojis here.
|
|
|
|
// This is also done from LoggedInView.
|
|
|
|
fixupColorFonts();
|
|
|
|
}
|
|
|
|
|
2020-01-24 19:16:46 +03:00
|
|
|
onMatchClick = () => {
|
|
|
|
this.setState({ pending: true });
|
|
|
|
this.props.onDone();
|
|
|
|
};
|
2019-02-08 17:57:36 +03:00
|
|
|
|
2020-02-25 15:18:27 +03:00
|
|
|
onDontMatchClick = () => {
|
|
|
|
this.setState({ cancelling: true });
|
|
|
|
this.props.onCancel();
|
|
|
|
};
|
|
|
|
|
2020-01-24 19:16:46 +03:00
|
|
|
render() {
|
2019-02-08 17:57:36 +03:00
|
|
|
let sasDisplay;
|
|
|
|
let sasCaption;
|
|
|
|
if (this.props.sas.emoji) {
|
|
|
|
const emojiBlocks = this.props.sas.emoji.map(
|
|
|
|
(emoji, i) => <div className="mx_VerificationShowSas_emojiSas_block" key={i}>
|
|
|
|
<div className="mx_VerificationShowSas_emojiSas_emoji">
|
2019-05-19 17:23:43 +03:00
|
|
|
{ emoji[0] }
|
2019-02-08 17:57:36 +03:00
|
|
|
</div>
|
|
|
|
<div className="mx_VerificationShowSas_emojiSas_label">
|
|
|
|
{_t(capFirst(emoji[1]))}
|
|
|
|
</div>
|
|
|
|
</div>,
|
|
|
|
);
|
|
|
|
sasDisplay = <div className="mx_VerificationShowSas_emojiSas">
|
2020-01-30 01:44:49 +03:00
|
|
|
{emojiBlocks.slice(0, 4)}
|
|
|
|
<div className="mx_VerificationShowSas_emojiSas_break" />
|
|
|
|
{emojiBlocks.slice(4)}
|
2019-02-08 17:57:36 +03:00
|
|
|
</div>;
|
2020-01-30 19:11:05 +03:00
|
|
|
sasCaption = this.props.isSelf ?
|
|
|
|
_t(
|
2020-04-02 19:28:01 +03:00
|
|
|
"Confirm the emoji below are displayed on both sessions, in the same order:",
|
2020-01-30 19:11:05 +03:00
|
|
|
):
|
|
|
|
_t(
|
|
|
|
"Verify this user by confirming the following emoji appear on their screen.",
|
|
|
|
);
|
2019-02-08 17:57:36 +03:00
|
|
|
} else if (this.props.sas.decimal) {
|
|
|
|
const numberBlocks = this.props.sas.decimal.map((num, i) => <span key={i}>
|
|
|
|
{num}
|
|
|
|
</span>);
|
|
|
|
sasDisplay = <div className="mx_VerificationShowSas_decimalSas">
|
|
|
|
{numberBlocks}
|
|
|
|
</div>;
|
2020-01-30 19:11:05 +03:00
|
|
|
sasCaption = this.props.isSelf ?
|
|
|
|
_t(
|
2020-04-02 19:28:01 +03:00
|
|
|
"Verify this session by confirming the following number appears on its screen.",
|
2020-01-30 19:11:05 +03:00
|
|
|
):
|
|
|
|
_t(
|
|
|
|
"Verify this user by confirming the following number appears on their screen.",
|
|
|
|
);
|
2019-02-08 17:57:36 +03:00
|
|
|
} else {
|
|
|
|
return <div>
|
|
|
|
{_t("Unable to find a supported verification method.")}
|
2020-01-29 17:11:50 +03:00
|
|
|
<AccessibleButton kind="primary" onClick={this.props.onCancel} className="mx_UserInfo_wideButton">
|
2020-01-24 19:16:46 +03:00
|
|
|
{_t('Cancel')}
|
|
|
|
</AccessibleButton>
|
2019-02-08 17:57:36 +03:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
2020-01-24 19:16:46 +03:00
|
|
|
let confirm;
|
2020-02-25 15:18:27 +03:00
|
|
|
if (this.state.pending || this.state.cancelling) {
|
|
|
|
let text;
|
|
|
|
if (this.state.pending) {
|
2020-04-03 18:03:37 +03:00
|
|
|
if (this.props.isSelf) {
|
|
|
|
text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
|
|
|
|
deviceName: this.props.device.getDisplayName(),
|
|
|
|
deviceId: this.props.device.deviceId,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
const {displayName} = this.props;
|
|
|
|
text = _t("Waiting for %(displayName)s to verify…", {displayName});
|
|
|
|
}
|
2020-02-25 15:18:27 +03:00
|
|
|
} else {
|
2020-02-25 15:27:59 +03:00
|
|
|
text = _t("Cancelling…");
|
2020-02-25 15:18:27 +03:00
|
|
|
}
|
2020-01-24 19:16:46 +03:00
|
|
|
confirm = <PendingActionSpinner text={text} />;
|
2020-04-01 14:21:18 +03:00
|
|
|
} else if (this.props.inDialog) {
|
2020-01-29 02:48:00 +03:00
|
|
|
// FIXME: stop using DialogButtons here once this component is only used in the right panel verification
|
2020-01-28 20:42:39 +03:00
|
|
|
confirm = <DialogButtons
|
|
|
|
primaryButton={_t("They match")}
|
|
|
|
onPrimaryButtonClick={this.onMatchClick}
|
2020-04-07 21:03:12 +03:00
|
|
|
primaryButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_matchButton"
|
2020-01-28 20:42:39 +03:00
|
|
|
cancelButton={_t("They don't match")}
|
2020-02-25 15:18:27 +03:00
|
|
|
onCancel={this.onDontMatchClick}
|
2020-04-07 21:03:12 +03:00
|
|
|
cancelButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_noMatchButton"
|
2020-01-28 20:42:39 +03:00
|
|
|
/>;
|
2020-04-01 14:21:18 +03:00
|
|
|
} else {
|
|
|
|
confirm = <React.Fragment>
|
|
|
|
<AccessibleButton onClick={this.onDontMatchClick} kind="danger">
|
|
|
|
{ _t("They don't match") }
|
|
|
|
</AccessibleButton>
|
2020-04-10 17:38:17 +03:00
|
|
|
<AccessibleButton onClick={this.onMatchClick} kind="primary">
|
|
|
|
{ _t("They match") }
|
|
|
|
</AccessibleButton>
|
2020-04-01 14:21:18 +03:00
|
|
|
</React.Fragment>;
|
2020-01-24 19:16:46 +03:00
|
|
|
}
|
|
|
|
|
2019-02-08 17:57:36 +03:00
|
|
|
return <div className="mx_VerificationShowSas">
|
|
|
|
<p>{sasCaption}</p>
|
|
|
|
{sasDisplay}
|
2020-01-30 19:41:25 +03:00
|
|
|
<p>{this.props.isSelf ?
|
|
|
|
"":
|
|
|
|
_t("To be secure, do this in person or use a trusted way to communicate.")}</p>
|
2020-01-24 19:16:46 +03:00
|
|
|
{confirm}
|
2019-01-18 21:24:38 +03:00
|
|
|
</div>;
|
|
|
|
}
|
2019-01-18 21:43:40 +03:00
|
|
|
}
|
2019-02-08 17:57:36 +03:00
|
|
|
|
|
|
|
// List of Emoji strings from the js-sdk, for i18n
|
|
|
|
_td("Dog");
|
|
|
|
_td("Cat");
|
|
|
|
_td("Lion");
|
|
|
|
_td("Horse");
|
|
|
|
_td("Unicorn");
|
|
|
|
_td("Pig");
|
|
|
|
_td("Elephant");
|
|
|
|
_td("Rabbit");
|
|
|
|
_td("Panda");
|
|
|
|
_td("Rooster");
|
|
|
|
_td("Penguin");
|
|
|
|
_td("Turtle");
|
|
|
|
_td("Fish");
|
|
|
|
_td("Octopus");
|
|
|
|
_td("Butterfly");
|
|
|
|
_td("Flower");
|
|
|
|
_td("Tree");
|
|
|
|
_td("Cactus");
|
|
|
|
_td("Mushroom");
|
|
|
|
_td("Globe");
|
|
|
|
_td("Moon");
|
|
|
|
_td("Cloud");
|
|
|
|
_td("Fire");
|
|
|
|
_td("Banana");
|
|
|
|
_td("Apple");
|
|
|
|
_td("Strawberry");
|
|
|
|
_td("Corn");
|
|
|
|
_td("Pizza");
|
|
|
|
_td("Cake");
|
|
|
|
_td("Heart");
|
|
|
|
_td("Smiley");
|
|
|
|
_td("Robot");
|
|
|
|
_td("Hat");
|
|
|
|
_td("Glasses");
|
|
|
|
_td("Spanner");
|
|
|
|
_td("Santa");
|
|
|
|
_td("Thumbs up");
|
|
|
|
_td("Umbrella");
|
|
|
|
_td("Hourglass");
|
|
|
|
_td("Clock");
|
|
|
|
_td("Gift");
|
|
|
|
_td("Light bulb");
|
|
|
|
_td("Book");
|
|
|
|
_td("Pencil");
|
|
|
|
_td("Paperclip");
|
2019-02-15 18:47:38 +03:00
|
|
|
_td("Scissors");
|
2020-01-10 06:56:17 +03:00
|
|
|
_td("Lock");
|
2019-02-08 17:57:36 +03:00
|
|
|
_td("Key");
|
|
|
|
_td("Hammer");
|
|
|
|
_td("Telephone");
|
|
|
|
_td("Flag");
|
|
|
|
_td("Train");
|
|
|
|
_td("Bicycle");
|
|
|
|
_td("Aeroplane");
|
|
|
|
_td("Rocket");
|
|
|
|
_td("Trophy");
|
|
|
|
_td("Ball");
|
|
|
|
_td("Guitar");
|
|
|
|
_td("Trumpet");
|
|
|
|
_td("Bell");
|
|
|
|
_td("Anchor");
|
|
|
|
_td("Headphones");
|
|
|
|
_td("Folder");
|
|
|
|
_td("Pin");
|