From c7706ac3d54a4fa2de79f2e7f85a4e2fae8f3a22 Mon Sep 17 00:00:00 2001
From: Jason Robinson <mail@jasonrobinson.me>
Date: Wed, 21 Oct 2020 15:22:35 +0300
Subject: [PATCH] Add possibility for hosting provider IFrame

Add config option hosting_signup_iframe that
will render an action in the UserMenu and ProfileSettings
for setting up a host with some hosting provider
that provides an HTML to do that.

Add iframe for hosting provider signup content
---
 res/css/_components.scss                      |  1 +
 .../views/dialogs/_HostingProviderDialog.scss | 44 +++++++++++++++++++
 .../structures/HostingProviderDialog.tsx      | 33 ++++++++++++++
 .../structures/HostingProviderTrigger.tsx     | 39 ++++++++++++++++
 src/components/structures/UserMenu.tsx        | 12 +++++
 .../views/settings/ProfileSettings.js         |  9 ++++
 6 files changed, 138 insertions(+)
 create mode 100644 res/css/views/dialogs/_HostingProviderDialog.scss
 create mode 100644 src/components/structures/HostingProviderDialog.tsx
 create mode 100644 src/components/structures/HostingProviderTrigger.tsx

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 445ed70ff4..a021a41be5 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -72,6 +72,7 @@
 @import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_FeedbackDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
+@import "./views/dialogs/_HostingProviderDialog.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_InviteDialog.scss";
 @import "./views/dialogs/_KeyboardShortcutsDialog.scss";
diff --git a/res/css/views/dialogs/_HostingProviderDialog.scss b/res/css/views/dialogs/_HostingProviderDialog.scss
new file mode 100644
index 0000000000..0b0bdd4884
--- /dev/null
+++ b/res/css/views/dialogs/_HostingProviderDialog.scss
@@ -0,0 +1,44 @@
+/*
+Copyright 2020 Element
+
+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.
+*/
+
+.mx_HostingProviderDialog .mx_Dialog {
+    width: 60%;
+    height: 70%;
+    overflow: hidden;
+    padding: 0;
+    max-width: initial;
+    max-height: initial;
+    position: relative;
+}
+
+.mx_HostingProviderDialog_container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        background-color: #fff;
+    }
+}
+
+.mx_HostingProviderTrigger {
+    cursor: pointer;
+}
diff --git a/src/components/structures/HostingProviderDialog.tsx b/src/components/structures/HostingProviderDialog.tsx
new file mode 100644
index 0000000000..0ee3d32b3f
--- /dev/null
+++ b/src/components/structures/HostingProviderDialog.tsx
@@ -0,0 +1,33 @@
+/*
+Copyright 2020 Element
+
+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 SdkConfig from "../../SdkConfig";
+
+interface IProps {}
+
+interface IState {}
+
+export default class HostingProviderDialog extends React.PureComponent<IProps, IState> {
+    public render(): React.ReactNode {
+        const hostingSignupUrl = SdkConfig.get().hosting_signup_iframe;
+        return (
+            <div className="mx_HostingProviderDialog_container">
+                <iframe src={hostingSignupUrl} />
+            </div>
+        );
+    }
+}
diff --git a/src/components/structures/HostingProviderTrigger.tsx b/src/components/structures/HostingProviderTrigger.tsx
new file mode 100644
index 0000000000..bc7733ce60
--- /dev/null
+++ b/src/components/structures/HostingProviderTrigger.tsx
@@ -0,0 +1,39 @@
+/*
+Copyright 2020 Element
+
+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 Modal from "../../Modal";
+import HostingProviderDialog from "./HostingProviderDialog";
+
+interface IProps {}
+
+interface IState {}
+
+export default class HostingProviderTrigger extends React.PureComponent<IProps, IState> {
+    private static openDialog() {
+        Modal.createDialog(
+            HostingProviderDialog, {}, "mx_HostingProviderDialog",
+        );
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <div onClick={HostingProviderTrigger.openDialog} className="mx_HostingProviderTrigger">
+                Get your own personal Element!
+            </div>
+        );
+    }
+}
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 08bd472225..af6b7b762f 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -51,6 +51,7 @@ import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
 import ErrorDialog from "../views/dialogs/ErrorDialog";
 import EditCommunityPrototypeDialog from "../views/dialogs/EditCommunityPrototypeDialog";
 import {UIFeature} from "../../settings/UIFeature";
+import HostingProviderTrigger from "./HostingProviderTrigger";
 
 interface IProps {
     isMinimized: boolean;
@@ -311,6 +312,16 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 </div>
             );
         }
+        const hostingSignupIFrame = SdkConfig.get().hosting_signup_iframe;
+        let hostingIFrame;
+        if (hostingSignupIFrame) {
+            hostingIFrame = <div
+                className="mx_UserMenu_contextMenu_header mx_UserMenu_contextMenu_hostingLink"
+                onClick={this.onCloseMenu}
+            >
+                <HostingProviderTrigger />
+            </div>;
+        }
 
         let homeButton = null;
         if (this.hasHomePage) {
@@ -495,6 +506,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 </AccessibleTooltipButton>
             </div>
             {topSection}
+            {hostingIFrame}
             {primaryOptionList}
             {secondarySection}
         </IconizedContextMenu>;
diff --git a/src/components/views/settings/ProfileSettings.js b/src/components/views/settings/ProfileSettings.js
index c11a2e3a5e..ff29e73ed9 100644
--- a/src/components/views/settings/ProfileSettings.js
+++ b/src/components/views/settings/ProfileSettings.js
@@ -23,6 +23,7 @@ import * as sdk from "../../../index";
 import {OwnProfileStore} from "../../../stores/OwnProfileStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
+import SdkConfig from "../../../SdkConfig";
 
 export default class ProfileSettings extends React.Component {
     constructor() {
@@ -151,6 +152,13 @@ export default class ProfileSettings extends React.Component {
                 </a>
             </span>;
         }
+        const hostingSignupIFrame = SdkConfig.get().hosting_signup_iframe;
+        let hostingIFrame;
+        if (hostingSignupIFrame) {
+            hostingIFrame = <span className="mx_ProfileSettings_hostingIFrame">
+                Get your own personal Element!
+            </span>;
+        }
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
@@ -175,6 +183,7 @@ export default class ProfileSettings extends React.Component {
                         <p>
                             {this.state.userId}
                             {hostingSignup}
+                            {hostingIFrame}
                         </p>
                     </div>
                     <AvatarSetting