Apply some of the newer styling to passphrase / recovery key entry

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

@@ -19,11 +19,6 @@ limitations under the License.
     height: 30px;
 }
 
-.mx_AccessSecretStorageDialog_primaryContainer {
-    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
-    padding: 20px;
-}
-
 .mx_AccessSecretStorageDialog_passPhraseInput,
 .mx_AccessSecretStorageDialog_recoveryKeyInput {
     width: 300px;

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

@@ -118,10 +118,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
         let content;
         let title;
+        let headerImage;
         if (hasPassphrase && !this.state.forceRecoveryKey) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-            title = _t("Enter recovery passphrase");
+            title = _t("Security Phrase");
+            headerImage = require("../../../../../res/img/feather-customised/secure-phrase.svg");
 
             let keyStatus;
             if (this.state.keyMatches === false) {
@@ -137,12 +139,15 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
+                    "Enter your Security Phrase or <button>Use your Security Key</button> to continue.", {},
-                    { b: sub => <b>{sub}</b> },
+                    {
-                )}</p>
+                        button: s => <AccessibleButton className="mx_linkButton"
-                <p>{_t(
+                            element="span"
-                    "Access your secure message history and your cross-signing " +
+                            onClick={this._onUseRecoveryKeyClick}
-                    "identity for verifying other sessions by entering your recovery passphrase.",
+                        >
+                            {s}
+                        </AccessibleButton>,
+                    },
                 )}</p>
 
                 <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
@@ -156,7 +161,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     />
                     {keyStatus}
                     <DialogButtons
-                        primaryButton={_t('Next')}
+                        primaryButton={_t('Continue')}
                         onPrimaryButtonClick={this._onPassPhraseNext}
                         hasCancel={true}
                         onCancel={this._onCancel}
@@ -164,29 +169,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         primaryDisabled={this.state.passPhrase.length === 0}
                     />
                 </form>
-                {_t(
-                    "If you've forgotten your recovery passphrase you can "+
-                    "<button1>use your recovery key</button1> or " +
-                    "<button2>set up new recovery options</button2>."
-                , {}, {
-                    button1: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onUseRecoveryKeyClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                    button2: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
             </div>;
         } else {
-            title = _t("Enter recovery key");
+            title = _t("Security Key");
+            headerImage = require("../../../../../res/img/feather-customised/secure-backup.svg");
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
             let keyStatus;
             if (this.state.recoveryKey.length === 0) {
@@ -209,14 +196,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             }
 
             content = <div>
-                <p>{_t(
+                <p>{_t("Use your Security Key to continue.")}</p>
-                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
-                    { b: sub => <b>{sub}</b> },
-                )}</p>
-                <p>{_t(
-                    "Access your secure message history and your cross-signing " +
-                    "identity for verifying other sessions by entering your recovery key.",
-                )}</p>
 
                 <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onRecoveryKeyNext}>
                     <input className="mx_AccessSecretStorageDialog_recoveryKeyInput"
@@ -226,7 +206,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     />
                     {keyStatus}
                     <DialogButtons
-                        primaryButton={_t('Next')}
+                        primaryButton={_t('Continue')}
                         onPrimaryButtonClick={this._onRecoveryKeyNext}
                         hasCancel={true}
                         onCancel={this._onCancel}
@@ -234,22 +214,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         primaryDisabled={!this.state.recoveryKeyValid}
                     />
                 </form>
-                {_t(
-                    "If you've forgotten your recovery key you can "+
-                    "<button>set up new recovery options</button>."
-                , {}, {
-                    button: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
             </div>;
         }
 
         return (
             <BaseDialog className='mx_AccessSecretStorageDialog'
+                headerImage={headerImage}
                 onFinished={this.props.onFinished}
                 title={title}
             >

src/i18n/strings/en_EN.json

@@ -1782,16 +1782,14 @@
     "Remember my selection for this widget": "Remember my selection for this widget",
     "Allow": "Allow",
     "Deny": "Deny",
-    "Enter recovery passphrase": "Enter recovery passphrase",
+    "Security Phrase": "Security Phrase",
     "Unable to access secret storage. Please verify that you entered the correct recovery passphrase.": "Unable to access secret storage. Please verify that you entered the correct recovery passphrase.",
-    "<b>Warning</b>: You should only do this on a trusted computer.": "<b>Warning</b>: You should only do this on a trusted computer.",
+    "Enter your Security Phrase or <button>Use your Security Key</button> to continue.": "Enter your Security Phrase or <button>Use your Security Key</button> to continue.",
-    "Access your secure message history and your cross-signing identity for verifying other sessions by entering your recovery passphrase.": "Access your secure message history and your cross-signing identity for verifying other sessions by entering your recovery passphrase.",
+    "Security Key": "Security Key",
-    "If you've forgotten your recovery passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>.": "If you've forgotten your recovery passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>.",
-    "Enter recovery key": "Enter 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.",
+    "Use your Security Key to continue.": "Use your Security Key to continue.",
     "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>.",
     "Restoring keys from backup": "Restoring keys from backup",
     "Fetching keys from server...": "Fetching keys from server...",
@@ -1806,9 +1804,11 @@
     "Keys restored": "Keys restored",
     "Failed to decrypt %(failedCount)s sessions!": "Failed to decrypt %(failedCount)s sessions!",
     "Successfully restored %(sessionCount)s keys": "Successfully restored %(sessionCount)s keys",
+    "Enter recovery passphrase": "Enter recovery passphrase",
     "<b>Warning</b>: you should only set up key backup from a trusted computer.": "<b>Warning</b>: you should only set up key backup from a trusted computer.",
     "Access your secure message history and set up secure messaging by entering your recovery passphrase.": "Access your secure message history and set up secure messaging by entering your recovery passphrase.",
     "If you've forgotten your recovery passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>": "If you've forgotten your recovery passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>",
+    "Enter recovery key": "Enter recovery key",
     "<b>Warning</b>: You should only set up key backup from a trusted computer.": "<b>Warning</b>: You should only set up key backup from a trusted computer.",
     "Access your secure message history and set up secure messaging by entering your recovery key.": "Access your secure message history and set up secure messaging 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>",
@@ -2195,7 +2195,6 @@
     "Copy": "Copy",
     "Unable to query secret storage status": "Unable to query secret storage status",
     "Retry": "Retry",
-    "You can now verify your other devices, and other users to keep your chats safe.": "You can now verify your other devices, and other users to keep your chats safe.",
     "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.": "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.",
     "You can also set up Secure Backup & manage your keys in Settings.": "You can also set up Secure Backup & manage your keys in Settings.",
     "Set up Secure backup": "Set up Secure backup",
@@ -2203,7 +2202,6 @@
     "Set a Security Phrase": "Set a Security Phrase",
     "Confirm Security Phrase": "Confirm Security Phrase",
     "Save your Security Key": "Save your Security Key",
-    "You're done!": "You're done!",
     "Unable to set up secret storage": "Unable to set up secret storage",
     "We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.",
     "For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",