/* Copyright 2018, 2019 New Vector Ltd Copyright 2019, 2020 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 * as 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_LOADING = 0; const PHASE_MIGRATE = 1; const PHASE_PASSPHRASE = 2; const PHASE_PASSPHRASE_CONFIRM = 3; const PHASE_SHOWKEY = 4; const PHASE_KEEPITSAFE = 5; const PHASE_STORING = 6; const PHASE_DONE = 7; const PHASE_CONFIRM_SKIP = 8; 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 { static propTypes = { hasCancel: PropTypes.bool, accountPassword: PropTypes.string, }; static defaultProps = { hasCancel: true, }; constructor(props) { super(props); this._keyInfo = null; this._encodedRecoveryKey = null; this._recoveryKeyNode = null; this._setZxcvbnResultTimeout = null; this.state = { phase: PHASE_LOADING, passPhrase: '', passPhraseConfirm: '', copied: false, downloaded: false, zxcvbnResult: null, backupInfo: null, backupSigStatus: null, // does the server offer a UI auth flow with just m.login.password // for /keys/device_signing/upload? canUploadKeysWithPasswordOnly: null, accountPassword: props.accountPassword, accountPasswordCorrect: null, // status of the key backup toggle switch useKeyBackup: true, }; this._fetchBackupInfo(); this._queryKeyUploadAuth(); MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatusChange); } componentWillUnmount() { MatrixClientPeg.get().removeListener('crypto.keyBackupStatus', this._onKeyBackupStatusChange); if (this._setZxcvbnResultTimeout !== null) { clearTimeout(this._setZxcvbnResultTimeout); } } async _fetchBackupInfo() { const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion(); const backupSigStatus = ( // we may not have started crypto yet, in which case we definitely don't trust the backup MatrixClientPeg.get().isCryptoEnabled() && await MatrixClientPeg.get().isKeyBackupTrusted(backupInfo) ); const phase = backupInfo ? PHASE_MIGRATE : PHASE_PASSPHRASE; this.setState({ phase, backupInfo, backupSigStatus, }); } async _queryKeyUploadAuth() { try { 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!"); } catch (error) { if (!error.data.flows) { console.log("uploadDeviceSigningKeys advertised no flows!"); } const canUploadKeysWithPasswordOnly = error.data.flows.some(f => { return f.stages.length === 1 && f.stages[0] === 'm.login.password'; }); this.setState({ canUploadKeysWithPasswordOnly, }); } } _onKeyBackupStatusChange = () => { 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) { this._bootstrapSecretStorage(); } else { this._restoreBackup(); } } _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, }); } _doBootstrapUIAuth = async (makeRequest) => { if (this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) { await makeRequest({ type: 'm.login.password', identifier: { type: 'm.id.user', user: MatrixClientPeg.get().getUserId(), }, // https://github.com/matrix-org/synapse/issues/5665 user: MatrixClientPeg.get().getUserId(), password: this.state.accountPassword, }); } else { const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog"); 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"); } } } _bootstrapSecretStorage = async () => { this.setState({ phase: PHASE_STORING, error: null, }); const cli = MatrixClientPeg.get(); try { await cli.bootstrapSecretStorage({ authUploadDeviceSigningKeys: this._doBootstrapUIAuth, createSecretStorageKey: async () => this._keyInfo, keyBackupInfo: this.state.backupInfo, setupNewKeyBackup: !this.state.backupInfo && this.state.useKeyBackup, }); this.setState({ phase: PHASE_DONE, }); } catch (e) { if (this.state.canUploadKeysWithPasswordOnly && e.httpStatus === 401 && e.data.flows) { this.setState({ accountPassword: '', accountPasswordCorrect: false, phase: PHASE_MIGRATE, }); } else { this.setState({ error: e }); } console.error("Error bootstrapping secret storage", e); } } _onCancel = () => { this.props.onFinished(false); } _onDone = () => { this.props.onFinished(true); } _restoreBackup = async () => { const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog'); const { finished } = Modal.createTrackedDialog( 'Restore Backup', '', RestoreKeyBackupDialog, {showSummary: false}, null, /* priority = */ false, /* static = */ true, ); await finished; await this._fetchBackupInfo(); if ( this.state.backupSigStatus.usable && this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword ) { this._bootstrapSecretStorage(); } } _onSkipSetupClick = () => { this.setState({phase: PHASE_CONFIRM_SKIP}); } _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({ 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; } _onAccountPasswordChange = (e) => { this.setState({ accountPassword: e.target.value, }); } _renderPhaseMigrate() { // TODO: This is a temporary screen so people who have the labs flag turned on and // click the button are aware they're making a change to their account. // Once we're confident enough in this (and it's supported enough) we can do // it automatically. // https://github.com/vector-im/riot-web/issues/11696 const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); const Field = sdk.getComponent('views.elements.Field'); let authPrompt; let nextCaption = _t("Next"); if (!this.state.backupSigStatus.usable) { authPrompt =
{_t("You'll need to authenticate with the server to confirm the upgrade.")}
; } return ; } _renderPhasePassPhrase() { 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; if (this.state.zxcvbnResult) { if (this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE) { helpText = _t("Great! This passphrase looks strong enough."); } else { // We take the warning from zxcvbn or failing that, the first // suggestion. In practice The first is generally the most relevant // and it's probably better to present the user with one thing to // improve about their password than a whole collection - it can // spit out a warning and multiple suggestions which starts getting // very information-dense. const suggestion = ( this.state.zxcvbnResult.feedback.warning || this.state.zxcvbnResult.feedback.suggestions[0] ); const suggestionBlock ={_t( "Set up encryption on this session to allow it to verify other sessions, " + "granting them access to encrypted messages and marking them as trusted for other users.", )}
{_t( "Secure your encryption keys with a passphrase. For maximum security " + "this should be different to your account password:", )}
{_t( "Enter your passphrase a second time to confirm it.", )}
{_t( "Your recovery key is a safety net - you can use it to restore " + "access to your encrypted messages if you forget your passphrase.", )}
{_t( "Keep a copy of it somewhere secure, like a password manager or even a safe.", )}
{this._encodedRecoveryKey}
{_t( "You can now verify your other devices, " + "and other users to keep your chats safe.", )}
{_t("Unable to set up secret storage")}