2018-09-13 19:11:46 +03:00
|
|
|
/*
|
|
|
|
Copyright 2018 New Vector Ltd
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import sdk from '../../../../index';
|
|
|
|
import MatrixClientPeg from '../../../../MatrixClientPeg';
|
2018-11-23 18:50:23 +03:00
|
|
|
import { scorePassword } from '../../../../utils/PasswordScorer';
|
2018-09-13 19:11:46 +03:00
|
|
|
|
2018-11-21 16:57:31 +03:00
|
|
|
import FileSaver from 'file-saver';
|
|
|
|
|
2018-09-13 19:11:46 +03:00
|
|
|
import { _t, _td } from '../../../../languageHandler';
|
|
|
|
|
2018-11-20 16:11:58 +03:00
|
|
|
const PHASE_PASSPHRASE = 0;
|
|
|
|
const PHASE_PASSPHRASE_CONFIRM = 1;
|
2018-09-13 19:11:46 +03:00
|
|
|
const PHASE_SHOWKEY = 2;
|
2018-11-20 16:11:58 +03:00
|
|
|
const PHASE_KEEPITSAFE = 3;
|
|
|
|
const PHASE_BACKINGUP = 4;
|
2018-09-13 19:11:46 +03:00
|
|
|
const PHASE_DONE = 5;
|
2018-11-20 16:11:58 +03:00
|
|
|
const PHASE_OPTOUT_CONFIRM = 6;
|
2018-09-13 19:11:46 +03:00
|
|
|
|
2018-11-23 18:50:23 +03:00
|
|
|
const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
|
|
|
|
|
2018-09-13 19:11:46 +03:00
|
|
|
// XXX: copied from ShareDialog: factor out into utils
|
|
|
|
function selectText(target) {
|
|
|
|
const range = document.createRange();
|
|
|
|
range.selectNodeContents(target);
|
|
|
|
|
|
|
|
const selection = window.getSelection();
|
|
|
|
selection.removeAllRanges();
|
|
|
|
selection.addRange(range);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2018-11-20 16:11:58 +03:00
|
|
|
* Walks the user through the process of creating an e2e key backup
|
2018-09-13 19:11:46 +03:00
|
|
|
* on the server.
|
|
|
|
*/
|
|
|
|
export default React.createClass({
|
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2018-11-20 16:11:58 +03:00
|
|
|
phase: PHASE_PASSPHRASE,
|
|
|
|
passPhrase: '',
|
|
|
|
passPhraseConfirm: '',
|
|
|
|
copied: false,
|
2018-11-21 16:57:31 +03:00
|
|
|
downloaded: false,
|
2018-11-23 18:50:23 +03:00
|
|
|
zxcvbnResult: null,
|
2018-12-04 19:38:32 +03:00
|
|
|
setPassPhrase: false,
|
2018-09-13 19:11:46 +03:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillMount: function() {
|
|
|
|
this._recoveryKeyNode = null;
|
|
|
|
this._keyBackupInfo = null;
|
|
|
|
},
|
|
|
|
|
|
|
|
_collectRecoveryKeyNode: function(n) {
|
|
|
|
this._recoveryKeyNode = n;
|
|
|
|
},
|
|
|
|
|
2018-11-20 16:11:58 +03:00
|
|
|
_onCopyClick: function() {
|
2018-09-13 19:11:46 +03:00
|
|
|
selectText(this._recoveryKeyNode);
|
|
|
|
const successful = document.execCommand('copy');
|
|
|
|
if (successful) {
|
2018-11-20 16:11:58 +03:00
|
|
|
this.setState({
|
|
|
|
copied: true,
|
|
|
|
phase: PHASE_KEEPITSAFE,
|
|
|
|
});
|
2018-09-13 19:11:46 +03:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-11-21 16:57:31 +03:00
|
|
|
_onDownloadClick: function() {
|
|
|
|
const blob = new Blob([this._keyBackupInfo.recovery_key], {
|
|
|
|
type: 'text/plain;charset=us-ascii',
|
|
|
|
});
|
|
|
|
FileSaver.saveAs(blob, 'recovery-key.txt');
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
downloaded: true,
|
|
|
|
phase: PHASE_KEEPITSAFE,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-12-13 15:10:08 +03:00
|
|
|
_createBackup: async function() {
|
2018-09-13 19:11:46 +03:00
|
|
|
this.setState({
|
2018-11-20 16:11:58 +03:00
|
|
|
phase: PHASE_BACKINGUP,
|
2018-09-13 19:11:46 +03:00
|
|
|
error: null,
|
|
|
|
});
|
2018-12-13 15:10:08 +03:00
|
|
|
let info;
|
|
|
|
try {
|
|
|
|
info = await MatrixClientPeg.get().createKeyBackupVersion(
|
|
|
|
this._keyBackupInfo,
|
|
|
|
);
|
|
|
|
await MatrixClientPeg.get().backupAllGroupSessions(info.version);
|
2018-09-13 19:11:46 +03:00
|
|
|
this.setState({
|
|
|
|
phase: PHASE_DONE,
|
|
|
|
});
|
2018-12-13 15:10:08 +03:00
|
|
|
} catch (e) {
|
2018-09-13 19:11:46 +03:00
|
|
|
console.log("Error creating key backup", e);
|
2018-12-13 15:10:08 +03:00
|
|
|
// TODO: If creating a version succeeds, but backup fails, should we
|
|
|
|
// delete the version, disable backup, or do nothing? If we just
|
|
|
|
// disable without deleting, we'll enable on next app reload since
|
|
|
|
// it is trusted.
|
|
|
|
if (info) {
|
|
|
|
MatrixClientPeg.get().deleteKeyBackupVersion(info.version);
|
|
|
|
}
|
2018-09-13 19:11:46 +03:00
|
|
|
this.setState({
|
|
|
|
error: e,
|
|
|
|
});
|
2018-12-13 15:10:08 +03:00
|
|
|
}
|
2018-09-13 19:11:46 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_onCancel: function() {
|
|
|
|
this.props.onFinished(false);
|
|
|
|
},
|
|
|
|
|
|
|
|
_onDone: function() {
|
|
|
|
this.props.onFinished(true);
|
|
|
|
},
|
|
|
|
|
2018-11-20 16:11:58 +03:00
|
|
|
_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({
|
|
|
|
copied: false,
|
2018-12-04 19:38:32 +03:00
|
|
|
downloaded: false,
|
2018-11-20 16:11:58 +03:00
|
|
|
phase: PHASE_SHOWKEY,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
_onPassPhraseNextClick: function() {
|
|
|
|
this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
|
|
|
|
},
|
|
|
|
|
|
|
|
_onPassPhraseKeyPress: function(e) {
|
2018-11-21 21:02:58 +03:00
|
|
|
if (e.key === 'Enter' && this._passPhraseIsValid()) {
|
2018-11-20 16:11:58 +03:00
|
|
|
this._onPassPhraseNextClick();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_onPassPhraseConfirmNextClick: async function() {
|
|
|
|
this._keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion(this.state.passPhrase);
|
|
|
|
this.setState({
|
2018-12-04 19:38:32 +03:00
|
|
|
setPassPhrase: true,
|
2018-11-20 16:11:58 +03:00
|
|
|
copied: false,
|
2018-12-04 19:38:32 +03:00
|
|
|
downloaded: false,
|
2018-11-20 16:11:58 +03:00
|
|
|
phase: PHASE_SHOWKEY,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
_onPassPhraseConfirmKeyPress: function(e) {
|
2018-11-21 21:02:58 +03:00
|
|
|
if (e.key === 'Enter' && this.state.passPhrase === this.state.passPhraseConfirm) {
|
2018-11-20 16:11:58 +03:00
|
|
|
this._onPassPhraseConfirmNextClick();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_onSetAgainClick: function() {
|
2018-09-13 19:11:46 +03:00
|
|
|
this.setState({
|
2018-11-20 16:11:58 +03:00
|
|
|
passPhrase: '',
|
|
|
|
passPhraseConfirm: '',
|
|
|
|
phase: PHASE_PASSPHRASE,
|
2018-09-13 19:11:46 +03:00
|
|
|
});
|
2018-11-20 16:11:58 +03:00
|
|
|
},
|
|
|
|
|
2019-01-04 20:16:06 +03:00
|
|
|
_onKeepItSafeBackClick: function() {
|
2018-09-13 19:11:46 +03:00
|
|
|
this.setState({
|
|
|
|
phase: PHASE_SHOWKEY,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-11-20 16:11:58 +03:00
|
|
|
_onPassPhraseChange: function(e) {
|
|
|
|
this.setState({
|
|
|
|
passPhrase: e.target.value,
|
2018-11-23 18:50:23 +03:00
|
|
|
// precompute this and keep it in state: zxcvbn is fast but
|
2018-12-04 14:41:04 +03:00
|
|
|
// we use it in a couple of different places so no point recomputing
|
2018-11-23 18:50:23 +03:00
|
|
|
// it unnecessarily.
|
|
|
|
zxcvbnResult: scorePassword(e.target.value),
|
2018-11-20 16:11:58 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
_onPassPhraseConfirmChange: function(e) {
|
|
|
|
this.setState({
|
|
|
|
passPhraseConfirm: e.target.value,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-11-21 21:02:58 +03:00
|
|
|
_passPhraseIsValid: function() {
|
2018-11-23 18:50:23 +03:00
|
|
|
return this.state.zxcvbnResult && this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE;
|
2018-11-21 21:02:58 +03:00
|
|
|
},
|
|
|
|
|
2018-11-20 16:11:58 +03:00
|
|
|
_renderPhasePassPhrase: function() {
|
2018-09-13 19:11:46 +03:00
|
|
|
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
2018-11-20 16:11:58 +03:00
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
2018-11-23 18:50:23 +03:00
|
|
|
|
|
|
|
let strengthMeter;
|
|
|
|
let helpText;
|
|
|
|
if (this.state.zxcvbnResult) {
|
|
|
|
if (this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE) {
|
|
|
|
helpText = _t("Great! This passphrase looks strong enough.");
|
|
|
|
} else {
|
|
|
|
const suggestions = [];
|
|
|
|
for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) {
|
|
|
|
suggestions.push(<div key={i}>{this.state.zxcvbnResult.feedback.suggestions[i]}</div>);
|
|
|
|
}
|
|
|
|
const suggestionBlock = suggestions.length > 0 ? <div>
|
|
|
|
{suggestions}
|
|
|
|
</div> : null;
|
|
|
|
|
|
|
|
helpText = <div>
|
|
|
|
{this.state.zxcvbnResult.feedback.warning}
|
|
|
|
{suggestionBlock}
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
strengthMeter = <div>
|
|
|
|
<progress max={PASSWORD_MIN_SCORE} value={this.state.zxcvbnResult.score} />
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
2018-09-13 19:11:46 +03:00
|
|
|
return <div>
|
2018-11-20 16:11:58 +03:00
|
|
|
<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">
|
2018-12-19 13:56:50 +03:00
|
|
|
<div className="mx_CreateKeyBackupDialog_passPhraseContainer">
|
|
|
|
<input type="password"
|
|
|
|
onChange={this._onPassPhraseChange}
|
|
|
|
onKeyPress={this._onPassPhraseKeyPress}
|
|
|
|
value={this.state.passPhrase}
|
|
|
|
className="mx_CreateKeyBackupDialog_passPhraseInput"
|
|
|
|
placeholder={_t("Enter a passphrase...")}
|
|
|
|
/>
|
|
|
|
<div className="mx_CreateKeyBackupDialog_passPhraseHelp">
|
|
|
|
{strengthMeter}
|
|
|
|
{helpText}
|
|
|
|
</div>
|
2018-11-23 18:50:23 +03:00
|
|
|
</div>
|
2018-11-20 16:11:58 +03:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<DialogButtons primaryButton={_t('Next')}
|
|
|
|
onPrimaryButtonClick={this._onPassPhraseNextClick}
|
|
|
|
hasCancel={false}
|
2018-11-21 21:02:58 +03:00
|
|
|
disabled={!this._passPhraseIsValid()}
|
2018-11-20 16:11:58 +03:00
|
|
|
/>
|
|
|
|
|
|
|
|
<p>{_t(
|
2018-12-07 00:39:59 +03:00
|
|
|
"If you don't want encrypted message history to be available on other devices, "+
|
2018-11-20 16:11:58 +03:00
|
|
|
"<button>opt out</button>.",
|
|
|
|
{},
|
|
|
|
{
|
2018-11-20 19:20:31 +03:00
|
|
|
button: sub => <AccessibleButton
|
|
|
|
element="span"
|
|
|
|
className="mx_linkButton"
|
|
|
|
onClick={this._onOptOutClick}
|
|
|
|
>
|
|
|
|
{sub}
|
|
|
|
</AccessibleButton>,
|
2018-11-20 16:11:58 +03:00
|
|
|
},
|
|
|
|
)}</p>
|
|
|
|
<p>{_t(
|
|
|
|
"Or, if you don't want to create a Recovery Passphrase, skip this step and "+
|
|
|
|
"<button>download a recovery key</button>.",
|
|
|
|
{},
|
|
|
|
{
|
2018-11-20 19:20:31 +03:00
|
|
|
button: sub => <AccessibleButton
|
|
|
|
element="span"
|
|
|
|
className="mx_linkButton"
|
|
|
|
onClick={this._onSkipPassPhraseClick}
|
|
|
|
>
|
|
|
|
{sub}
|
|
|
|
</AccessibleButton>,
|
2018-11-20 16:11:58 +03:00
|
|
|
},
|
|
|
|
)}</p>
|
|
|
|
</div>;
|
|
|
|
},
|
2018-09-13 19:11:46 +03:00
|
|
|
|
2018-11-20 16:11:58 +03:00
|
|
|
_renderPhasePassPhraseConfirm: function() {
|
|
|
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
2018-09-13 19:11:46 +03:00
|
|
|
|
2018-11-20 16:11:58 +03:00
|
|
|
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>
|
2018-11-21 21:06:37 +03:00
|
|
|
<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>
|
2018-11-20 16:11:58 +03:00
|
|
|
<div className="mx_CreateKeyBackupDialog_primaryContainer">
|
2018-12-19 13:56:50 +03:00
|
|
|
<div className="mx_CreateKeyBackupDialog_passPhraseContainer">
|
|
|
|
<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>
|
|
|
|
{passPhraseMatch}
|
2018-11-20 16:11:58 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<DialogButtons primaryButton={_t('Next')}
|
|
|
|
onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
|
|
|
|
hasCancel={false}
|
|
|
|
disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
|
2018-09-13 19:11:46 +03:00
|
|
|
/>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
|
|
|
_renderPhaseShowKey: function() {
|
2018-12-04 19:38:32 +03:00
|
|
|
let bodyText;
|
|
|
|
if (this.state.setPassPhrase) {
|
2019-01-08 19:54:38 +03:00
|
|
|
bodyText = _t(
|
|
|
|
"As a safety net, you can use it to restore your encrypted message " +
|
|
|
|
"history if you forget your Recovery Passphrase.",
|
|
|
|
);
|
2018-12-04 19:38:32 +03:00
|
|
|
} else {
|
|
|
|
bodyText = _t("As a safety net, you can use it to restore your encrypted message history.");
|
|
|
|
}
|
|
|
|
|
2018-09-13 19:11:46 +03:00
|
|
|
return <div>
|
2018-11-20 16:11:58 +03:00
|
|
|
<p>{_t("Make a copy of this Recovery Key and keep it safe.")}</p>
|
2018-12-04 19:38:32 +03:00
|
|
|
<p>{bodyText}</p>
|
2019-01-08 19:55:01 +03:00
|
|
|
<div className="mx_CreateKeyBackupDialog_primaryContainer">
|
2018-12-18 20:26:11 +03:00
|
|
|
<div className="mx_CreateKeyBackupDialog_recoveryKeyHeader">
|
|
|
|
{_t("Your Recovery Key")}
|
2018-11-20 16:11:58 +03:00
|
|
|
</div>
|
2018-12-18 20:26:11 +03:00
|
|
|
<div className="mx_CreateKeyBackupDialog_recoveryKeyContainer">
|
|
|
|
<div className="mx_CreateKeyBackupDialog_recoveryKey">
|
|
|
|
<code ref={this._collectRecoveryKeyNode}>{this._keyBackupInfo.recovery_key}</code>
|
|
|
|
</div>
|
|
|
|
<div className="mx_CreateKeyBackupDialog_recoveryKeyButtons">
|
2018-12-19 14:06:47 +03:00
|
|
|
<button className="mx_Dialog_primary" onClick={this._onCopyClick}>
|
2018-12-18 20:26:11 +03:00
|
|
|
{_t("Copy to clipboard")}
|
|
|
|
</button>
|
2018-12-19 14:06:47 +03:00
|
|
|
<button className="mx_Dialog_primary" onClick={this._onDownloadClick}>
|
2018-12-18 20:26:11 +03:00
|
|
|
{_t("Download")}
|
|
|
|
</button>
|
|
|
|
</div>
|
2018-11-20 16:11:58 +03:00
|
|
|
</div>
|
2019-01-08 19:55:01 +03:00
|
|
|
</div>
|
2018-11-20 16:11:58 +03:00
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
|
|
|
_renderPhaseKeepItSafe: function() {
|
|
|
|
let introText;
|
|
|
|
if (this.state.copied) {
|
2018-11-21 16:57:31 +03:00
|
|
|
introText = _t(
|
|
|
|
"Your Recovery Key has been <b>copied to your clipboard</b>, paste it to:",
|
|
|
|
{}, {b: s => <b>{s}</b>},
|
|
|
|
);
|
|
|
|
} else if (this.state.downloaded) {
|
|
|
|
introText = _t(
|
|
|
|
"Your Recovery Key is in your <b>Downloads</b> folder.",
|
|
|
|
{}, {b: s => <b>{s}</b>},
|
|
|
|
);
|
2018-11-20 16:11:58 +03:00
|
|
|
}
|
|
|
|
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>
|
2019-01-04 20:16:06 +03:00
|
|
|
<DialogButtons primaryButton={_t("OK")}
|
|
|
|
onPrimaryButtonClick={this._createBackup}
|
|
|
|
hasCancel={false}>
|
|
|
|
<button onClick={this._onKeepItSafeBackClick}>{_t("Back")}</button>
|
|
|
|
</DialogButtons>
|
2018-09-13 19:11:46 +03:00
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
|
|
|
_renderBusyPhase: function(text) {
|
|
|
|
const Spinner = sdk.getComponent('views.elements.Spinner');
|
|
|
|
return <div>
|
|
|
|
<p>{_t(text)}</p>
|
|
|
|
<Spinner />
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
|
|
|
_renderPhaseDone: function() {
|
|
|
|
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
|
|
|
return <div>
|
|
|
|
<p>{_t("Backup created")}</p>
|
|
|
|
<p>{_t("Your encryption keys are now being backed up to your Homeserver.")}</p>
|
|
|
|
<DialogButtons primaryButton={_t('Close')}
|
|
|
|
onPrimaryButtonClick={this._onDone}
|
|
|
|
hasCancel={false}
|
|
|
|
/>
|
|
|
|
</div>;
|
|
|
|
},
|
|
|
|
|
2018-11-20 16:11:58 +03:00
|
|
|
_renderPhaseOptOutConfirm: function() {
|
|
|
|
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
|
|
|
return <div>
|
2018-11-21 21:08:44 +03:00
|
|
|
{_t(
|
|
|
|
"Without setting up Secure Message Recovery, you won't be able to restore your " +
|
2018-11-21 21:17:26 +03:00
|
|
|
"encrypted message history if you log out or use another device.",
|
2018-11-21 21:08:44 +03:00
|
|
|
)}
|
2018-11-20 16:11:58 +03:00
|
|
|
<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");
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-09-13 19:11:46 +03:00
|
|
|
render: function() {
|
|
|
|
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
|
|
|
|
|
|
|
let content;
|
|
|
|
if (this.state.error) {
|
2018-10-26 19:55:59 +03:00
|
|
|
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
2018-09-13 19:11:46 +03:00
|
|
|
content = <div>
|
|
|
|
<p>{_t("Unable to create key backup")}</p>
|
|
|
|
<div className="mx_Dialog_buttons">
|
2018-10-26 19:55:59 +03:00
|
|
|
<DialogButtons primaryButton={_t('Retry')}
|
|
|
|
onPrimaryButtonClick={this._createBackup}
|
|
|
|
hasCancel={true}
|
|
|
|
onCancel={this._onCancel}
|
|
|
|
/>
|
2018-09-13 19:11:46 +03:00
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
} else {
|
|
|
|
switch (this.state.phase) {
|
2018-11-20 16:11:58 +03:00
|
|
|
case PHASE_PASSPHRASE:
|
|
|
|
content = this._renderPhasePassPhrase();
|
2018-09-13 19:11:46 +03:00
|
|
|
break;
|
2018-11-20 16:11:58 +03:00
|
|
|
case PHASE_PASSPHRASE_CONFIRM:
|
|
|
|
content = this._renderPhasePassPhraseConfirm();
|
2018-09-13 19:11:46 +03:00
|
|
|
break;
|
|
|
|
case PHASE_SHOWKEY:
|
|
|
|
content = this._renderPhaseShowKey();
|
|
|
|
break;
|
2018-11-20 16:11:58 +03:00
|
|
|
case PHASE_KEEPITSAFE:
|
|
|
|
content = this._renderPhaseKeepItSafe();
|
2018-09-13 19:11:46 +03:00
|
|
|
break;
|
2018-11-20 16:11:58 +03:00
|
|
|
case PHASE_BACKINGUP:
|
|
|
|
content = this._renderBusyPhase(_td("Backing up..."));
|
2018-09-13 19:11:46 +03:00
|
|
|
break;
|
|
|
|
case PHASE_DONE:
|
|
|
|
content = this._renderPhaseDone();
|
|
|
|
break;
|
2018-11-20 16:11:58 +03:00
|
|
|
case PHASE_OPTOUT_CONFIRM:
|
|
|
|
content = this._renderPhaseOptOutConfirm();
|
|
|
|
break;
|
2018-09-13 19:11:46 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<BaseDialog className='mx_CreateKeyBackupDialog'
|
|
|
|
onFinished={this.props.onFinished}
|
2018-11-20 16:11:58 +03:00
|
|
|
title={this._titleForPhase(this.state.phase)}
|
|
|
|
hasCancel={[PHASE_DONE].includes(this.state.phase)}
|
2018-09-13 19:11:46 +03:00
|
|
|
>
|
|
|
|
<div>
|
|
|
|
{content}
|
|
|
|
</div>
|
|
|
|
</BaseDialog>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
});
|