Dont' allow HostingSignupDialog to close

Except via confirmed cancel action or host setup success postmessage.

src/components/structures/HostingSignupAction.tsx

@@ -23,15 +23,34 @@ interface IProps {}
 interface IState {}
 
 export default class HostingSignupAction extends React.PureComponent<IProps, IState> {
-    private static openDialog() {
+    closingAllowed = false;
-        Modal.createDialog(
+    modalRef: any;
-            HostingSignupDialog, {}, "mx_HostingSignupDialog",
+
+    private openDialog = () => {
+        this.modalRef = Modal.createTrackedDialog(
+            'Hosting Signup Open',
+            '',
+            HostingSignupDialog,
+            {
+                requestClose: this.requestClose,
+            },
+            "mx_HostingSignupDialog",
+            false,
+            true,
+            {
+                onBeforeClose: async () => this.closingAllowed,
+            },
         );
     }
 
+    private requestClose = () => {
+        this.closingAllowed = true;
+        this.modalRef.close();
+    }
+
     public render(): React.ReactNode {
         return (
-            <div onClick={HostingSignupAction.openDialog} className="mx_HostingSignupAction">
+            <div onClick={this.openDialog} className="mx_HostingSignupAction">
                 Get your own personal Element!
             </div>
         );

src/components/structures/HostingSignupDialog.tsx

@@ -15,10 +15,14 @@ limitations under the License.
 */
 
 import * as React from "react";
+import * as sdk from '../../index';
+import Modal from "../../Modal";
 import SdkConfig from "../../SdkConfig";
 import {MatrixClientPeg} from "../../MatrixClientPeg";
 
-interface IProps {}
+interface IProps {
+    requestClose(): void,
+}
 
 interface IState {
     error: string,
@@ -49,6 +53,29 @@ export default class HostingSignupDialog extends React.PureComponent<IProps, ISt
                 // noinspection JSIgnoredPromiseFromCall
                 this.fetchOpenIDToken();
                 break;
+            case 'setup_complete':
+                this.onFinished(true);
+                break;
+        }
+    }
+
+    private onFinished = (result: boolean) => {
+        if (result) {
+            // We're done, close
+            this.props.requestClose();
+        } else {
+            const ConfirmDialog = sdk.getComponent('views.dialogs.ConfirmCloseHostingSignupDialog');
+            Modal.createDialog(
+                ConfirmDialog,
+                {
+                    onFinished: result => {
+                        if (result) {
+                            // TODO call an API endpoint to clean up?
+                            this.props.requestClose();
+                        }
+                    },
+                },
+            )
         }
     }
 
@@ -82,7 +109,13 @@ export default class HostingSignupDialog extends React.PureComponent<IProps, ISt
     }
 
     public render(): React.ReactNode {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
+            <BaseDialog
+                onFinished={this.onFinished}
+                title="Set up your own personal Element host"
+                hasCancel={true}
+            >
                 <div className="mx_HostingSignupDialog_container">
                     <iframe
                         src={this.hostingSignupUrl}
@@ -94,6 +127,7 @@ export default class HostingSignupDialog extends React.PureComponent<IProps, ISt
                         </div>
                     }
                 </div>
+            </BaseDialog>
         );
     }
 }

src/components/views/dialogs/ConfirmCloseHostingSignupDialog.js

@@ -0,0 +1,35 @@
+/*
+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 React from 'react';
+import * as sdk from '../../../index';
+
+/*
+ * A dialog for confirming closing the Hosting signup setup dialog.
+ */
+export default class ConfirmCloseHostingSignupDialog extends React.Component {
+    render() {
+        const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
+        return (
+            <QuestionDialog
+                onFinished={this.props.onFinished}
+                title="Confirm Abort Of Host Creation"
+                description="Are you sure you wish to abort creation of the host? The process cannot be continued."
+                button="Abort"
+            />
+        );
+    }
+}