Merge pull request #4686 from matrix-org/dbkr/recovery_keys_over_passphrases
Use recovery keys over passphrases
This commit is contained in:
commit
8ebae4c3b6
12 changed files with 426 additions and 399 deletions
|
@ -98,3 +98,7 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_CompleteSecurity_resetText {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -30,6 +30,8 @@ import {encodeBase64} from "matrix-js-sdk/src/crypto/olmlib";
|
|||
// operation ends.
|
||||
let secretStorageKeys = {};
|
||||
let secretStorageBeingAccessed = false;
|
||||
// Stores the 'passphraseOnly' option for the active storage access operation
|
||||
let passphraseOnlyOption = null;
|
||||
|
||||
function isCachingAllowed() {
|
||||
return (
|
||||
|
@ -99,6 +101,7 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
|
|||
const key = await inputToKey(input);
|
||||
return await MatrixClientPeg.get().checkSecretStorageKey(key, info);
|
||||
},
|
||||
passphraseOnly: passphraseOnlyOption,
|
||||
},
|
||||
/* className= */ null,
|
||||
/* isPriorityModal= */ false,
|
||||
|
@ -213,19 +216,27 @@ export async function promptForBackupPassphrase() {
|
|||
*
|
||||
* @param {Function} [func] An operation to perform once secret storage has been
|
||||
* bootstrapped. Optional.
|
||||
* @param {bool} [forceReset] Reset secret storage even if it's already set up
|
||||
* @param {object} [opts] Named options
|
||||
* @param {bool} [opts.forceReset] Reset secret storage even if it's already set up
|
||||
* @param {object} [opts.withKeys] Map of key ID to key for SSSS keys that the client
|
||||
* already has available. If a key is not supplied here, the user will be prompted.
|
||||
* @param {bool} [opts.passphraseOnly] If true, do not prompt for recovery key or to reset keys
|
||||
*/
|
||||
export async function accessSecretStorage(func = async () => { }, forceReset = false) {
|
||||
export async function accessSecretStorage(
|
||||
func = async () => { }, opts = {},
|
||||
) {
|
||||
const cli = MatrixClientPeg.get();
|
||||
secretStorageBeingAccessed = true;
|
||||
passphraseOnlyOption = opts.passphraseOnly;
|
||||
secretStorageKeys = Object.assign({}, opts.withKeys || {});
|
||||
try {
|
||||
if (!await cli.hasSecretStorageKey() || forceReset) {
|
||||
if (!await cli.hasSecretStorageKey() || opts.forceReset) {
|
||||
// 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"),
|
||||
{
|
||||
force: forceReset,
|
||||
force: opts.forceReset,
|
||||
},
|
||||
null, /* priority = */ false, /* static = */ true,
|
||||
);
|
||||
|
@ -263,5 +274,6 @@ export async function accessSecretStorage(func = async () => { }, forceReset = f
|
|||
if (!isCachingAllowed()) {
|
||||
secretStorageKeys = {};
|
||||
}
|
||||
passphraseOnlyOption = null;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,25 +20,23 @@ 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";
|
||||
import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
|
||||
import DialogButtons from "../../../../components/views/elements/DialogButtons";
|
||||
import InlineSpinner from "../../../../components/views/elements/InlineSpinner";
|
||||
|
||||
|
||||
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 +63,32 @@ 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?
|
||||
// for /keys/device_signing/upload? (If we have an account password, we
|
||||
// assume that it can)
|
||||
canUploadKeysWithPasswordOnly: null,
|
||||
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,
|
||||
};
|
||||
|
||||
if (props.accountPassword) {
|
||||
// If we have an account password, we assume we can upload keys with
|
||||
// just a password (otherwise leave it as null so we poll to check)
|
||||
this.state.canUploadKeysWithPasswordOnly = 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 +105,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 +117,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 +143,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 +163,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 +172,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 +190,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,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -245,7 +247,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,
|
||||
});
|
||||
|
||||
|
@ -286,9 +290,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({
|
||||
|
@ -307,10 +309,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.
|
||||
|
@ -337,88 +335,41 @@ 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;
|
||||
_onGoBackClick = () => {
|
||||
if (this.state.backupInfo && !this.props.force) {
|
||||
this.setState({phase: PHASE_MIGRATE});
|
||||
} else {
|
||||
this.setState({phase: PHASE_INTRO});
|
||||
}
|
||||
|
||||
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) => {
|
||||
|
@ -433,12 +384,14 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
// 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.canUploadKeysWithPasswordOnly) {
|
||||
if (!this.state.backupSigStatus.usable) {
|
||||
authPrompt = null;
|
||||
nextCaption = _t("Upload");
|
||||
} else if (this.state.canUploadKeysWithPasswordOnly && !this.props.accountPassword) {
|
||||
authPrompt = <div>
|
||||
<div>{_t("Enter your account password to confirm the upgrade:")}</div>
|
||||
<div><Field
|
||||
|
@ -450,11 +403,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
autoFocus={true}
|
||||
/></div>
|
||||
</div>;
|
||||
} else if (!this.state.backupSigStatus.usable) {
|
||||
authPrompt = <div>
|
||||
<div>{_t("Restore your key backup to upgrade your encryption")}</div>
|
||||
</div>;
|
||||
nextCaption = _t("Restore");
|
||||
} else {
|
||||
authPrompt = <p>
|
||||
{_t("You'll need to authenticate with the server to confirm the upgrade.")}
|
||||
|
@ -463,9 +411,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
|
||||
return <form onSubmit={this._onMigrateFormSubmit}>
|
||||
<p>{_t(
|
||||
"Upgrade this session to allow it to verify other sessions, " +
|
||||
"granting them access to encrypted messages and marking them " +
|
||||
"as trusted for other users.",
|
||||
"Upgrade your 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.",
|
||||
)}</p>
|
||||
<div>{authPrompt}</div>
|
||||
<DialogButtons
|
||||
|
@ -481,185 +429,49 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
</form>;
|
||||
}
|
||||
|
||||
_renderPhasePassPhrase() {
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
|
||||
|
||||
return <form onSubmit={this._onPassPhraseNextClick}>
|
||||
<p>{_t(
|
||||
"Set a recovery passphrase to secure encrypted information and recover it if you log out. " +
|
||||
"This should be different to your account password:",
|
||||
)}</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>
|
||||
|
||||
<LabelledToggleSwitch
|
||||
label={ _t("Back up encrypted message keys")}
|
||||
onChange={this._onUseKeyBackupChange} value={this.state.useKeyBackup}
|
||||
/>
|
||||
|
||||
<DialogButtons
|
||||
primaryButton={_t('Continue')}
|
||||
onPrimaryButtonClick={this._onPassPhraseNextClick}
|
||||
_renderPhaseShowKey() {
|
||||
let continueButton;
|
||||
if (this.state.phase === PHASE_SHOWKEY) {
|
||||
continueButton = <DialogButtons primaryButton={_t("Continue")}
|
||||
disabled={!this.state.downloaded && !this.state.copied}
|
||||
onPrimaryButtonClick={this._onShowKeyContinueClick}
|
||||
hasCancel={false}
|
||||
disabled={!this.state.passPhraseValid}
|
||||
>
|
||||
<button type="button"
|
||||
onClick={this._onSkipSetupClick}
|
||||
className="danger"
|
||||
>{_t("Skip")}</button>
|
||||
</DialogButtons>
|
||||
|
||||
<details>
|
||||
<summary>{_t("Advanced")}</summary>
|
||||
<AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
|
||||
{_t("Set up with a recovery key")}
|
||||
</AccessibleButton>
|
||||
</details>
|
||||
</form>;
|
||||
}
|
||||
|
||||
_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 = <div>
|
||||
<div>{matchText}</div>
|
||||
<div>
|
||||
<AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
|
||||
{changeText}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
/>;
|
||||
} else {
|
||||
continueButton = <div className="mx_CreateSecretStorageDialog_continueSpinner">
|
||||
<InlineSpinner />
|
||||
</div>;
|
||||
}
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
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"
|
||||
onClick={this._onSkipSetupClick}
|
||||
className="danger"
|
||||
>{_t("Skip")}</button>
|
||||
</DialogButtons>
|
||||
</form>;
|
||||
}
|
||||
|
||||
_renderPhaseShowKey() {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
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 recovery passphrase.",
|
||||
)}</p>
|
||||
<p>{_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.",
|
||||
)}</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._recoveryKey.encodedPrivateKey}</code>
|
||||
</div>
|
||||
<div className="mx_CreateSecretStorageDialog_recoveryKeyButtons">
|
||||
<AccessibleButton kind='primary' className="mx_Dialog_primary"
|
||||
onClick={this._onDownloadClick}
|
||||
disabled={this.state.phase === PHASE_STORING}
|
||||
>
|
||||
{_t("Download")}
|
||||
</AccessibleButton>
|
||||
<span>{_t("or")}</span>
|
||||
<AccessibleButton
|
||||
kind='primary'
|
||||
className="mx_Dialog_primary mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn"
|
||||
onClick={this._onCopyClick}
|
||||
disabled={this.state.phase === PHASE_STORING}
|
||||
>
|
||||
{_t("Copy")}
|
||||
</AccessibleButton>
|
||||
<AccessibleButton kind='primary' className="mx_Dialog_primary" onClick={this._onDownloadClick}>
|
||||
{_t("Download")}
|
||||
{this.state.copied ? _t("Copied!") : _t("Copy")}
|
||||
</AccessibleButton>
|
||||
</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("Continue")}
|
||||
onPrimaryButtonClick={this._bootstrapSecretStorage}
|
||||
hasCancel={false}>
|
||||
<button onClick={this._onKeepItSafeBackClick}>{_t("Back")}</button>
|
||||
</DialogButtons>
|
||||
{continueButton}
|
||||
</div>;
|
||||
}
|
||||
|
||||
|
@ -671,7 +483,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
}
|
||||
|
||||
_renderPhaseLoadError() {
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
return <div>
|
||||
<p>{_t("Unable to query secret storage status")}</p>
|
||||
<div className="mx_Dialog_buttons">
|
||||
|
@ -684,29 +495,44 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
</div>;
|
||||
}
|
||||
|
||||
_renderPhaseDone() {
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
_renderPhaseIntro() {
|
||||
let cancelButton;
|
||||
if (this.props.force) {
|
||||
// if this is a forced key reset then aborting will just leave the old keys
|
||||
// in place, and is thereforece just 'cancel'
|
||||
cancelButton = <button type="button" onClick={this._onCancel}>{_t('Cancel')}</button>;
|
||||
} else {
|
||||
// if it's setting up from scratch then aborting leaves the user without
|
||||
// crypto set up, so they skipping the setup.
|
||||
cancelButton = <button type="button"
|
||||
className="danger" onClick={this._onSkipSetupClick}
|
||||
>{_t('Skip')}</button>;
|
||||
}
|
||||
|
||||
return <div>
|
||||
<p>{_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.",
|
||||
)}</p>
|
||||
<DialogButtons primaryButton={_t('OK')}
|
||||
onPrimaryButtonClick={this._onDone}
|
||||
hasCancel={false}
|
||||
/>
|
||||
<div className="mx_Dialog_buttons">
|
||||
<DialogButtons primaryButton={_t('Continue')}
|
||||
onPrimaryButtonClick={this._onIntroContinueClick}
|
||||
hasCancel={false}
|
||||
>
|
||||
{cancelButton}
|
||||
</DialogButtons>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
|
||||
_renderPhaseSkipConfirm() {
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
return <div>
|
||||
{_t(
|
||||
"Without completing security on this session, it won’t have " +
|
||||
"access to encrypted messages.",
|
||||
)}
|
||||
<DialogButtons primaryButton={_t('Go back')}
|
||||
onPrimaryButtonClick={this._onSetUpClick}
|
||||
onPrimaryButtonClick={this._onGoBackClick}
|
||||
hasCancel={false}
|
||||
>
|
||||
<button type="button" className="danger" onClick={this._onCancel}>{_t('Skip')}</button>
|
||||
|
@ -716,21 +542,15 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
|
||||
_titleForPhase(phase) {
|
||||
switch (phase) {
|
||||
case PHASE_INTRO:
|
||||
return _t('Create a Recovery Key');
|
||||
case PHASE_MIGRATE:
|
||||
return _t('Upgrade your encryption');
|
||||
case PHASE_PASSPHRASE:
|
||||
return _t('Set up encryption');
|
||||
case PHASE_PASSPHRASE_CONFIRM:
|
||||
return _t('Confirm recovery passphrase');
|
||||
return _t('Upgrade your Recovery Key');
|
||||
case PHASE_CONFIRM_SKIP:
|
||||
return _t('Are you sure?');
|
||||
case PHASE_SHOWKEY:
|
||||
case PHASE_KEEPITSAFE:
|
||||
return _t('Make a copy of your recovery key');
|
||||
case PHASE_STORING:
|
||||
return _t('Setting up keys');
|
||||
case PHASE_DONE:
|
||||
return _t("You're done!");
|
||||
return _t('Store your Recovery Key');
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
|
@ -741,7 +561,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
|
||||
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">
|
||||
|
@ -760,26 +579,15 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
case PHASE_LOADERROR:
|
||||
content = this._renderPhaseLoadError();
|
||||
break;
|
||||
case PHASE_INTRO:
|
||||
content = this._renderPhaseIntro();
|
||||
break;
|
||||
case PHASE_MIGRATE:
|
||||
content = this._renderPhaseMigrate();
|
||||
break;
|
||||
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();
|
||||
content = this._renderPhaseShowKey();
|
||||
break;
|
||||
case PHASE_CONFIRM_SKIP:
|
||||
content = this._renderPhaseSkipConfirm();
|
||||
|
@ -797,7 +605,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
|
|||
onFinished={this.props.onFinished}
|
||||
title={this._titleForPhase(this.state.phase)}
|
||||
headerImage={headerImage}
|
||||
hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
|
||||
hasCancel={this.props.hasCancel}
|
||||
fixedWidth={false}
|
||||
>
|
||||
<div>
|
||||
|
|
|
@ -21,6 +21,7 @@ import * as sdk from '../../../index';
|
|||
import {
|
||||
SetupEncryptionStore,
|
||||
PHASE_INTRO,
|
||||
PHASE_RECOVERY_KEY,
|
||||
PHASE_BUSY,
|
||||
PHASE_DONE,
|
||||
PHASE_CONFIRM_SKIP,
|
||||
|
@ -61,6 +62,9 @@ export default class CompleteSecurity extends React.Component {
|
|||
if (phase === PHASE_INTRO) {
|
||||
icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
|
||||
title = _t("Verify this login");
|
||||
} else if (phase === PHASE_RECOVERY_KEY) {
|
||||
icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified" />;
|
||||
title = _t("Recovery Key");
|
||||
} else if (phase === PHASE_DONE) {
|
||||
icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified" />;
|
||||
title = _t("Session verified");
|
||||
|
|
|
@ -19,15 +19,26 @@ import PropTypes from 'prop-types';
|
|||
import { _t } from '../../../languageHandler';
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import * as sdk from '../../../index';
|
||||
import withValidation from '../../views/elements/Validation';
|
||||
import { decodeRecoveryKey } from 'matrix-js-sdk/src/crypto/recoverykey';
|
||||
import {
|
||||
SetupEncryptionStore,
|
||||
PHASE_INTRO,
|
||||
PHASE_RECOVERY_KEY,
|
||||
PHASE_BUSY,
|
||||
PHASE_DONE,
|
||||
PHASE_CONFIRM_SKIP,
|
||||
PHASE_FINISHED,
|
||||
} from '../../../stores/SetupEncryptionStore';
|
||||
|
||||
function keyHasPassphrase(keyInfo) {
|
||||
return (
|
||||
keyInfo.passphrase &&
|
||||
keyInfo.passphrase.salt &&
|
||||
keyInfo.passphrase.iterations
|
||||
);
|
||||
}
|
||||
|
||||
export default class SetupEncryptionBody extends React.Component {
|
||||
static propTypes = {
|
||||
onFinished: PropTypes.func.isRequired,
|
||||
|
@ -45,6 +56,11 @@ export default class SetupEncryptionBody extends React.Component {
|
|||
// Because of the latter, it lives in the state.
|
||||
verificationRequest: store.verificationRequest,
|
||||
backupInfo: store.backupInfo,
|
||||
recoveryKey: '',
|
||||
// whether the recovery key is a valid recovery key
|
||||
recoveryKeyValid: null,
|
||||
// whether the recovery key is the correct key or not
|
||||
recoveryKeyCorrect: null,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -67,9 +83,19 @@ export default class SetupEncryptionBody extends React.Component {
|
|||
store.stop();
|
||||
}
|
||||
|
||||
_onUsePassphraseClick = async () => {
|
||||
_onResetClick = () => {
|
||||
const store = SetupEncryptionStore.sharedInstance();
|
||||
store.usePassPhrase();
|
||||
store.startKeyReset();
|
||||
}
|
||||
|
||||
_onUseRecoveryKeyClick = async () => {
|
||||
const store = SetupEncryptionStore.sharedInstance();
|
||||
store.useRecoveryKey();
|
||||
}
|
||||
|
||||
_onRecoveryKeyCancelClick() {
|
||||
const store = SetupEncryptionStore.sharedInstance();
|
||||
store.cancelUseRecoveryKey();
|
||||
}
|
||||
|
||||
onSkipClick = () => {
|
||||
|
@ -92,6 +118,66 @@ export default class SetupEncryptionBody extends React.Component {
|
|||
store.done();
|
||||
}
|
||||
|
||||
_onUsePassphraseClick = () => {
|
||||
const store = SetupEncryptionStore.sharedInstance();
|
||||
store.usePassPhrase();
|
||||
}
|
||||
|
||||
_onRecoveryKeyChange = (e) => {
|
||||
this.setState({recoveryKey: e.target.value});
|
||||
}
|
||||
|
||||
_onRecoveryKeyValidate = async (fieldState) => {
|
||||
const result = await this._validateRecoveryKey(fieldState);
|
||||
this.setState({recoveryKeyValid: result.valid});
|
||||
return result;
|
||||
}
|
||||
|
||||
_validateRecoveryKey = withValidation({
|
||||
rules: [
|
||||
{
|
||||
key: "required",
|
||||
test: async (state) => {
|
||||
try {
|
||||
const decodedKey = decodeRecoveryKey(state.value);
|
||||
const correct = await MatrixClientPeg.get().checkSecretStorageKey(
|
||||
decodedKey, SetupEncryptionStore.sharedInstance().keyInfo,
|
||||
);
|
||||
this.setState({
|
||||
recoveryKeyValid: true,
|
||||
recoveryKeyCorrect: correct,
|
||||
});
|
||||
return correct;
|
||||
} catch (e) {
|
||||
this.setState({
|
||||
recoveryKeyValid: false,
|
||||
recoveryKeyCorrect: false,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
},
|
||||
invalid: function() {
|
||||
if (this.state.recoveryKeyValid) {
|
||||
return _t("This isn't the recovery key for your account");
|
||||
} else {
|
||||
return _t("This isn't a valid recovery key");
|
||||
}
|
||||
},
|
||||
valid: function() {
|
||||
return _t("Looks good!");
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
_onRecoveryKeyFormSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!this.state.recoveryKeyCorrect) return;
|
||||
|
||||
const store = SetupEncryptionStore.sharedInstance();
|
||||
store.setupWithRecoveryKey(decodeRecoveryKey(this.state.recoveryKey));
|
||||
}
|
||||
|
||||
render() {
|
||||
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
|
||||
|
||||
|
@ -108,6 +194,13 @@ export default class SetupEncryptionBody extends React.Component {
|
|||
member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
|
||||
/>;
|
||||
} else if (phase === PHASE_INTRO) {
|
||||
const store = SetupEncryptionStore.sharedInstance();
|
||||
let recoveryKeyPrompt;
|
||||
if (keyHasPassphrase(store.keyInfo)) {
|
||||
recoveryKeyPrompt = _t("Use Recovery Key or Passphrase");
|
||||
} else {
|
||||
recoveryKeyPrompt = _t("Use Recovery Key");
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<p>{_t(
|
||||
|
@ -131,15 +224,67 @@ export default class SetupEncryptionBody extends React.Component {
|
|||
</div>
|
||||
|
||||
<div className="mx_CompleteSecurity_actionRow">
|
||||
<AccessibleButton kind="link" onClick={this._onUsePassphraseClick}>
|
||||
{_t("Use Recovery Passphrase or Key")}
|
||||
<AccessibleButton kind="link" onClick={this._onUseRecoveryKeyClick}>
|
||||
{recoveryKeyPrompt}
|
||||
</AccessibleButton>
|
||||
<AccessibleButton kind="danger" onClick={this.onSkipClick}>
|
||||
{_t("Skip")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
<div className="mx_CompleteSecurity_resetText">{_t(
|
||||
"If you've forgotten your recovery key you can " +
|
||||
"<button>set up new recovery options</button>", {}, {
|
||||
button: sub => <AccessibleButton
|
||||
element="span" className="mx_linkButton" onClick={this._onResetClick}
|
||||
>
|
||||
{sub}
|
||||
</AccessibleButton>,
|
||||
},
|
||||
)}</div>
|
||||
</div>
|
||||
);
|
||||
} else if (phase === PHASE_RECOVERY_KEY) {
|
||||
const store = SetupEncryptionStore.sharedInstance();
|
||||
let keyPrompt;
|
||||
if (keyHasPassphrase(store.keyInfo)) {
|
||||
keyPrompt = _t(
|
||||
"Enter your Recovery Key or enter a <a>Recovery Passphrase</a> to continue.", {},
|
||||
{
|
||||
a: sub => <AccessibleButton
|
||||
element="span"
|
||||
className="mx_linkButton"
|
||||
onClick={this._onUsePassphraseClick}
|
||||
>{sub}</AccessibleButton>,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
keyPrompt = _t("Enter your Recovery Key to continue.");
|
||||
}
|
||||
|
||||
const Field = sdk.getComponent('elements.Field');
|
||||
return <form onSubmit={this._onRecoveryKeyFormSubmit}>
|
||||
<p>{keyPrompt}</p>
|
||||
<div className="mx_CompleteSecurity_recoveryKeyEntry">
|
||||
<Field
|
||||
type="text"
|
||||
label={_t('Recovery Key')}
|
||||
value={this.state.recoveryKey}
|
||||
onChange={this._onRecoveryKeyChange}
|
||||
onValidate={this._onRecoveryKeyValidate}
|
||||
/>
|
||||
</div>
|
||||
<div className="mx_CompleteSecurity_actionRow">
|
||||
<AccessibleButton kind="secondary" onClick={this._onRecoveryKeyCancelClick}>
|
||||
{_t("Cancel")}
|
||||
</AccessibleButton>
|
||||
<AccessibleButton kind="primary"
|
||||
disabled={!this.state.recoveryKeyCorrect}
|
||||
onClick={this._onRecoveryKeyFormSubmit}
|
||||
>
|
||||
{_t("Continue")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</form>;
|
||||
} else if (phase === PHASE_DONE) {
|
||||
let message;
|
||||
if (this.state.backupInfo) {
|
||||
|
|
|
@ -88,7 +88,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
|
|||
|
||||
_onResetRecoveryClick = () => {
|
||||
this.props.onFinished(false);
|
||||
accessSecretStorage(() => {}, /* forceReset = */ true);
|
||||
accessSecretStorage(() => {}, {forceReset: true});
|
||||
}
|
||||
|
||||
_onRecoveryKeyChange = (e) => {
|
||||
|
|
|
@ -32,6 +32,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
|
|||
keyInfo: PropTypes.object.isRequired,
|
||||
// Function from one of { passphrase, recoveryKey } -> boolean
|
||||
checkPrivateKey: PropTypes.func.isRequired,
|
||||
// If true, only prompt for a passphrase and do not offer to restore with
|
||||
// a recovery key or reset keys.
|
||||
passphraseOnly: PropTypes.bool,
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
|
@ -58,7 +61,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
|
|||
_onResetRecoveryClick = () => {
|
||||
// Re-enter the access flow, but resetting storage this time around.
|
||||
this.props.onFinished(false);
|
||||
accessSecretStorage(() => {}, /* forceReset = */ true);
|
||||
accessSecretStorage(() => {}, {forceReset: true});
|
||||
}
|
||||
|
||||
_onRecoveryKeyChange = (e) => {
|
||||
|
@ -164,7 +167,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
|
|||
primaryDisabled={this.state.passPhrase.length === 0}
|
||||
/>
|
||||
</form>
|
||||
{_t(
|
||||
{this.props.passphraseOnly ? null : _t(
|
||||
"If you've forgotten your recovery passphrase you can "+
|
||||
"<button1>use your recovery key</button1> or " +
|
||||
"<button2>set up new recovery options</button2>."
|
||||
|
@ -234,7 +237,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
|
|||
primaryDisabled={!this.state.recoveryKeyValid}
|
||||
/>
|
||||
</form>
|
||||
{_t(
|
||||
{this.props.passphraseOnly ? null : _t(
|
||||
"If you've forgotten your recovery key you can "+
|
||||
"<button>set up new recovery options</button>."
|
||||
, {}, {
|
||||
|
|
|
@ -113,7 +113,7 @@ export default class CrossSigningPanel extends React.PureComponent {
|
|||
_bootstrapSecureSecretStorage = async (forceReset=false) => {
|
||||
this.setState({ error: null });
|
||||
try {
|
||||
await accessSecretStorage(() => undefined, forceReset);
|
||||
await accessSecretStorage(() => undefined, {forceReset});
|
||||
} catch (e) {
|
||||
this.setState({ error: e });
|
||||
console.error("Error bootstrapping secret storage", e);
|
||||
|
|
|
@ -2066,6 +2066,7 @@
|
|||
"Account settings": "Account settings",
|
||||
"Could not load user profile": "Could not load user profile",
|
||||
"Verify this login": "Verify this login",
|
||||
"Recovery Key": "Recovery Key",
|
||||
"Session verified": "Session verified",
|
||||
"Failed to send email": "Failed to send email",
|
||||
"The email address linked to your account must be entered.": "The email address linked to your account must be entered.",
|
||||
|
@ -2119,10 +2120,16 @@
|
|||
"You can now close this window or <a>log in</a> to your new account.": "You can now close this window or <a>log in</a> to your new account.",
|
||||
"Registration Successful": "Registration Successful",
|
||||
"Create your account": "Create your account",
|
||||
"This isn't the recovery key for your account": "This isn't the recovery key for your account",
|
||||
"This isn't a valid recovery key": "This isn't a valid recovery key",
|
||||
"Looks good!": "Looks good!",
|
||||
"Use Recovery Key or Passphrase": "Use Recovery Key or Passphrase",
|
||||
"Use Recovery Key": "Use Recovery Key",
|
||||
"Confirm your identity by verifying this login from one of your other sessions, granting it access to encrypted messages.": "Confirm your identity by verifying this login from one of your other sessions, granting it access to encrypted messages.",
|
||||
"This requires the latest Riot on your other devices:": "This requires the latest Riot on your other devices:",
|
||||
"or another cross-signing capable Matrix client": "or another cross-signing capable Matrix client",
|
||||
"Use Recovery Passphrase or Key": "Use Recovery Passphrase or Key",
|
||||
"Enter your Recovery Key or enter a <a>Recovery Passphrase</a> to continue.": "Enter your Recovery Key or enter a <a>Recovery Passphrase</a> to continue.",
|
||||
"Enter your Recovery Key to continue.": "Enter your Recovery Key to continue.",
|
||||
"Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.",
|
||||
"Your new session is now verified. Other users will see it as trusted.": "Your new session is now verified. Other users will see it as trusted.",
|
||||
"Without completing security on this session, it won’t have access to encrypted messages.": "Without completing security on this session, it won’t have access to encrypted messages.",
|
||||
|
@ -2166,47 +2173,43 @@
|
|||
"Confirm encryption setup": "Confirm encryption setup",
|
||||
"Click the button below to confirm setting up encryption.": "Click the button below to confirm setting up encryption.",
|
||||
"Enter your account password to confirm the upgrade:": "Enter your account password to confirm the upgrade:",
|
||||
"Restore your key backup to upgrade your encryption": "Restore your key backup to upgrade your encryption",
|
||||
"Restore": "Restore",
|
||||
"You'll need to authenticate with the server to confirm the upgrade.": "You'll need to authenticate with the server to confirm the upgrade.",
|
||||
"Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.",
|
||||
"Set a recovery passphrase to secure encrypted information and recover it if you log out. This should be different to your account password:": "Set a recovery passphrase to secure encrypted information and recover it if you log out. This should be different to your account password:",
|
||||
"Upgrade your 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.": "Upgrade your 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.",
|
||||
"Store your Recovery Key somewhere safe, it can be used to unlock your encrypted messages & data.": "Store your Recovery Key somewhere safe, it can be used to unlock your encrypted messages & data.",
|
||||
"Download": "Download",
|
||||
"Copy": "Copy",
|
||||
"Unable to query secret storage status": "Unable to query secret storage status",
|
||||
"Retry": "Retry",
|
||||
"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.": "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.",
|
||||
"Create a Recovery Key": "Create a Recovery Key",
|
||||
"Upgrade your Recovery Key": "Upgrade your Recovery Key",
|
||||
"Store your Recovery Key": "Store your Recovery Key",
|
||||
"Unable to set up secret storage": "Unable to set up secret storage",
|
||||
"We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.",
|
||||
"For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
|
||||
"Enter a recovery passphrase": "Enter a recovery passphrase",
|
||||
"Great! This recovery passphrase looks strong enough.": "Great! This recovery passphrase looks strong enough.",
|
||||
"Back up encrypted message keys": "Back up encrypted message keys",
|
||||
"Set up with a recovery key": "Set up with a recovery key",
|
||||
"That matches!": "That matches!",
|
||||
"Use a different passphrase?": "Use a different passphrase?",
|
||||
"That doesn't match.": "That doesn't match.",
|
||||
"Go back to set it again.": "Go back to set it again.",
|
||||
"Enter your recovery passphrase a second time to confirm it.": "Enter your recovery passphrase a second time to confirm it.",
|
||||
"Confirm your recovery passphrase": "Confirm your recovery passphrase",
|
||||
"Please enter your recovery passphrase a second time to confirm.": "Please enter your recovery passphrase a second time to confirm.",
|
||||
"Repeat your recovery passphrase...": "Repeat your recovery passphrase...",
|
||||
"Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your recovery passphrase.": "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your recovery passphrase.",
|
||||
"Keep a copy of it somewhere secure, like a password manager or even a safe.": "Keep a copy of it somewhere secure, like a password manager or even a safe.",
|
||||
"Your recovery key": "Your recovery key",
|
||||
"Copy": "Copy",
|
||||
"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 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",
|
||||
"Unable to query secret storage status": "Unable to query secret storage status",
|
||||
"Retry": "Retry",
|
||||
"You can now verify your other devices, and other users to keep your chats safe.": "You can now verify your other devices, and other users to keep your chats safe.",
|
||||
"Upgrade your encryption": "Upgrade your encryption",
|
||||
"Confirm recovery passphrase": "Confirm recovery passphrase",
|
||||
"Make a copy of your recovery key": "Make a copy of your recovery key",
|
||||
"You're done!": "You're done!",
|
||||
"Unable to set up secret storage": "Unable to set up secret storage",
|
||||
"We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.",
|
||||
"For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
|
||||
"Please enter your recovery passphrase a second time to confirm.": "Please enter your recovery passphrase a second time to confirm.",
|
||||
"Repeat your recovery passphrase...": "Repeat your recovery passphrase...",
|
||||
"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 session.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.",
|
||||
"Set up Secure Message Recovery": "Set up Secure Message Recovery",
|
||||
"Secure your backup with a recovery passphrase": "Secure your backup with a recovery passphrase",
|
||||
"Confirm your recovery passphrase": "Confirm your recovery passphrase",
|
||||
"Make a copy of your recovery key": "Make a copy of your recovery key",
|
||||
"Starting backup...": "Starting backup...",
|
||||
"Success!": "Success!",
|
||||
"Create key backup": "Create key backup",
|
||||
|
|
|
@ -20,10 +20,11 @@ import { accessSecretStorage, AccessCancelledError } from '../CrossSigningManage
|
|||
import { PHASE_DONE as VERIF_PHASE_DONE } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
|
||||
|
||||
export const PHASE_INTRO = 0;
|
||||
export const PHASE_BUSY = 1;
|
||||
export const PHASE_DONE = 2; //final done stage, but still showing UX
|
||||
export const PHASE_CONFIRM_SKIP = 3;
|
||||
export const PHASE_FINISHED = 4; //UX can be closed
|
||||
export const PHASE_RECOVERY_KEY = 1;
|
||||
export const PHASE_BUSY = 2;
|
||||
export const PHASE_DONE = 3; //final done stage, but still showing UX
|
||||
export const PHASE_CONFIRM_SKIP = 4;
|
||||
export const PHASE_FINISHED = 5; //UX can be closed
|
||||
|
||||
export class SetupEncryptionStore extends EventEmitter {
|
||||
static sharedInstance() {
|
||||
|
@ -36,11 +37,19 @@ export class SetupEncryptionStore extends EventEmitter {
|
|||
return;
|
||||
}
|
||||
this._started = true;
|
||||
this.phase = PHASE_INTRO;
|
||||
this.phase = PHASE_BUSY;
|
||||
this.verificationRequest = null;
|
||||
this.backupInfo = null;
|
||||
|
||||
// ID of the key that the secrets we want are encrypted with
|
||||
this.keyId = null;
|
||||
// Descriptor of the key that the secrets we want are encrypted with
|
||||
this.keyInfo = null;
|
||||
|
||||
MatrixClientPeg.get().on("crypto.verification.request", this.onVerificationRequest);
|
||||
MatrixClientPeg.get().on('userTrustStatusChanged', this._onUserTrustStatusChanged);
|
||||
|
||||
this.fetchKeyInfo();
|
||||
}
|
||||
|
||||
stop() {
|
||||
|
@ -57,7 +66,49 @@ export class SetupEncryptionStore extends EventEmitter {
|
|||
}
|
||||
}
|
||||
|
||||
async fetchKeyInfo() {
|
||||
const keys = await MatrixClientPeg.get().isSecretStored('m.cross_signing.master', false);
|
||||
if (Object.keys(keys).length === 0) {
|
||||
this.keyId = null;
|
||||
this.keyInfo = null;
|
||||
} else {
|
||||
// If the secret is stored under more than one key, we just pick an arbitrary one
|
||||
this.keyId = Object.keys(keys)[0];
|
||||
this.keyInfo = keys[this.keyId];
|
||||
}
|
||||
|
||||
this.phase = PHASE_INTRO;
|
||||
this.emit("update");
|
||||
}
|
||||
|
||||
async startKeyReset() {
|
||||
try {
|
||||
await accessSecretStorage(() => {}, {forceReset: true});
|
||||
// If the keys are reset, the trust status event will fire and we'll change state
|
||||
} catch (e) {
|
||||
// dialog was cancelled - stay on the current screen
|
||||
}
|
||||
}
|
||||
|
||||
async useRecoveryKey() {
|
||||
this.phase = PHASE_RECOVERY_KEY;
|
||||
this.emit("update");
|
||||
}
|
||||
|
||||
cancelUseRecoveryKey() {
|
||||
this.phase = PHASE_INTRO;
|
||||
this.emit("update");
|
||||
}
|
||||
|
||||
async setupWithRecoveryKey(recoveryKey) {
|
||||
this.startTrustCheck({[this.keyId]: recoveryKey});
|
||||
}
|
||||
|
||||
async usePassPhrase() {
|
||||
this.startTrustCheck();
|
||||
}
|
||||
|
||||
async startTrustCheck(withKeys) {
|
||||
this.phase = PHASE_BUSY;
|
||||
this.emit("update");
|
||||
const cli = MatrixClientPeg.get();
|
||||
|
@ -84,6 +135,9 @@ export class SetupEncryptionStore extends EventEmitter {
|
|||
// to advance before this.
|
||||
await cli.restoreKeyBackupWithSecretStorage(backupInfo);
|
||||
}
|
||||
}, {
|
||||
withKeys,
|
||||
passphraseOnly: true,
|
||||
}).catch(reject);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
|
@ -79,20 +79,7 @@ module.exports = async function signup(session, username, password, homeserver)
|
|||
const acceptButton = await session.query('.mx_InteractiveAuthEntryComponents_termsSubmit');
|
||||
await acceptButton.click();
|
||||
|
||||
//plow through cross-signing setup by entering arbitrary details
|
||||
//TODO: It's probably important for the tests to know the passphrase
|
||||
const xsigningPassphrase = 'a7eaXcjpa9!Yl7#V^h$B^%dovHUVX'; // https://xkcd.com/221/
|
||||
let passphraseField = await session.query('.mx_CreateSecretStorageDialog_passPhraseField input');
|
||||
await session.replaceInputText(passphraseField, xsigningPassphrase);
|
||||
await session.delay(1000); // give it a second to analyze our passphrase for security
|
||||
let xsignContButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_buttons .mx_Dialog_primary');
|
||||
await xsignContButton.click();
|
||||
|
||||
//repeat passphrase entry
|
||||
passphraseField = await session.query('.mx_CreateSecretStorageDialog_passPhraseField input');
|
||||
await session.replaceInputText(passphraseField, xsigningPassphrase);
|
||||
await session.delay(1000); // give it a second to analyze our passphrase for security
|
||||
xsignContButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_buttons .mx_Dialog_primary');
|
||||
const xsignContButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_buttons .mx_Dialog_primary');
|
||||
await xsignContButton.click();
|
||||
|
||||
//ignore the recovery key
|
||||
|
@ -101,13 +88,11 @@ module.exports = async function signup(session, username, password, homeserver)
|
|||
await copyButton.click();
|
||||
|
||||
//acknowledge that we copied the recovery key to a safe place
|
||||
const copyContinueButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_primary');
|
||||
const copyContinueButton = await session.query(
|
||||
'.mx_CreateSecretStorageDialog .mx_Dialog_buttons .mx_Dialog_primary',
|
||||
);
|
||||
await copyContinueButton.click();
|
||||
|
||||
//acknowledge that we're done cross-signing setup and our keys are safe
|
||||
const doneOkButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_primary');
|
||||
await doneOkButton.click();
|
||||
|
||||
//wait for registration to finish so the hash gets set
|
||||
//onhashchange better?
|
||||
|
||||
|
|
Loading…
Reference in a new issue