{_t(
"Enter your recovery passphrase a second time to confirm it.",
@@ -592,7 +619,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
>
@@ -600,66 +627,48 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
}
_renderPhaseShowKey() {
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+ let continueButton;
+ if (this.state.phase === PHASE_SHOWKEY) {
+ continueButton = ;
+ } else {
+ continueButton =
{_t(
- "Your recovery key is a safety net - you can use it to restore " +
- "access to your encrypted messages if you forget your recovery passphrase.",
- )}
-
{_t(
- "Keep a copy of it somewhere secure, like a password manager or even a safe.",
+ "Store your Security Key somewhere safe, like a password manager or a safe, " +
+ "as it’s used to safeguard your encrypted data.",
)}
-
- {_t("Your recovery key")}
-
{this._recoveryKey.encodedPrivateKey}
+
+ {_t("Download")}
+
+
{_t("or")}
- {_t("Copy")}
-
-
- {_t("Download")}
+ {this.state.copied ? _t("Copied!") : _t("Copy")}
-
;
- }
-
- _renderPhaseKeepItSafe() {
- let introText;
- if (this.state.copied) {
- introText = _t(
- "Your recovery key has been
{_t("Unable to query secret storage status")}
@@ -684,53 +692,39 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
;
}
- _renderPhaseDone() {
- const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+ _renderPhaseSkipConfirm() {
return
{_t(
- "You can now verify your other devices, " +
- "and other users to keep your chats safe.",
+ "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.",
+ )}
+
{_t(
+ "You can also set up Secure Backup & manage your keys in Settings.",
)}
-
-
;
- }
-
- _renderPhaseSkipConfirm() {
- const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
- return
- {_t(
- "Without completing security on this session, it won’t have " +
- "access to encrypted messages.",
- )}
-
+
;
}
_titleForPhase(phase) {
switch (phase) {
+ case PHASE_CHOOSE_KEY_PASSPHRASE:
+ return _t('Set up Secure backup');
case PHASE_MIGRATE:
return _t('Upgrade your encryption');
case PHASE_PASSPHRASE:
- return _t('Set up encryption');
+ return _t('Set a Security Phrase');
case PHASE_PASSPHRASE_CONFIRM:
- return _t('Confirm recovery passphrase');
+ return _t('Confirm Security Phrase');
case PHASE_CONFIRM_SKIP:
return _t('Are you sure?');
case PHASE_SHOWKEY:
- case PHASE_KEEPITSAFE:
- return _t('Make a copy of your recovery key');
+ return _t('Save your Security Key');
case PHASE_STORING:
return _t('Setting up keys');
- case PHASE_DONE:
- return _t("You're done!");
default:
return '';
}
@@ -741,7 +735,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
let content;
if (this.state.error) {
- const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
content =
{_t("Unable to set up secret storage")}
@@ -760,6 +753,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
case PHASE_LOADERROR:
content = this._renderPhaseLoadError();
break;
+ case PHASE_CHOOSE_KEY_PASSPHRASE:
+ content = this._renderPhaseChooseKeyPassphrase();
+ break;
case PHASE_MIGRATE:
content = this._renderPhaseMigrate();
break;
@@ -772,31 +768,40 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
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();
- break;
case PHASE_CONFIRM_SKIP:
content = this._renderPhaseSkipConfirm();
break;
}
}
- let headerImage;
- if (this._titleForPhase(this.state.phase)) {
- headerImage = require("../../../../../res/img/e2e/normal.svg");
+ let titleClass = null;
+ switch (this.state.phase) {
+ case PHASE_PASSPHRASE:
+ case PHASE_PASSPHRASE_CONFIRM:
+ titleClass = [
+ 'mx_CreateSecretStorageDialog_titleWithIcon',
+ 'mx_CreateSecretStorageDialog_securePhraseTitle',
+ ];
+ break;
+ case PHASE_SHOWKEY:
+ titleClass = [
+ 'mx_CreateSecretStorageDialog_titleWithIcon',
+ 'mx_CreateSecretStorageDialog_secureBackupTitle',
+ ];
+ break;
+ case PHASE_CHOOSE_KEY_PASSPHRASE:
+ titleClass = 'mx_CreateSecretStorageDialog_centeredTitle';
+ break;
}
return (
diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx
index 0d8aac4218..f14fa3bbfa 100644
--- a/src/autocomplete/RoomProvider.tsx
+++ b/src/autocomplete/RoomProvider.tsx
@@ -25,9 +25,9 @@ import {MatrixClientPeg} from '../MatrixClientPeg';
import QueryMatcher from './QueryMatcher';
import {PillCompletion} from './Components';
import * as sdk from '../index';
-import _sortBy from 'lodash/sortBy';
import {makeRoomPermalink} from "../utils/permalinks/Permalinks";
import {ICompletion, ISelectionRange} from "./Autocompleter";
+import { uniqBy, sortBy } from 'lodash';
const ROOM_REGEX = /\B#\S*/g;
@@ -91,10 +91,11 @@ export default class RoomProvider extends AutocompleteProvider {
this.matcher.setObjects(matcherObjects);
const matchedString = command[0];
completions = this.matcher.match(matchedString);
- completions = _sortBy(completions, [
+ completions = sortBy(completions, [
(c) => score(matchedString, c.displayedAlias),
(c) => c.displayedAlias.length,
]);
+ completions = uniqBy(completions, (match) => match.room);
completions = completions.map((room) => {
return {
completion: room.displayedAlias,
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 79bdf743ce..02f08211b9 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -1932,11 +1932,12 @@ export default class MatrixChat extends React.PureComponent {
getFragmentAfterLogin() {
let fragmentAfterLogin = "";
- if (this.props.initialScreenAfterLogin &&
+ const initialScreenAfterLogin = this.props.initialScreenAfterLogin;
+ if (initialScreenAfterLogin &&
// XXX: workaround for https://github.com/vector-im/riot-web/issues/11643 causing a login-loop
- !["welcome", "login", "register"].includes(this.props.initialScreenAfterLogin.screen)
+ !["welcome", "login", "register", "start_sso", "start_cas"].includes(initialScreenAfterLogin.screen)
) {
- fragmentAfterLogin = `/${this.props.initialScreenAfterLogin.screen}`;
+ fragmentAfterLogin = `/${initialScreenAfterLogin.screen}`;
}
return fragmentAfterLogin;
}
diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index e59b6bbaf5..353298032c 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -75,8 +75,12 @@ export default createReactClass({
// If provided, this is used to add a aria-describedby attribute
contentId: PropTypes.string,
- // optional additional class for the title element
- titleClass: PropTypes.string,
+ // optional additional class for the title element (basically anything that can be passed to classnames)
+ titleClass: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.object,
+ PropTypes.arrayOf(PropTypes.string),
+ ]),
},
getDefaultProps: function() {
diff --git a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
index e2ceadfbb9..5c01a6907f 100644
--- a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
+++ b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
@@ -15,13 +15,24 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+import { debounce } from 'lodash';
+import classNames from 'classnames';
import React from 'react';
import PropTypes from "prop-types";
import * as sdk from '../../../../index';
import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import Field from '../../elements/Field';
+import AccessibleButton from '../../elements/AccessibleButton';
import { _t } from '../../../../languageHandler';
-import { accessSecretStorage } from '../../../../CrossSigningManager';
+
+// Maximum acceptable size of a key file. It's 59 characters including the spaces we encode,
+// so this should be plenty and allow for people putting extra whitespace in the file because
+// maybe that's a thing people would do?
+const KEY_FILE_MAX_SIZE = 128;
+
+// Don't shout at the user that their key is invalid every time they type a key: wait a short time
+const VALIDATION_THROTTLE_MS = 200;
/*
* Access Secure Secret Storage by requesting the user's passphrase.
@@ -36,9 +47,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
constructor(props) {
super(props);
+
+ this._fileUpload = React.createRef();
+
this.state = {
recoveryKey: "",
- recoveryKeyValid: false,
+ recoveryKeyValid: null,
+ recoveryKeyCorrect: null,
+ recoveryKeyFileError: null,
forceRecoveryKey: false,
passPhrase: '',
keyMatches: null,
@@ -55,18 +71,89 @@ 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);
+ _validateRecoveryKeyOnChange = debounce(() => {
+ this._validateRecoveryKey();
+ }, VALIDATION_THROTTLE_MS);
+
+ async _validateRecoveryKey() {
+ if (this.state.recoveryKey === '') {
+ this.setState({
+ recoveryKeyValid: null,
+ recoveryKeyCorrect: null,
+ });
+ return;
+ }
+
+ try {
+ const cli = MatrixClientPeg.get();
+ const decodedKey = cli.keyBackupKeyFromRecoveryKey(this.state.recoveryKey);
+ const correct = await cli.checkSecretStorageKey(
+ decodedKey, this.props.keyInfo,
+ );
+ this.setState({
+ recoveryKeyValid: true,
+ recoveryKeyCorrect: correct,
+ });
+ } catch (e) {
+ this.setState({
+ recoveryKeyValid: false,
+ recoveryKeyCorrect: false,
+ });
+ }
}
_onRecoveryKeyChange = (e) => {
this.setState({
recoveryKey: e.target.value,
- recoveryKeyValid: MatrixClientPeg.get().isValidRecoveryKey(e.target.value),
- keyMatches: null,
+ recoveryKeyFileError: null,
});
+
+ // also clear the file upload control so that the user can upload the same file
+ // the did before (otherwise the onchange wouldn't fire)
+ if (this._fileUpload.current) this._fileUpload.current.value = null;
+
+ // We don't use Field's validation here because a) we want it in a separate place rather
+ // than in a tooltip and b) we want it to display feedback based on the uploaded file
+ // as well as the text box. Ideally we would refactor Field's validation logic so we could
+ // re-use some of it.
+ this._validateRecoveryKeyOnChange();
+ }
+
+ _onRecoveryKeyFileChange = async e => {
+ if (e.target.files.length === 0) return;
+
+ const f = e.target.files[0];
+
+ if (f.size > KEY_FILE_MAX_SIZE) {
+ this.setState({
+ recoveryKeyFileError: true,
+ recoveryKeyCorrect: false,
+ recoveryKeyValid: false,
+ });
+ } else {
+ const contents = await f.text();
+ // test it's within the base58 alphabet. We could be more strict here, eg. require the
+ // right number of characters, but it's really just to make sure that what we're reading is
+ // text because we'll put it in the text field.
+ if (/^[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz\s]+$/.test(contents)) {
+ this.setState({
+ recoveryKeyFileError: null,
+ recoveryKey: contents.trim(),
+ });
+ this._validateRecoveryKey();
+ } else {
+ this.setState({
+ recoveryKeyFileError: true,
+ recoveryKeyCorrect: false,
+ recoveryKeyValid: false,
+ recoveryKey: '',
+ });
+ }
+ }
+ }
+
+ _onRecoveryKeyFileUploadClick = () => {
+ this._fileUpload.current.click();
}
_onPassPhraseNext = async (e) => {
@@ -106,6 +193,20 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
});
}
+ getKeyValidationText() {
+ if (this.state.recoveryKeyFileError) {
+ return _t("Wrong file type");
+ } else if (this.state.recoveryKeyCorrect) {
+ return _t("Looks good!");
+ } else if (this.state.recoveryKeyValid) {
+ return _t("Wrong Recovery Key");
+ } else if (this.state.recoveryKeyValid === null) {
+ return '';
+ } else {
+ return _t("Invalid Recovery Key");
+ }
+ }
+
render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
@@ -118,10 +219,12 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
let content;
let title;
+ let titleClass;
if (hasPassphrase && !this.state.forceRecoveryKey) {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- title = _t("Enter recovery passphrase");
+ title = _t("Security Phrase");
+ titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle'];
let keyStatus;
if (this.state.keyMatches === false) {
@@ -137,12 +240,15 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
content =
{_t(
- "Warning: You should only do this on a trusted computer.", {},
- { b: sub => {sub} },
- )}
-
{_t(
- "Access your secure message history and your cross-signing " +
- "identity for verifying other sessions by entering your recovery passphrase.",
+ "Enter your Security Phrase or to continue.", {},
+ {
+ button: s =>
+ {s}
+ ,
+ },
)}
- {_t(
- "If you've forgotten your recovery passphrase you can "+
- "
use your recovery key or " +
- "
set up new recovery options."
- , {}, {
- button1: s =>
- {s}
- ,
- button2: s =>
- {s}
- ,
- })}
;
} else {
- title = _t("Enter recovery key");
+ title = _t("Security Key");
+ titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_secureBackupTitle'];
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- let keyStatus;
- if (this.state.recoveryKey.length === 0) {
- keyStatus = ;
- } else if (this.state.keyMatches === false) {
- keyStatus =
- {"\uD83D\uDC4E "}{_t(
- "Unable to access secret storage. " +
- "Please verify that you entered the correct recovery key.",
- )}
-
;
- } else if (this.state.recoveryKeyValid) {
- keyStatus =
- {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
-
;
- } else {
- keyStatus =
- {"\uD83D\uDC4E "}{_t("Not a valid recovery key")}
-
;
- }
+ const feedbackClasses = classNames({
+ 'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true,
+ 'mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid': this.state.recoveryKeyCorrect === true,
+ 'mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid': this.state.recoveryKeyCorrect === false,
+ });
+ const recoveryKeyFeedback =
+ {this.getKeyValidationText()}
+
;
content =
-
{_t(
- "Warning: You should only do this on a trusted computer.", {},
- { b: sub => {sub} },
- )}
-
{_t(
- "Access your secure message history and your cross-signing " +
- "identity for verifying other sessions by entering your recovery key.",
- )}
+
{_t("Use your Security Key to continue.")}
-
- {_t(
- "If you've forgotten your recovery key you can "+
- "
."
- , {}, {
- button: s =>
- {s}
- ,
- })}
{content}
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 834edff7df..9a889a0351 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -50,7 +50,7 @@ interface IProps {
// to the user.
onValidate?: (input: IFieldState) => Promise
;
// If specified, overrides the value returned by onValidate.
- flagInvalid?: boolean;
+ forceValidity?: boolean;
// If specified, contents will appear as a tooltip on the element and
// validation feedback tooltips will be suppressed.
tooltipContent?: React.ReactNode;
@@ -203,7 +203,7 @@ export default class Field extends React.PureComponent {
public render() {
const {
element, prefixComponent, postfixComponent, className, onValidate, children,
- tooltipContent, flagInvalid, tooltipClassName, list, ...inputProps} = this.props;
+ tooltipContent, forceValidity, tooltipClassName, list, ...inputProps} = this.props;
// Set some defaults for the element
const ref = input => this.input = input;
@@ -228,15 +228,15 @@ export default class Field extends React.PureComponent {
postfixContainer = {postfixComponent};
}
- const hasValidationFlag = flagInvalid !== null && flagInvalid !== undefined;
+ const hasValidationFlag = forceValidity !== null && forceValidity !== undefined;
const fieldClasses = classNames("mx_Field", `mx_Field_${this.props.element}`, className, {
// If we have a prefix element, leave the label always at the top left and
// don't animate it, as it looks a bit clunky and would add complexity to do
// properly.
mx_Field_labelAlwaysTopLeft: prefixComponent,
- mx_Field_valid: onValidate && this.state.valid === true,
+ mx_Field_valid: hasValidationFlag ? forceValidity : onValidate && this.state.valid === true,
mx_Field_invalid: hasValidationFlag
- ? flagInvalid
+ ? !forceValidity
: onValidate && this.state.valid === false,
});
diff --git a/src/components/views/elements/ProgressBar.js b/src/components/views/elements/ProgressBar.js
deleted file mode 100644
index 045731ba38..0000000000
--- a/src/components/views/elements/ProgressBar.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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 PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-
-export default createReactClass({
- displayName: 'ProgressBar',
- propTypes: {
- value: PropTypes.number,
- max: PropTypes.number,
- },
-
- render: function() {
- // Would use an HTML5 progress tag but if that doesn't animate if you
- // use the HTML attributes rather than styles
- const progressStyle = {
- width: ((this.props.value / this.props.max) * 100)+"%",
- };
- return (
-
- );
- },
-});
diff --git a/src/components/views/elements/ProgressBar.tsx b/src/components/views/elements/ProgressBar.tsx
new file mode 100644
index 0000000000..90832e5006
--- /dev/null
+++ b/src/components/views/elements/ProgressBar.tsx
@@ -0,0 +1,28 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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";
+
+interface IProps {
+ value: number;
+ max: number;
+}
+
+const ProgressBar: React.FC = ({value, max}) => {
+ return ;
+};
+
+export default ProgressBar;
diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx
index d7ae4d5af8..3b83666048 100644
--- a/src/components/views/elements/StyledRadioButton.tsx
+++ b/src/components/views/elements/StyledRadioButton.tsx
@@ -42,7 +42,7 @@ export default class StyledRadioButton extends React.PureComponent
{/* Used to render the radio button circle */}
- {children}
+ {children}
;
}
diff --git a/src/components/views/elements/StyledRadioGroup.tsx b/src/components/views/elements/StyledRadioGroup.tsx
index 050a8b7adb..ded1342462 100644
--- a/src/components/views/elements/StyledRadioGroup.tsx
+++ b/src/components/views/elements/StyledRadioGroup.tsx
@@ -41,9 +41,8 @@ function StyledRadioGroup({name, definitions, value, className
};
return
- {definitions.map(d =>
+ {definitions.map(d =>
= ({description, acceptLabel, dismissLabel, onAccept, onDismiss, toastKey, numSeconds}) => {
+ const onReject = () => {
+ if (onDismiss) onDismiss();
+ ToastStore.sharedInstance().dismissToast(toastKey);
+ };
+ const counter = useExpiringCounter(onReject, SECOND, numSeconds);
+
+ let rejectLabel = dismissLabel;
+ if (counter > 0) {
+ rejectLabel += ` (${counter})`;
+ }
+
+ return ;
+};
+
+export default GenericExpiringToast;
diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
index ea12641948..9f8885ba47 100644
--- a/src/components/views/toasts/GenericToast.tsx
+++ b/src/components/views/toasts/GenericToast.tsx
@@ -19,7 +19,7 @@ import React, {ReactChild} from "react";
import FormButton from "../elements/FormButton";
import {XOR} from "../../../@types/common";
-interface IProps {
+export interface IProps {
description: ReactChild;
acceptLabel: string;
diff --git a/src/hooks/useTimeout.ts b/src/hooks/useTimeout.ts
new file mode 100644
index 0000000000..911b7bc75d
--- /dev/null
+++ b/src/hooks/useTimeout.ts
@@ -0,0 +1,67 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 {useEffect, useRef, useState} from "react";
+
+type Handler = () => void;
+
+// Hook to simplify timeouts in functional components
+export const useTimeout = (handler: Handler, timeoutMs: number) => {
+ // Create a ref that stores handler
+ const savedHandler = useRef();
+
+ // Update ref.current value if handler changes.
+ useEffect(() => {
+ savedHandler.current = handler;
+ }, [handler]);
+
+ // Set up timer
+ useEffect(() => {
+ const timeoutID = setTimeout(() => {
+ savedHandler.current();
+ }, timeoutMs);
+ return () => clearTimeout(timeoutID);
+ }, [timeoutMs]);
+};
+
+// Hook to simplify intervals in functional components
+export const useInterval = (handler: Handler, intervalMs: number) => {
+ // Create a ref that stores handler
+ const savedHandler = useRef();
+
+ // Update ref.current value if handler changes.
+ useEffect(() => {
+ savedHandler.current = handler;
+ }, [handler]);
+
+ // Set up timer
+ useEffect(() => {
+ const intervalID = setInterval(() => {
+ savedHandler.current();
+ }, intervalMs);
+ return () => clearInterval(intervalID);
+ }, [intervalMs]);
+};
+
+// Hook to simplify a variable counting down to 0, handler called when it reached 0
+export const useExpiringCounter = (handler: Handler, intervalMs: number, initialCount: number) => {
+ const [count, setCount] = useState(initialCount);
+ useInterval(() => setCount(c => c - 1), intervalMs);
+ if (count === 0) {
+ handler();
+ }
+ return count;
+};
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 0ef675c7c8..e056576cb1 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1842,17 +1842,16 @@
"Remember my selection for this widget": "Remember my selection for this widget",
"Allow": "Allow",
"Deny": "Deny",
- "Enter recovery passphrase": "Enter recovery passphrase",
+ "Wrong file type": "Wrong file type",
+ "Looks good!": "Looks good!",
+ "Wrong Recovery Key": "Wrong Recovery Key",
+ "Invalid Recovery Key": "Invalid Recovery Key",
+ "Security Phrase": "Security Phrase",
"Unable to access secret storage. Please verify that you entered the correct recovery passphrase.": "Unable to access secret storage. Please verify that you entered the correct recovery passphrase.",
- "Warning: You should only do this on a trusted computer.": "Warning: You should only do this on a trusted computer.",
- "Access your secure message history and your cross-signing identity for verifying other sessions by entering your recovery passphrase.": "Access your secure message history and your cross-signing identity for verifying other sessions by entering your recovery passphrase.",
- "If you've forgotten your recovery passphrase you can use your recovery key or set up new recovery options.": "If you've forgotten your recovery passphrase you can use your recovery key or set up new recovery options.",
- "Enter recovery key": "Enter recovery key",
- "Unable to access secret storage. Please verify that you entered the correct recovery key.": "Unable to access secret storage. Please verify that you entered the correct 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",
- "Access your secure message history and your cross-signing identity for verifying other sessions by entering your recovery key.": "Access your secure message history and your cross-signing identity for verifying other sessions by entering your recovery key.",
- "If you've forgotten your recovery key you can .": "If you've forgotten your recovery key you can .",
+ "Enter your Security Phrase or to continue.": "Enter your Security Phrase or to continue.",
+ "Security Key": "Security Key",
+ "Use your Security Key to continue.": "Use your Security Key to continue.",
+ "Go Back": "Go Back",
"Restoring keys from backup": "Restoring keys from backup",
"Fetching keys from server...": "Fetching keys from server...",
"%(completed)s of %(total)s keys restored": "%(completed)s of %(total)s keys restored",
@@ -1866,9 +1865,13 @@
"Keys restored": "Keys restored",
"Failed to decrypt %(failedCount)s sessions!": "Failed to decrypt %(failedCount)s sessions!",
"Successfully restored %(sessionCount)s keys": "Successfully restored %(sessionCount)s keys",
+ "Enter recovery passphrase": "Enter recovery passphrase",
"Warning: you should only set up key backup from a trusted computer.": "Warning: you should only set up key backup from a trusted computer.",
"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 use your recovery key or set up new recovery options": "If you've forgotten your recovery passphrase you can use your recovery key or set up new recovery options",
+ "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",
"Warning: You should only set up key backup from a trusted computer.": "Warning: You should only set up key backup from a trusted computer.",
"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 key you can ": "If you've forgotten your recovery key you can ",
@@ -2191,7 +2194,6 @@
"Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.": "Your new session is now verified. It has access to your encrypted messages, and other users will see it as trusted.",
"Your new session is now verified. Other users will see it as trusted.": "Your new session is now verified. Other users will see it as trusted.",
"Without completing security on this session, it won’t have access to encrypted messages.": "Without completing security on this session, it won’t have access to encrypted messages.",
- "Go Back": "Go Back",
"Failed to re-authenticate due to a homeserver problem": "Failed to re-authenticate due to a homeserver problem",
"Incorrect password": "Incorrect password",
"Failed to re-authenticate": "Failed to re-authenticate",
@@ -2230,48 +2232,56 @@
"Import": "Import",
"Confirm encryption setup": "Confirm encryption setup",
"Click the button below to confirm setting up encryption.": "Click the button below to confirm setting up encryption.",
+ "Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.": "Safeguard against losing access to encrypted messages & data by backing up encryption keys on your server.",
+ "Generate a Security Key": "Generate a Security Key",
+ "We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.": "We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.",
+ "Enter a Security Phrase": "Enter a Security Phrase",
+ "Use a secret phrase only you know, and optionally save a Security Key to use for backup.": "Use a secret phrase only you know, and optionally save a Security Key to use for backup.",
"Enter your account password to confirm the upgrade:": "Enter your account password to confirm the upgrade:",
"Restore your key backup to upgrade your encryption": "Restore your key backup to upgrade your encryption",
"Restore": "Restore",
"You'll need to authenticate with the server to confirm the upgrade.": "You'll need to authenticate with the server to confirm the upgrade.",
"Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.": "Upgrade this session to allow it to verify other sessions, granting them access to encrypted messages and marking them as trusted for other users.",
- "Set a recovery passphrase to secure encrypted information and recover it if you log out. This should be different to your account password:": "Set a recovery passphrase to secure encrypted information and recover it if you log out. This should be different to your account password:",
+ "Enter a security phrase only you know, as it’s used to safeguard your data. To be secure, you shouldn’t re-use your account password.": "Enter a security phrase only you know, as it’s used to safeguard your data. To be secure, you shouldn’t re-use your account password.",
"Enter a recovery passphrase": "Enter a recovery passphrase",
"Great! This recovery passphrase looks strong enough.": "Great! This recovery passphrase looks strong enough.",
- "Back up encrypted message keys": "Back up encrypted message keys",
- "Set up with a recovery key": "Set up with a recovery key",
"That matches!": "That matches!",
"Use a different passphrase?": "Use a different passphrase?",
"That doesn't match.": "That doesn't match.",
"Go back to set it again.": "Go back to set it again.",
"Enter your recovery passphrase a second time to confirm it.": "Enter your recovery passphrase a second time to confirm it.",
"Confirm your recovery passphrase": "Confirm your recovery passphrase",
+ "Store your Security Key somewhere safe, like a password manager or a safe, as it’s used to safeguard your encrypted data.": "Store your Security Key somewhere safe, like a password manager or a safe, as it’s used to safeguard your encrypted data.",
+ "Download": "Download",
+ "Copy": "Copy",
+ "Unable to query secret storage status": "Unable to query secret storage status",
+ "Retry": "Retry",
+ "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.": "If you cancel now, you may lose encrypted messages & data if you lose access to your logins.",
+ "You can also set up Secure Backup & manage your keys in Settings.": "You can also set up Secure Backup & manage your keys in Settings.",
+ "Set up Secure backup": "Set up Secure backup",
+ "Upgrade your encryption": "Upgrade your encryption",
+ "Set a Security Phrase": "Set a Security Phrase",
+ "Confirm Security Phrase": "Confirm Security Phrase",
+ "Save your Security Key": "Save your Security Key",
+ "Unable to set up secret storage": "Unable to set up secret storage",
+ "We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.",
+ "For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
+ "Set up with a recovery key": "Set up with a recovery key",
+ "Please enter your recovery passphrase a second time to confirm.": "Please enter your recovery passphrase a second time to confirm.",
+ "Repeat your recovery passphrase...": "Repeat your recovery passphrase...",
"Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your recovery passphrase.": "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your recovery passphrase.",
"Keep a copy of it somewhere secure, like a password manager or even a safe.": "Keep a copy of it somewhere secure, like a password manager or even a safe.",
"Your recovery key": "Your recovery key",
- "Copy": "Copy",
- "Download": "Download",
"Your recovery key has been copied to your clipboard, paste it to:": "Your recovery key has been copied to your clipboard, paste it to:",
"Your recovery key is in your Downloads folder.": "Your recovery key is in your Downloads folder.",
"Print it and store it somewhere safe": "Print it and store it somewhere safe",
"Save it on a USB key or backup drive": "Save it on a USB key or backup drive",
"Copy it to your personal cloud storage": "Copy it to your personal cloud storage",
- "Unable to query secret storage status": "Unable to query secret storage status",
- "Retry": "Retry",
- "You can now verify your other devices, and other users to keep your chats safe.": "You can now verify your other devices, and other users to keep your chats safe.",
- "Upgrade your encryption": "Upgrade your encryption",
- "Confirm recovery passphrase": "Confirm recovery passphrase",
- "Make a copy of your recovery key": "Make a copy of your recovery key",
- "You're done!": "You're done!",
- "Unable to set up secret storage": "Unable to set up secret storage",
- "We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.": "We'll store an encrypted copy of your keys on our server. Secure your backup with a recovery passphrase.",
- "For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.",
- "Please enter your recovery passphrase a second time to confirm.": "Please enter your recovery passphrase a second time to confirm.",
- "Repeat your recovery passphrase...": "Repeat your recovery passphrase...",
"Your keys are being backed up (the first backup could take a few minutes).": "Your keys are being backed up (the first backup could take a few minutes).",
"Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another session.",
"Set up Secure Message Recovery": "Set up Secure Message Recovery",
"Secure your backup with a recovery passphrase": "Secure your backup with a recovery passphrase",
+ "Make a copy of your recovery key": "Make a copy of your recovery key",
"Starting backup...": "Starting backup...",
"Success!": "Success!",
"Create key backup": "Create key backup",
diff --git a/src/stores/ToastStore.ts b/src/stores/ToastStore.ts
index 55c48c3937..7063ba541a 100644
--- a/src/stores/ToastStore.ts
+++ b/src/stores/ToastStore.ts
@@ -24,7 +24,7 @@ export interface IToast;
+ props?: Omit, "toastKey">; // toastKey is injected by ToastContainer
}
/**
diff --git a/test/components/views/dialogs/AccessSecretStorageDialog-test.js b/test/components/views/dialogs/AccessSecretStorageDialog-test.js
index c754a4b607..5a8dcbf763 100644
--- a/test/components/views/dialogs/AccessSecretStorageDialog-test.js
+++ b/test/components/views/dialogs/AccessSecretStorageDialog-test.js
@@ -40,19 +40,20 @@ describe("AccessSecretStorageDialog", function() {
testInstance.getInstance()._onRecoveryKeyNext(e);
});
- it("Considers a valid key to be valid", function() {
+ it("Considers a valid key to be valid", async function() {
const testInstance = TestRenderer.create(
true}
/>,
);
- const v = "asfd";
+ const v = "asdf";
const e = { target: { value: v } };
stubClient();
- MatrixClientPeg.get().isValidRecoveryKey = function(k) {
- return k == v;
- };
+ MatrixClientPeg.get().keyBackupKeyFromRecoveryKey = () => 'a raw key';
+ MatrixClientPeg.get().checkSecretStorageKey = () => true;
testInstance.getInstance()._onRecoveryKeyChange(e);
+ // force a validation now because it debounces
+ await testInstance.getInstance()._validateRecoveryKey();
const { recoveryKeyValid } = testInstance.getInstance().state;
expect(recoveryKeyValid).toBe(true);
});
@@ -65,17 +66,21 @@ describe("AccessSecretStorageDialog", function() {
);
const e = { target: { value: "a" } };
stubClient();
- MatrixClientPeg.get().isValidRecoveryKey = () => true;
+ MatrixClientPeg.get().keyBackupKeyFromRecoveryKey = () => {
+ throw new Error("that's no key");
+ };
testInstance.getInstance()._onRecoveryKeyChange(e);
- await testInstance.getInstance()._onRecoveryKeyNext({ preventDefault: () => {} });
- const { keyMatches } = testInstance.getInstance().state;
- expect(keyMatches).toBe(false);
+ // force a validation now because it debounces
+ await testInstance.getInstance()._validateRecoveryKey();
+
+ const { recoveryKeyValid, recoveryKeyCorrect } = testInstance.getInstance().state;
+ expect(recoveryKeyValid).toBe(false);
+ expect(recoveryKeyCorrect).toBe(false);
const notification = testInstance.root.findByProps({
- className: "mx_AccessSecretStorageDialog_keyStatus",
+ className: "mx_AccessSecretStorageDialog_recoveryKeyFeedback " +
+ "mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid",
});
- expect(notification.props.children).toEqual(
- ["\uD83D\uDC4E ", "Unable to access secret storage. Please verify that you " +
- "entered the correct recovery key."]);
+ expect(notification.props.children).toEqual("Invalid Recovery Key");
done();
});
diff --git a/test/end-to-end-tests/src/usecases/signup.js b/test/end-to-end-tests/src/usecases/signup.js
index aa9f6b7efa..fd41ef1a71 100644
--- a/test/end-to-end-tests/src/usecases/signup.js
+++ b/test/end-to-end-tests/src/usecases/signup.js
@@ -79,20 +79,8 @@ module.exports = async function signup(session, username, password, homeserver)
const acceptButton = await session.query('.mx_InteractiveAuthEntryComponents_termsSubmit');
await acceptButton.click();
- //plow through cross-signing setup by entering arbitrary details
- //TODO: It's probably important for the tests to know the passphrase
- const xsigningPassphrase = 'a7eaXcjpa9!Yl7#V^h$B^%dovHUVX'; // https://xkcd.com/221/
- let passphraseField = await session.query('.mx_CreateSecretStorageDialog_passPhraseField input');
- await session.replaceInputText(passphraseField, xsigningPassphrase);
- await session.delay(1000); // give it a second to analyze our passphrase for security
- let xsignContButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_buttons .mx_Dialog_primary');
- await xsignContButton.click();
-
- //repeat passphrase entry
- passphraseField = await session.query('.mx_CreateSecretStorageDialog_passPhraseField input');
- await session.replaceInputText(passphraseField, xsigningPassphrase);
- await session.delay(1000); // give it a second to analyze our passphrase for security
- xsignContButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_buttons .mx_Dialog_primary');
+ // Continue with the default (generate a security key)
+ const xsignContButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_buttons .mx_Dialog_primary');
await xsignContButton.click();
//ignore the recovery key
@@ -101,13 +89,11 @@ module.exports = async function signup(session, username, password, homeserver)
await copyButton.click();
//acknowledge that we copied the recovery key to a safe place
- const copyContinueButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_primary');
+ const copyContinueButton = await session.query(
+ '.mx_CreateSecretStorageDialog .mx_Dialog_buttons .mx_Dialog_primary',
+ );
await copyContinueButton.click();
- //acknowledge that we're done cross-signing setup and our keys are safe
- const doneOkButton = await session.query('.mx_CreateSecretStorageDialog .mx_Dialog_primary');
- await doneOkButton.click();
-
//wait for registration to finish so the hash gets set
//onhashchange better?