Add option to reset keys to the encryption setup screen

res/css/structures/auth/_CompleteSecurity.scss

@@ -102,3 +102,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_CompleteSecurity_resetText {
+    padding-top: 20px;
+}

src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js

@@ -359,6 +359,14 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         this.setState({phase: PHASE_CONFIRM_SKIP});
     }
 
+    _onGoBackClick = () => {
+        if (this.state.backupInfo && !this.props.force) {
+            this.setState({phase: PHASE_MIGRATE});
+        } else {
+            this.setState({phase: PHASE_INTRO});
+        }
+    }
+
     _onAccountPasswordChange = (e) => {
         this.setState({
             accountPassword: e.target.value,
@@ -492,6 +500,18 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
 
     _renderPhaseIntro() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        let cancelButton;
+        if (this.props.force) {
+            // if this is a forced key reset then aborting will just leave the old keys
+            // in place, and is thereforece just 'cancel'
+            cancelButton = <button type="button" onClick={this._onCancel}>{_t('Cancel')}</button>;
+        } else {
+            // if it's setting up from scratch then aborting leaves the user without
+            // crypto set up, so they skipping the setup.
+            cancelButton = <button type="button" className="danger" onClick={this._onSkipSetupClick}>{_t('Skip')}</button>;
+        }
+
         return <div>
             <p>{_t(
                 "Create a Recovery Key to store encryption keys & secrets with your account data. " +
@@ -502,7 +522,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                     onPrimaryButtonClick={this._onIntroContinueClick}
                     hasCancel={false}
                 >
-                    <button type="button" className="danger" onClick={this._onCancel}>{_t('Skip')}</button>
+                    {cancelButton}
                 </DialogButtons>
             </div>
         </div>;
@@ -516,7 +536,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 "access to encrypted messages.",
         )}
             <DialogButtons primaryButton={_t('Go back')}
-                onPrimaryButtonClick={this._onSetUpClick}
+                onPrimaryButtonClick={this._onGoBackClick}
                 hasCancel={false}
             >
                 <button type="button" className="danger" onClick={this._onCancel}>{_t('Skip')}</button>

src/components/structures/auth/SetupEncryptionBody.js

@@ -83,6 +83,11 @@ export default class SetupEncryptionBody extends React.Component {
         store.stop();
     }
 
+    _onResetClick = () => {
+        const store = SetupEncryptionStore.sharedInstance();
+        store.startKeyReset();
+    }
+
     _onUseRecoveryKeyClick = async () => {
         const store = SetupEncryptionStore.sharedInstance();
         store.useRecoveryKey();
@@ -226,6 +231,16 @@ export default class SetupEncryptionBody extends React.Component {
                             {_t("Skip")}
                         </AccessibleButton>
                     </div>
+                    <div className="mx_CompleteSecurity_resetText">{_t(
+                        "If you've forgotten your recovery key you can " +
+                        "<button>set up new recovery options</button>", {}, {
+                            button: sub => <AccessibleButton
+                                element="span" className="mx_linkButton" onClick={this._onResetClick}
+                            >
+                                {sub}
+                            </AccessibleButton>,
+                        },
+                    )}</div>
                 </div>
             );
         } else if (phase === PHASE_RECOVERY_KEY) {

src/stores/SetupEncryptionStore.js

@@ -81,6 +81,15 @@ export class SetupEncryptionStore extends EventEmitter {
         this.emit("update");
     }
 
+    async startKeyReset() {
+        try {
+            await accessSecretStorage(() => {}, {forceReset: true});
+            // If the keys are reset, the trust status event will fire and we'll change state
+        } catch (e) {
+            // dialog was cancelled - stay on the current screen
+        }
+    }
+
     async useRecoveryKey() {
         this.phase = PHASE_RECOVERY_KEY;
         this.emit("update");