Merge pull request #4029 from matrix-org/bwindels/onlyexplicitdismissmodal

Mark AccessSecretStorageDialog to not be closed by clicking background

src/CrossSigningManager.js

@@ -70,6 +70,7 @@ async function getSecretStorageKey({ keys: keyInfos }) {
         sdk.getComponent("dialogs.secretstorage.AccessSecretStorageDialog");
     const { finished } = Modal.createTrackedDialog("Access Secret Storage dialog", "",
         AccessSecretStorageDialog,
+        /* props= */
         {
             keyInfo: info,
             checkPrivateKey: async (input) => {
@@ -77,6 +78,22 @@ async function getSecretStorageKey({ keys: keyInfos }) {
                 return MatrixClientPeg.get().checkSecretStoragePrivateKey(key, info.pubkey);
             },
         },
+        /* className= */ null,
+        /* isPriorityModal= */ false,
+        /* isStaticModal= */ false,
+        /* options= */ {
+            onBeforeClose: async (reason) => {
+                if (reason !== "backgroundClick") {
+                    return true;
+                }
+                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                const [sure] = await Modal.createDialog(QuestionDialog, {
+                    title: _t("Cancel entering passphrase?"),
+                    description: _t("If you cancel now, you won't complete your secret storage operation!"),
+                }).finished;
+                return sure;
+            },
+        },
     );
     const [input] = await finished;
     if (!input) {

src/Modal.js

@@ -47,7 +47,7 @@ class ModalManager {
                } */
         ];
 
-        this.closeAll = this.closeAll.bind(this);
+        this.onBackgroundClick = this.onBackgroundClick.bind(this);
     }
 
     hasDialogs() {
@@ -106,7 +106,7 @@ class ModalManager {
         return this.appendDialogAsync(...rest);
     }
 
-    _buildModal(prom, props, className) {
+    _buildModal(prom, props, className, options) {
         const modal = {};
 
         // never call this from onFinished() otherwise it will loop
@@ -124,13 +124,27 @@ class ModalManager {
         );
         modal.onFinished = props ? props.onFinished : null;
         modal.className = className;
+        modal.onBeforeClose = options.onBeforeClose;
+        modal.beforeClosePromise = null;
+        modal.close = closeDialog;
+        modal.closeReason = null;
 
         return {modal, closeDialog, onFinishedProm};
     }
 
     _getCloseFn(modal, props) {
         const deferred = defer();
-        return [(...args) => {
+        return [async (...args) => {
+            if (modal.beforeClosePromise) {
+                await modal.beforeClosePromise;
+            } else if (modal.onBeforeClose) {
+                modal.beforeClosePromise = modal.onBeforeClose(modal.closeReason);
+                const shouldClose = await modal.beforeClosePromise;
+                modal.beforeClosePromise = null;
+                if (!shouldClose) {
+                    return;
+                }
+            }
             deferred.resolve(args);
             if (props && props.onFinished) props.onFinished.apply(null, args);
             const i = this._modals.indexOf(modal);
@@ -156,6 +170,12 @@ class ModalManager {
         }, deferred.promise];
     }
 
+    /**
+     * @callback onBeforeClose
+     * @param {string?} reason either "backgroundClick" or null
+     * @return {Promise<bool>} whether the dialog should close
+     */
+
     /**
      * Open a modal view.
      *
@@ -183,11 +203,12 @@ class ModalManager {
      *                                 also be removed from the stack. This is not compatible
      *                                 with being a priority modal. Only one modal can be
      *                                 static at a time.
+     * @param {Object} options? extra options for the dialog
+     * @param {onBeforeClose} options.onBeforeClose a callback to decide whether to close the dialog
      * @returns {object} Object with 'close' parameter being a function that will close the dialog
      */
-    createDialogAsync(prom, props, className, isPriorityModal, isStaticModal) {
+    createDialogAsync(prom, props, className, isPriorityModal, isStaticModal, options = {}) {
-        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className);
+        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className, options);
-
         if (isPriorityModal) {
             // XXX: This is destructive
             this._priorityModal = modal;
@@ -206,7 +227,7 @@ class ModalManager {
     }
 
     appendDialogAsync(prom, props, className) {
-        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className);
+        const {modal, closeDialog, onFinishedProm} = this._buildModal(prom, props, className, {});
 
         this._modals.push(modal);
         this._reRender();
@@ -216,24 +237,22 @@ class ModalManager {
         };
     }
 
-    closeAll() {
+    onBackgroundClick() {
-        const modalsToClose = [...this._modals, this._priorityModal];
+        const modal = this._getCurrentModal();
-        this._modals = [];
+        if (!modal) {
-        this._priorityModal = null;
+            return;
-
-        if (this._staticModal && modalsToClose.length === 0) {
-            modalsToClose.push(this._staticModal);
-            this._staticModal = null;
         }
+        // we want to pass a reason to the onBeforeClose
+        // callback, but close is currently defined to
+        // pass all number of arguments to the onFinished callback
+        // so, pass the reason to close through a member variable
+        modal.closeReason = "backgroundClick";
+        modal.close();
+        modal.closeReason = null;
+    }
 
-        for (let i = 0; i < modalsToClose.length; i++) {
+    _getCurrentModal() {
-            const m = modalsToClose[i];
+        return this._priorityModal ? this._priorityModal : (this._modals[0] || this._staticModal);
-            if (m && m.onFinished) {
-                m.onFinished(false);
-            }
-        }
-
-        this._reRender();
     }
 
     _reRender() {
@@ -264,7 +283,7 @@ class ModalManager {
                     <div className="mx_Dialog">
                         { this._staticModal.elem }
                     </div>
-                    <div className="mx_Dialog_background mx_Dialog_staticBackground" onClick={this.closeAll}></div>
+                    <div className="mx_Dialog_background mx_Dialog_staticBackground" onClick={this.onBackgroundClick}></div>
                 </div>
             );
 
@@ -274,8 +293,8 @@ class ModalManager {
             ReactDOM.unmountComponentAtNode(this.getOrCreateStaticContainer());
         }
 
-        const modal = this._priorityModal ? this._priorityModal : this._modals[0];
+        const modal = this._getCurrentModal();
-        if (modal) {
+        if (modal !== this._staticModal) {
             const classes = "mx_Dialog_wrapper "
                 + (this._staticModal ? "mx_Dialog_wrapperWithStaticUnder " : '')
                 + (modal.className ? modal.className : '');
@@ -285,7 +304,7 @@ class ModalManager {
                     <div className="mx_Dialog">
                         {modal.elem}
                     </div>
-                    <div className="mx_Dialog_background" onClick={this.closeAll}></div>
+                    <div className="mx_Dialog_background" onClick={this.onBackgroundClick}></div>
                 </div>
             );
 

src/i18n/strings/en_EN.json

@@ -60,6 +60,8 @@
     "Server may be unavailable, overloaded, or you hit a bug.": "Server may be unavailable, overloaded, or you hit a bug.",
     "The server does not support the room version specified.": "The server does not support the room version specified.",
     "Failure to create room": "Failure to create room",
+    "Cancel entering passphrase?": "Cancel entering passphrase?",
+    "If you cancel now, you won't complete your secret storage operation!": "If you cancel now, you won't complete your secret storage operation!",
     "Setting up keys": "Setting up keys",
     "Send anyway": "Send anyway",
     "Send": "Send",