{icon}
{title}
diff --git a/src/components/views/auth/AuthBody.js b/src/components/views/auth/AuthBody.js
index 9a078efb52..fe20d76afb 100644
--- a/src/components/views/auth/AuthBody.js
+++ b/src/components/views/auth/AuthBody.js
@@ -17,10 +17,25 @@ limitations under the License.
'use strict';
import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
export default class AuthBody extends React.PureComponent {
+ static PropTypes = {
+ header: PropTypes.bool,
+ };
+
+ static defaultProps = {
+ header: true,
+ };
+
render() {
- return
+ const classes = {
+ 'mx_AuthBody': true,
+ 'mx_AuthBody_noHeader': !this.props.header,
+ };
+
+ return
{ this.props.children }
;
}
diff --git a/src/components/views/elements/crypto/VerificationQRCode.js b/src/components/views/elements/crypto/VerificationQRCode.js
new file mode 100644
index 0000000000..1cb5647317
--- /dev/null
+++ b/src/components/views/elements/crypto/VerificationQRCode.js
@@ -0,0 +1,56 @@
+/*
+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";
+import PropTypes from "prop-types";
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import * as qs from "qs";
+import QRCode from "qrcode-react";
+
+@replaceableComponent("views.elements.crypto.VerificationQRCode")
+export default class VerificationQRCode extends React.PureComponent {
+ static propTypes = {
+ // Common for all kinds of QR codes
+ keys: PropTypes.array.isRequired, // array of [Key ID, Base64 Key] pairs
+ action: PropTypes.string.isRequired,
+ keyholderUserId: PropTypes.string.isRequired,
+
+ // User verification use case only
+ secret: PropTypes.string,
+ otherUserKey: PropTypes.string, // Base64 key being verified
+ requestEventId: PropTypes.string,
+ };
+
+ static defaultProps = {
+ action: "verify",
+ };
+
+ render() {
+ const query = {
+ request: this.props.requestEventId,
+ action: this.props.action,
+ other_user_key: this.props.otherUserKey,
+ secret: this.props.secret,
+ };
+ for (const key of this.props.keys) {
+ query[`key_${key[0]}`] = key[1];
+ }
+
+ const uri = `https://matrix.to/#/${this.props.keyholderUserId}?${qs.stringify(query)}`;
+
+ return
+
+ ;
}
const memberDetails = (
@@ -1356,32 +1355,32 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
return (
- { closeButton }
- { avatarElement }
-
-
-
-
-
- { e2eIcon }
- { displayName }
-
-
- { user.userId }
-
- {presenceLabel}
- {statusLabel}
-
-
-
-
- { memberDetails &&
-
- { memberDetails }
-
- }
-
+ { closeButton }
+ { avatarElement }
+
+
+
+
+
+ { e2eIcon }
+ { displayName }
+
+
+ { user.userId }
+
+ {presenceLabel}
+ {statusLabel}
+
+
+
+
+ { memberDetails &&
+
+ { memberDetails }
+
+ }
+
{ securitySection }
Waiting for {request.otherUserId} to accept ...
Verify by emoji
;
+
+ if (request.requestEvent && request.requestEvent.getId()) {
+ const qrCodeKeys = [
+ [MatrixClientPeg.get().getDeviceId(), MatrixClientPeg.get().getDeviceEd25519Key()],
+ [MatrixClientPeg.get().getCrossSigningId(), MatrixClientPeg.get().getCrossSigningId()],
+ ];
+ const crossSigningInfo = MatrixClientPeg.get().getStoredCrossSigningForUser(request.otherUserId);
+ const qrCode = {request.otherUserId} is ready, start {verifyButton} or have them scan: {qrCode}
);
+ }
+
return ({request.otherUserId} is ready, start {verifyButton}
);
} else if (request.started) {
if (this.state.sasWaitingForOtherParty) {
diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js
index 545d1fd7ed..df5fe204d4 100644
--- a/src/components/views/rooms/E2EIcon.js
+++ b/src/components/views/rooms/E2EIcon.js
@@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
+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.
@@ -14,76 +15,102 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+import React, {useState} from "react";
+import PropTypes from "prop-types";
import classNames from 'classnames';
-import { _t } from '../../../languageHandler';
-import AccessibleButton from '../elements/AccessibleButton';
-import SettingsStore from '../../../settings/SettingsStore';
-export default function(props) {
- const { isUser } = props;
- const isNormal = props.status === "normal";
- const isWarning = props.status === "warning";
- const isVerified = props.status === "verified";
- const e2eIconClasses = classNames({
+import {_t, _td} from '../../../languageHandler';
+import {useFeatureEnabled} from "../../../hooks/useSettings";
+import AccessibleButton from "../elements/AccessibleButton";
+import Tooltip from "../elements/Tooltip";
+
+export const E2E_STATE = {
+ VERIFIED: "verified",
+ WARNING: "warning",
+ UNKNOWN: "unknown",
+ NORMAL: "normal",
+};
+
+const crossSigningUserTitles = {
+ [E2E_STATE.WARNING]: _td("This user has not verified all of their devices."),
+ [E2E_STATE.NORMAL]: _td("You have not verified this user. This user has verified all of their devices."),
+ [E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their devices."),
+};
+const crossSigningRoomTitles = {
+ [E2E_STATE.WARNING]: _td("Someone is using an unknown device"),
+ [E2E_STATE.NORMAL]: _td("This room is end-to-end encrypted"),
+ [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
+};
+
+const legacyUserTitles = {
+ [E2E_STATE.WARNING]: _td("Some devices for this user are not trusted"),
+ [E2E_STATE.VERIFIED]: _td("All devices for this user are trusted"),
+};
+const legacyRoomTitles = {
+ [E2E_STATE.WARNING]: _td("Some devices in this encrypted room are not trusted"),
+ [E2E_STATE.VERIFIED]: _td("All devices in this encrypted room are trusted"),
+};
+
+const E2EIcon = ({isUser, status, className, size, onClick}) => {
+ const [hover, setHover] = useState(false);
+
+ const classes = classNames({
mx_E2EIcon: true,
- mx_E2EIcon_warning: isWarning,
- mx_E2EIcon_normal: isNormal,
- mx_E2EIcon_verified: isVerified,
- }, props.className);
+ mx_E2EIcon_warning: status === E2E_STATE.WARNING,
+ mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
+ mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,
+ }, className);
+
let e2eTitle;
-
- const crossSigning = SettingsStore.isFeatureEnabled("feature_cross_signing");
+ const crossSigning = useFeatureEnabled("feature_cross_signing");
if (crossSigning && isUser) {
- if (isWarning) {
- e2eTitle = _t(
- "This user has not verified all of their devices.",
- );
- } else if (isNormal) {
- e2eTitle = _t(
- "You have not verified this user. " +
- "This user has verified all of their devices.",
- );
- } else if (isVerified) {
- e2eTitle = _t(
- "You have verified this user. " +
- "This user has verified all of their devices.",
- );
- }
+ e2eTitle = crossSigningUserTitles[status];
} else if (crossSigning && !isUser) {
- if (isWarning) {
- e2eTitle = _t(
- "Some users in this encrypted room are not verified by you or " +
- "they have not verified their own devices.",
- );
- } else if (isVerified) {
- e2eTitle = _t(
- "All users in this encrypted room are verified by you and " +
- "they have verified their own devices.",
- );
- }
+ e2eTitle = crossSigningRoomTitles[status];
} else if (!crossSigning && isUser) {
- if (isWarning) {
- e2eTitle = _t("Some devices for this user are not trusted");
- } else if (isVerified) {
- e2eTitle = _t("All devices for this user are trusted");
- }
+ e2eTitle = legacyUserTitles[status];
} else if (!crossSigning && !isUser) {
- if (isWarning) {
- e2eTitle = _t("Some devices in this encrypted room are not trusted");
- } else if (isVerified) {
- e2eTitle = _t("All devices in this encrypted room are trusted");
- }
+ e2eTitle = legacyRoomTitles[status];
}
- let style = null;
- if (props.size) {
- style = {width: `${props.size}px`, height: `${props.size}px`};
+ let style;
+ if (size) {
+ style = {width: `${size}px`, height: `${size}px`};
}
- const icon = ();
- if (props.onClick) {
- return ({ icon } );
- } else {
- return icon;
+ const onMouseOver = () => setHover(true);
+ const onMouseOut = () => setHover(false);
+
+ let tip;
+ if (hover) {
+ tip =
+ { tip }
+
+ );
+ }
+
+ return
+ { tip }
+ ;
+};
+
+E2EIcon.propTypes = {
+ isUser: PropTypes.bool,
+ status: PropTypes.oneOf(Object.values(E2E_STATE)),
+ className: PropTypes.string,
+ size: PropTypes.number,
+ onClick: PropTypes.func,
+};
+
+export default E2EIcon;
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 634b77c9e1..940515f02e 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -33,6 +33,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
import * as ObjectUtils from "../../../ObjectUtils";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {E2E_STATE} from "./E2EIcon";
const eventTileTypes = {
'm.room.message': 'messages.MessageEvent',
@@ -66,13 +67,6 @@ const stateEventTileTypes = {
'm.room.related_groups': 'messages.TextualEvent',
};
-const E2E_STATE = {
- VERIFIED: "verified",
- WARNING: "warning",
- UNKNOWN: "unknown",
- NORMAL: "normal",
-};
-
// Add all the Mjolnir stuff to the renderer
for (const evType of ALL_RULE_TYPES) {
stateEventTileTypes[evType] = 'messages.TextualEvent';
diff --git a/src/components/views/rooms/InviteOnlyIcon.js b/src/components/views/rooms/InviteOnlyIcon.js
new file mode 100644
index 0000000000..5afaa7f0f2
--- /dev/null
+++ b/src/components/views/rooms/InviteOnlyIcon.js
@@ -0,0 +1,51 @@
+/*
+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';
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+
+export default class InviteOnlyIcon extends React.Component {
+ constructor() {
+ super();
+
+ this.state = {
+ hover: false,
+ };
+ }
+
+ onHoverStart = () => {
+ this.setState({hover: true});
+ };
+
+ onHoverEnd = () => {
+ this.setState({hover: false});
+ };
+
+ render() {
+ const Tooltip = sdk.getComponent("elements.Tooltip");
+ let tooltip;
+ if (this.state.hover) {
+ tooltip = ![]({require("../../../../res/img/icon_person.svg")})
;
+ if (this.state.joinRule == "invite" && !dmUserId) {
+ privateIcon =
@@ -453,6 +554,7 @@ export default createReactClass({
{ privateIcon }
diff --git a/src/components/views/toasts/VerificationRequestToast.js b/src/components/views/toasts/VerificationRequestToast.js
index 479a3e3f93..f912984486 100644
--- a/src/components/views/toasts/VerificationRequestToast.js
+++ b/src/components/views/toasts/VerificationRequestToast.js
@@ -23,6 +23,7 @@ import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
import {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver";
import dis from "../../../dispatcher";
import ToastStore from "../../../stores/ToastStore";
+import Modal from "../../../Modal";
export default class VerificationRequestToast extends React.PureComponent {
constructor(props) {
@@ -65,22 +66,27 @@ export default class VerificationRequestToast extends React.PureComponent {
accept = async () => {
ToastStore.sharedInstance().dismissToast(this.props.toastKey);
const {request} = this.props;
- const {event} = request;
// no room id for to_device requests
- if (event.getRoomId()) {
- dis.dispatch({
- action: 'view_room',
- room_id: event.getRoomId(),
- should_peek: false,
- });
- }
try {
- await request.accept();
- dis.dispatch({
- action: "set_right_panel_phase",
- phase: RIGHT_PANEL_PHASES.EncryptionPanel,
- refireParams: {verificationRequest: request},
- });
+ if (request.channel.roomId) {
+ dis.dispatch({
+ action: 'view_room',
+ room_id: request.channel.roomId,
+ should_peek: false,
+ });
+ await request.accept();
+ dis.dispatch({
+ action: "set_right_panel_phase",
+ phase: RIGHT_PANEL_PHASES.EncryptionPanel,
+ refireParams: {verificationRequest: request},
+ });
+ } else if (request.channel.deviceId && request.verifier) {
+ // show to_device verifications in dialog still
+ const IncomingSasDialog = sdk.getComponent("views.dialogs.IncomingSasDialog");
+ Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
+ verifier: request.verifier,
+ }, null, /* priority = */ false, /* static = */ true);
+ }
} catch (err) {
console.error(err.message);
}
@@ -89,13 +95,13 @@ export default class VerificationRequestToast extends React.PureComponent {
render() {
const FormButton = sdk.getComponent("elements.FormButton");
const {request} = this.props;
- const {event} = request;
const userId = request.otherUserId;
- let nameLabel = event.getRoomId() ? userLabelForEventRoom(userId, event) : userId;
+ const roomId = request.channel.roomId;
+ let nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId;
// for legacy to_device verification requests
if (nameLabel === userId) {
const client = MatrixClientPeg.get();
- const user = client.getUser(event.getSender());
+ const user = client.getUser(userId);
if (user && user.displayName) {
nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
}
diff --git a/src/hooks/useSettings.js b/src/hooks/useSettings.js
new file mode 100644
index 0000000000..151a6369de
--- /dev/null
+++ b/src/hooks/useSettings.js
@@ -0,0 +1,52 @@
+/*
+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, useState} from "react";
+import SettingsStore from '../settings/SettingsStore';
+
+// Hook to fetch the value of a setting and dynamically update when it changes
+export const useSettingValue = (settingName, roomId = null, excludeDefault = false) => {
+ const [value, setValue] = useState(SettingsStore.getValue(settingName, roomId, excludeDefault));
+
+ useEffect(() => {
+ const ref = SettingsStore.watchSetting(settingName, roomId, () => {
+ setValue(SettingsStore.getValue(settingName, roomId, excludeDefault));
+ });
+ // clean-up
+ return () => {
+ SettingsStore.unwatchSetting(ref);
+ };
+ }, [settingName, roomId, excludeDefault]);
+
+ return value;
+};
+
+// Hook to fetch whether a feature is enabled and dynamically update when that changes
+export const useFeatureEnabled = (featureName, roomId = null) => {
+ const [enabled, setEnabled] = useState(SettingsStore.isFeatureEnabled(featureName, roomId));
+
+ useEffect(() => {
+ const ref = SettingsStore.watchSetting(featureName, roomId, () => {
+ setEnabled(SettingsStore.isFeatureEnabled(featureName, roomId));
+ });
+ // clean-up
+ return () => {
+ SettingsStore.unwatchSetting(ref);
+ };
+ }, [featureName, roomId]);
+
+ return enabled;
+};
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index e59805ccd7..3c758ecbfb 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -21,6 +21,9 @@
"Analytics": "Analytics",
"The information being sent to us to help make Riot.im better includes:": "The information being sent to us to help make Riot.im better includes:",
"Where this page includes identifiable information, such as a room, user or group ID, that data is removed before being sent to the server.": "Where this page includes identifiable information, such as a room, user or group ID, that data is removed before being sent to the server.",
+ "Error": "Error",
+ "Unable to load! Check your network connectivity and try again.": "Unable to load! Check your network connectivity and try again.",
+ "Dismiss": "Dismiss",
"Call Failed": "Call Failed",
"There are unknown devices in this room: if you proceed without verifying them, it will be possible for someone to eavesdrop on your call.": "There are unknown devices in this room: if you proceed without verifying them, it will be possible for someone to eavesdrop on your call.",
"Review Devices": "Review Devices",
@@ -105,9 +108,6 @@
"This action requires accessing the default identity server {
@@ -201,6 +208,26 @@ export default class BaseEventIndexManager {
throw new Error("Unimplemented");
}
+ /** Load events that contain an mxc URL to a file from the index.
+ *
+ * @param {object} args Arguments object for the method.
+ * @param {string} args.roomId The ID of the room for which the events
+ * should be loaded.
+ * @param {number} args.limit The maximum number of events to return.
+ * @param {string} args.fromEvent An event id of a previous event returned
+ * by this method. Passing this means that we are going to continue loading
+ * events from this point in the history.
+ * @param {string} args.direction The direction to which we should continue
+ * loading events from. This is used only if fromEvent is used as well.
+ *
+ * @return {Promise<[EventAndProfile]>} A promise that will resolve to an
+ * array of Matrix events that contain mxc URLs accompanied with the
+ * historic profile of the sender.
+ */
+ async loadFileEvents(args: LoadArgs): Promise<[EventAndProfile]> {
+ throw new Error("Unimplemented");
+ }
+
/**
* close our event index.
*
diff --git a/src/indexing/EventIndex.js b/src/indexing/EventIndex.js
index c912e31fa5..b6e29c455d 100644
--- a/src/indexing/EventIndex.js
+++ b/src/indexing/EventIndex.js
@@ -16,6 +16,7 @@ limitations under the License.
import PlatformPeg from "../PlatformPeg";
import {MatrixClientPeg} from "../MatrixClientPeg";
+import {EventTimeline, RoomMember} from 'matrix-js-sdk';
/*
* Event indexing class that wraps the platform specific event indexing.
@@ -170,7 +171,9 @@ export default class EventIndex {
return;
}
- const e = ev.toJSON().decrypted;
+ const jsonEvent = ev.toJSON();
+ const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
+
const profile = {
displayname: ev.sender.rawDisplayName,
avatar_url: ev.sender.getMxcAvatarUrl(),
@@ -305,10 +308,7 @@ export default class EventIndex {
// consume.
const events = filteredEvents.map((ev) => {
const jsonEvent = ev.toJSON();
-
- let e;
- if (ev.isEncrypted()) e = jsonEvent.decrypted;
- else e = jsonEvent;
+ const e = ev.isEncrypted() ? jsonEvent.decrypted : jsonEvent;
let profile = {};
if (e.sender in profiles) profile = profiles[e.sender];
@@ -406,4 +406,198 @@ export default class EventIndex {
const indexManager = PlatformPeg.get().getEventIndexingManager();
return indexManager.searchEventIndex(searchArgs);
}
+
+ /**
+ * Load events that contain URLs from the event index.
+ *
+ * @param {Room} room The room for which we should fetch events containing
+ * URLs
+ *
+ * @param {number} limit The maximum number of events to fetch.
+ *
+ * @param {string} fromEvent From which event should we continue fetching
+ * events from the index. This is only needed if we're continuing to fill
+ * the timeline, e.g. if we're paginating. This needs to be set to a event
+ * id of an event that was previously fetched with this function.
+ *
+ * @param {string} direction The direction in which we will continue
+ * fetching events. EventTimeline.BACKWARDS to continue fetching events that
+ * are older than the event given in fromEvent, EventTimeline.FORWARDS to
+ * fetch newer events.
+ *
+ * @returns {Promise} Resolves to an array of events that
+ * contain URLs.
+ */
+ async loadFileEvents(room, limit = 10, fromEvent = null, direction = EventTimeline.BACKWARDS) {
+ const client = MatrixClientPeg.get();
+ const indexManager = PlatformPeg.get().getEventIndexingManager();
+
+ const loadArgs = {
+ roomId: room.roomId,
+ limit: limit,
+ };
+
+ if (fromEvent) {
+ loadArgs.fromEvent = fromEvent;
+ loadArgs.direction = direction;
+ }
+
+ let events;
+
+ // Get our events from the event index.
+ try {
+ events = await indexManager.loadFileEvents(loadArgs);
+ } catch (e) {
+ console.log("EventIndex: Error getting file events", e);
+ return [];
+ }
+
+ const eventMapper = client.getEventMapper();
+
+ // Turn the events into MatrixEvent objects.
+ const matrixEvents = events.map(e => {
+ const matrixEvent = eventMapper(e.event);
+
+ const member = new RoomMember(room.roomId, matrixEvent.getSender());
+
+ // We can't really reconstruct the whole room state from our
+ // EventIndex to calculate the correct display name. Use the
+ // disambiguated form always instead.
+ member.name = e.profile.displayname + " (" + matrixEvent.getSender() + ")";
+
+ // This is sets the avatar URL.
+ const memberEvent = eventMapper(
+ {
+ content: {
+ membership: "join",
+ avatar_url: e.profile.avatar_url,
+ displayname: e.profile.displayname,
+ },
+ type: "m.room.member",
+ event_id: matrixEvent.getId() + ":eventIndex",
+ room_id: matrixEvent.getRoomId(),
+ sender: matrixEvent.getSender(),
+ origin_server_ts: matrixEvent.getTs(),
+ state_key: matrixEvent.getSender(),
+ },
+ );
+
+ // We set this manually to avoid emitting RoomMember.membership and
+ // RoomMember.name events.
+ member.events.member = memberEvent;
+ matrixEvent.sender = member;
+
+ return matrixEvent;
+ });
+
+ return matrixEvents;
+ }
+
+ /**
+ * Fill a timeline with events that contain URLs.
+ *
+ * @param {TimelineSet} timelineSet The TimelineSet the Timeline belongs to,
+ * used to check if we're adding duplicate events.
+ *
+ * @param {Timeline} timeline The Timeline which should be filed with
+ * events.
+ *
+ * @param {Room} room The room for which we should fetch events containing
+ * URLs
+ *
+ * @param {number} limit The maximum number of events to fetch.
+ *
+ * @param {string} fromEvent From which event should we continue fetching
+ * events from the index. This is only needed if we're continuing to fill
+ * the timeline, e.g. if we're paginating. This needs to be set to a event
+ * id of an event that was previously fetched with this function.
+ *
+ * @param {string} direction The direction in which we will continue
+ * fetching events. EventTimeline.BACKWARDS to continue fetching events that
+ * are older than the event given in fromEvent, EventTimeline.FORWARDS to
+ * fetch newer events.
+ *
+ * @returns {Promise} Resolves to true if events were added to the
+ * timeline, false otherwise.
+ */
+ async populateFileTimeline(timelineSet, timeline, room, limit = 10,
+ fromEvent = null, direction = EventTimeline.BACKWARDS) {
+ const matrixEvents = await this.loadFileEvents(room, limit, fromEvent, direction);
+
+ // If this is a normal fill request, not a pagination request, we need
+ // to get our events in the BACKWARDS direction but populate them in the
+ // forwards direction.
+ // This needs to happen because a fill request might come with an
+ // exisitng timeline e.g. if you close and re-open the FilePanel.
+ if (fromEvent === null) {
+ matrixEvents.reverse();
+ direction = direction == EventTimeline.BACKWARDS ? EventTimeline.FORWARDS: EventTimeline.BACKWARDS;
+ }
+
+ // Add the events to the timeline of the file panel.
+ matrixEvents.forEach(e => {
+ if (!timelineSet.eventIdToTimeline(e.getId())) {
+ timelineSet.addEventToTimeline(e, timeline, direction == EventTimeline.BACKWARDS);
+ }
+ });
+
+ // Set the pagination token to the oldest event that we retrieved.
+ if (matrixEvents.length > 0) {
+ timeline.setPaginationToken(matrixEvents[matrixEvents.length - 1].getId(), EventTimeline.BACKWARDS);
+ return true;
+ } else {
+ timeline.setPaginationToken("", EventTimeline.BACKWARDS);
+ return false;
+ }
+ }
+
+ /**
+ * Emulate a TimelineWindow pagination() request with the event index as the event source
+ *
+ * Might not fetch events from the index if the timeline already contains
+ * events that the window isn't showing.
+ *
+ * @param {Room} room The room for which we should fetch events containing
+ * URLs
+ *
+ * @param {TimelineWindow} timelineWindow The timeline window that should be
+ * populated with new events.
+ *
+ * @param {string} direction The direction in which we should paginate.
+ * EventTimeline.BACKWARDS to paginate back, EventTimeline.FORWARDS to
+ * paginate forwards.
+ *
+ * @param {number} limit The maximum number of events to fetch while
+ * paginating.
+ *
+ * @returns {Promise} Resolves to a boolean which is true if more
+ * events were successfully retrieved.
+ */
+ paginateTimelineWindow(room, timelineWindow, direction, limit) {
+ const tl = timelineWindow.getTimelineIndex(direction);
+
+ if (!tl) return Promise.resolve(false);
+ if (tl.pendingPaginate) return tl.pendingPaginate;
+
+ if (timelineWindow.extend(direction, limit)) {
+ return Promise.resolve(true);
+ }
+
+ const paginationMethod = async (timelineWindow, timeline, room, direction, limit) => {
+ const timelineSet = timelineWindow._timelineSet;
+ const token = timeline.timeline.getPaginationToken(direction);
+
+ const ret = await this.populateFileTimeline(timelineSet, timeline.timeline, room, limit, token, direction);
+
+ timeline.pendingPaginate = null;
+ timelineWindow.extend(direction, limit);
+
+ return ret;
+ };
+
+ const paginationPromise = paginationMethod(timelineWindow, tl, room, direction, limit);
+ tl.pendingPaginate = paginationPromise;
+
+ return paginationPromise;
+ }
}
diff --git a/src/utils/KeyVerificationStateObserver.js b/src/utils/KeyVerificationStateObserver.js
index 1a35319186..a29d2ea1aa 100644
--- a/src/utils/KeyVerificationStateObserver.js
+++ b/src/utils/KeyVerificationStateObserver.js
@@ -17,16 +17,15 @@ limitations under the License.
import {MatrixClientPeg} from '../MatrixClientPeg';
import { _t } from '../languageHandler';
-export function getNameForEventRoom(userId, mxEvent) {
- const roomId = mxEvent.getRoomId();
+export function getNameForEventRoom(userId, roomId) {
const client = MatrixClientPeg.get();
const room = client.getRoom(roomId);
- const member = room.getMember(userId);
+ const member = room && room.getMember(userId);
return member ? member.name : userId;
}
-export function userLabelForEventRoom(userId, mxEvent) {
- const name = getNameForEventRoom(userId, mxEvent);
+export function userLabelForEventRoom(userId, roomId) {
+ const name = getNameForEventRoom(userId, roomId);
if (name !== userId) {
return _t("%(name)s (%(userId)s)", {name, userId});
} else {
{ this.props.children }
;
}
diff --git a/src/components/views/elements/crypto/VerificationQRCode.js b/src/components/views/elements/crypto/VerificationQRCode.js
new file mode 100644
index 0000000000..1cb5647317
--- /dev/null
+++ b/src/components/views/elements/crypto/VerificationQRCode.js
@@ -0,0 +1,56 @@
+/*
+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";
+import PropTypes from "prop-types";
+import {replaceableComponent} from "../../../../utils/replaceableComponent";
+import * as qs from "qs";
+import QRCode from "qrcode-react";
+
+@replaceableComponent("views.elements.crypto.VerificationQRCode")
+export default class VerificationQRCode extends React.PureComponent {
+ static propTypes = {
+ // Common for all kinds of QR codes
+ keys: PropTypes.array.isRequired, // array of [Key ID, Base64 Key] pairs
+ action: PropTypes.string.isRequired,
+ keyholderUserId: PropTypes.string.isRequired,
+
+ // User verification use case only
+ secret: PropTypes.string,
+ otherUserKey: PropTypes.string, // Base64 key being verified
+ requestEventId: PropTypes.string,
+ };
+
+ static defaultProps = {
+ action: "verify",
+ };
+
+ render() {
+ const query = {
+ request: this.props.requestEventId,
+ action: this.props.action,
+ other_user_key: this.props.otherUserKey,
+ secret: this.props.secret,
+ };
+ for (const key of this.props.keys) {
+ query[`key_${key[0]}`] = key[1];
+ }
+
+ const uri = `https://matrix.to/#/${this.props.keyholderUserId}?${qs.stringify(query)}`;
+
+ return {
- _t("%(name)s wants to verify", {name: getNameForEventRoom(request.requestingUserId, mxEvent)})}
);
+ _t("%(name)s wants to verify", {name})}{
_t("You sent a verification request")}
);
subtitle = ({
- userLabelForEventRoom(request.receivingUserId, mxEvent)}
);
+ userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId())}
-
-
- { memberDetails &&
-
-
-
- - { e2eIcon } - { displayName } -
-{ user.userId }
-
- {presenceLabel}
- {statusLabel}
-
-
-
}
-
- { memberDetails }
-
-
+
+
+ { memberDetails &&
+
+
+
+ + { e2eIcon } + { displayName } +
+{ user.userId }
+
+ {presenceLabel}
+ {statusLabel}
+
+
+
}
+
{ securitySection }
+ { memberDetails }
+
+ {request.otherUserId} is ready, start {verifyButton} or have them scan: {qrCode}
); + } + return ({request.otherUserId} is ready, start {verifyButton}
); } else if (request.started) { if (this.state.sasWaitingForOtherParty) { diff --git a/src/components/views/rooms/E2EIcon.js b/src/components/views/rooms/E2EIcon.js index 545d1fd7ed..df5fe204d4 100644 --- a/src/components/views/rooms/E2EIcon.js +++ b/src/components/views/rooms/E2EIcon.js @@ -1,5 +1,6 @@ /* Copyright 2019 New Vector Ltd +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. @@ -14,76 +15,102 @@ See the License for the specific language governing permissions and limitations under the License. */ +import React, {useState} from "react"; +import PropTypes from "prop-types"; import classNames from 'classnames'; -import { _t } from '../../../languageHandler'; -import AccessibleButton from '../elements/AccessibleButton'; -import SettingsStore from '../../../settings/SettingsStore'; -export default function(props) { - const { isUser } = props; - const isNormal = props.status === "normal"; - const isWarning = props.status === "warning"; - const isVerified = props.status === "verified"; - const e2eIconClasses = classNames({ +import {_t, _td} from '../../../languageHandler'; +import {useFeatureEnabled} from "../../../hooks/useSettings"; +import AccessibleButton from "../elements/AccessibleButton"; +import Tooltip from "../elements/Tooltip"; + +export const E2E_STATE = { + VERIFIED: "verified", + WARNING: "warning", + UNKNOWN: "unknown", + NORMAL: "normal", +}; + +const crossSigningUserTitles = { + [E2E_STATE.WARNING]: _td("This user has not verified all of their devices."), + [E2E_STATE.NORMAL]: _td("You have not verified this user. This user has verified all of their devices."), + [E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their devices."), +}; +const crossSigningRoomTitles = { + [E2E_STATE.WARNING]: _td("Someone is using an unknown device"), + [E2E_STATE.NORMAL]: _td("This room is end-to-end encrypted"), + [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"), +}; + +const legacyUserTitles = { + [E2E_STATE.WARNING]: _td("Some devices for this user are not trusted"), + [E2E_STATE.VERIFIED]: _td("All devices for this user are trusted"), +}; +const legacyRoomTitles = { + [E2E_STATE.WARNING]: _td("Some devices in this encrypted room are not trusted"), + [E2E_STATE.VERIFIED]: _td("All devices in this encrypted room are trusted"), +}; + +const E2EIcon = ({isUser, status, className, size, onClick}) => { + const [hover, setHover] = useState(false); + + const classes = classNames({ mx_E2EIcon: true, - mx_E2EIcon_warning: isWarning, - mx_E2EIcon_normal: isNormal, - mx_E2EIcon_verified: isVerified, - }, props.className); + mx_E2EIcon_warning: status === E2E_STATE.WARNING, + mx_E2EIcon_normal: status === E2E_STATE.NORMAL, + mx_E2EIcon_verified: status === E2E_STATE.VERIFIED, + }, className); + let e2eTitle; - - const crossSigning = SettingsStore.isFeatureEnabled("feature_cross_signing"); + const crossSigning = useFeatureEnabled("feature_cross_signing"); if (crossSigning && isUser) { - if (isWarning) { - e2eTitle = _t( - "This user has not verified all of their devices.", - ); - } else if (isNormal) { - e2eTitle = _t( - "You have not verified this user. " + - "This user has verified all of their devices.", - ); - } else if (isVerified) { - e2eTitle = _t( - "You have verified this user. " + - "This user has verified all of their devices.", - ); - } + e2eTitle = crossSigningUserTitles[status]; } else if (crossSigning && !isUser) { - if (isWarning) { - e2eTitle = _t( - "Some users in this encrypted room are not verified by you or " + - "they have not verified their own devices.", - ); - } else if (isVerified) { - e2eTitle = _t( - "All users in this encrypted room are verified by you and " + - "they have verified their own devices.", - ); - } + e2eTitle = crossSigningRoomTitles[status]; } else if (!crossSigning && isUser) { - if (isWarning) { - e2eTitle = _t("Some devices for this user are not trusted"); - } else if (isVerified) { - e2eTitle = _t("All devices for this user are trusted"); - } + e2eTitle = legacyUserTitles[status]; } else if (!crossSigning && !isUser) { - if (isWarning) { - e2eTitle = _t("Some devices in this encrypted room are not trusted"); - } else if (isVerified) { - e2eTitle = _t("All devices in this encrypted room are trusted"); - } + e2eTitle = legacyRoomTitles[status]; } - let style = null; - if (props.size) { - style = {width: `${props.size}px`, height: `${props.size}px`}; + let style; + if (size) { + style = {width: `${size}px`, height: `${size}px`}; } - const icon = (); - if (props.onClick) { - return (
+ { tip }
+
;
+};
+
+E2EIcon.propTypes = {
+ isUser: PropTypes.bool,
+ status: PropTypes.oneOf(Object.values(E2E_STATE)),
+ className: PropTypes.string,
+ size: PropTypes.number,
+ onClick: PropTypes.func,
+};
+
+export default E2EIcon;
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 634b77c9e1..940515f02e 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -33,6 +33,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
import * as ObjectUtils from "../../../ObjectUtils";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {E2E_STATE} from "./E2EIcon";
const eventTileTypes = {
'm.room.message': 'messages.MessageEvent',
@@ -66,13 +67,6 @@ const stateEventTileTypes = {
'm.room.related_groups': 'messages.TextualEvent',
};
-const E2E_STATE = {
- VERIFIED: "verified",
- WARNING: "warning",
- UNKNOWN: "unknown",
- NORMAL: "normal",
-};
-
// Add all the Mjolnir stuff to the renderer
for (const evType of ALL_RULE_TYPES) {
stateEventTileTypes[evType] = 'messages.TextualEvent';
diff --git a/src/components/views/rooms/InviteOnlyIcon.js b/src/components/views/rooms/InviteOnlyIcon.js
new file mode 100644
index 0000000000..5afaa7f0f2
--- /dev/null
+++ b/src/components/views/rooms/InviteOnlyIcon.js
@@ -0,0 +1,51 @@
+/*
+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';
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+
+export default class InviteOnlyIcon extends React.Component {
+ constructor() {
+ super();
+
+ this.state = {
+ hover: false,
+ };
+ }
+
+ onHoverStart = () => {
+ this.setState({hover: true});
+ };
+
+ onHoverEnd = () => {
+ this.setState({hover: false});
+ };
+
+ render() {
+ const Tooltip = sdk.getComponent("elements.Tooltip");
+ let tooltip;
+ if (this.state.hover) {
+ tooltip =
+ { tooltip }
+
);
+ }
+}
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 8d36f02d02..53e10fa750 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -26,6 +26,7 @@ import Stickerpicker from './Stickerpicker';
import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
import ContentMessages from '../../../ContentMessages';
import E2EIcon from './E2EIcon';
+import SettingsStore from "../../../settings/SettingsStore";
function ComposerAvatar(props) {
const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -168,7 +169,6 @@ export default class MessageComposer extends React.Component {
constructor(props) {
super(props);
this.onInputStateChanged = this.onInputStateChanged.bind(this);
- this.onEvent = this.onEvent.bind(this);
this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
this._onTombstoneClick = this._onTombstoneClick.bind(this);
@@ -182,11 +182,6 @@ export default class MessageComposer extends React.Component {
}
componentDidMount() {
- // N.B. using 'event' rather than 'RoomEvents' otherwise the crypto handler
- // for 'event' fires *after* 'RoomEvent', and our room won't have yet been
- // marked as encrypted.
- // XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
- MatrixClientPeg.get().on("event", this.onEvent);
MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
this._waitForOwnMember();
@@ -210,7 +205,6 @@ export default class MessageComposer extends React.Component {
componentWillUnmount() {
if (MatrixClientPeg.get()) {
- MatrixClientPeg.get().removeListener("event", this.onEvent);
MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
}
if (this._roomStoreToken) {
@@ -218,13 +212,6 @@ export default class MessageComposer extends React.Component {
}
}
- onEvent(event) {
- if (event.getType() !== 'm.room.encryption') return;
- if (event.getRoomId() !== this.props.room.roomId) return;
- // TODO: put (encryption state??) in state
- this.forceUpdate();
- }
-
_onRoomStateEvents(ev, state) {
if (ev.getRoomId() !== this.props.room.roomId) return;
@@ -282,18 +269,33 @@ export default class MessageComposer extends React.Component {
}
renderPlaceholderText() {
- const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
- if (this.state.isQuoting) {
- if (roomIsEncrypted) {
- return _t('Send an encrypted reply…');
+ if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+ if (this.state.isQuoting) {
+ if (this.props.e2eStatus) {
+ return _t('Send an encrypted reply…');
+ } else {
+ return _t('Send a reply…');
+ }
} else {
- return _t('Send a reply (unencrypted)…');
+ if (this.props.e2eStatus) {
+ return _t('Send an encrypted message…');
+ } else {
+ return _t('Send a message…');
+ }
}
} else {
- if (roomIsEncrypted) {
- return _t('Send an encrypted message…');
+ if (this.state.isQuoting) {
+ if (this.props.e2eStatus) {
+ return _t('Send an encrypted reply…');
+ } else {
+ return _t('Send a reply (unencrypted)…');
+ }
} else {
- return _t('Send a message (unencrypted)…');
+ if (this.props.e2eStatus) {
+ return _t('Send an encrypted message…');
+ } else {
+ return _t('Send a message (unencrypted)…');
+ }
}
}
}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 15f0daa200..8a427e1c06 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -32,6 +32,7 @@ import {CancelButton} from './SimpleRoomHeader';
import SettingsStore from "../../../settings/SettingsStore";
import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
import E2EIcon from './E2EIcon';
+import InviteOnlyIcon from './InviteOnlyIcon';
export default createReactClass({
displayName: 'RoomHeader',
@@ -162,11 +163,12 @@ export default createReactClass({
const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
const joinRule = joinRules && joinRules.getContent().join_rule;
- const joinRuleClass = classNames("mx_RoomHeader_PrivateIcon",
- {"mx_RoomHeader_isPrivate": joinRule === "invite"});
- const privateIcon = SettingsStore.isFeatureEnabled("feature_cross_signing") ?
- :
- undefined;
+ let privateIcon;
+ if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+ if (joinRule == "invite") {
+ privateIcon = ;
+ if (this.state.joinRule == "invite" && !dmUserId) {
+ privateIcon =