From 3a924d05b5e986619d0d20aed3b64ac8a0a76cb2 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 7 Feb 2019 17:01:55 +0000 Subject: [PATCH 1/2] Remove click-to-verify from SAS The click-each-pair to verify was hard to discover, so remove it --- res/css/_components.scss | 2 +- res/css/views/elements/_HexVerify.scss | 34 ------ src/components/views/elements/HexVerify.js | 103 ------------------ .../views/verification/VerificationShowSas.js | 20 +--- 4 files changed, 5 insertions(+), 154 deletions(-) delete mode 100644 res/css/views/elements/_HexVerify.scss delete mode 100644 src/components/views/elements/HexVerify.js diff --git a/res/css/_components.scss b/res/css/_components.scss index fe331504f2..c82dedc069 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/views/elements/_HexVerify.scss b/res/css/views/elements/_HexVerify.scss deleted file mode 100644 index 3f3ee4b7ea..0000000000 --- a/res/css/views/elements/_HexVerify.scss +++ /dev/null @@ -1,34 +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. -*/ - -.mx_HexVerify { - 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; -} diff --git a/src/components/views/elements/HexVerify.js b/src/components/views/elements/HexVerify.js deleted file mode 100644 index 86ead3adc1..0000000000 --- a/src/components/views/elements/HexVerify.js +++ /dev/null @@ -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 - {this.props.text} - ; - } -} - -/* - * 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(); - } - return
- {pairs} -
; - } -} diff --git a/src/components/views/verification/VerificationShowSas.js b/src/components/views/verification/VerificationShowSas.js index 6f3209989e..0224571d9e 100644 --- a/src/components/views/verification/VerificationShowSas.js +++ b/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
+ return

{_t( "Verify this user by confirming the following number appears on their screen.", )}

@@ -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.", )}

- -

{_t( - "To continue, click on each pair to confirm it's correct.", - )}

+
+ {this.props.sas} +
From 4728ddf5155c90b3d8832baeeaf6e6ea883983f8 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 7 Feb 2019 17:53:41 +0000 Subject: [PATCH 2/2] Forgot the CSS file --- .../verification/_VerificationShowSas.scss | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 res/css/views/verification/_VerificationShowSas.scss diff --git a/res/css/views/verification/_VerificationShowSas.scss b/res/css/views/verification/_VerificationShowSas.scss new file mode 100644 index 0000000000..32ccf6b0bb --- /dev/null +++ b/res/css/views/verification/_VerificationShowSas.scss @@ -0,0 +1,22 @@ +/* +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. +*/ + +.mx_VerificationShowSas_sas { + text-align: center; + font-weight: bold; + padding-left: 3px; + padding-right: 3px; +}