Merge pull request #4055 from matrix-org/foldleft/12288-correct-feedback-order

Fix error message rendering for key entry

src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js

@@ -190,10 +190,6 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             let keyStatus;
             if (this.state.recoveryKey.length === 0) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus" />;
-            } else if (this.state.recoveryKeyValid) {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
-                    {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
-                </div>;
             } else if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
@@ -201,6 +197,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         "entered the correct recovery key.",
                     )}
                 </div>;
+            } else if (this.state.recoveryKeyValid) {
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
+                    {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
+                </div>;
             } else {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t("Not a valid recovery key")}

src/i18n/strings/en_EN.json

@@ -1654,8 +1654,8 @@
     "Access your secure message history and your cross-signing identity for verifying other sessions by entering your passphrase.": "Access your secure message history and your cross-signing identity for verifying other sessions by entering your passphrase.",
     "If you've forgotten your passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>.": "If you've forgotten your passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>.",
     "Enter secret storage recovery key": "Enter secret storage recovery key",
-    "This looks like a valid recovery key!": "This looks like a valid recovery key!",
     "Unable to access secret storage. Please verify that you entered the correct recovery key.": "Unable to access secret storage. Please verify that you entered the correct recovery key.",
+    "This looks like a valid recovery key!": "This looks like a valid recovery key!",
     "Not a valid recovery key": "Not a valid recovery key",
     "Access your secure message history and your cross-signing identity for verifying other sessions by entering your recovery key.": "Access your secure message history and your cross-signing identity for verifying other sessions by entering your recovery key.",
     "If you've forgotten your recovery key you can <button>set up new recovery options</button>.": "If you've forgotten your recovery key you can <button>set up new recovery options</button>.",

test/components/views/dialogs/AccessSecretStorageDialog-test.js

@@ -0,0 +1,106 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 TestRenderer from 'react-test-renderer';
+import sdk from '../../../skinned-sdk';
+import {MatrixClientPeg} from '../../../../src/MatrixClientPeg';
+import { stubClient } from '../../../test-utils';
+
+const AccessSecretStorageDialog = sdk.getComponent("dialogs.secretstorage.AccessSecretStorageDialog");
+
+describe("AccessSecretStorageDialog", function() {
+    it("Closes the dialog if _onRecoveryKeyNext is called with a valid key", (done) => {
+        const testInstance = TestRenderer.create(
+            <AccessSecretStorageDialog
+              checkPrivateKey={(p) => p && p.recoveryKey && p.recoveryKey == "a"}
+              onFinished={(v) => {
+                  if (v) { done(); }
+                }}
+            />,
+        );
+        testInstance.getInstance().setState({
+            recoveryKeyValid: true,
+            recoveryKey: "a",
+        });
+        const e = { preventDefault: () => {} };
+        testInstance.getInstance()._onRecoveryKeyNext(e);
+    });
+
+    it("Considers a valid key to be valid", function() {
+        const testInstance = TestRenderer.create(
+            <AccessSecretStorageDialog
+              checkPrivateKey={() => true}
+            />,
+        );
+        const v = "asfd";
+        const e = { target: { value: v } };
+        stubClient();
+        MatrixClientPeg.get().isValidRecoveryKey = function(k) {
+            return k == v;
+        };
+        testInstance.getInstance()._onRecoveryKeyChange(e);
+        const { recoveryKeyValid } = testInstance.getInstance().state;
+        expect(recoveryKeyValid).toBe(true);
+    });
+
+    it("Notifies the user if they input an invalid recovery key", async function(done) {
+        const testInstance = TestRenderer.create(
+            <AccessSecretStorageDialog
+              checkPrivateKey={async () => false}
+            />,
+        );
+        const e = { target: { value: "a" } };
+        stubClient();
+        MatrixClientPeg.get().isValidRecoveryKey = () => true;
+        testInstance.getInstance()._onRecoveryKeyChange(e);
+        await testInstance.getInstance()._onRecoveryKeyNext({ preventDefault: () => {} });
+        const { keyMatches } = testInstance.getInstance().state;
+        expect(keyMatches).toBe(false);
+        const notification = testInstance.root.findByProps({
+            className: "mx_AccessSecretStorageDialog_keyStatus",
+        });
+        expect(notification.props.children).toEqual(
+            ["\uD83D\uDC4E ", "Unable to access secret storage. Please verify that you " +
+                     "entered the correct recovery key."]);
+        done();
+    });
+
+    it("Notifies the user if they input an invalid passphrase", async function(done) {
+        const testInstance = TestRenderer.create(
+            <AccessSecretStorageDialog
+              checkPrivateKey={() => false}
+              onFinished={() => {}}
+              keyInfo={ { passphrase: {
+                  salt: 'nonempty',
+                  iterations: 2,
+              } } }
+            />,
+        );
+        const e = { target: { value: "a" } };
+        stubClient();
+        MatrixClientPeg.get().isValidRecoveryKey = () => false;
+        testInstance.getInstance()._onPassPhraseChange(e);
+        await testInstance.getInstance()._onPassPhraseNext({ preventDefault: () => {} });
+        const notification = testInstance.root.findByProps({
+            className: "mx_AccessSecretStorageDialog_keyStatus",
+        });
+        expect(notification.props.children).toEqual(
+            ["\uD83D\uDC4E ", "Unable to access secret storage. Please verify that you " +
+                     "entered the correct passphrase."]);
+        done();
+    });
+});