imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP e2e key backups

Browse source 
Continues from Matthew's work: adds a feature flag & panel in
user settings to create a backup.

Can't restore a backup yet, nor even continue backing up to the same
backup after a refresh.
This commit is contained in:
David Baker 2018-09-13 17:11:46 +01:00
parent 59e4879b14
commit 292b1f09af
9 changed files with 442 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/structures/MatrixChat.js
View file

@ -48,6 +48,8 @@ import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
import { startAnyRegistrationFlow } from "../../Registration.js";
import { messageForSyncError } from '../../utils/ErrorUtils';
import SuggestKeyRestoreHandler from "../../SuggestKeyRestoreHandler";
/** constants for MatrixChat.state.view */
const VIEWS = {
// a special initial state which is only used at startup, while we are

11
src/components/structures/UserSettings.js
View file

@ -736,6 +736,16 @@ module.exports = React.createClass({
</div>
);
}
let keyBackupSection;
if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
const KeyBackupPanel = sdk.getComponent('views.settings.KeyBackupPanel');
keyBackupSection = <div className="mx_UserSettings_section">
<h3>{ _t("Key Backup") }</h3>
<KeyBackupPanel />
</div>;
}
return (
<div>
<h3>{ _t("Cryptography") }</h3>
@ -751,6 +761,7 @@ module.exports = React.createClass({
<div className="mx_UserSettings_section">
{ CRYPTO_SETTINGS.map( this._renderDeviceSetting ) }
</div>
{keyBackupSection}
</div>
);
},

68
src/components/views/dialogs/SuggestKeyBackupDialog.js
View file

@ -1,68 +0,0 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import Modal from '../../../Modal';
import React from 'react';
import PropTypes from 'prop-types';
import sdk from '../../../index';
import { _t, _td } from '../../../languageHandler';
/**
* Dialog which asks the user whether they want to restore megolm keys
* from various sources when they first start using E2E on a new device.
*/
export default React.createClass({
propTypes: {
onStartNewBackup: PropTypes.func.isRequired,
},
render: function() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
return (
<BaseDialog className='mx_SuggestKeyRestoreDialog'
onFinished={this.props.onFinished}
title={_t('Backup encryption keys on your server?')}
>
<div>
<p>To avoid ever losing your encrypted message history, you
can save your encryption keys on the server, protected by a recovery key.
</p>
<p>To maximise security, your recovery key is never stored by the app,
so you must store it yourself somewhere safe.</p>
<p>
<p>Warning: storing your encryption keys on the server means that
if someone gains access to your account and also steals your recovery key,
they will be able to read all of your encrypted conversation history.
</p>
<p>Do you wish to generate a recovery key and backup your encryption
keys on the server?
<div className="mx_Dialog_buttons">
<button onClick={this.props.onStartNewBackup}>
{ _t("Generate recovery key and enable online backups") }
</button>
<button onClick={this.props.onFinished}>
{ _t("I'll stick to manual backups") }
</button>
</div>
</div>
</BaseDialog>
);
},
});

230
src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js Normal file
View file

