{ previewBar }
@@ -1874,6 +1874,18 @@ export default class RoomView extends React.Component {
);
}
+ if (this.state.room?.isSpaceRoom()) {
+ return {
+ const members = useRoomMembers(room);
+ const count = members.length;
+
+ if (children) return children(count);
+ return count;
+};
+
+const useMyRoomMembership = (room: Room) => {
+ const [membership, setMembership] = useState(room.getMyMembership());
+ useEventEmitter(room, "Room.myMembership", () => {
+ setMembership(room.getMyMembership());
+ });
+ return membership;
+};
+
+const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
+ const cli = useContext(MatrixClientContext);
+ const myMembership = useMyRoomMembership(space);
+ const joinRule = space.getJoinRule();
+ const userId = cli.getUserId();
+
+ let joinButtons;
+ if (myMembership === "invite") {
+ joinButtons = setRoomName(i, ev.target.value)}
+ />;
+ });
+
+ const onNextClick = async () => {
+ setError("");
+ setBusy(true);
+ try {
+ await Promise.all(roomNames.map(name => name.trim()).filter(Boolean).map(name => {
+ return createRoom({
+ createOpts: {
+ preset: space.getJoinRule() === "public" ? Preset.PublicChat : Preset.PrivateChat,
+ name,
+ },
+ spinner: false,
+ encryption: false,
+ andView: false,
+ inlineErrors: true,
+ parentSpace: space,
+ });
+ }));
+ onFinished();
+ } catch (e) {
+ console.error("Failed to create initial space rooms", e);
+ setError(_t("Failed to create initial space rooms"));
+ }
+ setBusy(false);
+ };
+
+ let onClick = onFinished;
+ let buttonLabel = _t("Skip for now");
+ if (roomNames.some(name => name.trim())) {
+ onClick = onNextClick;
+ buttonLabel = busy ? _t("Creating rooms...") : _t("Next")
+ }
+
+ return (null);
+
+ return [] = [useRef(), useRef(), useRef()];
+ const [emailAddresses, setEmailAddress] = useStateArray(numFields, "");
+ const fields = new Array(numFields).fill(0).map((_, i) => {
+ const name = "emailAddress" + i;
+ return setEmailAddress(i, ev.target.value)}
+ ref={fieldRefs[i]}
+ onValidate={validateEmailRules}
+ />;
+ });
+
+ const onNextClick = async () => {
+ setError("");
+ for (let i = 0; i < fieldRefs.length; i++) {
+ const fieldRef = fieldRefs[i];
+ const valid = await fieldRef.current.validate({ allowEmpty: true });
+
+ if (valid === false) { // true/null are allowed
+ fieldRef.current.focus();
+ fieldRef.current.validate({ allowEmpty: true, focused: true });
+ return;
+ }
+ }
+
+ setBusy(true);
+ const targetIds = emailAddresses.map(name => name.trim()).filter(Boolean);
+ try {
+ const result = await inviteMultipleToRoom(space.roomId, targetIds);
+
+ const failedUsers = Object.keys(result.states).filter(a => result.states[a] === "error");
+ if (failedUsers.length > 0) {
+ console.log("Failed to invite users to space: ", result);
+ setError(_t("Failed to invite the following users to your space: %(csvUsers)s", {
+ csvUsers: failedUsers.join(", "),
+ }));
+ } else {
+ onFinished();
+ }
+ } catch (err) {
+ console.error("Failed to invite users to space: ", err);
+ setError(_t("We couldn't invite those users. Please check the users you want to invite and try again."));
+ }
+ setBusy(false);
+ };
+
+ return {
+ static contextType = MatrixClientContext;
+
+ private readonly creator: string;
+ private readonly dispatcherRef: string;
+ private readonly rightPanelStoreToken: EventSubscription;
+
+ constructor(props, context) {
+ super(props, context);
+
+ let phase = Phase.Landing;
+
+ this.creator = this.props.space.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
+ const showSetup = this.props.justCreatedOpts && this.context.getUserId() === this.creator;
+
+ if (showSetup) {
+ phase = this.props.justCreatedOpts.createOpts.preset === Preset.PublicChat
+ ? Phase.PublicCreateRooms : Phase.PrivateScope;
+ }
+
+ this.state = {
+ phase,
+ showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
+ };
+
+ this.dispatcherRef = defaultDispatcher.register(this.onAction);
+ this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
+ }
+
+ componentWillUnmount() {
+ defaultDispatcher.unregister(this.dispatcherRef);
+ this.rightPanelStoreToken.remove();
+ }
+
+ private onRightPanelStoreUpdate = () => {
+ this.setState({
+ showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
+ });
+ };
+
+ private onAction = (payload: ActionPayload) => {
+ if (payload.action !== Action.ViewUser && payload.action !== "view_3pid_invite") return;
+
+ if (payload.action === Action.ViewUser && payload.member) {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.SpaceMemberInfo,
+ refireParams: {
+ space: this.props.space,
+ member: payload.member,
+ },
+ });
+ } else if (payload.action === "view_3pid_invite" && payload.event) {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.Space3pidMemberInfo,
+ refireParams: {
+ space: this.props.space,
+ event: payload.event,
+ },
+ });
+ } else {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.SpaceMemberList,
+ refireParams: { space: this.props.space },
+ });
+ }
+ };
+
+ private renderBody() {
+ switch (this.state.phase) {
+ case Phase.Landing:
+ return this.setState({ phase: Phase.PublicShare })}
+ />;
+ case Phase.PublicShare:
+ return this.setState({ phase: Phase.Landing })}
+ />;
+
+ case Phase.PrivateScope:
+ return {
+ this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
+ }}
+ />;
+ case Phase.PrivateInvite:
+ return this.setState({ phase: Phase.PrivateCreateRooms })}
+ />;
+ case Phase.PrivateCreateRooms:
+ return this.setState({ phase: Phase.Landing })}
+ />;
+ }
+ }
+
+ render() {
+ const rightPanel = this.state.showRightPanel && this.state.phase === Phase.Landing
+ ?
+
+
+ { this.renderBody() }
+
+
+ ;
+ }
+}
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 5b936e822c..9bc5b6476f 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -15,7 +15,7 @@ limitations under the License.
*/
import React, {createRef} from 'react';
-import {_t} from "../../../languageHandler";
+import {_t, _td} from "../../../languageHandler";
import * as sdk from "../../../index";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
import {makeRoomPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
@@ -48,6 +48,7 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
export const KIND_DM = "dm";
export const KIND_INVITE = "invite";
+export const KIND_SPACE_INVITE = "space_invite";
export const KIND_CALL_TRANSFER = "call_transfer";
const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
@@ -309,7 +310,7 @@ interface IInviteDialogProps {
// not provided.
kind: string,
- // The room ID this dialog is for. Only required for KIND_INVITE.
+ // The room ID this dialog is for. Only required for KIND_INVITE and KIND_SPACE_INVITE.
roomId: string,
// The call to transfer. Only required for KIND_CALL_TRANSFER.
@@ -348,8 +349,8 @@ export default class InviteDialog extends React.PureComponent(initialSize: number, initialState: T | T[]): [T[], (i: number, v: T) => void] => {
+ const [data, setData] = useState(() => {
+ return Array.isArray(initialState) ? initialState : new Array(initialSize).fill(initialState);
+ });
+ return [data, (index: number, value: T) => setData(data => {
+ const copy = [...data];
+ copy[index] = value;
+ return copy;
+ })]
+};
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 1b29e65b40..ae12b195a0 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -998,6 +998,11 @@
"Expand space panel": "Expand space panel",
"Collapse space panel": "Collapse space panel",
"Home": "Home",
+ "Click to copy": "Click to copy",
+ "Copied!": "Copied!",
+ "Failed to copy": "Failed to copy",
+ "Share invite link": "Share invite link",
+ "Invite by email or username": "Invite by email or username",
"Remove": "Remove",
"This bridge was provisioned by ![]()
": "%(senderDisplayName)s changed the room avatar to ![]()
",
"Click here to see older messages.": "Click here to see older messages.",
"This room is a continuation of another conversation.": "This room is a continuation of another conversation.",
- "Copied!": "Copied!",
- "Failed to copy": "Failed to copy",
"Add an Integration": "Add an Integration",
"You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?",
"Edited at %(date)s": "Edited at %(date)s",
@@ -2164,8 +2167,11 @@
"Start a conversation with someone using their name or username (like
+
+ {_t("Decline")}
+
+
;
+ } else if (myMembership !== "join" && joinRule === "public") {
+ joinButtons =
+
;
+ }
+
+ return
+
;
+};
+
+const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState("");
+ const numFields = 3;
+ const placeholders = [_t("General"), _t("Random"), _t("Support")];
+ // TODO vary default prefills for "Just Me" spaces
+ const [roomNames, setRoomName] = useStateArray(numFields, [_t("General"), _t("Random"), ""]);
+ const fields = new Array(numFields).fill(0).map((_, i) => {
+ const name = "roomName" + i;
+ return
+
+ {(name) => {
+ const tags = { name: () =>
+
+
+
+ {(count) => count > 0 ? (
+ {
+ defaultDispatcher.dispatch({
+ action: Action.SetRightPanelPhase,
+ phase: RightPanelPhases.RoomMemberList,
+ refireParams: { space },
+ });
+ }}
+ >
+ { _t("%(count)s members", { count }) }
+
+ ) : null}
+
+
};
+ if (myMembership === "invite") {
+ const inviteSender = space.getMember(userId)?.events.member?.getSender();
+ const inviter = inviteSender && space.getMember(inviteSender);
+
+ if (inviteSender) {
+ return _t("{ name }
+
+
+ { joinButtons }
+
+
;
+};
+
+const SpaceSetupPublicShare = ({ space, onFinished }) => {
+ return { title }
+{ description }
+
+ { error && { error }
}
+ { fields }
+
+
+
+
+
;
+};
+
+const SpaceSetupPrivateScope = ({ onFinished }) => {
+ const [option, setOption] = useState{ _t("Share your public space") }
+{ _t("At the moment only you can see it.") }
+
+
+
+
+
+
+ ,
+ },
+ ]}
+ />
+
+
;
+};
+
+const validateEmailRules = withValidation({
+ rules: [{
+ key: "email",
+ test: ({ value }) => !value || Email.looksValid(value),
+ invalid: () => _t("Doesn't look like a valid email address"),
+ }],
+});
+
+const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState("");
+ const numFields = 3;
+ const fieldRefs: RefObject{ _t("Who are you working with?") }
+{ _t("Ensure the right people have access to the space.") }
+
+ { _t("Just Me") }
+{ _t("A private space just for you") }
+ ,
+ }, {
+ value: "meAndMyTeammates",
+ className: "mx_SpaceRoomView_privateScope_meAndMyTeammatesButton",
+ label: { _t("Me and my teammates") }
+{ _t("A private space for you and your teammates") }
+
+ onFinished(option !== "justMe")} />
+
+
+
;
+};
+
+export default class SpaceRoomView extends React.PureComponent{ _t("Invite your teammates") }
+{ _t("Ensure the right people have access to the space.") }
+
+ { error && { error }
}
+ { fields }
+
+
+ showSpaceInviteDialog(space.roomId)}
+ >
+ { _t("Invite by username") }
+
+
+
+
+ {_t("Skip for now")}
+
+
+ {
+ const permalinkCreator = new RoomPermalinkCreator(space);
+ permalinkCreator.load();
+ const success = await copyPlaintext(permalinkCreator.forRoom());
+ const text = success ? _t("Copied!") : _t("Failed to copy");
+ setCopiedText(text);
+ await sleep(10);
+ if (copiedText === text) { // if the text hasn't changed by another click then clear it after some time
+ setCopiedText(_t("Click to copy"));
+ }
+ }}
+ >
+ { _t("Share invite link") }
+ { copiedText }
+
+ {
+ showSpaceInviteDialog(space.roomId);
+ onFinished();
+ }}
+ >
+ { _t("Invite by email or username") }
+
+
;
+};
+
+export default SpacePublicShare;
diff --git a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts
index 4126e8a669..430fad6145 100644
--- a/src/dispatcher/payloads/SetRightPanelPhasePayload.ts
+++ b/src/dispatcher/payloads/SetRightPanelPhasePayload.ts
@@ -15,6 +15,7 @@ limitations under the License.
*/
import { VerificationRequest } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { Room } from "matrix-js-sdk/src/models/room";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
import { ActionPayload } from "../payloads";
@@ -35,4 +36,5 @@ export interface SetRightPanelPhaseRefireParams {
// XXX: The type for event should 'view_3pid_invite' action's payload
event?: any;
widgetId?: string;
+ space?: Room;
}
diff --git a/src/hooks/useStateArray.ts b/src/hooks/useStateArray.ts
new file mode 100644
index 0000000000..e8ff6efff0
--- /dev/null
+++ b/src/hooks/useStateArray.ts
@@ -0,0 +1,29 @@
+/*
+Copyright 2021 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 {useState} from "react";
+
+// Hook to simplify managing state of arrays of a common type
+export const useStateArray =