From fbab8ceeef0d4e313d58a774915452718ed475bf Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 20 Nov 2018 13:11:58 +0000
Subject: [PATCH 1/7] Passphrase based key backups
Add passphrase support to backup creation stage
---
res/css/_common.scss | 5 +
res/css/_components.scss | 1 +
.../keybackup/_CreateKeyBackupDialog.scss | 39 +++
.../keybackup/CreateKeyBackupDialog.js | 302 ++++++++++++++----
src/i18n/strings/en_EN.json | 46 ++-
5 files changed, 316 insertions(+), 77 deletions(-)
create mode 100644 res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
diff --git a/res/css/_common.scss b/res/css/_common.scss
index 9123e5ba8d..11e04f5dc0 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -262,6 +262,11 @@ textarea {
opacity: 0.7;
}
+.mx_linkButton {
+ cursor: pointer;
+ color: $accent-color;
+}
+
.mx_Dialog_title {
min-height: 16px;
padding-top: 40px;
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 9fd524104d..039bcd545b 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -46,6 +46,7 @@
@import "./views/dialogs/_SetPasswordDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_UnknownDeviceDialog.scss";
+@import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
@import "./views/directory/_NetworkDropdown.scss";
@import "./views/elements/_AccessibleButton.scss";
@import "./views/elements/_AddressSelector.scss";
diff --git a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
new file mode 100644
index 0000000000..507c89ace7
--- /dev/null
+++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
@@ -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;
+}
diff --git a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index e561fe033c..ad68e15293 100644
--- a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -21,12 +21,13 @@ 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 +40,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 +62,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 +102,203 @@ 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._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._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,
+ });
+ },
+
+ _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.state.passPhrase === ''}
+ />
+
+ <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>
+ 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>
- <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 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 +322,39 @@ export default React.createClass({
</div>;
},
+ _renderPhaseOptOutConfirm: function() {
+ const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+ return <div>
+ 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 +373,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}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3da5ff15a2..cac9b4ef59 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -252,6 +252,7 @@
"Room Colour": "Room Colour",
"Enable widget screenshots on supported widgets": "Enable widget screenshots on supported widgets",
"Show empty room list headings": "Show empty room list headings",
+ "Show developer tools": "Show developer tools",
"Collecting app version information": "Collecting app version information",
"Collecting logs": "Collecting logs",
"Uploading report": "Uploading report",
@@ -570,6 +571,7 @@
"Click here to fix": "Click here to fix",
"To send events of type <eventType/>, you must be a": "To send events of type <eventType/>, you must be a",
"Upgrade room to version %(ver)s": "Upgrade room to version %(ver)s",
+ "Open Devtools": "Open Devtools",
"Who can access this room?": "Who can access this room?",
"Only people who have been invited": "Only people who have been invited",
"Anyone who knows the room's link, apart from guests": "Anyone who knows the room's link, apart from guests",
@@ -959,30 +961,42 @@
"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.",
+ "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.",
+ "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!",
@@ -1316,7 +1330,5 @@
"Import": "Import",
"Failed to set direct chat tag": "Failed to set direct chat tag",
"Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
- "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room",
- "Open Devtools": "Open Devtools",
- "Show developer tools": "Show developer tools"
+ "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room"
}
From 132408cf02512a90c97903714ee33c4217640ab6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 20 Nov 2018 16:16:24 +0000
Subject: [PATCH 2/7] Add e2e backup recovery with passphrase
---
res/css/_components.scss | 1 +
.../keybackup/_RestoreKeyBackupDialog.scss | 29 +++
.../keybackup/RestoreKeyBackupDialog.js | 170 ++++++++++++++++--
src/i18n/strings/en_EN.json | 10 +-
4 files changed, 188 insertions(+), 22 deletions(-)
create mode 100644 res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
diff --git a/res/css/_components.scss b/res/css/_components.scss
index 039bcd545b..083071ef6c 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -47,6 +47,7 @@
@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";
diff --git a/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
new file mode 100644
index 0000000000..612c921038
--- /dev/null
+++ b/res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss
@@ -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;
+}
+
diff --git a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
index 9e5e61cb1a..e4250814d0 100644
--- a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
@@ -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,9 @@ export default React.createClass({
recoveryKey: "",
recoverInfo: null,
recoveryKeyValid: false,
+ forceRecoveryKey: false,
+ passPhrase: '',
+ recoveryKey: '',
};
},
@@ -48,6 +52,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 +71,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 +115,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 +158,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 +192,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 +255,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}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index cac9b4ef59..58e10ff149 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1000,13 +1000,17 @@
"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",
From 63a7ff5273185aca994ab5b3c3c6a2589ed6a354 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 20 Nov 2018 16:20:31 +0000
Subject: [PATCH 3/7] lint
---
.../dialogs/keybackup/CreateKeyBackupDialog.js | 17 ++++++++++++++---
.../dialogs/keybackup/RestoreKeyBackupDialog.js | 1 -
2 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index ad68e15293..aeb0c33b67 100644
--- a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -17,7 +17,6 @@ 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';
@@ -196,7 +195,13 @@ export default React.createClass({
"<button>opt out</button>.",
{},
{
- button: sub => <AccessibleButton element="span" className="mx_linkButton" onClick={this._onOptOutClick}>{sub}</AccessibleButton>,
+ button: sub => <AccessibleButton
+ element="span"
+ className="mx_linkButton"
+ onClick={this._onOptOutClick}
+ >
+ {sub}
+ </AccessibleButton>,
},
)}</p>
<p>{_t(
@@ -204,7 +209,13 @@ export default React.createClass({
"<button>download a recovery key</button>.",
{},
{
- button: sub => <AccessibleButton element="span" className="mx_linkButton" onClick={this._onSkipPassPhraseClick}>{sub}</AccessibleButton>,
+ button: sub => <AccessibleButton
+ element="span"
+ className="mx_linkButton"
+ onClick={this._onSkipPassPhraseClick}
+ >
+ {sub}
+ </AccessibleButton>,
},
)}</p>
</div>;
diff --git a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
index e4250814d0..0cce968d34 100644
--- a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
@@ -36,7 +36,6 @@ export default React.createClass({
recoveryKeyValid: false,
forceRecoveryKey: false,
passPhrase: '',
- recoveryKey: '',
};
},
From 08e2ba8c6c704aa1ad7e3aab76918ffbca3aa889 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 21 Nov 2018 18:02:58 +0000
Subject: [PATCH 4/7] Don't allow enter to submit if field invalid
---
.../views/dialogs/keybackup/CreateKeyBackupDialog.js | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index aeb0c33b67..eec4c9f414 100644
--- a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -122,7 +122,7 @@ export default React.createClass({
},
_onPassPhraseKeyPress: function(e) {
- if (e.key === 'Enter') {
+ if (e.key === 'Enter' && this._passPhraseIsValid()) {
this._onPassPhraseNextClick();
}
},
@@ -136,7 +136,7 @@ export default React.createClass({
},
_onPassPhraseConfirmKeyPress: function(e) {
- if (e.key === 'Enter') {
+ if (e.key === 'Enter' && this.state.passPhrase === this.state.passPhraseConfirm) {
this._onPassPhraseConfirmNextClick();
}
},
@@ -167,6 +167,10 @@ export default React.createClass({
});
},
+ _passPhraseIsValid: function() {
+ return this.state.passPhrase !== '';
+ },
+
_renderPhasePassPhrase: function() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -187,7 +191,7 @@ export default React.createClass({
<DialogButtons primaryButton={_t('Next')}
onPrimaryButtonClick={this._onPassPhraseNextClick}
hasCancel={false}
- disabled={this.state.passPhrase === ''}
+ disabled={!this._passPhraseIsValid()}
/>
<p>{_t(
From 1c06d781aea46a31e4918b2401e9749e300b628b Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 21 Nov 2018 18:06:37 +0000
Subject: [PATCH 5/7] Missed translation
---
.../views/dialogs/keybackup/CreateKeyBackupDialog.js | 10 +++++-----
src/i18n/strings/en_EN.json | 1 +
2 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index eec4c9f414..4a5ba67514 100644
--- a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -247,11 +247,11 @@ export default React.createClass({
}
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return <div>
- <p>
- 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>
+ <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>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index be713bdb37..ba2df1052a 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -981,6 +981,7 @@
"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.",
From 40ef2e0cf4d42f36d4ba51eef9b14d69c0efc42a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 21 Nov 2018 18:08:44 +0000
Subject: [PATCH 6/7] another missed translation
---
.../views/dialogs/keybackup/CreateKeyBackupDialog.js | 6 ++++--
src/i18n/strings/en_EN.json | 1 +
2 files changed, 5 insertions(+), 2 deletions(-)
diff --git a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index 4a5ba67514..8601463e80 100644
--- a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -340,8 +340,10 @@ export default React.createClass({
_renderPhaseOptOutConfirm: function() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return <div>
- 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.
+ {_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}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ba2df1052a..f11c5e22f4 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -995,6 +995,7 @@
"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",
From 3828798099a7aa1f96d327ecf87d790be6e571cf Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 21 Nov 2018 18:17:26 +0000
Subject: [PATCH 7/7] lint
---
src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index 8601463e80..a3ef8e7f19 100644
--- a/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -342,7 +342,7 @@ export default React.createClass({
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."
+ "encrypted message history if you log out or use another device.",
)}
<DialogButtons primaryButton={_t('Set up Secure Message Recovery')}
onPrimaryButtonClick={this._onSetUpClick}