Add dialogs for creating and accessing secret storage

This adds dialogs for creating and accessing secret storage via a passphrase or
recovery key. These flows are adapted from the ones used for key backup.

res/css/_components.scss

@@ -81,6 +81,8 @@
 @import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
 @import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
 @import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
+@import "./views/dialogs/secretstorage/_AccessSecretStorageDialog.scss";
+@import "./views/dialogs/secretstorage/_CreateSecretStorageDialog.scss";
 @import "./views/directory/_NetworkDropdown.scss";
 @import "./views/elements/_AccessibleButton.scss";
 @import "./views/elements/_AddressSelector.scss";

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

@@ -0,0 +1,34 @@
+/*
+Copyright 2018 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_AccessSecretStorageDialog_keyStatus {
+    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;
+    border: 1px solid $accent-color;
+    border-radius: 5px;
+    padding: 10px;
+}
+

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

@@ -0,0 +1,88 @@
+/*
+Copyright 2018 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CreateSecretStorageDialog .mx_Dialog_title {
+    /* TODO: Consider setting this for all dialog titles. */
+    margin-bottom: 1em;
+}
+
+.mx_CreateSecretStorageDialog_primaryContainer {
+    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
+    padding: 20px;
+}
+
+.mx_CreateSecretStorageDialog_primaryContainer::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+.mx_CreateSecretStorageDialog_passPhraseContainer {
+    display: flex;
+    align-items: start;
+}
+
+.mx_CreateSecretStorageDialog_passPhraseHelp {
+    flex: 1;
+    height: 85px;
+    margin-left: 20px;
+    font-size: 80%;
+}
+
+.mx_CreateSecretStorageDialog_passPhraseHelp progress {
+    width: 100%;
+}
+
+.mx_CreateSecretStorageDialog_passPhraseInput {
+    flex: none;
+    width: 250px;
+    border: 1px solid $accent-color;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 1em;
+}
+
+.mx_CreateSecretStorageDialog_passPhraseMatch {
+    margin-left: 20px;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyHeader {
+    margin-bottom: 1em;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyContainer {
+    display: flex;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKey {
+    width: 262px;
+    padding: 20px;
+    color: $info-plinth-fg-color;
+    background-color: $info-plinth-bg-color;
+    margin-right: 12px;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyButtons {
+    flex: 1;
+    display: flex;
+    align-items: center;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
+    flex: 1;
+    white-space: nowrap;
+}

src/MatrixClientPeg.js

@@ -30,6 +30,8 @@ import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
 import MatrixClientBackedSettingsHandler from "./settings/handlers/MatrixClientBackedSettingsHandler";
 import * as StorageManager from './utils/StorageManager';
 import IdentityAuthClient from './IdentityAuthClient';
+import { deriveKey } from 'matrix-js-sdk/lib/crypto/key_passphrase';
+import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto/recoverykey';
 
 interface MatrixClientCreds {
     homeserverUrl: string,
@@ -224,13 +226,41 @@ class MatrixClientPeg {
             // This stores the cross-signing private keys in memory for the JS SDK. They
             // are also persisted to Secure Secret Storage in account data by
             // the JS SDK when created.
+            const keys = {};
+            opts.cryptoCallbacks = {
+                // XXX: This flow should maybe be reworked to allow retries in
+                // case of typos, etc.
+                getSecretStorageKey: async keyInfos => {
+                    const keyInfoEntries = Object.entries(keyInfos);
+                    if (keyInfoEntries.length > 1) {
+                        throw new Error("Multiple storage key requests not implemented");
+                    }
+                    const [name, info] = keyInfoEntries[0];
+                    const AccessSecretStorageDialog =
+                        sdk.getComponent("dialogs.secretstorage.AccessSecretStorageDialog");
+                    const { finished } = Modal.createTrackedDialog("Access Secret Storage dialog", "",
+                        AccessSecretStorageDialog, {
+                            keyInfo: info,
+                        },
+                    );
+                    const [input] = await finished;
+                    if (!input) {
+                        throw new Error("Secret storage access canceled");
+                    }
+                    let key;
+                    const { passphrase } = info;
+                    if (passphrase) {
+                        key = await deriveKey(input, passphrase.salt, passphrase.iterations);
+                    } else {
+                        key = decodeRecoveryKey(input);
+                    }
+                    return [name, key];
+                },
                 // XXX: On desktop platforms, we plan to store only the SSSS default
                 // key in a secure enclave, while the cross-signing private keys
                 // will still be retrieved from SSSS, so it's unclear that we
                 // actually need these cross-signing application callbacks for Riot.
                 // Should the JS SDK default to in-memory storage of these itself?
-            const keys = {};
-            opts.cryptoCallbacks = {
                 getCrossSigningKey: k => keys[k],
                 saveCrossSigningKeys: newKeys => Object.assign(keys, newKeys),
             };

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

@@ -268,7 +268,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
 
         return <div>
             <p>{_t(
-                "<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.", {},
                 { b: sub => <b>{sub}</b> },
             )}</p>
             <p>{_t(
@@ -382,7 +382,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                 "access to your encrypted messages if you forget your passphrase.",
             )}</p>
             <p>{_t(
-                "Keep your recovery key somewhere very secure, like a password manager (or a safe)",
+                "Keep your recovery key somewhere very secure, like a password manager (or a safe).",
             )}</p>
             <p>{bodyText}</p>
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
@@ -410,12 +410,12 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         let introText;
         if (this.state.copied) {
             introText = _t(
-                "Your Recovery Key has been <b>copied to your clipboard</b>, paste it to:",
+                "Your recovery key has been <b>copied to your clipboard</b>, paste it to:",
                 {}, {b: s => <b>{s}</b>},
             );
         } else if (this.state.downloaded) {
             introText = _t(
-                "Your Recovery Key is in your <b>Downloads</b> folder.",
+                "Your recovery key is in your <b>Downloads</b> folder.",
                 {}, {b: s => <b>{s}</b>},
             );
         }

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

@@ -0,0 +1,564 @@
+/*
+Copyright 2018, 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../../index';
+import MatrixClientPeg from '../../../../MatrixClientPeg';
+import { scorePassword } from '../../../../utils/PasswordScorer';
+import FileSaver from 'file-saver';
+import { _t } from '../../../../languageHandler';
+import Modal from '../../../../Modal';
+
+const PHASE_PASSPHRASE = 0;
+const PHASE_PASSPHRASE_CONFIRM = 1;
+const PHASE_SHOWKEY = 2;
+const PHASE_KEEPITSAFE = 3;
+const PHASE_STORING = 4;
+const PHASE_DONE = 5;
+const PHASE_OPTOUT_CONFIRM = 6;
+
+const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
+const PASSPHRASE_FEEDBACK_DELAY = 500; // How long after keystroke to offer passphrase feedback, ms.
+
+// XXX: copied from ShareDialog: factor out into utils
+function selectText(target) {
+    const range = document.createRange();
+    range.selectNodeContents(target);
+
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+
+/*
+ * Walks the user through the process of creating a passphrase to guard Secure
+ * Secret Storage in account data.
+ */
+export default class CreateSecretStorageDialog extends React.PureComponent {
+    constructor(props) {
+        super(props);
+
+        this._keyInfo = null;
+        this._encodedRecoveryKey = null;
+        this._recoveryKeyNode = null;
+        this._setZxcvbnResultTimeout = null;
+
+        this.state = {
+            phase: PHASE_PASSPHRASE,
+            passPhrase: '',
+            passPhraseConfirm: '',
+            copied: false,
+            downloaded: false,
+            zxcvbnResult: null,
+            setPassPhrase: false,
+        };
+    }
+
+    componentWillUnmount() {
+        if (this._setZxcvbnResultTimeout !== null) {
+            clearTimeout(this._setZxcvbnResultTimeout);
+        }
+    }
+
+    _collectRecoveryKeyNode = (n) => {
+        this._recoveryKeyNode = n;
+    }
+
+    _onCopyClick = () => {
+        selectText(this._recoveryKeyNode);
+        const successful = document.execCommand('copy');
+        if (successful) {
+            this.setState({
+                copied: true,
+                phase: PHASE_KEEPITSAFE,
+            });
+        }
+    }
+
+    _onDownloadClick = () => {
+        const blob = new Blob([this._encodedRecoveryKey], {
+            type: 'text/plain;charset=us-ascii',
+        });
+        FileSaver.saveAs(blob, 'recovery-key.txt');
+
+        this.setState({
+            downloaded: true,
+            phase: PHASE_KEEPITSAFE,
+        });
+    }
+
+    _bootstrapSecretStorage = async () => {
+        this.setState({
+            phase: PHASE_STORING,
+            error: null,
+        });
+        const cli = MatrixClientPeg.get();
+        try {
+            const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
+            await cli.bootstrapSecretStorage({
+                authUploadDeviceSigningKeys: async (makeRequest) => {
+                    const { finished } = Modal.createTrackedDialog(
+                        'Cross-signing keys dialog', '', InteractiveAuthDialog,
+                        {
+                            title: _t("Send cross-signing keys to homeserver"),
+                            matrixClient: MatrixClientPeg.get(),
+                            makeRequest,
+                        },
+                    );
+                    const [confirmed] = await finished;
+                    if (!confirmed) {
+                        throw new Error("Cross-signing key upload auth canceled");
+                    }
+                },
+                createSecretStorageKey: async () => this._keyInfo,
+            });
+            this.setState({
+                phase: PHASE_DONE,
+            });
+        } catch (e) {
+            this.setState({ error: e });
+            console.error("Error bootstrapping secret storage", e);
+        }
+    }
+
+    _onCancel = () => {
+        this.props.onFinished(false);
+    }
+
+    _onDone = () => {
+        this.props.onFinished(true);
+    }
+
+    _onOptOutClick = () => {
+        this.setState({phase: PHASE_OPTOUT_CONFIRM});
+    }
+
+    _onSetUpClick = () => {
+        this.setState({phase: PHASE_PASSPHRASE});
+    }
+
+    _onSkipPassPhraseClick = async () => {
+        const [keyInfo, encodedRecoveryKey] =
+            await MatrixClientPeg.get().createRecoveryKeyFromPassphrase();
+        this._keyInfo = keyInfo;
+        this._encodedRecoveryKey = encodedRecoveryKey;
+        this.setState({
+            copied: false,
+            downloaded: false,
+            phase: PHASE_SHOWKEY,
+        });
+    }
+
+    _onPassPhraseNextClick = () => {
+        this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
+    }
+
+    _onPassPhraseKeyPress = async (e) => {
+        if (e.key === 'Enter') {
+            // If we're waiting for the timeout before updating the result at this point,
+            // skip ahead and do it now, otherwise we'll deny the attempt to proceed
+            // even if the user entered a valid passphrase
+            if (this._setZxcvbnResultTimeout !== null) {
+                clearTimeout(this._setZxcvbnResultTimeout);
+                this._setZxcvbnResultTimeout = null;
+                await new Promise((resolve) => {
+                    this.setState({
+                        zxcvbnResult: scorePassword(this.state.passPhrase),
+                    }, resolve);
+                });
+            }
+            if (this._passPhraseIsValid()) {
+                this._onPassPhraseNextClick();
+            }
+        }
+    }
+
+    _onPassPhraseConfirmNextClick = async () => {
+        const [keyInfo, encodedRecoveryKey] =
+            await MatrixClientPeg.get().createRecoveryKeyFromPassphrase(this.state.passPhrase);
+        this._keyInfo = keyInfo;
+        this._encodedRecoveryKey = encodedRecoveryKey;
+        this.setState({
+            setPassPhrase: true,
+            copied: false,
+            downloaded: false,
+            phase: PHASE_SHOWKEY,
+        });
+    }
+
+    _onPassPhraseConfirmKeyPress = (e) => {
+        if (e.key === 'Enter' && this.state.passPhrase === this.state.passPhraseConfirm) {
+            this._onPassPhraseConfirmNextClick();
+        }
+    }
+
+    _onSetAgainClick = () => {
+        this.setState({
+            passPhrase: '',
+            passPhraseConfirm: '',
+            phase: PHASE_PASSPHRASE,
+            zxcvbnResult: null,
+        });
+    }
+
+    _onKeepItSafeBackClick = () => {
+        this.setState({
+            phase: PHASE_SHOWKEY,
+        });
+    }
+
+    _onPassPhraseChange = (e) => {
+        this.setState({
+            passPhrase: e.target.value,
+        });
+
+        if (this._setZxcvbnResultTimeout !== null) {
+            clearTimeout(this._setZxcvbnResultTimeout);
+        }
+        this._setZxcvbnResultTimeout = setTimeout(() => {
+            this._setZxcvbnResultTimeout = null;
+            this.setState({
+                // precompute this and keep it in state: zxcvbn is fast but
+                // we use it in a couple of different places so no point recomputing
+                // it unnecessarily.
+                zxcvbnResult: scorePassword(this.state.passPhrase),
+            });
+        }, PASSPHRASE_FEEDBACK_DELAY);
+    }
+
+    _onPassPhraseConfirmChange = (e) => {
+        this.setState({
+            passPhraseConfirm: e.target.value,
+        });
+    }
+
+    _passPhraseIsValid() {
+        return this.state.zxcvbnResult && this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE;
+    }
+
+    _renderPhasePassPhrase() {
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        let strengthMeter;
+        let helpText;
+        if (this.state.zxcvbnResult) {
+            if (this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE) {
+                helpText = _t("Great! This passphrase looks strong enough.");
+            } else {
+                const suggestions = [];
+                for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) {
+                    suggestions.push(<div key={i}>{this.state.zxcvbnResult.feedback.suggestions[i]}</div>);
+                }
+                const suggestionBlock = <div>{suggestions.length > 0 ? suggestions : _t("Keep going...")}</div>;
+
+                helpText = <div>
+                    {this.state.zxcvbnResult.feedback.warning}
+                    {suggestionBlock}
+                </div>;
+            }
+            strengthMeter = <div>
+                <progress max={PASSWORD_MIN_SCORE} value={this.state.zxcvbnResult.score} />
+            </div>;
+        }
+
+        return <div>
+            <p>{_t(
+                "<b>Warning</b>: You should only set up secret storage from a trusted computer.", {},
+                { b: sub => <b>{sub}</b> },
+            )}</p>
+            <p>{_t(
+                "We'll use secret storage to optionally store an encrypted copy of " +
+                "your cross-signing identity for verifying other devices and message " +
+                "keys on our server. Protect your access to encrypted messages with a " +
+                "passphrase to keep it secure.",
+            )}</p>
+            <p>{_t("For maximum security, this should be different from your account password.")}</p>
+
+            <div className="mx_CreateSecretStorageDialog_primaryContainer">
+                <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
+                    <input type="password"
+                        onChange={this._onPassPhraseChange}
+                        onKeyPress={this._onPassPhraseKeyPress}
+                        value={this.state.passPhrase}
+                        className="mx_CreateSecretStorageDialog_passPhraseInput"
+                        placeholder={_t("Enter a passphrase...")}
+                        autoFocus={true}
+                    />
+                    <div className="mx_CreateSecretStorageDialog_passPhraseHelp">
+                        {strengthMeter}
+                        {helpText}
+                    </div>
+                </div>
+            </div>
+
+            <DialogButtons primaryButton={_t('Next')}
+                onPrimaryButtonClick={this._onPassPhraseNextClick}
+                hasCancel={false}
+                disabled={!this._passPhraseIsValid()}
+            />
+
+            <details>
+                <summary>{_t("Advanced")}</summary>
+                <p><button onClick={this._onSkipPassPhraseClick} >
+                    {_t("Set up with a recovery key")}
+                </button></p>
+            </details>
+        </div>;
+    }
+
+    _renderPhasePassPhraseConfirm() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        let matchText;
+        if (this.state.passPhraseConfirm === this.state.passPhrase) {
+            matchText = _t("That matches!");
+        } else if (!this.state.passPhrase.startsWith(this.state.passPhraseConfirm)) {
+            // only tell them they're wrong if they've actually gone wrong.
+            // Security concious readers will note that if you left riot-web unattended
+            // on this screen, this would make it easy for a malicious person to guess
+            // your passphrase one letter at a time, but they could get this faster by
+            // just opening the browser's developer tools and reading it.
+            // Note that not having typed anything at all will not hit this clause and
+            // fall through so empty box === no hint.
+            matchText = _t("That doesn't match.");
+        }
+
+        let passPhraseMatch = null;
+        if (matchText) {
+            passPhraseMatch = <div className="mx_CreateSecretStorageDialog_passPhraseMatch">
+                <div>{matchText}</div>
+                <div>
+                    <AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
+                        {_t("Go back to set it again.")}
+                    </AccessibleButton>
+                </div>
+            </div>;
+        }
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return <div>
+            <p>{_t(
+                "Please enter your passphrase a second time to confirm.",
+            )}</p>
+            <div className="mx_CreateSecretStorageDialog_primaryContainer">
+                <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
+                    <div>
+                        <input type="password"
+                            onChange={this._onPassPhraseConfirmChange}
+                            onKeyPress={this._onPassPhraseConfirmKeyPress}
+                            value={this.state.passPhraseConfirm}
+                            className="mx_CreateSecretStorageDialog_passPhraseInput"
+                            placeholder={_t("Repeat your passphrase...")}
+                            autoFocus={true}
+                        />
+                    </div>
+                    {passPhraseMatch}
+                </div>
+            </div>
+            <DialogButtons primaryButton={_t('Next')}
+                onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
+                hasCancel={false}
+                disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
+            />
+        </div>;
+    }
+
+    _renderPhaseShowKey() {
+        let bodyText;
+        if (this.state.setPassPhrase) {
+            bodyText = _t(
+                "As a safety net, you can use it to restore your access to encrypted " +
+                "messages if you forget your passphrase.",
+            );
+        } else {
+            bodyText = _t(
+                "As a safety net, you can use it to restore your access to encrypted " +
+                "messages.",
+            );
+        }
+
+        return <div>
+            <p>{_t(
+                "Your recovery key is a safety net - you can use it to restore " +
+                "access to your encrypted messages if you forget your passphrase.",
+            )}</p>
+            <p>{_t(
+                "Keep your recovery key somewhere very secure, like a password manager (or a safe).",
+            )}</p>
+            <p>{bodyText}</p>
+            <div className="mx_CreateSecretStorageDialog_primaryContainer">
+                <div className="mx_CreateSecretStorageDialog_recoveryKeyHeader">
+                    {_t("Your Recovery Key")}
+                </div>
+                <div className="mx_CreateSecretStorageDialog_recoveryKeyContainer">
+                    <div className="mx_CreateSecretStorageDialog_recoveryKey">
+                        <code ref={this._collectRecoveryKeyNode}>{this._encodedRecoveryKey}</code>
+                    </div>
+                    <div className="mx_CreateSecretStorageDialog_recoveryKeyButtons">
+                        <button className="mx_Dialog_primary" onClick={this._onCopyClick}>
+                            {_t("Copy to clipboard")}
+                        </button>
+                        <button className="mx_Dialog_primary" onClick={this._onDownloadClick}>
+                            {_t("Download")}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>;
+    }
+
+    _renderPhaseKeepItSafe() {
+        let introText;
+        if (this.state.copied) {
+            introText = _t(
+                "Your recovery key has been <b>copied to your clipboard</b>, paste it to:",
+                {}, {b: s => <b>{s}</b>},
+            );
+        } else if (this.state.downloaded) {
+            introText = _t(
+                "Your recovery key is in your <b>Downloads</b> folder.",
+                {}, {b: s => <b>{s}</b>},
+            );
+        }
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return <div>
+            {introText}
+            <ul>
+                <li>{_t("<b>Print it</b> and store it somewhere safe", {}, {b: s => <b>{s}</b>})}</li>
+                <li>{_t("<b>Save it</b> on a USB key or backup drive", {}, {b: s => <b>{s}</b>})}</li>
+                <li>{_t("<b>Copy it</b> to your personal cloud storage", {}, {b: s => <b>{s}</b>})}</li>
+            </ul>
+            <DialogButtons primaryButton={_t("OK")}
+                onPrimaryButtonClick={this._bootstrapSecretStorage}
+                hasCancel={false}>
+                <button onClick={this._onKeepItSafeBackClick}>{_t("Back")}</button>
+            </DialogButtons>
+        </div>;
+    }
+
+    _renderBusyPhase(text) {
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+        return <div>
+            <Spinner />
+        </div>;
+    }
+
+    _renderPhaseDone() {
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return <div>
+            <p>{_t(
+                "Your access to encrypted messages is now protected.",
+            )}</p>
+            <DialogButtons primaryButton={_t('OK')}
+                onPrimaryButtonClick={this._onDone}
+                hasCancel={false}
+            />
+        </div>;
+    }
+
+    _renderPhaseOptOutConfirm() {
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return <div>
+            {_t(
+                "Without setting up secret storage, you won't be able to restore your " +
+                "access to encrypted messages or your cross-signing identity for " +
+                "verifying other devices if you log out or use another device.",
+        )}
+            <DialogButtons primaryButton={_t('Set up secret storage')}
+                onPrimaryButtonClick={this._onSetUpClick}
+                hasCancel={false}
+            >
+                <button onClick={this._onCancel}>I understand, continue without</button>
+            </DialogButtons>
+        </div>;
+    }
+
+    _titleForPhase(phase) {
+        switch (phase) {
+            case PHASE_PASSPHRASE:
+                return _t('Secure your encrypted messages with a passphrase');
+            case PHASE_PASSPHRASE_CONFIRM:
+                return _t('Confirm your passphrase');
+            case PHASE_OPTOUT_CONFIRM:
+                return _t('Warning!');
+            case PHASE_SHOWKEY:
+                return _t('Recovery key');
+            case PHASE_KEEPITSAFE:
+                return _t('Keep it safe');
+            case PHASE_STORING:
+                return _t('Storing secrets...');
+            case PHASE_DONE:
+                return _t('Success!');
+            default:
+                return null;
+        }
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+
+        let content;
+        if (this.state.error) {
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+            content = <div>
+                <p>{_t("Unable to set up secret storage")}</p>
+                <div className="mx_Dialog_buttons">
+                    <DialogButtons primaryButton={_t('Retry')}
+                        onPrimaryButtonClick={this._bootstrapSecretStorage}
+                        hasCancel={true}
+                        onCancel={this._onCancel}
+                    />
+                </div>
+            </div>;
+        } else {
+            switch (this.state.phase) {
+                case PHASE_PASSPHRASE:
+                    content = this._renderPhasePassPhrase();
+                    break;
+                case PHASE_PASSPHRASE_CONFIRM:
+                    content = this._renderPhasePassPhraseConfirm();
+                    break;
+                case PHASE_SHOWKEY:
+                    content = this._renderPhaseShowKey();
+                    break;
+                case PHASE_KEEPITSAFE:
+                    content = this._renderPhaseKeepItSafe();
+                    break;
+                case PHASE_STORING:
+                    content = this._renderBusyPhase();
+                    break;
+                case PHASE_DONE:
+                    content = this._renderPhaseDone();
+                    break;
+                case PHASE_OPTOUT_CONFIRM:
+                    content = this._renderPhaseOptOutConfirm();
+                    break;
+            }
+        }
+
+        return (
+            <BaseDialog className='mx_CreateSecretStorageDialog'
+                onFinished={this.props.onFinished}
+                title={this._titleForPhase(this.state.phase)}
+                hasCancel={[PHASE_PASSPHRASE, PHASE_DONE].includes(this.state.phase)}
+            >
+            <div>
+                {content}
+            </div>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js

@@ -27,7 +27,7 @@ import {Key} from "../../../../Keyboard";
 const RESTORE_TYPE_PASSPHRASE = 0;
 const RESTORE_TYPE_RECOVERYKEY = 1;
 
-/**
+/*
  * Dialog for restoring e2e keys from a backup and the user's recovery key
  */
 export default class RestoreKeyBackupDialog extends React.PureComponent {
@@ -47,7 +47,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._loadBackupStatus();
     }
 
@@ -296,7 +296,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: you should only set up key backup " +
+                    "<b>Warning</b>: You should only set up key backup " +
                     "from a trusted computer.", {},
                     { b: sub => <b>{sub}</b> },
                 )}</p>
@@ -322,7 +322,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     />
                 </div>
                 {_t(
-                    "If you've forgotten your recovery passphrase you can "+
+                    "If you've forgotten your recovery key you can "+
                     "<button>set up new recovery options</button>"
                 , {}, {
                     button: s => <AccessibleButton className="mx_linkButton"

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

@@ -0,0 +1,224 @@
+/*
+Copyright 2018, 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from "prop-types";
+import sdk from '../../../../index';
+import MatrixClientPeg from '../../../../MatrixClientPeg';
+
+import { _t } from '../../../../languageHandler';
+import {Key} from "../../../../Keyboard";
+
+/*
+ * Access Secure Secret Storage by requesting the user's passphrase.
+ */
+export default class AccessSecretStorageDialog extends React.PureComponent {
+    static propTypes = {
+        // { passphrase, pubkey }
+        keyInfo: PropTypes.object.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            recoveryKey: "",
+            recoveryKeyValid: false,
+            forceRecoveryKey: false,
+            passPhrase: '',
+        };
+    }
+
+    _onCancel = () => {
+        this.props.onFinished(false);
+    }
+
+    _onUseRecoveryKeyClick = () => {
+        this.setState({
+            forceRecoveryKey: true,
+        });
+    }
+
+    _onResetRecoveryClick = () => {
+        this.props.onFinished(false);
+        throw new Error("Resetting secret storage unimplemented");
+    }
+
+    _onRecoveryKeyChange = (e) => {
+        this.setState({
+            recoveryKey: e.target.value,
+            recoveryKeyValid: MatrixClientPeg.get().isValidRecoveryKey(e.target.value),
+        });
+    }
+
+    _onPassPhraseNext = async () => {
+        this.props.onFinished(this.state.passPhrase);
+    }
+
+    _onRecoveryKeyNext = async () => {
+        this.props.onFinished(this.state.recoveryKey);
+    }
+
+    _onPassPhraseChange = (e) => {
+        this.setState({
+            passPhrase: e.target.value,
+        });
+    }
+
+    _onPassPhraseKeyPress = (e) => {
+        if (e.key === Key.ENTER) {
+            this._onPassPhraseNext();
+        }
+    }
+
+    _onRecoveryKeyKeyPress = (e) => {
+        if (e.key === Key.ENTER && this.state.recoveryKeyValid) {
+            this._onRecoveryKeyNext();
+        }
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+
+        const hasPassphrase = (
+            this.props.keyInfo &&
+            this.props.keyInfo.passphrase &&
+            this.props.keyInfo.passphrase.salt &&
+            this.props.keyInfo.passphrase.iterations
+        );
+
+        let content;
+        let title;
+        if (hasPassphrase && !this.state.forceRecoveryKey) {
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+            const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+            title = _t("Enter secret storage passphrase");
+            content = <div>
+                <p>{_t(
+                    "<b>Warning</b>: You should only access secret storage " +
+                    "from a trusted computer.", {},
+                    { b: sub => <b>{sub}</b> },
+                )}</p>
+                <p>{_t(
+                    "Access your secure message history and your cross-signing " +
+                    "identity for verifying other devices by entering your passphrase.",
+                )}</p>
+
+                <div className="mx_AccessSecretStorageDialog_primaryContainer">
+                    <input type="password"
+                        className="mx_AccessSecretStorageDialog_passPhraseInput"
+                        onChange={this._onPassPhraseChange}
+                        onKeyPress={this._onPassPhraseKeyPress}
+                        value={this.state.passPhrase}
+                        autoFocus={true}
+                    />
+                    <DialogButtons primaryButton={_t('Next')}
+                        onPrimaryButtonClick={this._onPassPhraseNext}
+                        hasCancel={true}
+                        onCancel={this._onCancel}
+                        focus={false}
+                    />
+                </div>
+                {_t(
+                    "If you've forgotten your 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 secret storage recovery key");
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+            const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+            let keyStatus;
+            if (this.state.recoveryKey.length === 0) {
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus"></div>;
+            } else if (this.state.recoveryKeyValid) {
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
+                    {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
+                </div>;
+            } else {
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
+                    {"\uD83D\uDC4E "}{_t("Not a valid recovery key")}
+                </div>;
+            }
+
+            content = <div>
+                <p>{_t(
+                    "<b>Warning</b>: You should only access secret storage " +
+                    "from a trusted computer.", {},
+                    { b: sub => <b>{sub}</b> },
+                )}</p>
+                <p>{_t(
+                    "Access your secure message history and your cross-signing " +
+                    "identity for verifying other devices by entering your recovery key.",
+                )}</p>
+
+                <div className="mx_AccessSecretStorageDialog_primaryContainer">
+                    <input className="mx_AccessSecretStorageDialog_recoveryKeyInput"
+                        onChange={this._onRecoveryKeyChange}
+                        onKeyPress={this._onRecoveryKeyKeyPress}
+                        value={this.state.recoveryKey}
+                        autoFocus={true}
+                    />
+                    {keyStatus}
+                    <DialogButtons primaryButton={_t('Next')}
+                        onPrimaryButtonClick={this._onRecoveryKeyNext}
+                        hasCancel={true}
+                        onCancel={this._onCancel}
+                        focus={false}
+                        primaryDisabled={!this.state.recoveryKeyValid}
+                    />
+                </div>
+                {_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'
+                onFinished={this.props.onFinished}
+                title={title}
+            >
+            <div>
+                {content}
+            </div>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/settings/CrossSigningPanel.js

@@ -24,6 +24,9 @@ import Modal from '../../../Modal';
 export default class CrossSigningPanel extends React.PureComponent {
     constructor(props) {
         super(props);
+
+        this._unmounted = false;
+
         this.state = {
             error: null,
             ...this._getUpdatedStatus(),
@@ -36,6 +39,7 @@ export default class CrossSigningPanel extends React.PureComponent {
     }
 
     componentWillUnmount() {
+        this._unmounted = true;
         const cli = MatrixClientPeg.get();
         if (!cli) return;
         cli.removeListener("accountData", this.onAccountData);
@@ -64,11 +68,32 @@ export default class CrossSigningPanel extends React.PureComponent {
         };
     }
 
+    /**
+     * Bootstrapping secret storage may take one of these paths:
+     * 1. Create secret storage from a passphrase and store cross-signing keys
+     *    in secret storage.
+     * 2. Access existing secret storage by requesting passphrase and accessing
+     *    cross-signing keys as needed.
+     * 3. All keys are loaded and there's nothing to do.
+     */
     _bootstrapSecureSecretStorage = async () => {
         this.setState({ error: null });
+        const cli = MatrixClientPeg.get();
         try {
+            if (!cli.hasSecretStorageKey()) {
+                // 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"),
+                    null, null, /* priority = */ false, /* static = */ true,
+                );
+                const [confirmed] = await finished;
+                if (!confirmed) {
+                    throw new Error("Secret storage creation canceled");
+                }
+            } else {
                 const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
-            await MatrixClientPeg.get().bootstrapSecretStorage({
+                await cli.bootstrapSecretStorage({
                     authUploadDeviceSigningKeys: async (makeRequest) => {
                         const { finished } = Modal.createTrackedDialog(
                             'Cross-signing keys dialog', '', InteractiveAuthDialog,
@@ -84,10 +109,12 @@ export default class CrossSigningPanel extends React.PureComponent {
                         }
                     },
                 });
+            }
         } catch (e) {
             this.setState({ error: e });
-            console.error(e);
+            console.error("Error bootstrapping secret storage", e);
         }
+        if (this._unmounted) return;
         this.setState(this._getUpdatedStatus());
     }
 

src/i18n/strings/en_EN.json

@@ -1517,6 +1517,15 @@
     "Remember my selection for this widget": "Remember my selection for this widget",
     "Allow": "Allow",
     "Deny": "Deny",
+    "Enter secret storage passphrase": "Enter secret storage passphrase",
+    "<b>Warning</b>: You should only access secret storage from a trusted computer.": "<b>Warning</b>: You should only access secret storage from a trusted computer.",
+    "Access your secure message history and your cross-signing identity for verifying other devices by entering your passphrase.": "Access your secure message history and your cross-signing identity for verifying other devices by entering your passphrase.",
+    "If you've forgotten your passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>.": "If you've forgotten your passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>.",
+    "Enter secret storage recovery key": "Enter secret storage 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 devices by entering your recovery key.": "Access your secure message history and your cross-signing identity for verifying other devices 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>.",
     "Unable to load backup status": "Unable to load backup status",
     "Recovery Key Mismatch": "Recovery Key Mismatch",
     "Backup could not be decrypted with this key: please verify that you entered the correct recovery key.": "Backup could not be decrypted with this key: please verify that you entered the correct recovery key.",
@@ -1532,10 +1541,9 @@
     "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",
-    "This looks like a valid recovery key!": "This looks like a valid 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.",
-    "Not a valid recovery key": "Not a valid recovery key",
     "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 passphrase you can <button>set up new recovery options</button>": "If you've forgotten your recovery passphrase 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>": "If you've forgotten your recovery key you can <button>set up new recovery options</button>",
     "Private Chat": "Private Chat",
     "Public Chat": "Public Chat",
     "Custom": "Custom",
@@ -1885,39 +1893,50 @@
     "File to import": "File to import",
     "Import": "Import",
     "Great! This passphrase looks strong enough.": "Great! This passphrase looks strong enough.",
-    "We'll store an encrypted copy of your keys on our server. Protect your backup with a passphrase to keep it secure.": "We'll store an encrypted copy of your keys on our server. Protect your backup with a passphrase to keep it secure.",
+    "<b>Warning</b>: You should only set up secret storage from a trusted computer.": "<b>Warning</b>: You should only set up secret storage from a trusted computer.",
+    "We'll use secret storage to optionally store an encrypted copy of your cross-signing identity for verifying other devices and message keys on our server. Protect your access to encrypted messages with a passphrase to keep it secure.": "We'll use secret storage to optionally store an encrypted copy of your cross-signing identity for verifying other devices and message keys on our server. Protect your access to encrypted messages with a passphrase to keep it secure.",
     "For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
     "Enter a passphrase...": "Enter a passphrase...",
-    "Set up with a Recovery Key": "Set up with a Recovery Key",
+    "Set up with a recovery key": "Set up with a recovery key",
     "That matches!": "That matches!",
     "That doesn't match.": "That doesn't match.",
     "Go back to set it again.": "Go back to set it again.",
     "Please enter your passphrase a second time to confirm.": "Please enter your passphrase a second time to confirm.",
     "Repeat your passphrase...": "Repeat your passphrase...",
-    "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.": "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.",
+    "As a safety net, you can use it to restore your access to encrypted messages if you forget your passphrase.": "As a safety net, you can use it to restore your access to encrypted messages if you forget your passphrase.",
-    "As a safety net, you can use it to restore your encrypted message history.": "As a safety net, you can use it to restore your encrypted message history.",
+    "As a safety net, you can use it to restore your access to encrypted messages.": "As a safety net, you can use it to restore your access to encrypted messages.",
     "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your passphrase.": "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your passphrase.",
-    "Keep your recovery key somewhere very secure, like a password manager (or a safe)": "Keep your recovery key somewhere very secure, like a password manager (or a safe)",
+    "Keep your recovery key somewhere very secure, like a password manager (or a safe).": "Keep your recovery key somewhere very secure, like a password manager (or a safe).",
     "Your Recovery Key": "Your Recovery Key",
     "Copy to clipboard": "Copy to clipboard",
     "Download": "Download",
-    "Your Recovery Key has been <b>copied to your clipboard</b>, paste it to:": "Your Recovery Key has been <b>copied to your clipboard</b>, paste it to:",
+    "Your recovery key has been <b>copied to your clipboard</b>, paste it to:": "Your recovery key has been <b>copied to your clipboard</b>, paste it to:",
-    "Your Recovery Key is in your <b>Downloads</b> folder.": "Your Recovery Key is in your <b>Downloads</b> folder.",
+    "Your recovery key is in your <b>Downloads</b> folder.": "Your recovery key is in your <b>Downloads</b> folder.",
     "<b>Print it</b> and store it somewhere safe": "<b>Print it</b> and store it somewhere safe",
     "<b>Save it</b> on a USB key or backup drive": "<b>Save it</b> on a USB key or backup drive",
     "<b>Copy it</b> to your personal cloud storage": "<b>Copy it</b> to your personal cloud storage",
+    "Your access to encrypted messages is now protected.": "Your access to encrypted messages is now protected.",
+    "Without setting up secret storage, you won't be able to restore your access to encrypted messages or your cross-signing identity for verifying other devices if you log out or use another device.": "Without setting up secret storage, you won't be able to restore your access to encrypted messages or your cross-signing identity for verifying other devices if you log out or use another device.",
+    "Set up secret storage": "Set up secret storage",
+    "Secure your encrypted messages with a passphrase": "Secure your encrypted messages with a passphrase",
+    "Confirm your passphrase": "Confirm your passphrase",
+    "Recovery key": "Recovery key",
+    "Keep it safe": "Keep it safe",
+    "Storing secrets...": "Storing secrets...",
+    "Success!": "Success!",
+    "Unable to set up secret storage": "Unable to set up secret storage",
+    "Retry": "Retry",
+    "We'll store an encrypted copy of your keys on our server. Protect your backup with a passphrase to keep it secure.": "We'll store an encrypted copy of your keys on our server. Protect your backup with a passphrase to keep it secure.",
+    "Set up with a Recovery Key": "Set up with a Recovery Key",
+    "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.": "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.",
+    "As a safety net, you can use it to restore your encrypted message history.": "As a safety net, you can use it to restore your encrypted message history.",
     "Your keys are being backed up (the first backup could take a few minutes).": "Your keys are being backed up (the first backup could take a few minutes).",
     "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.",
     "Set up Secure Message Recovery": "Set up Secure Message Recovery",
     "Secure your backup with a passphrase": "Secure your backup with a passphrase",
-    "Confirm your passphrase": "Confirm your passphrase",
-    "Recovery key": "Recovery key",
-    "Keep it safe": "Keep it safe",
     "Starting backup...": "Starting backup...",
-    "Success!": "Success!",
     "Create Key Backup": "Create Key Backup",
     "Unable to create key backup": "Unable to create key backup",
-    "Retry": "Retry",
     "Without setting up Secure Message Recovery, you'll lose your secure message history when you log out.": "Without setting up Secure Message Recovery, you'll lose your secure message history when you log out.",
     "If you don't want to set this up now, you can later in Settings.": "If you don't want to set this up now, you can later in Settings.",
     "Set up": "Set up",