= React.createRef();
+ private readonly config: IHostSignupConfig;
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ completed: false,
+ error: null,
+ minimized: false,
+ };
+
+ this.config = SdkConfig.get().hostSignup;
+ }
+
+ private messageHandler = async (message: IPostmessage) => {
+ if (!this.config.url.startsWith(message.origin)) {
+ return;
+ }
+ switch (message.data.action) {
+ case PostmessageAction.HostSignupAccountDetailsRequest:
+ this.onAccountDetailsRequest();
+ break;
+ case PostmessageAction.Maximize:
+ this.setState({
+ minimized: false,
+ });
+ break;
+ case PostmessageAction.Minimize:
+ this.setState({
+ minimized: true,
+ });
+ break;
+ case PostmessageAction.SetupComplete:
+ this.setState({
+ completed: true,
+ });
+ break;
+ case PostmessageAction.CloseDialog:
+ return this.closeDialog();
+ }
+ }
+
+ private maximizeDialog = () => {
+ this.setState({
+ minimized: false,
+ });
+ // Send this action to the iframe so it can act accordingly
+ this.sendMessage({
+ action: PostmessageAction.Maximize,
+ });
+ }
+
+ private minimizeDialog = () => {
+ this.setState({
+ minimized: true,
+ });
+ // Send this action to the iframe so it can act accordingly
+ this.sendMessage({
+ action: PostmessageAction.Minimize,
+ });
+ }
+
+ private closeDialog = async () => {
+ window.removeEventListener("message", this.messageHandler);
+ // Ensure we destroy the host signup persisted element
+ PersistedElement.destroyElement("host_signup");
+ // Finally clear the flag in
+ return HostSignupStore.instance.setHostSignupActive(false);
+ }
+
+ private onCloseClick = async () => {
+ if (this.state.completed) {
+ // We're done, close
+ return this.closeDialog();
+ } else {
+ Modal.createDialog(
+ QuestionDialog,
+ {
+ title: _t("Confirm abort of host creation"),
+ description: _t(
+ "Are you sure you wish to abort creation of the host? The process cannot be continued.",
+ ),
+ button: _t("Abort"),
+ onFinished: result => {
+ if (result) {
+ return this.closeDialog();
+ }
+ },
+ },
+ );
+ }
+ }
+
+ private sendMessage = (message: IPostmessageResponseData) => {
+ this.iframeRef.current.contentWindow.postMessage(message, this.config.url);
+ }
+
+ private async sendAccountDetails() {
+ const openIdToken = await MatrixClientPeg.get().getOpenIdToken();
+ if (!openIdToken || !openIdToken.access_token) {
+ console.warn("Failed to connect to homeserver for OpenID token.")
+ this.setState({
+ completed: true,
+ error: _t("Failed to connect to your homeserver. Please close this dialog and try again."),
+ });
+ return;
+ }
+ this.sendMessage({
+ action: PostmessageAction.HostSignupAccountDetails,
+ account: {
+ accessToken: await MatrixClientPeg.get().getAccessToken(),
+ name: OwnProfileStore.instance.displayName,
+ openIdToken: openIdToken.access_token,
+ serverName: await MatrixClientPeg.get().getDomain(),
+ userLocalpart: await MatrixClientPeg.get().getUserIdLocalpart(),
+ termsAccepted: true,
+ },
+ });
+ }
+
+ private onAccountDetailsDialogFinished = async (result) => {
+ if (result) {
+ return this.sendAccountDetails();
+ }
+ return this.closeDialog();
+ }
+
+ private onAccountDetailsRequest = () => {
+ const textComponent = (
+ <>
+
+ {_t("Continuing temporarily allows the %(hostSignupBrand)s setup process to access your " +
+ "account to fetch verified email addresses. This data is not stored.", {
+ hostSignupBrand: this.config.brand,
+ })}
+
+
+ {_t("Learn more in our , and .",
+ {},
+ {
+ cookiePolicyLink: () => (
+
+ {_t("Cookie Policy")}
+
+ ),
+ privacyPolicyLink: () => (
+
+ {_t("Privacy Policy")}
+
+ ),
+ termsOfServiceLink: () => (
+
+ {_t("Terms of Service")}
+
+ ),
+ },
+ )}
+
+ >
+ );
+ Modal.createDialog(
+ QuestionDialog,
+ {
+ title: _t("You should know"),
+ description: textComponent,
+ button: _t("Continue"),
+ onFinished: this.onAccountDetailsDialogFinished,
+ },
+ );
+ }
+
+ public componentDidMount() {
+ window.addEventListener("message", this.messageHandler);
+ }
+
+ public componentWillUnmount() {
+ if (HostSignupStore.instance.isHostSignupActive) {
+ // Run the close dialog actions if we're still active, otherwise good to go
+ return this.closeDialog();
+ }
+ }
+
+ public render(): React.ReactNode {
+ return (
+
+
+
+
+ {this.state.minimized &&
+
+
+ {_t("%(hostSignupBrand)s Setup", {
+ hostSignupBrand: this.config.brand,
+ })}
+
+
+
+ }
+ {!this.state.minimized &&
+
+ }
+ {this.state.error &&
+
+ {this.state.error}
+
+ }
+ {!this.state.error &&
+
+ }
+
+
+
+
+ );
+ }
+}
diff --git a/src/components/views/dialogs/HostSignupDialogTypes.ts b/src/components/views/dialogs/HostSignupDialogTypes.ts
new file mode 100644
index 0000000000..9f78592804
--- /dev/null
+++ b/src/components/views/dialogs/HostSignupDialogTypes.ts
@@ -0,0 +1,56 @@
+/*
+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.
+*/
+
+export enum PostmessageAction {
+ CloseDialog = "close_dialog",
+ HostSignupAccountDetails = "host_signup_account_details",
+ HostSignupAccountDetailsRequest = "host_signup_account_details_request",
+ Minimize = "host_signup_minimize",
+ Maximize = "host_signup_maximize",
+ SetupComplete = "setup_complete",
+}
+
+interface IAccountData {
+ accessToken: string;
+ name: string;
+ openIdToken: string;
+ serverName: string;
+ userLocalpart: string;
+ termsAccepted: boolean;
+}
+
+export interface IPostmessageRequestData {
+ action: PostmessageAction;
+}
+
+export interface IPostmessageResponseData {
+ action: PostmessageAction;
+ account?: IAccountData;
+}
+
+export interface IPostmessage {
+ data: IPostmessageRequestData;
+ origin: string;
+}
+
+export interface IHostSignupConfig {
+ brand: string;
+ cookiePolicyUrl: string;
+ domains: Array;
+ privacyPolicyUrl: string;
+ termsOfServiceUrl: string;
+ url: string;
+}
diff --git a/src/components/views/host_signup/HostSignupContainer.tsx b/src/components/views/host_signup/HostSignupContainer.tsx
new file mode 100644
index 0000000000..6445454994
--- /dev/null
+++ b/src/components/views/host_signup/HostSignupContainer.tsx
@@ -0,0 +1,36 @@
+/*
+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 React, { useState } from 'react';
+import HostSignupDialog from "../dialogs/HostSignupDialog";
+import { HostSignupStore } from "../../../stores/HostSignupStore";
+import { useEventEmitter } from "../../../hooks/useEventEmitter";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+
+const HostSignupContainer = () => {
+ const [isActive, setIsActive] = useState(HostSignupStore.instance.isHostSignupActive);
+ useEventEmitter(HostSignupStore.instance, UPDATE_EVENT, () => {
+ setIsActive(HostSignupStore.instance.isHostSignupActive);
+ });
+
+ return
+ {isActive &&
+
+ }
+
;
+};
+
+export default HostSignupContainer
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index d5eb4de126..a9d31bb9f2 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2088,6 +2088,19 @@
"Please view existing bugs on Github first. No match? Start a new one.": "Please view existing bugs on Github first. No match? Start a new one.",
"PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.": "PRO TIP: If you start a bug, please submit debug logs to help us track down the problem.",
"Send feedback": "Send feedback",
+ "Confirm abort of host creation": "Confirm abort of host creation",
+ "Are you sure you wish to abort creation of the host? The process cannot be continued.": "Are you sure you wish to abort creation of the host? The process cannot be continued.",
+ "Abort": "Abort",
+ "Failed to connect to your homeserver. Please close this dialog and try again.": "Failed to connect to your homeserver. Please close this dialog and try again.",
+ "Continuing temporarily allows the %(hostSignupBrand)s setup process to access your account to fetch verified email addresses. This data is not stored.": "Continuing temporarily allows the %(hostSignupBrand)s setup process to access your account to fetch verified email addresses. This data is not stored.",
+ "Learn more in our , and .": "Learn more in our , and .",
+ "Cookie Policy": "Cookie Policy",
+ "Privacy Policy": "Privacy Policy",
+ "Terms of Service": "Terms of Service",
+ "You should know": "You should know",
+ "%(hostSignupBrand)s Setup": "%(hostSignupBrand)s Setup",
+ "Maximize dialog": "Maximize dialog",
+ "Minimize dialog": "Minimize dialog",
"Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.": "Verify this user to mark them as trusted. Trusting users gives you extra peace of mind when using end-to-end encrypted messages.",
"Verifying this user will mark their session as trusted, and also mark your session as trusted to them.": "Verifying this user will mark their session as trusted, and also mark your session as trusted to them.",
"Verify this device to mark it as trusted. Trusting this device gives you and other users extra peace of mind when using end-to-end encrypted messages.": "Verify this device to mark it as trusted. Trusting this device gives you and other users extra peace of mind when using end-to-end encrypted messages.",
@@ -2238,7 +2251,6 @@
"Find others by phone or email": "Find others by phone or email",
"Be found by phone or email": "Be found by phone or email",
"Use bots, bridges, widgets and sticker packs": "Use bots, bridges, widgets and sticker packs",
- "Terms of Service": "Terms of Service",
"To continue you need to accept the terms of this service.": "To continue you need to accept the terms of this service.",
"Service": "Service",
"Summary": "Summary",
@@ -2438,6 +2450,7 @@
"Send a Direct Message": "Send a Direct Message",
"Explore Public Rooms": "Explore Public Rooms",
"Create a Group Chat": "Create a Group Chat",
+ "Upgrade to pro": "Upgrade to pro",
"Explore rooms": "Explore rooms",
"Failed to reject invitation": "Failed to reject invitation",
"Cannot create rooms in this community": "Cannot create rooms in this community",
diff --git a/src/stores/HostSignupStore.ts b/src/stores/HostSignupStore.ts
new file mode 100644
index 0000000000..d50a7f6b43
--- /dev/null
+++ b/src/stores/HostSignupStore.ts
@@ -0,0 +1,49 @@
+/*
+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 defaultDispatcher from "../dispatcher/dispatcher";
+import {AsyncStore} from "./AsyncStore";
+import {ActionPayload} from "../dispatcher/payloads";
+
+interface IState {
+ hostSignupActive?: boolean;
+}
+
+export class HostSignupStore extends AsyncStore {
+ private static internalInstance = new HostSignupStore();
+
+ private constructor() {
+ super(defaultDispatcher, {hostSignupActive: false});
+ }
+
+ public static get instance(): HostSignupStore {
+ return HostSignupStore.internalInstance;
+ }
+
+ public get isHostSignupActive(): boolean {
+ return this.state.hostSignupActive;
+ }
+
+ public async setHostSignupActive(status: boolean) {
+ return this.updateState({
+ hostSignupActive: status,
+ });
+ }
+
+ protected onDispatch(payload: ActionPayload) {
+ // Nothing to do
+ }
+}