Migrate VerificationShowSas to TypeScript

src/components/views/verification/VerificationShowSas.tsx

@@ -0,0 +1,242 @@
+/*
+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 { SAS } from "matrix-js-sdk/src/crypto/verification/SAS";
+import { DeviceInfo } from "matrix-js-sdk/src//crypto/deviceinfo";
+import { _t, _td } from '../../../languageHandler';
+import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
+import AccessibleButton from "../elements/AccessibleButton";
+import DialogButtons from "../elements/DialogButtons";
+import { fixupColorFonts } from '../../../utils/FontManager';
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    pending?: boolean;
+    displayName?: string // required if pending is true
+    device?: DeviceInfo;
+    onDone: () => void;
+    onCancel: () => void;
+    sas: SAS.sas;
+    isSelf?: boolean;
+    inDialog?: boolean; // whether this component is being shown in a dialog and to use DialogButtons
+}
+
+interface IState {
+    pending: boolean;
+    cancelling?: boolean;
+}
+
+function capFirst(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+@replaceableComponent("views.verification.VerificationShowSas")
+export default class VerificationShowSas extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            pending: false,
+        };
+    }
+
+    public componentWillMount(): void {
+        // 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();
+    }
+
+    private onMatchClick = (): void => {
+        this.setState({ pending: true });
+        this.props.onDone();
+    };
+
+    private onDontMatchClick = (): void => {
+        this.setState({ cancelling: true });
+        this.props.onCancel();
+    };
+
+    render() {
+        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">
+                        { emoji[0] }
+                    </div>
+                    <div className="mx_VerificationShowSas_emojiSas_label">
+                        {_t(capFirst(emoji[1]))}
+                    </div>
+                </div>,
+            );
+            sasDisplay = <div className="mx_VerificationShowSas_emojiSas">
+                {emojiBlocks.slice(0, 4)}
+                <div className="mx_VerificationShowSas_emojiSas_break" />
+                {emojiBlocks.slice(4)}
+            </div>;
+            sasCaption = this.props.isSelf ?
+                _t(
+                    "Confirm the emoji below are displayed on both sessions, in the same order:",
+                ):
+                _t(
+                    "Verify this user by confirming the following emoji appear on their screen.",
+                );
+        } 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>;
+            sasCaption = this.props.isSelf ?
+                _t(
+                    "Verify this session by confirming the following number appears on its screen.",
+                ):
+                _t(
+                    "Verify this user by confirming the following number appears on their screen.",
+                );
+        } else {
+            return <div>
+                {_t("Unable to find a supported verification method.")}
+                <AccessibleButton kind="primary" onClick={this.props.onCancel} className="mx_UserInfo_wideButton">
+                    {_t('Cancel')}
+                </AccessibleButton>
+            </div>;
+        }
+
+        let confirm;
+        if (this.state.pending || this.state.cancelling) {
+            let text;
+            if (this.state.pending) {
+                if (this.props.isSelf) {
+                    // device shouldn't be null in this situation but it can be, eg. if the device is
+                    // logged out during verification
+                    if (this.props.device) {
+                        text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
+                            deviceName: this.props.device ? this.props.device.getDisplayName() : '',
+                            deviceId: this.props.device ? this.props.device.deviceId : '',
+                        });
+                    } else {
+                        text = _t("Waiting for your other session to verify…");
+                    }
+                } else {
+                    const { displayName } = this.props;
+                    text = _t("Waiting for %(displayName)s to verify…", { displayName });
+                }
+            } else {
+                text = _t("Cancelling…");
+            }
+            confirm = <PendingActionSpinner text={text} />;
+        } else if (this.props.inDialog) {
+            // FIXME: stop using DialogButtons here once this component is only used in the right panel verification
+            confirm = <DialogButtons
+                primaryButton={_t("They match")}
+                onPrimaryButtonClick={this.onMatchClick}
+                primaryButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_matchButton"
+                cancelButton={_t("They don't match")}
+                onCancel={this.onDontMatchClick}
+                cancelButtonClass="mx_UserInfo_wideButton mx_VerificationShowSas_noMatchButton"
+            />;
+        } else {
+            confirm = <React.Fragment>
+                <AccessibleButton onClick={this.onDontMatchClick} kind="danger">
+                    { _t("They don't match") }
+                </AccessibleButton>
+                <AccessibleButton onClick={this.onMatchClick} kind="primary">
+                    { _t("They match") }
+                </AccessibleButton>
+            </React.Fragment>;
+        }
+
+        return <div className="mx_VerificationShowSas">
+            <p>{sasCaption}</p>
+            {sasDisplay}
+            <p>{this.props.isSelf ?
+                "":
+                _t("To be secure, do this in person or use a trusted way to communicate.")}</p>
+            {confirm}
+        </div>;
+    }
+}
+
+// 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");
+_td("Scissors");
+_td("Lock");
+_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");