imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement third-party invite waiting room (#10229)

Browse source
This commit is contained in:
Michael Weimann 2023-03-06 12:08:04 +01:00 • committed by GitHub
parent 94950c6987
commit db6ee53535
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 388 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/components/structures/RoomView.tsx
View file

@ -116,6 +116,8 @@ import VoipUserMapper from "../../VoipUserMapper";
import { isCallEvent } from "./LegacyCallEventGrouper";
import { WidgetType } from "../../widgets/WidgetType";
import WidgetUtils from "../../utils/WidgetUtils";
import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../utils/room/shouldEncryptRoomWithSingle3rdPartyInvite";
import { WaitingForThirdPartyRoomView } from "./WaitingForThirdPartyRoomView";
const DEBUG = false;
const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000;
@ -231,6 +233,7 @@ export interface IRoomState {
}
interface LocalRoomViewProps {
localRoom: LocalRoom;
resizeNotifier: ResizeNotifier;
permalinkCreator: RoomPermalinkCreator;
roomView: RefObject<HTMLElement>;
@ -246,7 +249,7 @@ interface LocalRoomViewProps {
function LocalRoomView(props: LocalRoomViewProps): ReactElement {
const context = useContext(RoomContext);
const room = context.room as LocalRoom;
const encryptionEvent = context.room.currentState.getStateEvents(EventType.RoomEncryption)[0];
const encryptionEvent = props.localRoom.currentState.getStateEvents(EventType.RoomEncryption)[0];
let encryptionTile: ReactNode;
if (encryptionEvent) {
@ -261,8 +264,8 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
});
};
let statusBar: ReactElement;
let composer: ReactElement;
let statusBar: ReactElement | null = null;
let composer: ReactElement | null = null;
if (room.isError) {
const buttons = (
@ -281,7 +284,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
} else {
composer = (
<MessageComposer
room={context.room}
room={props.localRoom}
resizeNotifier={props.resizeNotifier}
permalinkCreator={props.permalinkCreator}
/>
@ -293,7 +296,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
<ErrorBoundary>
<RoomHeader
room={context.room}
searchInfo={null}
searchInfo={undefined}
inRoom={true}
onSearchClick={null}
onInviteClick={null}
@ -342,7 +345,7 @@ function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement
<ErrorBoundary>
<RoomHeader
room={context.room}
searchInfo={null}
searchInfo={undefined}
inRoom={true}
onSearchClick={null}
onInviteClick={null}
@ -373,7 +376,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
private roomView = createRef<HTMLElement>();
private searchResultsPanel = createRef<ScrollPanel>();
private messagePanel: TimelinePanel;
private messagePanel?: TimelinePanel;
private roomViewBody = createRef<HTMLDivElement>();
public static contextType = SDKContext;
@ -382,15 +385,19 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
public constructor(props: IRoomProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
if (!context.client) {
throw new Error("Unable to create RoomView without MatrixClient");
}
const llMembers = context.client.hasLazyLoadMembersEnabled();
this.state = {
roomId: null,
roomId: undefined,
roomLoading: true,
peekLoading: false,
shouldPeek: true,
membersLoaded: !llMembers,
numUnreadMessages: 0,
callState: null,
callState: undefined,
activeCall: null,
canPeek: false,
canSelfRedact: false,
@ -1920,10 +1927,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
);
}
private renderLocalRoomView(): ReactElement {
private renderLocalRoomView(localRoom: LocalRoom): ReactElement {
return (
<RoomContext.Provider value={this.state}>
<LocalRoomView
localRoom={localRoom}
resizeNotifier={this.props.resizeNotifier}
permalinkCreator={this.permalinkCreator}
roomView={this.roomView}
@ -1933,13 +1941,33 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
);
}
private renderWaitingForThirdPartyRoomView(inviteEvent: MatrixEvent): ReactElement {
return (
<RoomContext.Provider value={this.state}>
<WaitingForThirdPartyRoomView
resizeNotifier={this.props.resizeNotifier}
roomView={this.roomView}
inviteEvent={inviteEvent}
/>
</RoomContext.Provider>
);
}
public render(): React.ReactNode {
if (this.state.room instanceof LocalRoom) {
if (this.state.room.state === LocalRoomState.CREATING) {
return this.renderLocalRoomCreateLoader();
}
return this.renderLocalRoomView();
return this.renderLocalRoomView(this.state.room);
}
if (this.state.room) {
const { shouldEncrypt, inviteEvent } = shouldEncryptRoomWithSingle3rdPartyInvite(this.state.room);
if (shouldEncrypt) {
return this.renderWaitingForThirdPartyRoomView(inviteEvent);
}
}
if (!this.state.room) {

82
src/components/structures/WaitingForThirdPartyRoomView.tsx Normal file
View file

@ -0,0 +1,82 @@
/*
Copyright 2023 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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
import { RefObject } from "react";
import { useRoomContext } from "../../contexts/RoomContext";
import ResizeNotifier from "../../utils/ResizeNotifier";
import { E2EStatus } from "../../utils/ShieldUtils";
import ErrorBoundary from "../views/elements/ErrorBoundary";
import RoomHeader from "../views/rooms/RoomHeader";
import ScrollPanel from "./ScrollPanel";
import EventTileBubble from "../views/messages/EventTileBubble";
import NewRoomIntro from "../views/rooms/NewRoomIntro";
import { UnwrappedEventTile } from "../views/rooms/EventTile";
import { _t } from "../../languageHandler";
interface Props {
roomView: RefObject<HTMLElement>;
resizeNotifier: ResizeNotifier;
inviteEvent: MatrixEvent;
}
/**
* Component that displays a waiting room for an encrypted DM with a third party invite.
* If encryption by default is enabled, DMs with a third party invite should be encrypted as well.
* To avoid UTDs, users are shown a waiting room until the others have joined.
*/
export const WaitingForThirdPartyRoomView: React.FC<Props> = ({ roomView, resizeNotifier, inviteEvent }) => {
const context = useRoomContext();
return (
<div className="mx_RoomView mx_RoomView--local">
<ErrorBoundary>
<RoomHeader
room={context.room}
inRoom={true}
onSearchClick={null}
onInviteClick={null}
onForgetClick={null}
e2eStatus={E2EStatus.Normal}
onAppsClick={null}
appsShown={false}
excludedRightPanelPhaseButtons={[]}
showButtons={false}
enableRoomOptionsMenu={false}
viewingCall={false}
activeCall={null}
/>
<main className="mx_RoomView_body" ref={roomView}>
<div className="mx_RoomView_timeline">
<ScrollPanel className="mx_RoomView_messagePanel" resizeNotifier={resizeNotifier}>
<EventTileBubble
className="mx_cryptoEvent mx_cryptoEvent_icon"
title={_t("Waiting for users to join Element")}
subtitle={_t(
"Once invited users have joined Element, you will be able to chat and the room will be end-to-end encrypted",
)}
/>
<NewRoomIntro />
<UnwrappedEventTile mxEvent={inviteEvent} />
</ScrollPanel>
</div>
</main>
</ErrorBoundary>
</div>
);
};

32
src/components/views/rooms/NewRoomIntro.tsx
View file

@ -39,6 +39,7 @@ import { shouldShowComponent } from "../../../customisations/helpers/UIComponent
import { UIComponent } from "../../../settings/UIFeature";
import { privateShouldBeEncrypted } from "../../../utils/rooms";
import { LocalRoom } from "../../../models/LocalRoom";
import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../../utils/room/shouldEncryptRoomWithSingle3rdPartyInvite";
function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
@ -46,21 +47,40 @@ function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room):
return isPublic || !privateShouldBeEncrypted() || isEncrypted;
}
const determineIntroMessage = (room: Room, encryptedSingle3rdPartyInvite: boolean): string => {
if (room instanceof LocalRoom) {
return _td("Send your first message to invite <displayName/> to chat");
}
if (encryptedSingle3rdPartyInvite) {
return _td("Once everyone has joined, you’ll be able to chat");
}
return _td("This is the beginning of your direct message history with <displayName/>.");
};
const NewRoomIntro: React.FC = () => {
const cli = useContext(MatrixClientContext);
const { room, roomId } = useContext(RoomContext);
if (!room || !roomId) {
throw new Error("Unable to create a NewRoomIntro without room and roomId");
}
const isLocalRoom = room instanceof LocalRoom;
const dmPartner = isLocalRoom ? room.targets[0]?.userId : DMRoomMap.shared().getUserIdForRoomId(roomId);
let body: JSX.Element;
if (dmPartner) {
let introMessage = _td("This is the beginning of your direct message history with <displayName/>.");
const { shouldEncrypt: encryptedSingle3rdPartyInvite } = shouldEncryptRoomWithSingle3rdPartyInvite(room);
const introMessage = determineIntroMessage(room, encryptedSingle3rdPartyInvite);
let caption: string | undefined;
if (isLocalRoom) {
introMessage = _td("Send your first message to invite <displayName/> to chat");
} else if (room.getJoinedMemberCount() + room.getInvitedMemberCount() === 2) {
if (
!(room instanceof LocalRoom) &&
!encryptedSingle3rdPartyInvite &&
room.getJoinedMemberCount() + room.getInvitedMemberCount() === 2
) {
caption = _t("Only the two of you are in this conversation, unless either of you invites anyone to join.");
}
@ -98,7 +118,7 @@ const NewRoomIntro: React.FC = () => {
} else {
const inRoom = room && room.getMyMembership() === "join";
const topic = room.currentState.getStateEvents(EventType.RoomTopic, "")?.getContent()?.topic;
const canAddTopic = inRoom && room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getUserId());
const canAddTopic = inRoom && room.currentState.maySendStateEvent(EventType.RoomTopic, cli.getSafeUserId());
const onTopicClick = (): void => {
defaultDispatcher.dispatch(
@ -110,7 +130,7 @@ const NewRoomIntro: React.FC = () => {
);
// focus the topic field to help the user find it as it'll gain an outline
setImmediate(() => {
window.document.getElementById("profileTopic").focus();
window.document.getElementById("profileTopic")?.focus();
});
};