Move common UI bits out to separate components

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -103,10 +103,6 @@ export default class DeviceVerifyDialog extends React.Component {
         });
     }
 
-    _onVerifyStateChanged = (newVal) => {
-        this.setState({sasVerified: newVal});
-    }
-
     _onSasMatchesClick = () => {
         this._showSasEvent.confirm();
         this.setState({
@@ -170,10 +166,16 @@ export default class DeviceVerifyDialog extends React.Component {
                     {_t("Use Legacy Verification (for older clients)")}
                 </AccessibleButton>
                 <p>
-                    { _t("Do clicky clicky button press request verify user send to do.") }
+                    { _t("Verify by comparing a short text string.") }
+                </p>
+                <p>
+                    {_t(
+                        "For maximum security, we recommend you do this in person or " +
+                        "use another trusted means of communication.",
+                    )}
                 </p>
                 <DialogButtons
-                    primaryButton={_t('Send Verification Request')}
+                    primaryButton={_t('Begin Verifying')}
                     hasCancel={true}
                     onPrimaryButtonClick={this._onSasRequestClick}
                     onCancel={this._onCancelClick}
@@ -183,29 +185,8 @@ export default class DeviceVerifyDialog extends React.Component {
     }
 
     _renderSasVerificationPhaseShowSas() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
-        const HexVerify = sdk.getComponent('views.elements.HexVerify');
+        return <VerificationShowSas sas={this._showSasEvent.sas} onCancel={this._onCancelClick} onDone={this._onSasMatchesClick} />
-        return <div>
-            <p>{_t(
-                "Verify this user by confirming the following number appears on their screen"
-            )}</p>
-            <p>{_t(
-                "For maximum security, we reccommend you do this in person or use another " +
-                "trusted means of communication"
-            )}</p>
-            <HexVerify text={this._showSasEvent.sas}
-                onVerifiedStateChange={this._onVerifyStateChanged}
-            />
-            <p>{_t(
-                "To continue, click on each pair to confirm it's correct.",
-            )}</p>
-            <DialogButtons onPrimaryButtonClick={this._onSasMatchesClick}
-                primaryButton={_t("Continue")}
-                primaryDisabled={!this.state.sasVerified}
-                hasCancel={true}
-                onCancel={this._onCancelClick}
-            />
-        </div>;
     }
 
     _renderSasVerificationPhaseWaitForPartnerToConfirm() {
@@ -219,31 +200,13 @@ export default class DeviceVerifyDialog extends React.Component {
     }
 
     _renderSasVerificationPhaseVerified() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
-        return <div>
+        return <VerificationComplete onDone={this._onVerifiedDoneClick} />
-            <p>{_t("Verification complete!")}</p>
-            <DialogButtons onPrimaryButtonClick={this._onVerifiedDoneClick}
-                primaryButton={_t("Done")}
-                hasCancel={false}
-            />
-        </div>;
     }
 
     _renderSasVerificationPhaseCancelled() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
-
+        return <VerificationCancelled onDone={this._onCancelClick} />
-        return (
-            <div>
-                <p>{_t(
-                    "%(userId)s cancelled the verification.", {userId: this.props.userId},
-                )}</p>
-                <DialogButtons
-                    primaryButton={_t('Cancel')}
-                    hasCancel={false}
-                    onPrimaryButtonClick={this._onCancelClick}
-                />
-            </div>
-        );
     }
 
     _renderLegacyVerification() {

src/components/views/dialogs/IncomingSasDialog.js

@@ -82,10 +82,6 @@ export default class IncomingSasDialog extends React.Component {
         });
     }
 
-    _onVerifiedStateChange = (newVal) => {
-        this.setState({sasVerified: newVal});
-    }
-
     _onSasMatchesClick = () => {
         this._showSasEvent.confirm();
         this.setState({
@@ -125,29 +121,12 @@ export default class IncomingSasDialog extends React.Component {
     }
 
     _renderPhaseShowSas() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
-        const HexVerify = sdk.getComponent('views.elements.HexVerify');
+        return <VerificationShowSas
-        return <div>
+            sas={this._showSasEvent.sas}
-            <p>{_t(
-                "Verify this user by confirming the following number appears on their screen"
-            )}</p>
-            <p>{_t(
-                "For maximum security, we reccommend you do this in person or use another " +
-                "trusted means of communication"
-            )}</p>
-            <HexVerify text={this._showSasEvent.sas}
-                onVerifiedStateChange={this._onVerifiedStateChange}
-            />
-            <p>{_t(
-                "To continue, click on each pair to confirm it's correct.",
-            )}</p>
-            <DialogButtons onPrimaryButtonClick={this._onSasMatchesClick}
-                primaryButton={_t("Continue")}
-                primaryDisabled={!this.state.sasVerified}
-                hasCancel={true}
             onCancel={this._onCancelClick}
+            onDone={this._onSasMatchesClick}
         />
-        </div>;
     }
 
     _renderPhaseWaitForPartnerToConfirm() {
@@ -162,37 +141,13 @@ export default class IncomingSasDialog extends React.Component {
     }
 
     _renderPhaseVerified() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
-
+        return <VerificationComplete onDone={this._onVerifiedDoneClick} />
-        return (
-            <div>
-                <p>{_t(
-                    "Verification Complete!"
-                )}</p>
-                <DialogButtons
-                    primaryButton={_t('Done')}
-                    hasCancel={false}
-                    onPrimaryButtonClick={this._onVerifiedDoneClick}
-                />
-            </div>
-        );
     }
 
     _renderPhaseCancelled() {
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
-
+        return <VerificationCancelled onDone={this._onCancelClick} />
-        return (
-            <div>
-                <p>{_t(
-                    "The other party cancelled the verification."
-                )}</p>
-                <DialogButtons
-                    primaryButton={_t('Cancel')}
-                    hasCancel={false}
-                    onPrimaryButtonClick={this._onCancelClick}
-                />
-            </div>
-        );
     }
 
     render() {

src/components/views/verification/VerificationCancelled.js

@@ -0,0 +1,40 @@
+/*
+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';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+export default class VerificationCancelled extends React.Component {
+    static propTypes = {
+        onDone: PropTypes.func.isRequired,
+    }
+
+    render() {
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return <div>
+                <p>{_t(
+                    "The other party cancelled the verification.",
+                )}</p>
+                <DialogButtons
+                    primaryButton={_t('Cancel')}
+                    hasCancel={false}
+                    onPrimaryButtonClick={this.props.onDone}
+                />
+        </div>;
+    }
+};

src/components/views/verification/VerificationComplete.js

@@ -0,0 +1,42 @@
+/*
+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';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+export default class VerificationComplete extends React.Component {
+    static propTypes = {
+        onDone: PropTypes.func.isRequired,
+    }
+
+    render() {
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return <div>
+            <h2>{_t("Verified!")}</h2>
+            <p>{_t("You've successfully verified this user.")}</p>
+            <p>{_t(
+                "Secure messages with this user are end-to-end encrypted and not able to be " +
+                "read by third parties.",
+            )}</p>
+            <DialogButtons onPrimaryButtonClick={this.props.onDone}
+                primaryButton={_t("Got It")}
+                hasCancel={false}
+            />
+        </div>;
+    }
+};

src/components/views/verification/VerificationShowSas.js

@@ -0,0 +1,65 @@
+/*
+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';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+export default class VerificationShowSas extends React.Component {
+    static propTypes = {
+        onDone: PropTypes.func.isRequired,
+        onCancel: PropTypes.func.isRequired,
+        sas: PropTypes.string.isRequired,
+    }
+
+    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>
+            <p>{_t(
+                "Verify this user by confirming the following number appears on their screen"
+            )}</p>
+            <p>{_t(
+                "For maximum security, we reccommend you do this in person or use another " +
+                "trusted means of communication"
+            )}</p>
+            <HexVerify text={this.props.sas}
+                onVerifiedStateChange={this._onVerifiedStateChange}
+            />
+            <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}
+            />
+        </div>;
+    }
+};

src/i18n/strings/en_EN.json

@@ -320,6 +320,16 @@
     "Incoming call from %(name)s": "Incoming call from %(name)s",
     "Decline": "Decline",
     "Accept": "Accept",
+    "The other party cancelled the verification.": "The other party cancelled the verification.",
+    "Cancel": "Cancel",
+    "Verified!": "Verified!",
+    "You've successfully verified this user.": "You've successfully verified this user.",
+    "Secure messages with this user are end-to-end encrypted and not able to be read by third parties.": "Secure messages with this user are end-to-end encrypted and not able to be read by third parties.",
+    "Got It": "Got It",
+    "Verify this user by confirming the following number appears on their screen": "Verify this user by confirming the following number appears on their screen",
+    "For maximum security, we reccommend you do this in person or use another trusted means of communication": "For maximum security, we reccommend you do this in person or use another trusted means of communication",
+    "To continue, click on each pair to confirm it's correct.": "To continue, click on each pair to confirm it's correct.",
+    "Continue": "Continue",
     "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains": "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains",
     "Incorrect verification code": "Incorrect verification code",
     "Enter Code": "Enter Code",
@@ -334,7 +344,6 @@
     "Passwords can't be empty": "Passwords can't be empty",
     "Warning!": "Warning!",
     "Changing password will currently reset any end-to-end encryption keys on all devices, making encrypted chat history unreadable, unless you first export your room keys and re-import them afterwards. In future this will be improved.": "Changing password will currently reset any end-to-end encryption keys on all devices, making encrypted chat history unreadable, unless you first export your room keys and re-import them afterwards. In future this will be improved.",
-    "Continue": "Continue",
     "Export E2E room keys": "Export E2E room keys",
     "Do you want to set an email address?": "Do you want to set an email address?",
     "Current password": "Current password",
@@ -648,7 +657,6 @@
     "Search…": "Search…",
     "This Room": "This Room",
     "All Rooms": "All Rooms",
-    "Cancel": "Cancel",
     "You don't currently have any stickerpacks enabled": "You don't currently have any stickerpacks enabled",
     "Add some now": "Add some now",
     "Stickerpack": "Stickerpack",
@@ -943,14 +951,9 @@
     "password": "password",
     "Verify device": "Verify device",
     "Use Legacy Verification (for older clients)": "Use Legacy Verification (for older clients)",
-    "Do clicky clicky button press request verify user send to do.": "Do clicky clicky button press request verify user send to do.",
+    "Verify by comparing a short text string.": "Verify by comparing a short text string.",
-    "Send Verification Request": "Send Verification Request",
+    "For maximum security, we recommend you do this in person or use another trusted means of communication.": "For maximum security, we recommend you do this in person or use another trusted means of communication.",
-    "Verify this user by confirming the following number appears on their screen": "Verify this user by confirming the following number appears on their screen",
+    "Begin Verifying": "Begin Verifying",
-    "For maximum security, we reccommend you do this in person or use another trusted means of communication": "For maximum security, we reccommend you do this in person or use another trusted means of communication",
-    "To continue, click on each pair to confirm it's correct.": "To continue, click on each pair to confirm it's correct.",
-    "Verification complete!": "Verification complete!",
-    "Done": "Done",
-    "%(userId)s cancelled the verification.": "%(userId)s cancelled the verification.",
     "Use two-way text verification": "Use two-way text verification",
     "To verify that this device can be trusted, please contact its owner using some other means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings for this device matches the key below:": "To verify that this device can be trusted, please contact its owner using some other means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings for this device matches the key below:",
     "Device name": "Device name",
@@ -976,8 +979,6 @@
     "Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.": "Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.",
     "Verifying this user will mark their device as trusted, and also mark your device as trusted to them": "Verifying this user will mark their device as trusted, and also mark your device as trusted to them",
     "Waiting for partner to confirm...": "Waiting for partner to confirm...",
-    "Verification Complete!": "Verification Complete!",
-    "The other party cancelled the verification.": "The other party cancelled the verification.",
     "Incoming Verification Request": "Incoming Verification Request",
     "You added a new device '%(displayName)s', which is requesting encryption keys.": "You added a new device '%(displayName)s', which is requesting encryption keys.",
     "Your unverified device '%(displayName)s' is requesting encryption keys.": "Your unverified device '%(displayName)s' is requesting encryption keys.",