{ _t('Connectivity to the server has been lost.') }
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 4de573479d..5cc1e2b765 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -27,7 +27,6 @@ import React from 'react';
import createReactClass from 'create-react-class';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
-import Promise from 'bluebird';
import classNames from 'classnames';
import {Room} from "matrix-js-sdk";
import { _t } from '../../languageHandler';
@@ -43,6 +42,7 @@ import Tinter from '../../Tinter';
import rate_limited_func from '../../ratelimitedfunc';
import ObjectUtils from '../../ObjectUtils';
import * as Rooms from '../../Rooms';
+import eventSearch from '../../Searching';
import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
@@ -357,7 +357,7 @@ module.exports = createReactClass({
if (this.props.autoJoin) {
this.onJoinButtonClicked();
} else if (!room && shouldPeek) {
- console.log("Attempting to peek into room %s", roomId);
+ console.info("Attempting to peek into room %s", roomId);
this.setState({
peekLoading: true,
isPeeking: true, // this will change to false if peeking fails
@@ -1101,7 +1101,7 @@ module.exports = createReactClass({
}
ContentMessages.sharedInstance().sendStickerContentToRoom(url, this.state.room.roomId, info, text, MatrixClientPeg.get())
- .done(undefined, (error) => {
+ .then(undefined, (error) => {
if (error.name === "UnknownDeviceError") {
// Let the staus bar handle this
return;
@@ -1129,23 +1129,12 @@ module.exports = createReactClass({
// todo: should cancel any previous search requests.
this.searchId = new Date().getTime();
- let filter;
- if (scope === "Room") {
- filter = {
- // XXX: it's unintuitive that the filter for searching doesn't have the same shape as the v2 filter API :(
- rooms: [
- this.state.room.roomId,
- ],
- };
- }
+ let roomId;
+ if (scope === "Room") roomId = this.state.room.roomId;
debuglog("sending search request");
-
- const searchPromise = MatrixClientPeg.get().searchRoomEvents({
- filter: filter,
- term: term,
- });
- this._handleSearchResult(searchPromise).done();
+ const searchPromise = eventSearch(term, roomId);
+ this._handleSearchResult(searchPromise);
},
_handleSearchResult: function(searchPromise) {
@@ -1316,7 +1305,7 @@ module.exports = createReactClass({
},
onForgetClick: function() {
- MatrixClientPeg.get().forget(this.state.room.roomId).done(function() {
+ MatrixClientPeg.get().forget(this.state.room.roomId).then(function() {
dis.dispatch({ action: 'view_next_room' });
}, function(err) {
const errCode = err.errcode || _t("unknown error code");
@@ -1333,7 +1322,7 @@ module.exports = createReactClass({
this.setState({
rejecting: true,
});
- MatrixClientPeg.get().leave(this.state.roomId).done(function() {
+ MatrixClientPeg.get().leave(this.state.roomId).then(function() {
dis.dispatch({ action: 'view_next_room' });
self.setState({
rejecting: false,
@@ -1907,7 +1896,7 @@ module.exports = createReactClass({
highlightedEventId = this.state.initialEventId;
}
- // console.log("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
+ // console.info("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
const messagePanel = (
{
+ this._timelineWindow.paginate(EventTimeline.FORWARDS, 1, false).then(() => {
if (this.unmounted) { return; }
const { events, liveEvents } = this._getEvents();
@@ -1064,8 +1063,6 @@ const TimelinePanel = createReactClass({
});
};
- let prom = this._timelineWindow.load(eventId, INITIAL_SIZE);
-
// if we already have the event in question, TimelineWindow.load
// returns a resolved promise.
//
@@ -1074,9 +1071,14 @@ const TimelinePanel = createReactClass({
// quite slow. So we detect that situation and shortcut straight to
// calling _reloadEvents and updating the state.
- if (prom.isFulfilled()) {
+ const timeline = this.props.timelineSet.getTimelineForEvent(eventId);
+ if (timeline) {
+ // This is a hot-path optimization by skipping a promise tick
+ // by repeating a no-op sync branch in TimelineSet.getTimelineForEvent & MatrixClient.getEventTimeline
+ this._timelineWindow.load(eventId, INITIAL_SIZE); // in this branch this method will happen in sync time
onLoaded();
} else {
+ const prom = this._timelineWindow.load(eventId, INITIAL_SIZE);
this.setState({
events: [],
liveEvents: [],
@@ -1084,11 +1086,8 @@ const TimelinePanel = createReactClass({
canForwardPaginate: false,
timelineLoading: true,
});
-
- prom = prom.then(onLoaded, onError);
+ prom.then(onLoaded, onError);
}
-
- prom.done();
},
// handle the completion of a timeline load or localEchoUpdate, by
diff --git a/src/components/structures/ToastContainer.js b/src/components/structures/ToastContainer.js
new file mode 100644
index 0000000000..a8dca35747
--- /dev/null
+++ b/src/components/structures/ToastContainer.js
@@ -0,0 +1,84 @@
+/*
+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 * as React from "react";
+import dis from "../../dispatcher";
+import { _t } from '../../languageHandler';
+import classNames from "classnames";
+
+export default class ToastContainer extends React.Component {
+ constructor() {
+ super();
+ this.state = {toasts: []};
+ }
+
+ componentDidMount() {
+ this._dispatcherRef = dis.register(this.onAction);
+ }
+
+ componentWillUnmount() {
+ dis.unregister(this._dispatcherRef);
+ }
+
+ onAction = (payload) => {
+ if (payload.action === "show_toast") {
+ this._addToast(payload.toast);
+ }
+ };
+
+ _addToast(toast) {
+ this.setState({toasts: this.state.toasts.concat(toast)});
+ }
+
+ dismissTopToast = () => {
+ const [, ...remaining] = this.state.toasts;
+ this.setState({toasts: remaining});
+ };
+
+ render() {
+ const totalCount = this.state.toasts.length;
+ const isStacked = totalCount > 1;
+ let toast;
+ if (totalCount !== 0) {
+ const topToast = this.state.toasts[0];
+ const {title, icon, key, component, props} = topToast;
+ const toastClasses = classNames("mx_Toast_toast", {
+ "mx_Toast_hasIcon": icon,
+ [`mx_Toast_icon_${icon}`]: icon,
+ });
+ const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null;
+
+ const toastProps = Object.assign({}, props, {
+ dismiss: this.dismissTopToast,
+ key,
+ });
+ toast = (
+
{title}{countIndicator}
+
{React.createElement(component, toastProps)}
+
+ {toast}
+
+ );
+ }
+}
diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js
index 46a5fa7bd7..6f68293caa 100644
--- a/src/components/structures/auth/ForgotPassword.js
+++ b/src/components/structures/auth/ForgotPassword.js
@@ -105,7 +105,7 @@ module.exports = createReactClass({
phase: PHASE_SENDING_EMAIL,
});
this.reset = new PasswordReset(this.props.serverConfig.hsUrl, this.props.serverConfig.isUrl);
- this.reset.resetPassword(email, password).done(() => {
+ this.reset.resetPassword(email, password).then(() => {
this.setState({
phase: PHASE_EMAIL_SENT,
});
diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js
index ad77ed49a5..b2e9d3e7cd 100644
--- a/src/components/structures/auth/Login.js
+++ b/src/components/structures/auth/Login.js
@@ -253,7 +253,7 @@ module.exports = createReactClass({
this.setState({
busy: false,
});
- }).done();
+ });
},
onUsernameChanged: function(username) {
@@ -378,15 +378,30 @@ module.exports = createReactClass({
// Do a quick liveliness check on the URLs
try {
- await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl);
- this.setState({serverIsAlive: true, errorText: ""});
+ const { warning } =
+ await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl);
+ if (warning) {
+ this.setState({
+ ...AutoDiscoveryUtils.authComponentStateForError(warning),
+ errorText: "",
+ });
+ } else {
+ this.setState({
+ serverIsAlive: true,
+ errorText: "",
+ });
+ }
} catch (e) {
this.setState({
busy: false,
...AutoDiscoveryUtils.authComponentStateForError(e),
});
if (this.state.serverErrorIsFatal) {
- return; // Server is dead - do not continue.
+ // Server is dead: show server details prompt instead
+ this.setState({
+ phase: PHASE_SERVER_DETAILS,
+ });
+ return;
}
}
@@ -424,7 +439,7 @@ module.exports = createReactClass({
this.setState({
busy: false,
});
- }).done();
+ });
},
_isSupportedFlow: function(flow) {
diff --git a/src/components/structures/auth/PostRegistration.js b/src/components/structures/auth/PostRegistration.js
index 66075c80f7..760163585d 100644
--- a/src/components/structures/auth/PostRegistration.js
+++ b/src/components/structures/auth/PostRegistration.js
@@ -43,7 +43,7 @@ module.exports = createReactClass({
const cli = MatrixClientPeg.get();
this.setState({busy: true});
const self = this;
- cli.getProfileInfo(cli.credentials.userId).done(function(result) {
+ cli.getProfileInfo(cli.credentials.userId).then(function(result) {
self.setState({
avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(result.avatar_url),
busy: false,
diff --git a/src/components/structures/auth/Registration.js b/src/components/structures/auth/Registration.js
index 6321028457..3578d745f5 100644
--- a/src/components/structures/auth/Registration.js
+++ b/src/components/structures/auth/Registration.js
@@ -18,7 +18,6 @@ limitations under the License.
*/
import Matrix from 'matrix-js-sdk';
-import Promise from 'bluebird';
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
@@ -371,7 +370,7 @@ module.exports = createReactClass({
if (pushers[i].kind === 'email') {
const emailPusher = pushers[i];
emailPusher.data = { brand: this.props.brand };
- matrixClient.setPusher(emailPusher).done(() => {
+ matrixClient.setPusher(emailPusher).then(() => {
console.log("Set email branding to " + this.props.brand);
}, (error) => {
console.error("Couldn't set email branding: " + error);
diff --git a/src/components/views/auth/CaptchaForm.js b/src/components/views/auth/CaptchaForm.js
index 2fdfedadcf..23fef6c54f 100644
--- a/src/components/views/auth/CaptchaForm.js
+++ b/src/components/views/auth/CaptchaForm.js
@@ -89,7 +89,7 @@ module.exports = createReactClass({
+ "authentication");
}
- console.log("Rendering to %s", divId);
+ console.info("Rendering to %s", divId);
this._captchaWidgetId = global.grecaptcha.render(divId, {
sitekey: publicKey,
callback: this.props.onCaptchaResponse,
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index d19ce95b33..cc3f9f96c4 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -441,7 +441,7 @@ export const MsisdnAuthEntry = createReactClass({
this.props.fail(e);
}).finally(() => {
this.setState({requestingToken: false});
- }).done();
+ });
},
/*
diff --git a/src/components/views/context_menus/RoomTileContextMenu.js b/src/components/views/context_menus/RoomTileContextMenu.js
index e00e3dcdbb..f770bb0d60 100644
--- a/src/components/views/context_menus/RoomTileContextMenu.js
+++ b/src/components/views/context_menus/RoomTileContextMenu.js
@@ -17,7 +17,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import Promise from 'bluebird';
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
@@ -32,6 +31,7 @@ import * as RoomNotifs from '../../../RoomNotifs';
import Modal from '../../../Modal';
import RoomListActions from '../../../actions/RoomListActions';
import RoomViewStore from '../../../stores/RoomViewStore';
+import {sleep} from "../../../utils/promise";
import {MenuItem, MenuItemCheckbox, MenuItemRadio} from "../../structures/ContextualMenu";
const RoomTagOption = ({active, onClick, src, srcSet, label}) => {
@@ -92,7 +92,7 @@ module.exports = createReactClass({
_toggleTag: function(tagNameOn, tagNameOff) {
if (!MatrixClientPeg.get().isGuest()) {
- Promise.delay(500).then(() => {
+ sleep(500).then(() => {
dis.dispatch(RoomListActions.tagRoom(
MatrixClientPeg.get(),
this.props.room,
@@ -149,7 +149,7 @@ module.exports = createReactClass({
Rooms.guessAndSetDMRoom(
this.props.room, newIsDirectMessage,
- ).delay(500).finally(() => {
+ ).then(sleep(500)).finally(() => {
// Close the context menu
if (this.props.onFinished) {
this.props.onFinished();
@@ -190,7 +190,7 @@ module.exports = createReactClass({
_onClickForget: function() {
// FIXME: duplicated with RoomSettings (and dead code in RoomView)
- MatrixClientPeg.get().forget(this.props.room.roomId).done(() => {
+ MatrixClientPeg.get().forget(this.props.room.roomId).then(() => {
// Switch to another room view if we're currently viewing the
// historical room
if (RoomViewStore.getRoomId() === this.props.room.roomId) {
@@ -220,10 +220,10 @@ module.exports = createReactClass({
this.setState({
roomNotifState: newState,
});
- RoomNotifs.setRoomNotifsState(roomId, newState).done(() => {
+ RoomNotifs.setRoomNotifsState(roomId, newState).then(() => {
// delay slightly so that the user can see their state change
// before closing the menu
- return Promise.delay(500).then(() => {
+ return sleep(500).then(() => {
if (this._unmounted) return;
// Close the context menu
if (this.props.onFinished) {
diff --git a/src/components/views/context_menus/WidgetContextMenu.js b/src/components/views/context_menus/WidgetContextMenu.js
new file mode 100644
index 0000000000..43e7e172cc
--- /dev/null
+++ b/src/components/views/context_menus/WidgetContextMenu.js
@@ -0,0 +1,134 @@
+/*
+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 sdk from '../../../index';
+import {_t} from '../../../languageHandler';
+
+export default class WidgetContextMenu extends React.Component {
+ static propTypes = {
+ onFinished: PropTypes.func,
+
+ // Callback for when the revoke button is clicked. Required.
+ onRevokeClicked: PropTypes.func.isRequired,
+
+ // Callback for when the snapshot button is clicked. Button not shown
+ // without a callback.
+ onSnapshotClicked: PropTypes.func,
+
+ // Callback for when the reload button is clicked. Button not shown
+ // without a callback.
+ onReloadClicked: PropTypes.func,
+
+ // Callback for when the edit button is clicked. Button not shown
+ // without a callback.
+ onEditClicked: PropTypes.func,
+
+ // Callback for when the delete button is clicked. Button not shown
+ // without a callback.
+ onDeleteClicked: PropTypes.func,
+ };
+
+ proxyClick(fn) {
+ fn();
+ if (this.props.onFinished) this.props.onFinished();
+ }
+
+ // XXX: It's annoying that our context menus require us to hit onFinished() to close :(
+
+ onEditClicked = () => {
+ this.proxyClick(this.props.onEditClicked);
+ };
+
+ onReloadClicked = () => {
+ this.proxyClick(this.props.onReloadClicked);
+ };
+
+ onSnapshotClicked = () => {
+ this.proxyClick(this.props.onSnapshotClicked);
+ };
+
+ onDeleteClicked = () => {
+ this.proxyClick(this.props.onDeleteClicked);
+ };
+
+ onRevokeClicked = () => {
+ this.proxyClick(this.props.onRevokeClicked);
+ };
+
+ render() {
+ const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
+
+ const options = [];
+
+ if (this.props.onEditClicked) {
+ options.push(
+
+ {_t("Edit")}
+ ,
+ );
+ }
+
+ if (this.props.onReloadClicked) {
+ options.push(
+
+ {_t("Reload")}
+ ,
+ );
+ }
+
+ if (this.props.onSnapshotClicked) {
+ options.push(
+
+ {_t("Take picture")}
+ ,
+ );
+ }
+
+ if (this.props.onDeleteClicked) {
+ options.push(
+
+ {_t("Remove for everyone")}
+ ,
+ );
+ }
+
+ // Push this last so it appears last. It's always present.
+ options.push(
+
+ {_t("Remove for me")}
+ ,
+ );
+
+ // Put separators between the options
+ if (options.length > 1) {
+ const length = options.length;
+ for (let i = 0; i < length - 1; i++) {
+ const sep =
;
+
+ // Insert backwards so the insertions don't affect our math on where to place them.
+ // We also use our cached length to avoid worrying about options.length changing
+ options.splice(length - 1 - i, 0, sep);
+ }
+ }
+
+ return {options}
;
+ }
+}
diff --git a/src/components/views/dialogs/AddressPickerDialog.js b/src/components/views/dialogs/AddressPickerDialog.js
index fb779fa96f..a40495893d 100644
--- a/src/components/views/dialogs/AddressPickerDialog.js
+++ b/src/components/views/dialogs/AddressPickerDialog.js
@@ -25,13 +25,13 @@ import { _t, _td } from '../../../languageHandler';
import sdk from '../../../index';
import MatrixClientPeg from '../../../MatrixClientPeg';
import dis from '../../../dispatcher';
-import Promise from 'bluebird';
import { addressTypes, getAddressType } from '../../../UserAddress.js';
import GroupStore from '../../../stores/GroupStore';
import * as Email from '../../../email';
import IdentityAuthClient from '../../../IdentityAuthClient';
import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from '../../../utils/IdentityServerUtils';
import { abbreviateUrl } from '../../../utils/UrlUtils';
+import {sleep} from "../../../utils/promise";
const TRUNCATE_QUERY_LIST = 40;
const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -266,7 +266,7 @@ module.exports = createReactClass({
this.setState({
searchError: err.errcode ? err.message : _t('Something went wrong!'),
});
- }).done(() => {
+ }).then(() => {
this.setState({
busy: false,
});
@@ -379,7 +379,7 @@ module.exports = createReactClass({
// Do a local search immediately
this._doLocalSearch(query);
}
- }).done(() => {
+ }).then(() => {
this.setState({
busy: false,
});
@@ -533,7 +533,7 @@ module.exports = createReactClass({
};
// wait a bit to let the user finish typing
- await Promise.delay(500);
+ await sleep(500);
if (cancelled) return null;
try {
diff --git a/src/components/views/dialogs/CreateGroupDialog.js b/src/components/views/dialogs/CreateGroupDialog.js
index 11f4c21366..3430a12e71 100644
--- a/src/components/views/dialogs/CreateGroupDialog.js
+++ b/src/components/views/dialogs/CreateGroupDialog.js
@@ -93,7 +93,7 @@ export default createReactClass({
this.setState({createError: e});
}).finally(() => {
this.setState({creating: false});
- }).done();
+ });
},
_onCancel: function() {
diff --git a/src/components/views/dialogs/IntegrationsDisabledDialog.js b/src/components/views/dialogs/IntegrationsDisabledDialog.js
new file mode 100644
index 0000000000..3ab1123f8b
--- /dev/null
+++ b/src/components/views/dialogs/IntegrationsDisabledDialog.js
@@ -0,0 +1,57 @@
+/*
+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 {_t} from "../../../languageHandler";
+import sdk from "../../../index";
+import dis from '../../../dispatcher';
+
+export default class IntegrationsDisabledDialog extends React.Component {
+ static propTypes = {
+ onFinished: PropTypes.func.isRequired,
+ };
+
+ _onAcknowledgeClick = () => {
+ this.props.onFinished();
+ };
+
+ _onOpenSettingsClick = () => {
+ this.props.onFinished();
+ dis.dispatch({action: "view_user_settings"});
+ };
+
+ render() {
+ const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+ const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+ return (
+
+
+
{_t("Enable 'Manage Integrations' in Settings to do this.")}
+
+
+ {_t(
+ "Your Riot doesn't allow you to use an Integration Manager to do this. " +
+ "Please contact an admin.",
+ )}
+
+
({host});
case Matrix.SERVICE_TYPES.IM:
- return
{_t("Integrations Manager")}
({host})
;
+ return
{_t("Integration Manager")}
({host})
;
}
}
diff --git a/src/components/views/dialogs/UserSettingsDialog.js b/src/components/views/dialogs/UserSettingsDialog.js
index fb9045f05a..d3ab2b8722 100644
--- a/src/components/views/dialogs/UserSettingsDialog.js
+++ b/src/components/views/dialogs/UserSettingsDialog.js
@@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector 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.
@@ -29,12 +30,34 @@ import HelpUserSettingsTab from "../settings/tabs/user/HelpUserSettingsTab";
import FlairUserSettingsTab from "../settings/tabs/user/FlairUserSettingsTab";
import sdk from "../../../index";
import SdkConfig from "../../../SdkConfig";
+import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
export default class UserSettingsDialog extends React.Component {
static propTypes = {
onFinished: PropTypes.func.isRequired,
};
+ constructor() {
+ super();
+
+ this.state = {
+ mjolnirEnabled: SettingsStore.isFeatureEnabled("feature_mjolnir"),
+ };
+ }
+
+ componentDidMount(): void {
+ this._mjolnirWatcher = SettingsStore.watchSetting("feature_mjolnir", null, this._mjolnirChanged.bind(this));
+ }
+
+ componentWillUnmount(): void {
+ SettingsStore.unwatchSetting(this._mjolnirWatcher);
+ }
+
+ _mjolnirChanged(settingName, roomId, atLevel, newValue) {
+ // We can cheat because we know what levels a feature is tracked at, and how it is tracked
+ this.setState({mjolnirEnabled: newValue});
+ }
+
_getTabs() {
const tabs = [];
@@ -75,6 +98,13 @@ export default class UserSettingsDialog extends React.Component {
,
));
}
+ if (this.state.mjolnirEnabled) {
+ tabs.push(new Tab(
+ _td("Ignored users"),
+ "mx_UserSettingsDialog_mjolnirIcon",
+
,
+ ));
+ }
tabs.push(new Tab(
_td("Help & About"),
"mx_UserSettingsDialog_helpIcon",
diff --git a/src/components/views/elements/AppPermission.js b/src/components/views/elements/AppPermission.js
index 1e019c0287..8dc58643bd 100644
--- a/src/components/views/elements/AppPermission.js
+++ b/src/components/views/elements/AppPermission.js
@@ -19,79 +19,126 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import url from 'url';
+import sdk from '../../../index';
import { _t } from '../../../languageHandler';
import WidgetUtils from "../../../utils/WidgetUtils";
+import MatrixClientPeg from "../../../MatrixClientPeg";
export default class AppPermission extends React.Component {
+ static propTypes = {
+ url: PropTypes.string.isRequired,
+ creatorUserId: PropTypes.string.isRequired,
+ roomId: PropTypes.string.isRequired,
+ onPermissionGranted: PropTypes.func.isRequired,
+ isRoomEncrypted: PropTypes.bool,
+ };
+
+ static defaultProps = {
+ onPermissionGranted: () => {},
+ };
+
constructor(props) {
super(props);
- const curlBase = this.getCurlBase();
- this.state = { curlBase: curlBase};
+ // The first step is to pick apart the widget so we can render information about it
+ const urlInfo = this.parseWidgetUrl();
+
+ // The second step is to find the user's profile so we can show it on the prompt
+ const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+ let roomMember;
+ if (room) roomMember = room.getMember(this.props.creatorUserId);
+
+ // Set all this into the initial state
+ this.state = {
+ ...urlInfo,
+ roomMember,
+ };
}
- // Return string representation of content URL without query parameters
- getCurlBase() {
- const wurl = url.parse(this.props.url);
- let curl;
- let curlString;
+ parseWidgetUrl() {
+ const widgetUrl = url.parse(this.props.url);
+ const params = new URLSearchParams(widgetUrl.search);
- const searchParams = new URLSearchParams(wurl.search);
-
- if (WidgetUtils.isScalarUrl(wurl) && searchParams && searchParams.get('url')) {
- curl = url.parse(searchParams.get('url'));
- if (curl) {
- curl.search = curl.query = "";
- curlString = curl.format();
- }
+ // HACK: We're relying on the query params when we should be relying on the widget's `data`.
+ // This is a workaround for Scalar.
+ if (WidgetUtils.isScalarUrl(widgetUrl) && params && params.get('url')) {
+ const unwrappedUrl = url.parse(params.get('url'));
+ return {
+ widgetDomain: unwrappedUrl.host || unwrappedUrl.hostname,
+ isWrapped: true,
+ };
+ } else {
+ return {
+ widgetDomain: widgetUrl.host || widgetUrl.hostname,
+ isWrapped: false,
+ };
}
- if (!curl && wurl) {
- wurl.search = wurl.query = "";
- curlString = wurl.format();
- }
- return curlString;
}
render() {
- let e2eWarningText;
- if (this.props.isRoomEncrypted) {
- e2eWarningText =
-
{ _t('NOTE: Apps are not end-to-end encrypted') };
- }
- const cookieWarning =
-
- { _t('Warning: This widget might use cookies.') }
- ;
+ const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
+ const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+ const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
+ const TextWithTooltip = sdk.getComponent("views.elements.TextWithTooltip");
+
+ const displayName = this.state.roomMember ? this.state.roomMember.name : this.props.creatorUserId;
+ const userId = displayName === this.props.creatorUserId ? null : this.props.creatorUserId;
+
+ const avatar = this.state.roomMember
+ ?
+ :
;
+
+ const warningTooltipText = (
+
+ {_t("Any of the following data may be shared:")}
+
+ - {_t("Your display name")}
+ - {_t("Your avatar URL")}
+ - {_t("Your user ID")}
+ - {_t("Your theme")}
+ - {_t("Riot URL")}
+ - {_t("Room ID")}
+ - {_t("Widget ID")}
+
+
+ );
+ const warningTooltip = (
+
+
+
+ );
+
+ // Due to i18n limitations, we can't dedupe the code for variables in these two messages.
+ const warning = this.state.isWrapped
+ ? _t("Using this widget may share data
with %(widgetDomain)s & your Integration Manager.",
+ {widgetDomain: this.state.widgetDomain}, {helpIcon: () => warningTooltip})
+ : _t("Using this widget may share data
with %(widgetDomain)s.",
+ {widgetDomain: this.state.widgetDomain}, {helpIcon: () => warningTooltip});
+
+ const encryptionWarning = this.props.isRoomEncrypted ? _t("Widgets do not use message encryption.") : null;
+
return (
-
-
![{_t('Warning!')}]({require("../../../../res/img/feather-customised/warning-triangle.svg")})
+
+ {_t("Widget added by")}
-
-
{_t('Do you want to load widget from URL:')}
-
{this.state.curlBase}
- { e2eWarningText }
- { cookieWarning }
+
+ {avatar}
+
{displayName}
+
{userId}
+
+
+ {warning}
+
+
+ {_t("This widget may use cookies.")} {encryptionWarning}
+
+
-
);
}
}
-
-AppPermission.propTypes = {
- isRoomEncrypted: PropTypes.bool,
- url: PropTypes.string.isRequired,
- onPermissionGranted: PropTypes.func.isRequired,
-};
-AppPermission.defaultProps = {
- isRoomEncrypted: false,
- onPermissionGranted: function() {},
-};
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 260b63dfd4..9a29843d3b 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -34,7 +34,9 @@ import dis from '../../../dispatcher';
import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
import classNames from 'classnames';
import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
-import SettingsStore from "../../../settings/SettingsStore";
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import {createMenu} from "../../structures/ContextualMenu";
+import PersistedElement from "./PersistedElement";
const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
const ENABLE_REACT_PERF = false;
@@ -52,7 +54,7 @@ export default class AppTile extends React.Component {
this._onLoaded = this._onLoaded.bind(this);
this._onEditClick = this._onEditClick.bind(this);
this._onDeleteClick = this._onDeleteClick.bind(this);
- this._onCancelClick = this._onCancelClick.bind(this);
+ this._onRevokeClicked = this._onRevokeClicked.bind(this);
this._onSnapshotClick = this._onSnapshotClick.bind(this);
this.onClickMenuBar = this.onClickMenuBar.bind(this);
this._onMinimiseClick = this._onMinimiseClick.bind(this);
@@ -69,8 +71,11 @@ export default class AppTile extends React.Component {
* @return {Object} Updated component state to be set with setState
*/
_getNewState(newProps) {
- const widgetPermissionId = [newProps.room.roomId, encodeURIComponent(newProps.url)].join('_');
- const hasPermissionToLoad = localStorage.getItem(widgetPermissionId);
+ // This is a function to make the impact of calling SettingsStore slightly less
+ const hasPermissionToLoad = () => {
+ const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", newProps.room.roomId);
+ return !!currentlyAllowedWidgets[newProps.eventId];
+ };
const PersistedElement = sdk.getComponent("elements.PersistedElement");
return {
@@ -78,10 +83,9 @@ export default class AppTile extends React.Component {
// True while the iframe content is loading
loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey),
widgetUrl: this._addWurlParams(newProps.url),
- widgetPermissionId: widgetPermissionId,
// Assume that widget has permission to load if we are the user who
// added it to the room, or if explicitly granted by the user
- hasPermissionToLoad: hasPermissionToLoad === 'true' || newProps.userId === newProps.creatorUserId,
+ hasPermissionToLoad: newProps.userId === newProps.creatorUserId || hasPermissionToLoad(),
error: null,
deleting: false,
widgetPageTitle: newProps.widgetPageTitle,
@@ -205,7 +209,7 @@ export default class AppTile extends React.Component {
if (!this._scalarClient) {
this._scalarClient = defaultManager.getScalarClient();
}
- this._scalarClient.getScalarToken().done((token) => {
+ this._scalarClient.getScalarToken().then((token) => {
// Append scalar_token as a query param if not already present
this._scalarClient.scalarToken = token;
const u = url.parse(this._addWurlParams(this.props.url));
@@ -244,7 +248,8 @@ export default class AppTile extends React.Component {
this.setScalarToken();
}
} else if (nextProps.show && !this.props.show) {
- if (this.props.waitForIframeLoad) {
+ // We assume that persisted widgets are loaded and don't need a spinner.
+ if (this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey)) {
this.setState({
loading: true,
});
@@ -269,7 +274,7 @@ export default class AppTile extends React.Component {
return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
}
- _onEditClick(e) {
+ _onEditClick() {
console.log("Edit widget ID ", this.props.id);
if (this.props.onEditClick) {
this.props.onEditClick();
@@ -291,7 +296,7 @@ export default class AppTile extends React.Component {
}
}
- _onSnapshotClick(e) {
+ _onSnapshotClick() {
console.warn("Requesting widget snapshot");
ActiveWidgetStore.getWidgetMessaging(this.props.id).getScreenshot()
.catch((err) => {
@@ -358,13 +363,9 @@ export default class AppTile extends React.Component {
}
}
- _onCancelClick() {
- if (this.props.onDeleteClick) {
- this.props.onDeleteClick();
- } else {
- console.log("Revoke widget permissions - %s", this.props.id);
- this._revokeWidgetPermission();
- }
+ _onRevokeClicked() {
+ console.info("Revoke widget permissions - %s", this.props.id);
+ this._revokeWidgetPermission();
}
/**
@@ -446,24 +447,38 @@ export default class AppTile extends React.Component {
});
}
- /* TODO -- Store permission in account data so that it is persisted across multiple devices */
_grantWidgetPermission() {
- console.warn('Granting permission to load widget - ', this.state.widgetUrl);
- localStorage.setItem(this.state.widgetPermissionId, true);
- this.setState({hasPermissionToLoad: true});
- // Now that we have permission, fetch the IM token
- this.setScalarToken();
+ const roomId = this.props.room.roomId;
+ console.info("Granting permission for widget to load: " + this.props.eventId);
+ const current = SettingsStore.getValue("allowedWidgets", roomId);
+ current[this.props.eventId] = true;
+ SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
+ this.setState({hasPermissionToLoad: true});
+
+ // Fetch a token for the integration manager, now that we're allowed to
+ this.setScalarToken();
+ }).catch(err => {
+ console.error(err);
+ // We don't really need to do anything about this - the user will just hit the button again.
+ });
}
_revokeWidgetPermission() {
- console.warn('Revoking permission to load widget - ', this.state.widgetUrl);
- localStorage.removeItem(this.state.widgetPermissionId);
- this.setState({hasPermissionToLoad: false});
+ const roomId = this.props.room.roomId;
+ console.info("Revoking permission for widget to load: " + this.props.eventId);
+ const current = SettingsStore.getValue("allowedWidgets", roomId);
+ current[this.props.eventId] = false;
+ SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
+ this.setState({hasPermissionToLoad: false});
- // Force the widget to be non-persistent
- ActiveWidgetStore.destroyPersistentWidget(this.props.id);
- const PersistedElement = sdk.getComponent("elements.PersistedElement");
- PersistedElement.destroyElement(this._persistKey);
+ // Force the widget to be non-persistent (able to be deleted/forgotten)
+ ActiveWidgetStore.destroyPersistentWidget(this.props.id);
+ const PersistedElement = sdk.getComponent("elements.PersistedElement");
+ PersistedElement.destroyElement(this._persistKey);
+ }).catch(err => {
+ console.error(err);
+ // We don't really need to do anything about this - the user will just hit the button again.
+ });
}
formatAppTileName() {
@@ -528,18 +543,59 @@ export default class AppTile extends React.Component {
}
}
- _onPopoutWidgetClick(e) {
+ _onPopoutWidgetClick() {
// Using Object.assign workaround as the following opens in a new window instead of a new tab.
// window.open(this._getSafeUrl(), '_blank', 'noopener=yes');
Object.assign(document.createElement('a'),
{ target: '_blank', href: this._getSafeUrl(), rel: 'noopener'}).click();
}
- _onReloadWidgetClick(e) {
+ _onReloadWidgetClick() {
// Reload iframe in this way to avoid cross-origin restrictions
this.refs.appFrame.src = this.refs.appFrame.src;
}
+ _getMenuOptions(ev) {
+ // TODO: This block of code gets copy/pasted a lot. We should make that happen less.
+ const menuOptions = {};
+ const buttonRect = ev.target.getBoundingClientRect();
+ // The window X and Y offsets are to adjust position when zoomed in to page
+ const buttonLeft = buttonRect.left + window.pageXOffset;
+ const buttonTop = buttonRect.top + window.pageYOffset;
+ // Align the right edge of the menu to the left edge of the button
+ menuOptions.right = window.innerWidth - buttonLeft;
+ // Align the menu vertically on whichever side of the button has more
+ // space available.
+ if (buttonTop < window.innerHeight / 2) {
+ menuOptions.top = buttonTop;
+ } else {
+ menuOptions.bottom = window.innerHeight - buttonTop;
+ }
+ return menuOptions;
+ }
+
+ _onContextMenuClick = (ev) => {
+ const WidgetContextMenu = sdk.getComponent('views.context_menus.WidgetContextMenu');
+ const menuOptions = {
+ ...this._getMenuOptions(ev),
+
+ // A revoke handler is always required
+ onRevokeClicked: this._onRevokeClicked,
+ };
+
+ const canUserModify = this._canUserModify();
+ const showEditButton = Boolean(this._scalarClient && canUserModify);
+ const showDeleteButton = (this.props.showDelete === undefined || this.props.showDelete) && canUserModify;
+ const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
+
+ if (showEditButton) menuOptions.onEditClicked = this._onEditClick;
+ if (showDeleteButton) menuOptions.onDeleteClicked = this._onDeleteClick;
+ if (showPictureSnapshotButton) menuOptions.onSnapshotClicked = this._onSnapshotClick;
+ if (this.props.showReload) menuOptions.onReloadClicked = this._onReloadWidgetClick;
+
+ createMenu(WidgetContextMenu, menuOptions);
+ };
+
render() {
let appTileBody;
@@ -549,7 +605,7 @@ export default class AppTile extends React.Component {
}
// Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
- // because that would allow the iframe to prgramatically remove the sandbox attribute, but
+ // because that would allow the iframe to programmatically remove the sandbox attribute, but
// this would only be for content hosted on the same origin as the riot client: anything
// hosted on the same origin as the client will get the same access as if you clicked
// a link to it.
@@ -569,12 +625,14 @@ export default class AppTile extends React.Component {
);
if (!this.state.hasPermissionToLoad) {
- const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
+ const isEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
appTileBody = (
@@ -596,12 +654,7 @@ export default class AppTile extends React.Component {
appTileBody = (
{ this.state.loading && loadingElement }
- { /*
- The "is" attribute in the following iframe tag is needed in order to enable rendering of the
- "allow" attribute, which is unknown to react 15.
- */ }