Start new key backup in security setup flow

Part of https://github.com/vector-im/riot-web/issues/11889

res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss

@@ -15,6 +15,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_CreateSecretStorageDialog {
+    // Why you ask? Because CompleteSecurityBody is 600px so this is the width
+    // we end up when in there, but when in our own dialog we set our own width
+    // so need to fix it to something sensible as otherwise we'd end up either
+    // really wide or really narrow depending on the phase. I bet you wish you
+    // never asked.
+    width: 560px;
+
+    .mx_SettingsFlag {
+        display: flex;
+    }
+
+    .mx_SettingsFlag_label {
+        flex: 1 1 0;
+        min-width: 0;
+        font-weight: 600;
+    }
+
+    .mx_ToggleSwitch {
+        flex: 0 0 auto;
+        margin-left: 30px;
+    }
+}
+
 .mx_CreateSecretStorageDialog .mx_Dialog_title {
     /* TODO: Consider setting this for all dialog titles. */
     margin-bottom: 1em;

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

@@ -87,6 +87,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             // set if we are 'upgrading' encryption (making an SSSS store from
             // an existing key backup secret).
             doingUpgrade: null,
+            // status of the key backup toggle switch
+            useKeyBackup: true,
         };
 
         this._fetchBackupInfo();
@@ -141,13 +143,19 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
     }
 
     _onKeyBackupStatusChange = () => {
-        this._fetchBackupInfo();
+        if (this.state.phase === PHASE_MIGRATE) this._fetchBackupInfo();
     }
 
     _collectRecoveryKeyNode = (n) => {
         this._recoveryKeyNode = n;
     }
 
+    _onUseKeyBackupChange = (enabled) => {
+        this.setState({
+            useKeyBackup: enabled,
+        });
+    }
+
     _onMigrateFormSubmit = (e) => {
         e.preventDefault();
         if (this.state.backupSigStatus.usable) {
@@ -222,6 +230,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
                 createSecretStorageKey: async () => this._keyInfo,
                 keyBackupInfo: this.state.backupInfo,
+                setupNewKeyBackup: !this.state.backupInfo && this.state.useKeyBackup,
             });
             this.setState({
                 phase: PHASE_DONE,
@@ -425,7 +434,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 hasCancel={false}
                 primaryDisabled={this.state.canUploadKeysWithPasswordOnly && !this.state.accountPassword}
             >
-                <button type="button" className="danger" onClick={this._onSkipClick}>
+                <button type="button" className="danger" onClick={this._onSkipSetupClick}>
                     {_t('Skip')}
                 </button>
             </DialogButtons>
@@ -436,6 +445,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const Field = sdk.getComponent('views.elements.Field');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
 
         let strengthMeter;
         let helpText;
@@ -484,6 +494,11 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 </div>
             </div>
 
+            <LabelledToggleSwitch
+                label={ _t("Back up my encryption keys, securing them with the same passphrase")}
+                onChange={this._onUseKeyBackupChange} value={this.state.useKeyBackup}
+            />
+
             <DialogButtons primaryButton={_t('Continue')}
                 onPrimaryButtonClick={this._onPassPhraseNextClick}
                 hasCancel={false}

src/i18n/strings/en_EN.json

@@ -2005,6 +2005,7 @@
     "Set up encryption on this device to allow it to verify other devices, granting them access to encrypted messages and marking them as trusted for other users.": "Set up encryption on this device to allow it to verify other devices, granting them access to encrypted messages and marking them as trusted for other users.",
     "Secure your encryption keys with a passphrase. For maximum security this should be different to your account password:": "Secure your encryption keys with a passphrase. For maximum security this should be different to your account password:",
     "Enter a passphrase": "Enter a passphrase",
+    "Back up my encryption keys, securing them with the same passphrase": "Back up my encryption keys, securing them with the same passphrase",
     "Set up with a recovery key": "Set up with a recovery key",
     "That matches!": "That matches!",
     "That doesn't match.": "That doesn't match.",