diff --git a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss index 63e5a3de09..9f1d0f4998 100644 --- a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss +++ b/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; -} - -.mx_CreateSecretStorageDialog_recoveryKeyButtons button { - flex: 1; + width: 160px; + padding-left: 0px; + padding-right: 0px; white-space: nowrap; } + +.mx_CreateSecretStorageDialog_continueSpinner { + margin-top: 33px; + text-align: right; +} + +.mx_CreateSecretStorageDialog_continueSpinner img { + width: 20px; + height: 20px; +} diff --git a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js index e6ab07c449..44e00d79cd 100644 --- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js +++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js @@ -20,25 +20,19 @@ import PropTypes from 'prop-types'; import * as sdk from '../../../../index'; import {MatrixClientPeg} from '../../../../MatrixClientPeg'; import FileSaver from 'file-saver'; -import {_t, _td} from '../../../../languageHandler'; +import {_t} from '../../../../languageHandler'; import Modal from '../../../../Modal'; import { promptForBackupPassphrase } from '../../../../CrossSigningManager'; import {copyNode} from "../../../../utils/strings"; import {SSOAuthEntry} from "../../../../components/views/auth/InteractiveAuthEntryComponents"; -import PassphraseField from "../../../../components/views/auth/PassphraseField"; const PHASE_LOADING = 0; const PHASE_LOADERROR = 1; const PHASE_MIGRATE = 2; -const PHASE_PASSPHRASE = 3; -const PHASE_PASSPHRASE_CONFIRM = 4; -const PHASE_SHOWKEY = 5; -const PHASE_KEEPITSAFE = 6; -const PHASE_STORING = 7; -const PHASE_DONE = 8; -const PHASE_CONFIRM_SKIP = 9; - -const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc. +const PHASE_INTRO = 3; +const PHASE_SHOWKEY = 4; +const PHASE_STORING = 5; +const PHASE_CONFIRM_SKIP = 6; /* * Walks the user through the process of creating a passphrase to guard Secure @@ -65,34 +59,26 @@ export default class CreateSecretStorageDialog extends React.PureComponent { this.state = { phase: PHASE_LOADING, - passPhrase: '', - passPhraseValid: false, - passPhraseConfirm: '', - copied: false, downloaded: false, + copied: false, backupInfo: null, + backupInfoFetched: false, + backupInfoFetchError: null, backupSigStatus: null, // does the server offer a UI auth flow with just m.login.password - // for /keys/device_signing/upload? - canUploadKeysWithPasswordOnly: null, + // for /keys/device_signing/upload? (If we have an account password, we + // assume that it can) + canUploadKeysWithPasswordOnly: Boolean(this.state.accountPassword), + canUploadKeyCheckInProgress: false, accountPassword: props.accountPassword || "", accountPasswordCorrect: null, - // status of the key backup toggle switch + // No toggle for this: if we really don't want one, remove it & just hard code true useKeyBackup: true, }; this._passphraseField = createRef(); - this._fetchBackupInfo(); - if (this.state.accountPassword) { - // If we have an account password in memory, let's simplify and - // assume it means password auth is also supported for device - // signing key upload as well. This avoids hitting the server to - // test auth flows, which may be slow under high load. - this.state.canUploadKeysWithPasswordOnly = true; - } else { - this._queryKeyUploadAuth(); - } + this.loadData(); MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatusChange); } @@ -109,13 +95,11 @@ export default class CreateSecretStorageDialog extends React.PureComponent { MatrixClientPeg.get().isCryptoEnabled() && await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo) ); - const { force } = this.props; - const phase = (backupInfo && !force) ? PHASE_MIGRATE : PHASE_PASSPHRASE; - this.setState({ - phase, + backupInfoFetched: true, backupInfo, backupSigStatus, + backupInfoFetchError: null, }); return { @@ -123,20 +107,25 @@ export default class CreateSecretStorageDialog extends React.PureComponent { backupSigStatus, }; } catch (e) { - this.setState({phase: PHASE_LOADERROR}); + this.setState({backupInfoFetchError: e}); } } async _queryKeyUploadAuth() { try { + this.setState({canUploadKeyCheckInProgress: true}); await MatrixClientPeg.get().uploadDeviceSigningKeys(null, {}); // We should never get here: the server should always require // UI auth to upload device signing keys. If we do, we upload // no keys which would be a no-op. console.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!"); + this.setState({canUploadKeyCheckInProgress: false}); } catch (error) { if (!error.data || !error.data.flows) { console.log("uploadDeviceSigningKeys advertised no flows!"); + this.setState({ + canUploadKeyCheckInProgress: false, + }); return; } const canUploadKeysWithPasswordOnly = error.data.flows.some(f => { @@ -144,10 +133,18 @@ export default class CreateSecretStorageDialog extends React.PureComponent { }); this.setState({ canUploadKeysWithPasswordOnly, + canUploadKeyCheckInProgress: false, }); } } + async _createRecoveryKey() { + this._recoveryKey = await MatrixClientPeg.get().createRecoveryKeyFromPassphrase(); + this.setState({ + phase: PHASE_SHOWKEY, + }); + } + _onKeyBackupStatusChange = () => { if (this.state.phase === PHASE_MIGRATE) this._fetchBackupInfo(); } @@ -156,12 +153,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent { this._recoveryKeyNode = n; } - _onUseKeyBackupChange = (enabled) => { - this.setState({ - useKeyBackup: enabled, - }); - } - _onMigrateFormSubmit = (e) => { e.preventDefault(); if (this.state.backupSigStatus.usable) { @@ -171,12 +162,15 @@ export default class CreateSecretStorageDialog extends React.PureComponent { } } + _onIntroContinueClick = () => { + this._createRecoveryKey(); + } + _onCopyClick = () => { const successful = copyNode(this._recoveryKeyNode); if (successful) { this.setState({ copied: true, - phase: PHASE_KEEPITSAFE, }); } } @@ -186,10 +180,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent { type: 'text/plain;charset=us-ascii', }); FileSaver.saveAs(blob, 'recovery-key.txt'); - this.setState({ downloaded: true, - phase: PHASE_KEEPITSAFE, }); } @@ -244,7 +236,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent { _bootstrapSecretStorage = async () => { this.setState({ - phase: PHASE_STORING, + // we use LOADING here rather than STORING as STORING still shows the 'show key' + // screen which is not relevant: LOADING is just a generic spinner. + phase: PHASE_LOADING, error: null, }); @@ -285,9 +279,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent { }, }); } - this.setState({ - phase: PHASE_DONE, - }); + this.props.onFinished(true); } catch (e) { if (this.state.canUploadKeysWithPasswordOnly && e.httpStatus === 401 && e.data.flows) { this.setState({ @@ -306,10 +298,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent { this.props.onFinished(false); } - _onDone = () => { - this.props.onFinished(true); - } - _restoreBackup = async () => { // It's possible we'll need the backup key later on for bootstrapping, // so let's stash it here, rather than prompting for it twice. @@ -336,90 +324,35 @@ export default class CreateSecretStorageDialog extends React.PureComponent { } } + _onShowKeyContinueClick = () => { + this._bootstrapSecretStorage(); + } + _onLoadRetryClick = () => { + this.loadData(); + } + + async loadData() { this.setState({phase: PHASE_LOADING}); - this._fetchBackupInfo(); + const proms = []; + + if (!this.state.backupInfoFetched) proms.push(this._fetchBackupInfo()); + if (this.state.canUploadKeysWithPasswordOnly === null) proms.push(this._queryKeyUploadAuth()); + + await Promise.all(proms); + if (this.state.canUploadKeysWithPasswordOnly === null || this.state.backupInfoFetchError) { + this.setState({phase: PHASE_LOADERROR}); + } else if (this.state.backupInfo && !this.props.force) { + this.setState({phase: PHASE_MIGRATE}); + } else { + this.setState({phase: PHASE_INTRO}); + } } _onSkipSetupClick = () => { this.setState({phase: PHASE_CONFIRM_SKIP}); } - _onSetUpClick = () => { - this.setState({phase: PHASE_PASSPHRASE}); - } - - _onSkipPassPhraseClick = async () => { - this._recoveryKey = - await MatrixClientPeg.get().createRecoveryKeyFromPassphrase(); - this.setState({ - copied: false, - downloaded: false, - phase: PHASE_SHOWKEY, - }); - } - - _onPassPhraseNextClick = async (e) => { - e.preventDefault(); - if (!this._passphraseField.current) return; // unmounting - - await this._passphraseField.current.validate({ allowEmpty: false }); - if (!this._passphraseField.current.state.valid) { - this._passphraseField.current.focus(); - this._passphraseField.current.validate({ allowEmpty: false, focused: true }); - return; - } - - this.setState({phase: PHASE_PASSPHRASE_CONFIRM}); - }; - - _onPassPhraseConfirmNextClick = async (e) => { - e.preventDefault(); - - if (this.state.passPhrase !== this.state.passPhraseConfirm) return; - - this._recoveryKey = - await MatrixClientPeg.get().createRecoveryKeyFromPassphrase(this.state.passPhrase); - this.setState({ - copied: false, - downloaded: false, - phase: PHASE_SHOWKEY, - }); - } - - _onSetAgainClick = () => { - this.setState({ - passPhrase: '', - passPhraseValid: false, - passPhraseConfirm: '', - phase: PHASE_PASSPHRASE, - }); - } - - _onKeepItSafeBackClick = () => { - this.setState({ - phase: PHASE_SHOWKEY, - }); - } - - _onPassPhraseValidate = (result) => { - this.setState({ - passPhraseValid: result.valid, - }); - }; - - _onPassPhraseChange = (e) => { - this.setState({ - passPhrase: e.target.value, - }); - } - - _onPassPhraseConfirmChange = (e) => { - this.setState({ - passPhraseConfirm: e.target.value, - }); - } - _onAccountPasswordChange = (e) => { this.setState({ accountPassword: e.target.value, @@ -437,7 +370,12 @@ export default class CreateSecretStorageDialog extends React.PureComponent { let authPrompt; let nextCaption = _t("Next"); - if (this.state.canUploadKeysWithPasswordOnly) { + if (!this.state.backupSigStatus.usable) { + authPrompt =
{_t("You'll need to authenticate with the server to confirm the upgrade.")} @@ -480,185 +413,53 @@ export default class CreateSecretStorageDialog extends React.PureComponent { ; } - _renderPhasePassPhrase() { - const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch'); - - return
; - } - - _renderPhasePassPhraseConfirm() { - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); - const Field = sdk.getComponent('views.elements.Field'); - - let matchText; - let changeText; - if (this.state.passPhraseConfirm === this.state.passPhrase) { - matchText = _t("That matches!"); - changeText = _t("Use a different passphrase?"); - } 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."); - changeText = _t("Go back to set it again."); - } - - let passPhraseMatch = null; - if (matchText) { - passPhraseMatch ={_t( - "Your recovery key is a safety net - you can use it to restore " + - "access to your encrypted messages if you forget your recovery passphrase.", - )}
-{_t( - "Keep a copy of it somewhere secure, like a password manager or even a safe.", + "Store your Recovery Key somewhere safe, it can be used to unlock your encrypted messages & data.", )}
{this._recoveryKey.encodedPrivateKey}
{_t( - "You can now verify your other devices, " + - "and other users to keep your chats safe.", + "Create a Recovery Key to store encryption keys & secrets with your account data. " + + "If you lose access to this login you’ll need it to unlock your data.", )}
-