Use recovery keys over passphrases

res/css/structures/auth/_CompleteSecurity.scss

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

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

@@ -73,33 +73,42 @@ limitations under the License.
     margin-left: 20px;
 }
 
-.mx_CreateSecretStorageDialog_recoveryKeyHeader {
-    margin-bottom: 1em;
-}
-
 .mx_CreateSecretStorageDialog_recoveryKeyContainer {
-    display: flex;
+    width: 380px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKey {
-    width: 262px;
+    font-weight: bold;
+    text-align: center;
     padding: 20px;
     color: $info-plinth-fg-color;
     background-color: $info-plinth-bg-color;
-    margin-right: 12px;
+    border-radius: 6px;
+    word-spacing: 1em;
+    margin-bottom: 20px;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKeyButtons {
-    flex: 1;
     display: flex;
+    justify-content: space-between;
     align-items: center;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
-    margin-right: 10px;
+    width: 160px;
+    padding-left: 0px;
+    padding-right: 0px;
+    white-space: nowrap;
 }
 
-.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
-    flex: 1;
-    white-space: nowrap;
+.mx_CreateSecretStorageDialog_continueSpinner {
+    margin-top: 33px;
+    text-align: right;
+}
+
+.mx_CreateSecretStorageDialog_continueSpinner img {
+    width: 20px;
+    height: 20px;
 }

src/CrossSigningManager.js

@@ -30,6 +30,8 @@ import {encodeBase64} from "matrix-js-sdk/src/crypto/olmlib";
 // operation ends.
 let secretStorageKeys = {};
 let secretStorageBeingAccessed = false;
+// Stores the 'passphraseOnly' option for the active storage access operation
+let passphraseOnlyOption = null;
 
 function isCachingAllowed() {
     return (
@@ -99,6 +101,7 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
                 const key = await inputToKey(input);
                 return await MatrixClientPeg.get().checkSecretStorageKey(key, info);
             },
+            passphraseOnly: passphraseOnlyOption,
         },
         /* className= */ null,
         /* isPriorityModal= */ false,
@@ -213,19 +216,27 @@ export async function promptForBackupPassphrase() {
  *
  * @param {Function} [func] An operation to perform once secret storage has been
  * bootstrapped. Optional.
- * @param {bool} [forceReset] Reset secret storage even if it's already set up
+ * @param {object} [opts] Named options
+ * @param {bool} [opts.forceReset] Reset secret storage even if it's already set up
+ * @param {object} [opts.withKeys] Map of key ID to key for SSSS keys that the client
+ *     already has available. If a key is not supplied here, the user will be prompted.
+ * @param {bool} [opts.passphraseOnly] If true, do not prompt for recovery key or to reset keys
  */
-export async function accessSecretStorage(func = async () => { }, forceReset = false) {
+export async function accessSecretStorage(
+    func = async () => { }, opts = {},
+) {
     const cli = MatrixClientPeg.get();
     secretStorageBeingAccessed = true;
+    passphraseOnlyOption = opts.passphraseOnly;
+    secretStorageKeys = Object.assign({}, opts.withKeys || {});
     try {
-        if (!await cli.hasSecretStorageKey() || forceReset) {
+        if (!await cli.hasSecretStorageKey() || opts.forceReset) {
             // This dialog calls bootstrap itself after guiding the user through
             // passphrase creation.
             const { finished } = Modal.createTrackedDialogAsync('Create Secret Storage dialog', '',
                 import("./async-components/views/dialogs/secretstorage/CreateSecretStorageDialog"),
                 {
-                    force: forceReset,
+                    force: opts.forceReset,
                 },
                 null, /* priority = */ false, /* static = */ true,
             );
@@ -263,5 +274,6 @@ export async function accessSecretStorage(func = async () => { }, forceReset = f
         if (!isCachingAllowed()) {
             secretStorageKeys = {};
         }
+        passphraseOnlyOption = null;
     }
 }