@@ -760,26 +579,15 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
case PHASE_LOADERROR:
content = this._renderPhaseLoadError();
break;
+ case PHASE_INTRO:
+ content = this._renderPhaseIntro();
+ break;
case PHASE_MIGRATE:
content = this._renderPhaseMigrate();
break;
- case PHASE_PASSPHRASE:
- content = this._renderPhasePassPhrase();
- break;
- case PHASE_PASSPHRASE_CONFIRM:
- content = this._renderPhasePassPhraseConfirm();
- break;
case PHASE_SHOWKEY:
- content = this._renderPhaseShowKey();
- break;
- case PHASE_KEEPITSAFE:
- content = this._renderPhaseKeepItSafe();
- break;
case PHASE_STORING:
- content = this._renderBusyPhase();
- break;
- case PHASE_DONE:
- content = this._renderPhaseDone();
+ content = this._renderPhaseShowKey();
break;
case PHASE_CONFIRM_SKIP:
content = this._renderPhaseSkipConfirm();
@@ -797,7 +605,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
onFinished={this.props.onFinished}
title={this._titleForPhase(this.state.phase)}
headerImage={headerImage}
- hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
+ hasCancel={this.props.hasCancel}
fixedWidth={false}
>
diff --git a/src/components/structures/auth/CompleteSecurity.js b/src/components/structures/auth/CompleteSecurity.js
index c73691611d..e38ecd3eac 100644
--- a/src/components/structures/auth/CompleteSecurity.js
+++ b/src/components/structures/auth/CompleteSecurity.js
@@ -21,6 +21,7 @@ import * as sdk from '../../../index';
import {
SetupEncryptionStore,
PHASE_INTRO,
+ PHASE_RECOVERY_KEY,
PHASE_BUSY,
PHASE_DONE,
PHASE_CONFIRM_SKIP,
@@ -61,6 +62,9 @@ export default class CompleteSecurity extends React.Component {
if (phase === PHASE_INTRO) {
icon =
;
title = _t("Verify this login");
+ } else if (phase === PHASE_RECOVERY_KEY) {
+ icon =
;
+ title = _t("Recovery Key");
} else if (phase === PHASE_DONE) {
icon =
;
title = _t("Session verified");
diff --git a/src/components/structures/auth/SetupEncryptionBody.js b/src/components/structures/auth/SetupEncryptionBody.js
index 26534c6e02..7886ed26dd 100644
--- a/src/components/structures/auth/SetupEncryptionBody.js
+++ b/src/components/structures/auth/SetupEncryptionBody.js
@@ -19,15 +19,26 @@ import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import * as sdk from '../../../index';
+import withValidation from '../../views/elements/Validation';
+import { decodeRecoveryKey } from 'matrix-js-sdk/src/crypto/recoverykey';
import {
SetupEncryptionStore,
PHASE_INTRO,
+ PHASE_RECOVERY_KEY,
PHASE_BUSY,
PHASE_DONE,
PHASE_CONFIRM_SKIP,
PHASE_FINISHED,
} from '../../../stores/SetupEncryptionStore';
+function keyHasPassphrase(keyInfo) {
+ return (
+ keyInfo.passphrase &&
+ keyInfo.passphrase.salt &&
+ keyInfo.passphrase.iterations
+ );
+}
+
export default class SetupEncryptionBody extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
@@ -45,6 +56,11 @@ export default class SetupEncryptionBody extends React.Component {
// Because of the latter, it lives in the state.
verificationRequest: store.verificationRequest,
backupInfo: store.backupInfo,
+ recoveryKey: '',
+ // whether the recovery key is a valid recovery key
+ recoveryKeyValid: null,
+ // whether the recovery key is the correct key or not
+ recoveryKeyCorrect: null,
};
}
@@ -67,9 +83,19 @@ export default class SetupEncryptionBody extends React.Component {
store.stop();
}
- _onUsePassphraseClick = async () => {
+ _onResetClick = () => {
const store = SetupEncryptionStore.sharedInstance();
- store.usePassPhrase();
+ store.startKeyReset();
+ }
+
+ _onUseRecoveryKeyClick = async () => {
+ const store = SetupEncryptionStore.sharedInstance();
+ store.useRecoveryKey();
+ }
+
+ _onRecoveryKeyCancelClick() {
+ const store = SetupEncryptionStore.sharedInstance();
+ store.cancelUseRecoveryKey();
}
onSkipClick = () => {
@@ -92,6 +118,66 @@ export default class SetupEncryptionBody extends React.Component {
store.done();
}
+ _onUsePassphraseClick = () => {
+ const store = SetupEncryptionStore.sharedInstance();
+ store.usePassPhrase();
+ }
+
+ _onRecoveryKeyChange = (e) => {
+ this.setState({recoveryKey: e.target.value});
+ }
+
+ _onRecoveryKeyValidate = async (fieldState) => {
+ const result = await this._validateRecoveryKey(fieldState);
+ this.setState({recoveryKeyValid: result.valid});
+ return result;
+ }
+
+ _validateRecoveryKey = withValidation({
+ rules: [
+ {
+ key: "required",
+ test: async (state) => {
+ try {
+ const decodedKey = decodeRecoveryKey(state.value);
+ const correct = await MatrixClientPeg.get().checkSecretStorageKey(
+ decodedKey, SetupEncryptionStore.sharedInstance().keyInfo,
+ );
+ this.setState({
+ recoveryKeyValid: true,
+ recoveryKeyCorrect: correct,
+ });
+ return correct;
+ } catch (e) {
+ this.setState({
+ recoveryKeyValid: false,
+ recoveryKeyCorrect: false,
+ });
+ return false;
+ }
+ },
+ invalid: function() {
+ if (this.state.recoveryKeyValid) {
+ return _t("This isn't the recovery key for your account");
+ } else {
+ return _t("This isn't a valid recovery key");
+ }
+ },
+ valid: function() {
+ return _t("Looks good!");
+ },
+ },
+ ],
+ })
+
+ _onRecoveryKeyFormSubmit = (e) => {
+ e.preventDefault();
+ if (!this.state.recoveryKeyCorrect) return;
+
+ const store = SetupEncryptionStore.sharedInstance();
+ store.setupWithRecoveryKey(decodeRecoveryKey(this.state.recoveryKey));
+ }
+
render() {
const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
@@ -108,6 +194,13 @@ export default class SetupEncryptionBody extends React.Component {
member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
/>;
} else if (phase === PHASE_INTRO) {
+ const store = SetupEncryptionStore.sharedInstance();
+ let recoveryKeyPrompt;
+ if (keyHasPassphrase(store.keyInfo)) {
+ recoveryKeyPrompt = _t("Use Recovery Key or Passphrase");
+ } else {
+ recoveryKeyPrompt = _t("Use Recovery Key");
+ }
return (
{_t(
@@ -131,15 +224,67 @@ export default class SetupEncryptionBody extends React.Component {
-
- {_t("Use Recovery Passphrase or Key")}
+
+ {recoveryKeyPrompt}
{_t("Skip")}
+
{_t(
+ "If you've forgotten your recovery key you can " +
+ "
set up new recovery options ", {}, {
+ button: sub =>
+ {sub}
+ ,
+ },
+ )}
);
+ } else if (phase === PHASE_RECOVERY_KEY) {
+ const store = SetupEncryptionStore.sharedInstance();
+ let keyPrompt;
+ if (keyHasPassphrase(store.keyInfo)) {
+ keyPrompt = _t(
+ "Enter your Recovery Key or enter a
Recovery Passphrase to continue.", {},
+ {
+ a: sub =>
{sub} ,
+ },
+ );
+ } else {
+ keyPrompt = _t("Enter your Recovery Key to continue.");
+ }
+
+ const Field = sdk.getComponent('elements.Field');
+ return
;
} else if (phase === PHASE_DONE) {
let message;
if (this.state.backupInfo) {
diff --git a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
index dd34dfbbf0..87ba6f7396 100644
--- a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
@@ -88,7 +88,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
_onResetRecoveryClick = () => {
this.props.onFinished(false);
- accessSecretStorage(() => {}, /* forceReset = */ true);
+ accessSecretStorage(() => {}, {forceReset: true});
}
_onRecoveryKeyChange = (e) => {
diff --git a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
index e2ceadfbb9..43697f8ee7 100644
--- a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
+++ b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
@@ -32,6 +32,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
keyInfo: PropTypes.object.isRequired,
// Function from one of { passphrase, recoveryKey } -> boolean
checkPrivateKey: PropTypes.func.isRequired,
+ // If true, only prompt for a passphrase and do not offer to restore with
+ // a recovery key or reset keys.
+ passphraseOnly: PropTypes.bool,
}
constructor(props) {
@@ -58,7 +61,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
_onResetRecoveryClick = () => {
// Re-enter the access flow, but resetting storage this time around.
this.props.onFinished(false);
- accessSecretStorage(() => {}, /* forceReset = */ true);
+ accessSecretStorage(() => {}, {forceReset: true});
}
_onRecoveryKeyChange = (e) => {
@@ -164,7 +167,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
primaryDisabled={this.state.passPhrase.length === 0}
/>
- {_t(
+ {this.props.passphraseOnly ? null : _t(
"If you've forgotten your recovery passphrase you can "+
"
use your recovery key or " +
"
set up new recovery options ."
@@ -234,7 +237,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
primaryDisabled={!this.state.recoveryKeyValid}
/>
- {_t(
+ {this.props.passphraseOnly ? null : _t(
"If you've forgotten your recovery key you can "+
"
set up new recovery options ."
, {}, {
diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx
index 7d84f68c49..fdedd16230 100644
--- a/src/components/views/elements/StyledRadioButton.tsx
+++ b/src/components/views/elements/StyledRadioButton.tsx
@@ -29,9 +29,16 @@ export default class StyledRadioButton extends React.PureComponent
-
+ {children}
diff --git a/src/components/views/settings/CrossSigningPanel.js b/src/components/views/settings/CrossSigningPanel.js
index 7eb239cbca..f48ee3cd0d 100644
--- a/src/components/views/settings/CrossSigningPanel.js
+++ b/src/components/views/settings/CrossSigningPanel.js
@@ -113,7 +113,7 @@ export default class CrossSigningPanel extends React.PureComponent {
_bootstrapSecureSecretStorage = async (forceReset=false) => {
this.setState({ error: null });
try {
- await accessSecretStorage(() => undefined, forceReset);
+ await accessSecretStorage(() => undefined, {forceReset});
} catch (e) {
this.setState({ error: e });
console.error("Error bootstrapping secret storage", e);
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index e7f22d5ea2..fe575c2819 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -103,14 +103,14 @@ export default class AppearanceUserSettingsTab extends React.Component): void => {
+ private onThemeChange = (e: React.ChangeEvent): void => {
const newTheme = e.target.value;
if (this.state.theme === newTheme) return;
// doing getValue in the .catch will still return the value we failed to set,
// so remember what the value was before we tried to set it so we can revert
const oldTheme: string = SettingsStore.getValue('theme');
- SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
+ SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
dis.dispatch({action: Action.RecheckTheme});
this.setState({theme: oldTheme});
});
@@ -199,17 +199,19 @@ export default class AppearanceUserSettingsTab extends React.Component
- this.onUseSystemThemeChanged(e.target.checked)}
+ >
+ {SettingsStore.getDisplayName("use_system_theme")}
+
;
}
@@ -256,17 +258,22 @@ export default class AppearanceUserSettingsTab extends React.Component