#136: add an option to close popup by clicking on overlay

src/components/ui/popup/PopupStack.jsx

@@ -29,7 +29,7 @@ export class PopupStack extends Component {
                         : {...defaultProps, ...popup.props};
 
                     return (
-                        <div className={styles.overlay} key={popup.type + index}>
+                        <div className={styles.overlay} key={index} onClick={this.onOverlayClick(popup, props)}>
                             <div className={styles.popupWrapper}>
                                 <div className={styles.popup}>
                                     <Popup {...props} />
@@ -45,6 +45,18 @@ export class PopupStack extends Component {
     onClose(popup) {
         return this.props.destroy.bind(null, popup);
     }
+
+    onOverlayClick(popup, popupProps) {
+        return (event) => {
+            if (event.target !== event.currentTarget || popupProps.disableOverlayClose) {
+                return;
+            }
+
+            event.preventDefault();
+
+            this.props.destroy(popup);
+        };
+    }
 }
 
 import { connect } from 'react-redux';

src/pages/profile/ProfilePage.jsx

@@ -76,6 +76,7 @@ export default connect(null, {
             return new Promise((resolve) => {
                 dispatch(createPopup(PasswordRequestForm, (props) => ({
                     form,
+                    disableOverlayClose: true,
                     onSubmit: () => {
                         form.beginLoading();
                         sendData()