@@ -369,12 +369,12 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
let introText;
if (this.state.copied) {
introText = _t(
- "Your recovery key has been copied to your clipboard, paste it to:",
+ "Your Security Key has been copied to your clipboard, paste it to:",
{}, {b: s => {s}},
);
} else if (this.state.downloaded) {
introText = _t(
- "Your recovery key is in your Downloads folder.",
+ "Your Security Key is in your Downloads folder.",
{}, {b: s => {s}},
);
}
@@ -433,14 +433,14 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
_titleForPhase(phase) {
switch (phase) {
case PHASE_PASSPHRASE:
- return _t('Secure your backup with a recovery passphrase');
+ return _t('Secure your backup with a Security Phrase');
case PHASE_PASSPHRASE_CONFIRM:
- return _t('Confirm your recovery passphrase');
+ return _t('Confirm your Security Phrase');
case PHASE_OPTOUT_CONFIRM:
return _t('Warning!');
case PHASE_SHOWKEY:
case PHASE_KEEPITSAFE:
- return _t('Make a copy of your recovery key');
+ return _t('Make a copy of your Security Key');
case PHASE_BACKINGUP:
return _t('Starting backup...');
case PHASE_DONE:
diff --git a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
index b1a14062f4..84cb58536a 100644
--- a/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/security/CreateSecretStorageDialog.js
@@ -235,7 +235,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
const blob = new Blob([this._recoveryKey.encodedPrivateKey], {
type: 'text/plain;charset=us-ascii',
});
- FileSaver.saveAs(blob, 'recovery-key.txt');
+ FileSaver.saveAs(blob, 'security-key.txt');
this.setState({
downloaded: true,
@@ -593,10 +593,10 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
onValidate={this._onPassPhraseValidate}
fieldRef={this._passphraseField}
autoFocus={true}
- label={_td("Enter a recovery passphrase")}
- labelEnterPassword={_td("Enter a recovery passphrase")}
- labelStrongPassword={_td("Great! This recovery passphrase looks strong enough.")}
- labelAllowedButUnsafe={_td("Great! This recovery passphrase looks strong enough.")}
+ label={_td("Enter a Security Phrase")}
+ labelEnterPassword={_td("Enter a Security Phrase")}
+ labelStrongPassword={_td("Great! This Security Phrase looks strong enough.")}
+ labelAllowedButUnsafe={_td("Great! This Security Phrase looks strong enough.")}
/>
diff --git a/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.js b/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.js
index 9f5045635d..8c09cc6d16 100644
--- a/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.js
+++ b/src/async-components/views/dialogs/security/NewRecoveryMethodDialog.js
@@ -58,7 +58,7 @@ export default class NewRecoveryMethodDialog extends React.PureComponent {
;
const newMethodDetected =
{_t(
- "A new recovery passphrase and key for Secure Messages have been detected.",
+ "A new Security Phrase and key for Secure Messages have been detected.",
)}
{_t(
diff --git a/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.js b/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.js
index cda353e717..b60e6fd3cb 100644
--- a/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.js
+++ b/src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.js
@@ -56,7 +56,7 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent {
>
{_t(
- "This session has detected that your recovery passphrase and key " +
+ "This session has detected that your Security Phrase and key " +
"for Secure Messages have been removed.",
)}
{_t(
diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 4836b0f554..0e4df4621d 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -45,7 +45,7 @@ class FilePanel extends React.Component {
};
onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
- if (room.roomId !== this.props.roomId) return;
+ if (room?.roomId !== this.props?.roomId) return;
if (toStartOfTimeline || !data || !data.liveEvent || ev.isRedacted()) return;
if (ev.isBeingDecrypted()) {
diff --git a/src/components/structures/InteractiveAuth.js b/src/components/structures/InteractiveAuth.js
index c8fcd7e9ca..ac7049ed88 100644
--- a/src/components/structures/InteractiveAuth.js
+++ b/src/components/structures/InteractiveAuth.js
@@ -177,7 +177,14 @@ export default class InteractiveAuthComponent extends React.Component {
stageState: stageState,
errorText: stageState.error,
}, () => {
- if (oldStage != stageType) this._setFocus();
+ if (oldStage !== stageType) {
+ this._setFocus();
+ } else if (
+ !stageState.error && this._stageComponent.current &&
+ this._stageComponent.current.attemptFailed
+ ) {
+ this._stageComponent.current.attemptFailed();
+ }
});
};
diff --git a/src/components/structures/LeftPanelWidget.tsx b/src/components/structures/LeftPanelWidget.tsx
index 4daec76d08..e88af282ba 100644
--- a/src/components/structures/LeftPanelWidget.tsx
+++ b/src/components/structures/LeftPanelWidget.tsx
@@ -56,7 +56,7 @@ const LeftPanelWidget: React.FC = ({ onResize }) => {
const [height, setHeight] = useLocalStorageState("left-panel-widget-height", INITIAL_HEIGHT);
const [expanded, setExpanded] = useLocalStorageState("left-panel-widget-expanded", true);
- useEffect(onResize, [expanded]);
+ useEffect(onResize, [expanded, onResize]);
const [onFocus, isActive, ref] = useRovingTabIndex();
const tabIndex = isActive ? 0 : -1;
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index 93ebb5b175..c76cd7cee7 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -216,10 +216,12 @@ class LoggedInView extends React.Component {
_createResizer() {
let size;
+ let collapsed;
const collapseConfig: ICollapseConfig = {
toggleSize: 260 - 50,
- onCollapsed: (collapsed) => {
- if (collapsed) {
+ onCollapsed: (_collapsed) => {
+ collapsed = _collapsed;
+ if (_collapsed) {
dis.dispatch({action: "hide_left_panel"}, true);
window.localStorage.setItem("mx_lhs_size", '0');
} else {
@@ -234,7 +236,7 @@ class LoggedInView extends React.Component {
this.props.resizeNotifier.startResizing();
},
onResizeStop: () => {
- window.localStorage.setItem("mx_lhs_size", '' + size);
+ if (!collapsed) window.localStorage.setItem("mx_lhs_size", '' + size);
this.props.resizeNotifier.stopResizing();
},
};
@@ -426,6 +428,14 @@ class LoggedInView extends React.Component {
handled = true;
}
break;
+ case Key.F:
+ if (ctrlCmdOnly && SettingsStore.getValue("ctrlFForSearch")) {
+ dis.dispatch({
+ action: 'focus_search',
+ });
+ handled = true;
+ }
+ break;
case Key.BACKTICK:
// Ideally this would be CTRL+P for "Profile", but that's
// taken by the print dialog. CTRL+I for "Information"
diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx
index 62c729c422..8ed4b6cd11 100644
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@@ -81,6 +81,7 @@ import ThreepidInviteStore, { IThreepidInvite, IThreepidInviteWireFormat } from
import {UIFeature} from "../../settings/UIFeature";
import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
import DialPadModal from "../views/voip/DialPadModal";
+import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast';
/** constants for MatrixChat.state.view */
export enum Views {
@@ -218,6 +219,7 @@ export default class MatrixChat extends React.PureComponent {
private screenAfterLogin?: IScreen;
private windowWidth: number;
private pageChanging: boolean;
+ private tokenLogin?: boolean;
private accountPassword?: string;
private accountPasswordTimer?: NodeJS.Timeout;
private focusComposer: boolean;
@@ -323,13 +325,21 @@ export default class MatrixChat extends React.PureComponent {
Lifecycle.attemptTokenLogin(
this.props.realQueryParams,
this.props.defaultDeviceDisplayName,
- ).then((loggedIn) => {
- if (loggedIn) {
+ this.getFragmentAfterLogin(),
+ ).then(async (loggedIn) => {
+ if (this.props.realQueryParams?.loginToken) {
+ // remove the loginToken from the URL regardless
this.props.onTokenLoginCompleted();
+ }
- // don't do anything else until the page reloads - just stay in
- // the 'loading' state.
- return;
+ if (loggedIn) {
+ this.tokenLogin = true;
+
+ // Create and start the client
+ await Lifecycle.restoreFromLocalStorage({
+ ignoreGuest: true,
+ });
+ return this.postLoginSetup();
}
// if the user has followed a login or register link, don't reanimate
@@ -353,6 +363,42 @@ export default class MatrixChat extends React.PureComponent {
CountlyAnalytics.instance.enable(/* anonymous = */ true);
}
+ private async postLoginSetup() {
+ const cli = MatrixClientPeg.get();
+ const cryptoEnabled = cli.isCryptoEnabled();
+ if (!cryptoEnabled) {
+ this.onLoggedIn();
+ }
+
+ const promisesList = [this.firstSyncPromise.promise];
+ if (cryptoEnabled) {
+ // wait for the client to finish downloading cross-signing keys for us so we
+ // know whether or not we have keys set up on this account
+ promisesList.push(cli.downloadKeys([cli.getUserId()]));
+ }
+
+ // Now update the state to say we're waiting for the first sync to complete rather
+ // than for the login to finish.
+ this.setState({ pendingInitialSync: true });
+
+ await Promise.all(promisesList);
+
+ if (!cryptoEnabled) {
+ this.setState({ pendingInitialSync: false });
+ return;
+ }
+
+ const crossSigningIsSetUp = cli.getStoredCrossSigningForUser(cli.getUserId());
+ if (crossSigningIsSetUp) {
+ this.setStateForNewView({ view: Views.COMPLETE_SECURITY });
+ } else if (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) {
+ this.setStateForNewView({ view: Views.E2E_SETUP });
+ } else {
+ this.onLoggedIn();
+ }
+ this.setState({ pendingInitialSync: false });
+ }
+
// TODO: [REACT-WARNING] Replace with appropriate lifecycle stage
// eslint-disable-next-line camelcase
UNSAFE_componentWillUpdate(props, state) {
@@ -1186,6 +1232,11 @@ export default class MatrixChat extends React.PureComponent {
) {
showAnalyticsToast(this.props.config.piwik?.policyUrl);
}
+ if (SdkConfig.get().mobileGuideToast) {
+ // The toast contains further logic to detect mobile platforms,
+ // check if it has been dismissed before, etc.
+ showMobileGuideToast();
+ }
}
private showScreenAfterLogin() {
@@ -1833,40 +1884,7 @@ export default class MatrixChat extends React.PureComponent {
// Create and start the client
await Lifecycle.setLoggedIn(credentials);
-
- const cli = MatrixClientPeg.get();
- const cryptoEnabled = cli.isCryptoEnabled();
- if (!cryptoEnabled) {
- this.onLoggedIn();
- }
-
- const promisesList = [this.firstSyncPromise.promise];
- if (cryptoEnabled) {
- // wait for the client to finish downloading cross-signing keys for us so we
- // know whether or not we have keys set up on this account
- promisesList.push(cli.downloadKeys([cli.getUserId()]));
- }
-
- // Now update the state to say we're waiting for the first sync to complete rather
- // than for the login to finish.
- this.setState({ pendingInitialSync: true });
-
- await Promise.all(promisesList);
-
- if (!cryptoEnabled) {
- this.setState({ pendingInitialSync: false });
- return;
- }
-
- const crossSigningIsSetUp = cli.getStoredCrossSigningForUser(cli.getUserId());
- if (crossSigningIsSetUp) {
- this.setStateForNewView({ view: Views.COMPLETE_SECURITY });
- } else if (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) {
- this.setStateForNewView({ view: Views.E2E_SETUP });
- } else {
- this.onLoggedIn();
- }
- this.setState({ pendingInitialSync: false });
+ await this.postLoginSetup();
};
// complete security / e2e setup has finished
@@ -1910,6 +1928,7 @@ export default class MatrixChat extends React.PureComponent {
);
} else if (this.state.view === Views.LOGGED_IN) {
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 375545f819..b8dae41ef8 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -23,6 +23,7 @@ import classNames from 'classnames';
import shouldHideEvent from '../../shouldHideEvent';
import {wantsDateSeparator} from '../../DateUtils';
import * as sdk from '../../index';
+import dis from "../../dispatcher/dispatcher";
import {MatrixClientPeg} from '../../MatrixClientPeg';
import SettingsStore from '../../settings/SettingsStore';
@@ -207,11 +208,13 @@ export default class MessagePanel extends React.Component {
componentDidMount() {
this._isMounted = true;
+ this.dispatcherRef = dis.register(this.onAction);
}
componentWillUnmount() {
this._isMounted = false;
SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
+ dis.unregister(this.dispatcherRef);
}
componentDidUpdate(prevProps, prevState) {
@@ -224,6 +227,14 @@ export default class MessagePanel extends React.Component {
}
}
+ onAction = (payload) => {
+ switch (payload.action) {
+ case "message_sent":
+ this.scrollToBottom();
+ break;
+ }
+ }
+
onShowTypingNotificationsChange = () => {
this.setState({
showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js
index e3323b05fa..9ddacaf829 100644
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -487,7 +487,11 @@ export default class RoomDirectory extends React.Component {
let previewButton;
let joinOrViewButton;
- if (room.world_readable && !hasJoinedRoom) {
+ // Element Web currently does not allow guests to join rooms, so we
+ // instead show them preview buttons for all rooms. If the room is not
+ // world readable, a modal will appear asking you to register first. If
+ // it is readable, the preview appears as normal.
+ if (!hasJoinedRoom && (room.world_readable || isGuest)) {
previewButton = (
this.onPreviewClick(ev, room)}>{_t("Preview")}
);
@@ -496,7 +500,7 @@ export default class RoomDirectory extends React.Component {
joinOrViewButton = (
this.onViewClick(ev, room)}>{_t("View")}
);
- } else if (!isGuest || room.guest_can_join) {
+ } else if (!isGuest) {
joinOrViewButton = (
this.onJoinClick(ev, room)}>{_t("Join")}
);
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 0ee847fbc9..7b72b7f33f 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -21,15 +21,15 @@ limitations under the License.
// - Search results component
// - Drag and drop
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
import classNames from 'classnames';
-import {Room} from "matrix-js-sdk/src/models/room";
-import {MatrixEvent} from "matrix-js-sdk/src/models/event";
-import {EventSubscription} from "fbemitter";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { EventSubscription } from "fbemitter";
import shouldHideEvent from '../../shouldHideEvent';
-import {_t} from '../../languageHandler';
-import {RoomPermalinkCreator} from '../../utils/permalinks/Permalinks';
+import { _t } from '../../languageHandler';
+import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
import ResizeNotifier from '../../utils/ResizeNotifier';
import ContentMessages from '../../ContentMessages';
import Modal from '../../Modal';
@@ -40,8 +40,8 @@ import Tinter from '../../Tinter';
import rateLimitedFunc from '../../ratelimitedfunc';
import * as ObjectUtils from '../../ObjectUtils';
import * as Rooms from '../../Rooms';
-import eventSearch, {searchPagination} from '../../Searching';
-import {isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key} from '../../Keyboard';
+import eventSearch, { searchPagination } from '../../Searching';
+import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key } from '../../Keyboard';
import MainSplit from './MainSplit';
import RightPanel from './RightPanel';
import RoomViewStore from '../../stores/RoomViewStore';
@@ -50,13 +50,13 @@ import WidgetEchoStore from '../../stores/WidgetEchoStore';
import SettingsStore from "../../settings/SettingsStore";
import AccessibleButton from "../views/elements/AccessibleButton";
import RightPanelStore from "../../stores/RightPanelStore";
-import {haveTileForEvent} from "../views/rooms/EventTile";
+import { haveTileForEvent } from "../views/rooms/EventTile";
import RoomContext from "../../contexts/RoomContext";
import MatrixClientContext from "../../contexts/MatrixClientContext";
-import {E2EStatus, shieldStatusForRoom} from '../../utils/ShieldUtils';
-import {Action} from "../../dispatcher/actions";
-import {SettingLevel} from "../../settings/SettingLevel";
-import {IMatrixClientCreds} from "../../MatrixClientPeg";
+import { E2EStatus, shieldStatusForRoom } from '../../utils/ShieldUtils';
+import { Action } from "../../dispatcher/actions";
+import { SettingLevel } from "../../settings/SettingLevel";
+import { IMatrixClientCreds } from "../../MatrixClientPeg";
import ScrollPanel from "./ScrollPanel";
import TimelinePanel from "./TimelinePanel";
import ErrorBoundary from "../views/elements/ErrorBoundary";
@@ -67,17 +67,18 @@ import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar";
import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel";
import AuxPanel from "../views/rooms/AuxPanel";
import RoomHeader from "../views/rooms/RoomHeader";
-import {XOR} from "../../@types/common";
+import { XOR } from "../../@types/common";
import { IThreepidInvite } from "../../stores/ThreepidInviteStore";
import EffectsOverlay from "../views/elements/EffectsOverlay";
-import {containsEmoji} from '../../effects/utils';
-import {CHAT_EFFECTS} from '../../effects';
+import { containsEmoji } from '../../effects/utils';
+import { CHAT_EFFECTS } from '../../effects';
import { CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
import WidgetStore from "../../stores/WidgetStore";
-import {UPDATE_EVENT} from "../../stores/AsyncStore";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
import Notifier from "../../Notifier";
-import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast";
+import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
+import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
const DEBUG = false;
let debuglog = function(msg: string) {};
@@ -266,12 +267,6 @@ export default class RoomView extends React.Component {
this.layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
}
- // TODO: [REACT-WARNING] Move into constructor
- // eslint-disable-next-line camelcase
- UNSAFE_componentWillMount() {
- this.onRoomViewStoreUpdate(true);
- }
-
private onWidgetStoreUpdate = () => {
if (this.state.room) {
this.checkWidgets(this.state.room);
@@ -280,8 +275,9 @@ export default class RoomView extends React.Component {
private checkWidgets = (room) => {
this.setState({
- hasPinnedWidgets: WidgetStore.instance.getPinnedApps(room.roomId).length > 0,
- })
+ hasPinnedWidgets: WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top).length > 0,
+ showApps: this.shouldShowApps(room),
+ });
};
private onReadReceiptsChange = () => {
@@ -418,11 +414,17 @@ export default class RoomView extends React.Component {
}
private onWidgetEchoStoreUpdate = () => {
+ if (!this.state.room) return;
this.setState({
+ hasPinnedWidgets: WidgetLayoutStore.instance.getContainerWidgets(this.state.room, Container.Top).length > 0,
showApps: this.shouldShowApps(this.state.room),
});
};
+ private onWidgetLayoutChange = () => {
+ this.onWidgetEchoStoreUpdate(); // we cheat here by calling the thing that matters
+ };
+
private setupRoom(room: Room, roomId: string, joining: boolean, shouldPeek: boolean) {
// if this is an unknown room then we're in one of three states:
// - This is a room we can peek into (search engine) (we can /peek)
@@ -488,7 +490,7 @@ export default class RoomView extends React.Component {
}
private shouldShowApps(room: Room) {
- if (!BROWSER_SUPPORTS_SANDBOX) return false;
+ if (!BROWSER_SUPPORTS_SANDBOX || !room) return false;
// Check if user has previously chosen to hide the app drawer for this
// room. If so, do not show apps
@@ -497,10 +499,15 @@ export default class RoomView extends React.Component {
// This is confusing, but it means to say that we default to the tray being
// hidden unless the user clicked to open it.
- return hideWidgetDrawer === "false";
+ const isManuallyShown = hideWidgetDrawer === "false";
+
+ const widgets = WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top);
+ return widgets.length > 0 || isManuallyShown;
}
componentDidMount() {
+ this.onRoomViewStoreUpdate(true);
+
const call = this.getCallForRoom();
const callState = call ? call.state : null;
this.setState({
@@ -608,6 +615,13 @@ export default class RoomView extends React.Component {
WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate);
WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate);
+ if (this.state.room) {
+ WidgetLayoutStore.instance.off(
+ WidgetLayoutStore.emissionForRoom(this.state.room),
+ this.onWidgetLayoutChange,
+ );
+ }
+
if (this.showReadReceiptsWatchRef) {
SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef);
}
@@ -748,6 +762,9 @@ export default class RoomView extends React.Component {
});
}
break;
+ case 'focus_search':
+ this.onSearchClick();
+ break;
}
};
@@ -835,6 +852,10 @@ export default class RoomView extends React.Component {
// called when state.room is first initialised (either at initial load,
// after a successful peek, or after we join the room).
private onRoomLoaded = (room: Room) => {
+ // Attach a widget store listener only when we get a room
+ WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange);
+ this.onWidgetLayoutChange(); // provoke an update
+
this.calculatePeekRules(room);
this.updatePreviewUrlVisibility(room);
this.loadMembersIfJoined(room);
@@ -897,6 +918,15 @@ export default class RoomView extends React.Component {
if (!room || room.roomId !== this.state.roomId) {
return;
}
+
+ // Detach the listener if the room is changing for some reason
+ if (this.state.room) {
+ WidgetLayoutStore.instance.off(
+ WidgetLayoutStore.emissionForRoom(this.state.room),
+ this.onWidgetLayoutChange,
+ );
+ }
+
this.setState({
room: room,
}, () => {
diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx
index 6bc35eb2a4..21f9f3f5d6 100644
--- a/src/components/structures/TabbedView.tsx
+++ b/src/components/structures/TabbedView.tsx
@@ -20,7 +20,6 @@ import * as React from "react";
import {_t} from '../../languageHandler';
import * as sdk from "../../index";
import AutoHideScrollbar from './AutoHideScrollbar';
-import { ReactNode } from "react";
/**
* Represents a tab for the TabbedView.
diff --git a/src/components/structures/auth/E2eSetup.js b/src/components/structures/auth/E2eSetup.js
index 6df8158002..d97a972718 100644
--- a/src/components/structures/auth/E2eSetup.js
+++ b/src/components/structures/auth/E2eSetup.js
@@ -24,6 +24,7 @@ export default class E2eSetup extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
accountPassword: PropTypes.string,
+ tokenLogin: PropTypes.bool,
};
render() {
@@ -33,6 +34,7 @@ export default class E2eSetup extends React.Component {
diff --git a/src/components/structures/auth/Login.tsx b/src/components/structures/auth/Login.tsx
index 606aeb44ab..a217f1b4d9 100644
--- a/src/components/structures/auth/Login.tsx
+++ b/src/components/structures/auth/Login.tsx
@@ -340,8 +340,8 @@ export default class LoginComponent extends React.PureComponent
};
onTryRegisterClick = ev => {
- const hasPasswordFlow = this.state.flows.find(flow => flow.type === "m.login.password");
- const ssoFlow = this.state.flows.find(flow => flow.type === "m.login.sso" || flow.type === "m.login.cas");
+ const hasPasswordFlow = this.state.flows?.find(flow => flow.type === "m.login.password");
+ const ssoFlow = this.state.flows?.find(flow => flow.type === "m.login.sso" || flow.type === "m.login.cas");
// If has no password flow but an SSO flow guess that the user wants to register with SSO.
// TODO: instead hide the Register button if registration is disabled by checking with the server,
// has no specific errCode currently and uses M_FORBIDDEN.
diff --git a/src/components/structures/auth/SetupEncryptionBody.js b/src/components/structures/auth/SetupEncryptionBody.js
index 6d090936e5..3e7264dfec 100644
--- a/src/components/structures/auth/SetupEncryptionBody.js
+++ b/src/components/structures/auth/SetupEncryptionBody.js
@@ -120,9 +120,9 @@ export default class SetupEncryptionBody extends React.Component {
const store = SetupEncryptionStore.sharedInstance();
let recoveryKeyPrompt;
if (store.keyInfo && keyHasPassphrase(store.keyInfo)) {
- recoveryKeyPrompt = _t("Use Recovery Key or Passphrase");
+ recoveryKeyPrompt = _t("Use Security Key or Phrase");
} else if (store.keyInfo) {
- recoveryKeyPrompt = _t("Use Recovery Key");
+ recoveryKeyPrompt = _t("Use Security Key");
}
let useRecoveryKeyButton;
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index 60e57afc98..7dc1976641 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -609,8 +609,12 @@ export class SSOAuthEntry extends React.Component {
this.props.authSessionId,
);
+ this._popupWindow = null;
+ window.addEventListener("message", this._onReceiveMessage);
+
this.state = {
phase: SSOAuthEntry.PHASE_PREAUTH,
+ attemptFailed: false,
};
}
@@ -618,12 +622,35 @@ export class SSOAuthEntry extends React.Component {
this.props.onPhaseChange(SSOAuthEntry.PHASE_PREAUTH);
}
+ componentWillUnmount() {
+ window.removeEventListener("message", this._onReceiveMessage);
+ if (this._popupWindow) {
+ this._popupWindow.close();
+ this._popupWindow = null;
+ }
+ }
+
+ attemptFailed = () => {
+ this.setState({
+ attemptFailed: true,
+ });
+ };
+
+ _onReceiveMessage = event => {
+ if (event.data === "authDone" && event.origin === this.props.matrixClient.getHomeserverUrl()) {
+ if (this._popupWindow) {
+ this._popupWindow.close();
+ this._popupWindow = null;
+ }
+ }
+ };
+
onStartAuthClick = () => {
// Note: We don't use PlatformPeg's startSsoAuth functions because we almost
// certainly will need to open the thing in a new tab to avoid losing application
// context.
- window.open(this._ssoUrl, '_blank');
+ this._popupWindow = window.open(this._ssoUrl, "_blank");
this.setState({phase: SSOAuthEntry.PHASE_POSTAUTH});
this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH);
};
@@ -656,10 +683,28 @@ export class SSOAuthEntry extends React.Component {
);
}
- return
- {cancelButton}
- {continueButton}
-
;
+ let errorSection;
+ if (this.props.errorText) {
+ errorSection = (
+
+ { this.props.errorText }
+
+ );
+ } else if (this.state.attemptFailed) {
+ errorSection = (
+
+ { _t("Something went wrong in confirming your identity. Cancel and try again.") }
+
+ );
+ }
+
+ return
+ { errorSection }
+
+ {cancelButton}
+ {continueButton}
+
+ ;
}
}
@@ -710,8 +755,7 @@ export class FallbackAuthEntry extends React.Component {
this.props.loginType,
this.props.authSessionId,
);
- this._popupWindow = window.open(url);
- this._popupWindow.opener = null;
+ this._popupWindow = window.open(url, "_blank");
};
_onReceiveMessage = event => {
diff --git a/src/components/views/auth/PasswordLogin.tsx b/src/components/views/auth/PasswordLogin.tsx
index 84e583c3a5..b2a3d62f55 100644
--- a/src/components/views/auth/PasswordLogin.tsx
+++ b/src/components/views/auth/PasswordLogin.tsx
@@ -196,7 +196,7 @@ export default class PasswordLogin extends React.PureComponent {
// Validation and state updates are async, so we need to wait for them to complete
// first. Queue a `setState` callback and wait for it to resolve.
- await new Promise(resolve => this.setState({}, resolve));
+ await new Promise(resolve => this.setState({}, resolve));
if (this.allFieldsValid()) {
return true;
diff --git a/src/components/views/auth/RegistrationForm.tsx b/src/components/views/auth/RegistrationForm.tsx
index a0c7ab7b4f..e42ed88f99 100644
--- a/src/components/views/auth/RegistrationForm.tsx
+++ b/src/components/views/auth/RegistrationForm.tsx
@@ -194,7 +194,7 @@ export default class RegistrationForm extends React.PureComponent this.setState({}, resolve));
+ await new Promise(resolve => this.setState({}, resolve));
if (this.allFieldsValid()) {
return true;
diff --git a/src/components/views/context_menus/WidgetContextMenu.tsx b/src/components/views/context_menus/WidgetContextMenu.tsx
index 4662c74d78..c1af86eae6 100644
--- a/src/components/views/context_menus/WidgetContextMenu.tsx
+++ b/src/components/views/context_menus/WidgetContextMenu.tsx
@@ -20,7 +20,7 @@ import {MatrixCapabilities} from "matrix-widget-api";
import IconizedContextMenu, {IconizedContextMenuOption, IconizedContextMenuOptionList} from "./IconizedContextMenu";
import {ChevronFace} from "../../structures/ContextMenu";
import {_t} from "../../../languageHandler";
-import WidgetStore, {IApp} from "../../../stores/WidgetStore";
+import {IApp} from "../../../stores/WidgetStore";
import WidgetUtils from "../../../utils/WidgetUtils";
import {WidgetMessagingStore} from "../../../stores/widgets/WidgetMessagingStore";
import RoomContext from "../../../contexts/RoomContext";
@@ -30,6 +30,7 @@ import Modal from "../../../Modal";
import QuestionDialog from "../dialogs/QuestionDialog";
import {WidgetType} from "../../../widgets/WidgetType";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
interface IProps extends React.ComponentProps {
app: IApp;
@@ -56,7 +57,7 @@ const WidgetContextMenu: React.FC = ({
let unpinButton;
if (showUnpin) {
const onUnpinClick = () => {
- WidgetStore.instance.unpinWidget(room.roomId, app.id);
+ WidgetLayoutStore.instance.moveToContainer(room, app, Container.Right);
onFinished();
};
@@ -137,13 +138,13 @@ const WidgetContextMenu: React.FC = ({
revokeButton = ;
}
- const pinnedWidgets = WidgetStore.instance.getPinnedApps(roomId);
+ const pinnedWidgets = WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top);
const widgetIndex = pinnedWidgets.findIndex(widget => widget.id === app.id);
let moveLeftButton;
if (showUnpin && widgetIndex > 0) {
const onClick = () => {
- WidgetStore.instance.movePinnedWidget(roomId, app.id, -1);
+ WidgetLayoutStore.instance.moveWithinContainer(room, Container.Top, app, -1);
onFinished();
};
@@ -153,7 +154,7 @@ const WidgetContextMenu: React.FC = ({
let moveRightButton;
if (showUnpin && widgetIndex < pinnedWidgets.length - 1) {
const onClick = () => {
- WidgetStore.instance.movePinnedWidget(roomId, app.id, 1);
+ WidgetLayoutStore.instance.moveWithinContainer(room, Container.Top, app, 1);
onFinished();
};
diff --git a/src/components/views/dialogs/ErrorDialog.js b/src/components/views/dialogs/ErrorDialog.js
index acebdcd854..3bfa635adf 100644
--- a/src/components/views/dialogs/ErrorDialog.js
+++ b/src/components/views/dialogs/ErrorDialog.js
@@ -50,6 +50,10 @@ export default class ErrorDialog extends React.Component {
button: null,
};
+ onClick = () => {
+ this.props.onFinished(true);
+ };
+
render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
return (
@@ -64,7 +68,7 @@ export default class ErrorDialog extends React.Component {
{ this.props.description || _t('An error has occurred.') }
diff --git a/src/components/views/dialogs/ModalWidgetDialog.tsx b/src/components/views/dialogs/ModalWidgetDialog.tsx
index 484e8f0dcf..92fb406965 100644
--- a/src/components/views/dialogs/ModalWidgetDialog.tsx
+++ b/src/components/views/dialogs/ModalWidgetDialog.tsx
@@ -35,13 +35,13 @@ import {
} from "matrix-widget-api";
import {StopGapWidgetDriver} from "../../../stores/widgets/StopGapWidgetDriver";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import RoomViewStore from "../../../stores/RoomViewStore";
import {OwnProfileStore} from "../../../stores/OwnProfileStore";
import { arrayFastClone } from "../../../utils/arrays";
import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
interface IProps {
widgetDefinition: IModalWidgetOpenRequestData;
+ widgetRoomId?: string;
sourceWidgetId: string;
onFinished(success: boolean, data?: IModalWidgetReturnData): void;
}
@@ -123,7 +123,7 @@ export default class ModalWidgetDialog extends React.PureComponent