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;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mx_linkButton {
|
||||||
|
cursor: pointer;
|
||||||
|
color: $accent-color;
|
||||||
|
}
|
||||||
|
|
||||||
.mx_Dialog_title {
|
.mx_Dialog_title {
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
|
|
|
@ -46,6 +46,8 @@
|
||||||
@import "./views/dialogs/_SetPasswordDialog.scss";
|
@import "./views/dialogs/_SetPasswordDialog.scss";
|
||||||
@import "./views/dialogs/_ShareDialog.scss";
|
@import "./views/dialogs/_ShareDialog.scss";
|
||||||
@import "./views/dialogs/_UnknownDeviceDialog.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/directory/_NetworkDropdown.scss";
|
||||||
@import "./views/elements/_AccessibleButton.scss";
|
@import "./views/elements/_AccessibleButton.scss";
|
||||||
@import "./views/elements/_AddressSelector.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 React from 'react';
|
||||||
import sdk from '../../../../index';
|
import sdk from '../../../../index';
|
||||||
import MatrixClientPeg from '../../../../MatrixClientPeg';
|
import MatrixClientPeg from '../../../../MatrixClientPeg';
|
||||||
import Promise from 'bluebird';
|
|
||||||
|
|
||||||
import { _t, _td } from '../../../../languageHandler';
|
import { _t, _td } from '../../../../languageHandler';
|
||||||
|
|
||||||
const PHASE_INTRO = 0;
|
const PHASE_PASSPHRASE = 0;
|
||||||
const PHASE_GENERATING = 1;
|
const PHASE_PASSPHRASE_CONFIRM = 1;
|
||||||
const PHASE_SHOWKEY = 2;
|
const PHASE_SHOWKEY = 2;
|
||||||
const PHASE_MAKEBACKUP = 3;
|
const PHASE_KEEPITSAFE = 3;
|
||||||
const PHASE_UPLOAD = 4;
|
const PHASE_BACKINGUP = 4;
|
||||||
const PHASE_DONE = 5;
|
const PHASE_DONE = 5;
|
||||||
|
const PHASE_OPTOUT_CONFIRM = 6;
|
||||||
|
|
||||||
// XXX: copied from ShareDialog: factor out into utils
|
// XXX: copied from ShareDialog: factor out into utils
|
||||||
function selectText(target) {
|
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.
|
* on the server.
|
||||||
*/
|
*/
|
||||||
export default React.createClass({
|
export default React.createClass({
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
return {
|
return {
|
||||||
phase: PHASE_INTRO,
|
phase: PHASE_PASSPHRASE,
|
||||||
|
passPhrase: '',
|
||||||
|
passPhraseConfirm: '',
|
||||||
|
copied: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -58,25 +61,25 @@ export default React.createClass({
|
||||||
this._recoveryKeyNode = n;
|
this._recoveryKeyNode = n;
|
||||||
},
|
},
|
||||||
|
|
||||||
_copyRecoveryKey: function() {
|
_onCopyClick: function() {
|
||||||
selectText(this._recoveryKeyNode);
|
selectText(this._recoveryKeyNode);
|
||||||
const successful = document.execCommand('copy');
|
const successful = document.execCommand('copy');
|
||||||
if (successful) {
|
if (successful) {
|
||||||
this.setState({copied: true});
|
this.setState({
|
||||||
|
copied: true,
|
||||||
|
phase: PHASE_KEEPITSAFE,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
_createBackup: function() {
|
_createBackup: function() {
|
||||||
this.setState({
|
this.setState({
|
||||||
phase: PHASE_MAKEBACKUP,
|
phase: PHASE_BACKINGUP,
|
||||||
error: null,
|
error: null,
|
||||||
});
|
});
|
||||||
this._createBackupPromise = MatrixClientPeg.get().createKeyBackupVersion(
|
this._createBackupPromise = MatrixClientPeg.get().createKeyBackupVersion(
|
||||||
this._keyBackupInfo,
|
this._keyBackupInfo,
|
||||||
).then((info) => {
|
).then((info) => {
|
||||||
this.setState({
|
|
||||||
phase: PHASE_UPLOAD,
|
|
||||||
});
|
|
||||||
return MatrixClientPeg.get().backupAllGroupSessions(info.version);
|
return MatrixClientPeg.get().backupAllGroupSessions(info.version);
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -98,61 +101,219 @@ export default React.createClass({
|
||||||
this.props.onFinished(true);
|
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({
|
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({
|
this.setState({
|
||||||
phase: PHASE_SHOWKEY,
|
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');
|
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||||
return <div>
|
return <div>
|
||||||
<p>To avoid ever losing your encrypted message history, you
|
<p>{_t(
|
||||||
can save your encryption keys on the server, protected by a recovery key.
|
"Type in your Recovery Passphrase to confirm you remember it. " +
|
||||||
</p>
|
"If it helps, add it to your password manager or store it " +
|
||||||
<p>To maximise security, your recovery key is never stored by the app,
|
"somewhere safe.",
|
||||||
so you must store it yourself somewhere safe.</p>
|
)}</p>
|
||||||
<p>Warning: storing your encryption keys on the server means that
|
<div className="mx_CreateKeyBackupDialog_primaryContainer">
|
||||||
if someone gains access to your account and also steals your recovery key,
|
{passPhraseMatch}
|
||||||
they will be able to read all of your encrypted conversation history.
|
<div>
|
||||||
</p>
|
<input type="password"
|
||||||
|
onChange={this._onPassPhraseConfirmChange}
|
||||||
<p>Do you wish to generate a recovery key and backup your encryption
|
onKeyPress={this._onPassPhraseConfirmKeyPress}
|
||||||
keys on the server?</p>
|
value={this.state.passPhraseConfirm}
|
||||||
|
className="mx_CreateKeyBackupDialog_passPhraseInput"
|
||||||
<DialogButtons primaryButton={_t('Generate recovery key')}
|
placeholder={_t("Repeat your passphrase...")}
|
||||||
onPrimaryButtonClick={this._generateKey}
|
autoFocus={true}
|
||||||
onCancel={this._onCancel}
|
/>
|
||||||
cancelButton={_t("I'll stick to manual backups")}
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogButtons primaryButton={_t('Next')}
|
||||||
|
onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
|
||||||
|
hasCancel={false}
|
||||||
|
disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
|
||||||
/>
|
/>
|
||||||
</div>;
|
</div>;
|
||||||
},
|
},
|
||||||
|
|
||||||
_renderPhaseShowKey: function() {
|
_renderPhaseShowKey: function() {
|
||||||
|
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
||||||
return <div>
|
return <div>
|
||||||
<p>{_t("Here is your recovery key:")}</p>
|
<p>{_t("Make a copy of this Recovery Key and keep it safe.")}</p>
|
||||||
<p className="mx_CreateKeyBackupDialog_recoveryKey">
|
<p>{_t("As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.")}</p>
|
||||||
<code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
|
<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>
|
||||||
<p>{_t("This key can decrypt your full message history.")}</p>
|
<DialogButtons primaryButton={_t("I've made a copy")}
|
||||||
<p>{_t(
|
onPrimaryButtonClick={this._createBackup}
|
||||||
"When you've saved it somewhere safe, proceed to the next step where the key will be used to "+
|
hasCancel={false}
|
||||||
"create an encrypted backup of your message keys and then destroyed.",
|
disabled={!this.state.copied}
|
||||||
)}</p>
|
/>
|
||||||
<div className="mx_Dialog_buttons">
|
</div>;
|
||||||
<button onClick={this._copyRecoveryKey}>
|
},
|
||||||
{this.state.copied ? _t("Copied!") : _t("Copy to clipboard")}
|
|
||||||
</button>
|
_renderPhaseKeepItSafe: function() {
|
||||||
<button onClick={this._createBackup}>
|
let introText;
|
||||||
{_t("Proceed")}
|
if (this.state.copied) {
|
||||||
</button>
|
introText = _t("Your Recovery Key has been copied to your clipboard, paste it to:");
|
||||||
</div>
|
}
|
||||||
|
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>;
|
</div>;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -176,6 +337,41 @@ export default React.createClass({
|
||||||
</div>;
|
</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() {
|
render: function() {
|
||||||
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
||||||
|
|
||||||
|
@ -194,32 +390,35 @@ export default React.createClass({
|
||||||
</div>;
|
</div>;
|
||||||
} else {
|
} else {
|
||||||
switch (this.state.phase) {
|
switch (this.state.phase) {
|
||||||
case PHASE_INTRO:
|
case PHASE_PASSPHRASE:
|
||||||
content = this._renderPhaseIntro();
|
content = this._renderPhasePassPhrase();
|
||||||
break;
|
break;
|
||||||
case PHASE_GENERATING:
|
case PHASE_PASSPHRASE_CONFIRM:
|
||||||
content = this._renderBusyPhase(_td("Generating recovery key..."));
|
content = this._renderPhasePassPhraseConfirm();
|
||||||
break;
|
break;
|
||||||
case PHASE_SHOWKEY:
|
case PHASE_SHOWKEY:
|
||||||
content = this._renderPhaseShowKey();
|
content = this._renderPhaseShowKey();
|
||||||
break;
|
break;
|
||||||
case PHASE_MAKEBACKUP:
|
case PHASE_KEEPITSAFE:
|
||||||
content = this._renderBusyPhase(_td("Creating backup..."));
|
content = this._renderPhaseKeepItSafe();
|
||||||
break;
|
break;
|
||||||
case PHASE_UPLOAD:
|
case PHASE_BACKINGUP:
|
||||||
content = this._renderBusyPhase(_td("Uploading keys..."));
|
content = this._renderBusyPhase(_td("Backing up..."));
|
||||||
break;
|
break;
|
||||||
case PHASE_DONE:
|
case PHASE_DONE:
|
||||||
content = this._renderPhaseDone();
|
content = this._renderPhaseDone();
|
||||||
break;
|
break;
|
||||||
|
case PHASE_OPTOUT_CONFIRM:
|
||||||
|
content = this._renderPhaseOptOutConfirm();
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BaseDialog className='mx_CreateKeyBackupDialog'
|
<BaseDialog className='mx_CreateKeyBackupDialog'
|
||||||
onFinished={this.props.onFinished}
|
onFinished={this.props.onFinished}
|
||||||
title={_t('Create Key Backup')}
|
title={this._titleForPhase(this.state.phase)}
|
||||||
hasCancel={[PHASE_INTRO, PHASE_DONE].includes(this.state.phase)}
|
hasCancel={[PHASE_DONE].includes(this.state.phase)}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
{content}
|
{content}
|
||||||
|
|
|
@ -17,6 +17,7 @@ limitations under the License.
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sdk from '../../../../index';
|
import sdk from '../../../../index';
|
||||||
import MatrixClientPeg from '../../../../MatrixClientPeg';
|
import MatrixClientPeg from '../../../../MatrixClientPeg';
|
||||||
|
import Modal from '../../../../Modal';
|
||||||
|
|
||||||
import { _t } from '../../../../languageHandler';
|
import { _t } from '../../../../languageHandler';
|
||||||
|
|
||||||
|
@ -33,6 +34,8 @@ export default React.createClass({
|
||||||
recoveryKey: "",
|
recoveryKey: "",
|
||||||
recoverInfo: null,
|
recoverInfo: null,
|
||||||
recoveryKeyValid: false,
|
recoveryKeyValid: false,
|
||||||
|
forceRecoveryKey: false,
|
||||||
|
passPhrase: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -48,6 +51,18 @@ export default React.createClass({
|
||||||
this.props.onFinished(true);
|
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) {
|
_onRecoveryKeyChange: function(e) {
|
||||||
this.setState({
|
this.setState({
|
||||||
recoveryKey: e.target.value,
|
recoveryKey: e.target.value,
|
||||||
|
@ -55,13 +70,35 @@ export default React.createClass({
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
_onRecoverClick: async function() {
|
_onPassPhraseNext: async function() {
|
||||||
this.setState({
|
this.setState({
|
||||||
loading: true,
|
loading: true,
|
||||||
restoreError: null,
|
restoreError: null,
|
||||||
});
|
});
|
||||||
try {
|
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.state.recoveryKey, undefined, undefined, this.state.backupInfo.version,
|
||||||
);
|
);
|
||||||
this.setState({
|
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() {
|
_loadBackupStatus: async function() {
|
||||||
this.setState({
|
this.setState({
|
||||||
loading: true,
|
loading: true,
|
||||||
|
@ -102,16 +157,29 @@ export default React.createClass({
|
||||||
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
||||||
const Spinner = sdk.getComponent("elements.Spinner");
|
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 content;
|
||||||
|
let title;
|
||||||
if (this.state.loading) {
|
if (this.state.loading) {
|
||||||
|
title = _t("Loading...");
|
||||||
content = <Spinner />;
|
content = <Spinner />;
|
||||||
} else if (this.state.loadError) {
|
} else if (this.state.loadError) {
|
||||||
|
title = _t("Error");
|
||||||
content = _t("Unable to load backup status");
|
content = _t("Unable to load backup status");
|
||||||
} else if (this.state.restoreError) {
|
} else if (this.state.restoreError) {
|
||||||
|
title = _t("Error");
|
||||||
content = _t("Unable to restore backup");
|
content = _t("Unable to restore backup");
|
||||||
} else if (this.state.backupInfo === null) {
|
} else if (this.state.backupInfo === null) {
|
||||||
|
title = _t("Error");
|
||||||
content = _t("No backup found!");
|
content = _t("No backup found!");
|
||||||
} else if (this.state.recoverInfo) {
|
} else if (this.state.recoverInfo) {
|
||||||
|
title = _t("Backup Restored");
|
||||||
let failedToDecrypt;
|
let failedToDecrypt;
|
||||||
if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
|
if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
|
||||||
failedToDecrypt = <p>{_t(
|
failedToDecrypt = <p>{_t(
|
||||||
|
@ -123,8 +191,54 @@ export default React.createClass({
|
||||||
<p>{_t("Restored %(sessionCount)s session keys", {sessionCount: this.state.recoverInfo.imported})}</p>
|
<p>{_t("Restored %(sessionCount)s session keys", {sessionCount: this.state.recoverInfo.imported})}</p>
|
||||||
{failedToDecrypt}
|
{failedToDecrypt}
|
||||||
</div>;
|
</div>;
|
||||||
} else {
|
} else if (backupHasPassphrase && !this.state.forceRecoveryKey) {
|
||||||
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
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;
|
let keyStatus;
|
||||||
if (this.state.recoveryKey.length === 0) {
|
if (this.state.recoveryKey.length === 0) {
|
||||||
|
@ -140,28 +254,45 @@ export default React.createClass({
|
||||||
}
|
}
|
||||||
|
|
||||||
content = <div>
|
content = <div>
|
||||||
{_t("Please enter the recovery key generated when you set up key backup")}<br />
|
{_t(
|
||||||
<textarea
|
"Access your secure message history and set up secure " +
|
||||||
onChange={this._onRecoveryKeyChange}
|
"messaging by entering your recovery key.",
|
||||||
value={this.state.recoveryKey}
|
)}<br />
|
||||||
style={{width: "90%"}}
|
|
||||||
autoFocus={true}
|
<div className="mx_RestoreKeyBackupDialog_primaryContainer">
|
||||||
/>
|
<input className="mx_RestoreKeyBackupDialog_recoveryKeyInput"
|
||||||
{keyStatus}
|
onChange={this._onRecoveryKeyChange}
|
||||||
<DialogButtons primaryButton={_t('Recover')}
|
onKeyPress={this._onRecoveryKeyKeyPress}
|
||||||
onPrimaryButtonClick={this._onRecoverClick}
|
value={this.state.recoveryKey}
|
||||||
hasCancel={true}
|
autoFocus={true}
|
||||||
onCancel={this._onCancel}
|
/>
|
||||||
focus={false}
|
{keyStatus}
|
||||||
primaryDisabled={!this.state.recoveryKeyValid}
|
<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>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BaseDialog className='mx_RestoreKeyBackupDialog'
|
<BaseDialog className='mx_RestoreKeyBackupDialog'
|
||||||
onFinished={this.props.onFinished}
|
onFinished={this.props.onFinished}
|
||||||
title={_t('Restore Key Backup')}
|
title={title}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
{content}
|
{content}
|
||||||
|
|
|
@ -967,40 +967,58 @@
|
||||||
"Share Room Message": "Share Room Message",
|
"Share Room Message": "Share Room Message",
|
||||||
"Link to selected message": "Link to selected message",
|
"Link to selected message": "Link to selected message",
|
||||||
"COPY": "COPY",
|
"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.",
|
"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.",
|
"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",
|
"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.",
|
"\"%(RoomName)s\" contains devices that you haven't seen before.": "\"%(RoomName)s\" contains devices that you haven't seen before.",
|
||||||
"Unknown devices": "Unknown devices",
|
"Unknown devices": "Unknown devices",
|
||||||
"Generate recovery key": "Generate recovery key",
|
"Secure your encrypted message history with a Recovery Passphrase.": "Secure your encrypted message history with a Recovery Passphrase.",
|
||||||
"I'll stick to manual backups": "I'll stick to manual backups",
|
"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.",
|
||||||
"Here is your recovery key:": "Here is your recovery key:",
|
"Enter a passphrase...": "Enter a passphrase...",
|
||||||
"This key can decrypt your full message history.": "This key can decrypt your full message history.",
|
"Next": "Next",
|
||||||
"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.",
|
"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",
|
"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",
|
"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.",
|
"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",
|
"Unable to create key backup": "Unable to create key backup",
|
||||||
"Retry": "Retry",
|
"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 load backup status": "Unable to load backup status",
|
||||||
"Unable to restore backup": "Unable to restore backup",
|
"Unable to restore backup": "Unable to restore backup",
|
||||||
"No backup found!": "No backup found!",
|
"No backup found!": "No backup found!",
|
||||||
|
"Backup Restored": "Backup Restored",
|
||||||
"Failed to decrypt %(failedCount)s sessions!": "Failed to decrypt %(failedCount)s sessions!",
|
"Failed to decrypt %(failedCount)s sessions!": "Failed to decrypt %(failedCount)s sessions!",
|
||||||
"Restored %(sessionCount)s session keys": "Restored %(sessionCount)s session keys",
|
"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!",
|
"This looks like a valid recovery key!": "This looks like a valid recovery key!",
|
||||||
"Not a valid recovery key": "Not 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",
|
"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.",
|
||||||
"Recover": "Recover",
|
"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>",
|
||||||
"Restore Key Backup": "Restore Key Backup",
|
|
||||||
"Private Chat": "Private Chat",
|
"Private Chat": "Private Chat",
|
||||||
"Public Chat": "Public Chat",
|
"Public Chat": "Public Chat",
|
||||||
"Custom": "Custom",
|
"Custom": "Custom",
|
||||||
|
|
Loading…
Reference in a new issue