Merge pull request #2283 from matrix-org/dbkr/e2e_backups_passphrase
Passphrase Support for e2e backups
This commit is contained in:
commit
db26513136
7 changed files with 521 additions and 98 deletions
|
@ -262,6 +262,11 @@ textarea {
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mx_linkButton {
|
||||
cursor: pointer;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_Dialog_title {
|
||||
min-height: 16px;
|
||||
padding-top: 40px;
|
||||
|
|
|
@ -46,6 +46,8 @@
|
|||
@import "./views/dialogs/_SetPasswordDialog.scss";
|
||||
@import "./views/dialogs/_ShareDialog.scss";
|
||||
@import "./views/dialogs/_UnknownDeviceDialog.scss";
|
||||
@import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
|
||||
@import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
|
||||
@import "./views/directory/_NetworkDropdown.scss";
|
||||
@import "./views/elements/_AccessibleButton.scss";
|
||||
@import "./views/elements/_AddressSelector.scss";
|
||||
|
|
39
res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
Normal file
39
res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
Normal file
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
.mx_CreateKeyBackupDialog_primaryContainer {
|
||||
/*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_passPhraseInput {
|
||||
width: 300px;
|
||||
border: 1px solid $accent-color;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_passPhraseMatch {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_recoveryKeyButtons {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mx_CreateKeyBackupDialog_recoveryKey {
|
||||
width: 300px;
|
||||
}
|
29
res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
Normal file
29
res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
Normal file
|
@ -0,0 +1,29 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
.mx_RestoreKeyBackupDialog_primaryContainer {
|
||||
/*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.mx_RestoreKeyBackupDialog_passPhraseInput,
|
||||
.mx_RestoreKeyBackupDialog_recoveryKeyInput {
|
||||
width: 300px;
|
||||
border: 1px solid $accent-color;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -17,16 +17,16 @@ limitations under the License.
|
|||
import React from 'react';
|
||||
import sdk from '../../../../index';
|
||||
import MatrixClientPeg from '../../../../MatrixClientPeg';
|
||||
import Promise from 'bluebird';
|
||||
|
||||
import { _t, _td } from '../../../../languageHandler';
|
||||
|
||||
const PHASE_INTRO = 0;
|
||||
const PHASE_GENERATING = 1;
|
||||
const PHASE_PASSPHRASE = 0;
|
||||
const PHASE_PASSPHRASE_CONFIRM = 1;
|
||||
const PHASE_SHOWKEY = 2;
|
||||
const PHASE_MAKEBACKUP = 3;
|
||||
const PHASE_UPLOAD = 4;
|
||||
const PHASE_KEEPITSAFE = 3;
|
||||
const PHASE_BACKINGUP = 4;
|
||||
const PHASE_DONE = 5;
|
||||
const PHASE_OPTOUT_CONFIRM = 6;
|
||||
|
||||
// XXX: copied from ShareDialog: factor out into utils
|
||||
function selectText(target) {
|
||||
|
@ -39,13 +39,16 @@ function selectText(target) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Walks the user through the process of creating an e22 key backup
|
||||
* Walks the user through the process of creating an e2e key backup
|
||||
* on the server.
|
||||
*/
|
||||
export default React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
phase: PHASE_INTRO,
|
||||
phase: PHASE_PASSPHRASE,
|
||||
passPhrase: '',
|
||||
passPhraseConfirm: '',
|
||||
copied: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
@ -58,25 +61,25 @@ export default React.createClass({
|
|||
this._recoveryKeyNode = n;
|
||||
},
|
||||
|
||||
_copyRecoveryKey: function() {
|
||||
_onCopyClick: function() {
|
||||
selectText(this._recoveryKeyNode);
|
||||
const successful = document.execCommand('copy');
|
||||
if (successful) {
|
||||
this.setState({copied: true});
|
||||
this.setState({
|
||||
copied: true,
|
||||
phase: PHASE_KEEPITSAFE,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
_createBackup: function() {
|
||||
this.setState({
|
||||
phase: PHASE_MAKEBACKUP,
|
||||
phase: PHASE_BACKINGUP,
|
||||
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({
|
||||
|
@ -98,61 +101,219 @@ export default React.createClass({
|
|||
this.props.onFinished(true);
|
||||
},
|
||||
|
||||
_generateKey: async function() {
|
||||
_onOptOutClick: function() {
|
||||
this.setState({phase: PHASE_OPTOUT_CONFIRM});
|
||||
},
|
||||
|
||||
_onSetUpClick: function() {
|
||||
this.setState({phase: PHASE_PASSPHRASE});
|
||||
},
|
||||
|
||||
_onSkipPassPhraseClick: async function() {
|
||||
this._keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion();
|
||||
this.setState({
|
||||
phase: PHASE_GENERATING,
|
||||
copied: false,
|
||||
phase: PHASE_SHOWKEY,
|
||||
});
|
||||
// Look, work is being done!
|
||||
await Promise.delay(1200);
|
||||
this._keyBackupInfo = MatrixClientPeg.get().prepareKeyBackupVersion();
|
||||
},
|
||||
|
||||
_onPassPhraseNextClick: function() {
|
||||
this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
|
||||
},
|
||||
|
||||
_onPassPhraseKeyPress: function(e) {
|
||||
if (e.key === 'Enter' && this._passPhraseIsValid()) {
|
||||
this._onPassPhraseNextClick();
|
||||
}
|
||||
},
|
||||
|
||||
_onPassPhraseConfirmNextClick: async function() {
|
||||
this._keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion(this.state.passPhrase);
|
||||
this.setState({
|
||||
copied: false,
|
||||
phase: PHASE_SHOWKEY,
|
||||
});
|
||||
},
|
||||
|
||||
_onPassPhraseConfirmKeyPress: function(e) {
|
||||
if (e.key === 'Enter' && this.state.passPhrase === this.state.passPhraseConfirm) {
|
||||
this._onPassPhraseConfirmNextClick();
|
||||
}
|
||||
},
|
||||
|
||||
_onSetAgainClick: function() {
|
||||
this.setState({
|
||||
passPhrase: '',
|
||||
passPhraseConfirm: '',
|
||||
phase: PHASE_PASSPHRASE,
|
||||
});
|
||||
},
|
||||
|
||||
_onKeepItSafeGotItClick: function() {
|
||||
this.setState({
|
||||
phase: PHASE_SHOWKEY,
|
||||
});
|
||||
},
|
||||
|
||||
_renderPhaseIntro: function() {
|
||||
_onPassPhraseChange: function(e) {
|
||||
this.setState({
|
||||
passPhrase: e.target.value,
|
||||
});
|
||||
},
|
||||
|
||||
_onPassPhraseConfirmChange: function(e) {
|
||||
this.setState({
|
||||
passPhraseConfirm: e.target.value,
|
||||
});
|
||||
},
|
||||
|
||||
_passPhraseIsValid: function() {
|
||||
return this.state.passPhrase !== '';
|
||||
},
|
||||
|
||||
_renderPhasePassPhrase: function() {
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
return <div>
|
||||
<p>{_t("Secure your encrypted message history with a Recovery Passphrase.")}</p>
|
||||
<p>{_t("You'll need it if you log out or lose access to this device.")}</p>
|
||||
|
||||
<div className="mx_CreateKeyBackupDialog_primaryContainer">
|
||||
<input type="password"
|
||||
onChange={this._onPassPhraseChange}
|
||||
onKeyPress={this._onPassPhraseKeyPress}
|
||||
value={this.state.passPhrase}
|
||||
className="mx_CreateKeyBackupDialog_passPhraseInput"
|
||||
placeholder={_t("Enter a passphrase...")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogButtons primaryButton={_t('Next')}
|
||||
onPrimaryButtonClick={this._onPassPhraseNextClick}
|
||||
hasCancel={false}
|
||||
disabled={!this._passPhraseIsValid()}
|
||||
/>
|
||||
|
||||
<p>{_t(
|
||||
"If you don't want encrypted message history to be availble on other devices, "+
|
||||
"<button>opt out</button>.",
|
||||
{},
|
||||
{
|
||||
button: sub => <AccessibleButton
|
||||
element="span"
|
||||
className="mx_linkButton"
|
||||
onClick={this._onOptOutClick}
|
||||
>
|
||||
{sub}
|
||||
</AccessibleButton>,
|
||||
},
|
||||
)}</p>
|
||||
<p>{_t(
|
||||
"Or, if you don't want to create a Recovery Passphrase, skip this step and "+
|
||||
"<button>download a recovery key</button>.",
|
||||
{},
|
||||
{
|
||||
button: sub => <AccessibleButton
|
||||
element="span"
|
||||
className="mx_linkButton"
|
||||
onClick={this._onSkipPassPhraseClick}
|
||||
>
|
||||
{sub}
|
||||
</AccessibleButton>,
|
||||
},
|
||||
)}</p>
|
||||
</div>;
|
||||
},
|
||||
|
||||
_renderPhasePassPhraseConfirm: function() {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
|
||||
let passPhraseMatch = null;
|
||||
if (this.state.passPhraseConfirm.length > 0) {
|
||||
let matchText;
|
||||
if (this.state.passPhraseConfirm === this.state.passPhrase) {
|
||||
matchText = _t("That matches!");
|
||||
} else {
|
||||
matchText = _t("That doesn't match.");
|
||||
}
|
||||
passPhraseMatch = <div className="mx_CreateKeyBackupDialog_passPhraseMatch">
|
||||
<div>{matchText}</div>
|
||||
<div>
|
||||
<AccessibleButton element="span" className="mx_linkButton" onClick={this._onSetAgainClick}>
|
||||
{_t("Go back to set it again.")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
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")}
|
||||
<p>{_t(
|
||||
"Type in your Recovery Passphrase to confirm you remember it. " +
|
||||
"If it helps, add it to your password manager or store it " +
|
||||
"somewhere safe.",
|
||||
)}</p>
|
||||
<div className="mx_CreateKeyBackupDialog_primaryContainer">
|
||||
{passPhraseMatch}
|
||||
<div>
|
||||
<input type="password"
|
||||
onChange={this._onPassPhraseConfirmChange}
|
||||
onKeyPress={this._onPassPhraseConfirmKeyPress}
|
||||
value={this.state.passPhraseConfirm}
|
||||
className="mx_CreateKeyBackupDialog_passPhraseInput"
|
||||
placeholder={_t("Repeat your passphrase...")}
|
||||
autoFocus={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogButtons primaryButton={_t('Next')}
|
||||
onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
|
||||
hasCancel={false}
|
||||
disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
|
||||
/>
|
||||
</div>;
|
||||
},
|
||||
|
||||
_renderPhaseShowKey: function() {
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
return <div>
|
||||
<p>{_t("Here is your recovery key:")}</p>
|
||||
<p className="mx_CreateKeyBackupDialog_recoveryKey">
|
||||
<code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
|
||||
<p>{_t("Make a copy of this Recovery Key and keep it safe.")}</p>
|
||||
<p>{_t("As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.")}</p>
|
||||
<p className="mx_CreateKeyBackupDialog_primaryContainer">
|
||||
<div>{_t("Your Recovery Key")}</div>
|
||||
<div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
|
||||
<button onClick={this._onCopyClick}>
|
||||
{this.state.copied ? _t("Copied!") : _t("Copy to clipboard")}
|
||||
</button>
|
||||
</div>
|
||||
<div className="mx_CreateKeyBackupDialog_recoveryKey">
|
||||
<code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
|
||||
</div>
|
||||
</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>
|
||||
<DialogButtons primaryButton={_t("I've made a copy")}
|
||||
onPrimaryButtonClick={this._createBackup}
|
||||
hasCancel={false}
|
||||
disabled={!this.state.copied}
|
||||
/>
|
||||
</div>;
|
||||
},
|
||||
|
||||
_renderPhaseKeepItSafe: function() {
|
||||
let introText;
|
||||
if (this.state.copied) {
|
||||
introText = _t("Your Recovery Key has been copied to your clipboard, paste it to:");
|
||||
}
|
||||
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("Got it")}
|
||||
onPrimaryButtonClick={this._onKeepItSafeGotItClick}
|
||||
hasCancel={false}
|
||||
/>
|
||||
</div>;
|
||||
},
|
||||
|
||||
|
@ -176,6 +337,41 @@ export default React.createClass({
|
|||
</div>;
|
||||
},
|
||||
|
||||
_renderPhaseOptOutConfirm: function() {
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
return <div>
|
||||
{_t(
|
||||
"Without setting up Secure Message Recovery, you won't be able to restore your " +
|
||||
"encrypted message history if you log out or use another device.",
|
||||
)}
|
||||
<DialogButtons primaryButton={_t('Set up Secure Message Recovery')}
|
||||
onPrimaryButtonClick={this._onSetUpClick}
|
||||
hasCancel={false}
|
||||
>
|
||||
<button onClick={this._onCancel}>I understand, continue without</button>
|
||||
</DialogButtons>
|
||||
</div>;
|
||||
},
|
||||
|
||||
_titleForPhase: function(phase) {
|
||||
switch (phase) {
|
||||
case PHASE_PASSPHRASE:
|
||||
return _t('Create a Recovery Passphrase');
|
||||
case PHASE_PASSPHRASE_CONFIRM:
|
||||
return _t('Confirm Recovery Passphrase');
|
||||
case PHASE_OPTOUT_CONFIRM:
|
||||
return _t('Warning!');
|
||||
case PHASE_SHOWKEY:
|
||||
return _t('Recovery Key');
|
||||
case PHASE_KEEPITSAFE:
|
||||
return _t('Keep it safe');
|
||||
case PHASE_BACKINGUP:
|
||||
return _t('Backing up...');
|
||||
default:
|
||||
return _t("Create Key Backup");
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
||||
|
||||
|
@ -194,32 +390,35 @@ export default React.createClass({
|
|||
</div>;
|
||||
} else {
|
||||
switch (this.state.phase) {
|
||||
case PHASE_INTRO:
|
||||
content = this._renderPhaseIntro();
|
||||
case PHASE_PASSPHRASE:
|
||||
content = this._renderPhasePassPhrase();
|
||||
break;
|
||||
case PHASE_GENERATING:
|
||||
content = this._renderBusyPhase(_td("Generating recovery key..."));
|
||||
case PHASE_PASSPHRASE_CONFIRM:
|
||||
content = this._renderPhasePassPhraseConfirm();
|
||||
break;
|
||||
case PHASE_SHOWKEY:
|
||||
content = this._renderPhaseShowKey();
|
||||
break;
|
||||
case PHASE_MAKEBACKUP:
|
||||
content = this._renderBusyPhase(_td("Creating backup..."));
|
||||
case PHASE_KEEPITSAFE:
|
||||
content = this._renderPhaseKeepItSafe();
|
||||
break;
|
||||
case PHASE_UPLOAD:
|
||||
content = this._renderBusyPhase(_td("Uploading keys..."));
|
||||
case PHASE_BACKINGUP:
|
||||
content = this._renderBusyPhase(_td("Backing up..."));
|
||||
break;
|
||||
case PHASE_DONE:
|
||||
content = this._renderPhaseDone();
|
||||
break;
|
||||
case PHASE_OPTOUT_CONFIRM:
|
||||
content = this._renderPhaseOptOutConfirm();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseDialog className='mx_CreateKeyBackupDialog'
|
||||
onFinished={this.props.onFinished}
|
||||
title={_t('Create Key Backup')}
|
||||
hasCancel={[PHASE_INTRO, PHASE_DONE].includes(this.state.phase)}
|
||||
title={this._titleForPhase(this.state.phase)}
|
||||
hasCancel={[PHASE_DONE].includes(this.state.phase)}
|
||||
>
|
||||
<div>
|
||||
{content}
|
||||
|
|
|
@ -17,6 +17,7 @@ limitations under the License.
|
|||
import React from 'react';
|
||||
import sdk from '../../../../index';
|
||||
import MatrixClientPeg from '../../../../MatrixClientPeg';
|
||||
import Modal from '../../../../Modal';
|
||||
|
||||
import { _t } from '../../../../languageHandler';
|
||||
|
||||
|
@ -33,6 +34,8 @@ export default React.createClass({
|
|||
recoveryKey: "",
|
||||
recoverInfo: null,
|
||||
recoveryKeyValid: false,
|
||||
forceRecoveryKey: false,
|
||||
passPhrase: '',
|
||||
};
|
||||
},
|
||||
|
||||
|
@ -48,6 +51,18 @@ export default React.createClass({
|
|||
this.props.onFinished(true);
|
||||
},
|
||||
|
||||
_onUseRecoveryKeyClick: function() {
|
||||
this.setState({
|
||||
forceRecoveryKey: true,
|
||||
});
|
||||
},
|
||||
|
||||
_onResetRecoveryClick: function() {
|
||||
this.props.onFinished(false);
|
||||
const CreateKeyBackupDialog = sdk.getComponent("dialogs.keybackup.CreateKeyBackupDialog");
|
||||
Modal.createTrackedDialog('Create Key Backup', '', CreateKeyBackupDialog, {});
|
||||
},
|
||||
|
||||
_onRecoveryKeyChange: function(e) {
|
||||
this.setState({
|
||||
recoveryKey: e.target.value,
|
||||
|
@ -55,13 +70,35 @@ export default React.createClass({
|
|||
});
|
||||
},
|
||||
|
||||
_onRecoverClick: async function() {
|
||||
_onPassPhraseNext: async function() {
|
||||
this.setState({
|
||||
loading: true,
|
||||
restoreError: null,
|
||||
});
|
||||
try {
|
||||
const recoverInfo = await MatrixClientPeg.get().restoreKeyBackups(
|
||||
const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithPassword(
|
||||
this.state.passPhrase, undefined, undefined, this.state.backupInfo.version,
|
||||
);
|
||||
this.setState({
|
||||
loading: false,
|
||||
recoverInfo,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Error restoring backup", e);
|
||||
this.setState({
|
||||
loading: false,
|
||||
restoreError: e,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
_onRecoveryKeyNext: async function() {
|
||||
this.setState({
|
||||
loading: true,
|
||||
restoreError: null,
|
||||
});
|
||||
try {
|
||||
const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithRecoveryKey(
|
||||
this.state.recoveryKey, undefined, undefined, this.state.backupInfo.version,
|
||||
);
|
||||
this.setState({
|
||||
|
@ -77,6 +114,24 @@ export default React.createClass({
|
|||
}
|
||||
},
|
||||
|
||||
_onPassPhraseChange: function(e) {
|
||||
this.setState({
|
||||
passPhrase: e.target.value,
|
||||
});
|
||||
},
|
||||
|
||||
_onPassPhraseKeyPress: function(e) {
|
||||
if (e.key === "Enter") {
|
||||
this._onPassPhraseNext();
|
||||
}
|
||||
},
|
||||
|
||||
_onRecoveryKeyKeyPress: function(e) {
|
||||
if (e.key === "Enter" && this.state.recoveryKeyValid) {
|
||||
this._onRecoveryKeyNext();
|
||||
}
|
||||
},
|
||||
|
||||
_loadBackupStatus: async function() {
|
||||
this.setState({
|
||||
loading: true,
|
||||
|
@ -102,16 +157,29 @@ export default React.createClass({
|
|||
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
||||
const Spinner = sdk.getComponent("elements.Spinner");
|
||||
|
||||
const backupHasPassphrase = (
|
||||
this.state.backupInfo &&
|
||||
this.state.backupInfo.auth_data &&
|
||||
this.state.backupInfo.auth_data.private_key_salt &&
|
||||
this.state.backupInfo.auth_data.private_key_iterations
|
||||
);
|
||||
|
||||
let content;
|
||||
let title;
|
||||
if (this.state.loading) {
|
||||
title = _t("Loading...");
|
||||
content = <Spinner />;
|
||||
} else if (this.state.loadError) {
|
||||
title = _t("Error");
|
||||
content = _t("Unable to load backup status");
|
||||
} else if (this.state.restoreError) {
|
||||
title = _t("Error");
|
||||
content = _t("Unable to restore backup");
|
||||
} else if (this.state.backupInfo === null) {
|
||||
title = _t("Error");
|
||||
content = _t("No backup found!");
|
||||
} else if (this.state.recoverInfo) {
|
||||
title = _t("Backup Restored");
|
||||
let failedToDecrypt;
|
||||
if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
|
||||
failedToDecrypt = <p>{_t(
|
||||
|
@ -123,8 +191,54 @@ export default React.createClass({
|
|||
<p>{_t("Restored %(sessionCount)s session keys", {sessionCount: this.state.recoverInfo.imported})}</p>
|
||||
{failedToDecrypt}
|
||||
</div>;
|
||||
} else {
|
||||
} else if (backupHasPassphrase && !this.state.forceRecoveryKey) {
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
title = _t("Enter Recovery Passphrase");
|
||||
content = <div>
|
||||
{_t(
|
||||
"Access your secure message history and set up secure " +
|
||||
"messaging by entering your recovery passphrase.",
|
||||
)}<br />
|
||||
|
||||
<div className="mx_RestoreKeyBackupDialog_primaryContainer">
|
||||
<input type="password"
|
||||
className="mx_RestoreKeyBackupDialog_passPhraseInput"
|
||||
onChange={this._onPassPhraseChange}
|
||||
onKeyPress={this._onPassPhraseKeyPress}
|
||||
value={this.state.passPhrase}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<DialogButtons primaryButton={_t('Next')}
|
||||
onPrimaryButtonClick={this._onPassPhraseNext}
|
||||
hasCancel={true}
|
||||
onCancel={this._onCancel}
|
||||
focus={false}
|
||||
/>
|
||||
</div>
|
||||
{_t(
|
||||
"If you've forgotten your recovery passphrase you can "+
|
||||
"<button1>use your recovery key</button1> or " +
|
||||
"<button2>set up new recovery options</button2>"
|
||||
, {}, {
|
||||
button1: s => <AccessibleButton className="mx_linkButton"
|
||||
element="span"
|
||||
onClick={this._onUseRecoveryKeyClick}
|
||||
>
|
||||
{s}
|
||||
</AccessibleButton>,
|
||||
button2: s => <AccessibleButton className="mx_linkButton"
|
||||
element="span"
|
||||
onClick={this._onResetRecoveryClick}
|
||||
>
|
||||
{s}
|
||||
</AccessibleButton>,
|
||||
})}
|
||||
</div>;
|
||||
} else {
|
||||
title = _t("Enter Recovery Key");
|
||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
|
||||
let keyStatus;
|
||||
if (this.state.recoveryKey.length === 0) {
|
||||
|
@ -140,28 +254,45 @@ export default React.createClass({
|
|||
}
|
||||
|
||||
content = <div>
|
||||
{_t("Please enter the recovery key generated when you set up key backup")}<br />
|
||||
<textarea
|
||||
onChange={this._onRecoveryKeyChange}
|
||||
value={this.state.recoveryKey}
|
||||
style={{width: "90%"}}
|
||||
autoFocus={true}
|
||||
/>
|
||||
{keyStatus}
|
||||
<DialogButtons primaryButton={_t('Recover')}
|
||||
onPrimaryButtonClick={this._onRecoverClick}
|
||||
hasCancel={true}
|
||||
onCancel={this._onCancel}
|
||||
focus={false}
|
||||
primaryDisabled={!this.state.recoveryKeyValid}
|
||||
/>
|
||||
{_t(
|
||||
"Access your secure message history and set up secure " +
|
||||
"messaging by entering your recovery key.",
|
||||
)}<br />
|
||||
|
||||
<div className="mx_RestoreKeyBackupDialog_primaryContainer">
|
||||
<input className="mx_RestoreKeyBackupDialog_recoveryKeyInput"
|
||||
onChange={this._onRecoveryKeyChange}
|
||||
onKeyPress={this._onRecoveryKeyKeyPress}
|
||||
value={this.state.recoveryKey}
|
||||
autoFocus={true}
|
||||
/>
|
||||
{keyStatus}
|
||||
<DialogButtons primaryButton={_t('Next')}
|
||||
onPrimaryButtonClick={this._onRecoveryKeyNext}
|
||||
hasCancel={true}
|
||||
onCancel={this._onCancel}
|
||||
focus={false}
|
||||
primaryDisabled={!this.state.recoveryKeyValid}
|
||||
/>
|
||||
</div>
|
||||
{_t(
|
||||
"If you've forgotten your recovery passphrase you can "+
|
||||
"<button>set up new recovery options</button>"
|
||||
, {}, {
|
||||
button: s => <AccessibleButton className="mx_linkButton"
|
||||
element="span"
|
||||
onClick={this._onResetRecoveryClick}
|
||||
>
|
||||
{s}
|
||||
</AccessibleButton>,
|
||||
})}
|
||||
</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseDialog className='mx_RestoreKeyBackupDialog'
|
||||
onFinished={this.props.onFinished}
|
||||
title={_t('Restore Key Backup')}
|
||||
title={title}
|
||||
>
|
||||
<div>
|
||||
{content}
|
||||
|
|
|
@ -967,40 +967,58 @@
|
|||
"Share Room Message": "Share Room Message",
|
||||
"Link to selected message": "Link to selected message",
|
||||
"COPY": "COPY",
|
||||
"Restore encryption keys": "Restore encryption keys",
|
||||
"Verify this device": "Verify this device",
|
||||
"Restore from online backup": "Restore from online backup",
|
||||
"Restore from offline backup": "Restore from offline backup",
|
||||
"You are currently blacklisting unverified devices; to send messages to these devices you must verify them.": "You are currently blacklisting unverified devices; to send messages to these devices you must verify them.",
|
||||
"We recommend you go through the verification process for each device to confirm they belong to their legitimate owner, but you can resend the message without verifying if you prefer.": "We recommend you go through the verification process for each device to confirm they belong to their legitimate owner, but you can resend the message without verifying if you prefer.",
|
||||
"Room contains unknown devices": "Room contains unknown devices",
|
||||
"\"%(RoomName)s\" contains devices that you haven't seen before.": "\"%(RoomName)s\" contains devices that you haven't seen before.",
|
||||
"Unknown devices": "Unknown devices",
|
||||
"Generate recovery key": "Generate recovery key",
|
||||
"I'll stick to manual backups": "I'll stick to manual backups",
|
||||
"Here is your recovery key:": "Here is your recovery key:",
|
||||
"This key can decrypt your full message history.": "This key can decrypt your full message history.",
|
||||
"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.": "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.",
|
||||
"Secure your encrypted message history with a Recovery Passphrase.": "Secure your encrypted message history with a Recovery Passphrase.",
|
||||
"You'll need it if you log out or lose access to this device.": "You'll need it if you log out or lose access to this device.",
|
||||
"Enter a passphrase...": "Enter a passphrase...",
|
||||
"Next": "Next",
|
||||
"If you don't want encrypted message history to be availble on other devices, <button>opt out</button>.": "If you don't want encrypted message history to be availble on other devices, <button>opt out</button>.",
|
||||
"Or, if you don't want to create a Recovery Passphrase, skip this step and <button>download a recovery key</button>.": "Or, if you don't want to create a Recovery Passphrase, skip this step and <button>download a recovery key</button>.",
|
||||
"That matches!": "That matches!",
|
||||
"That doesn't match.": "That doesn't match.",
|
||||
"Go back to set it again.": "Go back to set it again.",
|
||||
"Type in your Recovery Passphrase to confirm you remember it. If it helps, add it to your password manager or store it somewhere safe.": "Type in your Recovery Passphrase to confirm you remember it. If it helps, add it to your password manager or store it somewhere safe.",
|
||||
"Repeat your passphrase...": "Repeat your passphrase...",
|
||||
"Make a copy of this Recovery Key and keep it safe.": "Make a copy of this Recovery Key and keep it safe.",
|
||||
"As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.": "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.",
|
||||
"Your Recovery Key": "Your Recovery Key",
|
||||
"Copy to clipboard": "Copy to clipboard",
|
||||
"Proceed": "Proceed",
|
||||
"I've made a copy": "I've made a copy",
|
||||
"Your Recovery Key has been copied to your clipboard, paste it to:": "Your Recovery Key has been copied to your clipboard, paste it to:",
|
||||
"<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",
|
||||
"Got it": "Got it",
|
||||
"Backup created": "Backup created",
|
||||
"Your encryption keys are now being backed up to your Homeserver.": "Your encryption keys are now being backed up to your Homeserver.",
|
||||
"Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.",
|
||||
"Set up Secure Message Recovery": "Set up Secure Message Recovery",
|
||||
"Create a Recovery Passphrase": "Create a Recovery Passphrase",
|
||||
"Confirm Recovery Passphrase": "Confirm Recovery Passphrase",
|
||||
"Recovery Key": "Recovery Key",
|
||||
"Keep it safe": "Keep it safe",
|
||||
"Backing up...": "Backing up...",
|
||||
"Create Key Backup": "Create Key Backup",
|
||||
"Unable to create key backup": "Unable to create key backup",
|
||||
"Retry": "Retry",
|
||||
"Generating recovery key...": "Generating recovery key...",
|
||||
"Creating backup...": "Creating backup...",
|
||||
"Uploading keys...": "Uploading keys...",
|
||||
"Create Key Backup": "Create Key Backup",
|
||||
"Unable to load backup status": "Unable to load backup status",
|
||||
"Unable to restore backup": "Unable to restore backup",
|
||||
"No backup found!": "No backup found!",
|
||||
"Backup Restored": "Backup Restored",
|
||||
"Failed to decrypt %(failedCount)s sessions!": "Failed to decrypt %(failedCount)s sessions!",
|
||||
"Restored %(sessionCount)s session keys": "Restored %(sessionCount)s session keys",
|
||||
"Enter Recovery Passphrase": "Enter Recovery Passphrase",
|
||||
"Access your secure message history and set up secure messaging by entering your recovery passphrase.": "Access your secure message history and set up secure messaging by entering your recovery passphrase.",
|
||||
"If you've forgotten your recovery passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>": "If you've forgotten your recovery passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>",
|
||||
"Enter Recovery Key": "Enter Recovery Key",
|
||||
"This looks like a valid recovery key!": "This looks like a valid recovery key!",
|
||||
"Not a valid recovery key": "Not a valid recovery key",
|
||||
"Please enter the recovery key generated when you set up key backup": "Please enter the recovery key generated when you set up key backup",
|
||||
"Recover": "Recover",
|
||||
"Restore Key Backup": "Restore Key Backup",
|
||||
"Access your secure message history and set up secure messaging by entering your recovery key.": "Access your secure message history and set up secure messaging by entering your recovery key.",
|
||||
"If you've forgotten your recovery passphrase you can <button>set up new recovery options</button>": "If you've forgotten your recovery passphrase you can <button>set up new recovery options</button>",
|
||||
"Private Chat": "Private Chat",
|
||||
"Public Chat": "Public Chat",
|
||||
"Custom": "Custom",
|
||||
|
|
Loading…
Reference in a new issue