Merge pull request #2586 from matrix-org/dbkr/sas_no_click

Remove click-to-verify from SAS

res/css/_components.scss

@@ -77,7 +77,6 @@
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_Field.scss";
-@import "./views/elements/_HexVerify.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
@@ -156,6 +155,7 @@
 @import "./views/settings/tabs/_SecuritySettingsTab.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/_VoiceSettingsTab.scss";
+@import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_IncomingCallbox.scss";
 @import "./views/voip/_VideoView.scss";

res/css/views/verification/_VerificationShowSas.scss

@@ -14,21 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_HexVerify {
+.mx_VerificationShowSas_sas {
     text-align: center;
-}
-
-.mx_HexVerify_pair {
-    display: inline-block;
     font-weight: bold;
     padding-left: 3px;
     padding-right: 3px;
 }
-
-.mx_HexVerify_pair_verified {
-    color: $accent-color;
-}
-
-.mx_HexVerify_pair:hover{
-    color: $accent-color;
-}

src/components/views/elements/HexVerify.js

@@ -1,103 +0,0 @@
-/*
-Copyright 2019 New Vector 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";
-import classnames from 'classnames';
-
-import sdk from '../../../index';
-
-class HexVerifyPair extends React.Component {
-    static propTypes = {
-        text: PropTypes.string.isRequired,
-        index: PropTypes.number,
-        verified: PropTypes.bool,
-        onChange: PropTypes.func.isRequired,
-    }
-
-    _onClick = () => {
-        this.setState({verified: !this.props.verified});
-        this.props.onChange(this.props.index, !this.props.verified);
-    }
-
-    render() {
-        const classNames = {
-            mx_HexVerify_pair: true,
-            mx_HexVerify_pair_verified: this.props.verified,
-        };
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
-        return <AccessibleButton className={classnames(classNames)}
-            onClick={this._onClick}
-        >
-            {this.props.text}
-        </AccessibleButton>;
-    }
-}
-
-/*
- * Helps a user verify a hexadecimal code matches one displayed
- * elsewhere (eg. on a different device)
- */
-export default class HexVerify extends React.Component {
-    static propTypes = {
-        text: PropTypes.string.isRequired,
-        onVerifiedStateChange: PropTypes.func,
-    }
-
-    static defaultProps = {
-        onVerifiedStateChange: function() {},
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            pairsVerified: [],
-        };
-        for (let i = 0; i < props.text.length; i += 2) {
-            this.state.pairsVerified.push(false);
-        }
-    }
-
-    _onPairChange = (index, newVal) => {
-        const oldVerified = this.state.pairsVerified.reduce((acc, val) => {
-            return acc && val;
-        }, true);
-        const newPairsVerified = this.state.pairsVerified.slice(0);
-        newPairsVerified[index] = newVal;
-        const newVerified = newPairsVerified.reduce((acc, val) => {
-            return acc && val;
-        }, true);
-        this.setState({pairsVerified: newPairsVerified});
-        if (oldVerified !== newVerified) {
-            this.props.onVerifiedStateChange(newVerified);
-        }
-    }
-
-    render() {
-        const pairs = [];
-
-        for (let i = 0; i < this.props.text.length / 2; ++i) {
-            pairs.push(<HexVerifyPair key={i} index={i}
-                text={this.props.text.substr(i * 2, 2)}
-                verified={this.state.pairsVerified[i]}
-                onChange={this._onPairChange}
-            />);
-        }
-        return <div className="mx_HexVerify">
-            {pairs}
-        </div>;
-    }
-}

src/components/views/verification/VerificationShowSas.js

@@ -28,19 +28,11 @@ export default class VerificationShowSas extends React.Component {
 
     constructor() {
         super();
-        this.state = {
-            sasVerified: false,
-        };
-    }
-
-    _onVerifiedStateChange = (newVal) => {
-        this.setState({sasVerified: newVal});
     }
 
     render() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        const HexVerify = sdk.getComponent('views.elements.HexVerify');
+        return <div className="mx_VerificationShowSas">
-        return <div>
             <p>{_t(
                 "Verify this user by confirming the following number appears on their screen.",
             )}</p>
@@ -48,15 +40,11 @@ export default class VerificationShowSas extends React.Component {
                 "For maximum security, we recommend you do this in person or use another " +
                 "trusted means of communication.",
             )}</p>
-            <HexVerify text={this.props.sas}
+            <div className="mx_VerificationShowSas_sas">
-                onVerifiedStateChange={this._onVerifiedStateChange}
+                {this.props.sas}
-            />
+            </div>
-            <p>{_t(
-                "To continue, click on each pair to confirm it's correct.",
-            )}</p>
             <DialogButtons onPrimaryButtonClick={this.props.onDone}
                 primaryButton={_t("Continue")}
-                primaryDisabled={!this.state.sasVerified}
                 hasCancel={true}
                 onCancel={this.props.onCancel}
             />