Fix a few things with cancelling recovery reminder

* Put a cancel button on the first page of the create key backup
   dialog
 * Move settings logic into the room reminder: I know this is moving
   logic *into* a view but RoomView is quite heavyweight as it is.
 * Give the recovery reminder an explicit 'onDontAskAgainSet' rather
   than onFinished which was getting called with false when the last
   screen of the dialog was closed with the cancel 'x' rather than
   the 'close' button.

https://github.com/vector-im/riot-web/issues/8066

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 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.
@@ -503,7 +503,7 @@ export default React.createClass({
             <BaseDialog className='mx_CreateKeyBackupDialog'
                 onFinished={this.props.onFinished}
                 title={this._titleForPhase(this.state.phase)}
-                hasCancel={[PHASE_DONE].includes(this.state.phase)}
+                hasCancel={[PHASE_PASSPHRASE, PHASE_DONE].includes(this.state.phase)}
             >
             <div>
                 {content}

src/components/structures/RoomView.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 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.
@@ -611,17 +611,10 @@ module.exports = React.createClass({
         }
     },
 
-    async onRoomRecoveryReminderFinished(backupCreated) {
+    onRoomRecoveryReminderDontAskAgain: function() {
-        // If the user cancelled the key backup dialog, it suggests they don't
+        // Called when the option to not ask again is set:
-        // want to be reminded anymore.
+        // force an update to hide the recovery reminder
-        if (!backupCreated) {
+        this.forceUpdate();
-            await SettingsStore.setValue(
-                "showRoomRecoveryReminder",
-                null,
-                SettingLevel.ACCOUNT,
-                false,
-            );
-        }
     },
 
     onKeyBackupStatus() {
@@ -1704,7 +1697,7 @@ module.exports = React.createClass({
             aux = <RoomUpgradeWarningBar room={this.state.room} />;
             hideCancel = true;
         } else if (showRoomRecoveryReminder) {
-            aux = <RoomRecoveryReminder onFinished={this.onRoomRecoveryReminderFinished} />;
+            aux = <RoomRecoveryReminder onDontAskAgainSet={this.onRoomRecoveryReminderDontAskAgain} />;
             hideCancel = true;
         } else if (this.state.showingPinned) {
             hideCancel = true; // has own cancel

src/components/views/rooms/RoomRecoveryReminder.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 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.
@@ -20,10 +20,16 @@ import sdk from "../../../index";
 import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
 import MatrixClientPeg from "../../../MatrixClientPeg";
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 
 export default class RoomRecoveryReminder extends React.PureComponent {
     static propTypes = {
-        onFinished: PropTypes.func.isRequired,
+        // called if the user sets the option to suppress this reminder in the future
+        onDontAskAgainSet: PropTypes.func,
+    }
+
+    static defaultProps = {
+        onDontAskAgainSet: function() {},
     }
 
     constructor(props) {
@@ -82,7 +88,6 @@ export default class RoomRecoveryReminder extends React.PureComponent {
             Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
                 userId: MatrixClientPeg.get().credentials.userId,
                 device: this.state.unverifiedDevice,
-                onFinished: this.props.onFinished,
             });
             return;
         }
@@ -91,9 +96,6 @@ export default class RoomRecoveryReminder extends React.PureComponent {
         // we'll show the create key backup flow.
         Modal.createTrackedDialogAsync("Key Backup", "Key Backup",
             import("../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog"),
-            {
-                onFinished: this.props.onFinished,
-            },
         );
     }
 
@@ -103,10 +105,14 @@ export default class RoomRecoveryReminder extends React.PureComponent {
         Modal.createTrackedDialogAsync("Ignore Recovery Reminder", "Ignore Recovery Reminder",
             import("../../../async-components/views/dialogs/keybackup/IgnoreRecoveryReminderDialog"),
             {
-                onDontAskAgain: () => {
+                onDontAskAgain: async () => {
-                    // Report false to the caller, who should prevent the
+                    await SettingsStore.setValue(
-                    // reminder from appearing in the future.
+                        "showRoomRecoveryReminder",
-                    this.props.onFinished(false);
+                        null,
+                        SettingLevel.ACCOUNT,
+                        false,
+                    );
+                    this.props.onDontAskAgainSet();
                 },
                 onSetup: () => {
                     this.showSetupDialog();