Can't Close Modal

src/client/js/components/Admin/Users/PasswordResetDoneModal.jsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import Modal from 'react-bootstrap/es/Modal';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-import toastError from '../../../util/apiNotification';
-import AppContainer from '../../../services/AppContainer';
-
-class PasswordResetDoneModal extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isOpenThisModal: false,
-      temporaryPassword: [],
-    };
-
-    this.isShow = this.isShow.bind(this);
-    this.onHideDoneModal = this.onHideDoneModal.bind(this);
-    this.resetPassword = this.resetPassword.bind(this);
-  }
-
-  isShow() {
-    this.setState({ isOpenThisModal: true });
-  }
-
-  onHideDoneModal() {
-    this.setState({ isOpenThisModal: false });
-  }
-
-  async resetPassword() {
-    const { appContainer, user } = this.props;
-
-    const res = await appContainer.apiPost('/admin/users.resetPassword', { user_id: user._id });
-    if (res.ok) {
-      this.setState({ temporaryPassword: res.newPassword });
-      this.setState({ isOpenThisModal: true });
-    }
-    else {
-      toastError('Failed to reset password');
-    }
-  }
-
-
-  render() {
-    const { t, user } = this.props;
-
-    return (
-      <div>
-        <button type="submit" className="btn btn-primary" onClick={this.isShow && this.resetPassword}>
-          { t('user_management.reset_password')}
-        </button>
-        <Modal show={this.state.isOpenThisModal} onHide={this.onHideDoneModal && this.props.onHideModal}>
-          <Modal.Header className="modal-header" closeButton>
-            <Modal.Title>
-              { t('user_management.reset_password') }
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <div>
-              <p className="alert alert-danger">{ t('user_management.password_reset_message') }</p>
-              <p>
-                { t('user_management.target_user') }: <code>{ user.email }</code>
-              </p>
-              <p>
-                { t('user_management.new_password') }: <code>{ this.state.temporaryPassword }</code>
-              </p>
-            </div>
-          </Modal.Body>
-          <Modal.Footer>
-            <div>
-              <button type="submit" className="btn btn-primary" onClick={this.onHideDoneModal && this.props.onHideModal}>OK</button>
-            </div>
-          </Modal.Footer>
-        </Modal>
-      </div>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const PasswordResetDoneModalWrapper = (props) => {
-  return createSubscribedElement(PasswordResetDoneModal, props, [AppContainer]);
-};
-
-PasswordResetDoneModal.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
-  user: PropTypes.object.isRequired,
-  onHideModal: PropTypes.func.isRequired,
-};
-
-export default withTranslation()(PasswordResetDoneModalWrapper);

src/client/js/components/Admin/Users/PasswordResetModal.jsx

@@ -3,38 +3,18 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import Modal from 'react-bootstrap/es/Modal';
-import PasswordResetDoneModal from './PasswordResetDoneModal';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
 class PasswordResetModal extends React.Component {
 
-  constructor() {
-    super();
-
-    this.state = {
-      isOpenModal: false,
-    };
-
-    this.isShow = this.isShow.bind(this);
-    this.onHide = this.onHide.bind(this);
-  }
-
-  isShow() {
-    this.setState({ isOpenModal: true });
-  }
-
-  onHide() {
-    this.setState({ isOpenModal: false });
-  }
-
   render() {
     const { t, user } = this.props;
 
     return (
       <div>
-        <Modal show={this.state.isOpenModal} onHide={this.onHide}>
+        <Modal show={this.props.isOpenPasswordResetModal} onHide={this.props.onHideModal}>
           <Modal.Header className="modal-header" closeButton>
             <Modal.Title>
               {t('user_management.reset_password')}
@@ -49,10 +29,34 @@ class PasswordResetModal extends React.Component {
               <p>
                 { t('user_management.target_user') }: <code>{ user.email }</code>
               </p>
-              <PasswordResetDoneModal
-                user={user}
-                onHideModal={this.onHide}
-              />
+              <div>
+                <button type="submit" className="btn btn-primary" onClick={this.props.isShowDoneModal && this.props.resetPassword}>
+                  { t('user_management.reset_password')}
+                </button>
+                <Modal show={this.props.isOpenPasswordResetDoneModal} onHide={this.props.onHideDoneModal && this.props.onHideModal}>
+                  <Modal.Header className="modal-header" closeButton>
+                    <Modal.Title>
+                      { t('user_management.reset_password') }
+                    </Modal.Title>
+                  </Modal.Header>
+                  <Modal.Body>
+                    <div>
+                      <p className="alert alert-danger">{ t('user_management.password_reset_message') }</p>
+                      <p>
+                        { t('user_management.target_user') }: <code>{ user.email }</code>
+                      </p>
+                      <p>
+                        { t('user_management.new_password') }: <code>{ this.props.temporaryPassword }</code>
+                      </p>
+                    </div>
+                  </Modal.Body>
+                  <Modal.Footer>
+                    <div>
+                      <button type="submit" className="btn btn-primary" onClick={this.props.onHideDoneModal && this.props.onHideModal}>OK</button>
+                    </div>
+                  </Modal.Footer>
+                </Modal>
+              </div>
             </div>
           </Modal.Body>
         </Modal>
@@ -75,6 +79,14 @@ PasswordResetModal.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   user: PropTypes.object.isRequired,
+  isOpenPasswordResetModal: PropTypes.bool,
+  isOpenPasswordResetDoneModal: PropTypes.bool,
+  temporaryPassword: PropTypes.array,
+  isShow: PropTypes.func,
+  onHideModal: PropTypes.func.isRequired,
+  isShowDoneModal: PropTypes.func.isRequired,
+  onHideDoneModal: PropTypes.func.isRequired,
+  resetPassword: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(PasswordResetModalWrapper);

src/client/js/components/Admin/Users/RemoveAdminForm.jsx

@@ -25,6 +25,7 @@ class AdminMenuForm extends React.Component {
         {user.username !== me
           ? (
             <form action="/admin/user/+ {user._id} +/removeFromAdmin" method="post">
+              <input type="hidden" />
               <i className="icon-fw icon-user-unfollow mb-2"></i> { t('user_management.remove_admin_access') }
             </form>
 

src/client/js/components/Admin/Users/UserMenu.jsx

@@ -9,11 +9,56 @@ import RemoveUserForm from './UserRemoveForm';
 import RemoveAdminForm from './RemoveAdminForm';
 import GiveAdminForm from './GiveAdminForm';
 
+import toastError from '../../../util/apiNotification';
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
 class UserMenu extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpenPasswordResetModal: false,
+      isOpenPasswordResetDoneModal: false,
+      temporaryPassword: [],
+    };
+
+    this.isShow = this.isShow.bind(this);
+    this.onHideModal = this.onHideModal.bind(this);
+    this.isShowDoneModal = this.isShowDoneModal.bind(this);
+    this.onHideDoneModal = this.onHideDoneModal.bind(this);
+    this.resetPassword = this.resetPassword.bind(this);
+  }
+
+  isShow() {
+    this.setState({ isOpenPasswordResetModal: true });
+  }
+
+  onHideModal() {
+    this.setState({ isOpenPasswordResetModal: false });
+  }
+
+  isShowDoneModal() {
+    this.setState({ isOpenPasswordResetDoneModal: true });
+  }
+
+  onHideDoneModal() {
+    this.setState({ isOpenPasswordResetDoneModal: false });
+  }
+
+  async resetPassword() {
+    const { appContainer, user } = this.props;
+
+    const res = await appContainer.apiPost('/admin/users.resetPassword', { user_id: user._id });
+    if (res.ok) {
+      this.setState({ temporaryPassword: res.newPassword });
+      this.setState({ isOpenPasswordResetDoneModal: true });
+    }
+    else {
+      toastError('Failed to reset password');
+    }
+  }
 
   render() {
     const { t, user } = this.props;
@@ -29,7 +74,17 @@ class UserMenu extends React.Component {
             <li>
               <a onClick={this.isShow}>
                 <i className="icon-fw icon-key"></i>{ t('user_management.reset_password') }
-                <PasswordResetModal user={user} />
+                <PasswordResetModal
+                  user={this.props.user}
+                  isOpenPasswordResetModal={this.state.isOpenPasswordResetModal}
+                  isOpenPasswordResetDoneModal={this.state.isOpenPasswordResetDoneModal}
+                  temporaryPassword={this.state.temporaryPassword}
+                  isShow={this.isShow}
+                  onHideModal={this.onHideModal}
+                  isShowDoneModal={this.isShowDoneModal}
+                  onHideDoneModal={this.onHideDoneModal}
+                  resetPassword={this.resetPassword}
+                />
               </a>
             </li>
             <li className="divider"></li>
@@ -62,6 +117,7 @@ UserMenu.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   user: PropTypes.object.isRequired,
+  isShow: PropTypes.func.isRequired,
 };
 
 export default withTranslation()(UserMenuWrapper);

src/client/js/components/Admin/Users/UserTable.jsx

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import dateFnsFormat from 'date-fns/format';
+
 import UserPicture from '../../User/UserPicture';
 import UserMenu from './UserMenu';
 
@@ -10,14 +11,6 @@ import AppContainer from '../../../services/AppContainer';
 
 class UserTable extends React.Component {
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-
-    };
-  }
-
 
   render() {
     const { t } = this.props;