@ -0,0 +1,230 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import Modal from '../../../../Modal';
import React from 'react';
import PropTypes from 'prop-types';
import sdk from '../../../../index';
import MatrixClientPeg from '../../../../MatrixClientPeg';
import { formatCryptoKey } from '../../../../utils/FormattingUtils';
import Promise from 'bluebird';
import { _t, _td } from '../../../../languageHandler';
const PHASE_INTRO = 0;
const PHASE_GENERATING = 1;
const PHASE_SHOWKEY = 2;
const PHASE_MAKEBACKUP = 3;
const PHASE_UPLOAD = 4;
const PHASE_DONE = 5;
// XXX: copied from ShareDialog: factor out into utils
function selectText(target) {
const range = document.createRange();
range.selectNodeContents(target);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
/**
* Walks the user through the process of creating an e22 key backup
* on the server.
*/
export default React.createClass({
getInitialState: function() {
return {
phase: PHASE_INTRO,
};
},
componentWillMount: function() {
this._recoveryKeyNode = null;
this._keyBackupInfo = null;
},
_collectRecoveryKeyNode: function(n) {
this._recoveryKeyNode = n;
},
_copyRecoveryKey: function() {
selectText(this._recoveryKeyNode);
const successful = document.execCommand('copy');
if (successful) {
this.setState({copied: true});
}
},
_createBackup: function() {
this.setState({
phase: PHASE_MAKEBACKUP,
error: null,
});
this._createBackupPromise = MatrixClientPeg.get().createKeyBackupVersion(
this._keyBackupInfo,
).then((info) => {
this.setState({
phase: PHASE_UPLOAD,
});
return MatrixClientPeg.get().backupAllGroupSessions(info.version);
}).then(() => {
this.setState({
phase: PHASE_DONE,
});
}).catch(e => {
console.log("Error creating key backup", e);
this.setState({
error: e,
});
});
},
_onCancel: function() {
this.props.onFinished(false);
},
_onDone: function() {
this.props.onFinished(true);
},
_generateKey: async function() {
this.setState({
phase: PHASE_GENERATING,
});
// Look, work is being done!
await Promise.delay(1200);
this._keyBackupInfo = MatrixClientPeg.get().prepareKeyBackupVersion();
this.setState({
phase: PHASE_SHOWKEY,
});
},
_renderPhaseIntro: function() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return <div>
<p>To avoid ever losing your encrypted message history, you
can save your encryption keys on the server, protected by a recovery key.
</p>
<p>To maximise security, your recovery key is never stored by the app,
so you must store it yourself somewhere safe.</p>
<p>Warning: storing your encryption keys on the server means that
if someone gains access to your account and also steals your recovery key,
they will be able to read all of your encrypted conversation history.
</p>
<p>Do you wish to generate a recovery key and backup your encryption
keys on the server?</p>
<DialogButtons primaryButton={_t('Generate recovery key')}
onPrimaryButtonClick={this._generateKey}
onCancel={this._onCancel}
cancelButton={_t("I'll stick to manual backups")}
/>
</div>;
},
_renderPhaseShowKey: function() {
return <div>
<p>{_t("Here is your recovery key:")}</p>
<p className="mx_CreateKeyBackupDialog_recoveryKey">
<code ref={this._collectRecoveryKeyNode}>{formatCryptoKey(this._keyBackupInfo.recovery_key)}</code>
</p>
<p>{_t("This key can decrypt your full message history.")}</p>
<p>{_t(
"When you've saved it somewhere safe, proceed to the next step where the key will be used to "+
"create an encrypted backup of your message keys and then destroyed."
)}</p>
<div className="mx_Dialog_buttons">
<button onClick={this._copyRecoveryKey}>
{this.state.copied ? _t("Copied!") : _t("Copy to clipboard")}
</button>
<button onClick={this._createBackup}>
{_t("Proceed")}
</button>
</div>
</div>;
},
_renderBusyPhase: function(text) {
const Spinner = sdk.getComponent('views.elements.Spinner');
return <div>
<p>{_t(text)}</p>
<Spinner />
</div>;
},
_renderPhaseDone: function() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return <div>
<p>{_t("Backup created")}</p>
<p>{_t("Your encryption keys are now being backed up to your Homeserver.")}</p>
<DialogButtons primaryButton={_t('Close')}
onPrimaryButtonClick={this._onDone}
hasCancel={false}
/>
</div>;
},
render: function() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
let content;
if (this.state.error) {
content = <div>
<p>{_t("Unable to create key backup")}</p>
<div className="mx_Dialog_buttons">
<button onClick={this._createBackup}>
{_t("Retry")}
</button>
</div>
</div>;
} else {
switch (this.state.phase) {
case PHASE_INTRO:
content = this._renderPhaseIntro();
break;
case PHASE_GENERATING:
content = this._renderBusyPhase(_td("Generating recovery key..."));
break;
case PHASE_SHOWKEY:
content = this._renderPhaseShowKey();
break;
case PHASE_MAKEBACKUP:
content = this._renderBusyPhase(_td("Creating backup..."));
break;
case PHASE_UPLOAD:
content = this._renderBusyPhase(_td("Uploading keys..."));
break;
case PHASE_DONE:
content = this._renderPhaseDone();
break;
}
}
return (
<BaseDialog className='mx_CreateKeyBackupDialog'
onFinished={this.props.onFinished}
title={_t('Create Key Backup')}
hasCancel={[PHASE_INTRO, PHASE_DONE].includes(this.state.phase)}
>
<div>
{content}
</div>
</BaseDialog>
);
},
});

