2019-12-05 18:05:28 +03:00
|
|
|
|
/*
|
|
|
|
|
Copyright 2018, 2019 New Vector Ltd
|
2020-01-22 13:44:02 +03:00
|
|
|
|
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
|
2019-12-05 18:05:28 +03:00
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
*/
|
|
|
|
|
|
2020-05-14 22:33:50 +03:00
|
|
|
|
import React, {createRef} from 'react';
|
2020-01-24 22:11:57 +03:00
|
|
|
|
import PropTypes from 'prop-types';
|
2019-12-20 04:19:56 +03:00
|
|
|
|
import * as sdk from '../../../../index';
|
2019-12-21 00:13:46 +03:00
|
|
|
|
import {MatrixClientPeg} from '../../../../MatrixClientPeg';
|
2019-12-05 18:05:28 +03:00
|
|
|
|
import FileSaver from 'file-saver';
|
2020-06-18 11:35:11 +03:00
|
|
|
|
import {_t, _td} from '../../../../languageHandler';
|
2019-12-05 18:05:28 +03:00
|
|
|
|
import Modal from '../../../../Modal';
|
2020-09-03 16:50:49 +03:00
|
|
|
|
import { promptForBackupPassphrase } from '../../../../SecurityManager';
|
2020-04-15 02:16:11 +03:00
|
|
|
|
import {copyNode} from "../../../../utils/strings";
|
2020-05-06 23:24:37 +03:00
|
|
|
|
import {SSOAuthEntry} from "../../../../components/views/auth/InteractiveAuthEntryComponents";
|
2020-06-18 11:35:11 +03:00
|
|
|
|
import PassphraseField from "../../../../components/views/auth/PassphraseField";
|
2020-06-23 17:04:39 +03:00
|
|
|
|
import StyledRadioButton from '../../../../components/views/elements/StyledRadioButton';
|
2020-06-23 18:27:41 +03:00
|
|
|
|
import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
|
|
|
|
|
import DialogButtons from "../../../../components/views/elements/DialogButtons";
|
|
|
|
|
import InlineSpinner from "../../../../components/views/elements/InlineSpinner";
|
2020-08-14 20:06:35 +03:00
|
|
|
|
import { isSecureBackupRequired } from '../../../../utils/WellKnownUtils';
|
2019-12-05 18:05:28 +03:00
|
|
|
|
|
2019-12-19 14:26:20 +03:00
|
|
|
|
const PHASE_LOADING = 0;
|
2020-04-20 20:10:23 +03:00
|
|
|
|
const PHASE_LOADERROR = 1;
|
2020-06-23 17:04:39 +03:00
|
|
|
|
const PHASE_CHOOSE_KEY_PASSPHRASE = 2;
|
|
|
|
|
const PHASE_MIGRATE = 3;
|
|
|
|
|
const PHASE_PASSPHRASE = 4;
|
|
|
|
|
const PHASE_PASSPHRASE_CONFIRM = 5;
|
|
|
|
|
const PHASE_SHOWKEY = 6;
|
|
|
|
|
const PHASE_STORING = 8;
|
|
|
|
|
const PHASE_CONFIRM_SKIP = 10;
|
2020-06-18 11:35:11 +03:00
|
|
|
|
|
|
|
|
|
const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
|
2019-12-05 18:05:28 +03:00
|
|
|
|
|
2020-06-23 17:04:39 +03:00
|
|
|
|
// these end up as strings from being values in the radio buttons, so just use strings
|
2020-06-26 13:24:07 +03:00
|
|
|
|
const CREATE_STORAGE_OPTION_KEY = 'key';
|
|
|
|
|
const CREATE_STORAGE_OPTION_PASSPHRASE = 'passphrase';
|
2020-06-23 17:04:39 +03:00
|
|
|
|
|
2019-12-05 18:05:28 +03:00
|
|
|
|
/*
|
|
|
|
|
* 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 {
|
2020-01-24 22:11:57 +03:00
|
|
|
|
static propTypes = {
|
|
|
|
|
hasCancel: PropTypes.bool,
|
2020-01-25 18:28:06 +03:00
|
|
|
|
accountPassword: PropTypes.string,
|
2020-08-27 15:50:50 +03:00
|
|
|
|
forceReset: PropTypes.bool,
|
2020-01-24 22:11:57 +03:00
|
|
|
|
};
|
|
|
|
|
|
2020-01-28 19:36:07 +03:00
|
|
|
|
static defaultProps = {
|
2020-01-24 22:11:57 +03:00
|
|
|
|
hasCancel: true,
|
2020-08-27 15:50:50 +03:00
|
|
|
|
forceReset: false,
|
2020-01-24 22:11:57 +03:00
|
|
|
|
};
|
|
|
|
|
|
2019-12-05 18:05:28 +03:00
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
|
2020-03-30 23:40:09 +03:00
|
|
|
|
this._recoveryKey = null;
|
2019-12-05 18:05:28 +03:00
|
|
|
|
this._recoveryKeyNode = null;
|
2020-04-09 19:30:10 +03:00
|
|
|
|
this._backupKey = null;
|
2019-12-05 18:05:28 +03:00
|
|
|
|
|
|
|
|
|
this.state = {
|
2019-12-19 14:26:20 +03:00
|
|
|
|
phase: PHASE_LOADING,
|
2020-06-18 11:35:11 +03:00
|
|
|
|
passPhrase: '',
|
|
|
|
|
passPhraseValid: false,
|
|
|
|
|
passPhraseConfirm: '',
|
2020-05-29 17:42:07 +03:00
|
|
|
|
copied: false,
|
2020-06-18 11:35:11 +03:00
|
|
|
|
downloaded: false,
|
2020-06-24 17:21:09 +03:00
|
|
|
|
setPassphrase: false,
|
2020-01-09 23:49:37 +03:00
|
|
|
|
backupInfo: null,
|
|
|
|
|
backupSigStatus: null,
|
2020-01-22 13:44:02 +03:00
|
|
|
|
// does the server offer a UI auth flow with just m.login.password
|
2020-06-18 11:35:11 +03:00
|
|
|
|
// for /keys/device_signing/upload?
|
2020-05-29 17:55:16 +03:00
|
|
|
|
canUploadKeysWithPasswordOnly: null,
|
2020-02-28 16:52:24 +03:00
|
|
|
|
accountPassword: props.accountPassword || "",
|
2020-01-22 13:44:02 +03:00
|
|
|
|
accountPasswordCorrect: null,
|
2020-06-26 13:24:07 +03:00
|
|
|
|
passPhraseKeySelected: CREATE_STORAGE_OPTION_KEY,
|
2020-08-14 20:06:35 +03:00
|
|
|
|
canSkip: !isSecureBackupRequired(),
|
2019-12-05 18:05:28 +03:00
|
|
|
|
};
|
2019-12-19 14:26:20 +03:00
|
|
|
|
|
2020-05-14 22:33:50 +03:00
|
|
|
|
this._passphraseField = createRef();
|
|
|
|
|
|
2020-06-18 11:35:11 +03:00
|
|
|
|
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();
|
|
|
|
|
}
|
2020-01-24 22:11:57 +03:00
|
|
|
|
|
|
|
|
|
MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatusChange);
|
2019-12-05 18:05:28 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2020-01-24 22:11:57 +03:00
|
|
|
|
MatrixClientPeg.get().removeListener('crypto.keyBackupStatus', this._onKeyBackupStatusChange);
|
2019-12-05 18:05:28 +03:00
|
|
|
|
}
|
|
|
|
|
|
2019-12-19 14:26:20 +03:00
|
|
|
|
async _fetchBackupInfo() {
|
2020-04-20 20:10:23 +03:00
|
|
|
|
try {
|
|
|
|
|
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)
|
|
|
|
|
);
|
2020-01-09 23:49:37 +03:00
|
|
|
|
|
2020-08-27 15:50:50 +03:00
|
|
|
|
const { forceReset } = this.props;
|
|
|
|
|
const phase = (backupInfo && !forceReset) ? PHASE_MIGRATE : PHASE_CHOOSE_KEY_PASSPHRASE;
|
2020-06-18 11:35:11 +03:00
|
|
|
|
|
2020-04-20 20:10:23 +03:00
|
|
|
|
this.setState({
|
2020-06-18 11:35:11 +03:00
|
|
|
|
phase,
|
2020-04-20 20:10:23 +03:00
|
|
|
|
backupInfo,
|
|
|
|
|
backupSigStatus,
|
|
|
|
|
});
|
2020-02-28 16:47:12 +03:00
|
|
|
|
|
2020-04-20 20:10:23 +03:00
|
|
|
|
return {
|
|
|
|
|
backupInfo,
|
|
|
|
|
backupSigStatus,
|
|
|
|
|
};
|
|
|
|
|
} catch (e) {
|
2020-06-18 11:35:11 +03:00
|
|
|
|
this.setState({phase: PHASE_LOADERROR});
|
2020-04-20 20:10:23 +03:00
|
|
|
|
}
|
2019-12-19 14:26:20 +03:00
|
|
|
|
}
|
|
|
|
|
|
2020-01-22 13:44:02 +03:00
|
|
|
|
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) {
|
2020-04-20 20:10:23 +03:00
|
|
|
|
if (!error.data || !error.data.flows) {
|
2020-01-22 13:44:02 +03:00
|
|
|
|
console.log("uploadDeviceSigningKeys advertised no flows!");
|
2020-04-20 20:10:23 +03:00
|
|
|
|
return;
|
2020-01-22 13:44:02 +03:00
|
|
|
|
}
|
|
|
|
|
const canUploadKeysWithPasswordOnly = error.data.flows.some(f => {
|
|
|
|
|
return f.stages.length === 1 && f.stages[0] === 'm.login.password';
|
|
|
|
|
});
|
|
|
|
|
this.setState({
|
|
|
|
|
canUploadKeysWithPasswordOnly,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-24 22:11:57 +03:00
|
|
|
|
_onKeyBackupStatusChange = () => {
|
2020-01-28 22:42:09 +03:00
|
|
|
|
if (this.state.phase === PHASE_MIGRATE) this._fetchBackupInfo();
|
2020-01-24 22:11:57 +03:00
|
|
|
|
}
|
|
|
|
|
|
2020-06-23 17:04:39 +03:00
|
|
|
|
_onKeyPassphraseChange = e => {
|
|
|
|
|
this.setState({
|
|
|
|
|
passPhraseKeySelected: e.target.value,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-05 18:05:28 +03:00
|
|
|
|
_collectRecoveryKeyNode = (n) => {
|
|
|
|
|
this._recoveryKeyNode = n;
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-23 17:04:39 +03:00
|
|
|
|
_onChooseKeyPassphraseFormSubmit = async () => {
|
2020-06-26 13:24:07 +03:00
|
|
|
|
if (this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY) {
|
2020-06-23 17:04:39 +03:00
|
|
|
|
this._recoveryKey =
|
|
|
|
|
await MatrixClientPeg.get().createRecoveryKeyFromPassphrase();
|
|
|
|
|
this.setState({
|
|
|
|
|
copied: false,
|
|
|
|
|
downloaded: false,
|
2020-06-24 17:21:09 +03:00
|
|
|
|
setPassphrase: false,
|
2020-06-23 17:04:39 +03:00
|
|
|
|
phase: PHASE_SHOWKEY,
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.setState({
|
|
|
|
|
copied: false,
|
|
|
|
|
downloaded: false,
|
|
|
|
|
phase: PHASE_PASSPHRASE,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-22 13:44:02 +03:00
|
|
|
|
_onMigrateFormSubmit = (e) => {
|
|
|
|
|
e.preventDefault();
|
2020-01-28 19:36:07 +03:00
|
|
|
|
if (this.state.backupSigStatus.usable) {
|
|
|
|
|
this._bootstrapSecretStorage();
|
|
|
|
|
} else {
|
|
|
|
|
this._restoreBackup();
|
|
|
|
|
}
|
2019-12-19 14:26:20 +03:00
|
|
|
|
}
|
|
|
|
|
|
2019-12-05 18:05:28 +03:00
|
|
|
|
_onCopyClick = () => {
|
2020-04-15 02:16:11 +03:00
|
|
|
|
const successful = copyNode(this._recoveryKeyNode);
|
2019-12-05 18:05:28 +03:00
|
|
|
|
if (successful) {
|
|
|
|
|
this.setState({
|
|
|
|
|
copied: true,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_onDownloadClick = () => {
|
2020-03-31 12:45:53 +03:00
|
|
|
|
const blob = new Blob([this._recoveryKey.encodedPrivateKey], {
|
2019-12-05 18:05:28 +03:00
|
|
|
|
type: 'text/plain;charset=us-ascii',
|
|
|
|
|
});
|
|
|
|
|
FileSaver.saveAs(blob, 'recovery-key.txt');
|
2020-06-18 11:35:11 +03:00
|
|
|
|
|
2019-12-05 18:05:28 +03:00
|
|
|
|
this.setState({
|
|
|
|
|
downloaded: true,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-22 13:44:02 +03:00
|
|
|
|
_doBootstrapUIAuth = async (makeRequest) => {
|
2020-01-22 14:44:47 +03:00
|
|
|
|
if (this.state.canUploadKeysWithPasswordOnly && this.state.accountPassword) {
|
2020-01-22 13:44:02 +03:00
|
|
|
|
await makeRequest({
|
|
|
|
|
type: 'm.login.password',
|
|
|
|
|
identifier: {
|
|
|
|
|
type: 'm.id.user',
|
|
|
|
|
user: MatrixClientPeg.get().getUserId(),
|
|
|
|
|
},
|
2020-05-29 17:23:59 +03:00
|
|
|
|
// TODO: Remove `user` once servers support proper UIA
|
|
|
|
|
// See https://github.com/matrix-org/synapse/issues/5665
|
2020-01-22 13:44:02 +03:00
|
|
|
|
user: MatrixClientPeg.get().getUserId(),
|
|
|
|
|
password: this.state.accountPassword,
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
|
2020-05-06 23:24:37 +03:00
|
|
|
|
|
|
|
|
|
const dialogAesthetics = {
|
|
|
|
|
[SSOAuthEntry.PHASE_PREAUTH]: {
|
|
|
|
|
title: _t("Use Single Sign On to continue"),
|
|
|
|
|
body: _t("To continue, use Single Sign On to prove your identity."),
|
|
|
|
|
continueText: _t("Single Sign On"),
|
|
|
|
|
continueKind: "primary",
|
|
|
|
|
},
|
|
|
|
|
[SSOAuthEntry.PHASE_POSTAUTH]: {
|
|
|
|
|
title: _t("Confirm encryption setup"),
|
|
|
|
|
body: _t("Click the button below to confirm setting up encryption."),
|
|
|
|
|
continueText: _t("Confirm"),
|
|
|
|
|
continueKind: "primary",
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
2020-01-22 13:44:02 +03:00
|
|
|
|
const { finished } = Modal.createTrackedDialog(
|
|
|
|
|
'Cross-signing keys dialog', '', InteractiveAuthDialog,
|
|
|
|
|
{
|
2020-01-31 18:04:51 +03:00
|
|
|
|
title: _t("Setting up keys"),
|
2020-01-22 13:44:02 +03:00
|
|
|
|
matrixClient: MatrixClientPeg.get(),
|
|
|
|
|
makeRequest,
|
2020-05-06 23:24:37 +03:00
|
|
|
|
aestheticsForStagePhases: {
|
|
|
|
|
[SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
|
|
|
|
|
[SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
|
|
|
|
|
},
|
2020-01-22 13:44:02 +03:00
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
const [confirmed] = await finished;
|
|
|
|
|
if (!confirmed) {
|
|
|
|
|
throw new Error("Cross-signing key upload auth canceled");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-05 18:05:28 +03:00
|
|
|
|
_bootstrapSecretStorage = async () => {
|
|
|
|
|
this.setState({
|
2020-06-18 11:35:11 +03:00
|
|
|
|
phase: PHASE_STORING,
|
2019-12-05 18:05:28 +03:00
|
|
|
|
error: null,
|
|
|
|
|
});
|
2020-01-22 13:44:02 +03:00
|
|
|
|
|
2019-12-05 18:05:28 +03:00
|
|
|
|
const cli = MatrixClientPeg.get();
|
2020-01-22 13:44:02 +03:00
|
|
|
|
|
2020-08-27 15:50:50 +03:00
|
|
|
|
const { forceReset } = this.props;
|
2020-02-07 17:55:01 +03:00
|
|
|
|
|
2019-12-05 18:05:28 +03:00
|
|
|
|
try {
|
2020-08-27 15:50:50 +03:00
|
|
|
|
if (forceReset) {
|
|
|
|
|
console.log("Forcing cross-signing and secret storage reset");
|
2020-08-27 15:41:03 +03:00
|
|
|
|
await cli.bootstrapSecretStorage({
|
2020-03-31 12:45:53 +03:00
|
|
|
|
createSecretStorageKey: async () => this._recoveryKey,
|
2020-06-24 14:43:56 +03:00
|
|
|
|
setupNewKeyBackup: true,
|
2020-02-11 20:56:25 +03:00
|
|
|
|
setupNewSecretStorage: true,
|
2020-02-11 18:56:32 +03:00
|
|
|
|
});
|
2020-08-28 14:10:17 +03:00
|
|
|
|
await cli.bootstrapCrossSigning({
|
|
|
|
|
authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
|
|
|
|
|
setupNewCrossSigning: true,
|
|
|
|
|
});
|
2020-02-11 18:56:32 +03:00
|
|
|
|
} else {
|
2020-08-27 15:41:03 +03:00
|
|
|
|
await cli.bootstrapCrossSigning({
|
2020-02-11 18:56:32 +03:00
|
|
|
|
authUploadDeviceSigningKeys: this._doBootstrapUIAuth,
|
2020-08-27 15:41:03 +03:00
|
|
|
|
});
|
|
|
|
|
await cli.bootstrapSecretStorage({
|
2020-03-31 12:45:53 +03:00
|
|
|
|
createSecretStorageKey: async () => this._recoveryKey,
|
2020-02-11 20:56:25 +03:00
|
|
|
|
keyBackupInfo: this.state.backupInfo,
|
2020-06-24 14:43:56 +03:00
|
|
|
|
setupNewKeyBackup: !this.state.backupInfo,
|
2020-04-09 19:30:10 +03:00
|
|
|
|
getKeyBackupPassphrase: () => {
|
|
|
|
|
// We may already have the backup key if we earlier went
|
|
|
|
|
// through the restore backup path, so pass it along
|
|
|
|
|
// rather than prompting again.
|
|
|
|
|
if (this._backupKey) {
|
|
|
|
|
return this._backupKey;
|
|
|
|
|
}
|
|
|
|
|
return promptForBackupPassphrase();
|
|
|
|
|
},
|
2020-02-11 18:56:32 +03:00
|
|
|
|
});
|
|
|
|
|
}
|
2020-06-24 18:55:35 +03:00
|
|
|
|
this.props.onFinished(true);
|
2019-12-05 18:05:28 +03:00
|
|
|
|
} catch (e) {
|
2020-01-22 13:44:02 +03:00
|
|
|
|
if (this.state.canUploadKeysWithPasswordOnly && e.httpStatus === 401 && e.data.flows) {
|
|
|
|
|
this.setState({
|
2020-01-28 19:36:07 +03:00
|
|
|
|
accountPassword: '',
|
2020-01-22 13:44:02 +03:00
|
|
|
|
accountPasswordCorrect: false,
|
|
|
|
|
phase: PHASE_MIGRATE,
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
this.setState({ error: e });
|
|
|
|
|
}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
console.error("Error bootstrapping secret storage", e);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_onCancel = () => {
|
|
|
|
|
this.props.onFinished(false);
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-18 11:35:11 +03:00
|
|
|
|
_onDone = () => {
|
|
|
|
|
this.props.onFinished(true);
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-28 19:36:07 +03:00
|
|
|
|
_restoreBackup = async () => {
|
2020-04-09 19:30:10 +03:00
|
|
|
|
// 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.
|
|
|
|
|
const keyCallback = k => this._backupKey = k;
|
|
|
|
|
|
2020-01-14 14:52:00 +03:00
|
|
|
|
const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog');
|
2020-01-28 19:36:07 +03:00
|
|
|
|
const { finished } = Modal.createTrackedDialog(
|
2020-04-09 19:30:10 +03:00
|
|
|
|
'Restore Backup', '', RestoreKeyBackupDialog,
|
|
|
|
|
{
|
|
|
|
|
showSummary: false,
|
|
|
|
|
keyCallback,
|
|
|
|
|
},
|
|
|
|
|
null, /* priority = */ false, /* static = */ false,
|
2020-01-14 14:52:00 +03:00
|
|
|
|
);
|
2020-01-28 19:36:07 +03:00
|
|
|
|
|
|
|
|
|
await finished;
|
2020-02-28 16:47:12 +03:00
|
|
|
|
const { backupSigStatus } = await this._fetchBackupInfo();
|
2020-01-28 19:36:07 +03:00
|
|
|
|
if (
|
2020-02-28 16:47:12 +03:00
|
|
|
|
backupSigStatus.usable &&
|
2020-01-28 19:36:07 +03:00
|
|
|
|
this.state.canUploadKeysWithPasswordOnly &&
|
|
|
|
|
this.state.accountPassword
|
|
|
|
|
) {
|
|
|
|
|
this._bootstrapSecretStorage();
|
|
|
|
|
}
|
2020-01-14 14:52:00 +03:00
|
|
|
|
}
|
|
|
|
|
|
2020-06-18 11:35:11 +03:00
|
|
|
|
_onLoadRetryClick = () => {
|
|
|
|
|
this.setState({phase: PHASE_LOADING});
|
|
|
|
|
this._fetchBackupInfo();
|
2020-04-20 20:10:23 +03:00
|
|
|
|
}
|
|
|
|
|
|
2020-06-23 18:27:41 +03:00
|
|
|
|
_onShowKeyContinueClick = () => {
|
|
|
|
|
this._bootstrapSecretStorage();
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-23 18:43:52 +03:00
|
|
|
|
_onCancelClick = () => {
|
2020-06-18 11:35:11 +03:00
|
|
|
|
this.setState({phase: PHASE_CONFIRM_SKIP});
|
2019-12-05 18:05:28 +03:00
|
|
|
|
}
|
|
|
|
|
|
2020-06-23 18:43:52 +03:00
|
|
|
|
_onGoBackClick = () => {
|
|
|
|
|
this.setState({phase: PHASE_CHOOSE_KEY_PASSPHRASE});
|
2020-06-18 11:35:11 +03:00
|
|
|
|
}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
|
2020-06-18 11:35:11 +03:00
|
|
|
|
_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;
|
2020-01-29 16:24:45 +03:00
|
|
|
|
}
|
2020-06-18 11:35:11 +03:00
|
|
|
|
|
|
|
|
|
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,
|
2020-06-24 17:21:09 +03:00
|
|
|
|
setPassphrase: true,
|
2020-06-18 11:35:11 +03:00
|
|
|
|
phase: PHASE_SHOWKEY,
|
|
|
|
|
});
|
2019-12-05 18:05:28 +03:00
|
|
|
|
}
|
|
|
|
|
|
2020-06-18 11:35:11 +03:00
|
|
|
|
_onSetAgainClick = () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
passPhrase: '',
|
|
|
|
|
passPhraseValid: false,
|
|
|
|
|
passPhraseConfirm: '',
|
|
|
|
|
phase: PHASE_PASSPHRASE,
|
|
|
|
|
});
|
2019-12-05 18:05:28 +03:00
|
|
|
|
}
|
|
|
|
|
|
2020-06-18 11:35:11 +03:00
|
|
|
|
_onPassPhraseValidate = (result) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
passPhraseValid: result.valid,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
_onPassPhraseChange = (e) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
passPhrase: e.target.value,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_onPassPhraseConfirmChange = (e) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
passPhraseConfirm: e.target.value,
|
|
|
|
|
});
|
2020-06-02 19:55:27 +03:00
|
|
|
|
}
|
|
|
|
|
|
2020-01-22 13:44:02 +03:00
|
|
|
|
_onAccountPasswordChange = (e) => {
|
|
|
|
|
this.setState({
|
|
|
|
|
accountPassword: e.target.value,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-23 17:04:39 +03:00
|
|
|
|
_renderPhaseChooseKeyPassphrase() {
|
|
|
|
|
return <form onSubmit={this._onChooseKeyPassphraseFormSubmit}>
|
2020-06-24 18:12:46 +03:00
|
|
|
|
<p className="mx_CreateSecretStorageDialog_centeredBody">{_t(
|
2020-06-23 17:04:39 +03:00
|
|
|
|
"Safeguard against losing access to encrypted messages & data by " +
|
|
|
|
|
"backing up encryption keys on your server.",
|
|
|
|
|
)}</p>
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_primaryContainer" role="radiogroup" onChange={this._onKeyPassphraseChange}>
|
|
|
|
|
<StyledRadioButton
|
2020-06-26 13:24:07 +03:00
|
|
|
|
key={CREATE_STORAGE_OPTION_KEY}
|
|
|
|
|
value={CREATE_STORAGE_OPTION_KEY}
|
2020-06-23 17:04:39 +03:00
|
|
|
|
name="keyPassphrase"
|
2020-06-26 13:24:07 +03:00
|
|
|
|
checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY}
|
2020-07-03 21:27:45 +03:00
|
|
|
|
outlined
|
2020-06-23 17:04:39 +03:00
|
|
|
|
>
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_optionTitle">
|
2020-06-26 14:41:24 +03:00
|
|
|
|
<span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
|
2020-06-23 17:04:39 +03:00
|
|
|
|
{_t("Generate a Security Key")}
|
|
|
|
|
</div>
|
|
|
|
|
<div>{_t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.")}</div>
|
|
|
|
|
</StyledRadioButton>
|
|
|
|
|
<StyledRadioButton
|
2020-06-26 13:24:07 +03:00
|
|
|
|
key={CREATE_STORAGE_OPTION_PASSPHRASE}
|
|
|
|
|
value={CREATE_STORAGE_OPTION_PASSPHRASE}
|
2020-06-23 17:04:39 +03:00
|
|
|
|
name="keyPassphrase"
|
2020-06-26 13:24:07 +03:00
|
|
|
|
checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_PASSPHRASE}
|
2020-07-03 21:27:45 +03:00
|
|
|
|
outlined
|
2020-06-23 17:04:39 +03:00
|
|
|
|
>
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_optionTitle">
|
2020-06-26 14:41:24 +03:00
|
|
|
|
<span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
|
2020-06-23 17:04:39 +03:00
|
|
|
|
{_t("Enter a Security Phrase")}
|
|
|
|
|
</div>
|
|
|
|
|
<div>{_t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.")}</div>
|
|
|
|
|
</StyledRadioButton>
|
|
|
|
|
</div>
|
|
|
|
|
<DialogButtons
|
|
|
|
|
primaryButton={_t("Continue")}
|
|
|
|
|
onPrimaryButtonClick={this._onChooseKeyPassphraseFormSubmit}
|
2020-06-23 18:43:52 +03:00
|
|
|
|
onCancel={this._onCancelClick}
|
2020-08-14 20:06:35 +03:00
|
|
|
|
hasCancel={this.state.canSkip}
|
2020-06-23 17:04:39 +03:00
|
|
|
|
/>
|
|
|
|
|
</form>;
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-19 14:26:20 +03:00
|
|
|
|
_renderPhaseMigrate() {
|
2019-12-19 22:49:36 +03:00
|
|
|
|
// TODO: This is a temporary screen so people who have the labs flag turned on and
|
2019-12-19 14:26:20 +03:00
|
|
|
|
// 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.
|
2020-08-03 18:02:26 +03:00
|
|
|
|
// https://github.com/vector-im/element-web/issues/11696
|
2020-01-22 13:44:02 +03:00
|
|
|
|
const Field = sdk.getComponent('views.elements.Field');
|
|
|
|
|
|
|
|
|
|
let authPrompt;
|
2020-01-28 19:36:07 +03:00
|
|
|
|
let nextCaption = _t("Next");
|
2020-06-18 11:35:11 +03:00
|
|
|
|
if (this.state.canUploadKeysWithPasswordOnly) {
|
2020-01-22 13:44:02 +03:00
|
|
|
|
authPrompt = <div>
|
|
|
|
|
<div>{_t("Enter your account password to confirm the upgrade:")}</div>
|
2020-01-29 16:24:45 +03:00
|
|
|
|
<div><Field
|
|
|
|
|
type="password"
|
2020-01-22 13:44:02 +03:00
|
|
|
|
label={_t("Password")}
|
|
|
|
|
value={this.state.accountPassword}
|
|
|
|
|
onChange={this._onAccountPasswordChange}
|
2020-06-26 20:50:05 +03:00
|
|
|
|
forceValidity={this.state.accountPasswordCorrect === false ? false : null}
|
2020-01-22 13:44:02 +03:00
|
|
|
|
autoFocus={true}
|
|
|
|
|
/></div>
|
|
|
|
|
</div>;
|
2020-06-18 11:35:11 +03:00
|
|
|
|
} else if (!this.state.backupSigStatus.usable) {
|
|
|
|
|
authPrompt = <div>
|
|
|
|
|
<div>{_t("Restore your key backup to upgrade your encryption")}</div>
|
|
|
|
|
</div>;
|
|
|
|
|
nextCaption = _t("Restore");
|
2020-01-22 13:44:02 +03:00
|
|
|
|
} else {
|
|
|
|
|
authPrompt = <p>
|
|
|
|
|
{_t("You'll need to authenticate with the server to confirm the upgrade.")}
|
|
|
|
|
</p>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return <form onSubmit={this._onMigrateFormSubmit}>
|
2019-12-19 14:26:20 +03:00
|
|
|
|
<p>{_t(
|
2020-06-18 11:35:11 +03:00
|
|
|
|
"Upgrade this session to allow it to verify other sessions, " +
|
|
|
|
|
"granting them access to encrypted messages and marking them " +
|
|
|
|
|
"as trusted for other users.",
|
2019-12-19 14:26:20 +03:00
|
|
|
|
)}</p>
|
2020-01-22 13:44:02 +03:00
|
|
|
|
<div>{authPrompt}</div>
|
2020-02-09 17:49:54 +03:00
|
|
|
|
<DialogButtons
|
|
|
|
|
primaryButton={nextCaption}
|
2020-02-28 15:04:27 +03:00
|
|
|
|
onPrimaryButtonClick={this._onMigrateFormSubmit}
|
2020-01-28 19:36:07 +03:00
|
|
|
|
hasCancel={false}
|
2020-01-22 13:44:02 +03:00
|
|
|
|
primaryDisabled={this.state.canUploadKeysWithPasswordOnly && !this.state.accountPassword}
|
2020-01-28 19:36:07 +03:00
|
|
|
|
>
|
2020-06-24 14:43:56 +03:00
|
|
|
|
<button type="button" className="danger" onClick={this._onCancelClick}>
|
2020-01-28 19:36:07 +03:00
|
|
|
|
{_t('Skip')}
|
|
|
|
|
</button>
|
|
|
|
|
</DialogButtons>
|
2020-01-22 13:44:02 +03:00
|
|
|
|
</form>;
|
2019-12-19 14:26:20 +03:00
|
|
|
|
}
|
|
|
|
|
|
2020-06-18 11:35:11 +03:00
|
|
|
|
_renderPhasePassPhrase() {
|
|
|
|
|
return <form onSubmit={this._onPassPhraseNextClick}>
|
|
|
|
|
<p>{_t(
|
2020-06-24 14:43:56 +03:00
|
|
|
|
"Enter a security phrase only you know, as it’s used to safeguard your data. " +
|
|
|
|
|
"To be secure, you shouldn’t re-use your account password.",
|
2020-06-18 11:35:11 +03:00
|
|
|
|
)}</p>
|
|
|
|
|
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_passPhraseContainer">
|
|
|
|
|
<PassphraseField
|
|
|
|
|
className="mx_CreateSecretStorageDialog_passPhraseField"
|
|
|
|
|
onChange={this._onPassPhraseChange}
|
|
|
|
|
minScore={PASSWORD_MIN_SCORE}
|
|
|
|
|
value={this.state.passPhrase}
|
|
|
|
|
onValidate={this._onPassPhraseValidate}
|
|
|
|
|
fieldRef={this._passphraseField}
|
|
|
|
|
autoFocus={true}
|
|
|
|
|
label={_td("Enter a recovery passphrase")}
|
|
|
|
|
labelEnterPassword={_td("Enter a recovery passphrase")}
|
|
|
|
|
labelStrongPassword={_td("Great! This recovery passphrase looks strong enough.")}
|
|
|
|
|
labelAllowedButUnsafe={_td("Great! This recovery passphrase looks strong enough.")}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<DialogButtons
|
|
|
|
|
primaryButton={_t('Continue')}
|
|
|
|
|
onPrimaryButtonClick={this._onPassPhraseNextClick}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
hasCancel={false}
|
2020-06-18 11:35:11 +03:00
|
|
|
|
disabled={!this.state.passPhraseValid}
|
|
|
|
|
>
|
|
|
|
|
<button type="button"
|
2020-06-24 14:43:56 +03:00
|
|
|
|
onClick={this._onCancelClick}
|
2020-06-18 11:35:11 +03:00
|
|
|
|
className="danger"
|
2020-06-24 14:43:56 +03:00
|
|
|
|
>{_t("Cancel")}</button>
|
2020-06-18 11:35:11 +03:00
|
|
|
|
</DialogButtons>
|
|
|
|
|
</form>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_renderPhasePassPhraseConfirm() {
|
|
|
|
|
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.
|
2020-08-03 18:02:26 +03:00
|
|
|
|
// Security concious readers will note that if you left element-web unattended
|
2020-06-18 11:35:11 +03:00
|
|
|
|
// 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 = <div>
|
|
|
|
|
<div>{matchText}</div>
|
|
|
|
|
<div>
|
|
|
|
|
<AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
|
|
|
|
|
{changeText}
|
|
|
|
|
</AccessibleButton>
|
|
|
|
|
</div>
|
2019-12-05 18:05:28 +03:00
|
|
|
|
</div>;
|
|
|
|
|
}
|
2020-06-18 11:35:11 +03:00
|
|
|
|
return <form onSubmit={this._onPassPhraseConfirmNextClick}>
|
|
|
|
|
<p>{_t(
|
|
|
|
|
"Enter your recovery passphrase a second time to confirm it.",
|
|
|
|
|
)}</p>
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_passPhraseContainer">
|
|
|
|
|
<Field
|
|
|
|
|
type="password"
|
|
|
|
|
onChange={this._onPassPhraseConfirmChange}
|
|
|
|
|
value={this.state.passPhraseConfirm}
|
|
|
|
|
className="mx_CreateSecretStorageDialog_passPhraseField"
|
|
|
|
|
label={_t("Confirm your recovery passphrase")}
|
|
|
|
|
autoFocus={true}
|
|
|
|
|
autoComplete="new-password"
|
|
|
|
|
/>
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_passPhraseMatch">
|
|
|
|
|
{passPhraseMatch}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<DialogButtons
|
|
|
|
|
primaryButton={_t('Continue')}
|
|
|
|
|
onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
|
|
|
|
|
hasCancel={false}
|
|
|
|
|
disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
|
|
|
|
|
>
|
|
|
|
|
<button type="button"
|
2020-06-24 14:43:56 +03:00
|
|
|
|
onClick={this._onCancelClick}
|
2020-06-18 11:35:11 +03:00
|
|
|
|
className="danger"
|
|
|
|
|
>{_t("Skip")}</button>
|
|
|
|
|
</DialogButtons>
|
|
|
|
|
</form>;
|
|
|
|
|
}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
|
2020-06-18 11:35:11 +03:00
|
|
|
|
_renderPhaseShowKey() {
|
2020-06-23 18:27:41 +03:00
|
|
|
|
let continueButton;
|
|
|
|
|
if (this.state.phase === PHASE_SHOWKEY) {
|
|
|
|
|
continueButton = <DialogButtons primaryButton={_t("Continue")}
|
2020-06-24 17:21:09 +03:00
|
|
|
|
disabled={!this.state.downloaded && !this.state.copied && !this.state.setPassphrase}
|
2020-06-23 18:27:41 +03:00
|
|
|
|
onPrimaryButtonClick={this._onShowKeyContinueClick}
|
|
|
|
|
hasCancel={false}
|
|
|
|
|
/>;
|
|
|
|
|
} else {
|
|
|
|
|
continueButton = <div className="mx_CreateSecretStorageDialog_continueSpinner">
|
|
|
|
|
<InlineSpinner />
|
|
|
|
|
</div>;
|
|
|
|
|
}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
return <div>
|
|
|
|
|
<p>{_t(
|
2020-06-23 18:27:41 +03:00
|
|
|
|
"Store your Security Key somewhere safe, like a password manager or a safe, " +
|
|
|
|
|
"as it’s used to safeguard your encrypted data.",
|
2019-12-05 18:05:28 +03:00
|
|
|
|
)}</p>
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_primaryContainer">
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_recoveryKeyContainer">
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_recoveryKey">
|
2020-03-31 12:45:53 +03:00
|
|
|
|
<code ref={this._collectRecoveryKeyNode}>{this._recoveryKey.encodedPrivateKey}</code>
|
2019-12-05 18:05:28 +03:00
|
|
|
|
</div>
|
|
|
|
|
<div className="mx_CreateSecretStorageDialog_recoveryKeyButtons">
|
2020-06-23 18:27:41 +03:00
|
|
|
|
<AccessibleButton kind='primary' className="mx_Dialog_primary"
|
|
|
|
|
onClick={this._onDownloadClick}
|
|
|
|
|
disabled={this.state.phase === PHASE_STORING}
|
|
|
|
|
>
|
|
|
|
|
{_t("Download")}
|
|
|
|
|
</AccessibleButton>
|
|
|
|
|
<span>{_t("or")}</span>
|
2020-04-16 20:46:29 +03:00
|
|
|
|
<AccessibleButton
|
|
|
|
|
kind='primary'
|
|
|
|
|
className="mx_Dialog_primary mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn"
|
|
|
|
|
onClick={this._onCopyClick}
|
2020-06-23 18:27:41 +03:00
|
|
|
|
disabled={this.state.phase === PHASE_STORING}
|
2020-04-16 20:46:29 +03:00
|
|
|
|
>
|
2020-06-23 18:27:41 +03:00
|
|
|
|
{this.state.copied ? _t("Copied!") : _t("Copy")}
|
2020-01-24 22:11:57 +03:00
|
|
|
|
</AccessibleButton>
|
2019-12-05 18:05:28 +03:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-06-23 18:27:41 +03:00
|
|
|
|
{continueButton}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
</div>;
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-19 14:26:20 +03:00
|
|
|
|
_renderBusyPhase() {
|
2019-12-05 18:05:28 +03:00
|
|
|
|
const Spinner = sdk.getComponent('views.elements.Spinner');
|
|
|
|
|
return <div>
|
|
|
|
|
<Spinner />
|
2020-06-03 12:09:38 +03:00
|
|
|
|
</div>;
|
|
|
|
|
}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
|
2020-04-20 20:10:23 +03:00
|
|
|
|
_renderPhaseLoadError() {
|
|
|
|
|
return <div>
|
|
|
|
|
<p>{_t("Unable to query secret storage status")}</p>
|
|
|
|
|
<div className="mx_Dialog_buttons">
|
|
|
|
|
<DialogButtons primaryButton={_t('Retry')}
|
|
|
|
|
onPrimaryButtonClick={this._onLoadRetryClick}
|
2020-08-14 20:06:35 +03:00
|
|
|
|
hasCancel={this.state.canSkip}
|
2020-04-20 20:10:23 +03:00
|
|
|
|
onCancel={this._onCancel}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>;
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-28 20:15:50 +03:00
|
|
|
|
_renderPhaseSkipConfirm() {
|
2019-12-05 18:05:28 +03:00
|
|
|
|
return <div>
|
2020-06-23 18:43:52 +03:00
|
|
|
|
<p>{_t(
|
|
|
|
|
"If you cancel now, you may lose encrypted messages & data if you lose access to your logins.",
|
|
|
|
|
)}</p>
|
|
|
|
|
<p>{_t(
|
|
|
|
|
"You can also set up Secure Backup & manage your keys in Settings.",
|
|
|
|
|
)}</p>
|
2020-01-28 20:15:50 +03:00
|
|
|
|
<DialogButtons primaryButton={_t('Go back')}
|
2020-06-23 18:43:52 +03:00
|
|
|
|
onPrimaryButtonClick={this._onGoBackClick}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
hasCancel={false}
|
|
|
|
|
>
|
2020-06-23 18:43:52 +03:00
|
|
|
|
<button type="button" className="danger" onClick={this._onCancel}>{_t('Cancel')}</button>
|
2019-12-05 18:05:28 +03:00
|
|
|
|
</DialogButtons>
|
|
|
|
|
</div>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_titleForPhase(phase) {
|
|
|
|
|
switch (phase) {
|
2020-06-23 17:04:39 +03:00
|
|
|
|
case PHASE_CHOOSE_KEY_PASSPHRASE:
|
2020-08-14 18:40:46 +03:00
|
|
|
|
return _t('Set up Secure Backup');
|
2019-12-19 14:26:20 +03:00
|
|
|
|
case PHASE_MIGRATE:
|
2020-06-18 11:35:11 +03:00
|
|
|
|
return _t('Upgrade your encryption');
|
|
|
|
|
case PHASE_PASSPHRASE:
|
2020-06-24 14:43:56 +03:00
|
|
|
|
return _t('Set a Security Phrase');
|
2020-06-18 11:35:11 +03:00
|
|
|
|
case PHASE_PASSPHRASE_CONFIRM:
|
2020-06-24 14:43:56 +03:00
|
|
|
|
return _t('Confirm Security Phrase');
|
2020-01-28 20:15:50 +03:00
|
|
|
|
case PHASE_CONFIRM_SKIP:
|
|
|
|
|
return _t('Are you sure?');
|
2019-12-05 18:05:28 +03:00
|
|
|
|
case PHASE_SHOWKEY:
|
2020-06-23 18:27:41 +03:00
|
|
|
|
return _t('Save your Security Key');
|
2019-12-05 18:05:28 +03:00
|
|
|
|
case PHASE_STORING:
|
2020-06-18 11:35:11 +03:00
|
|
|
|
return _t('Setting up keys');
|
2019-12-05 18:05:28 +03:00
|
|
|
|
default:
|
2020-01-22 14:44:47 +03:00
|
|
|
|
return '';
|
2019-12-05 18:05:28 +03:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
|
|
|
|
|
|
|
|
|
let content;
|
|
|
|
|
if (this.state.error) {
|
|
|
|
|
content = <div>
|
|
|
|
|
<p>{_t("Unable to set up secret storage")}</p>
|
|
|
|
|
<div className="mx_Dialog_buttons">
|
|
|
|
|
<DialogButtons primaryButton={_t('Retry')}
|
|
|
|
|
onPrimaryButtonClick={this._bootstrapSecretStorage}
|
2020-08-14 20:06:35 +03:00
|
|
|
|
hasCancel={this.state.canSkip}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
onCancel={this._onCancel}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>;
|
|
|
|
|
} else {
|
|
|
|
|
switch (this.state.phase) {
|
2019-12-19 14:26:20 +03:00
|
|
|
|
case PHASE_LOADING:
|
|
|
|
|
content = this._renderBusyPhase();
|
|
|
|
|
break;
|
2020-04-20 20:10:23 +03:00
|
|
|
|
case PHASE_LOADERROR:
|
|
|
|
|
content = this._renderPhaseLoadError();
|
|
|
|
|
break;
|
2020-06-23 17:04:39 +03:00
|
|
|
|
case PHASE_CHOOSE_KEY_PASSPHRASE:
|
|
|
|
|
content = this._renderPhaseChooseKeyPassphrase();
|
|
|
|
|
break;
|
2019-12-19 14:26:20 +03:00
|
|
|
|
case PHASE_MIGRATE:
|
|
|
|
|
content = this._renderPhaseMigrate();
|
|
|
|
|
break;
|
2020-06-18 11:35:11 +03:00
|
|
|
|
case PHASE_PASSPHRASE:
|
|
|
|
|
content = this._renderPhasePassPhrase();
|
|
|
|
|
break;
|
|
|
|
|
case PHASE_PASSPHRASE_CONFIRM:
|
|
|
|
|
content = this._renderPhasePassPhraseConfirm();
|
|
|
|
|
break;
|
2019-12-05 18:05:28 +03:00
|
|
|
|
case PHASE_SHOWKEY:
|
2020-05-29 17:42:07 +03:00
|
|
|
|
content = this._renderPhaseShowKey();
|
2019-12-05 18:05:28 +03:00
|
|
|
|
break;
|
2020-06-18 11:35:11 +03:00
|
|
|
|
case PHASE_STORING:
|
|
|
|
|
content = this._renderBusyPhase();
|
|
|
|
|
break;
|
2020-01-28 20:15:50 +03:00
|
|
|
|
case PHASE_CONFIRM_SKIP:
|
|
|
|
|
content = this._renderPhaseSkipConfirm();
|
2019-12-05 18:05:28 +03:00
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-26 14:41:24 +03:00
|
|
|
|
let titleClass = null;
|
2020-06-24 18:12:46 +03:00
|
|
|
|
switch (this.state.phase) {
|
|
|
|
|
case PHASE_PASSPHRASE:
|
|
|
|
|
case PHASE_PASSPHRASE_CONFIRM:
|
2020-06-26 14:43:28 +03:00
|
|
|
|
titleClass = [
|
|
|
|
|
'mx_CreateSecretStorageDialog_titleWithIcon',
|
|
|
|
|
'mx_CreateSecretStorageDialog_securePhraseTitle',
|
|
|
|
|
];
|
2020-06-24 18:12:46 +03:00
|
|
|
|
break;
|
|
|
|
|
case PHASE_SHOWKEY:
|
2020-06-26 14:43:28 +03:00
|
|
|
|
titleClass = [
|
|
|
|
|
'mx_CreateSecretStorageDialog_titleWithIcon',
|
|
|
|
|
'mx_CreateSecretStorageDialog_secureBackupTitle',
|
|
|
|
|
];
|
2020-06-26 14:41:24 +03:00
|
|
|
|
break;
|
|
|
|
|
case PHASE_CHOOSE_KEY_PASSPHRASE:
|
|
|
|
|
titleClass = 'mx_CreateSecretStorageDialog_centeredTitle';
|
2020-06-24 18:12:46 +03:00
|
|
|
|
break;
|
2020-01-22 14:44:47 +03:00
|
|
|
|
}
|
|
|
|
|
|
2019-12-05 18:05:28 +03:00
|
|
|
|
return (
|
|
|
|
|
<BaseDialog className='mx_CreateSecretStorageDialog'
|
|
|
|
|
onFinished={this.props.onFinished}
|
|
|
|
|
title={this._titleForPhase(this.state.phase)}
|
2020-06-24 18:12:46 +03:00
|
|
|
|
titleClass={titleClass}
|
2020-06-18 11:35:11 +03:00
|
|
|
|
hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
|
2020-01-28 19:36:07 +03:00
|
|
|
|
fixedWidth={false}
|
2019-12-05 18:05:28 +03:00
|
|
|
|
>
|
|
|
|
|
<div>
|
|
|
|
|
{content}
|
|
|
|
|
</div>
|
|
|
|
|
</BaseDialog>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|