134
src/components/views/settings/KeyBackupPanel.js Normal file
View file

@ -0,0 +1,134 @@
/*
Copyright 2018 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import sdk from '../../../index';
import MatrixClientPeg from '../../../MatrixClientPeg';
import { _t } from '../../../languageHandler';
import Modal from '../../../Modal';
export default class KeyBackupPanel extends React.Component {
constructor(props) {
super(props);
this._startNewBackup = this._startNewBackup.bind(this);
this._deleteBackup = this._deleteBackup.bind(this);
this._unmounted = false;
this.state = {
loading: true,
error: null,
backupInfo: null,
};
this._loadBackupStatus();
}
componentWillUnmount() {
this._unmounted = true;
}
async _loadBackupStatus() {
this.setState({loading: true});
try {
const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
if (this._unmounted) return;
this.setState({
backupInfo,
loading: false,
});
} catch (e) {
console.log("Unable to fetch key backup status", e);
if (this._unmounted) return;
this.setState({
error: e,
loading: false,
});
return;
}
}
_startNewBackup() {
const CreateKeyBackupDialog = sdk.getComponent("dialogs.keybackup.CreateKeyBackupDialog");
Modal.createTrackedDialog('Key Backup', 'Key Backup', CreateKeyBackupDialog, {
onFinished: () => {
this._loadBackupStatus();
},
});
}
_deleteBackup() {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
Modal.createTrackedDialog('Delete Backup', '', QuestionDialog, {
title: _t("Delete Backup"),
description: _t(
"Delete your backed up encryption keys from the server? " +
"You will no longer be able to use your recovery key to read encrypted message history"
),
button: _t('Delete backup'),
danger: true,
onFinished: (proceed) => {
if (!proceed) return;
this.setState({loading: true});
MatrixClientPeg.get().deleteKeyBackupVersion(this.state.backupInfo.version).then(() => {
this._loadBackupStatus();
});
},
});
}
render() {
const Spinner = sdk.getComponent("elements.Spinner");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
if (this.state.error) {
return (
<div className="error">
{_t("Unable to load key backup status")}
</div>
);
} else if (this.state.loading) {
return <Spinner />;
} else if (this.state.backupInfo) {
let clientBackupStatus;
if (MatrixClientPeg.get().getKeyBackupEnabled()) {
clientBackupStatus = _t("This device is uploading keys to this backup");
} else {
// XXX: display why and how to fix it
clientBackupStatus = _t("This device is <b>not</b> uploading keys to this backup", {}, {b: x => <b>{x}</b>});
}
return <div>
{_t("Backup version: ")}{this.state.backupInfo.version}<br />
{_t("Algorithm: ")}{this.state.backupInfo.algorithm}<br />
{clientBackupStatus}<br /><br />
<AccessibleButton className="mx_UserSettings_button danger"
onClick={this._deleteBackup}>
{ _t("Delete backup") }
</AccessibleButton>
</div>;
} else {
return <div>
{_t("No backup is present")}<br /><br />
<AccessibleButton className="mx_UserSettings_button"
onClick={this._startNewBackup}>
{ _t("Start a new backup") }
</AccessibleButton>
</div>;
}
}
}